.dashboard-page-container-volume {
    display: flex;
    flex-direction: column;
    /* No header strip — fill from the top of the content area */
    min-height: calc(100vh - 64px);
}

/* The global LoggedInLayout rule forces every .mud-container to have a 48 px
   right padding so page headings align with the top-bar icons. The Consult
   Volume Data page has no top-aligned heading and the asymmetry shows up as
   extra whitespace on the right of the panel. Reset both sides to 16 px
   (matching the page's own `pa-4`) so the panel inset reads as symmetric. */
.logged-in-main .mud-container.dashboard-page-container-volume {
    padding-right: 16px !important;
}

/* ── Popout top strip ──────────────────────────────────────────── */
.dashboard-popout-top-strip-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #4A4E6A;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.dashboard-popout-top-strip-ops .plo-actions-row {
    padding: 0 !important;
    gap: 4px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* Doctor scope caption — overlay pinned top-centre over the chart's plot
   area inside <ConsultVolumePanel>. Reflects the active PLO doctor filter
   ("All doctors" by default, "Dr <Name>" when drilled in). Practice/group
   admins only; doctor accounts hide it (single scope = no information).
   Pointer-events:none so it never hijacks chart hovers / tooltips. */
.cvp-scope-caption {
    position: absolute;
    /* Caption is anchored to .cvp-root (the full panel column), so
       "left: 50%" lines up with the centre of the headline-tile row
       above. Vertical offset clears the tile row (~38px) + the root's
       12px flex gap and lands the chip a few px inside the chart wrap's
       top edge. Tune if the tile row height changes. */
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 14px;
    /* White chip with brand-blue text. The text colour matches the dark
       end of the top nav bar gradient (linear-gradient(135deg, #565C82 0%,
       #34384E 100%)) so the chip still reads as part of the app chrome,
       but inverted so it pops against the chart's white plot area. */
    background: #FFFFFF;
    border: 1px solid rgba(52, 56, 78, 0.28);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    pointer-events: none;
    z-index: 5;
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
    color: #34384E;
}

.cvp-scope-caption .cvp-scope-caption-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 0.7rem;
    color: #8a8fa6;
}

.cvp-scope-caption .cvp-scope-caption-value {
    font-weight: 700;
    color: #34384E;
}

/* Unified consult-volume host: full-height column inside the dashboard fill
   panel.  The inner ConsultVolumePanel manages its own header strip + chart
   layout; we just provide flex stretching so the chart eats the available
   vertical space below the app bar / popout strip. */
.cvp-host {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 16px;
}
.cvp-host > * {
    flex: 1 1 auto;
    min-height: 0;
}
.period-refreshing.cvp-host {
    animation: period-pulse 0.85s ease-in-out infinite;
    pointer-events: none;
}

/* Lock the panel header strip (4 KPI pills) to a 48px height so it matches
   the side-nav row rhythm. Overrides the shared default in
   ConsultVolumePanel.razor's inline <style>. */
.cvp-host .cvp-header-strip {
    height: 48px !important;
}

/* ─────────────────────────────────────────────────────────────────
   P&L row (financial overlay below the consult-volume chart)
   Sits as a sibling of .cvp-host inside the fill-panel grid; flex:0
   so the chart above stays at flex:1 1 auto and shrinks just enough
   to make room. Headline strip on top, four equal-width cards below.

   Tinted indigo background mirrors the "Annual Service Cap" tile on
   /compliance-overview (rgba(91,96,128,0.14)) so the financial
   overlay reads as the same design language across dashboards.
───────────────────────────────────────────────────────────────── */
.cvp-pnl-row {
    flex: 0 0 auto;
    margin: 12px 16px 8px;
    padding: 12px 14px 14px;
    border-radius: 10px;
    background: rgba(91, 96, 128, 0.14);
    border: 1px solid #E2E6EE;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cvp-pnl-row.period-refreshing {
    animation: period-pulse 0.85s ease-in-out infinite;
    pointer-events: none;
}

/* Headline strip — title + period on left, big total on right.
   Sits transparent over the tinted row container; polarity is told
   entirely on the right-hand "Result:" amount which keeps the red /
   green / grey signalling. */
.cvp-pnl-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 8px 10px;
    border-bottom: 1px solid rgba(91, 96, 128, 0.22);
}
/* Two-part headline: bold "Service Provisioning:" section label +
   regular-weight descriptor. Both pinned to the active-nav highlight
   colour so the row reads as a section header rather than a dynamic
   alert. The polarity story is told entirely on the right-hand
   "Result:" amount, which keeps red / green / grey signalling. */
.cvp-pnl-headline-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.cvp-pnl-headline-section {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #34384E;
}
.cvp-pnl-headline-title {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #34384E;
}
.cvp-pnl-headline-amount {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    white-space: nowrap;
}

