/* ============================================================
   Dashboard — Reference-style clean minimal layout
   ============================================================ */


/* ── KPI Stat Card (soft tinted background by default) ───── */
.kpi-card {
    background: linear-gradient(135deg, rgba(0, 105, 166, 0.02) 0%, rgba(9, 165, 190, 0.015) 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
    padding: 1.25rem 1.375rem;
    height: 100%;
    transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.kpi-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(0, 105, 166, 0.04) 0%, rgba(9, 165, 190, 0.03) 100%);
}

.kpi-card-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-sub, #6b7280);
    margin-bottom: 0.5rem;
}

.kpi-card-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kpi-card-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--bs-heading-color, #1e2022);
    letter-spacing: -0.03em;
    line-height: 1;
}

.kpi-card-delta {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 2rem;
    white-space: nowrap;
}

.kpi-delta-up,
.stat-widget-change-up,
.stat-card-delta-up,
.schedule-status-inroom { color: #059669; background: rgba(5, 150, 105, 0.1); }

.kpi-delta-down,
.stat-widget-change-down,
.stat-card-delta-down { color: #dc2626; background: rgba(220, 38, 38, 0.1); }

.kpi-delta-flat { color: var(--text-sub); background: rgba(113, 134, 157, 0.08); }

.kpi-card-compare {
    font-size: 0.6875rem;
    color: var(--text-sub);
    margin-top: 0.375rem;
}


/* ── Dashboard Section Card ──────────────────────────────── */
.dash-card {
    background: linear-gradient(180deg, var(--bs-body-bg) 0%, rgba(248, 250, 252, 0.8) 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.dash-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.dash-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.dash-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--bs-heading-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dash-card-body { padding: 1.25rem; }
.dash-card-body-flush { padding: 0; }

.dash-card-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    background: rgba(0, 0, 0, 0.01);
}


/* ── Priority Tasks List (reference sidebar) ─────────────── */
.priority-task-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: background 0.15s ease;
}

.priority-task-item:last-child { border-bottom: none; }
.priority-task-item:hover { background: rgba(0, 0, 0, 0.01); margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }

.priority-task-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.priority-task-content { flex: 1; min-width: 0; }

.priority-task-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    margin-bottom: 0.125rem;
}

.priority-task-meta {
    font-size: 0.6875rem;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.priority-task-arrow {
    color: var(--text-sub);
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

.priority-task-item:hover .priority-task-arrow { opacity: 1; }


/* ── Data Table (reference clean style) ──────────────────── */
.dash-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.dash-table th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-sub);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

.dash-table td {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--bs-heading-color);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    vertical-align: middle;
}

.dash-table tr:last-child td { border-bottom: none; }
.dash-table tr:hover td { background: rgba(0, 0, 0, 0.01); }

.dash-table-name {
    font-weight: 600;
    color: var(--bs-heading-color);
}

.dash-table-sub {
    font-size: 0.6875rem;
    color: var(--text-sub);
}


/* ── Tab Pills (reference top nav) ──────────────────────── */
.dash-tab-pills {
    display: inline-flex;
    background: var(--bs-gray-100, #f5f5f5);
    border-radius: 2rem;
    padding: 3px;
    gap: 2px;
}

.dash-tab-pill {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-sub);
    border-radius: 2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.dash-tab-pill:hover { color: var(--bs-heading-color); }
.dash-tab-pill.active { background: var(--bs-body-bg); color: var(--bs-heading-color); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }


/* ── Status Badge Dots ───────────────────────────────────── */
.status-dot-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-dot-inline::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot-inline.dot-success::before { background: var(--bs-success); }
.status-dot-inline.dot-warning::before { background: var(--bs-warning); }
.status-dot-inline.dot-danger::before  { background: var(--bs-danger); }
.status-dot-inline.dot-info::before    { background: var(--bs-info); }
.status-dot-inline.dot-primary::before { background: var(--bs-primary); }
.status-dot-inline.dot-muted::before   { background: #dee2e6; }


/* ── Chart container heights ─────────────────────────────── */


/* ── Welcome Banner ──────────────────────────────────────── */
.welcome-banner {
    background: linear-gradient(135deg, #1a6dca 0%, #4f46e5 60%, #6366f1 100%);
    box-shadow: 0 4px 24px rgba(79, 70, 229, 0.2);
}

.welcome-banner:hover {
    box-shadow: 0 4px 24px rgba(79, 70, 229, 0.2);
    transform: none;
}

.welcome-banner .btn-light {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.welcome-banner .btn-light:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}


/* ── Chart Containers ─────────────────────────────────────── */
.chart-container {
    position: relative;
    width: 100%;
    padding: 1rem;
}

.chart-container canvas { max-width: 100%; }

.chart-container-sm { height: 200px; }
.chart-container-md { height: 300px; }
.chart-container-lg { height: 400px; }
.chart-container-xl { height: 500px; }

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-header .chart-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    margin: 0;
}

.chart-header .chart-subtitle {
    font-size: 0.8125rem;
    color: var(--text-sub);
    margin: 0;
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 0 0;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-sub);
}

.chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Period selector tabs */
.chart-period-tabs {
    display: flex;
    background: var(--bs-gray-100);
    border-radius: var(--bs-border-radius-pill);
    padding: 3px;
    gap: 2px;
}

.chart-period-tab {
    padding: 0.3125rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-sub);
    border: none;
    background: transparent;
    border-radius: var(--bs-border-radius-pill);
    cursor: pointer;
    transition:
        background-color var(--dur-fast) ease,
        color var(--dur-fast) ease;
}

.chart-period-tab:hover { color: var(--bs-heading-color); }

.chart-period-tab.active {
    background: var(--bs-body-bg);
    color: var(--bs-heading-color);
    box-shadow: var(--shadow-sm);
}


/* ── Stat Widgets ─────────────────────────────────────────── */
.stat-widget {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
}

.stat-widget-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    font-size: 1.25rem;
    transition: transform var(--dur-normal) var(--ease-spring);
}

.card:hover .stat-widget-icon { transform: scale(1.05); }

.stat-widget-body { flex: 1; min-width: 0; }

.stat-widget-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-sub);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-widget-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bs-heading-color);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.stat-widget-change {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--bs-border-radius-pill);
}

.stat-widget-change-neutral { color: var(--text-sub); background: rgba(113, 134, 157, 0.08); }

.stat-widget-sparkline { height: 40px; margin-top: 0.75rem; }

/* Mini stat */
.mini-stat { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; }
.mini-stat-dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mini-stat-label { font-size: 0.8125rem; color: var(--text-sub); flex: 1; }
.mini-stat-value { font-size: 0.9375rem; font-weight: 650; color: var(--bs-heading-color); }

/* Stat grid */
.stat-grid   { display: grid; gap: 1rem; }
.stat-grid-2 { grid-template-columns: repeat(2, 1fr); }
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }


/* ── Enhanced Stat Card (reference style) ─────────────────── */
.stat-card-enhanced {
    background: var(--bs-body-bg);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-card-enhanced:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.stat-card-enhanced .stat-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 0.875rem;
}

.stat-card-enhanced .stat-card-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-sub, #6b7280);
    margin-bottom: 0.375rem;
}

.stat-card-enhanced .stat-card-value {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--bs-heading-color, #1e2022);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.stat-card-enhanced .stat-card-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 2rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.stat-card-delta-flat { color: var(--text-sub); background: rgba(113, 134, 157, 0.1); }

/* Mini sparkline bar (reference: horizontal colored blocks) */
.spark-bar-row {
    display: flex;
    gap: 3px;
    margin-top: 0.75rem;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.spark-bar-row .spark-bar-segment {
    flex: 1;
    border-radius: 3px;
    min-width: 4px;
    opacity: 0.35;
    transition: opacity 0.2s ease;
}

.spark-bar-row .spark-bar-segment:last-child { opacity: 1; }
.spark-bar-row .spark-bar-segment:nth-last-child(2) { opacity: 0.7; }
.spark-bar-row .spark-bar-segment:nth-last-child(3) { opacity: 0.55; }


/* ── Schedule Timeline (reference style) ─────────────────── */
.schedule-timeline { list-style: none; padding: 0; margin: 0; }

.schedule-timeline-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease;
}

.schedule-timeline-item:last-child { border-bottom: none; }
.schedule-timeline-item:hover { background: rgba(0, 0, 0, 0.015); border-radius: 0.5rem; }

.schedule-time {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-sub, #6b7280);
    min-width: 44px;
    text-align: center;
    flex-shrink: 0;
}

.schedule-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.schedule-avatar-primary   { background: var(--bs-primary); }
.schedule-avatar-info      { background: var(--bs-info); }
.schedule-avatar-success   { background: var(--bs-success); }
.schedule-avatar-warning   { background: var(--bs-warning); }
.schedule-avatar-danger    { background: var(--bs-danger); }

.schedule-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-heading-color, #1e2022);
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.schedule-status-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 2rem;
    flex-shrink: 0;
}

.schedule-status-done     { color: var(--text-sub); background: rgba(0,0,0,0.04); }
.schedule-status-next     { color: var(--bs-danger); background: transparent; font-weight: 700; }
.schedule-status-waiting  { color: var(--bs-warning); background: rgba(255, 137, 86, 0.1); }
.schedule-status-upcoming { color: var(--text-sub); }


/* ── Insights Panel (reference style) ────────────────────── */
.insights-panel {
    background: linear-gradient(135deg, #f0fdf4 0%, #f0f9ff 100%);
    border: 1px solid rgba(0, 201, 167, 0.15);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
}

.insights-panel .insight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    color: var(--bs-heading-color);
    line-height: 1.4;
}

.insight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.375rem;
}

.insight-dot-success { background: var(--bs-success); }
.insight-dot-warning { background: var(--bs-warning); }
.insight-dot-info    { background: var(--bs-info); }
.insight-dot-primary { background: var(--bs-primary); }
.insight-dot-danger  { background: var(--bs-danger); }

.insights-panel .insight-label {
    font-weight: 700;
    margin-right: 0.25rem;
}

.insights-live-badge {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-success);
    border: 1.5px solid var(--bs-success);
    border-radius: 2rem;
    padding: 0.125rem 0.5rem;
}


/* ── Quick Action Grid (reference style) ─────────────────── */
.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 1rem 0.5rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0.75rem;
    color: var(--bs-heading-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.quick-action-btn i {
    font-size: 1.25rem;
    color: var(--text-sub);
    transition: color 0.2s ease;
}

.quick-action-btn:hover {
    background: var(--soft-primary-bg, rgba(0, 105, 166, 0.06));
    border-color: rgba(0, 105, 166, 0.15);
    color: var(--bs-primary);
    transform: translateY(-1px);
}

.quick-action-btn:hover i { color: var(--bs-primary); }


/* ── Metric Rate Card ────────────────────────────────────── */
.metric-rate-card {
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: 0.75rem;
    transition: transform 0.2s ease;
}

.metric-rate-card:hover { transform: scale(1.02); }

.metric-rate-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.metric-rate-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-sub);
    margin-top: 0.375rem;
}


/* ── Progress Height Utilities ───────────────────────────── */
.progress-height-4  { height: 4px; }
.progress-height-6  { height: 6px; }
.progress-height-8  { height: 8px; }
.progress-height-10 { height: 10px; }


/* ── Status Dot (animated) ───────────────────────────────── */
.status-dot-live {
    position: relative;
}

.status-dot-live::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(2); opacity: 0; }
}


/* ── Form Stepper ─────────────────────────────────────────── */
.form-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.5rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.form-stepper::-webkit-scrollbar { display: none; }

.form-stepper-step {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    border: 1.5px solid transparent;
    background: transparent;
    position: relative;
    flex-shrink: 0;
}
.form-stepper-step:hover { background: var(--soft-primary-bg, rgba(13, 110, 253, 0.06)); }

.form-stepper-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--bs-gray-300, #dee2e6);
    color: var(--bs-gray-500, #adb5bd);
    background: transparent;
}

.form-stepper-label {
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--bs-gray-500, #adb5bd);
    transition: color 0.25s ease;
    letter-spacing: 0.01em;
}

.form-stepper-icon { display: none; }

