:root {
    --background: #f8fafc;
    --foreground: #0f172a;
    --card: #ffffff;
    --card-foreground: #0f172a;
    --border: #e2e8f0;
    --muted: #f1f5f9;
    --muted-foreground: #64748b;
    --primary: #2563eb;
    --primary-foreground: #ffffff;
    --secondary: #eef2ff;
    --secondary-foreground: #1e3a8a;
    --destructive: #ef4444;
    --accent: #eff6ff;
    --accent-foreground: #1d4ed8;
    --ring: rgba(37, 99, 235, 0.22);
    --input: #dbe3ef;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #eff6ff;
    --color-primary-lighter: #f8fbff;
    --color-primary-ring: rgba(37, 99, 235, 0.18);
    --color-success: #10b981;
    --color-success-bg: #ecfdf5;
    --color-success-text: #047857;
    --color-warning: #f59e0b;
    --color-warning-bg: #fffbeb;
    --color-warning-text: #b45309;
    --color-danger: #ef4444;
    --color-danger-bg: #fef2f2;
    --color-danger-text: #b91c1c;
    --color-info: #3b82f6;
    --color-info-bg: #eff6ff;
    --color-info-text: #1d4ed8;
    --sidebar: #ffffff;
    --sidebar-accent: #eff6ff;
    --sidebar-accent-foreground: #1d4ed8;
    --sidebar-border: #e2e8f0;
    --sidebar-foreground: #64748b;
    --sidebar-primary: #0f172a;
    --color-bg: #f8fafc;
    --color-card: #ffffff;
    --color-text: #0f172a;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;
    --color-border: #e2e8f0;
    --color-hover-bg: #eff6ff;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 14px 38px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 26px 64px rgba(15, 23, 42, 0.12);
    --transition: 160ms ease;
}

/* ===== Detailed advertiser metrics dashboard ===== */
.kpi-row {
    grid-template-columns: repeat(4, minmax(230px, 1fr)) !important;
}

.kpi-card {
    min-height: 176px !important;
}

.data-table {
    min-width: 3180px !important;
}

.data-table .col-name {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    min-width: 300px !important;
    background: inherit !important;
}

.data-table thead .col-name {
    z-index: 5 !important;
}

