html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-size: 14px;
    position: relative;
}
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/Images/simple-wave-lines-background-35.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: -2;
}
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    z-index: -1;
}
body, 
.mud-typography, 
.mud-typography-body1, 
.mud-typography-body2, 
.mud-typography-h1, 
.mud-typography-h2, 
.mud-typography-h3, 
.mud-typography-h4, 
.mud-typography-h5, 
.mud-typography-h6, 
.mud-button-root, 
.mud-card, 
.mud-text,
[class*="mud-typography"] {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.mud-typography-body1 {
    font-size: 0.875rem;
}
.mud-typography-body2 {
    font-size: 0.75rem !important;
}
#app {
    min-height: 100vh;
}

/* ── Shared page header strip ── */
.analytics-header-strip {
    margin: 0 12px 16px 12px;
    padding: 1px 8px 3px 8px;
    border-bottom: 1px solid rgba(115, 120, 160, 0.35);
    background: transparent;
}

.volume-filters-panel {
    margin-bottom: 16px;
}

.volume-filters-panel .analytics-strip-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-strip-title {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #4A5568;
    line-height: 1.25;
}

/* ── Popout / separate-window dashboard layout ── */
.dashboard-popout-main {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #f6f8fb !important;
    padding: 0 !important;
}
.dashboard-popout-main .mud-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.dashboard-popout-main .analytics-header-strip {
    flex-shrink: 0 !important;
}
.dashboard-popout-main .dashboard-grid-scroll {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.dashboard-popout-main .dashboard-grid-inner {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
}
.dashboard-popout-main .dashboard-col-headers {
    flex-shrink: 0 !important;
}
.dashboard-popout-main .dashboard-row-wrapper {
    flex: 1 !important;
    min-height: 0 !important;
}
.dashboard-popout-main .dashboard-cell-paper {
    height: auto !important;
    min-height: 0 !important;
}
.dashboard-popout-main .dashboard-cell-paper.dashboard-cell-short {
    height: auto !important;
    min-height: 0 !important;
}
.dashboard-popout-main .dashboard-cell-content {
    overflow: hidden !important;
    min-height: 0 !important;
}
.dashboard-popout-main .mud-grid-item {
    display: flex !important;
}
.dashboard-popout-main .mud-grid-item > .mud-paper {
    flex: 1 !important;
}
.dashboard-popout-main .dashboard-row-cards {
    flex: 1 !important;
    min-height: 0 !important;
}
.dashboard-popout-main .dashboard-row-cards > .mud-grid {
    height: 100% !important;
}

/* ── Section headers: hidden by default, shown in narrow mode ── */
.cg-section-hdr { display: none; }

@media (max-width: 959px) {
    .dashboard-popout-main {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
    }
    .dashboard-popout-main .mud-container {
        overflow: visible !important;
        flex: none !important;
    }
    .dashboard-popout-main .dashboard-grid-scroll {
        overflow: visible !important;
        flex: none !important;
    }
    .dashboard-popout-main .dashboard-grid-inner {
        min-height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .dashboard-popout-main .dashboard-col-headers {
        display: none !important;
    }

    /* Dissolve row wrappers so MudItems become direct grid children */
    .dashboard-popout-main .dashboard-row-wrapper,
    .dashboard-popout-main .dashboard-row-cards,
    .dashboard-popout-main .dashboard-row-cards > .mud-grid {
        display: contents !important;
    }

    .dashboard-popout-main .mud-grid-item {
        display: block !important;
        max-width: 100% !important;
        flex-basis: auto !important;
        padding: 0 !important;
    }
    .dashboard-popout-main .dashboard-cell-paper,
    .dashboard-popout-main .dashboard-cell-paper.dashboard-cell-short {
        height: auto !important;
        min-height: 150px !important;
    }
    .dashboard-popout-main .dashboard-cell-content {
        overflow: visible !important;
    }
    .dashboard-popout-main .dashboard-row-label {
        display: none !important;
    }
    .dashboard-popout-main .dashboard-row-label-spacer {
        display: none !important;
    }

    /* Show section headers for column-first grouping */
    .dashboard-popout-main .cg-section-hdr {
        display: block !important;
        padding: 4px 0 !important;
    }

    /* Column-first stacking order:
       Col 1 (PSR Triggers):       hdr=0, r1=1, r2=2, r3=3, r4=4
       Col 2 (PSR Review Risks):    hdr=5, r1=6, r2=7, r3=8, r4=9
       Col 3 (Consult Optimisation): hdr=10, r1=11, r2=12, r3=13, r4=14 */
    .dashboard-popout-main .hdr-col1 { order: 0 !important; }
    .dashboard-popout-main .cg-c1r1  { order: 1 !important; }
    .dashboard-popout-main .cg-c1r2  { order: 2 !important; }
    .dashboard-popout-main .cg-c1r3  { order: 3 !important; }
    .dashboard-popout-main .cg-c1r4  { order: 4 !important; }
    .dashboard-popout-main .hdr-col2 { order: 5 !important; }
    .dashboard-popout-main .cg-c2r1  { order: 6 !important; }
    .dashboard-popout-main .cg-c2r2  { order: 7 !important; }
    .dashboard-popout-main .cg-c2r3  { order: 8 !important; }
    .dashboard-popout-main .cg-c2r4  { order: 9 !important; }
    .dashboard-popout-main .hdr-col3 { order: 10 !important; }
    .dashboard-popout-main .cg-c3r1  { order: 11 !important; }
    .dashboard-popout-main .cg-c3r2  { order: 12 !important; }
    .dashboard-popout-main .cg-c3r3  { order: 13 !important; }
    .dashboard-popout-main .cg-c3r4  { order: 14 !important; }

    /* --- ConsultTimeCell: bars left, gauge right --- */
    .dashboard-popout-main .ct-body {
        gap: 8px !important;
    }
    .dashboard-popout-main .ct-bars {
        margin-left: 0 !important;
        flex: 1 !important;
        width: auto !important;
    }
    .dashboard-popout-main .ct-gauge {
        transform: none !important;
        max-width: 120px !important;
        width: 120px !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }

    /* --- ConsultVolumeCell: gauge left, bars right --- */
    .dashboard-popout-main .cv-body {
        gap: 8px !important;
    }
    .dashboard-popout-main .cv-gauge {
        transform: none !important;
        max-width: 120px !important;
        width: 120px !important;
        flex-shrink: 0 !important;
    }
    .dashboard-popout-main .cv-bars {
        margin-left: 0 !important;
        flex: 1 !important;
        width: auto !important;
    }

    /* --- Other transforms --- */
    .dashboard-popout-main .avgbill-chart-area {
        transform: none !important;
    }
    .dashboard-popout-main .psr-gauge {
        max-width: none !important;
    }
}

/* ── Global filter-strip dropdown sizing ────────────────────────────
   Applied via Class="db-filter-select" / PopoverClass="db-filter-popover"
   on every MudSelect used in page-level filter strips.
   Matches the compact style established on the Consult Analytics page.
──────────────────────────────────────────────────────────────────── */
.db-filter-select .mud-input-slot,
.db-filter-select .mud-select-input {
    font-size: 0.82rem !important;
}
.db-filter-select .mud-input-label,
.db-filter-select .mud-input-label-animated {
    font-size: 0.82rem !important;
}
.db-filter-select .mud-input-label-animated.mud-shrink {
    font-size: 0.72rem !important;
}
.db-filter-popover .mud-list-item-text,
.db-filter-popover .mud-list-item span,
.db-filter-popover .mud-typography {
    font-size: 0.82rem !important;
}