.form-stepper-connector {
    flex: 0 0 24px;
    height: 1.5px;
    background: var(--bs-gray-300, #dee2e6);
    transition: background 0.3s ease;
    flex-shrink: 0;
}

/* Active */
.form-stepper-step.active {
    background: var(--soft-primary-bg, rgba(13, 110, 253, 0.08));
    border-color: rgba(13, 110, 253, 0.15);
}
.form-stepper-step.active .form-stepper-num {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}
.form-stepper-step.active .form-stepper-label { color: var(--bs-primary, #0d6efd); }

/* Completed */
.form-stepper-step.completed .form-stepper-num {
    background: var(--bs-success, #198754);
    border-color: var(--bs-success, #198754);
    color: #fff;
}
.form-stepper-step.completed .form-stepper-label { color: var(--text-heading, #1e2022); }
.form-stepper-connector.completed { background: var(--bs-success, #198754); }

/* Error */
.form-stepper-step.has-error .form-stepper-num {
    background: var(--bs-danger, #dc3545);
    border-color: var(--bs-danger, #dc3545);
    color: #fff;
    animation: stepShake 0.4s ease;
}
.form-stepper-step.has-error .form-stepper-label { color: var(--bs-danger, #dc3545); }

/* Form section */
.form-section-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-heading, #1e2022);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.04);
}
.form-section-title i { font-size: 1rem; opacity: 0.7; }

/* Submit footer */
.form-submit-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.85);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}


/* ── Soft Tinted Backgrounds (light transparent pastel) ──── */
.bg-tint-primary   { background: rgba(0, 105, 166, 0.06) !important; }
.bg-tint-success   { background: rgba(0, 201, 167, 0.06) !important; }
.bg-tint-info      { background: rgba(9, 165, 190, 0.06) !important; }
.bg-tint-warning   { background: rgba(255, 137, 86, 0.06) !important; }
.bg-tint-danger    { background: rgba(237, 76, 120, 0.06) !important; }
.bg-tint-secondary { background: rgba(113, 134, 157, 0.06) !important; }

/* ── Stat Pill Badges (reference: "1 total", "1 active", "0 insured") ── */
.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 2rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.stat-pill-primary   { color: var(--bs-primary);   background: rgba(0, 105, 166, 0.08);  border-color: rgba(0, 105, 166, 0.12); }
.stat-pill-success   { color: var(--bs-success);   background: rgba(0, 201, 167, 0.08);  border-color: rgba(0, 201, 167, 0.12); }
.stat-pill-info      { color: var(--bs-info);      background: rgba(9, 165, 190, 0.08);  border-color: rgba(9, 165, 190, 0.12); }
.stat-pill-warning   { color: var(--bs-warning);   background: rgba(255, 137, 86, 0.08); border-color: rgba(255, 137, 86, 0.12); }
.stat-pill-danger    { color: var(--bs-danger);     background: rgba(237, 76, 120, 0.08); border-color: rgba(237, 76, 120, 0.12); }
.stat-pill-secondary { color: var(--bs-secondary); background: rgba(113, 134, 157, 0.06); border-color: rgba(113, 134, 157, 0.1); }

/* ── Soft Icon Box (reference: large rounded icon with tinted bg) ── */
.icon-box-soft {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    flex-shrink: 0;
}

.icon-box-soft-sm { width: 40px; height: 40px; font-size: 1rem; }
.icon-box-soft-md { width: 56px; height: 56px; font-size: 1.25rem; }
.icon-box-soft-lg { width: 72px; height: 72px; font-size: 1.5rem; }

.icon-box-soft-primary   { background: rgba(0, 105, 166, 0.08); color: var(--bs-primary); }
.icon-box-soft-success   { background: rgba(0, 201, 167, 0.08); color: var(--bs-success); }
.icon-box-soft-info      { background: rgba(9, 165, 190, 0.08); color: var(--bs-info); }
.icon-box-soft-warning   { background: rgba(255, 137, 86, 0.08); color: var(--bs-warning); }
.icon-box-soft-danger    { background: rgba(237, 76, 120, 0.08); color: var(--bs-danger); }
.icon-box-soft-secondary { background: rgba(113, 134, 157, 0.06); color: var(--bs-secondary); }

/* ── Soft Glass Button (reference: "New Patient" button style) ── */
.btn-glass {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
    color: var(--bs-heading-color);
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.btn-glass:hover {
    background: rgba(0, 105, 166, 0.06);
    border-color: rgba(0, 105, 166, 0.12);
    color: var(--bs-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-glass .btn-glass-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 105, 166, 0.08);
    color: var(--bs-primary);
    font-size: 0.75rem;
}

/* ── Tinted KPI Card Variants ── */
.kpi-card-tint-primary   { background: rgba(0, 105, 166, 0.03); border-color: rgba(0, 105, 166, 0.08); }
.kpi-card-tint-success   { background: rgba(0, 201, 167, 0.03); border-color: rgba(0, 201, 167, 0.08); }
.kpi-card-tint-info      { background: rgba(9, 165, 190, 0.03); border-color: rgba(9, 165, 190, 0.08); }
.kpi-card-tint-warning   { background: rgba(255, 137, 86, 0.03); border-color: rgba(255, 137, 86, 0.08); }
.kpi-card-tint-danger    { background: rgba(237, 76, 120, 0.03); border-color: rgba(237, 76, 120, 0.08); }

.kpi-card-tint-primary:hover   { background: rgba(0, 105, 166, 0.06); }
.kpi-card-tint-success:hover   { background: rgba(0, 201, 167, 0.06); }
.kpi-card-tint-info:hover      { background: rgba(9, 165, 190, 0.06); }
.kpi-card-tint-warning:hover   { background: rgba(255, 137, 86, 0.06); }
.kpi-card-tint-danger:hover    { background: rgba(237, 76, 120, 0.06); }

/* ── Tinted Dash Card Header ── */
.dash-card-header-tint-primary   { background: rgba(0, 105, 166, 0.03); }
.dash-card-header-tint-success   { background: rgba(0, 201, 167, 0.03); }
.dash-card-header-tint-info      { background: rgba(9, 165, 190, 0.03); }
.dash-card-header-tint-warning   { background: rgba(255, 137, 86, 0.03); }
.dash-card-header-tint-danger    { background: rgba(237, 76, 120, 0.03); }


/* ── Quick Action Card (modernized soft glass) ───────────── */
.quick-action-card {
    background: rgba(0, 105, 166, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 1rem;
    padding: 1.25rem;
}

.quick-action-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    text-decoration: none;
    color: var(--bs-heading-color);
    transition: all 0.15s ease;
}

.quick-action-item:hover {
    background: rgba(0, 105, 166, 0.04);
    color: var(--bs-primary);
    transform: translateX(2px);
}

.quick-action-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.quick-action-item:hover .quick-action-item-icon { transform: scale(1.08); }

.quick-action-item-icon-primary   { background: rgba(0, 105, 166, 0.08); color: var(--bs-primary); }
.quick-action-item-icon-success   { background: rgba(0, 201, 167, 0.08); color: var(--bs-success); }
.quick-action-item-icon-info      { background: rgba(9, 165, 190, 0.08); color: var(--bs-info); }
.quick-action-item-icon-warning   { background: rgba(255, 137, 86, 0.08); color: var(--bs-warning); }
.quick-action-item-icon-danger    { background: rgba(237, 76, 120, 0.08); color: var(--bs-danger); }

.quick-action-item-label {
    font-size: 0.8125rem;
    font-weight: 600;
}

.quick-action-item-desc {
    font-size: 0.6875rem;
    color: var(--text-sub);
    margin-top: 0.0625rem;
}

.quick-action-item-arrow {
    margin-left: auto;
    color: var(--text-sub);
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 0.75rem;
}

.quick-action-item:hover .quick-action-item-arrow { opacity: 0.6; }

/* ── Onboarding Progress Bar ─────────────────────────────── */
.onboard-progress-track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 0.25rem 0;
}

.onboard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-width: 90px;
    position: relative;
}

.onboard-step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--card-bg, #fff);
    border: 2.5px solid var(--border-color, #dee2e6);
    color: var(--text-sub, #6c757d);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}
.onboard-step-dot i { font-size: 0.85rem; }

.onboard-step-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-sub, #6c757d);
    margin-top: 0.4rem;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.onboard-step-sub {
    font-size: 0.65rem;
    color: var(--text-muted, #adb5bd);
    margin-top: 0.1rem;
    white-space: nowrap;
}

/* Connector line */
.onboard-connector {
    flex: 1 1 0;
    min-width: 40px;
    height: 3px;
    background: var(--border-color, #dee2e6);
    margin-top: 16.5px; /* half of dot height */
    border-radius: 2px;
    transition: background 0.4s ease;
}

/* Active step (current) */
.onboard-step.active .onboard-step-dot {
    border-color: var(--bs-primary, #0d6efd);
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
    animation: onboardPulse 2s ease-in-out infinite;
}
.onboard-step.active .onboard-step-label {
    color: var(--bs-primary, #0d6efd);
}
.onboard-step.active .onboard-step-sub {
    color: var(--bs-primary, #0d6efd);
    opacity: 0.7;
}

/* Completed step */
.onboard-step.completed .onboard-step-dot {
    border-color: var(--bs-success, #198754);
    background: var(--bs-success, #198754);
    color: #fff;
}
.onboard-step.completed .onboard-step-label {
    color: var(--text-heading, #1e2022);
}
.onboard-step.completed .onboard-step-sub {
    color: var(--bs-success, #198754);
}
.onboard-connector.completed {
    background: var(--bs-success, #198754);
}

/* Skipped / N/A step */
.onboard-step.skipped .onboard-step-dot {
    border-color: var(--text-muted, #adb5bd);
    background: var(--bs-light, #f8f9fa);
    color: var(--text-muted, #adb5bd);
    border-style: dashed;
}
.onboard-step.skipped .onboard-step-label {
    color: var(--text-muted, #adb5bd);
    text-decoration: line-through;
}

/* Checklist row */
.onboard-checklist {
    border-top: 1px solid var(--border-color, #dee2e6);
    padding-top: 0.75rem;
}
.onboard-check-item {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
}
.onboard-check-item.done {
    background: rgba(25, 135, 84, 0.06);
}
.onboard-check-item i { font-size: 0.85rem; }

/* Pulse animation for active step */
@keyframes onboardPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15); }
    50% { box-shadow: 0 0 0 8px rgba(13, 110, 253, 0.08); }
}

/* ────────────────────────────────────────────────────────────
   Onboarding Hub — refined 2027 SaaS layout
   ──────────────────────────────────────────────────────────── */
.onboarding-hub {
    --oh-surface: var(--card-bg, #fff);
    --oh-surface-soft: #f8fafc;
    --oh-surface-tint: #fbfbff;
    --oh-border: var(--border-color, #eef0f3);
    --oh-border-strong: #e5e7eb;
    --oh-text: var(--text-heading, #0f172a);
    --oh-muted: #94a3b8;
    --oh-sub: #64748b;
    --oh-accent: #6366f1;
    --oh-accent-soft: #eef2ff;
    --oh-accent-tint: rgba(99, 102, 241, .07);
    --oh-success: #10b981;
    --oh-success-soft: #ecfdf5;
    --oh-sky: #0ea5e9;
    --oh-sky-soft: #f0f9ff;
    --oh-mint: #10b981;
    --oh-mint-soft: #ecfdf5;
    --oh-peach: #f59e0b;
    --oh-peach-soft: #fffbeb;
    --oh-violet: #8b5cf6;
    --oh-violet-soft: #f5f3ff;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--oh-border);
    border-radius: 22px;
    background: var(--oh-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, .015) inset;
}

.onboarding-hub::before {
    content: "";
    position: absolute;
    inset: -60% 5% auto 5%;
    height: 220px;
    background: radial-gradient(closest-side, var(--oh-accent-tint), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.onboarding-hub[data-percent="100"]::before {
    background: radial-gradient(closest-side, rgba(16, 185, 129, .10), transparent 70%);
}

.onboarding-hub-header {
    position: relative;
    z-index: 1;
    display: block;
    padding: 1.75rem 2rem 0;
    background: linear-gradient(180deg, var(--oh-accent-tint) 0%, transparent 65%, var(--oh-surface) 100%);
    border-bottom: 1px solid var(--oh-border);
}

@media (max-width: 480px) {
    .onboarding-hub-header { text-align: left; padding: 1.25rem 1.25rem 0; }
    .onboarding-group-strip { justify-content: flex-start; }
}

.onboarding-hub-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--oh-accent);
    margin-bottom: .55rem;
}
.onboarding-hub-eyebrow i { font-size: .85rem; }
.onboarding-hub-eyebrow-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
}
.onboarding-hub-eyebrow-progress {
    color: var(--oh-sub);
    letter-spacing: .08em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.onboarding-hub-titlerow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: .35rem;
}
.onboarding-hub-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.024em;
    color: var(--oh-text);
    line-height: 1.2;
}

.onboarding-status-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid transparent;
    line-height: 1;
}
.onboarding-status-chip i { font-size: .75rem; }
.onboarding-status-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.onboarding-status-chip--success {
    color: #047857;
    background: var(--oh-success-soft);
    border-color: rgba(16, 185, 129, .25);
}
.onboarding-status-chip--info {
    color: #0369a1;
    background: var(--oh-sky-soft);
    border-color: rgba(14, 165, 233, .25);
}
.onboarding-status-chip--danger {
    color: #b91c1c;
    background: #fef2f2;
    border-color: rgba(239, 68, 68, .25);
}
.onboarding-status-chip--muted {
    color: var(--oh-sub);
    background: var(--oh-surface-soft);
    border-color: var(--oh-border-strong);
}

.onboarding-hub-lede {
    color: var(--oh-sub);
    line-height: 1.55;
    font-size: .82rem;
    margin: 0 0 1.1rem;
}

.onboarding-hub-meter {
    position: relative;
    width: 124px;
    height: 124px;
    flex-shrink: 0;
    filter: drop-shadow(0 8px 18px rgba(99, 102, 241, .08));
}
.onboarding-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.onboarding-ring circle {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
}
.onboarding-ring-track { stroke: var(--oh-border); opacity: 1; }
.onboarding-ring-fill {
    stroke: var(--oh-accent);
    transition: stroke-dasharray .9s cubic-bezier(.22, 1, .36, 1);
}
.onboarding-hub[data-percent="100"] .onboarding-ring-fill,
.onboarding-hub-meter--hero[title*="100%"] .onboarding-ring-fill { stroke: var(--oh-success); }
.onboarding-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.onboarding-ring-percent {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--oh-text);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.onboarding-ring-percent span {
    font-size: .9rem;
    font-weight: 600;
    color: var(--oh-muted);
    margin-left: 2px;
}
.onboarding-ring-sub {
    margin-top: .35rem;
    font-size: .7rem;
    font-weight: 700;
    color: var(--oh-sub);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

.onboarding-hub-meter--hero {
    --oh-border: #eef0f3;
    --oh-accent: #6366f1;
    --oh-success: #10b981;
    --oh-text: #0f172a;
    --oh-muted: #94a3b8;
    --oh-sub: #64748b;
    position: relative;
    display: inline-block;
    width: 108px;
    height: 108px;
    flex-shrink: 0;
    text-decoration: none;
    filter: drop-shadow(0 10px 24px rgba(99, 102, 241, .18));
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), filter .25s ease;
}
.onboarding-hub-meter--hero::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0%, #f8fafc 70%, #eef2ff 100%);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
    z-index: 0;
    pointer-events: none;
}
.onboarding-hub-meter--hero .onboarding-ring {
    position: relative;
    z-index: 1;
    display: block;
}
.onboarding-hub-meter--hero .onboarding-ring-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.onboarding-hub-meter--hero:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 14px 28px rgba(99, 102, 241, .28));
}
.onboarding-hub-meter--hero .onboarding-ring circle { stroke-width: 8; }
.onboarding-hub-meter--hero .onboarding-ring-percent {
    font-size: 1.5rem;
    letter-spacing: -.04em;
    font-weight: 800;
    color: var(--oh-text);
}
.onboarding-hub-meter--hero .onboarding-ring-percent span {
    font-size: .65rem;
    margin-left: 2px;
    font-weight: 700;
    color: var(--oh-muted);
}
.onboarding-hub-meter--hero .onboarding-ring-sub {
    margin-top: .3rem;
    font-size: .58rem;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--oh-sub);
    text-transform: uppercase;
}

.details-hero-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--oh-border, #eef0f3);
    color: var(--oh-sub, #64748b);
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.details-hero-edit i { font-size: .9rem; line-height: 1; }
.details-hero-edit:hover {
    color: var(--oh-accent, #6366f1);
    border-color: rgba(99, 102, 241, .35);
    background: var(--oh-accent-soft, #eef2ff);
    transform: translateY(-1px);
}
.details-hero-edit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--oh-accent, #6366f1) 25%, transparent);
}

.onboarding-hub-meta { min-width: 0; }

.onboarding-tabbar {
    position: relative;
    margin: 0 -2rem;
    padding: 0 2rem;
}

.onboarding-group-strip {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    border-bottom: 1px solid var(--oh-border);
}
.onboarding-group-strip > .onboarding-group-pill {
    flex: 1 1 0;
    min-width: 0;
}
.onboarding-group-strip > .onboarding-group-pill .onboarding-group-pill-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 720px) {
    .onboarding-tabbar { margin: 0 -1.25rem; padding: 0 1.25rem; }
    .onboarding-group-strip {
        gap: .25rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .onboarding-group-strip::-webkit-scrollbar { display: none; }
    .onboarding-group-strip > .onboarding-group-pill { flex: 0 0 auto; }
}

.onboarding-group-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1rem 1rem;
    margin-bottom: -1px;
    border-radius: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--oh-sub);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.onboarding-group-pill::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -1px;
    height: 2px;
    background: var(--oh-accent);
    border-radius: 2px 2px 0 0;
    transition: left .25s cubic-bezier(.22, 1, .36, 1), right .25s cubic-bezier(.22, 1, .36, 1);
}
.onboarding-group-pill:hover {
    color: var(--oh-text);
    text-decoration: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--oh-accent) 6%, transparent));
}
.onboarding-group-pill:hover::after {
    left: 25%;
    right: 25%;
    background: color-mix(in srgb, var(--oh-accent) 35%, transparent);
}
.onboarding-group-pill:focus-visible {
    outline: none;
    background: var(--oh-accent-soft);
    border-radius: 8px 8px 0 0;
}
.onboarding-group-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--oh-surface-soft);
    border: 1px solid var(--oh-border);
    color: var(--oh-sub);
    font-size: .78rem;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.onboarding-group-pill-icon i { line-height: 1; }
.onboarding-group-pill-count {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--oh-surface-soft);
    color: var(--oh-sub);
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--oh-border);
    line-height: 1.4;
}
.onboarding-group-pill-count-sep {
    opacity: .45;
    margin: 0 1px;
    font-weight: 600;
}
.onboarding-group-pill-tick {
    color: var(--oh-success);
    font-size: .85rem;
    margin-left: -.2rem;
}

.onboarding-group-pill.is-progress { color: var(--oh-accent); }
.onboarding-group-pill.is-progress .onboarding-group-pill-icon {
    color: var(--oh-accent);
    background: var(--oh-accent-soft);
    border-color: rgba(99, 102, 241, .25);
}
.onboarding-group-pill.is-progress .onboarding-group-pill-count {
    color: var(--oh-accent);
    background: var(--oh-accent-soft);
    border-color: rgba(99, 102, 241, .2);
}

.onboarding-group-pill.is-complete { color: #047857; }
.onboarding-group-pill.is-complete .onboarding-group-pill-icon {
    color: #047857;
    background: var(--oh-success-soft);
    border-color: rgba(16, 185, 129, .25);
}
.onboarding-group-pill.is-complete .onboarding-group-pill-count {
    color: #047857;
    background: var(--oh-success-soft);
    border-color: rgba(16, 185, 129, .22);
}

.onboarding-group-pill.is-active {
    color: var(--oh-text);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--oh-accent) 8%, transparent));
}
.onboarding-group-pill.is-active::after {
    left: 0;
    right: 0;
    background: var(--oh-accent);
    height: 3px;
}
.onboarding-group-pill.is-active .onboarding-group-pill-icon {
    color: var(--oh-accent);
    background: var(--oh-accent-soft);
    border-color: rgba(99, 102, 241, .35);
    box-shadow: 0 4px 10px -4px rgba(99, 102, 241, .35);
}
.onboarding-group-pill.is-active.is-progress .onboarding-group-pill-count,
.onboarding-group-pill.is-active .onboarding-group-pill-count {
    color: var(--oh-accent);
    background: #fff;
    border-color: rgba(99, 102, 241, .3);
}
.onboarding-group-pill.is-active.is-complete {
    color: #047857;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--oh-success) 9%, transparent));
}
.onboarding-group-pill.is-active.is-complete::after { background: var(--oh-success); }
.onboarding-group-pill.is-active.is-complete .onboarding-group-pill-icon {
    color: #047857;
    background: var(--oh-success-soft);
    border-color: rgba(16, 185, 129, .35);
    box-shadow: 0 4px 10px -4px rgba(16, 185, 129, .35);
}
.onboarding-group-pill.is-active.is-complete .onboarding-group-pill-count {
    color: #047857;
    background: #fff;
    border-color: rgba(16, 185, 129, .3);
}

.onboarding-next-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: 1.1rem 1.35rem;
    min-width: 220px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--oh-accent-soft), #fff 80%);
    border: 1px solid rgba(99, 102, 241, .25);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.onboarding-next-action::before {
    content: "";
    position: absolute;
    inset: auto -30% -30% auto;
    width: 140px;
    height: 140px;
    background: radial-gradient(closest-side, rgba(99, 102, 241, .14), transparent 70%);
    pointer-events: none;
}
.onboarding-next-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -14px rgba(99, 102, 241, .35), 0 4px 8px -4px rgba(15, 23, 42, .05);
    border-color: rgba(99, 102, 241, .45);
    color: inherit;
}
.onboarding-next-action--success {
    background: linear-gradient(135deg, var(--oh-success-soft), #fff 80%);
    border-color: rgba(16, 185, 129, .3);
}
.onboarding-next-action--success::before {
    background: radial-gradient(closest-side, rgba(16, 185, 129, .14), transparent 70%);
}
.onboarding-next-label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--oh-accent);
}
.onboarding-next-action--success .onboarding-next-label { color: #047857; }
.onboarding-next-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--oh-text);
    margin-top: .3rem;
    letter-spacing: -.018em;
    line-height: 1.25;
}
.onboarding-next-cta {
    margin-top: .65rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--oh-accent);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: gap .2s ease;
}
.onboarding-next-action:hover .onboarding-next-cta { gap: .55rem; }
.onboarding-next-action--success .onboarding-next-cta { color: #047857; }
.onboarding-next-action:hover .onboarding-next-cta i { transform: translateX(2px); }
.onboarding-next-cta i { transition: transform .15s ease; }

.ehr-readiness-sync-state {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--oh-surface);
    border: 1px solid var(--oh-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.ehr-readiness-sync-state.is-ok      { border-color: rgba(16, 185, 129, .25); background: var(--oh-success-soft, rgba(16, 185, 129, .06)); }
.ehr-readiness-sync-state.is-pending { border-color: rgba(245, 158, 11, .25); background: rgba(245, 158, 11, .06); }
.ehr-readiness-sync-state.has-error  { border-color: rgba(239, 68, 68, .3);   background: rgba(239, 68, 68, .06); }
.ehr-readiness-sync-state-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.ehr-readiness-sync-state-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--oh-muted);
    min-width: 110px;
}
.ehr-readiness-sync-state-error {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .2);
    color: #b91c1c;
}
.ehr-readiness-sync-state-error > i { font-size: 1.1rem; line-height: 1.2; flex-shrink: 0; }
.ehr-readiness-sync-state-error-body { display: flex; flex-direction: column; gap: .35rem; flex: 1; min-width: 0; }
.ehr-readiness-sync-state-error-body strong { font-size: .82rem; color: #991b1b; }
.ehr-readiness-sync-state-error-body p {
    margin: 0;
    font-size: .78rem;
    color: #7f1d1d;
    word-break: break-word;
}

.onboarding-hub-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 1.75rem;
    background: linear-gradient(180deg, var(--oh-surface-soft), var(--oh-surface-tint));
}
.onboarding-hub-body[data-onb-panels] {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
}
.onboarding-hub-body[data-onb-panels] > .onboarding-group {
    padding: 1.5rem 1.75rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}
.onboarding-hub-body[data-onb-panels] > .onboarding-group:hover {
    border: 0;
    box-shadow: none;
    transform: none;
}
@media (max-width: 880px) {
    .onboarding-hub-body { grid-template-columns: 1fr; padding: 1.25rem; gap: 1rem; }
}
.onboarding-group {
    --group-tone: var(--oh-accent);
    --group-tone-soft: var(--oh-accent-soft);
    --group-tone-tint: var(--oh-accent-tint);
    padding: 1.4rem 1.5rem 1.25rem;
    background: linear-gradient(180deg, #fff, #fcfcff 96%);
    border: 1px solid var(--oh-border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    scroll-margin-top: 96px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.onboarding-group:target {
    border-color: color-mix(in srgb, var(--group-tone) 55%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--group-tone) 12%, transparent),
                0 18px 38px -22px rgba(15, 23, 42, .18);
    animation: onbGroupTargetPulse .9s ease-out;
}
@keyframes onbGroupTargetPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--group-tone) 35%, transparent); }
    100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--group-tone) 12%, transparent), 0 18px 38px -22px rgba(15, 23, 42, .18); }
}
.onboarding-group:hover {
    border-color: color-mix(in srgb, var(--group-tone) 30%, var(--oh-border-strong));
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, .12);
    transform: translateY(-1px);
}
.onboarding-group.is-complete {
    --group-tone: var(--oh-success);
    --group-tone-soft: var(--oh-success-soft);
    --group-tone-tint: rgba(16, 185, 129, .08);
    border-color: rgba(16, 185, 129, .25);
}

