/* PSR Case Insights has no inner `.dashboard-grid-inner` wrapper that
   contributes side padding (unlike the Consult Volume Data and Compliance
   Overview pages, which add 12 px there). To match those pages' 28 px
   effective panel inset, the container itself takes the full 28 px on
   each side. The `padding-right` override also neutralises the global
   LoggedInLayout rule that otherwise forces 48 px on the right to align
   headings with the top-bar icons (PSR has no such heading). */
.logged-in-main .mud-container.psr-page-container {
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-top: 24px !important;
}

/* ── Folder/card tabs ────────────────────────────────────────────────────
   Base tab styling lives in css/shared/page-shell.css under the
   .gpc-tab-shell class (added alongside .psr-content-shell on the page
   itself). Only PSR-specific overrides remain here. */

/* PSR tab width override removed — the 240 px default now lives in
   .gpc-tab-shell .mud-tabs-tabbar .mud-tab in css/shared/page-shell.css
   so every tabbed page in the portal gets the same width without a
   per-page rule. */

/* ── Tier labels ─────────────────────────────────────────────────────── */
.psr-tier-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.025);
    border-radius: 0 6px 6px 0;
}

.psr-tier-title {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
}

.psr-tier-sub {
    display: block;
    font-size: 0.78rem;
    color: #888;
    margin-top: 2px;
    line-height: 1.4;
}

/* ── Top-of-tab intro paragraph ──────────────────────────────────────
   Borderless light-grey panel that frames the intro copy at the top
   of every tab. Same 6px corner radius as the table / chart wrappers
   so the three panels on each tab read as one stack. The numeric
   callouts (years analysed, cases reviewed) are bold inline to
   anchor the reader without breaking out into a separate stat block.
   Outer margin keeps the spacing from siblings; inner padding gives
   the copy room to breathe inside the tinted box. */
.psr-marker-intro {
    /* margin + padding sum to ~64px vertically — same as the original
       flat paragraph (28px+36px). Keeping the total footprint intact
       prevents the Case Trends tab from overflowing the viewport (the
       panels below are height-locked at 586px so any extra here pushes
       a page-level scroller). */
    margin: 16px 0 20px 0;
    padding: 14px 20px;
    background: #F5F7FB;
    border-radius: 6px;
    text-align: justify;
    hyphens: auto;
}

.psr-marker-intro-text {
    display: block;
    font-size: 0.9rem;
    color: #6B7280;
    line-height: 1.6;
    min-width: 0;
}

.psr-marker-intro-text strong {
    color: #34384E;
    font-weight: 700;
}

/* ── Column headers ──────────────────────────────────────────────────
   Styled as a soft, capsule-shaped strip that visually anchors the
   table — uppercase tracked labels on a low-contrast tinted background
   with rounded top corners that meet the cards below. */
.psr-rule-col-headers,
.psr-rule-card-header {
    display: grid;
    /* # | Name | Description | Module | Tier | Cases — Description gets
       the extra room since marker descriptions tend to wrap onto two
       lines. The Tier column only holds a centred "Tier 1" / "Tier 2"
       chip so it can sit narrow, and the GP Clarity Module column only
       carries a fixed "Clarity X — Y Markers" label. */
    grid-template-columns: 6% 16% 39% 18% 7% 14%;
    align-items: center;
}

