/*
 * 20260826 Modified by: Chris L
 * Reason: Reports refactor PR 0 — the report bodies move into this RCL, so their stylesheet can no longer be
 *         scoped to Reports.razor. A scope id (b-08b7is97i8) lands on the RIGHTMOST compound of every rule,
 *         so the moment a <table class="report-table"> is authored in a different component it gets a
 *         different hash and ~90 rules die silently.
 * Summary: Moved verbatim from Components/Pages/Budgeting/Reports.razor.css and served unscoped from
 *          _content/Yabanet.Budgeting.Reports.RCL/reports.css (linked in Components/App.razor immediately
 *          after webYaba.styles.css, which is where the scoped bundle it replaces sat in the cascade).
 *          Rebased onto #68, so this file also carries that PR's badge-convention rules
 *          (.desc-cell / .cat-cell / .cmp-gone) exactly as they landed on main.
 *
 * TWO changes were made to the moved file, and only two:
 *   1. ` ::deep` stripped from the six .accordion-* selectors. The compiled scoped output was already a plain
 *      descendant combinator (`[b-hash] .accordion-button`), so this is combinator-equivalent. `::deep` is
 *      invalid in an unscoped file and would kill those rules outright.
 *   2. This header.
 * Everything else is byte-for-byte the content of Reports.razor.css at #68 — verified by diff, not by eye.
 *
 * ⚠ DO NOT "fix" the `@@media print` at the bottom of this file. The double-@ is not a valid CSS at-rule, so
 *   the browser discards that block and its rules have NEVER applied — that is the behaviour in production
 *   today. Print isolation works only via the conditional inline <style> in Reports.razor. Correcting the
 *   typo would change printed output for all 17 reports. It is on the deferred worklist, not this PR.
 *
 * ⚠ DO NOT move Reports.razor's inline print <style> block in here either. It contains
 *   `body * { visibility: hidden }` and is emitted ONLY while a report is open; unconditional here, it would
 *   make every other page in the app print a blank sheet.
 *
 * Selector namespaces are .reports-root / .report-* / .rl-* / .cmp-* / .acc-close. Audited unscoped: the only
 * foreign emitters of a matching class are BudgetApprovalTracker.razor and Inbox/HodInbox.razor
 * (`tr.inkomstestaat-sub`), and every rule for it requires a `.report-table` ancestor which neither has.
 */

/* ── Page root ── */
.reports-root {
    display: flex;
    flex: 1;
    /* 20260616 CL: parent .content-inner is display:block (height:100%), so flex:1 cannot grow this.
       Add height:100% so the reports landing fills the available height instead of hugging content. */
    height: 100%;
    overflow: hidden;
    position: relative;
    font-family: Segoe UI, Arial, sans-serif;
}

/* ── Left: scrollable viewport ── */
.report-viewport-area {
    flex: 1;
    min-width: 0;
    /* 20260826 CL - anchors .report-switching-overlay, which must cover the viewport and nothing else. */
    position: relative;
    overflow-y: auto;
    padding: 10px 8px;
    background: #f0f4f8;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 20260826 CL - the report-switch overlay. Covers the report viewport while the new report's body is being
   built, so a rail click is acknowledged instantly instead of leaving the previous report on screen until
   the diff lands.

   ⚠ IT IS A CHILD OF .reports-root, NOT OF .report-viewport-area, and that is load-bearing. The viewport is
   a flex COLUMN and a scroll container, so an overlay placed inside it is a flex item: measured at 57px
   tall instead of its declared height because flex-shrink collapsed it to its content, and anchored to the
   full scroll height rather than the visible band. .reports-root is position:relative with a fixed height
   and overflow:hidden, so an absolutely-positioned child of it covers exactly what the user can see, at any
   scroll offset, without joining any flex layout.

   right:44px leaves the report rail uncovered, so a different report can be chosen mid-switch. z-index 20
   sits above the card and below the rail's 50. */
.report-switching-overlay {
    position: absolute;
    inset: 0 44px 0 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 244, 248, 0.78);
    backdrop-filter: blur(1px);
}

/* ── Report card — print-preview style ── */
.report-card {
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    /* 20260718 CL - CR Batch 3: tighter gutters so more report fits per page/width */
    padding: 14px 16px;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
}