.onboarding-hub-body > .onboarding-group:nth-child(4n+1):not(.is-complete) {
    --group-tone: var(--oh-sky);
    --group-tone-soft: var(--oh-sky-soft);
    --group-tone-tint: rgba(14, 165, 233, .08);
}
.onboarding-hub-body > .onboarding-group:nth-child(4n+2):not(.is-complete) {
    --group-tone: var(--oh-violet);
    --group-tone-soft: var(--oh-violet-soft);
    --group-tone-tint: rgba(139, 92, 246, .08);
}
.onboarding-hub-body > .onboarding-group:nth-child(4n+3):not(.is-complete) {
    --group-tone: var(--oh-peach);
    --group-tone-soft: var(--oh-peach-soft);
    --group-tone-tint: rgba(245, 158, 11, .08);
}
.onboarding-hub-body > .onboarding-group:nth-child(4n+4):not(.is-complete) {
    --group-tone: var(--oh-mint);
    --group-tone-soft: var(--oh-mint-soft);
    --group-tone-tint: rgba(16, 185, 129, .08);
}

.onboarding-group-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
    margin-bottom: 0;
}
.onboarding-group-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: var(--group-tone-soft);
    color: var(--group-tone);
    border: 1px solid color-mix(in srgb, var(--group-tone) 22%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.onboarding-group-heading { min-width: 0; }
.onboarding-group-heading h6 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.018em;
    line-height: 1.2;
    color: var(--oh-text);
}
.onboarding-group-heading p {
    font-size: .76rem;
    line-height: 1.5;
    color: var(--oh-sub);
    margin-top: .25rem;
}
.onboarding-group-count {
    align-self: center;
    font-size: .72rem;
    font-weight: 800;
    color: var(--group-tone);
    font-variant-numeric: tabular-nums;
    padding: .3rem .65rem;
    background: var(--group-tone-soft);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--group-tone) 25%, transparent);
    line-height: 1.2;
    letter-spacing: -.01em;
}
.onboarding-group-count > span { color: var(--oh-muted); font-weight: 600; }
.onboarding-group-bar {
    grid-column: 1 / -1;
    margin-top: .5rem;
    height: 6px;
    border-radius: 999px;
    background: var(--group-tone-tint);
    overflow: hidden;
}
.onboarding-group-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--group-tone), color-mix(in srgb, var(--group-tone) 65%, #fff));
    border-radius: 999px;
    transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
.onboarding-group.is-complete .onboarding-group-bar span {
    background: linear-gradient(90deg, var(--oh-success), #34d399);
}

.onboarding-step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.onboarding-step-item {
    padding: .9rem 0;
    border-top: 1px dashed var(--oh-border);
    transition: opacity .15s ease;
}
.onboarding-step-item:first-child { border-top: none; padding-top: .25rem; }
.onboarding-step-item:last-child { padding-bottom: 0; }

.onboarding-step-marker {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: var(--oh-surface-soft);
    color: var(--oh-muted);
    border: 1px solid var(--oh-border-strong);
    flex-shrink: 0;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.onboarding-step-item.is-done .onboarding-step-marker {
    background: linear-gradient(135deg, var(--oh-success), #34d399);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px -4px rgba(16, 185, 129, .45);
}
.onboarding-step-item.is-pending .onboarding-step-marker {
    color: var(--group-tone, var(--oh-accent));
    background: var(--group-tone-soft, var(--oh-accent-soft));
    border-color: color-mix(in srgb, var(--group-tone, var(--oh-accent)) 30%, transparent);
}
.onboarding-step-item.is-pending:hover .onboarding-step-marker {
    transform: scale(1.04);
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--group-tone, var(--oh-accent)) 40%, transparent);
}
.onboarding-step-item.is-skipped .onboarding-step-marker {
    border-style: dashed;
    color: var(--oh-muted);
    background: transparent;
}

.onboarding-step-body { min-width: 0; padding-right: .5rem; }
.onboarding-step-title {
    font-size: .9rem;
    font-weight: 650;
    color: var(--oh-text);
    letter-spacing: -.008em;
}
.onboarding-step-item.is-skipped .onboarding-step-title {
    color: var(--oh-muted);
    text-decoration: line-through;
}
.onboarding-step-desc {
    margin: .25rem 0 0;
    font-size: .76rem;
    color: var(--oh-sub);
    line-height: 1.5;
}
.onboarding-step-meta {
    margin-top: .5rem;
    font-size: .68rem;
    color: var(--oh-sub);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    background: var(--oh-surface-soft);
    border-radius: 7px;
    border: 1px solid var(--oh-border);
}

.onboarding-step-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.onboarding-step-chip i { font-size: .7rem; }
.onboarding-step-chip--success {
    background: var(--oh-success-soft);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, .22);
}
.onboarding-step-chip--pending {
    background: var(--group-tone-soft, var(--oh-accent-soft));
    color: var(--group-tone, var(--oh-accent));
    border: 1px solid color-mix(in srgb, var(--group-tone, var(--oh-accent)) 22%, transparent);
}
.onboarding-step-chip--muted {
    background: var(--oh-surface-soft);
    color: var(--oh-muted);
    border: 1px solid var(--oh-border);
}
.onboarding-step-chip--info {
    background: rgba(13, 202, 240, .12);
    color: #0aa2c0;
    border: 1px solid rgba(13, 202, 240, .25);
}
.onboarding-step-chip--warning {
    background: rgba(240, 180, 0, .14);
    color: #b88200;
    border: 1px solid rgba(240, 180, 0, .28);
}
.onboarding-step-chip--danger {
    background: rgba(220, 53, 69, .10);
    color: #b02a37;
    border: 1px solid rgba(220, 53, 69, .25);
}

.onboarding-step-action { flex-shrink: 0; }
.onboarding-step-action .btn-soft-primary {
    background: var(--group-tone-soft, var(--oh-accent-soft));
    color: var(--group-tone, var(--oh-accent));
    border: 1px solid color-mix(in srgb, var(--group-tone, var(--oh-accent)) 22%, transparent);
    font-weight: 600;
    transition: all .2s ease;
}
.onboarding-step-action .btn-soft-primary:hover {
    background: var(--group-tone, var(--oh-accent));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--group-tone, var(--oh-accent)) 50%, transparent);
}
.onboarding-step-action .btn-outline-secondary {
    border-color: var(--oh-border-strong);
    color: var(--oh-sub);
}
.onboarding-step-action .btn-outline-secondary:hover {
    background: var(--oh-surface-soft);
    border-color: var(--oh-border-strong);
    color: var(--oh-text);
}

/* Step row + substep block */
.onboarding-step-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
}
.onboarding-step-chip--count {
    background: var(--oh-surface);
    color: var(--oh-sub);
    border: 1px solid var(--oh-border-strong);
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

.onboarding-substep-list {
    margin-top: .85rem;
    margin-left: 50px;  /* align with step body */
    padding: .9rem 1rem;
    background: linear-gradient(180deg, var(--oh-surface-soft), var(--oh-surface-tint));
    border: 1px dashed var(--oh-border-strong);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.onboarding-step-item.is-done .onboarding-substep-list {
    background: linear-gradient(180deg, var(--oh-success-soft), #fff);
    border-color: rgba(16, 185, 129, .22);
    border-style: solid;
}
.onboarding-substep {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    font-size: .75rem;
    line-height: 1.4;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(15, 23, 42, .04);
}
.onboarding-substep:last-child { border-bottom: none; }
.onboarding-substep-tick {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--oh-border-strong);
    flex-shrink: 0;
    font-size: 1rem;
}
.onboarding-substep.is-done .onboarding-substep-tick { color: var(--oh-success); }
.onboarding-substep-label {
    font-weight: 600;
    color: var(--oh-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .76rem;
}
.onboarding-substep.is-pending .onboarding-substep-label { color: var(--oh-sub); font-weight: 500; }
.onboarding-substep-detail {
    color: var(--oh-muted);
    font-size: .68rem;
    text-align: right;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.onboarding-substep.is-done .onboarding-substep-detail { color: #047857; }
.onboarding-substep-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: .7rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--group-tone, var(--oh-accent));
    background: var(--oh-surface);
    border: 1px solid color-mix(in srgb, var(--group-tone, var(--oh-accent)) 22%, transparent);
    text-decoration: none;
    transition: all .2s ease;
}
.onboarding-substep-cta:hover {
    background: var(--group-tone, var(--oh-accent));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--group-tone, var(--oh-accent)) 50%, transparent);
}
.onboarding-substep-footnote {
    margin-top: .45rem;
    font-size: .68rem;
    color: var(--oh-muted);
    font-style: italic;
}

@media (max-width: 540px) {
    .onboarding-substep {
        grid-template-columns: auto 1fr;
    }
    .onboarding-substep-detail {
        grid-column: 2 / -1;
        white-space: normal;
    }
}

/* ────────────────────────────────────────────────────────────
   Clinic Detail Tabs — refined SaaS pattern
   ──────────────────────────────────────────────────────────── */
.clinic-detail-tabs {
    display: inline-flex;
    gap: .15rem;
    padding: .3rem;
    background: #f4f5f7;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    list-style: none;
    flex-wrap: wrap;
}
.clinic-detail-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .55rem 1.1rem;
    border: none;
    border-radius: 7px;
    color: #64748b;
    font-weight: 600;
    font-size: .82rem;
    background: transparent;
    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
    position: relative;
    letter-spacing: -.005em;
}
.clinic-detail-tabs .nav-link i { font-size: .9rem; opacity: .75; }
.clinic-detail-tabs .nav-link:hover {
    color: #0f172a;
}
.clinic-detail-tabs .nav-link.active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .04);
}
.clinic-detail-tabs .nav-link.active i { opacity: 1; color: #6366f1; }
.clinic-detail-tab-badge {
    display: inline-flex;
    align-items: center;
    margin-left: .55rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    background: rgba(99, 102, 241, .12);
    color: #4f46e5;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.clinic-detail-tabs .nav-link:not(.active) .clinic-detail-tab-badge {
    background: #fff;
    color: #64748b;
    border: 1px solid #e5e7eb;
}
.clinic-detail-tab-badge.is-complete {
    background: rgba(16, 185, 129, .14);
    color: #047857;
}
.clinic-detail-tabs .nav-link:not(.active) .clinic-detail-tab-badge.is-complete {
    background: #ecfdf5;
    color: #047857;
    border-color: rgba(16, 185, 129, .2);
}

/* ────────────────────────────────────────────────────────────
   Clinic Details Tab — modern SaaS layout
   ──────────────────────────────────────────────────────────── */
.clinic-details {
    --d-surface: #fff;
    --d-surface-soft: #fafbfc;
    --d-border: #eef0f3;
    --d-border-strong: #e5e7eb;
    --d-text: #0f172a;
    --d-sub: #64748b;
    --d-muted: #94a3b8;
    --d-accent: #6366f1;
    --d-accent-soft: #eef2ff;
    --d-success: #10b981;
    --d-success-soft: #ecfdf5;
    --d-warning: #f59e0b;
    --d-warning-soft: #fffbeb;
    --d-info: #0ea5e9;
    --d-info-soft: #f0f9ff;
    --d-danger: #ef4444;
    --d-danger-soft: #fef2f2;
}

/* ── Hero card ── */
.details-hero {
    background: linear-gradient(180deg, #fbfbff, var(--d-surface));
    border: 1px solid var(--d-border);
    border-radius: 22px;
    padding: 1.85rem 2rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 0 0 1px rgba(15, 23, 42, .015) inset;
    overflow: hidden;
    position: relative;
}
.details-hero::before {
    content: "";
    position: absolute;
    inset: -55% 8% auto 8%;
    height: 220px;
    background: radial-gradient(closest-side, rgba(99, 102, 241, .08), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.details-hero > * { position: relative; z-index: 1; }
.details-hero-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
}
@media (max-width: 720px) {
    .details-hero-row { grid-template-columns: auto minmax(0, 1fr); }
    .details-hero-actions { grid-column: 1 / -1; }
}
.details-hero-avatar {
    width: 100px;
    height: 100px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--d-accent), #8b5cf6);
    color: #fff;
    font-size: 2.4rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 24px 48px -14px rgba(99, 102, 241, .55), inset 0 0 0 2px rgba(255, 255, 255, .25);
    letter-spacing: -.03em;
}
.details-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.details-hero-avatar-form {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.details-hero-avatar-form .details-hero-avatar { position: relative; cursor: pointer; }
.details-hero-avatar__camera {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--d-accent, #6366f1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 6px 14px rgba(99, 102, 241, .45);
    padding: 0;
}
.details-hero-avatar__camera:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 18px rgba(99, 102, 241, .6);
}
.details-hero-avatar__camera:focus-visible {
    outline: 3px solid rgba(99, 102, 241, .35);
    outline-offset: 2px;
}
.details-hero-info { min-width: 0; }
.details-hero-eyebrow {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--d-muted);
    margin-bottom: .15rem;
}
.details-hero-eyebrow-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .12s ease, border-color .12s ease;
}
.details-hero-eyebrow-link:hover,
.details-hero-eyebrow-link:focus-visible {
    color: var(--d-accent);
    border-bottom-color: currentColor;
    outline: none;
}
.details-hero-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--d-text);
    letter-spacing: -.025em;
    margin: 0 0 .55rem;
    line-height: 1.2;
}
.details-hero-tagline {
    margin: 0 0 .65rem;
    color: var(--d-muted);
    font-size: .9rem;
    line-height: 1.45;
}
.details-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.details-hero-actions {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-shrink: 0;
}
.details-hero-actions--grouped {
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .55rem;
    justify-content: flex-end;
}
.details-hero-actions__group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    padding-right: .55rem;
    border-right: 1px solid var(--d-border, #e5e7eb);
}
.details-hero-actions__group:last-child {
    padding-right: 0;
    border-right: 0;
}