.psr-rule-col-headers {
    /* Left padding includes the +5px width of each row's coloured bar so
       the column labels line up exactly with the column content below.
       The # column (left) and Historical Cases column (right) are both
       chip-style centred cells, so they don't need much side breathing
       room — keep the side padding tight to pull those chips closer to
       the table's outer edges.
       Vertical padding is zero — the explicit 32px height plus
       align-items:center on the grid keeps the labels vertically
       centred and matches the Case Library MudTable head cell, which
       is also locked to 32px in `.psr-cases-table-wrap .mud-table-head
       .mud-table-cell`. Without the height match the marker header
       was rendering ~3px taller than the case library header. */
    padding: 0 4px 0 9px;
    height: 32px;
    background: linear-gradient(180deg, #F4F5FA 0%, #ECEEF6 100%);
    /* Outer border + radius are owned by `.psr-markers-table-wrap`;
       only the bottom hairline that separates header from cards
       lives on the header strip itself. */
    border-bottom: 1px solid #D7DBEB;
    margin-bottom: 0;
    flex: 0 0 auto;
}

.psr-rule-col-headers span {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    color: #565C82;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* # column (centred badge) */
.psr-rule-col-headers span:nth-child(1) {
    text-align: center;
}

/* GP Clarity Module column (centred two-line label) */
.psr-rule-col-headers span:nth-child(4) {
    text-align: center;
}

/* Rule Tier column (centred chip) */
.psr-rule-col-headers span:nth-child(5) {
    text-align: center;
}

/* Historical Cases column (centred chip + chevron) */
.psr-rule-col-headers span:nth-child(6) {
    text-align: center;
}

/* ── Rule list & cards ───────────────────────────────────────────────
   Cards sit flush against each other with a hairline divider so the
   table reads as one continuous body anchored to the header strip
   above. The coloured left-border bar on each card is the dominant
   left-edge signal; the list itself only carries a right + bottom
   hairline so the bar isn't competing with a grey frame. */
.psr-rule-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    /* Outer border + radius are owned by `.psr-markers-table-wrap`.
       overflow stays VISIBLE so an expanded card body can render
       below its row — the wrap above us absorbs the extra height by
       relaxing from `height` to `min-height` (see the override on
       .psr-markers-table-wrap below). */
    overflow: visible;
    /* List grows to fill all leftover space inside the wrap when
       collapsed (wrap inner − 32px column header), and grows further
       when one of the cards below expands. `flex: 1 1 auto` is the
       same value used previously for the steady-state fill behaviour;
       the card sizing rule below has been switched to
       `flex: 0 0 auto` so an expanded card grows to its content
       instead of being squeezed back into the equal-share carve-up. */
    flex: 1 1 auto;
}

.psr-rule-card {
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    /* overflow stays VISIBLE so the expanded body can render fully —
       the previous `overflow: hidden` was clipping the expanded card
       body to the row's 46px height, which is what made the
       expand-on-click feel broken (the C# state was flipping correctly
       but the DOM the toggle revealed was hidden behind the card's
       overflow clip). */
    overflow: visible;
    transition: background 0.15s;
    box-sizing: border-box;
    /* Sized to content with a 46px floor. Previously this was
       `flex: 1 1 0` so all 12 cards distributed the list's height
       equally — but that locked every card to ~46px regardless of
       its expanded state, which clipped the expand-to-show-detail
       body invisibly. With `flex: 0 0 auto` + `min-height: 46px`,
       collapsed cards still measure 46px (12 × 46 + 32px header =
       584px, snug against the wrap's 586px min-height for the
       cross-tab visual height match) and an expanded card grows
       naturally to its content. */
    flex: 0 0 auto;
    min-height: 46px;
}

.psr-rule-card:hover {
    background: #FAFBFE;
}

.psr-rule-card-header {
    /* Left padding is 5px less than the column header's because the
       row's 5px coloured left-border adds that gap back, keeping the
       column grid perfectly aligned with the header row above. */
    padding: 8px 4px 8px 4px;
    cursor: pointer;
    user-select: none;
    /* `height: 100%` lets the header fill its parent card vertically.
       The card itself is a flex item in `.psr-rule-list` with
       `flex: 1 1 0`, so all 12 cards distribute the list's height
       equally (≈ 46px each at the panel's pinned 586px outer / 552px
       list area). If the wrap ends up any taller for any reason, the
       cards stretch and the headers stretch with them — no fixed gap
       below row 12. The grid inside the header keeps content
       vertically centred via `align-items: center`. The divider
       lives here as a border-bottom (consumed by `box-sizing:
       border-box`) so it never adds to the card's outer height. */
    height: 100%;
    min-height: 46px;
    box-sizing: border-box;
    border-bottom: 1px solid #EEF0F7;
}

/* Last row has no divider — the wrap's outer 1px border at the
   bottom of the panel does that job, so a redundant inter-row line
   would just compete with it. */
.psr-rule-list .psr-rule-card:last-child .psr-rule-card-header {
    border-bottom: none;
}

/* ── Marker Number column (badge) ────────────────────────────────────
   Pill-shaped badge that mirrors the numbering on Compliance Overview
   tiles. Marker 8020 spans two tiles (1 + 2) so the badge widens to
   fit the "1·2" label without the layout shifting. */
.psr-rule-number {
    display: flex;
    align-items: center;
    justify-content: center;
}

.psr-rule-tile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Locked to a single width so single-digit badges (3, 4, ...) match
       the wider "1·2" badge for Marker 8020. Without this, the column
       would have a ragged left edge of differently-sized chips. */
    width: 40px;
    height: 24px;
    padding: 0;
    border-radius: 12px;
    /* Background colour is set inline per-row from the row's GP Clarity
       module colour so the badge stays in lock-step with the left-border
       accent. Fallback applies if the inline style is ever missing. */
    background: #565C82;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.psr-rule-name {
    font-weight: 600;
    font-size: 0.85rem;
    padding-right: 12px;
}