/* ── Report header (logos + title) ── */
.report-header {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #0f4c81;
    padding-bottom: 10px;
    margin-bottom: 16px;
    gap: 12px;
}
.report-header-logo { height: 36px; width: auto; object-fit: contain; }
.report-header-title { flex: 1; text-align: center; }
.report-header-title h4 { margin: 0; color: #0f4c81; font-size: 14pt; font-weight: 700; }
.report-header-title p  { margin: 2px 0 0; font-size: 9pt; color: #888; }

/* ── Report meta bar ── */
.report-meta {
    display: flex;
    gap: 16px;
    font-size: 9pt;
    color: #888;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.report-meta strong { color: #333; }

/* 20260826 CL - the meta row reads: organisation on the LEFT, then financial year and generated-at pushed
   RIGHT with the timestamp furthest right. margin-left:auto on the first right-hand item consumes the free
   space, which is what separates the two groups — a spacer <span> or justify-content:space-between would
   both misbehave when the organisation is absent, and space-between would additionally fling the year and
   the timestamp to opposite ends instead of keeping them together.
   align-items:baseline keeps the two groups on one text baseline once the row wraps on a narrow card. */
.report-meta { align-items: baseline; }
.report-meta .report-meta-right { margin-left: auto; }

/* ── Action bar ── */
.report-action-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Tables ── */
.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
    margin-top: 8px;
}
/* 20260826 CL - horizontal cell padding trimmed 10px -> 6px on request ("all text needs to move more left").
   Seven columns x two sides x 4px = 56px reclaimed on Budget Overview alone, which was overflowing its card
   by 73px. Vertical padding is untouched, so row height and the table's density are unchanged. */
.report-table th {
    background: #0f4c81;
    color: white;
    padding: 6px 6px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}
.report-table td {
    padding: 5px 6px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

/* 20260826 CL - hierarchy indentation as CLASSES rather than inline style="padding-left:NNpx".
   The Account column was the widest on the page (221px against a 56px heading) because its width is set by
   the longest account name PLUS its indent, and the deepest level was indented 44px. Tightened to 8/18/26,
   which keeps all four levels visually distinct while giving the money columns back ~18px.
   Classes, not inline styles, because docs/ui-correctness-gate.md bans ad-hoc inline layout values — and
   because one rule here changes every report at once instead of eleven scattered edits. */
.report-table .lvl-dept { font-weight: 700; }
.report-table .lvl-team { padding-left: 8px;  font-weight: 600; }
.report-table .lvl-cat  { padding-left: 18px; font-weight: 600; }
.report-table .lvl-item { padding-left: 26px; }
.report-table tr:hover td { background: #f5f9ff; }
.report-table tr.report-subtotal td { font-weight: 700; background: #e8f0fb; }
.report-table tr.report-drillrow td { background: #f0f7ff; cursor: pointer; }
.report-table tr.report-drillrow:hover td { background: #dceefb; }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* 20260718 CL - CR Batch 3: status columns centred (heading + content) across report tables */
.report-table .stat-col { text-align: center; }
.report-table .status-pending   { color: #f57f17; font-weight: 600; }
.report-table .status-routed    { color: #1565c0; font-weight: 600; }
.report-table .status-complete  { color: #2e7d32; font-weight: 600; }
.report-table .status-rejected  { color: #c62828; font-weight: 600; }
.report-table .over-budget      { color: #c62828; font-weight: 700; }

/* ── Budget Comparison (20260818 CL - CR S3 Change 2) ──────────────────────────
   Variance colours are their OWN classes rather than reusing .over-budget: an increase against last
   year's budget is not the same thing as being over budget, and the two must be free to diverge.
   Applied at ITEM level only — the client asked that attention fall on the individual items driving a
   change, not on every roll-up row. */
.report-table .var-up   { color: #c62828; font-weight: 700; }   /* grew  */
.report-table .var-down { color: #2e7d32; font-weight: 700; }   /* shrank */
.report-table .var-flat { color: #8a97a6; }                     /* no change */

/*
 * 20260826 Modified by: Chris L
 * Reason: CONVENTION for per-line flags on reports. Text badges floated to the right of the description
 *         competed with the description for width, wrapped on narrow cards, and had to be re-read on every
 *         row to mean anything.
 * Summary: A per-line flag is now a COLOURED CIRCLE placed BEFORE the description text, and any report that
 *          renders flags carries a LEGEND naming the colours. The wording that used to sit in each badge
 *          moves into that legend, so it is stated once instead of on every row.
 *
 * Colours are carried over from the badges they replace - #1565c0 for New, #8a97a6 for discontinued - so the
 * meaning a reader has already learned does not change with the shape.
 *
 * ⚠ .rpt-flag is NOT scoped under .report-table. The legend sits outside the table, above it, and uses the
 *   same swatch - one rule has to serve both or they drift apart.
 */
.rpt-flag {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: baseline;
    /* The circle is a legend key, not decoration that should shrink with the row. */
    flex: 0 0 auto;
}
.rpt-flag--new  { background: #1565c0; }
.rpt-flag--gone { background: #8a97a6; }

/*
 * The legend. Rendered by the report component as the FIRST thing in its body, which puts it directly below
 * the organisation / financial-year meta row and immediately above the table.
 *
 * ⚠ It lives INSIDE .report-card deliberately, NOT in the action bar beside the export buttons. That bar is
 *   .no-print, so a legend there would be missing from every printed and PDF'd copy - which is exactly where
 *   an unexplained coloured dot is least recoverable.
 */
.report-legend {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 9pt;
    color: #6c8199;
    margin: 0 0 10px;
}
.report-legend .rpt-legend-item { white-space: nowrap; }

/* Marks a line with no prior-year figure, so "+100%" is read as "new item", not a doubling. */
.report-table .cmp-new {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: #1565c0;
    vertical-align: middle;
}

/* ── BADGE CONVENTION (20260826 CL) ────────────────────────────────────────────
   A row badge ("Nuut" / "Nie vanjaar begroot nie" and anything like them) belongs in the
   DESCRIPTION column of a report, floated RIGHT — never in a money, variance or total column.

   Two reasons this is a rule and not a preference:
     1. A badge qualifies the LINE ("this one is new"), not the figure beside it. In a variance cell
        "+100%" plus a badge reads as a doubling with a note; against the description it reads as
        what it is.
     2. Money columns are right-aligned and tabular-numeric. Anything else in them breaks that
        alignment — the single thing most visible to a client scanning a column of figures.

   float, not flex: descriptions wrap, and a flex row fights the wrapping. Floating right also makes
   the badges form their own tidy column instead of starting at a different x on every row.

   Add `class="desc-cell"` to the description <td> and drop the badge inside it. */
.report-table td.desc-cell .cmp-new,
.report-table td.desc-cell .cmp-gone,
.report-table td.cat-cell  .cmp-new,
.report-table td.cat-cell  .cmp-gone { float: right; margin-left: 8px; }

/* 20260825 CL - marks a prior-year line that is NOT budgeted this year. These rows were previously
   dropped from the report entirely, which is why the prior column never footed to last year's budget. */
.report-table .cmp-gone {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: #8a97a6;
    vertical-align: middle;
    /* 20260825 CL - the label is two words; without this it wraps mid-phrase inside the narrow
       variance column and pushes the row to double height. */
    white-space: nowrap;
}

/* 20260825 CL - income and expense are separate GROSS sections now; this heads each one. */
.report-table tr.cmp-section-head td {
    padding-top: 14px;
    color: #0f4c81;
    border-bottom: 1px solid #0f4c81;
}

/* The summary block is the FIRST set of body rows, so it needs a rule under it to separate it. */
.report-table tr.cmp-total-top td { border-bottom: 2px solid #0f4c81; }

/* 20260825 CL - the net row closes the summary block, so it carries the heavier rule. */
.report-table tr.cmp-net-row td { border-bottom: 3px double #0f4c81; font-weight: 800; }

.report-table .cmp-empty { padding: 18px 14px; color: #6c8199; text-align: center; }

/* ── Category Comparison: sortable headings (20260825 CL - CR Category Comparison) ─────────────
   Affordance only. NOTHING here is a @media rule — scoped @media is unreliable in this app, so the
   print behaviour lives in the unscoped <style> block in Reports.razor and the narrow-screen
   behaviour is an overflow wrapper rather than a breakpoint. */
.report-table th.sortable { padding: 0; }              /* the button owns the padding, so the whole cell is the hit area */
.report-table th.sortable .th-sort {
    display: flex;
    align-items: center;
    justify-content: inherit;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: inherit;
    cursor: pointer;
}
/* .num sets text-align on the cell; the flex button needs the equivalent on its own axis. */
.report-table th.sortable.num .th-sort { justify-content: flex-end; }
.report-table th.sortable:hover { background: #14639f; }
.report-table th.sortable .th-sort:focus-visible { outline: 2px solid #ffd54f; outline-offset: -2px; }

/* Fixed-width slot so ⇅ / ▲ / ▼ all occupy the same space — the heading label must not shift
   sideways when the sort direction changes. */
.report-table th.sortable .sort-glyph {
    display: inline-block;
    width: 1em;
    margin-left: 6px;
    text-align: center;
    font-size: 9px;
    opacity: 0.45;                                     /* inactive = FAINT, i.e. "sortable", not "sorted" */
}
.report-table th.sortable.sorted { background: #14639f; }
.report-table th.sortable.sorted .sort-glyph { opacity: 1; font-size: 10px; }
/* NB: the active column is NOT underlined on screen — the navy .sorted background and the ▲/▼ arrow
   already say which column is sorted, and an underline there just reads as a hyperlink. Paper is the
   exception: browsers print with background graphics OFF by default, so the underline is added back
   inside the print block in Reports.razor, where it is the only surviving cue. */

/* '#' is the narrowest column but takes no fixed pixel width — nowrap is enough. */
.report-table th.th-rownr { white-space: nowrap; }

/* 20260826 CL - the outline-number column on the hierarchy reports (Income Statement, Income Budget,
   Budget Overview). It carried style="width:60px" on the <th> and class="num" on the cells, so the heading
   sat LEFT while the values sat RIGHT — they did not line up with each other, and "1" / "1.1" floated to the
   far edge leaving ~30px of dead gutter before the numbering started.
   Left-aligned so heading and value share an edge, and `width:1%` + nowrap collapses the column to its
   content (the standard shrink-to-fit idiom for auto-layout tables) instead of reserving a fixed 60px. */
.report-table .nr-cell {
    text-align: left;
    white-space: nowrap;
    width: 1%;
    /* 20260826 CL - the column is already content-bound: its width is the widest outline number ("12.10",
       32px) plus the table's default 10px+10px cell padding = 52px exactly, with nothing spare. The old
       style="width:60px" was already being ignored by auto-layout, so left-aligning reclaimed no width on
       its own. Trimming the RIGHT padding is the only lever left; the left padding stays at 10px so the
       numbers keep the same left edge as every other first column on the page. */
    padding-right: 2px;
}

/* Five columns at 375px need somewhere to go. Scrolling the TABLE keeps the page body from scrolling
   sideways, which is the actual gate requirement — and it needs no breakpoint. */
.report-table-scroll { width: 100%; overflow-x: auto; }

/* flex-wrap, not a media query: scoped @media is unreliable in this app, and wrapping is all the
   narrow-screen behaviour this row needs. */
.cmp-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.cmp-filters .form-select { width: auto; min-width: 170px; }

.cmp-filter-label { font-size: 12px; font-weight: 600; color: #0f4c81; white-space: nowrap; }

.cmp-filter-caption { font-weight: 600; color: #0f4c81; margin-bottom: 8px; }

.cmp-banner {
    padding: 8px 12px;
    margin-bottom: 12px;
    border-left: 3px solid #f5a623;
    background: #fff8e8;
    color: #7a5b00;
    font-size: 12px;
}

/* ── Team Budget Detail: grouped two-row header ── */
/* 20260616 CL - CR FY2026 (Change 7): Quantity / Unit Cost group over Now+Prior sub-columns.
   20260705 Chris L - CR Batch2 Change 3: Total now also groups over Now+Prior → 10 columns. Widths
   rebalanced so table-layout:fixed + percentage colgroup still keeps every column inside the frame
   (no h-scroll); money columns equal width, quantity columns narrower, text columns wrap rather than overflow. */
/* 20260826 Modified by: Chris L
   Reason: The fixed percentage layout was breaking in af-ZA at a narrow card: "Vorige" and "Nou" collided in
           the 3.5% quantity columns, the group headings ("Hoeveelheid", "Eenheidskoste") overhung their own
           column spans, and "Goedgekeur" / "Hangende" were clipped by the 9% status column.
   Summary: The percentages could not be re-tuned to fix it, because they are viewport-relative while the text
            they must hold is not. MEASURED at the 680px card this table actually gets: the money columns need
            89px for "(99 999 999,99)" and receive 10.2% = 69px; quantity needs 39px for "Vorige" and receives
            3.5% = 24px; status needs 82px for "Goedgekeur" and receives 9% = 61px. The old comment's claim
            that 10.2% "just fits" held only at a much wider card. Switched to table-layout:auto so each
            column takes what its content needs and col-cat (the only wrapping column) absorbs the slack.
            The .report-table-scroll wrapper already handles the rare case where the total still exceeds the
            card, so nothing spills outside the frame. */
.report-table--teamdetail {
    table-layout: auto;
    width: 100%;
}
/* 20260718 CL - CR Batch 3: money columns widened + smaller money font so parenthesised negatives fit
   without overflowing (accounting parens add 2 chars); this keeps the reserved .acc-close slot aligning
   the digits across positive and negative rows.
   20260723 CL - Description + Category collapsed into ONE Account (tree) column. It carries the whole
   hierarchy now, so it takes a third of the width; the old 21% col-desc rule is retired. Money keeps its
   full 10.2% (fits 99 999 999,99 incl. parens) — the account column absorbs the difference. Widths sum
   to 100%: 33 (account) + 2×3.5 (qty) + 5×10.2 (money) + 9 (status) = 100. */
/* 20260826 CL - under table-layout:auto only ONE hint is needed. col-cat is the sole column that wraps
   (white-space:normal), so giving it a percentage makes it the column that absorbs whatever the others do
   not need; nr, qty, money and status are left to size to their own content and therefore can no longer
   clip their labels in ANY language. The col classes stay in the markup as layout anchors. */
.report-table--teamdetail col.col-cat    { width: 30%; }     /* Account — absorbs the slack, wraps if short */
/* tighter horizontal padding so the narrow columns hold their labels */
.report-table--teamdetail th,
.report-table--teamdetail td { padding-left: 4px; padding-right: 4px; }
/* standalone columns sit on the same baseline as the Now/Prior sub-row */
/* 20260826 CL - th-span carried no font-size, so "#", "Rekening", "Toegestaan" and "Status" fell back to the
   base .report-table th (10pt / 13.33px) while th-group and th-sub beside them are 8pt (10.67px) — a 25%
   step INSIDE one header row. Matched to 8pt so the whole row reads as one heading. Pre-existing; adding the
   "#" column put two mismatched sizes next to each other at the left edge, which is what surfaced it. */
.report-table--teamdetail th.th-span { vertical-align: bottom; font-size: 8pt; }
/* 20260718 CL - CR Batch 3: numeric column headings right-aligned to match their right-aligned content
   (per the global numeric-right-align convention); status column is centred (below). */
.report-table--teamdetail th.th-group {
    text-align: right;
    font-size: 8pt;
    font-weight: 600;
    padding-top: 1px;
    padding-bottom: 1px;
    line-height: 1.1;
}
.report-table--teamdetail th.th-sub {
    text-align: right;
    vertical-align: bottom;
    font-weight: 500;
    font-size: 8pt;
}
/* status column: heading + content centred */
.report-table--teamdetail th.th-status,
.report-table--teamdetail td.td-status { text-align: center; }
/* 20260826 CL - the status cell was the last text in this table still at the base td size (10pt) while every
   other body cell is 8.5pt — the same mismatch as th-span, and what made "Goedgekeur" the widest thing in
   the table. Matched to td.num. */
.report-table--teamdetail td.td-status { font-size: 8.5pt; }

/* 20260826 CL - the shared .lvl-item indent is 26px, sized for the FOUR-level hierarchy reports where the
   indent is the only thing separating dept / team / category / item. This table has two levels and a "#"
   column that already states which one a row is ("1" vs "1.1"), so 26px spends Account-column width
   re-stating what the number says — and it was pushing long descriptions into a second line sooner.
   12px keeps a visible step over the 4px category row without competing with the outline number. */
.report-table--teamdetail td.lvl-item { padding-left: 12px; }
/* text columns wrap at word boundaries; headers stay on one line (base th is nowrap), numbers don't wrap */
/* 20260826 CL - vertical-align:top overrides the base .report-table td `middle`. This is the ONE report whose
   Account column wraps by design (white-space:normal below), and on a wrapped row `middle` floated every
   number down to the second line, so the figures no longer read against the description they belong to.
   Top-aligning puts the values on the FIRST line of the description. Scoped to this table deliberately —
   the other sixteen reports do not wrap, so a global change would be risk without benefit. */
.report-table--teamdetail td { white-space: normal; vertical-align: top; }
.report-table--teamdetail td.num { white-space: nowrap; font-size: 8.5pt; }

/* ── Inkomstestaat row levels ── */
.report-table tr.inkomstestaat-cat td {
    font-weight: 700;
    background: #1e3a5f;
    color: white;
    font-size: 10.5pt;
}
.report-table tr.inkomstestaat-cat:hover td { background: #1e3a5f; }
.report-table tr.inkomstestaat-sub td {
    background: #d0e4f7;
    color: #0f2a4a;
}
.report-table tr.inkomstestaat-sub:hover td { background: #bfd6ef; }

/* 20260826 CL - drill-through return convention: the row that was clicked to drill away, marked when the
   user comes Back to it. The URL fragment has already scrolled it into view, so this only has to say WHICH
   row — an amber left edge and a warm tint, distinct from the blue drill/hover states so it reads as "here
   is where you were" rather than "this is selected".
   ⚠ POSITION IS LOAD-BEARING. It ties on specificity with `.report-table tr.inkomstestaat-sub td` and
   `.report-table tr.report-drillrow td` (both 0,2,2), so ONLY source order decides. It sits after every
   row-level rule for that reason — moved earlier, the team heading rows on Unapproved Items keep their blue
   and the highlight silently does nothing. Measured before this move: the returned row painted
   rgb(191, 214, 239), the inkomstestaat blue. */
.report-table tr.report-row-returned td {
    background: #fff5da;
    box-shadow: inset 0 -1px 0 #eec200;
}
.report-table tr.report-row-returned td:first-child { box-shadow: inset 3px 0 0 #eec200, inset 0 -1px 0 #eec200; }
.report-table tr.report-row-returned:hover td { background: #ffeeb8; }
/* 20260616 CL - CR FY2026 (Change 5): category leaf-group level (Dept→Team→Category) */
.report-table tr.inkomstestaat-cat3 td {
    background: #eef4fb;
    color: #0f2a4a;
}
.report-table tr.inkomstestaat-cat3:hover td { background: #e3eef9; }

/* ── Drill-down detail ── */
.report-detail-section {
    background: #f5f9ff;
    border: 1px solid #c5d8f0;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 12px;
}
.report-detail-section h6 { color: #0f4c81; font-weight: 700; margin: 0 0 8px; }

/* ── Placeholder ── */
.report-placeholder {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13pt;
    min-height: 300px;
}

/* ── Right panel override: always open, no transition ── */
/*
 * 20260825 Modified by: Chris L
 * Reason: the report list held its full 280px permanently, so every report was rendered into a viewport
 *         280px narrower than the window for the entire session — the panel is needed for a second at
 *         the start and is dead width thereafter.
 * Summary: same hover-flyout the BudgetingLayout / AdminLayout sidebars use — a 44px icon rail that
 *          expands to 280px on hover and OVERLAYS the report rather than reflowing it, so the report
 *          never resizes underneath the reader. Mirrored to the right edge: it sits on the right, so it
 *          casts its shadow leftward and the viewport reserves the rail with padding-right.
 *          position:absolute (not flex) is what makes the expansion an overlay instead of a squeeze.
 */
.report-list-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    z-index: 50;
    border-left: 1px solid #e8e8e8;
    background: white;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease, box-shadow 0.2s ease;
}

.report-list-panel:hover {
    width: 280px;
    box-shadow: -4px 0 16px rgba(0,0,0,0.25);
}

/* A report click pins it shut so the flyout is not covering the report just asked for; re-hovering
   clears the pin (OnReportRailEnter). Same contract as .sidebar.force-collapsed. */
.report-list-panel.force-collapsed,
.report-list-panel.force-collapsed:hover {
    width: 44px !important;
    box-shadow: none !important;
}

/* The viewport reserves ONLY the rail, so expanding overlays rather than reflowing the report.
   20260826 Modified by: Chris L
   Reason: The reports had no usable vertical scrollbar. It existed and the area scrolled (Income Statement
           is 36 931px of content in a 676px window) but it was INVISIBLE: padding-right keeps the CONTENT
           clear of the rail, yet a scrollbar always renders at the element's own right edge, which sat under
           the absolutely-positioned rail. Measured: scrollbar track x817-833, rail x789-833 at z-index 50.
   Summary: margin-right ends the element's box at the rail's left edge instead of running underneath it, so
            the scrollbar renders beside the rail rather than behind it. padding-right returns to the 8px
            base, which keeps the usable content width IDENTICAL (44 margin + 8 padding + 16 scrollbar = the
            60px the old 52px padding + 16px hidden scrollbar already consumed). The rail is still absolute,
            so hover still OVERLAYS to 280px and never reflows the report. */
.report-viewport-area { margin-right: 44px; padding-right: 8px; }

/* ── Rail (collapsed) presentation ──
   Text is hidden by width/opacity rather than display:none so it can transition, and so the button
   keeps its layout box — the icon must not jump horizontally as the panel opens. */
.report-list-panel .rl-icon { width: 20px; flex: 0 0 20px; text-align: center; }

.report-list-panel .rl-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    transition: opacity 0.15s ease 0.05s;
}
.report-list-panel:hover:not(.force-collapsed) .rl-text {
    opacity: 1;
    width: auto;
    margin-left: 8px;
}

/* Centre the icons in the rail; restore the normal left-aligned row when open.
   FLEX, not text-align: the button carries Bootstrap's .text-start, whose `text-align: left !important`
   beats any text-align written here. Flex sidesteps that entirely and is also what makes .rl-icon's
   fixed 20px slot mean anything, so the icon column does not shift as the label appears. */
.report-list-panel .rl-item { display: flex; align-items: center; }
.report-list-panel:not(:hover) .rl-item,
.report-list-panel.force-collapsed .rl-item { padding: 7px 0 !important; justify-content: center; }

/* The FY caption and the accordion group titles have no icon form, so they collapse away at rail
   width. font-size:0 rather than display:none keeps the accordion's own toggle box intact — hiding it
   outright makes BlazorBootstrap's collapse animation measure a zero-height panel.
   NB: .rl-header's styles live HERE, not inline on the element. They were inline, and an inline
   display:flex outranks every rule below without !important — the header simply would not collapse. */
.rl-header {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #888;
    letter-spacing: 0.08em;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}
.report-list-panel:not(:hover) .rl-header,
.report-list-panel.force-collapsed .rl-header { display: none; }

/* The group headers now carry their own icon (TitleTemplate), so at rail width they behave exactly like
   a report button: icon centred, text collapsed, and clicking it still expands the section. */
.report-list-panel:not(:hover) .accordion-button,
.report-list-panel.force-collapsed .accordion-button {
    padding: 8px 0;
    justify-content: center;
}
/* Bootstrap's chevron is an ::after background-image with a fixed margin-left:auto that would push the
   icon off-centre in a 44px rail — and it means nothing when the label is not readable. */
.report-list-panel:not(:hover) .accordion-button::after,
.report-list-panel.force-collapsed .accordion-button::after { display: none; }

/* Bootstrap gives .accordion-body 16.67px side padding, which in a 44px rail pushes every report icon
   3px right of centre against the group icons above them. Zero it while collapsed only. */
.report-list-panel:not(:hover) .accordion-body,
.report-list-panel.force-collapsed .accordion-body { padding-left: 0; padding-right: 0; }

/* ── Print styles ── */
@@media print {
    header, nav, aside,
    .budget-title-strip, .report-list-panel,
    .report-action-bar, .budget-sidebar { display: none !important; }
    .report-viewport-area {
        padding: 0 !important;
        background: white !important;
        overflow: visible !important;
    }
    .report-card {
        box-shadow: none !important;
        border-radius: 0 !important;
        max-width: 100% !important;
    }
    .report-table tr:hover td { background: transparent !important; }
}