/* Pill (used in hero, subscription, EHR) */
.details-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    background: var(--d-surface-soft);
    color: var(--d-sub);
    border: 1px solid var(--d-border-strong);
    line-height: 1.4;
}
.details-pill code {
    color: inherit;
    background: transparent;
    padding: 0;
    font-size: .65rem;
}
.details-pill i { font-size: .75rem; }
.details-pill-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.details-pill--success { color: #047857; background: var(--d-success-soft); border-color: rgba(16, 185, 129, .25); }
.details-pill--info    { color: #0369a1; background: var(--d-info-soft);    border-color: rgba(14, 165, 233, .25); }
.details-pill--warning { color: #b45309; background: var(--d-warning-soft); border-color: rgba(245, 158, 11, .25); }
.details-pill--danger  { color: #b91c1c; background: var(--d-danger-soft);  border-color: rgba(239, 68, 68, .25); }
.details-pill--accent  { color: var(--d-accent); background: var(--d-accent-soft); border-color: rgba(99, 102, 241, .25); }
.details-pill--muted   { color: var(--d-sub); }

a.details-pill,
.details-pill--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.details-pill:hover,
.details-pill--link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .18);
    text-decoration: none;
    color: inherit;
}
a.details-pill:focus-visible,
.details-pill--link:focus-visible {
    outline: 2px solid var(--d-accent);
    outline-offset: 2px;
}
.details-pill__chev {
    font-size: .65rem;
    opacity: 0;
    margin-left: -.15rem;
    transition: opacity .12s ease, transform .12s ease;
}
a.details-pill:hover .details-pill__chev,
.details-pill--link:hover .details-pill__chev {
    opacity: .85;
    transform: translate(1px, -1px);
}

.details-pill-onboarding,
.details-pill-ehr {
    color: var(--d-sub);
    background: var(--d-surface-soft);
    border-color: var(--d-border-strong);
}
.details-pill-onboarding.is-early,
.details-pill-ehr.is-early {
    color: #b45309;
    background: var(--d-warning-soft);
    border-color: rgba(245, 158, 11, .25);
}
.details-pill-onboarding.is-progress,
.details-pill-ehr.is-progress {
    color: var(--d-accent);
    background: var(--d-accent-soft);
    border-color: rgba(99, 102, 241, .25);
}
.details-pill-onboarding.is-complete,
.details-pill-ehr.is-complete {
    color: #047857;
    background: var(--d-success-soft);
    border-color: rgba(16, 185, 129, .25);
}

/* Info grid (4 contact cells) */
.details-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .65rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--d-border);
}
.details-info-grid--flush { margin-top: 0; padding-top: 0; border-top: 0; }
.details-info-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: 10px;
    background: var(--d-surface-soft);
    border: 1px solid var(--d-border);
    transition: border-color .15s ease;
    min-width: 0;
}
.details-info-cell:hover { border-color: var(--d-border-strong); }
.details-info-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .9rem;
    background: var(--d-accent-soft);
    color: var(--d-accent);
}
.details-icon--primary { background: var(--d-accent-soft); color: var(--d-accent); }
.details-icon--success { background: var(--d-success-soft); color: #047857; }
.details-icon--info    { background: var(--d-info-soft); color: #0369a1; }
.details-icon--warning { background: var(--d-warning-soft); color: #b45309; }
.details-info-text { min-width: 0; }
.details-info-label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--d-muted);
}
.details-info-value {
    font-size: .8rem;
    font-weight: 600;
    color: var(--d-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}
.details-info-value a { color: var(--d-accent); text-decoration: none; }
.details-info-value a:hover { text-decoration: underline; }

/* ── Communications inbox + status banner + quick filters ── */
.comms-status-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .85rem;
}
.comms-status-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--d-surface);
    border: 1px solid var(--d-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.comms-status-card--success { border-color: rgba(16, 185, 129, .35); }
.comms-status-card--warning { border-color: rgba(217, 119, 6, .35); }
.comms-status-card--danger  { border-color: rgba(220, 38, 38, .35); }
.comms-status-card__icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--d-accent-soft); color: var(--d-accent);
    font-size: 1.05rem;
}
.comms-status-card--success .comms-status-card__icon { background: var(--d-success-soft); color: #047857; }
.comms-status-card--warning .comms-status-card__icon { background: var(--d-warning-soft); color: #b45309; }
.comms-status-card--danger  .comms-status-card__icon { background: var(--d-danger-soft);  color: #b91c1c; }
.comms-status-card__body { min-width: 0; }
.comms-status-card__eyebrow {
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--d-muted);
}
.comms-status-card__title {
    font-size: .9rem; font-weight: 700; color: var(--d-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comms-status-card__sub { font-size: .72rem; color: var(--d-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comms-status-card__link {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 600; color: var(--d-accent);
    text-decoration: none; padding: .3rem .65rem; border-radius: 999px;
    border: 1px solid var(--d-border-strong);
    background: var(--d-surface-soft);
}
.comms-status-card__link:hover { border-color: var(--d-accent); background: var(--d-accent-soft); }

.comms-quick-filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.comms-quick-filters .details-pill.is-active {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .15);
}
.comms-quick-filters__count {
    font-variant-numeric: tabular-nums;
    margin-left: .15rem;
    opacity: .8;
}

.comms-inbox {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-border);
    border-radius: 18px;
    overflow: hidden;
    min-height: 72vh;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
@media (max-width: 820px) {
    .comms-inbox { grid-template-columns: 1fr; }
}
.comms-inbox__rail {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--d-border);
    background: var(--d-surface-soft);
    min-height: 72vh;
}
.comms-inbox__thread {
    display: flex; flex-direction: column;
    min-height: 72vh;
    background: var(--d-surface);
}
.comms-inbox__filters {
    position: sticky; top: 0; z-index: 2;
    padding: .85rem 1rem; background: var(--d-surface-soft);
    border-bottom: 1px solid var(--d-border);
    display: flex; flex-direction: column; gap: .6rem;
}
.comms-inbox__search { position: relative; }
.comms-inbox__search > i {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    color: var(--d-muted); font-size: .8rem;
}
.comms-inbox__search input {
    padding-left: 2rem; border-radius: 999px;
    border: 1px solid var(--d-border-strong); background: var(--d-surface);
}
.comms-inbox__channel-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.comms-inbox__pill-count {
    font-variant-numeric: tabular-nums; margin-left: .15rem; opacity: .75;
}
.comms-inbox__thread-list { flex: 1; overflow-y: auto; padding: .4rem 0; }
.comms-inbox__list-empty {
    padding: 2.5rem 1rem; text-align: center; color: var(--d-sub);
}
.comms-inbox__list-empty i { font-size: 2rem; opacity: .6; display: block; margin-bottom: .5rem; }

.comms-thread-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--d-border);
    text-decoration: none; color: inherit;
    transition: background .12s ease, border-color .12s ease;
}
.comms-thread-item:hover { background: var(--d-accent-soft); color: inherit; }
.comms-thread-item.is-selected {
    background: var(--d-accent-soft);
    box-shadow: inset 3px 0 0 var(--d-accent);
}
.comms-thread-item__avatar {
    width: 38px; height: 38px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--d-accent), #8b5cf6);
    color: #fff; font-weight: 700; font-size: .8rem;
    letter-spacing: -.02em;
}
.comms-thread-item__avatar--lg { width: 44px; height: 44px; font-size: .9rem; border-radius: 14px; }
.comms-thread-item__body { min-width: 0; }
.comms-thread-item__row {
    display: flex; align-items: center; gap: .5rem; min-width: 0;
}
.comms-thread-item__name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .85rem; font-weight: 600; color: var(--d-text);
}
.comms-thread-item--unread .comms-thread-item__name { font-weight: 800; }
.comms-thread-item__time { font-size: .68rem; color: var(--d-muted); white-space: nowrap; flex-shrink: 0; }
.comms-thread-item__preview {
    font-size: .75rem; color: var(--d-sub);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .1rem;
}
.comms-thread-item--unread .comms-thread-item__preview { color: var(--d-text); }
.comms-thread-item__meta {
    display: flex; align-items: center; gap: .35rem; margin-top: .35rem;
}
.comms-thread-item__unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--d-accent);
    flex-shrink: 0;
}
.comms-thread-item__unread-count {
    font-size: .65rem; font-weight: 700;
    color: var(--d-accent);
    background: var(--d-accent-soft);
    border-radius: 999px;
    padding: 0 .4rem;
    font-variant-numeric: tabular-nums;
}

.comms-inbox__thread-header {
    position: sticky; top: 0; z-index: 1;
    padding: .85rem 1.15rem;
    background: var(--d-surface);
    border-bottom: 1px solid var(--d-border);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.comms-inbox__thread-identity {
    display: flex; align-items: center; gap: .65rem; min-width: 0;
}
.comms-inbox__thread-name {
    font-size: .95rem; font-weight: 700; color: var(--d-text); margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comms-inbox__thread-body {
    flex: 1; overflow-y: auto; padding: 1.15rem 1.25rem;
    background: var(--d-surface-soft);
}
.comms-inbox__empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 3rem 1.5rem; gap: .35rem; color: var(--d-sub);
}
.comms-inbox__empty-art {
    width: 86px; height: 86px; border-radius: 26px;
    background: var(--d-accent-soft); color: var(--d-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.4rem; margin-bottom: .75rem;
}
.comms-inbox__empty-title { font-size: 1rem; font-weight: 700; color: var(--d-text); margin: 0; }
.comms-inbox__empty-sub { font-size: .8rem; color: var(--d-sub); margin: 0 0 .85rem; }

.comms-thread { display: flex; flex-direction: column; }
.comms-message {
    display: flex; flex-direction: column;
    max-width: 78%;
    margin-bottom: .9rem;
}
.comms-message--inbound  { align-self: flex-start;  align-items: flex-start; }
.comms-message--outbound { align-self: flex-end;    align-items: flex-end; }
.comms-message__bubble {
    border-radius: 14px;
    padding: .65rem .85rem;
    background: var(--d-surface);
    border: 1px solid var(--d-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    font-size: .85rem; line-height: 1.45; color: var(--d-text);
    max-width: 100%;
}
.comms-message--outbound .comms-message__bubble {
    background: var(--d-accent-soft);
    border-color: rgba(99, 102, 241, .25);
}
.comms-message__head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin-bottom: .35rem; font-size: .7rem; color: var(--d-muted);
}
.comms-message__author { font-weight: 700; color: var(--d-text); font-size: .72rem; }
.comms-message__time { margin-left: auto; font-variant-numeric: tabular-nums; }
.comms-message__subject { font-weight: 700; margin-bottom: .25rem; font-size: .82rem; color: var(--d-text); }
.comms-message__attachments { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.comms-message__status {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .65rem; font-weight: 600;
    margin-top: .25rem;
}
.comms-message__status--success { color: #047857; }
.comms-message__status--danger  { color: #b91c1c; }
.comms-message__status--info    { color: #0369a1; }
.comms-message__status--muted   { color: var(--d-sub); }
.comms-message-empty {
    text-align: center; padding: 2.5rem 1rem; color: var(--d-sub);
}
.comms-message-empty i { font-size: 2rem; opacity: .6; display: block; margin-bottom: .5rem; }

.comms-composer {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr) auto;
    gap: .65rem;
    padding: .85rem 1.15rem;
    border-top: 1px solid var(--d-border);
    background: var(--d-surface);
    align-items: end;
}
.comms-composer__channel select { border-radius: 999px; }
.comms-composer__channel .form-label {
    display: block; font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--d-muted);
    margin-bottom: .25rem;
}
.comms-composer__body textarea {
    width: 100%; min-height: 64px; resize: vertical;
    border: 1px solid var(--d-border-strong); border-radius: 12px;
    padding: .55rem .75rem; font-size: .85rem;
    background: var(--d-surface);
}
.comms-composer__body textarea:focus {
    outline: 2px solid rgba(99, 102, 241, .25); outline-offset: 1px;
    border-color: var(--d-accent);
}

.details-hero-address {
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--d-surface-soft);
    border: 1px solid var(--d-border);
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .8rem;
    color: var(--d-sub);
}
.details-hero-address i { color: var(--d-accent); margin-top: 2px; }
.details-hero-address span { flex: 1; line-height: 1.5; }

/* ── Stats strip (refined KPI cards) ── */
.details-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.details-stat {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.3rem;
    background: linear-gradient(180deg, #fff, #fbfbff 96%);
    border: 1px solid var(--d-border);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.details-stat::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--d-accent);
    opacity: 0;
    transition: opacity .15s ease;
}
.details-stat:hover {
    border-color: rgba(99, 102, 241, .35);
    box-shadow: 0 14px 30px -14px rgba(15, 23, 42, .14), 0 4px 8px -4px rgba(15, 23, 42, .04);
    color: inherit;
    transform: translateY(-2px);
}
.details-stat:hover::before { opacity: 1; }
.details-stat[data-tone="primary"]::before { background: var(--d-accent); }
.details-stat[data-tone="success"]::before { background: var(--d-success); }
.details-stat[data-tone="info"]::before    { background: var(--d-info); }
.details-stat[data-tone="warning"]::before { background: var(--d-warning); }
.details-stat-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.details-stat[data-tone="primary"] .details-stat-icon { background: var(--d-accent-soft); color: var(--d-accent); }
.details-stat[data-tone="success"] .details-stat-icon { background: var(--d-success-soft); color: #047857; }
.details-stat[data-tone="info"]    .details-stat-icon { background: var(--d-info-soft); color: #0369a1; }
.details-stat[data-tone="warning"] .details-stat-icon { background: var(--d-warning-soft); color: #b45309; }
.details-stat-body { min-width: 0; }
.details-stat-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--d-muted);
}
.details-stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--d-text);
    line-height: 1.05;
    margin-top: .2rem;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.details-stat-sub {
    font-size: .68rem;
    color: var(--d-sub);
    margin-top: .15rem;
}
.details-stat-arrow {
    color: var(--d-muted);
    font-size: 1rem;
    transition: color .15s ease, transform .15s ease;
}
.details-stat:hover .details-stat-arrow {
    color: var(--d-accent);
    transform: translate(2px, -2px);
}

/* ── Section card (replaces card-flush usage in details) ── */
.details-section {
    background: var(--d-surface);
    border: 1px solid var(--d-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.details-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.3rem;
    border-bottom: 1px solid var(--d-border);
    background: linear-gradient(180deg, var(--d-surface-soft), var(--d-surface));
}
.details-section-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}
.details-section-title i {
    color: var(--d-accent);
    font-size: .95rem;
}
.details-section-title h6 {
    font-size: .92rem;
    font-weight: 700;
    color: var(--d-text);
    margin: 0;
    letter-spacing: -.012em;
}
.details-section-count {
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--d-surface);
    color: var(--d-sub);
    border: 1px solid var(--d-border-strong);
    font-variant-numeric: tabular-nums;
}
.details-section-body { padding: .9rem 1.15rem 1rem; }

/* ── Pipeline status card ── */
.pipeline-status-card .pipeline-stage-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    padding: 1rem 1.25rem 1.1rem;
}
.pipeline-status-card .pipeline-stage-cell {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .75rem .85rem;
    border: 1px solid var(--d-border);
    border-radius: 12px;
    background: var(--d-surface);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pipeline-status-card .pipeline-stage-cell:hover {
    border-color: var(--stage-accent, var(--d-accent));
    box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.pipeline-status-card .pipeline-stage-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}
.pipeline-status-card .pipeline-stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--stage-accent, var(--d-accent));
    flex-shrink: 0;
}
.pipeline-status-card .pipeline-stage-label {
    flex: 1;
    min-width: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--d-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pipeline-status-card .pipeline-stage-count {
    font-size: .95rem;
    font-weight: 700;
    color: var(--d-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.pipeline-status-card .pipeline-stage-pipeline {
    font-size: .68rem;
    font-weight: 500;
    color: var(--d-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pipeline-status-card .pipeline-stage-bar {
    margin-top: .25rem;
    height: 4px;
    border-radius: 999px;
    background: var(--d-border);
    overflow: hidden;
}
.pipeline-status-card .pipeline-stage-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--stage-accent, var(--d-accent));
    transition: width .25s ease;
}
.pipeline-status-card--compact .pipeline-stage-row {
    grid-template-columns: 1fr;
    gap: .4rem;
    padding: .5rem .65rem .6rem;
}
.pipeline-status-card--compact .pipeline-stage-cell {
    gap: .3rem;
    padding: .5rem .6rem;
    border-radius: 10px;
}
.pipeline-status-card--compact .pipeline-stage-head { gap: .4rem; }
.pipeline-status-card--compact .pipeline-stage-label { font-size: .72rem; }
.pipeline-status-card--compact .pipeline-stage-count { font-size: .8rem; }
.pipeline-status-card--compact .pipeline-stage-bar { height: 3px; margin-top: .15rem; }

/* ── Locations list ── */
.details-loc-list { padding: .25rem .25rem; }
.details-loc-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    transition: background .15s ease;
}
.details-loc-item + .details-loc-item { border-top: 1px solid var(--d-border); border-radius: 0; }
.details-loc-item:hover { background: var(--d-surface-soft); }
.details-loc-marker {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--d-success-soft);
    color: #047857;
    font-size: .95rem;
    flex-shrink: 0;
}
.details-loc-body { min-width: 0; }
.details-loc-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--d-text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    line-height: 1.3;
}
.details-loc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: .25rem;
    font-size: .72rem;
    color: var(--d-sub);
}
.details-loc-meta i {
    margin-right: .25rem;
    color: var(--d-muted);
}
.details-loc-actions {
    display: flex;
    gap: .25rem;
    flex-shrink: 0;
}
.details-loc-actions .btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* Tags (used in location titles, etc.) */
.details-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: 6px;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
}
.details-tag i { font-size: .6rem; }
.details-tag--success { background: var(--d-success-soft); color: #047857; }
.details-tag--warning { background: var(--d-warning-soft); color: #b45309; }
.details-tag--info    { background: var(--d-info-soft); color: #0369a1; }

/* ── Providers list ── */
.details-prov-list { padding: .25rem .25rem; }
.details-prov-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    transition: background .15s ease;
}
.details-prov-item + .details-prov-item { border-top: 1px solid var(--d-border); border-radius: 0; }
.details-prov-item:hover { background: var(--d-surface-soft); }
.details-prov-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
    letter-spacing: -.02em;
}
.details-prov-body { min-width: 0; }
.details-prov-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--d-text);
    line-height: 1.3;
}
.details-prov-uid {
    color: var(--d-muted);
    font-weight: 500;
    font-size: .75rem;
}
.details-prov-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: .2rem;
    font-size: .7rem;
    color: var(--d-sub);
}
.details-prov-meta i { margin-right: .2rem; color: var(--d-muted); }