.cvp-pnl-row.cvp-pnl-exposure    .cvp-pnl-headline-amount { color: #B23A48; }
.cvp-pnl-row.cvp-pnl-opportunity .cvp-pnl-headline-amount { color: #2F7D4F; }
.cvp-pnl-row.cvp-pnl-neutral     .cvp-pnl-headline-amount { color: #5A6478; }

/* Four-card grid. equal columns; min-width 0 lets long detail
   lines truncate cleanly instead of stretching the grid. */
.cvp-pnl-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
/* Stacked card: header row with title (left) and dollar amount
   (top-right corner, same size & weight as the title), then the
   status and effect lines below at full card width so longer
   sentences don't truncate prematurely. */
.cvp-pnl-card {
    padding: 10px 14px 11px;
    border-radius: 8px;
    background: #F7F9FC;
    border-left: 3px solid #C7CCD6;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.cvp-pnl-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.cvp-pnl-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #2F384A;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cvp-pnl-card-amount {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: #2F384A;
    flex: 0 0 auto;
    white-space: nowrap;
}
.cvp-pnl-card-status {
    font-size: 0.74rem;
    font-weight: 600;
    color: #4A5566;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cvp-pnl-card-effect {
    font-size: 0.70rem;
    font-weight: 500;
    color: #7A8294;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cvp-pnl-card.cvp-pnl-card-exposure    { border-left-color: #B23A48; background: #FBF3F4; }
.cvp-pnl-card.cvp-pnl-card-exposure    .cvp-pnl-card-amount { color: #B23A48; }
.cvp-pnl-card.cvp-pnl-card-opportunity { border-left-color: #2F7D4F; background: #F2F8F4; }
.cvp-pnl-card.cvp-pnl-card-opportunity .cvp-pnl-card-amount { color: #2F7D4F; }

/* The 4-card P&L strip stays at 4 columns regardless of viewport
   width — the portal shell is locked to a 1400 px content minimum so
   each card has ~340 px to render at, which is comfortable for the
   short label + amount combo. Reflowing to 2 / 1 columns based on
   viewport produced the desktop-with-stacked-strip mismatch the audit
   flagged, so those rules have been retired here. Users below the
   locked content min scroll horizontally to bring the strip into
   view. See css/_tokens.css --gpc-portal-min-content. */

/* Consult-volume Dashboard.razor adds an extra column-direction wrapper. */
.dashboard-grid-scroll-fill-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.dashboard-grid-scroll-fill-panel > .dashboard-grid-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Row height distribution: the slim Rolling Average row sits at the top and
   takes the smallest slice; the gained height is redistributed to the two
   chart rows (year + period) which need more vertical room for trend lines
   and reference bands.  Total = 1.65 + 0.25 + 1.10 = 3.0 (unchanged). */
.dashboard-grid-inner-fill-panel .vol-row-avg    { flex: 0.25; }
.dashboard-grid-inner-fill-panel .vol-row-year   { flex: 1.65; }
.dashboard-grid-inner-fill-panel .vol-row-period { flex: 1.10; }

/* Consult-Volume page-specific column header — full-width centered with absolute underline.
   Differs from the Compliance Overview equivalent (which uses display:block + ::after that
   stretches via display:block). Lives here so per-page tweaks don't fight each other. */
.dashboard-col-header {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 14px 0 8px 0;
}

/* Underline spans the full column width via absolute positioning */
.dashboard-col-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.75;
}

/* Popout-only stack rules. See compliance-overview.css for the full
   reasoning — same contract here: the portal shell is locked to
   1400 px content min, so the regular logged-in surface never reflows
   to a single column. The popout window (`?popout=1`) keeps these
   rules because it intentionally renders narrow. */
@media (max-width: 959px) {
    .dashboard-popout-main .dashboard-page-container-volume {
        min-height: auto;
    }

    .dashboard-popout-main .dashboard-grid-scroll-fill-panel {
        overflow: visible;
        flex: none;
    }

    .dashboard-popout-main .dashboard-grid-inner-fill-panel {
        min-height: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dashboard-popout-main .dashboard-grid-inner-fill-panel .dashboard-col-headers {
        display: none;
    }

    .dashboard-popout-main .dashboard-grid-inner-fill-panel .dashboard-row-wrapper {
        flex: none;
    }

    .dashboard-popout-main .dashboard-grid-inner-fill-panel .dashboard-row-wrapper,
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .dashboard-row-cards,
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .dashboard-row-cards > .mud-grid {
        display: contents;
    }

    .dashboard-popout-main .dashboard-grid-inner-fill-panel .dashboard-row-label,
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .dashboard-row-label-spacer {
        display: none;
    }

    .dashboard-popout-main .dashboard-grid-inner-fill-panel .dashboard-row-cards > .mud-grid {
        height: auto;
    }

    .dashboard-popout-main .dashboard-grid-inner-fill-panel .mud-grid-item {
        display: block;
    }

    .dashboard-popout-main .dashboard-grid-inner-fill-panel .mud-grid-item > .mud-paper,
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .dashboard-cell-paper {
        height: auto;
    }

    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-section-hdr {
        display: block;
        padding: 4px 0;
    }


    /* Column-first stacking for consult volume cards.  Narrow-mode order
       mirrors the new wide layout: Rolling Average (r2) on top, then
       Rolling Year (r1), then the selected Period (r3). */
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-hdr-col1 { order: 0; }
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-c1r2 { order: 1; }
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-c1r1 { order: 2; }
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-c1r3 { order: 3; }
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-hdr-col2 { order: 4; }
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-c2r2 { order: 5; }
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-c2r1 { order: 6; }
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-c2r3 { order: 7; }
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-hdr-col3 { order: 8; }
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-c3r2 { order: 9; }
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-c3r1 { order: 10; }
    .dashboard-popout-main .dashboard-grid-inner-fill-panel .v-c3r3 { order: 11; }
}

/* ── Column-major compliance grid ── */
.cg-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

/* Each column is position:relative so summary cell overlays anchor to it */
.cg-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: visible; /* allow overlay to escape the column bounds */
}

/* Popout-only single-column stack — locked desktop portal stays at
   3 columns regardless of viewport width. */
@media (max-width: 960px) {
    .dashboard-popout-main .cg-col-grid { grid-template-columns: 1fr; }
}