.data-table .col-name small {
    display: block !important;
    max-width: 260px !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.col-picker-panel {
    width: min(760px, 86vw) !important;
    max-height: min(680px, 78vh) !important;
    overflow: auto !important;
    padding: 18px !important;
}

.col-picker-panel .panel-title {
    padding: 0 2px 12px !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.metric-picker-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

.metric-picker-actions button {
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
}

.metric-picker-actions button:hover {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.metric-group {
    padding: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #fbfdff !important;
}

.metric-group + .metric-group {
    margin-top: 10px !important;
}

.metric-group-title {
    margin-bottom: 8px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.metric-group label {
    display: inline-flex !important;
    width: calc(50% - 5px) !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    vertical-align: top !important;
}

.metric-group label span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.dashboard-filter-panel {
    width: 292px !important;
}

.account-health-shell {
    padding: 22px !important;
    border: 1px solid rgba(219, 227, 239, 0.92) !important;
    border-radius: 30px !important;
    background: #ffffff !important;
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.08) !important;
}

.account-health-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.account-health-head h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.account-health-head p {
    margin: 5px 0 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.account-health-head > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.account-health-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
    gap: 14px !important;
}

.account-health-card-mini {
    padding: 15px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important;
}

.account-health-card-mini:hover {
    transform: translateY(-2px) !important;
    border-color: #bfdbfe !important;
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.10) !important;
}

.account-health-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.account-health-top strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.account-health-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: 10px !important;
}

.account-health-meta span,
.account-health-foot span {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.account-health-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 13px !important;
}

.account-health-stats div {
    padding: 10px 8px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
}

.account-health-stats b {
    display: block !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.account-health-stats small {
    display: block !important;
    margin-top: 4px !important;
    color: #94a3b8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.account-health-foot {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 12px !important;
}

.account-health-foot span {
    max-width: 100% !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
}

.account-health-foot .ok {
    background: #ecfdf5 !important;
    color: #047857 !important;
}

.account-health-foot .risk {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

@media (max-width: 1500px) {
    .account-health-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .kpi-row,
    .account-health-grid,
    .account-health-stats {
        grid-template-columns: 1fr !important;
    }
    .account-health-head {
        flex-direction: column !important;
    }
    .metric-group label {
        width: 100% !important;
    }
}

@media (min-width: 1301px) {
    .dash-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
    .dash-header-right,
    .dashboard-actions {
        width: auto !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    .dash-filter-input,
    .dashboard-search {
        width: 340px !important;
    }
    .dash-filter-wrap {
        flex: 0 0 auto !important;
    }
    .dash-filter-input,
    .date-btn,
    .dash-tool-btn,
    .col-picker-btn,
    .btn-quick-create {
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 15px !important;
        font-size: 12.5px !important;
    }
    .date-btn,
    .dash-tool-btn,
    .col-picker-btn,
    .btn-quick-create {
        padding-inline: 14px !important;
        white-space: nowrap !important;
    }
    .dashboard-command-grid {
        grid-template-columns: minmax(0, 1fr) 282px !important;
    }
    .dashboard-insights {
        grid-template-columns: minmax(0, 1.45fr) minmax(292px, 0.72fr) !important;
    }
    .dashboard-live-rail {
        position: sticky !important;
        top: 18px !important;
    }
    .live-rail-card {
        display: flex !important;
        flex-direction: column !important;
    }
    .live-rail-header,
    .rail-health-card {
        grid-column: auto !important;
    }
    .kpi-card {
        position: relative !important;
    }
    .kpi-top {
        justify-content: flex-start !important;
        padding-right: 66px !important;
    }
    .kpi-top,
    .kpi-card-head {
        min-width: 0 !important;
    }
    .kpi-card-head {
        flex: 1 1 auto !important;
        gap: 7px !important;
    }
    .kpi-badge {
        position: absolute !important;
        top: 16px !important;
        right: 18px !important;
        flex: 0 0 auto !important;
    }
    .kpi-label {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }
}

@media (min-width: 1301px) and (max-width: 1699px) {
    .kpi-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1700px) {
    .kpi-row {
        grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
    }
}

/* Really-final Figma reference pass: this must stay at EOF. */
.dash-container {
    position: relative !important;
    isolation: isolate !important;
    padding: 28px 34px 46px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 84% -8%, rgba(99,102,241,.30) 0 12%, transparent 34%),
        radial-gradient(circle at 2% 92%, rgba(236,72,153,.22) 0 11%, transparent 32%),
        linear-gradient(135deg, #eef6ff 0%, #f6f9ff 48%, #fff7fb 100%) !important;
}
.dash-container > *:not(.dashboard-ambient) { position: relative !important; z-index: 2 !important; }
.dashboard-ambient { position: absolute !important; z-index: 0 !important; pointer-events: none !important; border-radius: 999px !important; filter: blur(24px) !important; opacity: .72 !important; }
.dashboard-ambient-blue { top: -88px !important; right: 120px !important; width: 260px !important; height: 180px !important; background: radial-gradient(circle at 40% 42%, rgba(37,99,235,.46), rgba(125,211,252,.18) 58%, transparent 72%) !important; }
.dashboard-ambient-violet { top: 54px !important; right: 18px !important; width: 160px !important; height: 160px !important; background: radial-gradient(circle, rgba(124,58,237,.34), rgba(196,181,253,.16) 64%, transparent 76%) !important; }
.dashboard-ambient-pink { left: -42px !important; bottom: 120px !important; width: 210px !important; height: 210px !important; background: radial-gradient(circle at 50% 55%, rgba(236,72,153,.28), rgba(251,207,232,.22) 58%, transparent 74%) !important; }
.dash-header,.kpi-card,.chart-card,.insight-card,.soft-panel,.account-health-shell,.glass-table-shell,.live-rail-card {
    border: 1px solid rgba(255,255,255,.72) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(244,249,255,.52)) !important;
    backdrop-filter: blur(26px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.18) !important;
    box-shadow: 0 28px 80px rgba(80,102,160,.14), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.dash-header { border-radius: 34px !important; padding: 22px 24px !important; margin-bottom: 2px !important; }
.dash-title { color: #172033 !important; font-size: clamp(27px, 2.1vw, 34px) !important; font-weight: 900 !important; }
.dash-title .material-symbols-rounded { background: linear-gradient(135deg, #2563eb, #7c3aed) !important; box-shadow: 0 18px 38px rgba(37,99,235,.24), 0 0 0 8px rgba(37,99,235,.07) !important; }
.dash-subtitle,.kpi-label,.chart-subtitle,.insight-subtitle,.soft-panel-head p,.live-rail-header p { color: #64748b !important; }
.dash-header-right { border: 1px solid rgba(255,255,255,.68) !important; background: rgba(255,255,255,.50) !important; border-radius: 24px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 36px rgba(80,102,160,.08) !important; }
.dash-filter-input,.date-btn,.dash-tool-btn,.col-picker-btn { border-color: rgba(203,213,225,.76) !important; background: rgba(255,255,255,.74) !important; color: #172033 !important; }
.dash-filter-input:focus,.date-btn:hover,.dash-tool-btn:hover,.col-picker-btn:hover { border-color: rgba(37,99,235,.44) !important; box-shadow: 0 0 0 4px rgba(37,99,235,.10), 0 12px 28px rgba(37,99,235,.10) !important; }
.btn-quick-create { background: linear-gradient(135deg, #2563eb, #4f46e5) !important; box-shadow: 0 18px 36px rgba(37,99,235,.26) !important; }
.dashboard-command-grid { grid-template-columns: minmax(0, 1fr) 300px !important; gap: 18px !important; }
.dashboard-command-main { gap: 18px !important; }
.kpi-row { gap: 14px !important; }
.kpi-card { min-height: 134px !important; border-radius: 24px !important; padding: 17px 18px !important; overflow: hidden !important; }
.kpi-card::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: radial-gradient(circle at 88% 18%, rgba(37,99,235,.13), transparent 34%) !important; pointer-events: none !important; }
.kpi-card::after { opacity: .14 !important; width: 110px !important; height: 38px !important; }
.kpi-card:hover { transform: translateY(-4px) !important; box-shadow: 0 34px 90px rgba(80,102,160,.18), inset 0 1px 0 rgba(255,255,255,.9) !important; }
.kpi-icon { background: rgba(239,246,255,.86) !important; border-color: rgba(191,219,254,.78) !important; color: #2563eb !important; }
.kpi-value { color: #172033 !important; font-size: clamp(27px, 2vw, 35px) !important; font-weight: 900 !important; }
.kpi-badge,.panel-chip { border: 1px solid rgba(134,239,172,.76) !important; background: rgba(236,253,245,.78) !important; color: #047857 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important; }
.dashboard-insights { grid-template-columns: minmax(0, 1.68fr) minmax(270px, .68fr) !important; gap: 14px !important; }
.hero-analytics-card { min-height: 356px !important; border-radius: 28px !important; padding-bottom: 14px !important; }
.chart-content-grid { display: grid !important; grid-template-columns: minmax(0,1fr) 210px !important; gap: 14px !important; align-items: stretch !important; padding: 0 18px !important; }
.hero-analytics-card .chart-body { height: 224px !important; padding: 0 !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12)) !important; }
.stream-panel { min-width: 0 !important; padding: 14px !important; border: 1px solid rgba(226,232,240,.72) !important; border-radius: 22px !important; background: rgba(255,255,255,.48) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; }
.stream-head,.stream-row { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 10px !important; }
.stream-head { margin-bottom: 12px !important; color: #172033 !important; font-size: 12px !important; font-weight: 900 !important; }
.stream-head span:last-child,.stream-row b { font-family: "JetBrains Mono","Fira Code",monospace !important; }
.stream-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.stream-row span { color: #64748b !important; font-size: 11.5px !important; font-weight: 750 !important; }
.stream-row b { color: #172033 !important; font-size: 11.5px !important; font-weight: 850 !important; }
.stream-row i { grid-column: 1 / -1 !important; display: block !important; height: 5px !important; overflow: hidden !important; border-radius: 999px !important; background: linear-gradient(90deg, #2563eb var(--w,40%), rgba(226,232,240,.78) var(--w,40%)) !important; }
.insight-card { min-height: 356px !important; border-radius: 28px !important; }
.insight-item { background: rgba(255,255,255,.48) !important; border-color: rgba(226,232,240,.70) !important; }
.dashboard-lower-grid { display: grid !important; grid-template-columns: minmax(0,1.05fr) minmax(260px,.95fr) !important; gap: 14px !important; }
.soft-panel { border-radius: 28px !important; padding: 20px !important; }
.soft-panel-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; margin-bottom: 18px !important; }
.soft-panel-head h3 { margin: 0 0 4px !important; color: #172033 !important; font-size: 17px !important; font-weight: 900 !important; }
.soft-panel-head p { margin: 0 !important; font-size: 12.5px !important; font-weight: 700 !important; }
.panel-chip { display: inline-flex !important; align-items: center !important; min-height: 30px !important; padding: 0 10px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 850 !important; white-space: nowrap !important; }
.funnel-bars { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.funnel-row { display: grid !important; grid-template-columns: 72px minmax(72px,auto) minmax(0,1fr) !important; align-items: center !important; gap: 12px !important; }
.funnel-row span { color: #64748b !important; font-size: 12px !important; font-weight: 800 !important; }
.funnel-row b,.breakdown-list b { color: #172033 !important; font-family: "JetBrains Mono","Fira Code",monospace !important; font-size: 13px !important; font-weight: 900 !important; }
.funnel-row i { display: block !important; height: 12px !important; border-radius: 999px !important; background: linear-gradient(90deg,#2563eb 0 var(--w,35%),rgba(226,232,240,.72) var(--w,35%) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; }
.funnel-row:nth-child(2) i { background: linear-gradient(90deg,#7c3aed 0 var(--w,35%),rgba(226,232,240,.72) var(--w,35%) 100%) !important; }
.funnel-row:nth-child(3) i { background: linear-gradient(90deg,#10b981 0 var(--w,35%),rgba(226,232,240,.72) var(--w,35%) 100%) !important; }
.funnel-row:nth-child(4) i { background: linear-gradient(90deg,#ec4899 0 var(--w,35%),rgba(226,232,240,.72) var(--w,35%) 100%) !important; }
.breakdown-list { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
.breakdown-list div { min-height: 58px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 5px !important; padding: 12px !important; border: 1px solid rgba(226,232,240,.70) !important; border-radius: 18px !important; background: rgba(255,255,255,.48) !important; }
.breakdown-list div:last-child { grid-column: 1 / -1 !important; }
.breakdown-list span { color: #64748b !important; font-size: 11.5px !important; font-weight: 800 !important; }
.dashboard-live-rail { top: 24px !important; }
.live-rail-card { border-radius: 28px !important; }
.rail-section,.rail-health-card,.account-health-card-mini { background: rgba(255,255,255,.48) !important; border-color: rgba(226,232,240,.72) !important; }
.glass-table-shell { overflow: hidden !important; }
.data-table thead th { background: rgba(248,250,252,.70) !important; }
@media (min-width: 1301px) and (max-width: 1699px) {
    .dashboard-command-grid { grid-template-columns: minmax(0,1fr) 282px !important; }
    .kpi-row { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
}
@media (max-width: 1500px) {
    .dashboard-command-grid { grid-template-columns: 1fr !important; }
    .live-rail-card { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .live-rail-header,.rail-health-card { grid-column: 1 / -1 !important; }
}
@media (max-width: 1180px) {
    .chart-content-grid,.dashboard-insights,.dashboard-lower-grid { grid-template-columns: 1fr !important; }
    .stream-panel { display: none !important; }
}
@media (max-width: 768px) {
    .dash-container { padding: 72px 12px 28px !important; }
    .dash-header,.kpi-card,.chart-card,.insight-card,.soft-panel,.account-health-shell,.glass-table-shell,.live-rail-card { border-radius: 22px !important; }
    .breakdown-list { grid-template-columns: 1fr !important; }
    .funnel-row { grid-template-columns: 56px 72px minmax(0,1fr) !important; gap: 8px !important; }
}

/* Final Figma-inspired dashboard skin. Keep this block last so it wins older overrides. */
.dash-container {
    position: relative !important;
    isolation: isolate !important;
    padding: 28px 34px 46px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 84% -8%, rgba(99,102,241,.30) 0 12%, transparent 34%),
        radial-gradient(circle at 2% 92%, rgba(236,72,153,.22) 0 11%, transparent 32%),
        linear-gradient(135deg, #eef6ff 0%, #f6f9ff 48%, #fff7fb 100%) !important;
}
.dash-container > *:not(.dashboard-ambient) { position: relative !important; z-index: 2 !important; }
.dashboard-ambient { position: absolute !important; z-index: 0 !important; pointer-events: none !important; border-radius: 999px !important; filter: blur(24px) !important; opacity: .72 !important; }
.dashboard-ambient-blue { top: -88px !important; right: 120px !important; width: 260px !important; height: 180px !important; background: radial-gradient(circle at 40% 42%, rgba(37,99,235,.46), rgba(125,211,252,.18) 58%, transparent 72%) !important; }
.dashboard-ambient-violet { top: 54px !important; right: 18px !important; width: 160px !important; height: 160px !important; background: radial-gradient(circle, rgba(124,58,237,.34), rgba(196,181,253,.16) 64%, transparent 76%) !important; }
.dashboard-ambient-pink { left: -42px !important; bottom: 120px !important; width: 210px !important; height: 210px !important; background: radial-gradient(circle at 50% 55%, rgba(236,72,153,.28), rgba(251,207,232,.22) 58%, transparent 74%) !important; }

.dash-header,
.kpi-card,
.chart-card,
.insight-card,
.soft-panel,
.account-health-shell,
.glass-table-shell,
.live-rail-card {
    border: 1px solid rgba(255,255,255,.72) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(244,249,255,.52)) !important;
    backdrop-filter: blur(26px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.18) !important;
    box-shadow: 0 28px 80px rgba(80,102,160,.14), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
.dash-header { border-radius: 34px !important; padding: 22px 24px !important; margin-bottom: 2px !important; }
.dash-title { color: #172033 !important; font-size: clamp(27px, 2.1vw, 34px) !important; font-weight: 900 !important; }
.dash-title .material-symbols-rounded { background: linear-gradient(135deg, #2563eb, #7c3aed) !important; box-shadow: 0 18px 38px rgba(37,99,235,.24), 0 0 0 8px rgba(37,99,235,.07) !important; }
.dash-subtitle,
.kpi-label,
.chart-subtitle,
.insight-subtitle,
.soft-panel-head p,
.live-rail-header p { color: #64748b !important; }
.dash-header-right { border: 1px solid rgba(255,255,255,.68) !important; background: rgba(255,255,255,.50) !important; border-radius: 24px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 36px rgba(80,102,160,.08) !important; }
.dash-filter-input,
.date-btn,
.dash-tool-btn,
.col-picker-btn { border-color: rgba(203,213,225,.76) !important; background: rgba(255,255,255,.74) !important; color: #172033 !important; }
.dash-filter-input:focus,
.date-btn:hover,
.dash-tool-btn:hover,
.col-picker-btn:hover { border-color: rgba(37,99,235,.44) !important; box-shadow: 0 0 0 4px rgba(37,99,235,.10), 0 12px 28px rgba(37,99,235,.10) !important; }
.btn-quick-create { background: linear-gradient(135deg, #2563eb, #4f46e5) !important; box-shadow: 0 18px 36px rgba(37,99,235,.26) !important; }

.dashboard-command-grid { grid-template-columns: minmax(0, 1fr) 300px !important; gap: 18px !important; }
.dashboard-command-main { gap: 18px !important; }
.kpi-row { gap: 14px !important; }
.kpi-card { min-height: 134px !important; border-radius: 24px !important; padding: 17px 18px !important; overflow: hidden !important; }
.kpi-card::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: radial-gradient(circle at 88% 18%, rgba(37,99,235,.13), transparent 34%) !important; pointer-events: none !important; }
.kpi-card::after { opacity: .14 !important; width: 110px !important; height: 38px !important; }
.kpi-card:hover { transform: translateY(-4px) !important; box-shadow: 0 34px 90px rgba(80,102,160,.18), inset 0 1px 0 rgba(255,255,255,.9) !important; }
.kpi-icon { background: rgba(239,246,255,.86) !important; border-color: rgba(191,219,254,.78) !important; color: #2563eb !important; }
.kpi-value { color: #172033 !important; font-size: clamp(27px, 2vw, 35px) !important; font-weight: 900 !important; }
.kpi-badge,
.panel-chip { border: 1px solid rgba(134,239,172,.76) !important; background: rgba(236,253,245,.78) !important; color: #047857 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important; }

.dashboard-insights { grid-template-columns: minmax(0, 1.68fr) minmax(270px, .68fr) !important; gap: 14px !important; }
.hero-analytics-card { min-height: 356px !important; border-radius: 28px !important; padding-bottom: 14px !important; }
.chart-content-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 210px !important; gap: 14px !important; align-items: stretch !important; padding: 0 18px !important; }
.hero-analytics-card .chart-body { height: 224px !important; padding: 0 !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12)) !important; }
.stream-panel { min-width: 0 !important; padding: 14px !important; border: 1px solid rgba(226,232,240,.72) !important; border-radius: 22px !important; background: rgba(255,255,255,.48) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; }
.stream-head,
.stream-row { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 10px !important; }
.stream-head { margin-bottom: 12px !important; color: #172033 !important; font-size: 12px !important; font-weight: 900 !important; }
.stream-head span:last-child,
.stream-row b { font-family: "JetBrains Mono", "Fira Code", monospace !important; }
.stream-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.stream-row span { color: #64748b !important; font-size: 11.5px !important; font-weight: 750 !important; }
.stream-row b { color: #172033 !important; font-size: 11.5px !important; font-weight: 850 !important; }
.stream-row i { grid-column: 1 / -1 !important; display: block !important; height: 5px !important; overflow: hidden !important; border-radius: 999px !important; background: linear-gradient(90deg, #2563eb var(--w,40%), rgba(226,232,240,.78) var(--w,40%)) !important; }
.insight-card { min-height: 356px !important; border-radius: 28px !important; }
.insight-item { background: rgba(255,255,255,.48) !important; border-color: rgba(226,232,240,.70) !important; }

.dashboard-lower-grid { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr) !important; gap: 14px !important; }
.soft-panel { border-radius: 28px !important; padding: 20px !important; }
.soft-panel-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; margin-bottom: 18px !important; }
.soft-panel-head h3 { margin: 0 0 4px !important; color: #172033 !important; font-size: 17px !important; font-weight: 900 !important; }
.soft-panel-head p { margin: 0 !important; font-size: 12.5px !important; font-weight: 700 !important; }
.panel-chip { display: inline-flex !important; align-items: center !important; min-height: 30px !important; padding: 0 10px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 850 !important; white-space: nowrap !important; }
.funnel-bars { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.funnel-row { display: grid !important; grid-template-columns: 72px minmax(72px, auto) minmax(0, 1fr) !important; align-items: center !important; gap: 12px !important; }
.funnel-row span { color: #64748b !important; font-size: 12px !important; font-weight: 800 !important; }
.funnel-row b,
.breakdown-list b { color: #172033 !important; font-family: "JetBrains Mono","Fira Code",monospace !important; font-size: 13px !important; font-weight: 900 !important; }
.funnel-row i { display: block !important; height: 12px !important; border-radius: 999px !important; background: linear-gradient(90deg, #2563eb 0 var(--w,35%), rgba(226,232,240,.72) var(--w,35%) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; }
.funnel-row:nth-child(2) i { background: linear-gradient(90deg, #7c3aed 0 var(--w,35%), rgba(226,232,240,.72) var(--w,35%) 100%) !important; }
.funnel-row:nth-child(3) i { background: linear-gradient(90deg, #10b981 0 var(--w,35%), rgba(226,232,240,.72) var(--w,35%) 100%) !important; }
.funnel-row:nth-child(4) i { background: linear-gradient(90deg, #ec4899 0 var(--w,35%), rgba(226,232,240,.72) var(--w,35%) 100%) !important; }
.breakdown-list { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
.breakdown-list div { min-height: 58px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 5px !important; padding: 12px !important; border: 1px solid rgba(226,232,240,.70) !important; border-radius: 18px !important; background: rgba(255,255,255,.48) !important; }
.breakdown-list div:last-child { grid-column: 1 / -1 !important; }
.breakdown-list span { color: #64748b !important; font-size: 11.5px !important; font-weight: 800 !important; }

.dashboard-live-rail { top: 24px !important; }
.live-rail-card { border-radius: 28px !important; }
.rail-section,
.rail-health-card,
.account-health-card-mini { background: rgba(255,255,255,.48) !important; border-color: rgba(226,232,240,.72) !important; }
.glass-table-shell { overflow: hidden !important; }
.data-table thead th { background: rgba(248,250,252,.70) !important; }

@media (min-width: 1301px) and (max-width: 1699px) {
    .dashboard-command-grid { grid-template-columns: minmax(0, 1fr) 282px !important; }
    .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 1500px) {
    .dashboard-command-grid { grid-template-columns: 1fr !important; }
    .live-rail-card { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
    .live-rail-header,
    .rail-health-card { grid-column: 1 / -1 !important; }
}
@media (max-width: 1180px) {
    .chart-content-grid,
    .dashboard-insights,
    .dashboard-lower-grid { grid-template-columns: 1fr !important; }
    .stream-panel { display: none !important; }
}
@media (max-width: 768px) {
    .dash-container { padding: 72px 12px 28px !important; }
    .dash-header,
    .kpi-card,
    .chart-card,
    .insight-card,
    .soft-panel,
    .account-health-shell,
    .glass-table-shell,
    .live-rail-card { border-radius: 22px !important; }
    .breakdown-list { grid-template-columns: 1fr !important; }
    .funnel-row { grid-template-columns: 56px 72px minmax(0, 1fr) !important; gap: 8px !important; }
}

/* Figma reference skin for dashboard: pastel glass, floating metric groups, soft chart panels. */
.dash-container {
    position: relative !important;
    isolation: isolate !important;
    padding: 28px 34px 46px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 84% -8%, rgba(99, 102, 241, 0.30) 0 12%, transparent 34%),
        radial-gradient(circle at 2% 92%, rgba(236, 72, 153, 0.22) 0 11%, transparent 32%),
        linear-gradient(135deg, #eef6ff 0%, #f6f9ff 48%, #fff7fb 100%) !important;
}

.dash-container > *:not(.dashboard-ambient) {
    position: relative !important;
    z-index: 2 !important;
}

.dashboard-ambient {
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: 999px !important;
    filter: blur(24px) !important;
    opacity: 0.72 !important;
}

.dashboard-ambient-blue {
    top: -88px !important;
    right: 120px !important;
    width: 260px !important;
    height: 180px !important;
    background: radial-gradient(circle at 40% 42%, rgba(37, 99, 235, 0.46), rgba(125, 211, 252, 0.18) 58%, transparent 72%) !important;
}

.dashboard-ambient-violet {
    top: 54px !important;
    right: 18px !important;
    width: 160px !important;
    height: 160px !important;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.34), rgba(196, 181, 253, 0.16) 64%, transparent 76%) !important;
}

.dashboard-ambient-pink {
    left: -42px !important;
    bottom: 120px !important;
    width: 210px !important;
    height: 210px !important;
    background: radial-gradient(circle at 50% 55%, rgba(236, 72, 153, 0.28), rgba(251, 207, 232, 0.22) 58%, transparent 74%) !important;
}

.dash-header,
.kpi-card,
.chart-card,
.insight-card,
.soft-panel,
.account-health-shell,
.glass-table-shell,
.live-rail-card {
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(244, 249, 255, 0.52)) !important;
    backdrop-filter: blur(26px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.18) !important;
    box-shadow: 0 28px 80px rgba(80, 102, 160, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.dash-header {
    border-radius: 34px !important;
    padding: 22px 24px !important;
    margin-bottom: 2px !important;
}

.dash-title {
    color: #172033 !important;
    font-size: clamp(27px, 2.1vw, 34px) !important;
    font-weight: 900 !important;
}

.dash-title .material-symbols-rounded {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    box-shadow: 0 18px 38px rgba(37, 99, 235, 0.24), 0 0 0 8px rgba(37, 99, 235, 0.07) !important;
}

.dash-subtitle {
    color: #64748b !important;
    font-size: 13.5px !important;
}

.dash-header-right {
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    background: rgba(255, 255, 255, 0.50) !important;
    border-radius: 24px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 36px rgba(80, 102, 160, 0.08) !important;
}

.dash-filter-input,
.date-btn,
.dash-tool-btn,
.col-picker-btn {
    border-color: rgba(203, 213, 225, 0.76) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    color: #172033 !important;
}

.dash-filter-input:focus,
.date-btn:hover,
.dash-tool-btn:hover,
.col-picker-btn:hover {
    border-color: rgba(37, 99, 235, 0.44) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10), 0 12px 28px rgba(37, 99, 235, 0.10) !important;
}

.btn-quick-create {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.26) !important;
}

.dashboard-command-grid {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 18px !important;
}

.dashboard-command-main {
    gap: 18px !important;
}

.kpi-row {
    gap: 14px !important;
}

.kpi-card {
    min-height: 134px !important;
    border-radius: 24px !important;
    padding: 17px 18px !important;
    overflow: hidden !important;
}

.kpi-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: radial-gradient(circle at 88% 18%, rgba(37, 99, 235, 0.13), transparent 34%) !important;
    pointer-events: none !important;
}

.kpi-card::after {
    opacity: 0.14 !important;
    width: 110px !important;
    height: 38px !important;
}

.kpi-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 34px 90px rgba(80, 102, 160, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.kpi-icon {
    background: rgba(239, 246, 255, 0.86) !important;
    border-color: rgba(191, 219, 254, 0.78) !important;
    color: #2563eb !important;
}

.kpi-label,
.chart-subtitle,
.insight-subtitle,
.soft-panel-head p,
.live-rail-header p {
    color: #64748b !important;
}

.kpi-value {
    color: #172033 !important;
    font-size: clamp(27px, 2vw, 35px) !important;
    font-weight: 900 !important;
}

.kpi-badge,
.panel-chip {
    border: 1px solid rgba(134, 239, 172, 0.76) !important;
    background: rgba(236, 253, 245, 0.78) !important;
    color: #047857 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

.dashboard-insights {
    grid-template-columns: minmax(0, 1.68fr) minmax(270px, 0.68fr) !important;
    gap: 14px !important;
}

.hero-analytics-card {
    min-height: 356px !important;
    border-radius: 28px !important;
    padding-bottom: 14px !important;
}

.chart-content-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 210px !important;
    gap: 14px !important;
    align-items: stretch !important;
    padding: 0 18px !important;
}

.hero-analytics-card .chart-body {
    height: 224px !important;
    padding: 0 !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.12)) !important;
}

.stream-panel {
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.72) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.48) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

.stream-head,
.stream-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
}

.stream-head {
    margin-bottom: 12px !important;
    color: #172033 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.stream-head span:last-child,
.stream-row b {
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
}

.stream-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.stream-row span {
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
}

.stream-row b {
    color: #172033 !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
}

.stream-row i {
    grid-column: 1 / -1 !important;
    display: block !important;
    height: 5px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #2563eb var(--w, 40%), rgba(226, 232, 240, 0.78) var(--w, 40%)) !important;
}

.insight-card {
    min-height: 356px !important;
    border-radius: 28px !important;
}

.insight-item {
    background: rgba(255, 255, 255, 0.48) !important;
    border-color: rgba(226, 232, 240, 0.70) !important;
}

.dashboard-lower-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr) !important;
    gap: 14px !important;
}

.soft-panel {
    border-radius: 28px !important;
    padding: 20px !important;
}

.soft-panel-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.soft-panel-head h3 {
    margin: 0 0 4px !important;
    color: #172033 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

.soft-panel-head p {
    margin: 0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

.panel-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.funnel-bars {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.funnel-row {
    display: grid !important;
    grid-template-columns: 72px minmax(72px, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
}

.funnel-row span {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.funnel-row b,
.breakdown-list b {
    color: #172033 !important;
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.funnel-row i {
    display: block !important;
    height: 12px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg, #2563eb 0 var(--w, 35%), rgba(226, 232, 240, 0.72) var(--w, 35%) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

.funnel-row:nth-child(2) i { background: linear-gradient(90deg, #7c3aed 0 var(--w, 35%), rgba(226, 232, 240, 0.72) var(--w, 35%) 100%) !important; }
.funnel-row:nth-child(3) i { background: linear-gradient(90deg, #10b981 0 var(--w, 35%), rgba(226, 232, 240, 0.72) var(--w, 35%) 100%) !important; }
.funnel-row:nth-child(4) i { background: linear-gradient(90deg, #ec4899 0 var(--w, 35%), rgba(226, 232, 240, 0.72) var(--w, 35%) 100%) !important; }

.breakdown-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.breakdown-list div {
    min-height: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 12px !important;
    border: 1px solid rgba(226, 232, 240, 0.70) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.48) !important;
}

.breakdown-list div:last-child {
    grid-column: 1 / -1 !important;
}

.breakdown-list span {
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
}

.dashboard-live-rail {
    top: 24px !important;
}

.live-rail-card {
    border-radius: 28px !important;
}

.rail-section,
.rail-health-card,
.account-health-card-mini {
    background: rgba(255, 255, 255, 0.48) !important;
    border-color: rgba(226, 232, 240, 0.72) !important;
}

.glass-table-shell {
    overflow: hidden !important;
}

.data-table thead th {
    background: rgba(248, 250, 252, 0.70) !important;
}

@media (min-width: 1301px) and (max-width: 1699px) {
    .dashboard-command-grid {
        grid-template-columns: minmax(0, 1fr) 282px !important;
    }
    .kpi-row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1500px) {
    .dashboard-command-grid {
        grid-template-columns: 1fr !important;
    }
    .live-rail-card {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .live-rail-header,
    .rail-health-card {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 1180px) {
    .chart-content-grid,
    .dashboard-insights,
    .dashboard-lower-grid {
        grid-template-columns: 1fr !important;
    }
    .stream-panel {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .dash-container {
        padding: 72px 12px 28px !important;
    }
    .dash-header,
    .kpi-card,
    .chart-card,
    .insight-card,
    .soft-panel,
    .account-health-shell,
    .glass-table-shell,
    .live-rail-card {
        border-radius: 22px !important;
    }
    .breakdown-list {
        grid-template-columns: 1fr !important;
    }
    .funnel-row {
        grid-template-columns: 56px 72px minmax(0, 1fr) !important;
        gap: 8px !important;
    }
}

/* ===== Premium rounded admin refresh v2 ===== */
body {
    background:
        linear-gradient(135deg, #f6f9ff 0%, #f8fafc 36%, #ffffff 100%) !important;
}

.app-shell,
.main-wrap {
    background: transparent !important;
}

.sidebar {
    width: 288px !important;
    padding: 18px 14px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 18px 0 54px rgba(15, 23, 42, 0.06) !important;
}

.sidebar-logo {
    height: 74px !important;
    padding: 0 10px 14px !important;
    margin-bottom: 6px !important;
}

.sidebar-logo-circle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.16) !important;
}

.sidebar-logo-text {
    font-size: 18px !important;
}

.sidebar-nav {
    gap: 7px !important;
}

.sidebar-section-title {
    padding: 18px 12px 7px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
}

.sidebar-item {
    min-height: 48px !important;
    padding: 11px 13px !important;
    border-radius: 18px !important;
    font-size: 14.5px !important;
    font-weight: 760 !important;
}

.sidebar-item .material-symbols-outlined {
    width: 30px !important;
    height: 30px !important;
    border-radius: 13px !important;
}

.sidebar-item:hover {
    background: #f0f7ff !important;
    border-color: #dbeafe !important;
    color: #1d4ed8 !important;
    transform: translateX(3px) !important;
}

.sidebar-item.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border-color: #2563eb !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24) !important;
}

.sidebar-item.active .material-symbols-outlined {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
}

.sidebar-footer {
    border-radius: 24px !important;
    background: linear-gradient(180deg, #f8fbff, #ffffff) !important;
}

.dash-container {
    padding: 34px 40px 56px !important;
    gap: 22px !important;
    overflow: visible !important;
}

.dash-container::before,
.dash-container::after {
    display: none !important;
}

.dash-header {
    align-items: center !important;
    padding: 24px !important;
    margin: 0 !important;
    border: 1px solid rgba(219, 227, 239, 0.9) !important;
    border-radius: 32px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94)),
        linear-gradient(90deg, rgba(37, 99, 235, 0.10), transparent 46%) !important;
    box-shadow: 0 18px 52px rgba(15, 23, 42, 0.08) !important;
}

.dash-title {
    font-size: clamp(28px, 2.4vw, 38px) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.dash-title .material-symbols-rounded {
    width: 54px !important;
    height: 54px !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.24) !important;
}

.dash-subtitle {
    font-size: 14.5px !important;
}

.dash-header-right {
    padding: 6px !important;
    border: 1px solid rgba(219, 227, 239, 0.8) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.74) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

.dash-filter-input {
    width: min(400px, 38vw) !important;
    height: 48px !important;
    border-radius: 18px !important;
}

.btn-quick-create {
    height: 48px !important;
    border-radius: 18px !important;
    padding-inline: 18px !important;
}

.kpi-row {
    grid-template-columns: repeat(4, minmax(230px, 1fr)) !important;
    gap: 20px !important;
}

.kpi-card {
    min-height: 192px !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 24px !important;
    border-radius: 30px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%),
        radial-gradient(circle at 90% 10%, rgba(37, 99, 235, 0.10), transparent 24%) !important;
    border-color: rgba(219, 227, 239, 0.9) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important;
}

.kpi-card::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 18px;
    width: 120px;
    height: 42px;
    opacity: 0.44;
    background:
        linear-gradient(135deg, transparent 0 14%, rgba(37,99,235,0.16) 14% 18%, transparent 18% 32%, rgba(16,185,129,0.18) 32% 36%, transparent 36% 52%, rgba(37,99,235,0.18) 52% 56%, transparent 56% 100%);
    border-bottom: 2px solid rgba(37, 99, 235, 0.20);
    pointer-events: none;
}

.kpi-card:hover {
    transform: translateY(-5px) !important;
    border-color: #bfdbfe !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12) !important;
}

.kpi-card-head {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.kpi-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10) !important;
}

.kpi-icon .material-symbols-rounded {
    font-size: 22px !important;
}

.kpi-label {
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
}

.kpi-value {
    margin-top: 12px !important;
    font-size: clamp(34px, 3vw, 48px) !important;
}

.kpi-trend {
    font-weight: 700 !important;
    color: #475569 !important;
}

.kpi-sub {
    color: #94a3b8 !important;
    font-weight: 650 !important;
}

.dashboard-insights {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.75fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

.dashboard-insights .chart-card {
    min-height: 360px !important;
    border-radius: 30px !important;
}

.dashboard-insights .chart-card.compact .chart-header {
    padding: 22px 24px 12px !important;
}

.dashboard-insights .chart-card.compact .chart-title {
    font-size: 20px !important;
}

.dashboard-insights .chart-card.compact .chart-body {
    height: 242px !important;
    padding: 0 18px !important;
}

.insight-card {
    min-height: 360px !important;
    padding: 24px !important;
    border: 1px solid rgba(219, 227, 239, 0.92) !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important;
}

.insight-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.insight-title {
    font-size: 18px !important;
    font-weight: 850 !important;
    color: #0f172a !important;
    margin: 0 0 4px !important;
}

.insight-subtitle {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}

.insight-mark {
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #bbf7d0 !important;
}

.insight-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.insight-item {
    padding: 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
}

.insight-line {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.insight-label {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

.insight-value {
    color: #0f172a !important;
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
    font-size: 16px !important;
    font-weight: 850 !important;
}

.insight-bar {
    height: 8px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #eef2f7 !important;
}

.insight-bar span {
    display: block !important;
    height: 100% !important;
    width: var(--w, 36%) !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #2563eb, #60a5fa) !important;
}

.insight-item.warning .insight-bar span {
    background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}

.insight-item.success .insight-bar span {
    background: linear-gradient(90deg, #10b981, #34d399) !important;
}

.glass-table-shell {
    border-radius: 32px !important;
    background: #ffffff !important;
    border: 1px solid rgba(219, 227, 239, 0.92) !important;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.09) !important;
}

.table-toolbar {
    padding: 20px 24px !important;
    border-radius: 32px 32px 0 0 !important;
    background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
}

.toolbar-title {
    font-size: 18px !important;
}

.toolbar-title .count {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.data-table-wrap.with-toolbar {
    border-radius: 0 0 32px 32px !important;
}

.data-table thead th {
    height: 56px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
}

.data-table tbody td {
    height: 62px !important;
    color: #334155 !important;
}

.data-table tbody tr:hover td {
    background: #f0f7ff !important;
}

.status-cell {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    border: 1px solid #dbe3ef !important;
    background: #f8fafc !important;
    font-weight: 800 !important;
}

.status-cell .status-dot {
    width: 7px !important;
    height: 7px !important;
}

.status-cell:has(.status-dot.green) {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

.status-cell:has(.status-dot.orange) {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

.status-cell:has(.status-dot.red) {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

.summary-row td,
.data-table tr.summary-row td {
    background: #f0f7ff !important;
    color: #1e3a8a !important;
    border-bottom: 1px solid #bfdbfe !important;
}

.data-table tr.summary-row td.col-num {
    color: #1d4ed8 !important;
}

.data-table tr.summary-row .summary-label {
    color: #1d4ed8 !important;
}

@media (max-width: 1280px) {
    .dashboard-insights {
        grid-template-columns: 1fr !important;
    }
    .dash-filter-input {
        width: min(360px, 48vw) !important;
    }
}

@media (max-width: 768px) {
    .dash-container {
        padding: 18px 14px 32px !important;
    }
    .dash-header,
    .dash-header-right {
        border-radius: 24px !important;
    }
    .dash-header-right,
    .dash-filter-input {
        width: 100% !important;
    }
    .kpi-row {
        grid-template-columns: 1fr !important;
    }
    .dashboard-insights .chart-card,
    .insight-card {
        min-height: auto !important;
    }
}

* {
    box-sizing: border-box;
}

html {
    background: #f8fafc;
}

body {
    background:
        radial-gradient(circle at top left, rgba(219, 234, 254, 0.8), transparent 34rem),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 18rem, #f1f5f9 100%) !important;
    color: var(--foreground) !important;
    font-family: "Geist", "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0;
}

button,
a,
input,
select,
textarea {
    font: inherit;
}

button,
[onclick],
.sidebar-item,
.pill-btn,
.pill-tab,
.ag-tab,
.ad-pill-btn,
.mode-tab,
.date-btn,
.col-picker-btn,
.icon-btn,
.btn-icon,
.btn-act,
.mat-card,
.group-row,
.doc-header,
.pm-group-header {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 2px;
}

::selection {
    background: #bfdbfe;
    color: #0f172a;
}

.app-shell {
    min-height: 100vh;
    background: transparent !important;
}

.main-wrap {
    background: transparent !important;
}

.sidebar {
    width: 264px !important;
    padding: 14px 12px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-right: 1px solid rgba(226, 232, 240, 0.92) !important;
    box-shadow: 10px 0 34px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.sidebar-logo {
    height: 66px !important;
    padding: 0 10px 12px !important;
    border-bottom: 0 !important;
}

.sidebar-logo-circle,
.brand-logo-icon {
    border-radius: 16px !important;
    background-color: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
}

.sidebar-logo-text,
.brand-name {
    color: #0f172a !important;
    letter-spacing: 0 !important;
}

.sidebar-nav {
    gap: 5px !important;
    padding: 6px 0 !important;
}

.sidebar-section-title,
.sidebar-nav-label {
    padding: 16px 12px 7px !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.sidebar-item,
.sidebar-link {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    color: #64748b !important;
    font-weight: 650 !important;
    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}

.sidebar-item .material-symbols-outlined,
.sidebar-link i {
    width: 28px !important;
    height: 28px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    color: #64748b !important;
    transition: background var(--transition), color var(--transition), transform var(--transition) !important;
}

.sidebar-item:hover,
.sidebar-link:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
    transform: translateX(2px);
}

.sidebar-item.active,
.sidebar-link.active {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.05), 0 10px 24px rgba(37, 99, 235, 0.10) !important;
}

.sidebar-item.active .material-symbols-outlined,
.sidebar-link.active i {
    background: #2563eb !important;
    color: #ffffff !important;
}

.sidebar-footer {
    margin-top: 12px !important;
    padding: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #f8fafc !important;
}

.sidebar-footer-avatar,
.sidebar-user-avatar {
    border-radius: 14px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
}

.sidebar-footer-actions a,
.sidebar-user-actions .btn-sidebar-action {
    border-radius: 12px !important;
}

.sidebar-toggle {
    border-radius: 16px !important;
    box-shadow: var(--shadow-md) !important;
}

.sidebar-overlay {
    background: rgba(15, 23, 42, 0.34) !important;
    backdrop-filter: blur(6px);
}

.dash-container,
.acc-container,
.pc-container,
.ms-container,
.mat-container,
.ad-container,
.pm-container,
.fp-container,
.tk-container,
.ag-container,
.oc-container,
.st-container,
.iv-container,
.setup-page,
.password-page {
    position: relative;
    padding: 32px !important;
    min-height: 100vh !important;
    overflow: visible !important;
    background: transparent !important;
}

.dash-container::before,
.dash-container::after,
.acc-container::before,
.acc-container::after,
.pc-container::before,
.pc-container::after,
.ms-container::before,
.ms-container::after,
.mat-container::before,
.mat-container::after,
.ad-container::before,
.ad-container::after,
.pm-container::before,
.pm-container::after,
.fp-container::before,
.fp-container::after,
.tk-container::before,
.tk-container::after,
.ag-container::before,
.ag-container::after,
.oc-container::before,
.oc-container::after,
.st-container::before,
.st-container::after {
    display: none !important;
}

.dash-header,
.acc-header,
.pc-header,
.ms-header,
.mat-header,
.ad-header,
.pm-header,
.fp-header,
.tk-header,
.ag-header,
.oc-header,
.st-header,
.iv-header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    margin: 0 0 24px !important;
}

.dash-title,
.acc-title,
.pc-title,
.ms-title,
.mat-title,
.ad-title,
.pm-title,
.fp-title,
.tk-title,
.ag-title,
.oc-title,
.st-title,
.iv-title,
.brand-title,
.password-header h2 {
    color: #0f172a !important;
    font-family: "Geist", "Inter", "Noto Sans SC", sans-serif !important;
    font-size: clamp(22px, 2vw, 30px) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.18 !important;
}

.dash-title .material-symbols-rounded,
.acc-title .material-symbols-rounded,
.pc-title .material-symbols-rounded,
.ms-title .material-symbols-rounded,
.mat-title .material-symbols-rounded,
.ad-title .material-symbols-rounded,
.pm-title .material-symbols-rounded,
.fp-title .material-symbols-rounded,
.tk-title .material-symbols-rounded,
.ag-title .material-symbols-rounded,
.oc-title .material-symbols-rounded,
.st-title .material-symbols-rounded,
.iv-title .material-symbols-rounded,
.password-header-icon {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12) !important;
}

.dash-subtitle,
.acc-subtitle,
.pc-subtitle,
.ms-subtitle,
.mat-subtitle,
.ad-subtitle,
.pm-subtitle,
.fp-subtitle,
.tk-subtitle,
.ag-subtitle,
.oc-subtitle,
.st-subtitle,
.iv-subtitle,
.brand-subtitle,
.password-header p {
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
}

.glass-shell,
.glass-table-shell,
.glass-card,
.chart-card,
.kpi-card,
.ms-summary-card,
.pc-summary-card,
.pc-card,
.ad-shell,
.mat-panel,
.mat-sidebar > .glass-card,
.ag-detail-panel,
.ag-card,
.knowledge-card,
.dl-card,
.doc-card,
.setup-card,
.password-card,
.login-card,
.register-card,
.auth-status,
.empty-state {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 26px !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition) !important;
}

.glass-shell:hover,
.glass-table-shell:hover,
.glass-card:hover,
.chart-card:hover,
.kpi-card:hover,
.ms-summary-card:hover,
.pc-summary-card:hover,
.pc-card:hover,
.ad-shell:hover,
.ag-card:hover,
.knowledge-card:hover,
.dl-card:hover,
.doc-card:hover,
.setup-card:hover {
    border-color: #bfdbfe !important;
    box-shadow: var(--shadow-md) !important;
}

.kpi-row,
.ms-summary,
.pc-card-stats,
.ag-card-stats {
    gap: 18px !important;
}

.kpi-card,
.ms-summary-card,
.pc-summary-card,
.pc-card-stat,
.ag-card-stat,
.stat-card {
    padding: 22px !important;
    border-radius: 24px !important;
}

.kpi-card:hover,
.ms-summary-card:hover,
.pc-summary-card:hover,
.pc-card:hover,
.ag-card:hover,
.mat-card:hover {
    transform: translateY(-3px) !important;
}

.kpi-label,
.ms-summary-label,
.pc-card-stat-label,
.ag-card-stat-label,
.toolbar-title .count,
.pm-stat,
.fp-stat,
.filter-meta,
.ad-info {
    color: #64748b !important;
}

.kpi-value,
.ms-summary-value,
.pc-card-stat-value,
.ag-card-stat-value,
.toolbar-title .num,
.pm-stat .num,
.fp-stat .num {
    color: #0f172a !important;
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
    letter-spacing: 0 !important;
}

.kpi-value {
    font-size: clamp(26px, 2.4vw, 36px) !important;
}

.kpi-badge,
.pill-tab-badge,
.table-badge,
.badge,
.chip,
.status-badge,
.ad-status-badge,
.tz-badge,
.pc-card-tag,
.pc-card-sub,
.id-tag,
.acct-code,
.method,
.mat-card-num,
.mat-card-size {
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.kpi-badge.positive,
.status-active,
.status-success,
.ad-status-active,
.chip-green,
.badge-success,
.badge.bg-success {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #bbf7d0 !important;
}

.kpi-badge.negative,
.status-failed,
.status-disabled,
.status-rejected,
.ad-status-rejected,
.chip-red,
.badge-danger,
.badge.bg-danger {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}

.status-running,
.status-paused,
.status-pending,
.status-grace,
.ad-status-paused,
.chip-orange,
.badge-warning,
.badge.bg-warning {
    background: #fffbeb !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}

.chip,
.badge.bg-primary,
.badge-primary,
.ad-status-other,
.status-unknown,
.table-badge,
.pc-card-tag,
.id-tag,
.acct-code,
.method.get {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
}

.dash-header-right,
.acc-header-actions,
.mat-panel-actions,
.ad-toolbar,
.pm-toolbar,
.fp-toolbar,
.tk-toolbar,
.ag-filter-bar,
.filter-bar,
.ms-table-toolbar,
.table-toolbar,
.pc-detail-toolbar,
.st-toolbar,
.setup-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.ad-toolbar,
.pm-toolbar,
.fp-toolbar,
.tk-toolbar,
.filter-bar,
.table-toolbar,
.ms-table-toolbar,
.pc-detail-toolbar {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 16px !important;
    box-shadow: var(--shadow-xs) !important;
}

.glass-shell .filter-bar,
.glass-shell .table-toolbar,
.glass-table-shell .table-toolbar,
.ms-table-shell .ms-table-toolbar {
    border-width: 0 0 1px 0 !important;
    border-radius: 26px 26px 0 0 !important;
    box-shadow: none !important;
}

input,
select,
textarea,
.dash-filter-input,
.filter-input,
.filter-select,
.pm-filter,
.pm-filter-input,
.fp-filter,
.ad-select,
.ad-search input,
.project-search-input,
.pwd-form-input,
.form-control,
.form-select,
.field input,
.field select,
.field textarea {
    min-height: 42px;
    border: 1px solid #dbe3ef !important;
    border-radius: 16px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) !important;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition) !important;
}

input:focus,
select:focus,
textarea:focus,
.dash-filter-input:focus,
.filter-input:focus,
.filter-select:focus,
.pm-filter:focus,
.fp-filter:focus,
.ad-select:focus,
.ad-search input:focus,
.project-search-input:focus,
.pwd-form-input:focus,
.form-control:focus,
.form-select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
    outline: none !important;
}

.input-group-text {
    border-color: #dbe3ef !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    border-radius: 16px 0 0 16px !important;
}

.input-group .form-control {
    border-radius: 0 16px 16px 0 !important;
}

.dash-filter-wrap .material-symbols-outlined,
.ad-search .material-symbols-rounded,
.pm-search::before,
.fp-search::before {
    color: #2563eb !important;
}

.btn-primary-indigo,
.btn-quick-create,
.btn-indigo,
.btn-fb,
.btn-refresh,
.btn-refresh-ad,
.btn-login,
.btn-register,
.btn-primary-custom,
.btn-pwd-submit,
.btn-setup-primary,
.fb-login-btn,
.batch-btn.primary,
.date-popover-foot button.apply,
.popover-actions button.primary {
    min-height: 42px !important;
    border: 1px solid #2563eb !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.20) !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition) !important;
}

.btn-primary-indigo:hover,
.btn-quick-create:hover,
.btn-indigo:hover,
.btn-fb:hover,
.btn-refresh:hover,
.btn-refresh-ad:hover,
.btn-login:hover,
.btn-register:hover,
.btn-primary-custom:hover,
.btn-pwd-submit:hover,
.btn-setup-primary:hover,
.fb-login-btn:hover,
.batch-btn.primary:hover,
.date-popover-foot button.apply:hover,
.popover-actions button.primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.26) !important;
    transform: translateY(-1px) !important;
}

.btn-ghost,
.btn-outline,
.btn-reset,
.batch-btn,
.btn-setup-outline,
.date-btn,
.col-picker-btn,
.project-clear-btn,
.btn-sel-all,
.btn-sel-cancel,
.btn-copy,
.btn-act,
.btn-icon,
.icon-btn,
.mat-card-delete,
.group-row-btn,
.btn-mini-copy,
.btn-icon-copy,
.btn-icon-del,
.btn-icon-del,
.btn-col-picker,
.pc-metric-chip,
.preset-btn,
.cal-nav-btn,
.pm-modal-close,
.mat-modal-close,
.ag-modal-close,
.btn-close {
    border-radius: 15px !important;
    border: 1px solid #dbe3ef !important;
    background: #ffffff !important;
    color: #334155 !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition) !important;
}

.btn-ghost:hover,
.btn-outline:hover,
.btn-reset:hover,
.batch-btn:hover,
.btn-setup-outline:hover,
.date-btn:hover,
.col-picker-btn:hover,
.project-clear-btn:hover,
.btn-sel-all:hover,
.btn-sel-cancel:hover,
.btn-copy:hover,
.btn-act:hover,
.btn-icon:hover,
.icon-btn:hover,
.mat-card-delete:hover,
.group-row-btn:hover,
.btn-mini-copy:hover,
.btn-icon-copy:hover,
.btn-icon-del:hover,
.btn-col-picker:hover,
.pc-metric-chip:hover,
.preset-btn:hover,
.cal-nav-btn:hover,
.pm-modal-close:hover,
.mat-modal-close:hover,
.ag-modal-close:hover {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10) !important;
    transform: translateY(-1px) !important;
}

.btn-ghost.danger,
.btn-danger,
.btn-icon.danger,
.icon-btn.danger,
.mat-card-delete,
.btn-act.danger,
.btn-icon-del {
    color: #b91c1c !important;
}

.btn-ghost.danger:hover,
.btn-danger:hover,
.btn-icon.danger:hover,
.icon-btn.danger:hover,
.mat-card-delete:hover,
.btn-act.danger:hover,
.btn-icon-del:hover {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

.pill-tabs,
.chart-tabs,
.ag-tabs,
.ad-pill-group,
.pill-group,
.mode-tabs,
.filter-chips {
    gap: 4px !important;
    padding: 5px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 18px !important;
    background: #f8fafc !important;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02) !important;
}

.pill-tab,
.chart-tab,
.ag-tab,
.ad-pill-btn,
.pill-btn,
.mode-tab,
.filter-chip {
    min-height: 34px !important;
    border-radius: 14px !important;
    color: #64748b !important;
    font-weight: 700 !important;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}

.pill-tab:hover,
.chart-tab:hover,
.ag-tab:hover,
.ad-pill-btn:hover,
.pill-btn:hover,
.mode-tab:hover,
.filter-chip:hover {
    color: #0f172a !important;
    background: #ffffff !important;
}

.pill-tab.active,
.chart-tab.active,
.ag-tab.active,
.ad-pill-btn.active,
.pill-btn.active,
.mode-tab.active,
.filter-chip.active {
    background: #ffffff !important;
    color: #1d4ed8 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

.preset-btn.active,
.pc-metric-chip.active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18) !important;
}

.data-table-wrap,
.table-wrap,
.acc-table-wrap,
.ms-table-wrap,
.ad-table-wrap,
.pm-table-wrap,
.fp-table-wrap,
.tk-table-wrap,
.ag-table-wrap,
.st-table-wrap,
.iv-table-wrap,
.ms-table-shell,
.mat-panel-body {
    border-radius: 24px !important;
    overflow: auto !important;
}

.data-table,
.acc-table,
.ms-table,
.ad-table,
.pm-table,
.fp-table,
.tk-table,
.ag-table,
.ag-log-table,
.ag-mini-table,
.st-table,
.iv-table,
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: #0f172a !important;
}

.data-table thead th,
.acc-table thead th,
.ms-table thead th,
.ad-table thead th,
.pm-table thead th,
.fp-table thead th,
.tk-table thead th,
.ag-table thead th,
.ag-log-table thead th,
.ag-mini-table thead th,
.st-table thead th,
.iv-table thead th,
.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 50px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.data-table tbody td,
.acc-table tbody td,
.ms-table tbody td,
.ad-table tbody td,
.pm-table tbody td,
.fp-table tbody td,
.tk-table tbody td,
.ag-table tbody td,
.ag-log-table tbody td,
.ag-mini-table tbody td,
.st-table tbody td,
.iv-table tbody td,
.table tbody td {
    min-height: 54px !important;
    background: #ffffff !important;
    color: #334155 !important;
    border-bottom: 1px solid #edf2f7 !important;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition) !important;
}

.data-table tbody tr,
.acc-table tbody tr,
.ms-table tbody tr,
.ad-table tbody tr,
.pm-table tbody tr,
.fp-table tbody tr,
.tk-table tbody tr,
.ag-table tbody tr,
.ag-log-table tbody tr,
.ag-mini-table tbody tr,
.st-table tbody tr,
.iv-table tbody tr,
.table tbody tr {
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition) !important;
}

.data-table tbody tr:hover td,
.acc-table tbody tr:hover td,
.ms-table tbody tr:hover td,
.ad-table tbody tr:hover td,
.pm-table tbody tr:hover td,
.fp-table tbody tr:hover td,
.tk-table tbody tr:hover td,
.ag-table tbody tr:hover td,
.ag-log-table tbody tr:hover td,
.ag-mini-table tbody tr:hover td,
.st-table tbody tr:hover td,
.iv-table tbody tr:hover td,
.table tbody tr:hover td {
    background: #eff6ff !important;
    color: #0f172a !important;
}

.data-table tbody tr:hover td:first-child,
.acc-table tbody tr:hover td:first-child,
.ms-table tbody tr:hover td:first-child,
.ad-table tbody tr:hover td:first-child,
.pm-table tbody tr:hover td:first-child,
.fp-table tbody tr:hover td:first-child,
.tk-table tbody tr:hover td:first-child,
.ag-table tbody tr:hover td:first-child,
.st-table tbody tr:hover td:first-child,
.iv-table tbody tr:hover td:first-child {
    box-shadow: inset 4px 0 0 #60a5fa;
}

.data-table tbody td:last-child .icon-btn,
.data-table tbody td:last-child .btn-icon,
.data-table tbody td:last-child .btn-act,
.ad-table tbody td:last-child .btn-icon,
.pm-table tbody td:last-child .icon-btn,
.fp-table tbody td:last-child .icon-btn,
.tk-table tbody td:last-child .btn-act,
.st-table tbody td:last-child button,
.iv-table tbody td:last-child button {
    opacity: 0.72;
}

.data-table tbody tr:hover td:last-child .icon-btn,
.data-table tbody tr:hover td:last-child .btn-icon,
.data-table tbody tr:hover td:last-child .btn-act,
.ad-table tbody tr:hover td:last-child .btn-icon,
.pm-table tbody tr:hover td:last-child .icon-btn,
.fp-table tbody tr:hover td:last-child .icon-btn,
.tk-table tbody tr:hover td:last-child .btn-act,
.st-table tbody tr:hover td:last-child button,
.iv-table tbody tr:hover td:last-child button {
    opacity: 1;
}

.data-table .col-num,
.acc-table .col-num,
.pc-card-stat-value,
.ms-table .col-num,
.tk-table .id-tag,
.ad-info .count {
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
    font-variant-numeric: tabular-nums !important;
}

.summary-row td,
.data-table tr.summary-row td {
    background: #fff7ed !important;
    color: #9a3412 !important;
    border-bottom: 1px solid #fed7aa !important;
}

.data-table tr.adset-inline-row td {
    background: #f8fbff !important;
    color: #334155 !important;
}

.data-table tr.adset-inline-row:hover td {
    background: #dbeafe !important;
}

.chart-card {
    overflow: hidden !important;
}

.chart-header,
.mat-panel-header,
.mat-sb-header,
.pm-modal-header,
.mat-modal-header,
.ag-modal-header,
.modal-header,
.setup-card-header {
    border-bottom: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

.chart-body canvas {
    filter: drop-shadow(0 12px 28px rgba(37, 99, 235, 0.10));
}

.date-popover,
.col-picker-panel,
.dropdown-menu,
.project-search-dropdown,
.mat-hover-preview {
    border: 1px solid #dbe3ef !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden !important;
}

.date-popover .preset-col {
    background: #f8fafc !important;
    border-right: 1px solid #e2e8f0 !important;
}

.preset-item,
.dropdown-item,
.col-picker-panel label {
    border-radius: 14px !important;
}

.preset-item:hover,
.dropdown-item:hover,
.col-picker-panel label:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.preset-item.active,
.cal-day.range-start,
.cal-day.range-end,
.cal-day.today {
    color: #1d4ed8 !important;
}

.cal-day {
    border-radius: 999px !important;
}

.cal-day.range-start,
.cal-day.range-end {
    background: #2563eb !important;
    color: #ffffff !important;
}

.cal-day.in-range {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.pm-modal-backdrop,
.mat-modal-backdrop,
.ag-modal-overlay,
.modal-overlay,
.modal-backdrop.show {
    background: rgba(15, 23, 42, 0.38) !important;
    backdrop-filter: blur(8px) !important;
}

.pm-modal,
.mat-modal,
.ag-modal,
.modal-box,
.modal-content {
    border: 1px solid #e2e8f0 !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden !important;
}

.pm-modal-body,
.mat-modal-body,
.ag-modal-body,
.modal-body {
    background: #ffffff !important;
}

.pm-modal-footer,
.ag-modal-footer,
.modal-footer {
    border-top: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
}

.tg-switch,
.ad-switch {
    border-radius: 999px !important;
}

.tg-slider,
.switch-slider {
    background: #cbd5e1 !important;
}

.tg-switch input:checked + .tg-slider,
.ad-switch input:checked + .switch-slider,
.ad-toggle input:checked + .ad-slider {
    background: #2563eb !important;
}

.chk,
.ad-checkbox,
input[type="checkbox"] {
    accent-color: #2563eb !important;
}

.mat-layout {
    gap: 22px !important;
}

.mat-sidebar {
    width: min(340px, 34vw) !important;
}

.mat-panel,
.mat-sidebar > .glass-card {
    min-height: calc(100vh - 130px) !important;
}

.mat-group-tree,
.mat-panel-body {
    background: #ffffff !important;
}

.group-row,
.mat-card,
.upload-file-row,
.knowledge-card {
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition) !important;
}

.group-row:hover,
.group-row.active,
.mat-card:hover,
.upload-file-row:hover,
.knowledge-card:hover {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    box-shadow: var(--shadow-sm) !important;
}

.mat-card-thumb,
.material-thumb {
    border-radius: 18px !important;
    background: #f1f5f9 !important;
}

.mat-drop-zone,
.drop-zone {
    border: 1.5px dashed #bfdbfe !important;
    border-radius: 26px !important;
    background: #f8fbff !important;
    color: #2563eb !important;
}

.mat-drop-zone.drag-over,
.drop-zone.drag-over {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.12) !important;
}

.mat-select-bar,
.ad-batch-bar,
.filter-info,
.cal-footer,
.auth-status {
    border-radius: 20px !important;
    border: 1px solid #dbe3ef !important;
    background: #f8fbff !important;
}

.progress,
.progress-bar {
    border-radius: 999px !important;
}

.progress-bar {
    background: linear-gradient(90deg, #2563eb, #60a5fa) !important;
}

.ag-detail-header,
.doc-header {
    border-radius: 20px !important;
}

.doc-card pre,
code {
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: #334155 !important;
}

.toast-notification,
.ad-toast,
.toast {
    border-radius: 18px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: var(--shadow-lg) !important;
}

.toast-notification.toast-success,
.ad-toast.success {
    border-color: #bbf7d0 !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
}

.toast-notification.toast-danger,
.toast-notification.toast-error,
.ad-toast.error {
    border-color: #fecaca !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.toast-notification.toast-warning {
    border-color: #fde68a !important;
    background: #fffbeb !important;
    color: #b45309 !important;
}

.ad-empty,
.ad-loading,
.pm-loading,
.empty-state {
    border-radius: 24px !important;
    color: #64748b !important;
}

.empty-state-icon,
.ad-empty .icon,
.pc-empty-icon {
    color: #2563eb !important;
    background: #eff6ff !important;
    border-radius: 22px !important;
}

.login-card,
.register-card,
.password-card {
    border-radius: 28px !important;
    box-shadow: var(--shadow-lg) !important;
}

.login-card > div,
.register-card > div {
    padding: 42px 38px 38px !important;
}

.brand-logo-icon {
    width: 46px !important;
    height: 46px !important;
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
    color: #ffffff !important;
}

.mode-tabs {
    border-radius: 18px !important;
}

.alert {
    border-radius: 18px !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}

@media (max-width: 1180px) {
    .kpi-row,
    .ms-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mat-layout {
        grid-template-columns: 1fr !important;
    }

    .mat-sidebar {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .dash-container,
    .acc-container,
    .pc-container,
    .ms-container,
    .mat-container,
    .ad-container,
    .pm-container,
    .fp-container,
    .tk-container,
    .ag-container,
    .oc-container,
    .st-container,
    .iv-container,
    .setup-page,
    .password-page {
        padding: 72px 16px 24px !important;
    }

    .sidebar {
        width: min(86vw, 312px) !important;
        padding: 14px !important;
    }

    .dash-header,
    .acc-header,
    .pc-header,
    .ms-header,
    .mat-header,
    .ad-header,
    .pm-header,
    .fp-header,
    .tk-header,
    .ag-header,
    .oc-header,
    .st-header,
    .iv-header {
        align-items: flex-start !important;
    }

    .dash-header-right,
    .acc-header-actions,
    .mat-panel-actions,
    .ad-toolbar,
    .pm-toolbar,
    .fp-toolbar,
    .tk-toolbar,
    .ag-filter-bar,
    .filter-bar,
    .table-toolbar {
        width: 100% !important;
        align-items: stretch !important;
    }

    .dash-filter-input,
    .filter-input,
    .filter-select,
    .pm-filter,
    .fp-filter,
    .ad-select,
    .ad-search,
    .ad-search input,
    .project-search-wrap,
    .project-search-input,
    .date-btn,
    .btn-primary-indigo,
    .btn-quick-create,
    .btn-indigo,
    .btn-refresh,
    .btn-refresh-ad {
        width: 100% !important;
        min-width: 0 !important;
    }

    .kpi-row,
    .ms-summary,
    .pc-card-stats,
    .ag-card-stats {
        grid-template-columns: 1fr !important;
    }

    .date-popover {
        position: fixed !important;
        inset: 72px 12px auto 12px !important;
        width: auto !important;
        max-height: calc(100vh - 92px) !important;
        overflow: auto !important;
        flex-direction: column !important;
    }

    .date-popover .preset-col {
        width: 100% !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        max-height: 180px !important;
    }

    .cal-months {
        flex-direction: column !important;
    }

    .pm-modal,
    .mat-modal,
    .ag-modal,
    .modal-box,
    .modal-content {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
    }
}

/* ===== Final premium override layer: keep this at EOF ===== */
body { background: linear-gradient(135deg, #f6f9ff 0%, #f8fafc 36%, #ffffff 100%) !important; }
.app-shell, .main-wrap { background: transparent !important; }
.sidebar { width: 288px !important; padding: 18px 14px !important; background: rgba(255,255,255,0.98) !important; border-right: 1px solid #e2e8f0 !important; box-shadow: 18px 0 54px rgba(15,23,42,0.06) !important; }
.sidebar-logo { height: 74px !important; padding: 0 10px 14px !important; margin-bottom: 6px !important; }
.sidebar-logo-circle { width: 38px !important; height: 38px !important; border-radius: 16px !important; box-shadow: 0 14px 30px rgba(37,99,235,0.16) !important; }
.sidebar-logo-text { font-size: 18px !important; }
.sidebar-nav { gap: 7px !important; }
.sidebar-section-title { padding: 18px 12px 7px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; }
.sidebar-item { min-height: 48px !important; padding: 11px 13px !important; border-radius: 18px !important; font-size: 14.5px !important; font-weight: 760 !important; }
.sidebar-item .material-symbols-outlined { width: 30px !important; height: 30px !important; border-radius: 13px !important; }
.sidebar-item:hover { background: #f0f7ff !important; border-color: #dbeafe !important; color: #1d4ed8 !important; transform: translateX(3px) !important; }
.sidebar-item.active { color: #fff !important; background: linear-gradient(135deg, #2563eb, #3b82f6) !important; border-color: #2563eb !important; box-shadow: 0 16px 34px rgba(37,99,235,0.24) !important; }
.sidebar-item.active .material-symbols-outlined { color: #fff !important; background: rgba(255,255,255,0.18) !important; }
.sidebar-footer { border-radius: 24px !important; background: linear-gradient(180deg, #f8fbff, #fff) !important; }

.dash-container { padding: 34px 40px 56px !important; gap: 22px !important; overflow: visible !important; }
.dash-container::before, .dash-container::after { display: none !important; content: none !important; }
.dash-header { align-items: center !important; padding: 24px !important; margin: 0 !important; border: 1px solid rgba(219,227,239,0.9) !important; border-radius: 32px !important; background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,251,255,0.94)), linear-gradient(90deg, rgba(37,99,235,0.10), transparent 46%) !important; box-shadow: 0 18px 52px rgba(15,23,42,0.08) !important; }
.dash-title { font-size: clamp(28px,2.4vw,38px) !important; font-weight: 850 !important; letter-spacing: 0 !important; }
.dash-title .material-symbols-rounded { width: 54px !important; height: 54px !important; border-radius: 20px !important; color: #fff !important; background: linear-gradient(135deg, #2563eb, #60a5fa) !important; box-shadow: 0 18px 34px rgba(37,99,235,0.24) !important; }
.dash-subtitle { font-size: 14.5px !important; }
.dash-header-right { padding: 6px !important; border: 1px solid rgba(219,227,239,0.8) !important; border-radius: 22px !important; background: rgba(255,255,255,0.74) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important; }
.dash-filter-input { width: min(400px, 38vw) !important; height: 48px !important; border-radius: 18px !important; }
.btn-quick-create { height: 48px !important; border-radius: 18px !important; padding-inline: 18px !important; }
.kpi-row { grid-template-columns: repeat(4, minmax(230px, 1fr)) !important; gap: 20px !important; }
.kpi-card { min-height: 192px !important; position: relative !important; overflow: hidden !important; padding: 24px !important; border-radius: 30px !important; background: linear-gradient(180deg,#fff 0%,#fbfdff 100%), radial-gradient(circle at 90% 10%, rgba(37,99,235,0.10), transparent 24%) !important; border-color: rgba(219,227,239,0.9) !important; box-shadow: 0 20px 50px rgba(15,23,42,0.08) !important; }
.kpi-card::after { content: ""; position: absolute; right: 20px; bottom: 18px; width: 120px; height: 42px; opacity: 0.44; background: linear-gradient(135deg, transparent 0 14%, rgba(37,99,235,0.16) 14% 18%, transparent 18% 32%, rgba(16,185,129,0.18) 32% 36%, transparent 36% 52%, rgba(37,99,235,0.18) 52% 56%, transparent 56% 100%); border-bottom: 2px solid rgba(37,99,235,0.20); pointer-events: none; }
.kpi-card:hover { transform: translateY(-5px) !important; border-color: #bfdbfe !important; box-shadow: 0 28px 70px rgba(15,23,42,0.12) !important; }
.kpi-card-head { display: inline-flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; }
.kpi-icon { width: 44px !important; height: 44px !important; border-radius: 17px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #2563eb !important; background: #eff6ff !important; border: 1px solid #dbeafe !important; box-shadow: 0 10px 22px rgba(37,99,235,0.10) !important; }
.kpi-icon .material-symbols-rounded { font-size: 22px !important; }
.kpi-label { color: #475569 !important; font-size: 13.5px !important; font-weight: 800 !important; }
.kpi-value { margin-top: 12px !important; font-size: clamp(34px,3vw,48px) !important; }
.kpi-trend { font-weight: 700 !important; color: #475569 !important; }
.kpi-sub { color: #94a3b8 !important; font-weight: 650 !important; }

.dashboard-insights { display: grid !important; grid-template-columns: minmax(0,1.55fr) minmax(340px,0.75fr) !important; gap: 20px !important; align-items: stretch !important; }
.dashboard-insights .chart-card { min-height: 360px !important; border-radius: 30px !important; }
.dashboard-insights .chart-card.compact .chart-header { padding: 22px 24px 12px !important; }
.dashboard-insights .chart-card.compact .chart-title { font-size: 20px !important; }
.dashboard-insights .chart-card.compact .chart-body { height: 242px !important; padding: 0 18px !important; }
.insight-card { min-height: 360px !important; padding: 24px !important; border: 1px solid rgba(219,227,239,0.92) !important; border-radius: 30px !important; background: linear-gradient(180deg,#fff,#f8fbff) !important; box-shadow: 0 20px 50px rgba(15,23,42,0.08) !important; }
.insight-header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 20px !important; }
.insight-title { font-size: 18px !important; font-weight: 850 !important; color: #0f172a !important; margin: 0 0 4px !important; }
.insight-subtitle { color: #64748b !important; font-size: 13px !important; font-weight: 650 !important; }
.insight-mark { width: 42px !important; height: 42px !important; border-radius: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ecfdf5 !important; color: #047857 !important; border: 1px solid #bbf7d0 !important; }
.insight-list { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.insight-item { padding: 14px !important; border: 1px solid #e2e8f0 !important; border-radius: 20px !important; background: #fff !important; }
.insight-line { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 10px !important; }
.insight-label { color: #64748b !important; font-size: 13px !important; font-weight: 750 !important; }
.insight-value { color: #0f172a !important; font-family: "JetBrains Mono","Fira Code",monospace !important; font-size: 16px !important; font-weight: 850 !important; }
.insight-bar { height: 8px !important; overflow: hidden !important; border-radius: 999px !important; background: #eef2f7 !important; }
.insight-bar span { display: block !important; height: 100% !important; width: var(--w,36%) !important; border-radius: inherit !important; background: linear-gradient(90deg,#2563eb,#60a5fa) !important; }
.insight-item.warning .insight-bar span { background: linear-gradient(90deg,#f59e0b,#fbbf24) !important; }
.insight-item.success .insight-bar span { background: linear-gradient(90deg,#10b981,#34d399) !important; }

.glass-table-shell { border-radius: 32px !important; background: #fff !important; border: 1px solid rgba(219,227,239,0.92) !important; box-shadow: 0 22px 60px rgba(15,23,42,0.09) !important; }
.table-toolbar { padding: 20px 24px !important; border-radius: 32px 32px 0 0 !important; background: linear-gradient(180deg,#fff,#fbfdff) !important; }
.toolbar-title { font-size: 18px !important; }
.toolbar-title .count { display: inline-flex !important; align-items: center !important; min-height: 26px !important; padding: 0 10px !important; border-radius: 999px !important; background: #eff6ff !important; color: #1d4ed8 !important; }
.data-table-wrap.with-toolbar { border-radius: 0 0 32px 32px !important; }
.data-table thead th { height: 56px !important; background: #f8fafc !important; color: #64748b !important; font-size: 12.5px !important; font-weight: 850 !important; }
.data-table tbody td { height: 62px !important; color: #334155 !important; }
.data-table tbody tr:hover td { background: #f0f7ff !important; }
.status-cell { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-height: 30px !important; padding: 0 11px !important; border-radius: 999px !important; border: 1px solid #dbe3ef !important; background: #f8fafc !important; font-weight: 800 !important; }
.status-cell .status-dot { width: 7px !important; height: 7px !important; }
.status-cell:has(.status-dot.green) { background: #ecfdf5 !important; border-color: #bbf7d0 !important; color: #047857 !important; }
.status-cell:has(.status-dot.orange) { background: #fffbeb !important; border-color: #fde68a !important; color: #b45309 !important; }
.status-cell:has(.status-dot.red) { background: #fef2f2 !important; border-color: #fecaca !important; color: #b91c1c !important; }
.summary-row td, .data-table tr.summary-row td { background: #f0f7ff !important; color: #1e3a8a !important; border-bottom: 1px solid #bfdbfe !important; }
.data-table tr.summary-row td.col-num { color: #1d4ed8 !important; }
.data-table tr.summary-row .summary-label { color: #1d4ed8 !important; }

@media (max-width: 1280px) {
    .dashboard-insights { grid-template-columns: 1fr !important; }
    .dash-filter-input { width: min(360px, 48vw) !important; }
}

@media (max-width: 768px) {
    .dash-container { padding: 18px 14px 32px !important; }
    .dash-header, .dash-header-right { border-radius: 24px !important; }
    .dash-header-right, .dash-filter-input { width: 100% !important; }
    .kpi-row { grid-template-columns: 1fr !important; }
    .dashboard-insights .chart-card, .insight-card { min-height: auto !important; }
}

/* ===== Command center layout matching the detailed reference ===== */
.dashboard-command-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 296px !important;
    gap: 20px !important;
    align-items: start !important;
}

.dashboard-command-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    min-width: 0 !important;
}

.dash-tool-btn,
.table-action-btn {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease !important;
}

.dash-tool-btn:hover,
.table-action-btn:hover {
    transform: translateY(-1px) !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12) !important;
}

.table-action-bar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.table-action-btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 16px !important;
}

.table-action-btn.wide {
    width: auto !important;
    padding: 0 14px !important;
}

.dashboard-filter-panel {
    position: absolute !important;
    z-index: 120 !important;
    top: 154px !important;
    right: 360px !important;
    width: 220px !important;
    display: none !important;
    padding: 14px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16) !important;
}

.dashboard-filter-panel.open {
    display: block !important;
}

.filter-panel-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #0f172a !important;
    font-weight: 850 !important;
    margin-bottom: 12px !important;
}

.filter-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-bottom: 11px !important;
}

.filter-field label {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.filter-field select {
    min-height: 38px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
}

.filter-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

.filter-actions .btn-outline,
.filter-actions .btn-quick-create {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
}

.dashboard-live-rail {
    position: sticky !important;
    top: 22px !important;
}

.live-rail-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 16px !important;
    border: 1px solid rgba(219, 227, 239, 0.92) !important;
    border-radius: 30px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.09) !important;
}

.live-rail-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 4px 4px 0 !important;
}

.live-rail-header h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.live-rail-header p {
    margin: 4px 0 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.live-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: #f8fafc !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rail-section {
    padding: 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
}

.rail-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.rail-section-head span {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.rail-section-head button {
    border: 0 !important;
    background: transparent !important;
    color: #2563eb !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.rail-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.rail-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: start !important;
}

.rail-item-main {
    min-width: 0 !important;
}

.rail-item strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.rail-item span {
    display: block !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.rail-item em {
    color: #0f172a !important;
    font-style: normal !important;
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
}

.rail-progress {
    height: 5px !important;
    margin-top: 7px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #eef2f7 !important;
}

.rail-progress i {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
}

.rail-empty {
    padding: 12px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.rail-health-card {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
}

.health-ring {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: conic-gradient(#10b981 var(--score, 0deg), #e2e8f0 0deg) !important;
    position: relative !important;
}

.health-ring::after {
    content: "" !important;
    position: absolute !important;
    inset: 7px !important;
    border-radius: inherit !important;
    background: #ffffff !important;
}

.health-ring span {
    position: relative !important;
    z-index: 1 !important;
    color: #0f172a !important;
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}

.health-copy strong {
    display: block !important;
    color: #0f172a !important;
    font-weight: 900 !important;
}

.health-copy span {
    display: block !important;
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.health-mini-grid {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

.health-mini-grid div {
    padding: 10px 8px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    text-align: center !important;
}

.health-mini-grid span {
    display: block !important;
    color: #0f172a !important;
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
    font-weight: 900 !important;
}

.health-mini-grid small {
    display: block !important;
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 750 !important;
}

@media (max-width: 1500px) {
    .dashboard-command-grid {
        grid-template-columns: 1fr !important;
    }
    .dashboard-live-rail {
        position: static !important;
    }
    .live-rail-card {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .live-rail-header,
    .rail-health-card {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 768px) {
    .dashboard-command-grid,
    .live-rail-card,
    .health-mini-grid {
        grid-template-columns: 1fr !important;
    }
    .dashboard-filter-panel {
        position: fixed !important;
        top: 86px !important;
        left: 14px !important;
        right: 14px !important;
        width: auto !important;
    }
    .table-action-bar {
        width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
    }
}

/* Final command-center metric overrides loaded after earlier dashboard rules. */
.kpi-row { grid-template-columns: repeat(4, minmax(230px, 1fr)) !important; }
.kpi-card { min-height: 176px !important; }
.data-table { min-width: 3180px !important; }
.data-table .col-name { position: sticky !important; left: 0 !important; z-index: 3 !important; min-width: 300px !important; background: inherit !important; }
.data-table thead .col-name { z-index: 5 !important; }
.data-table .col-name small { display: block !important; max-width: 260px !important; margin-top: 4px !important; overflow: hidden !important; color: #94a3b8 !important; font-size: 11px !important; font-weight: 700 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.dash-header { z-index: 80 !important; }
.dashboard-filter-panel { z-index: 90 !important; }
.col-picker-panel { width: min(760px, 86vw) !important; max-height: min(680px, 78vh) !important; overflow: auto !important; padding: 18px !important; z-index: 2200 !important; }
.col-picker-panel .panel-title { padding: 0 2px 12px !important; color: #0f172a !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: none !important; }
.dashboard-filter-panel { width: 292px !important; }
.account-health-grid { display: grid !important; grid-template-columns: repeat(4, minmax(240px, 1fr)) !important; gap: 14px !important; }
@media (max-width: 1500px) { .account-health-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)) !important; } }
@media (max-width: 768px) { .kpi-row, .account-health-grid, .account-health-stats { grid-template-columns: 1fr !important; } .metric-group label { width: 100% !important; } }

/* Compact dashboard layout pass: calmer typography, tighter cards, more data density. */
.dash-container {
    padding: 24px 28px 40px !important;
    gap: 16px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #eef6ff 42%, #fff7fb 100%) !important;
}

.dash-header {
    padding: 18px 20px !important;
    border-radius: 26px !important;
    gap: 18px !important;
    align-items: center !important;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06) !important;
}

.dash-title {
    gap: 12px !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
}

.dash-title .material-symbols-rounded {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    font-size: 26px !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2) !important;
}

.dash-subtitle {
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.dashboard-actions {
    gap: 10px !important;
}

.dashboard-search,
.date-trigger,
.filter-trigger,
.column-trigger,
.quick-create-btn {
    min-height: 42px !important;
    border-radius: 15px !important;
    font-size: 12.5px !important;
}

.dashboard-search {
    width: min(340px, 34vw) !important;
    padding: 0 14px !important;
}

.dashboard-search .material-symbols-rounded {
    font-size: 19px !important;
}

.quick-create-btn {
    padding: 0 16px !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2) !important;
}

.kpi-row {
    grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
    gap: 14px !important;
}

.kpi-card {
    min-height: 132px !important;
    padding: 16px 18px !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06) !important;
}

.kpi-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12) !important;
}

.kpi-card::after {
    width: 86px !important;
    height: 30px !important;
    right: 14px !important;
    bottom: 12px !important;
    opacity: 0.22 !important;
}

.kpi-head {
    gap: 10px !important;
}

.kpi-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    font-size: 18px !important;
}

.kpi-label {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
}

.kpi-value {
    margin-top: 8px !important;
    font-size: clamp(25px, 1.9vw, 33px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

.kpi-trend {
    margin-top: 8px !important;
    font-size: 12px !important;
}

.kpi-sub {
    margin-top: 5px !important;
    font-size: 11.5px !important;
}

.kpi-badge {
    min-height: 24px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
}

.dashboard-command-grid {
    grid-template-columns: minmax(0, 1fr) 282px !important;
    gap: 16px !important;
    align-items: start !important;
}

.dashboard-insights {
    grid-template-columns: minmax(0, 1.45fr) minmax(292px, 0.72fr) !important;
    gap: 16px !important;
}

.dashboard-insights .chart-card,
.insight-card {
    min-height: 300px !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06) !important;
}

.dashboard-insights .chart-card.compact .chart-header,
.insight-card {
    padding: 18px 20px 12px !important;
}

.dashboard-insights .chart-card.compact .chart-title,
.insight-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
}

.dashboard-insights .chart-card.compact .chart-body {
    height: 198px !important;
    padding: 0 16px !important;
}

.chart-tabs,
.chart-view-tabs {
    border-radius: 14px !important;
}

.chart-tab,
.chart-range-btn,
.chart-view-btn {
    height: 34px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
}

.insight-list {
    gap: 10px !important;
}

.insight-item {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 11px 12px !important;
    border-radius: 18px !important;
}

.insight-item .insight-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 14px !important;
    font-size: 19px !important;
}

.insight-copy strong {
    font-size: 13px !important;
}

.insight-copy span,
.insight-action {
    font-size: 11.5px !important;
}

.dashboard-live-rail {
    min-width: 0 !important;
}

.live-rail-card {
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07) !important;
}

.live-rail-header strong {
    font-size: 17px !important;
}

.rail-section {
    padding: 12px !important;
    border-radius: 18px !important;
}

.rail-item strong,
.rail-item em {
    font-size: 11.5px !important;
}

.rail-item span {
    font-size: 10.5px !important;
}

.rail-health-card {
    grid-template-columns: 60px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
}

.health-ring {
    width: 54px !important;
    height: 54px !important;
}

.health-ring span {
    font-size: 17px !important;
}

.health-mini-grid div {
    padding: 8px 6px !important;
    border-radius: 13px !important;
}

.account-health-shell {
    padding: 18px !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06) !important;
}

.account-health-head h3 {
    font-size: 17px !important;
}

.account-health-head p {
    font-size: 12.5px !important;
}

.account-health-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    gap: 12px !important;
}

.account-health-card-mini {
    padding: 12px !important;
    border-radius: 18px !important;
}

.account-health-top strong {
    font-size: 13px !important;
}

.account-health-meta span,
.account-health-foot span {
    font-size: 11px !important;
}

.account-health-stats {
    gap: 8px !important;
}

.account-health-stats div {
    padding: 9px 8px !important;
    border-radius: 13px !important;
}

.account-health-stats b {
    font-size: 12.5px !important;
}

.account-health-stats small {
    font-size: 10px !important;
}

.glass-table-shell {
    border-radius: 24px !important;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.065) !important;
}

.glass-table-shell .table-toolbar {
    padding: 16px 18px !important;
    gap: 12px !important;
}

.section-title {
    font-size: 17px !important;
}

.toolbar-left small {
    font-size: 11.5px !important;
}

.table-action-bar {
    gap: 8px !important;
}

.table-search,
.bulk-action,
.refresh-btn,
.more-btn,
.date-mini-trigger,
.metric-level-tabs button {
    min-height: 38px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
}

.data-table-wrap.with-toolbar {
    border-radius: 0 0 24px 24px !important;
    overflow-x: auto !important;
}

.data-table {
    min-width: 2760px !important;
}

.data-table thead th {
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
}

.data-table tbody td {
    height: 48px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
}

.data-table .col-name {
    min-width: 260px !important;
}

.data-table .col-name small {
    max-width: 224px !important;
    font-size: 10.5px !important;
}

.data-table .col-name .campaign-name,
.adset-name-cell {
    font-size: 12.8px !important;
}

.status-cell,
.metric-pill,
.data-table .summary-label {
    min-height: 25px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
}

.data-table tr.summary-row td {
    height: 50px !important;
}

.switch {
    width: 38px !important;
    height: 22px !important;
}

.switch::after {
    width: 18px !important;
    height: 18px !important;
}

.switch.on::after {
    transform: translateX(16px) !important;
}

.dashboard-filter-panel,
.col-picker-panel,
.date-menu {
    border-radius: 22px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16) !important;
}

.dashboard-filter-panel {
    width: 280px !important;
    padding: 14px !important;
}

.metric-picker-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
    gap: 8px !important;
}

.metric-group {
    padding: 12px !important;
    border-radius: 18px !important;
}

.metric-group-title {
    font-size: 12px !important;
}

.metric-group label {
    min-height: 32px !important;
    border-radius: 12px !important;
    font-size: 11.5px !important;
}

@media (max-width: 1500px) {
    .dashboard-command-grid,
    .dashboard-insights {
        grid-template-columns: 1fr !important;
    }
    .live-rail-card {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .live-rail-header,
    .rail-health-card {
        grid-column: 1 / -1 !important;
    }
    .account-health-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

@media (max-width: 1280px) {
    .dash-container {
        padding: 22px 20px 36px !important;
    }
    .dash-header {
        align-items: flex-start !important;
    }
    .dashboard-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    .dashboard-search {
        width: min(100%, 420px) !important;
    }
    .kpi-row {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .dash-container {
        padding: 72px 12px 24px !important;
        gap: 14px !important;
    }
    .dash-header {
        padding: 16px !important;
        border-radius: 22px !important;
    }
    .dash-title {
        font-size: 23px !important;
    }
    .dash-title .material-symbols-rounded {
        width: 40px !important;
        height: 40px !important;
        border-radius: 14px !important;
        font-size: 24px !important;
    }
    .dashboard-actions {
        gap: 8px !important;
    }
    .dashboard-search,
    .date-trigger,
    .filter-trigger,
    .column-trigger,
    .quick-create-btn {
        width: 100% !important;
        min-height: 40px !important;
    }
    .kpi-row,
    .account-health-grid,
    .live-rail-card,
    .metric-picker-grid {
        grid-template-columns: 1fr !important;
    }
    .kpi-card {
        min-height: 122px !important;
        padding: 15px !important;
        border-radius: 20px !important;
    }
    .kpi-value {
        font-size: 27px !important;
    }
    .dashboard-insights .chart-card.compact .chart-body {
        height: 186px !important;
    }
    .glass-table-shell .table-toolbar,
    .account-health-head {
        align-items: stretch !important;
        flex-direction: column !important;
    }
    .table-search {
        width: 100% !important;
    }
    .data-table {
        min-width: 2320px !important;
    }
    .col-picker-panel {
        width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: 12px !important;
    }
}

/* Final breakpoint corrections for desktop command-center composition. */
@media (min-width: 1301px) {
    .dash-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
    }
    .dash-header-right {
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    .dash-filter-wrap {
        flex: 0 0 auto !important;
    }
    .dash-filter-input {
        width: 340px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 15px !important;
        font-size: 12.5px !important;
    }
    .date-btn,
    .dash-tool-btn,
    .col-picker-btn,
    .btn-quick-create {
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 15px !important;
        padding-inline: 14px !important;
        font-size: 12.5px !important;
        white-space: nowrap !important;
    }
    .dashboard-command-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 282px !important;
        gap: 16px !important;
        align-items: start !important;
    }
    .dashboard-insights {
        grid-template-columns: minmax(0, 1.45fr) minmax(292px, 0.72fr) !important;
    }
    .dashboard-live-rail {
        position: sticky !important;
        top: 18px !important;
    }
    .live-rail-card {
        display: flex !important;
        flex-direction: column !important;
    }
    .live-rail-header,
    .rail-health-card {
        grid-column: auto !important;
    }
}

@media (min-width: 1301px) {
    .kpi-card {
        position: relative !important;
    }
    .kpi-top {
        justify-content: flex-start !important;
        padding-right: 66px !important;
    }
    .kpi-card-head {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 7px !important;
    }
    .kpi-badge {
        position: absolute !important;
        top: 16px !important;
        right: 18px !important;
        flex: 0 0 auto !important;
    }
    .kpi-label {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }
}

@media (min-width: 1301px) and (max-width: 1699px) {
    .kpi-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1700px) {
    .kpi-row {
        grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
    }
}