/* ── Empty states ── */
.details-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    text-align: center;
    color: var(--d-sub);
    gap: 0.5rem;
}
.details-empty > i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.10), rgba(var(--bs-primary-rgb), 0.04));
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.10);
    color: var(--bs-primary);
    font-size: 1rem;
    opacity: 1;
}
.details-empty p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--d-sub);
    max-width: 22rem;
    line-height: 1.45;
}
.details-empty .btn {
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 0.8125rem;
    --bs-btn-font-size: 0.8125rem;
    border-radius: 8px !important;
    font-weight: 600;
    margin-top: 0.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.details-empty .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.18);
}
.details-empty .btn i { font-size: 0.85rem; }

.details-empty--inline {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    text-align: left;
}
.details-empty--inline p { margin-bottom: 0; font-size: .78rem; }

/* ── Subscription card ── */
.details-sub-card .details-section-header { background: var(--d-surface); border-bottom: 1px solid var(--d-border); }
.details-sub-body {
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.details-sub-card.is-active .details-sub-body { background: linear-gradient(180deg, var(--d-success-soft) 0%, transparent 60%); }
.details-sub-card.is-trial  .details-sub-body { background: linear-gradient(180deg, var(--d-info-soft) 0%, transparent 60%); }
.details-sub-tier {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--d-text);
    letter-spacing: -.025em;
    line-height: 1.1;
}
.details-sub-body .details-pill { align-self: flex-start; }

/* Key-value pairs */
.details-kv {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: .5rem 0 0;
}
.details-kv > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
    padding: .25rem 0;
    border-top: 1px dashed var(--d-border);
}
.details-kv dt {
    color: var(--d-muted);
    font-weight: 500;
    margin: 0;
}
.details-kv dd {
    color: var(--d-text);
    font-weight: 600;
    margin: 0;
}
.details-kv-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    font-size: .78rem;
    padding: .5rem 0;
    border-top: 1px dashed var(--d-border);
}
.details-kv-line:first-child { border-top: 0; padding-top: 0; }
.details-kv-line span { color: var(--d-muted); font-weight: 500; }
.details-kv-line strong { color: var(--d-text); font-weight: 600; text-align: right; }

/* ── EHR card ── */
.details-ehr-card.is-connected { border-color: rgba(16, 185, 129, .25); }
.details-ehr-card.is-connected .details-section-title i { color: var(--d-success); }
.details-ehr-body {
    padding: .9rem 1.15rem 1rem;
}
.details-ehr-group {
    margin-bottom: .85rem;
}
.details-ehr-group-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--d-text);
    letter-spacing: -.01em;
    line-height: 1.2;
}
.details-ehr-group-uid {
    font-size: .68rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: var(--d-muted);
    margin-top: .2rem;
}
.details-ehr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-bottom: .5rem;
}
.details-ehr-grid > div {
    text-align: center;
    padding: .65rem .25rem;
    background: var(--d-surface-soft);
    border: 1px solid var(--d-border);
    border-radius: 10px;
}
.details-ehr-num {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--d-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.details-ehr-lbl {
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--d-muted);
    margin-top: .2rem;
}

/* ── Activity log ── */
.details-activity {
    padding: .35rem 0;
}
.details-activity-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    padding: .65rem 1.1rem;
    align-items: flex-start;
}
.details-activity-item + .details-activity-item { border-top: 1px solid var(--d-border); }
.details-activity-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    background: var(--d-info);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--d-info-soft);
}
.details-activity-item--warning .details-activity-dot { background: var(--d-warning); box-shadow: 0 0 0 3px var(--d-warning-soft); }
.details-activity-item--danger  .details-activity-dot { background: var(--d-danger);  box-shadow: 0 0 0 3px var(--d-danger-soft); }
.details-activity-action {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--d-sub);
}
.details-activity-msg {
    font-size: .78rem;
    color: var(--d-text);
    margin-top: .15rem;
    line-height: 1.4;
}
.details-activity-time {
    font-size: .65rem;
    color: var(--d-muted);
    margin-top: .2rem;
}

/* ── Avatar variants for Patients & Staff lists ── */
.details-prov-avatar--patient {
    background: var(--d-info-soft);
    color: #0369a1;
}
.details-prov-avatar--staff {
    background: var(--d-warning-soft);
    color: #b45309;
}
.details-prov-item--link {
    text-decoration: none;
    color: inherit;
}
.details-prov-item--link:hover { color: inherit; }