/* Single-line ellipsis on the marker description so every marker
   row renders at the same 46px floor as the Case Library table on
   the sibling tab — without this, longer descriptions wrapped to
   two lines and pushed those rows ~10px taller, leaving the two
   tables visually mismatched. The full description is still
   surfaced in the expanded card body when the row is opened. */
.psr-rule-desc {
    font-size: 0.85rem;
    color: #777;
    padding-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── Rule Tier column ────────────────────────────────────────────────
   Centred "Tier 1" / "Tier 2" text label. Colour is set inline per
   row from the marker's tier so Tier 1 reads warmer (red) and Tier 2
   cooler (blue) — the only two-state distinction in the column. */
.psr-rule-tier {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.psr-rule-card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ── Expanded body ───────────────────────────────────────────────────── */
.psr-rule-card-body {
    padding: 0 16px 16px 16px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.psr-rule-quote {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fafafa;
    border: 1px solid rgba(0,0,0,0.07);
    border-left: 3px solid #ccc;
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    flex: 1;
    min-width: 0;
}

/* ── Case type cell (chip + inline description) ───────────────────────
   Wraps the Agreement/Committee chip and its short description in
   cases tables. The chip stays at its natural width via flex-shrink:0
   and the description fills the remaining horizontal space, wrapping
   to a second line if the column is narrow. */
.psr-case-type-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.psr-case-type-desc {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.3;
}

/* ── Body: quote + tracker on the same row ───────────────────────────── */
.psr-rule-body-top {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    margin: 14px 0 0 0;
}

/* ── GP Clarity Module cell ──────────────────────────────────────────
   Two-line stacked label, centred in its column: the Clarity product
   name (e.g. "Clarity Foundations") in the module accent colour on
   top, with the Compliance Overview category (e.g. "Trigger Markers")
   underneath as a muted subtitle. Stays in lock-step with the row's
   left-border accent so module identity is reinforced visually. */
.psr-gpc-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0 6px;
    text-align: center;
    line-height: 1.25;
    min-width: 0;
}

.psr-gpc-section {
    font-size: 0.83rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.psr-gpc-name {
    font-size: 0.72rem;
    font-weight: 500;
    color: #8B91A6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Filter dropdown popover (PLO drawer + any inline reuse) ──────────
   The MudSelect filters now live in the layout's left-drawer "Page
   Options" (PLO) section — the per-input sizing / typography is
   handled by .plo-select-wrap in logged-in.css. The rules below
   only style the popped-out option list so it stays compact. */
.mud-popover.psr-filter-popover,
.mud-popover.psr-filter-popover .mud-list-item-text,
.mud-popover.psr-filter-popover .mud-list-item span,
.mud-popover.psr-filter-popover p {
    font-size: 0.8rem !important;
}

.mud-popover.psr-filter-popover .mud-list-item {
    min-height: 32px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* ── Cases table ─────────────────────────────────────────────────────
   Visual language mirrors the Compliance Markers table on the
   sibling tab: same outer #E2E5F0 frame, same gradient header strip
   with uppercase tracked labels in the navigation accent, and the
   same hairline row dividers + soft hover state. */
/* ── Shared panel wrap (Compliance Markers + Case Library + Trends) ──
   All three tabs render their content inside one of these wraps, so
   panel-level concerns — outer border, corner radius, exact height,
   white background — live in a single rule. Adjusting the tab's outer
   height (e.g. swapping 586 → 600) only needs to happen here and on
   the row-height calc below + the EChart Height + C# CHART_HEIGHT
   constant on the trends tab.

   Pinned with an *exact* `height` (not `min-height`) plus
   `box-sizing: border-box` so the three wraps measure to the same
   outer pixel value regardless of how MudBlazor's internals or our
   own card markup fluctuate. The inner area is therefore always
   586 − 2px border = 584px, which is exactly what the Compliance
   Markers content needs (32px header + 12 × 46px cards) and what the
   Case Library row-height calc + Trends chart Height target. */
.psr-cases-table-wrap,
.psr-markers-table-wrap,
.psr-trends-chart-wrap,
.psr-case-study-chart-wrap {
    box-sizing: border-box;
    border: 1px solid #E2E5F0;
    border-radius: 6px;
    overflow: hidden;
    height: 586px;
    display: flex;
    flex-direction: column;
    background: #fff;
    width: 100%;
}

/* Compliance Markers wrap is the only one of the four that has an
   interactive expand-to-show-detail behaviour (clicking a row opens
   a panel with the cited PSR quote + the most recent cases for that
   marker). Letting it grow above the shared 586px when a card is
   expanded means the expanded body actually shows; the steady-state
   (nothing expanded) still measures exactly 586px because the inner
   content stack — 32px header + 12 × 46px cards = 584px — sits
   neatly under the 586px floor, so the four tabs still measure the
   same outer height when the user is just flipping between them.
   `overflow: visible` lets the expanded body extend below the panel
   without being clipped at the bottom edge. */
.psr-markers-table-wrap {
    height: auto;
    min-height: 586px;
    overflow: visible;
}

/* Force every descendant of the panel wraps to honour border-box so
   row / header / footer / card heights all measure consistently
   regardless of whether they're plain divs (Compliance Markers) or
   MudBlazor table primitives (Case Library). Without this, MudTable's
   internal cells were defaulting to content-box and overshooting the
   panel by ~2px — the source of the "table is 2 px larger than the
   other wrappers" mismatch. */
.psr-cases-table-wrap *,
.psr-markers-table-wrap *,
.psr-trends-chart-wrap *,
.psr-case-study-chart-wrap * {
    box-sizing: border-box;
}

/* Make the inner MudTable + its scroll container fill the wrapper so
   the Case Library content occupies the same max-width:1400px panel
   area as the Compliance Markers table on the sibling tab. The native
   <table> element defaults to width:auto, which would otherwise
   collapse the table to its content width. */
.psr-cases-table-wrap .mud-table-container,
.psr-cases-table-wrap table.mud-table-root,
.psr-cases-table-wrap .mud-table {
    width: 100%;
}

/* Flex-column the MudTable so the pager always pins to the bottom of
   the wrap (which is itself flex-column with a fixed 586px height /
   584px inner area). The data container is kept at its natural size
   — `flex: 0 0 auto` — because making it grow caused the <table> to
   absorb the extra space and stretch its last row vertically. Pushing
   the pager down with `margin-top: auto` instead distributes any
   leftover height as a neutral gap between the last row and the
   footer, which preserves the consistent row height across every
   row. */
.psr-cases-table-wrap .mud-table {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.psr-cases-table-wrap .mud-table .mud-table-container {
    flex: 0 0 auto;
}
.psr-cases-table-wrap .mud-table .mud-table-pagination {
    flex: 0 0 auto;
    margin-top: auto;
}

/* Header height locked to match the Compliance Markers column header
   (`.psr-rule-col-headers` ≈ 32px). MudBlazor's default `.mud-table-cell`
   line-height inflates the natural cell height a few pixels above the
   div-based header on the sibling tab, so we drive height explicitly
   and keep the text vertically centred. */
.psr-cases-table-wrap .mud-table-head .mud-table-cell {
    background: linear-gradient(180deg, #F4F5FA 0%, #ECEEF6 100%);
    color: #565C82;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 12px;
    height: 32px;
    border-bottom: 1px solid #D7DBEB;
    vertical-align: middle;
}

/* Row metrics mirror `.psr-rule-card-header` on the Compliance
   Markers tab so toggling between the two tables feels visually
   continuous (same 8px vertical padding, 0.85rem font, 1.4
   line-height).
   Row height is *computed* from the panel height target rather
   than locked at 46px — the 11 rows in the Case Library page have
   to fill the same outer height as the 12 cards in the Compliance
   Markers tab (584px), with two 32px header/footer strips already
   reserving 64px, so each row claims (584 − 64) ÷ 11 = 47.27px.
   This delivers what `flex` layout couldn't on a real `<table>`:
   every row stretches identically instead of the last one
   absorbing all the leftover height. !important defeats
   MudBlazor's same-specificity `.mud-table-cell` rule. */
.psr-cases-table-wrap .mud-table-body .mud-table-row {
    height: calc((584px - 64px) / 11) !important;
}

.psr-cases-table-wrap .mud-table-body .mud-table-cell {
    padding: 8px 12px !important;
    height: calc((584px - 64px) / 11) !important;
    line-height: 1.4;
    font-size: 0.85rem;
    color: #444;
    border-bottom: 1px solid #EEF0F7;
    vertical-align: middle;
}

.psr-cases-table-wrap .mud-table-body .mud-table-row:last-of-type .mud-table-cell {
    border-bottom: none;
}

/* Hover lifts the entire row uniformly — matching the .psr-rule-card
   hover state on the Compliance Markers tab. */
.psr-cases-table-wrap .mud-table-body .mud-table-row:hover > .mud-table-cell {
    background: #FAFBFE;
}

/* Per-column overrides.
   • Date & Type headers are centred over their (left-aligned) data so
     the column labels read as captions sitting above the column.
   • Repayment is fully centred — header and cell — because the dollar
     value is the column's only content and centring keeps it visually
     anchored to the heading. */
.psr-cases-table-wrap .psr-cases-col-date,
.psr-cases-table-wrap .psr-cases-col-type {
    text-align: center;
}

.psr-cases-table-wrap .psr-cases-col-repayment {
    text-align: center;
}

.psr-cases-table-wrap .psr-cases-cell-date {
    white-space: nowrap;
    color: #6B7280;
}

.psr-cases-table-wrap .psr-cases-cell-repayment {
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
    color: #34384E;
}

.psr-cases-table-wrap .psr-cases-cell-chevron {
    width: 36px;
    text-align: right;
    padding-right: 12px;
}

/* ── Table footer (MudTablePager) ────────────────────────────────────
   Bookends the table by mirroring the header strip — same #F4F5FA →
   #ECEEF6 gradient, same #D7DBEB hairline, same #565C82 ink — so the
   header and footer read as a matching pair framing the data rows. */
.psr-cases-table-wrap .mud-table-pagination {
    background: linear-gradient(180deg, #F4F5FA 0%, #ECEEF6 100%);
    border-top: 1px solid #D7DBEB;
    color: #565C82;
    font-size: 0.78rem;
    font-weight: 600;
    /* Pin the pager wrapper itself to 32px so MudBlazor's default
       internal padding can never inflate the footer past the matching
       header strip. The inner toolbar gets the same lock below. */
    height: 32px;
    min-height: 32px;
    padding: 0;
}

/* MudBlazor's pager renders a flex toolbar with three slots (page-
   size selector, "1–10 of 558" caption, prev/next buttons). Lock the
   toolbar — and every interactive child — to a 32px height so the
   footer mirrors the header strip exactly and the table reads as a
   header/footer-bookended block. !important is required to override
   MudToolBar's default 56px minimum.

   `display: flex; align-items: center;` is forced explicitly here:
   without it, the page-size dropdown was sitting visibly higher than
   the surrounding "Rows per page" / "1–11 of 558" captions because
   MudToolBar's default vertical alignment was getting overridden by
   our height/min-height clamps. */
.psr-cases-table-wrap .mud-table-pagination .mud-table-pagination-toolbar {
    display: flex !important;
    align-items: center !important;
    padding-left: 12px;
    padding-right: 12px;
    min-height: 32px !important;
    height: 32px !important;
}

/* Every direct child of the toolbar (caption, dropdown, count, action
   button group) re-aligns to the toolbar's vertical centre line so
   the footer reads as a clean horizontal band. Without this rule a
   couple of MudBlazor's wrappers were rendering with `align-self:
   stretch`, which made tall children (the outlined select) anchor to
   the top of the toolbar instead of its centre. */
.psr-cases-table-wrap .mud-table-pagination .mud-table-pagination-toolbar > * {
    display: flex;
    align-items: center;
    align-self: center;
}

/* Shrink the prev/next/first/last action buttons so they fit inside
   the 32px toolbar without forcing it to grow. The default Material
   button is 36–40px square; pulling them down to 28×28 keeps them
   tappable while staying inside the bar. */
.psr-cases-table-wrap .mud-table-pagination .mud-table-pagination-actions .mud-button-root {
    min-width: 28px !important;
    width: 28px;
    height: 28px;
    padding: 0;
}

/* Equally clamp the page-size dropdown — without this the outlined
   input control measures ~40px and re-inflates the toolbar. */
.psr-cases-table-wrap .mud-table-pagination .mud-select,
.psr-cases-table-wrap .mud-table-pagination .mud-input-control {
    min-height: 28px;
}
.psr-cases-table-wrap .mud-table-pagination .mud-input-control .mud-input.mud-input-outlined {
    min-height: 28px;
    height: 28px;
}
.psr-cases-table-wrap .mud-table-pagination .mud-input-control .mud-input.mud-input-outlined .mud-input-slot {
    padding-top: 0;
    padding-bottom: 0;
    height: 28px;
}

/* "Rows per page" caption + the count caption ("1–10 of 558"). Match
   the header's letter-spacing/uppercase treatment for the labels and
   keep the count itself in the same #565C82 ink. */
.psr-cases-table-wrap .mud-table-pagination .mud-table-pagination-caption,
.psr-cases-table-wrap .mud-table-pagination .mud-table-pagination-information,
.psr-cases-table-wrap .mud-table-pagination .mud-table-page-number-information {
    color: #565C82;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* The page-size dropdown — outlined select sitting inline with the
   captions. Tone the input chrome down to the same muted footer
   palette and shrink the type to match. */
.psr-cases-table-wrap .mud-table-pagination .mud-select .mud-input-slot,
.psr-cases-table-wrap .mud-table-pagination .mud-select-input,
.psr-cases-table-wrap .mud-table-pagination .mud-select input {
    color: #565C82;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Prev/Next/First/Last navigation buttons — pick up the same #565C82
   ink as the captions so the whole footer reads as one tonal band. */
.psr-cases-table-wrap .mud-table-pagination .mud-table-pagination-actions .mud-button-root {
    color: #565C82;
}

.psr-cases-table-wrap .mud-table-pagination .mud-table-pagination-actions .mud-button-root:hover:not(:disabled) {
    background-color: rgba(86, 92, 130, 0.08);
}

.psr-cases-table-wrap .mud-table-pagination .mud-table-pagination-actions .mud-button-root:disabled {
    color: rgba(86, 92, 130, 0.35);
}

/* ── Type cell — plain text label ────────────────────────────────────
   Replaces the old MudChip + descriptive subtitle with a single,
   compact text token. Subtle weight bump keeps it scannable in a
   dense table. */
.psr-cases-table-wrap .psr-cases-cell-type {
    font-weight: 600;
    color: #34384E;
    white-space: nowrap;
}

/* ── Marker tags inside Markers Involved column ──────────────────────
   Pill-shaped chip with a coloured leading badge that mirrors the
   marker-number badge on the Compliance Markers tab — same numbering
   format ("1·2", "5", "11"), same module-tinted background. The
   marker name follows in dark text on a soft neutral pill body so
   the number stays the primary visual anchor. */
.psr-case-marker-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.psr-rule-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #E2E5F0;
    border-radius: 12px;
    padding: 2px 10px 2px 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #34384E;
    white-space: nowrap;
    line-height: 1.2;
}

.psr-rule-tag-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #565C82;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.psr-rule-tag-name {
    color: #34384E;
}

/* ── Case Trends — ECharts heatmap wrapper ───────────────────────────
   The heatmap lives in a bordered card so it sits flush with the
   intro paragraph above it and matches the visual weight of the
   tables on the other tabs. The container is positioned so EChart's
   resize observer has a stable, non-zero box to render into. */
.psr-trends-chart-wrap {
    /* Position relative so any future absolute-positioned chart
       overlays (annotations, badges) anchor inside the wrap. The
       outer border / radius / fill / pinned height all come from the
       shared `.psr-cases-table-wrap, …` selector above so the three
       tabs stay visually aligned at the panel level.

       Asymmetrical internal padding: 4px on top (the chart's own
       `grid.top = 24` already reserves space for the x-axis month
       labels, so a thick top inset just stacked on top of that and
       pushed the heatmap noticeably down inside the panel), 32px on
       the bottom (extra breathing room below the heatmap so the
       visualMap and bottom edge of the cells don't crowd the panel
       border), and 16px on the right / left to keep clean breathing
       room around the visualMap and the y-axis labels. The EChart
       wrapper's `Height` is reduced from 584 → 548
       (= 584 inner − 4 top − 32 bottom) so the chart still fits
       without overflowing the wrap. */
    position: relative;
    margin: 16px 0 24px 0;
    padding: 4px 16px 32px 16px;
}

/* Top edge of the heatmap plot area. The C# `xAxis[1]` mirror axis
   that *should* draw this line was being clipped by the wrap's
   `overflow: hidden` (its axisLine was rendering right at chart-y=0,
   which falls under the wrap's border-top), so we paint it from CSS
   instead. Offsets break down as:
     top   = 4px wrap padding + 24px chart grid.top
     left  = 16px wrap padding + 200px chart grid.left
     right = 16px wrap padding + 90px chart grid.right
   The colour matches the axisLines on the bottom / left / right
   sides so the four edges read as one continuous frame. */
.psr-trends-chart-wrap::before,
.psr-trends-chart-wrap::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 10;
}

/* Top edge of the heatmap plot area. CSS borders render crisper than
   ECharts' canvas-drawn axisLines, so we use a much lighter shade
   (#E2E5F0) for these CSS edges so they visually match the
   axisLines drawn on the bottom and right by the chart itself.
   Offsets: top = 4px wrap pad + 24px chart grid.top;
            left = 16px wrap pad + 200px chart grid.left;
            right = 16px wrap pad + 90px chart grid.right. */
.psr-trends-chart-wrap::before {
    top: 28px;
    left: 216px;
    right: 106px;
    height: 0;
    border-top: 1px solid #E2E5F0;
}

/* Left edge of the heatmap plot area. The C# `yAxis[0].axisLine` is
   in place but the y-axis label tabs have a (rgba 0.22) tinted
   background that bleeds right up to the line and visually swallows
   it. Drawing a CSS line on top — with the same #E2E5F0 colour as
   the top edge above — restores a clean left frame.
   Offsets: top = 28px (matches ::before);
            bottom = 32px wrap pad + 20px chart grid.bottom = 52px;
            left = 16px wrap pad + 200px chart grid.left = 216px. */
.psr-trends-chart-wrap::after {
    top: 28px;
    bottom: 52px;
    left: 216px;
    width: 0;
    border-left: 1px solid #E2E5F0;
}


/* ── Empty state ─────────────────────────────────────────────────────── */
.psr-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background: #fff;
}

/* ── Case outcomes table rows ────────────────────────────────────────── */
.psr-case-row {
    cursor: pointer;
}

/* ── Expanded case text (HTML content from DB) ───────────────────────── */
.psr-case-text {
    font-size: 0.9rem;
    line-height: 1.75;
    color: #333;
}

.psr-case-text p    { margin-bottom: 10px; }
.psr-case-text ul   { margin-bottom: 10px; padding-left: 28px; }
.psr-case-text li   { margin-bottom: 6px; }

/* ── Mini case table inside expanded rule card ───────────────────────── */
.psr-mini-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.84rem;
    border: 1px solid rgba(0,0,0,0.06);
}

.psr-mini-table thead tr {
    background: rgba(0,0,0,0.04);
}

.psr-mini-table th {
    padding: 8px 14px;
    font-weight: 600;
    color: #555;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}

.psr-mini-table-row {
    cursor: pointer;
    transition: background 0.12s;
}

.psr-mini-table-row:hover {
    background: rgba(115,120,160,0.06);
}

.psr-mini-table td {
    padding: 8px 14px;
    color: #444;
    border-top: 1px solid rgba(0,0,0,0.04);
}

/* ── Case Studies — ECharts stacked-bar wrapper ──────────────────────
   Sister wrap to .psr-trends-chart-wrap (panel frame is shared via the
   four-selector group above). Differs in two important ways:

   1. **No phantom frame edges.** The trends wrap paints its own top + left
      hairlines via `::before` / `::after` because the heatmap's left
      y-axis tabs visually swallow the canvas-drawn axisLine. The bar
      chart has no such issue, so reusing the trends wrap on this tab
      produced two random-looking lines slicing across the bar canvas
      at the heatmap's grid coordinates (left:216px, right:106px). This
      class skips those pseudo-elements entirely.

   2. **Symmetric internal padding.** Trends uses 4/16/32/16 because the
      heatmap reserves 24px at the top for month labels and ~32px at
      the bottom for the visualMap. The bar chart's rotated month
      labels need real breathing room *below* the bars, so we use a
      uniform 12px around — leaving ECharts' grid.bottom (64px) to
      hold the labels and the wrap's padding to act purely as a
      gutter against the panel border. */
.psr-case-study-chart-wrap {
    position: relative;
    margin: 16px 0 24px 0;
    padding: 12px;
}