/* ── Connected Accounts ── */
.details-account-body {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.details-account-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .55rem;
}
.details-account-tile {
    padding: .75rem .65rem;
    border-radius: 10px;
    background: var(--d-surface-soft);
    border: 1px solid var(--d-border);
    text-align: center;
    transition: border-color .15s ease;
}
.details-account-tile.is-connected {
    border-color: rgba(16, 185, 129, .3);
    background: var(--d-success-soft);
}
.details-account-tile-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin: 0 auto .35rem;
    background: var(--d-surface);
    border: 1px solid var(--d-border-strong);
    color: var(--d-muted);
}
.details-account-tile-icon--google   { color: #4285f4; }
.details-account-tile-icon--facebook { color: #1877f2; }
.details-account-tile.is-connected .details-account-tile-icon {
    border-color: rgba(16, 185, 129, .35);
}
.details-account-tile-name {
    font-size: .72rem;
    font-weight: 700;
    color: var(--d-text);
    letter-spacing: -.005em;
}
.details-account-tile-status {
    font-size: .62rem;
    font-weight: 600;
    color: var(--d-muted);
    margin-top: .15rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.details-account-tile-status i { font-size: .7rem; }
.details-account-tile.is-connected .details-account-tile-status {
    color: #047857;
}

.details-account-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .25rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--d-border);
}
.details-account-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .45rem .55rem;
    border-radius: 8px;
    background: var(--d-surface-soft);
    border: 1px solid var(--d-border);
}
.details-account-item-icon {
    font-size: 1.05rem;
    color: var(--d-sub);
}
.details-account-item-body { min-width: 0; }
.details-account-item-name {
    font-size: .76rem;
    font-weight: 600;
    color: var(--d-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.details-account-item-meta {
    font-size: .65rem;
    color: var(--d-muted);
    margin-top: .1rem;
}

/* Lead UI — status / source / priority modifiers */
.lead-status-new       { --lead-color: #6c757d; }
.lead-status-contacted { --lead-color: #0dcaf0; }
.lead-status-qualified { --lead-color: #0069A6; }
.lead-status-nurturing { --lead-color: #f0b429; }
.lead-status-booked    { --lead-color: #34c9a2; }
.lead-status-converted { --lead-color: #198754; }
.lead-status-unqualified { --lead-color: #6c757d; }
.lead-status-lost      { --lead-color: #dc3545; }
.lead-status-duplicate { --lead-color: #495057; }

.lead-source-web      { --lead-source-color: #0dcaf0; }
.lead-source-phone    { --lead-source-color: #6f42c1; }
.lead-source-ad       { --lead-source-color: #fd7e14; }
.lead-source-referral { --lead-source-color: #198754; }
.lead-source-walk_in  { --lead-source-color: #198754; }
.lead-source-email    { --lead-source-color: #0d6efd; }
.lead-source-social   { --lead-source-color: #d63384; }
.lead-source-event    { --lead-source-color: #ffc107; }
.lead-source-other    { --lead-source-color: #6c757d; }

.lead-priority-low    { color: var(--d-muted); }
.lead-priority-normal { color: var(--d-sub); }
.lead-priority-high   { color: #b45309; }
.lead-priority-urgent { color: #b91c1c; }

/* Lead Board styles moved to static/clinic_crm/css/lead-board.css */

/* Submission inbox bulk bar */
.submission-bulk-bar { transition: opacity .15s ease; }
.submission-bulk-select { width: auto; min-width: 10rem; }

/* Submission inbox — compact card grid (Cards view) */
.submission-grid { --sub-card-radius: 14px; }
.submission-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .7rem .75rem .6rem;
    height: 100%;
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: var(--sub-card-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
}
.submission-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: transparent;
    transition: background .18s ease;
    border-top-left-radius: var(--sub-card-radius);
    border-bottom-left-radius: var(--sub-card-radius);
    pointer-events: none;
}
.submission-card:hover {
    transform: translateY(-1px);
    border-color: rgba(99, 102, 241, .35);
    box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .18);
}
.submission-card--unread::before { background: linear-gradient(180deg, #6366f1, #8b5cf6); }
.submission-card--unread .submission-card__name { font-weight: 700; }
.submission-card--starred { border-color: rgba(245, 158, 11, .35); }

/* full-card click target sits behind interactive bits */
.submission-card__hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.submission-card > *:not(.submission-card__hit) { position: relative; z-index: 2; }

.submission-card__head {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}
.submission-card__check { margin: 2px 0 0; line-height: 0; }
.submission-card__check .form-check-input {
    width: 14px; height: 14px; margin: 0;
    border-radius: 4px;
}
.submission-card__identity {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}
.submission-card__name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-heading, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.submission-card__email {
    font-size: .68rem;
    color: var(--text-sub, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.submission-card__star-btn {
    border: 0;
    background: transparent;
    padding: 2px 4px;
    line-height: 1;
    color: rgba(148, 163, 184, .9);
    border-radius: 6px;
    transition: color .15s ease, background .15s ease, transform .15s ease;
    font-size: .9rem;
}
.submission-card__star-btn:hover { background: rgba(245, 158, 11, .1); color: #f59e0b; }
.submission-card__star-btn.is-on { color: #f59e0b; }
.submission-card__star-btn.is-on:hover { transform: scale(1.08); }

.submission-card__meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: nowrap;
    min-width: 0;
}
.submission-card__form {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    color: var(--text-sub, #64748b);
    background: rgba(99, 102, 241, .08);
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.submission-card__form i { color: #6366f1; font-size: .7rem; flex-shrink: 0; }
.submission-card__form > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.submission-card__status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}
.submission-card__status i { font-size: .42rem; }
.submission-card__status--received    { background: rgba(14, 165, 233, .12); color: #0369a1; }
.submission-card__status--processing  { background: rgba(245, 158, 11, .14); color: #b45309; }
.submission-card__status--reviewed    { background: rgba(99, 102, 241, .14); color: #4338ca; }
.submission-card__status--converted   { background: rgba(16, 185, 129, .14); color: #047857; }
.submission-card__status--archived    { background: rgba(148, 163, 184, .18); color: #475569; }
.submission-card__status--spam        { background: rgba(244, 63, 94, .14); color: #be123c; }

.submission-card__foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: .45rem;
    margin-top: auto;
    border-top: 1px dashed rgba(148, 163, 184, .25);
}
.submission-card__time {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    color: var(--text-sub, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.submission-card__time i { font-size: .7rem; }
.submission-card__lead {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .65rem;
    font-weight: 600;
    color: #047857;
    background: rgba(16, 185, 129, .12);
    padding: 2px 7px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s ease;
    flex-shrink: 0;
}
.submission-card__lead:hover { background: rgba(16, 185, 129, .2); color: #065f46; }
.submission-card__lead i { font-size: .7rem; }

.submission-card__menu {
    border: 0;
    background: transparent;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sub, #64748b);
    transition: background .15s ease, color .15s ease;
}
.submission-card__menu:hover,
.submission-card__menu[aria-expanded="true"] {
    background: rgba(99, 102, 241, .1);
    color: #4338ca;
}
.submission-card__actions { line-height: 0; }

@media (max-width: 575.98px) {
    .submission-card { padding: .65rem .7rem .55rem; }
    .submission-card__name { font-size: .8rem; }
}

/* Feedback dashboard — rating distribution bars */
.feedback-rating-list { display: flex; flex-direction: column; gap: .5rem; }
.feedback-rating-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.feedback-rating-stars {
    width: 64px;
    display: inline-flex;
    gap: 1px;
    color: #f59e0b;
    font-size: .7rem;
}
.feedback-rating-bar {
    flex: 1;
    height: 22px;
    background: var(--d-surface-soft, rgba(15, 23, 42, .04));
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.feedback-rating-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 999px;
    transition: width .35s ease;
}
.feedback-rating-count {
    width: 48px;
    text-align: right;
    font-weight: 600;
    color: var(--d-text);
    font-size: .85rem;
}
.feedback-empty {
    padding: 2rem 1rem;
}
.feedback-empty-icon {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .5rem;
    color: var(--d-muted);
}

/* Feedback dashboard — recent comments feed */
.comment-feed {
    display: flex;
    flex-direction: column;
}
.comment-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--d-border);
    transition: background-color .15s ease;
}
.comment-row:first-child { border-top: 0; }
.comment-row:hover { background: var(--d-surface-soft); }

.comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #f59e0b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(245, 158, 11, .18);
    font-size: .7rem;
    line-height: 1;
    flex-shrink: 0;
}
.comment-avatar i { font-size: .75rem; margin-bottom: 1px; }
.comment-avatar-rating {
    font-weight: 700;
    font-size: .75rem;
    color: #b45309;
}
.comment-row[data-rating="3"] .comment-avatar,
.comment-row[data-rating="2"] .comment-avatar,
.comment-row[data-rating="1"] .comment-avatar {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, .18);
}
.comment-row[data-rating="3"] .comment-avatar-rating,
.comment-row[data-rating="2"] .comment-avatar-rating,
.comment-row[data-rating="1"] .comment-avatar-rating { color: #b91c1c; }
.comment-row[data-rating="4"] .comment-avatar {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #10b981;
    border-color: rgba(16, 185, 129, .2);
}
.comment-row[data-rating="4"] .comment-avatar-rating { color: #047857; }

.comment-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
}
.comment-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .01em;
    line-height: 1.2;
    border: 1px solid transparent;
}
.comment-pill i { font-size: .7rem; }
.comment-pill--rating {
    background: #fffbeb;
    color: #b45309;
    border-color: rgba(245, 158, 11, .2);
}
.comment-pill--nps.is-promoter {
    background: #ecfdf5;
    color: #047857;
    border-color: rgba(16, 185, 129, .22);
}
.comment-pill--nps.is-passive {
    background: #fffbeb;
    color: #92400e;
    border-color: rgba(245, 158, 11, .22);
}
.comment-pill--nps.is-detractor {
    background: #fef2f2;
    color: #b91c1c;
    border-color: rgba(239, 68, 68, .2);
}
.comment-source {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: var(--d-accent);
    font-weight: 500;
    text-decoration: none;
    padding: .15rem .4rem;
    border-radius: 6px;
    transition: background-color .12s ease;
}
.comment-source:hover {
    background: var(--d-accent-soft);
    color: var(--d-accent);
}
.comment-source i { font-size: .85rem; }
.comment-time {
    margin-left: auto;
    color: var(--d-muted);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}
.comment-time i { font-size: .75rem; opacity: .8; }

.comment-text {
    margin: 0;
    color: var(--d-text);
    font-size: .875rem;
    line-height: 1.5;
}
.comment-text--muted {
    color: var(--d-muted);
    font-size: .8rem;
}

.comment-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--d-muted);
}
.comment-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--d-surface-soft);
    color: var(--d-muted);
    font-size: 1.25rem;
    margin-bottom: .75rem;
}
.comment-empty-title {
    color: var(--d-text);
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .15rem;
}
.comment-empty-sub {
    font-size: .8rem;
    color: var(--d-muted);
}

@media (max-width: 575.98px) {
    .comment-row {
        grid-template-columns: 36px 1fr;
        gap: .75rem;
        padding: .85rem 1rem;
    }
    .comment-avatar { width: 36px; height: 36px; }
    .comment-time { margin-left: 0; width: 100%; }
}

/* Feedback dashboard — compact card grid (density=comfy) */
.feedback-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}
@media (max-width: 1199.98px) { .feedback-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .feedback-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px)  { .feedback-card-grid { grid-template-columns: 1fr; } }

.feedback-card-grid__empty { grid-column: 1 / -1; }

.feedback-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 140px;
    padding: .75rem .85rem;
    background: var(--d-card-bg, #fff);
    border: 1px solid var(--d-border);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.feedback-card:focus-visible {
    outline: 2px solid var(--brand-solid, #0a4f7a);
    outline-offset: 2px;
}
.feedback-card::before {
    content: "";
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #f59e0b;
}
.feedback-card[data-rating="5"]::before { background: #10b981; }
.feedback-card[data-rating="4"]::before { background: #34d399; }
.feedback-card[data-rating="3"]::before { background: #f59e0b; }
.feedback-card[data-rating="2"]::before { background: #f97316; }
.feedback-card[data-rating="1"]::before { background: #ef4444; }
.feedback-card:hover {
    border-color: var(--d-accent-soft, rgba(10, 79, 122, .25));
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}

.feedback-card__head {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.feedback-card__rating,
.feedback-card__nps {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .65rem;
    line-height: 1.2;
    border: 1px solid transparent;
}
.feedback-card__rating i,
.feedback-card__nps i { font-size: .65rem; }
.feedback-card__rating {
    background: #fffbeb;
    color: #b45309;
    border-color: rgba(245, 158, 11, .2);
    font-size: .7rem;
    font-weight: 700;
}
.feedback-card[data-rating="5"] .feedback-card__rating,
.feedback-card[data-rating="4"] .feedback-card__rating {
    background: #ecfdf5;
    color: #047857;
    border-color: rgba(16, 185, 129, .22);
}
.feedback-card[data-rating="2"] .feedback-card__rating,
.feedback-card[data-rating="1"] .feedback-card__rating {
    background: #fef2f2;
    color: #b91c1c;
    border-color: rgba(239, 68, 68, .2);
}
.feedback-card__nps.is-promoter {
    background: #ecfdf5; color: #047857; border-color: rgba(16, 185, 129, .22);
}
.feedback-card__nps.is-passive {
    background: #fffbeb; color: #92400e; border-color: rgba(245, 158, 11, .22);
}
.feedback-card__nps.is-detractor {
    background: #fef2f2; color: #b91c1c; border-color: rgba(239, 68, 68, .2);
}

.feedback-card__text {
    margin: 0;
    color: var(--d-text);
    font-size: .8rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.feedback-card__text--muted {
    color: var(--d-muted);
    font-style: italic;
    font-size: .75rem;
}

.feedback-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .4rem;
    border-top: 1px dashed var(--d-border);
    font-size: .68rem;
}
.feedback-card__source {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    color: var(--d-accent);
    font-weight: 500;
    text-decoration: none;
    min-width: 0;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feedback-card__source i { font-size: .8rem; flex-shrink: 0; }
.feedback-card__source:hover { color: var(--d-accent, #0a4f7a); text-decoration: underline; }
.feedback-card__source:focus-visible {
    outline: 2px solid var(--brand-solid, #0a4f7a);
    outline-offset: 2px;
    border-radius: 3px;
    text-decoration: underline;
}
.feedback-card__time {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: var(--d-muted);
    font-weight: 500;
    white-space: nowrap;
}
.feedback-card__time i { font-size: .7rem; opacity: .8; }

[data-theme="dark"] .feedback-card {
    background: var(--d-surface, #1a1d27);
    border-color: var(--d-border, rgba(255, 255, 255, .06));
}
[data-theme="dark"] .feedback-card:hover {
    border-color: var(--d-accent-soft, rgba(99, 102, 241, .22));
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .feedback-card__text { color: var(--d-text, rgba(255, 255, 255, .92)); }
[data-theme="dark"] .feedback-card__text--muted { color: var(--d-muted, rgba(255, 255, 255, .42)); }
[data-theme="dark"] .feedback-card__time { color: var(--d-muted, rgba(255, 255, 255, .42)); }
[data-theme="dark"] .feedback-card__foot { border-top-color: rgba(255, 255, 255, .08); }

.lead-score-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: var(--d-accent-soft);
    color: var(--d-accent);
}
.lead-score-chip[data-score="0"] { background: var(--d-surface-soft); color: var(--d-muted); }

.lead-notes-block { white-space: pre-wrap; font-size: .85rem; }

.lead-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--d-accent);
    display: inline-block;
    margin-top: .55rem;
    flex-shrink: 0;
}
.lead-activity-status_change { background: #0069A6; }
.lead-activity-assignment    { background: #6f42c1; }
.lead-activity-call          { background: #198754; }
.lead-activity-email         { background: #0d6efd; }
.lead-activity-sms           { background: #34c9a2; }
.lead-activity-meeting       { background: #fd7e14; }
.lead-activity-form_submitted { background: #ffc107; }
.lead-activity-converted     { background: #198754; }
.lead-activity-lost          { background: #dc3545; }
.lead-activity-other         { background: #6c757d; }

.lead-activity-body { white-space: pre-wrap; }

/* Builder (.dfb3-*) styles moved to static/clinic_crm/css/builder.css */

/* Legacy alias kept so old templates still render until removed */
.dfb-shell {
    background: var(--d-surface);
    border: 1px solid var(--d-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 12px 32px -20px rgba(15, 23, 42, .08);
}
.dfb-workspace {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 400px;
    min-height: calc(100vh - 320px);
}
.dfb-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.dfb-pane + .dfb-pane { border-left: 1px solid var(--d-border); }
.dfb-pane-palette { background: var(--d-surface-soft); }
.dfb-pane-canvas  { background: var(--d-surface); }
.dfb-pane-editor  { background: var(--d-surface); }
.dfb-pane-head {
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--d-border);
    background: var(--d-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}
.dfb-pane-palette .dfb-pane-head { background: var(--d-surface-soft); }
.dfb-pane-head h6 {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    color: var(--d-text);
    letter-spacing: -.005em;
}
.dfb-pane-head .dfb-pane-sub {
    margin: .15rem 0 0;
    color: var(--d-sub);
    font-size: .7rem;
}
.dfb-pane-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.dfb-search {
    position: relative;
    margin-top: .55rem;
}
.dfb-search input {
    width: 100%;
    padding: .45rem .75rem .45rem 2rem;
    border-radius: 10px;
    border: 1px solid var(--d-border);
    background: var(--d-surface);
    color: var(--d-text);
    font-size: .8rem;
    transition: border-color .15s, box-shadow .15s;
}
.dfb-search input:focus {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px var(--d-accent-soft);
}
.dfb-search i {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--d-muted);
    font-size: .85rem;
    pointer-events: none;
}

.dfb-palette { padding: .85rem 1.1rem 1.5rem; }
.dfb-palette-group + .dfb-palette-group { margin-top: 1.2rem; }
.dfb-palette-group-head {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--d-muted);
    margin-bottom: .55rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.dfb-palette-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
}
.dfb-palette-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    padding: .65rem .7rem;
    border-radius: 12px;
    border: 1px solid var(--d-border);
    background: var(--d-surface);
    color: var(--d-text);
    font-size: .73rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
    text-align: left;
    min-height: 64px;
}
.dfb-palette-chip:hover {
    border-color: var(--d-accent);
    background: var(--d-accent-soft);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -10px rgba(99, 102, 241, .45);
}
.dfb-palette-chip:active { transform: translateY(0); }
.dfb-palette-chip.is-dragging { opacity: .55; }
.dfb-palette-chip-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}
.dfb-palette-chip[hidden] { display: none; }
.dfb-palette-empty {
    color: var(--d-muted);
    font-size: .75rem;
    text-align: center;
    padding: 1.25rem .5rem;
    display: none;
}
.dfb-palette-empty.is-active { display: block; }

.dfb-canvas {
    padding: 1.25rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.dfb-canvas-headline {
    margin-bottom: .5rem;
}
.dfb-canvas-headline-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--d-text);
    margin: 0;
    letter-spacing: -.01em;
}
.dfb-canvas-headline-sub {
    margin: .15rem 0 0;
    color: var(--d-sub);
    font-size: .8rem;
}

.dfb-card {
    position: relative;
    background: var(--d-surface);
    border: 1px solid var(--d-border);
    border-radius: 14px;
    padding: 1rem 1.25rem .75rem 1.5rem;
    transition: border-color .15s, box-shadow .15s, transform .1s, background .15s;
}
.dfb-card:hover {
    border-color: var(--d-border-strong);
    box-shadow: 0 8px 24px -16px rgba(15, 23, 42, .25);
}
.dfb-card.is-selected {
    border-color: var(--d-accent);
    background: linear-gradient(180deg, var(--d-accent-soft) 0%, var(--d-surface) 70%);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.dfb-card.is-selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--d-accent);
}
.dfb-card.dragging {
    opacity: .5;
    transform: scale(.985);
    border-style: dashed;
    border-color: var(--d-accent);
}
.dfb-card-grip {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--d-muted);
    cursor: grab;
    opacity: 0;
    transition: opacity .15s;
    font-size: .85rem;
}
.dfb-card:hover .dfb-card-grip,
.dfb-card:focus-within .dfb-card-grip,
.dfb-card.dragging .dfb-card-grip { opacity: 1; }
.dfb-card-grip:active { cursor: grabbing; }

.dfb-card-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .4rem;
}
.dfb-card-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--d-text);
    font-size: .92rem;
    line-height: 1.35;
    letter-spacing: -.005em;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.dfb-card-required {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #ef4444;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}
.dfb-card-actions {
    display: flex;
    gap: .3rem;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity .15s, transform .15s;
    pointer-events: none;
}
.dfb-card:hover .dfb-card-actions,
.dfb-card:focus-within .dfb-card-actions,
.dfb-card.is-selected .dfb-card-actions {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.dfb-card-actions .btn {
    --bs-btn-padding-x: .55rem;
    --bs-btn-padding-y: .25rem;
    --bs-btn-font-size: .72rem;
    border-radius: 8px;
}

.dfb-card-help {
    color: var(--d-sub);
    font-size: .78rem;
    margin: 0 0 .55rem;
}

.dfb-card-preview {
    pointer-events: none;
    user-select: none;
    margin-bottom: .55rem;
}
.dfb-card-preview .form-control,
.dfb-card-preview .form-select {
    background: var(--d-surface-soft);
    border-color: var(--d-border);
    color: var(--d-text);
    font-size: .85rem;
}
.dfb-card-preview .form-control:disabled,
.dfb-card-preview .form-select:disabled {
    opacity: 1;
    cursor: default;
}
.dfb-card-preview .form-check-label { color: var(--d-text); font-size: .82rem; }
.dfb-card-preview-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.dfb-card-preview-chips .dfb-chip {
    font-size: .72rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--d-border-strong);
    background: var(--d-surface);
    color: var(--d-sub);
}
.dfb-card-preview-rating { display: flex; gap: .25rem; color: #f59e0b; font-size: 1.1rem; }
.dfb-card-preview-rating i { opacity: .85; }
.dfb-card-preview-nps { display: flex; gap: .2rem; flex-wrap: wrap; }
.dfb-card-preview-nps span {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--d-surface-soft);
    border: 1px solid var(--d-border);
    color: var(--d-sub);
    font-size: .7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dfb-card-preview-file {
    border: 1.5px dashed var(--d-border-strong);
    border-radius: 10px;
    padding: .9rem 1rem;
    text-align: center;
    color: var(--d-muted);
    font-size: .78rem;
    background: var(--d-surface-soft);
}
.dfb-card-preview-file i { font-size: 1.1rem; margin-right: .35rem; }
.dfb-card-preview-address { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.dfb-card-preview-address .form-control { font-size: .78rem; padding: .35rem .55rem; }
.dfb-card-preview-address > :first-child,
.dfb-card-preview-address > :last-child { grid-column: 1 / -1; }
.dfb-card-preview-header {
    margin: 0;
    color: var(--d-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.dfb-card-preview-paragraph {
    margin: 0;
    color: var(--d-sub);
    font-size: .82rem;
    line-height: 1.55;
}
.dfb-card-preview-switch {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--d-border-strong);
    position: relative;
    display: inline-block;
}
.dfb-card-preview-switch::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--d-surface);
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.dfb-card-preview-consent {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    padding: .55rem .7rem;
    background: var(--d-surface-soft);
    border-radius: 8px;
    border: 1px solid var(--d-border);
    font-size: .78rem;
    color: var(--d-sub);
}

.dfb-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--d-border);
    font-size: .68rem;
}
.dfb-card-foot code {
    background: var(--d-surface-soft);
    padding: .12rem .4rem;
    border-radius: 5px;
    font-size: .68rem;
    color: var(--d-sub);
    border: 1px solid var(--d-border);
}
.dfb-card-foot .dfb-pill {
    padding: .15rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .65rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.dfb-pill--type { color: var(--d-accent); background: var(--d-accent-soft); }
.dfb-pill--mapped { color: #16a34a; background: rgba(22, 163, 74, .1); }

.dfb-empty {
    border: 2px dashed var(--d-border-strong);
    border-radius: 18px;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--d-sub);
    background:
        radial-gradient(circle at top, var(--d-accent-soft) 0%, transparent 60%),
        var(--d-surface-soft);
    transition: border-color .15s, background .15s;
}
.dfb-empty.is-drop-target {
    border-color: var(--d-accent);
    background:
        radial-gradient(circle at top, var(--d-accent-soft) 0%, transparent 70%),
        rgba(99, 102, 241, .04);
}
.dfb-empty-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.dfb-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--d-text);
    margin-bottom: .25rem;
}
.dfb-empty-sub { font-size: .82rem; color: var(--d-sub); }

.dfb-editor { padding: 1rem 1.15rem; }
.dfb-editor .form-label { font-size: .72rem; font-weight: 600; color: var(--d-sub); margin-bottom: .25rem; letter-spacing: .01em; }
.dfb-editor .form-control,
.dfb-editor .form-select {
    font-size: .85rem;
    border-radius: 9px;
    border-color: var(--d-border);
    background: var(--d-surface);
    color: var(--d-text);
}
.dfb-editor .form-control:focus,
.dfb-editor .form-select:focus {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px var(--d-accent-soft);
}
.dfb-editor textarea.form-control { min-height: 70px; }
.dfb-editor code {
    background: var(--d-surface-soft);
    padding: .1rem .35rem;
    border-radius: 4px;
    font-size: .75rem;
    color: var(--d-accent);
    border: 1px solid var(--d-border);
}

.dfb-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--d-border);
    margin: -1rem -1.15rem 1rem;
    padding: 0 1.15rem;
}
.dfb-tab {
    background: transparent;
    border: 0;
    padding: .75rem .15rem;
    margin-right: 1.25rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--d-sub);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.dfb-tab:hover { color: var(--d-text); }
.dfb-tab.is-active {
    color: var(--d-accent);
    border-bottom-color: var(--d-accent);
}
.dfb-tab.has-error::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    margin-left: .15rem;
}
.dfb-tab-pane { display: none; }
.dfb-tab-pane.is-active { display: block; }

.dfb-helper {
    margin: .35rem 0 .5rem;
    font-size: .72rem;
}
.dfb-helper summary {
    cursor: pointer;
    color: var(--d-accent);
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.dfb-helper summary::-webkit-details-marker { display: none; }
.dfb-helper summary::before {
    content: "›";
    display: inline-block;
    margin-right: .35rem;
    transition: transform .15s;
}
.dfb-helper[open] summary::before { transform: rotate(90deg); }
.dfb-helper-body {
    margin-top: .4rem;
    padding: .5rem .65rem;
    background: var(--d-surface-soft);
    border-radius: 8px;
    color: var(--d-sub);
    line-height: 1.5;
}
.dfb-helper-body code { display: inline-block; margin: .15rem 0; }

.dfb-editor-foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--d-border);
}

.dfb-editor-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--d-sub);
}
.dfb-editor-empty i { font-size: 1.5rem; color: var(--d-muted); display: block; margin-bottom: .5rem; }

@media (max-width: 1180px) {
    .dfb-workspace { grid-template-columns: 1fr; }
    .dfb-pane + .dfb-pane { border-left: 0; border-top: 1px solid var(--d-border); }
    .dfb-pane-palette { order: 1; }
    .dfb-pane-canvas  { order: 2; }
    .dfb-pane-editor  { order: 3; }
}

/* Submission inbox row state */
.submission-row.unread td { font-weight: 600; }
.submission-row.unread td:first-child {
    box-shadow: inset 3px 0 0 var(--d-accent);
}

/* Public form (anonymous capture page) */
.public-form-body {
    background: linear-gradient(135deg, #f4f6fb 0%, #eef1f8 100%);
    min-height: 100vh;
    margin: 0;
}
.public-form-shell {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1rem;
}
.public-form-wrapper {
    --form-theme: #0d6efd;
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.public-form-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 40px -12px rgba(15, 23, 42, .15);
    overflow: hidden;
}
.public-form-cover {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: var(--form-theme);
}
.public-form-head {
    padding: 1.75rem 2rem 0.75rem;
    border-top: 4px solid var(--form-theme);
}
.public-form-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: #0f172a;
}
.public-form-intro {
    color: #64748b;
    font-size: .95rem;
    margin: 0;
}
.public-form-body {
    padding: 1.5rem 2rem 2rem;
}
.public-form-row { margin-bottom: 1.1rem; }
.public-form-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: .35rem;
}
.public-form-required {
    color: #dc2626;
    margin-left: .15rem;
}
.public-form-row .form-control,
.public-form-row .form-select {
    border-radius: 10px;
}
.public-form-row .form-control:focus,
.public-form-row .form-select:focus {
    border-color: var(--form-theme);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-theme) 18%, transparent);
}
.public-form-help { display: block; color: #94a3b8; font-size: .75rem; margin-top: .25rem; }
.public-form-error { color: #dc2626; font-size: .8rem; margin-top: .35rem; }
.public-form-section-header {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 1.5rem 0 .75rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid #e2e8f0;
}
.public-form-paragraph { color: #64748b; font-size: .9rem; margin: 0 0 1rem; }
.public-form-actions { margin-top: 1.5rem; }
.public-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    background: var(--form-theme);
    color: #fff;
    border-radius: 12px;
    padding: .8rem 1.25rem;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: filter .15s, transform .1s;
}
.public-form-submit:hover { filter: brightness(.93); transform: translateY(-1px); }
.public-form-submit-link { text-decoration: none; }
.public-form-card-success { padding: 3rem 2rem; text-align: center; }
.public-form-success-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--form-theme) 15%, white);
    color: var(--form-theme);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    margin-bottom: 1.25rem;
}
.public-form-footer {
    text-align: center;
    color: #94a3b8;
    font-size: .75rem;
}

.signature-field {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.signature-pad-wrap {
    position: relative;
    width: 100%;
    height: 180px;
    border: 1px dashed #cbd5e1;
    border-radius: .65rem;
    background: #fff;
    overflow: hidden;
    touch-action: none;
}
.signature-pad-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}
.signature-pad-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #94a3b8;
    font-size: .95rem;
    pointer-events: none;
    transition: opacity .15s;
}
.signature-pad-placeholder i { font-size: 1.35rem; }
.signature-pad-actions {
    display: flex;
    justify-content: flex-end;
}
.signature-pad-clear {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    padding: .35rem .75rem;
    font-size: .8rem;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: background .15s, color .15s, border-color .15s;
}
.signature-pad-clear:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}

.submission-signature-img {
    max-width: 360px;
    max-height: 140px;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: .5rem;
    padding: .35rem;
    display: block;
}

/* ────────────────────────────────────────────────────────────
   CRM × EHR Fusion section (platform admin dashboard)
   Three side-by-side cards: sync source distribution, EHR mirror
   totals, and onboarding readiness. Soft pastel palette consistent
   with the modernized clinics directory and onboarding hub.
   ──────────────────────────────────────────────────────────── */
.fusion-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 1180px) { .fusion-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .fusion-grid { grid-template-columns: 1fr; } }

.fusion-card {
    background: linear-gradient(180deg, #fff, #fbfbff 96%);
    border: 1px solid var(--d-border, #eef0f3);
    border-radius: 18px;
    padding: 1.25rem 1.35rem 1.15rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-width: 0;
}
.fusion-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}
.fusion-card-eyebrow {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--d-muted, #94a3b8);
}
.fusion-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--d-text, #0f172a);
    margin: .25rem 0 0;
    letter-spacing: -.018em;
}
.fusion-card-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--d-sub, #64748b);
    background: var(--d-surface-soft, #f8fafc);
    border: 1px solid var(--d-border, #eef0f3);
    white-space: nowrap;
}
.fusion-card-tag--ok    { color: #047857; background: #ecfdf5; border-color: rgba(16, 185, 129, .25); }
.fusion-card-tag--warn  { color: #b45309; background: #fffbeb; border-color: rgba(245, 158, 11, .3); }
.fusion-card-tag--muted { color: var(--d-muted, #94a3b8); }
.fusion-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* ── Clinic universe distribution card ── */
.fusion-universe-headline {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding-bottom: .25rem;
}
.fusion-universe-headline-num {
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--d-text, #0f172a);
    font-variant-numeric: tabular-nums;
}
.fusion-universe-headline-lbl {
    font-size: .75rem;
    color: var(--d-sub, #64748b);
    font-weight: 500;
    line-height: 1.3;
}
.fusion-bar {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(15, 23, 42, .04);
    display: flex;
}
.fusion-bar-seg {
    height: 100%;
    transition: filter .2s ease;
}
.fusion-bar-seg:hover { filter: brightness(1.05); }
.fusion-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.fusion-legend-row {
    display: grid;
    grid-template-columns: 10px 1fr auto auto;
    align-items: center;
    gap: .65rem;
    font-size: .8rem;
    color: var(--d-sub, #64748b);
}
.fusion-legend-row--sub {
    padding-left: 1.5rem;
    font-size: .72rem;
    margin-top: -.15rem;
    opacity: .85;
}
.fusion-legend-row--sub .fusion-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
}
.fusion-legend-row--sub .fusion-legend-label {
    font-weight: 500;
    color: var(--d-sub, #64748b);
}
.fusion-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.fusion-legend-label { font-weight: 600; color: var(--d-text, #0f172a); }
.fusion-legend-count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--d-text, #0f172a);
}
.fusion-legend-pct {
    font-size: .7rem;
    color: var(--d-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}

/* ── EHR mirror totals card ── */
.fusion-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}
.fusion-tile {
    --tt-color: #6366f1;
    --tt-soft:  rgba(99, 102, 241, .12);
    --tt-tint:  rgba(99, 102, 241, .05);
    --tt-edge:  rgba(99, 102, 241, .14);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .85rem .5rem .75rem;
    background: var(--tt-tint);
    border: 1px solid var(--tt-edge);
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fusion-tile:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--tt-color) 35%, transparent);
    box-shadow: 0 6px 14px -6px var(--tt-edge);
}
.fusion-tile-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tt-soft);
    color: var(--tt-color);
    font-size: .9rem;
}
.fusion-tile-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--d-text, #0f172a);
    line-height: 1;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}
.fusion-tile-label {
    font-size: .62rem;
    font-weight: 700;
    color: var(--d-sub, #64748b);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.fusion-tile--sky   { --tt-color: #0284c7; --tt-soft: rgba(14, 165, 233, .14); --tt-tint: rgba(14, 165, 233, .05); --tt-edge: rgba(14, 165, 233, .18); }
.fusion-tile--mint  { --tt-color: #059669; --tt-soft: rgba(16, 185, 129, .14); --tt-tint: rgba(16, 185, 129, .05); --tt-edge: rgba(16, 185, 129, .18); }
.fusion-tile--peach { --tt-color: #d97706; --tt-soft: rgba(245, 158, 11, .16); --tt-tint: rgba(245, 158, 11, .06); --tt-edge: rgba(245, 158, 11, .20); }

.fusion-orphan-cta {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .75rem;
    background: rgba(139, 92, 246, .07);
    border: 1px solid rgba(139, 92, 246, .22);
    border-radius: 10px;
    color: #6d28d9;
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.fusion-orphan-cta:hover {
    background: rgba(139, 92, 246, .12);
    color: #5b21b6;
    transform: translateY(-1px);
}
.fusion-orphan-cta > span { flex: 1 1 auto; min-width: 0; }
.fusion-orphan-cta i:last-child { font-size: .8rem; opacity: .8; }

/* ── Onboarding readiness card ── */
.fusion-ring-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.1rem;
}
.fusion-ring-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 14px rgba(99, 102, 241, .08));
}
.fusion-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.fusion-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.fusion-ring-track { stroke: var(--d-border, #eef0f3); }
.fusion-ring-fill {
    stroke: #6366f1;
    transition: stroke-dasharray .9s cubic-bezier(.22, 1, .36, 1);
}
.fusion-card[data-ring="100"] .fusion-ring-fill { stroke: #10b981; }
.fusion-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.fusion-ring-pct {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--d-text, #0f172a);
    letter-spacing: -.028em;
    font-variant-numeric: tabular-nums;
}
.fusion-ring-pct span {
    font-size: .65rem;
    color: var(--d-muted, #94a3b8);
    font-weight: 600;
    margin-left: 1px;
}
.fusion-ring-sub {
    margin-top: .25rem;
    font-size: .58rem;
    font-weight: 700;
    color: var(--d-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.fusion-stat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.fusion-stat-list li {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: .55rem;
    font-size: .78rem;
    color: var(--d-sub, #64748b);
}
.fusion-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.fusion-stat-label { font-weight: 600; color: var(--d-text, #0f172a); }
.fusion-stat-count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--d-text, #0f172a);
}

.fusion-empty {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem;
    background: var(--d-surface-soft, #f8fafc);
    border: 1px dashed var(--d-border-strong, #e5e7eb);
    border-radius: 12px;
    color: var(--d-muted, #94a3b8);
    font-size: .8rem;
}
.fusion-empty i { font-size: 1.1rem; opacity: .6; }


/* ── Patient Segments (in-panel band, picker, cards, modal pickers) ── */
.segment-band {
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem 1rem;
    padding: .85rem 1rem;
    margin: 0 0 1rem 0;
    border: 1px solid #dde6ff;
    border-radius: 14px;
    background: linear-gradient(135deg, #f4f7ff 0%, #fbf5ff 100%);
}
.segment-band__title {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}
.segment-band__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    color: #6366f1;
    box-shadow: 0 4px 10px -4px rgba(99, 102, 241, .35);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.segment-band__heading {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.segment-band__label {
    font-weight: 700;
    font-size: .9rem;
    color: var(--d-text, #0f172a);
    letter-spacing: .005em;
}
.segment-band__hint {
    font-size: .73rem;
    color: var(--d-muted, #6b7280);
    font-weight: 500;
    margin-top: 2px;
}
.segment-band__controls {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    min-width: 0;
}
.segment-band__picker-wrap { flex: 0 0 auto; }
.segment-band__chip { display: inline-flex; }
.segment-band__chip:empty { display: none; }
.segment-band__count {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}
.segment-band__actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    justify-self: end;
}
.segment-band__save {
    box-shadow: 0 4px 12px -3px rgba(99, 102, 241, .45);
}
.segment-band__manage { padding-left: .35rem; padding-right: .35rem; }
@media (max-width: 991.98px) {
    .segment-band {
        grid-template-columns: 1fr;
    }
    .segment-band__actions { justify-self: start; }
}

.segment-picker-trigger {
    --segment-color: #6366f1;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--d-border-strong, #e5e7eb);
    background: var(--d-surface-soft, #fafbfc);
    color: var(--d-text, #0f172a);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.segment-picker-trigger:hover {
    border-color: var(--segment-color);
    background: #fff;
}
.segment-picker-trigger__title {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.segment-picker-trigger > .bi-chevron-down {
    font-size: .7rem;
    color: var(--d-muted, #94a3b8);
}

.segment-picker-dropdown {
    min-width: 380px;
    max-width: 420px;
    padding: 0;
    border: 1px solid var(--d-border-strong, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .18);
    overflow: hidden;
}
.segment-picker-menu {
    display: flex;
    flex-direction: column;
    max-height: 480px;
    overflow-y: auto;
}
.segment-picker-search {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .65rem;
    border-bottom: 1px solid var(--d-border, #eef0f3);
    background: #fff;
}
.segment-picker-search i { color: var(--d-muted, #94a3b8); }
.segment-picker-search input { flex: 1; min-width: 0; }

.segment-picker-cta {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    margin: .35rem .55rem;
    border-radius: 10px;
    background: var(--d-accent-soft, #eef2ff);
    color: var(--d-accent, #6366f1);
    font-weight: 600;
    font-size: .82rem;
    text-decoration: none;
    border: 1px dashed rgba(99, 102, 241, .4);
}
.segment-picker-cta:hover { background: #e0e7ff; color: #4f46e5; }

.segment-picker-group-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem .25rem;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--d-muted, #94a3b8);
}

.segment-picker-item {
    --segment-color: #6366f1;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .85rem;
    color: var(--d-text, #0f172a);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .12s ease, border-color .12s ease;
}
.segment-picker-item:hover {
    background: var(--d-surface-soft, #fafbfc);
    border-left-color: var(--segment-color);
    color: var(--d-text, #0f172a);
}
.segment-picker-item__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.segment-picker-item__title {
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.segment-picker-item__desc {
    font-size: .72rem;
    color: var(--d-sub, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.segment-picker-item__count {
    font-size: .7rem;
    font-weight: 700;
    color: var(--d-muted, #94a3b8);
    padding: .15rem .45rem;
    border-radius: 999px;
    background: var(--d-surface-soft, #fafbfc);
    border: 1px solid var(--d-border, #eef0f3);
}
.segment-picker-empty,
.segment-picker-loading {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: center;
    padding: 1.25rem;
    color: var(--d-muted, #94a3b8);
    font-size: .8rem;
}
.segment-picker-foot {
    margin-top: auto;
    padding: .55rem .85rem;
    border-top: 1px solid var(--d-border, #eef0f3);
    background: var(--d-surface-soft, #fafbfc);
}
.segment-picker-manage {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--d-sub, #64748b);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 600;
}
.segment-picker-manage:hover { color: var(--d-text, #0f172a); }

.segment-active-chip {
    --segment-color: #6366f1;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .35rem .25rem .65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--segment-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--segment-color) 30%, transparent);
    color: var(--segment-color);
    font-size: .75rem;
    font-weight: 600;
}
.segment-active-chip__close {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--segment-color);
    background: transparent;
    text-decoration: none;
    line-height: 1;
}
.segment-active-chip__close:hover {
    background: color-mix(in srgb, var(--segment-color) 18%, transparent);
    color: var(--segment-color);
}

.segment-color-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--segment-color, #6366f1);
    display: inline-block;
}
.segment-icon-bubble {
    --segment-color: #6366f1;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--segment-color) 12%, transparent);
    color: var(--segment-color);
    flex-shrink: 0;
}
.segment-icon-bubble--xs { width: 22px; height: 22px; border-radius: 7px; font-size: .75rem; }
.segment-icon-bubble--sm { width: 28px; height: 28px; border-radius: 8px; font-size: .85rem; }

.segment-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 0;
}
.segment-page__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--d-text, #0f172a);
    margin: 0;
}
.segment-page__sub {
    font-size: .8rem;
    color: var(--d-sub, #64748b);
    margin: .1rem 0 0;
}
.segment-page__filters {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
}
.segment-page__search {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex: 1;
    flex-wrap: wrap;
}
.segment-page__search-input {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.segment-page__search-input i {
    position: absolute;
    top: 50%;
    left: .65rem;
    transform: translateY(-50%);
    color: var(--d-muted, #94a3b8);
}
.segment-page__search-input input { padding-left: 2rem; }

.segment-group { margin-bottom: 1.5rem; }
.segment-group__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0 .5rem;
    border-bottom: 1px solid var(--d-border, #eef0f3);
    margin-bottom: .85rem;
}
.segment-group__icon {
    --segment-color: #6366f1;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--segment-color) 12%, transparent);
    color: var(--segment-color);
    font-size: .85rem;
}
.segment-group__title {
    font-weight: 700;
    color: var(--d-text, #0f172a);
    font-size: .95rem;
}
.segment-group__count {
    margin-left: auto;
    font-size: .72rem;
    color: var(--d-muted, #94a3b8);
    font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--d-surface-soft, #fafbfc);
    border: 1px solid var(--d-border, #eef0f3);
}

.segment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: .75rem;
}
.segment-card {
    --segment-color: #6366f1;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem .9rem 1.15rem;
    background: var(--d-surface, #fff);
    border: 1px solid var(--d-border, #eef0f3);
    border-radius: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.segment-card:hover {
    border-color: color-mix(in srgb, var(--segment-color) 35%, var(--d-border-strong, #e5e7eb));
    box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .12);
}
.segment-card__stripe {
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 4px;
    background: var(--segment-color);
}
.segment-card__body {
    flex: 1;
    min-width: 0;
}
.segment-card__head {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}
.segment-card__title {
    font-weight: 700;
    color: var(--d-text, #0f172a);
    text-decoration: none;
    font-size: .95rem;
}
.segment-card__title:hover { color: var(--segment-color); }
.segment-card__desc {
    color: var(--d-sub, #64748b);
    font-size: .8rem;
    margin: 0 0 .45rem;
    line-height: 1.4;
}
.segment-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.segment-card__actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

.segment-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--d-muted, #94a3b8);
}
.segment-empty i { font-size: 2.25rem; display: block; margin-bottom: .35rem; }
.segment-empty h3 {
    color: var(--d-text, #0f172a);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}
.segment-empty p { font-size: .85rem; margin: 0; }

.color-swatch-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.color-swatch-picker .swatch {
    --segment-color: #6366f1;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: var(--segment-color);
    cursor: pointer;
    padding: 0;
    transition: transform .12s ease, border-color .12s ease;
}
.color-swatch-picker .swatch:hover { transform: scale(1.08); }
.color-swatch-picker .swatch.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--segment-color);
}

.icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.icon-picker .icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--d-border-strong, #e5e7eb);
    background: var(--d-surface, #fff);
    color: var(--d-sub, #64748b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.icon-picker .icon-btn:hover {
    border-color: var(--d-accent, #6366f1);
    color: var(--d-accent, #6366f1);
}
.icon-picker .icon-btn.is-active {
    border-color: var(--d-accent, #6366f1);
    background: var(--d-accent-soft, #eef2ff);
    color: var(--d-accent, #6366f1);
}

.segment-modal { background: rgba(15, 23, 42, .35); }

.color-swatch-picker--sm { gap: .35rem; }
.color-swatch-picker--sm .swatch { width: 22px; height: 22px; border-radius: 7px; }
.icon-picker--sm { gap: .35rem; }
.icon-picker--sm .icon-btn { width: 30px; height: 30px; border-radius: 7px; font-size: .8rem; }

.category-system-grid,
.category-custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: .75rem;
}
.category-system-grid { gap: .75rem; }

.category-card {
    position: relative;
    background: var(--d-surface, #fff);
    border: 1px solid var(--d-border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}
.category-card:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}
.category-card--system {
    background: var(--d-surface-soft, #f8fafc);
    border-style: dashed;
}
.category-card__stripe {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--segment-color, #6366f1);
}
.category-card__body {
    padding: .9rem 1rem .9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.category-card__head {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}
.category-card__titles { flex: 1; min-width: 0; }
.category-card__title {
    margin: 0;
    font-size: .98rem;
    font-weight: 600;
    color: var(--d-text, #0f172a);
}
.category-card__desc {
    margin: .15rem 0 0;
    font-size: .82rem;
    color: var(--d-text-muted, #64748b);
    line-height: 1.35;
}
.category-card__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}
.category-card__actions {
    display: flex;
    gap: .35rem;
}
.category-segment-count {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    color: var(--d-text-muted, #64748b);
    background: var(--d-surface-soft, #f1f5f9);
    border-radius: 999px;
    padding: .15rem .55rem;
}

.category-inline-form {
    margin-top: .65rem;
    padding: .75rem .85rem;
    border: 1px dashed var(--d-border, #e5e7eb);
    border-radius: 10px;
    background: var(--d-surface-soft, #f8fafc);
}
.category-inline-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    margin-top: .25rem;
}
.category-delete-blocked__list {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.category-delete-blocked__list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
}

.category-card__drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--d-text-muted, #94a3b8);
    cursor: grab;
    border-radius: 6px;
    transition: background .12s ease, color .12s ease;
    flex: 0 0 auto;
}
.category-card__drag-handle:hover {
    background: var(--d-surface-soft, #f1f5f9);
    color: var(--d-text, #0f172a);
}
.category-card__drag-handle:active { cursor: grabbing; }
.category-card--ghost {
    opacity: .35;
    background: var(--d-surface-soft, #f1f5f9);
}
.category-card--chosen {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
    transform: translateY(-2px);
}
.category-card__view-link {
    font-size: .8rem;
    color: var(--d-text-muted, #64748b);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.category-card__view-link:hover { color: var(--d-accent, #6366f1); text-decoration: underline; }

.segment-modal__category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.segment-modal__new-cat {
    padding: 0;
    font-size: .82rem;
    text-decoration: none;
}
.segment-modal__new-cat i { margin-right: .15rem; }

.segment-live-count {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    background: var(--d-muted-bg, #f1f5f9);
    color: var(--d-sub, #475569);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.segment-live-count i { font-size: .85rem; opacity: .8; }
.segment-live-count strong { font-weight: 700; color: var(--d-text, #0f172a); }
.segment-live-count--loading { opacity: .6; }
.segment-live-count--loading i { animation: segment-spin .9s linear infinite; }
@keyframes segment-spin { to { transform: rotate(360deg); } }

.campaign-audience-preview .segment-live-count { font-size: .8rem; padding: .35rem .7rem; }

.segment-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.segment-modal__live-count { flex: 0 0 auto; }
.segment-modal__footer-actions {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.segment-templates-page .segment-page__header { margin-bottom: 1rem; }
.segment-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: .75rem;
}
.template-card {
    position: relative;
    padding-top: 1.6rem;
}
.template-card__badge {
    position: absolute;
    top: .55rem;
    right: .65rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--segment-color, #6366f1);
    background: color-mix(in srgb, var(--segment-color, #6366f1) 12%, transparent);
    padding: .15rem .45rem;
    border-radius: 6px;
    line-height: 1.4;
}

.segment-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .2rem;
    background: var(--d-muted-bg, #f1f5f9);
    border-radius: 999px;
}
.segment-sort-toggle__opt {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--d-sub, #64748b);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    margin: 0;
}
.segment-sort-toggle__opt:hover { color: var(--d-text, #0f172a); }
.segment-sort-toggle__opt input { display: none; }
.segment-sort-toggle__opt.is-active {
    background: var(--d-surface, #fff);
    color: var(--d-text, #0f172a);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.segment-sort-toggle__opt i { font-size: .9rem; }

.segment-kind-toggle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    background: var(--d-muted-bg, #f1f5f9);
    border-radius: 10px;
}
.segment-kind-toggle__opt {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--d-sub, #64748b);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    margin: 0;
}
.segment-kind-toggle__opt:hover { color: var(--d-text, #0f172a); }
.segment-kind-toggle__opt input { display: none; }
.segment-kind-toggle__opt.is-active {
    background: var(--d-surface, #fff);
    color: var(--d-text, #0f172a);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.segment-kind-toggle__opt i { font-size: .95rem; }

.segment-card .usage-count {
    position: absolute;
    bottom: .5rem;
    right: .65rem;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .68rem;
    font-weight: 700;
    color: var(--segment-color, #6366f1);
    background: color-mix(in srgb, var(--segment-color, #6366f1) 10%, transparent);
    padding: .15rem .4rem;
    border-radius: 6px;
    line-height: 1.4;
    pointer-events: none;
}
.segment-card .usage-count i { font-size: .72rem; }

/* Section eyebrow used above metric/resource rows on dashboards */
.padmin-section-eyebrow {
    display: flex; align-items: center; gap: .55rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-sub, #64748b);
    margin: 0 0 .65rem;
}
.padmin-section-eyebrow::before {
    content: ''; width: 14px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #0a4f7a, #0c7e98);
    flex: none;
}
.padmin-section-eyebrow .padmin-section-meta {
    margin-left: auto; font-size: .68rem; font-weight: 600;
    color: var(--text-sub, #94a3b8); letter-spacing: .04em;
    text-transform: none;
}
[data-theme="dark"] .padmin-section-eyebrow { color: rgba(255,255,255,.55); }
[data-theme="dark"] .padmin-section-eyebrow .padmin-section-meta { color: rgba(255,255,255,.45); }

/* Lead Funnel — horizontal stat strip used on growth/acquisition cards */
.funnel-stat {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .75rem .5rem; border-radius: .75rem;
    flex: 1; text-align: center;
    transition: background .2s ease;
}
.funnel-stat:hover { background: rgba(0,0,0,.02); }
.funnel-stat-icon {
    width: 2.25rem; height: 2.25rem; border-radius: .625rem;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; margin-bottom: .125rem;
}
.funnel-stat-value { font-size: 1.25rem; font-weight: 800; color: var(--bs-heading-color); line-height: 1; }
.funnel-stat-label { font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-sub); }
.funnel-connector { color: var(--text-sub, #d1d5db); font-size: .75rem; display: flex; align-items: center; padding-bottom: .75rem; }
[data-theme="dark"] .funnel-stat:hover { background: rgba(255, 255, 255, 0.03); }

/* Integrations catalog cards */
.integ-card {
    border: 1px solid var(--d-border, #e5e7eb);
    border-radius: .75rem;
    padding: 1rem;
    background: var(--d-surface, #fff);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.integ-card:hover {
    border-color: var(--d-border-strong, #cbd5e1);
    box-shadow: 0 6px 20px -12px rgba(15, 23, 42, .25);
    transform: translateY(-1px);
}
.integ-card-icon {
    width: 2.5rem; height: 2.5rem; border-radius: .625rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--d-surface-soft, #f1f5f9);
    color: var(--d-heading, #0f172a);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.integ-pill-connected {
    background: rgba(16, 185, 129, .12);
    color: #047857;
    border-color: rgba(16, 185, 129, .35);
}
.integ-pill-warn {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
    border-color: rgba(245, 158, 11, .35);
}
[data-theme="dark"] .integ-card { background: var(--d-surface, #0f172a); }
[data-theme="dark"] .integ-card-icon { background: rgba(255,255,255,.04); color: #e2e8f0; }
[data-theme="dark"] .integ-pill-connected { background: rgba(16,185,129,.18); color: #6ee7b7; }
[data-theme="dark"] .integ-pill-warn { background: rgba(245,158,11,.18); color: #fbbf24; }

.integ-quick-nav {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-bottom: 1rem;
}
.integ-summary {
    display: flex; gap: 1.25rem; align-items: center;
    padding: .5rem 0;
    color: var(--text-sub);
    font-size: .8rem;
}
.integ-summary strong { color: var(--bs-heading-color); font-weight: 700; }

/* GBP claim page — segmented filter strip */
.gbp-filters {
    display: flex; gap: .75rem; align-items: center;
    flex-wrap: wrap;
}
.gbp-segmented {
    display: inline-flex;
    background: var(--d-surface-soft, #f1f5f9);
    border: 1px solid var(--d-border, #e5e7eb);
    border-radius: .625rem;
    padding: .2rem;
    gap: .15rem;
}
.gbp-seg-item {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .85rem;
    border-radius: .45rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-sub);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.gbp-seg-item:hover { color: var(--bs-heading-color); background: rgba(0,0,0,.03); }
.gbp-seg-item.is-active {
    background: var(--d-surface, #fff);
    color: var(--bs-heading-color);
    box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.gbp-seg-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4rem; height: 1.1rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--d-border, #e2e8f0);
    color: var(--text-sub);
    font-size: .65rem;
    font-weight: 700;
}
.gbp-seg-item.is-active .gbp-seg-count {
    background: var(--bs-primary, #0d6efd); color: #fff;
}

.gbp-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 360px;
}
.gbp-search > .bi {
    position: absolute; left: .75rem; top: 50%;
    transform: translateY(-50%);
    color: var(--text-sub);
    font-size: .8rem;
    pointer-events: none;
}
.gbp-search input.form-control {
    padding-left: 2rem;
    border-radius: .5rem;
}

/* GBP table polish */
.gbp-table tbody tr.gbp-row.is-claimed { background: rgba(16,185,129,.04); }
.gbp-table tbody tr.gbp-row.is-archived { opacity: .65; }
.gbp-table tbody tr.gbp-row:hover { background: rgba(13,110,253,.04); }
.gbp-table .form-check-input { cursor: pointer; }

/* Sticky bulk-action bar */
.gbp-bulkbar {
    position: sticky;
    bottom: .75rem;
    margin-top: .75rem;
    z-index: 30;
    transition: opacity .15s ease, transform .15s ease;
    opacity: 0;
    transform: translateY(8px);
}
.gbp-bulkbar.is-visible { opacity: 1; transform: translateY(0); }
.gbp-bulkbar-inner {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .9rem;
    border-radius: .75rem;
    background: var(--bs-heading-color, #0f172a);
    color: #fff;
    box-shadow: 0 14px 32px -16px rgba(15,23,42,.5);
}
.gbp-bulkbar-label { font-size: .85rem; font-weight: 600; }
.gbp-bulkbar-label strong { font-weight: 800; }
.gbp-bulkbar #gbp-bulkbar-clear { color: rgba(255,255,255,.7); padding: 0 .25rem; }
.gbp-bulkbar #gbp-bulkbar-clear:hover { color: #fff; }

/* GBP pull error / not-loaded card */
.gbp-error-card { border-color: rgba(245,158,11,.45); }
.gbp-error-icon {
    width: 2.5rem; height: 2.5rem; border-radius: .625rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(245,158,11,.14);
    color: #b45309;
    font-size: 1.1rem;
    flex-shrink: 0;
}
[data-theme="dark"] .gbp-segmented { background: rgba(255,255,255,.04); }
[data-theme="dark"] .gbp-seg-item.is-active { background: rgba(255,255,255,.08); }
[data-theme="dark"] .gbp-bulkbar-inner { background: #1e293b; }
[data-theme="dark"] .gbp-error-icon { background: rgba(245,158,11,.18); color: #fbbf24; }

[data-theme="dark"] .details-hero-name {
    color: var(--dark-text-primary);
}
[data-theme="dark"] .details-hero-eyebrow,
[data-theme="dark"] .details-hero-subtitle {
    color: var(--dark-text-secondary);
}
[data-theme="dark"] .details-pill--info {
    background: rgba(56, 189, 248, 0.14);
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.28);
}
[data-theme="dark"] .details-pill--accent {
    background: rgba(168, 85, 247, 0.16);
    color: #c4b5fd;
    border-color: rgba(168, 85, 247, 0.32);
}

/* ── 7-Day Profile Views Trend (analytics) ── */
.seven-day-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.seven-day-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.seven-day-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.seven-day-dot {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 999px;
    flex-shrink: 0;
}
.seven-day-canvas-wrap {
    position: relative;
    height: 220px;
}
@media (min-width: 768px) {
    .seven-day-canvas-wrap { height: 240px; }
}