/* ═══════════════════════════════════════════════════════════════════════════
   finreports.css — Accounting → Reports (Run 50, E4). The panel is dark-only:
   every colour comes from admin.css's tokens or the state colours ledger.css
   already uses (green #4ADE80 / amber #FBBF24 / red #F87171) — no new palette.

   A report reads like a printed statement: a document card with its own head
   (group · title · period · when it was built), sections set as ruled tables,
   a subtotal under a single rule, a TOTAL under a single rule and over a DOUBLE
   rule (the bookkeeper's convention for a final figure), and the checks listed
   at the foot the way an auditor ticks a schedule.

   ⚠ NO TRUNCATION: these tables are `.fr-table`, never `.data-table` — whose
   cells are max-width 180px + text-overflow: ellipsis, and ellipsis REPLACES
   inline content while every DOM/geometry assertion still passes (the
   project's four-times-paid lesson). Figures are `nowrap`, text WRAPS, and a
   table wider than the screen scrolls inside its own `.fr-table-wrap`.
   ═══════════════════════════════════════════════════════════════════════════ */

.finreports-root { display: flex; flex-direction: column; gap: var(--space-md); }
.finreports-root > div:empty { display: none; }

/* ── before the books: the dormant line ── */
.fr-dormant { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 194, 0.28); background: var(--bg-card); color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; }
.fr-dormant strong { color: var(--text-primary); font-weight: 600; }

/* ── the picker: five groups of reports ── */
.fr-picker-groups { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.fr-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fr-group-label { font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text-muted); }
.fr-group-items { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-pick { padding: 7px 13px; font-family: var(--font-display); font-size: 0.84rem; font-weight: 500; line-height: 1.2;
    color: var(--text-secondary); background: transparent; border: 1px solid var(--border-default); border-radius: 999px; cursor: pointer;
    transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast); }
.fr-pick:hover:not(:disabled) { color: var(--text-primary); border-color: rgba(155, 163, 194, 0.3); }
.fr-pick:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.fr-pick.active { color: #fff; background: rgba(46, 49, 146, 0.55); border-color: var(--accent-light); }
.fr-pick:disabled { opacity: 0.42; cursor: not-allowed; }
.fr-picker .fr-picker-select { display: none; }   /* (0,2,0): beats .fr-field's display:flex */

/* ── the params bar ── */
.fr-params { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: flex-end;
    padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.fr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-family: var(--font-display); font-size: 0.74rem;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.fr-field > span { white-space: nowrap; }
.fr-field .filter-input, .fr-field .filter-select { text-transform: none; letter-spacing: normal; font-family: var(--font-body); }
.fr-field .filter-input.no-icon { padding-left: 12px; }
.fr-field-find { position: relative; flex: 1 1 240px; max-width: 360px; }
.fr-field-find .filter-input { width: 100%; box-sizing: border-box; }
.fr-check-field { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 0.86rem; color: var(--text-secondary); cursor: pointer; }
.fr-check-field input { width: 18px; height: 18px; accent-color: var(--accent-light); }
.fr-refresh { margin-left: auto; align-self: flex-end; min-height: 40px; }
.fr-hint { margin: 0; font-size: 0.8rem; color: var(--text-muted); text-transform: none; letter-spacing: normal; line-height: 1.45; max-width: 46ch; }
.fr-hint-bad { color: #F87171; }
.fr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; box-sizing: border-box; padding: 4px 6px 4px 12px; border-radius: 999px;
    font-family: var(--font-body); font-size: 0.86rem; text-transform: none; letter-spacing: normal; color: var(--text-primary);
    background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); max-width: 320px; }
.fr-chip > span { overflow-wrap: anywhere; }
.fr-chip-x { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; min-width: 32px; min-height: 32px; border-radius: 999px; }
.fr-chip-x:hover { color: var(--text-primary); background: rgba(148, 163, 194, 0.12); }
.fr-results-box { text-transform: none; letter-spacing: normal; }
.fr-results { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); }
.fr-result { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 10px; text-align: left; background: transparent; border: none;
    border-radius: calc(var(--radius-sm) - 2px); color: var(--text-primary); font-family: var(--font-body); font-size: 0.88rem; cursor: pointer; }
.fr-result:hover, .fr-result:focus-visible { background: rgba(46, 49, 146, 0.18); outline: none; }
.fr-result-sub { color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── the report: a document ── */
.fr-doc { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg); background: var(--bg-card);
    border: 1px solid var(--border-default); border-radius: var(--radius-lg); min-width: 0; transition: opacity var(--duration-normal); }
.fr-doc.fr-busy { opacity: 0.55; }
.fr-doc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-md);
    padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-default); }
.fr-doc-title-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 280px; }
.fr-kicker { font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-light); }
.fr-doc-title { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--text-primary); text-wrap: balance; }
.fr-doc-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; }
.fr-month { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 500; white-space: nowrap; }
.fr-month-open { color: #FBBF24; background: rgba(245, 158, 11, 0.13); }
.fr-month-closed { color: #4ADE80; background: rgba(34, 197, 94, 0.13); }
.fr-tools { display: flex; gap: var(--space-sm); align-items: center; margin-left: auto; }
.fr-export-menu[hidden] { display: none; }
.fr-export-menu { max-width: calc(100vw - 32px); }
.fr-error { margin: 0; color: #F87171; font-size: 0.9rem; line-height: 1.5; }
.fr-dormant-line { margin: 0; color: var(--text-primary); font-size: 0.95rem; }
.fr-loading { padding: var(--space-xl) 0; }

/* the books banner — figures may be incomplete */
.fr-banner { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: var(--radius-md);
    border: 1px solid rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.07); color: #FBBF24; font-size: 0.88rem; line-height: 1.5; }
.fr-banner strong { font-weight: 600; }
.fr-banner-list { margin: 0; padding-left: 1.2em; color: var(--text-secondary); }

/* ── a section ── */
.fr-section { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.fr-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.fr-h4 { margin: 0; font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; color: var(--text-primary); }
.fr-count { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fr-count-bad { color: #F87171; font-weight: 600; }
.fr-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 500; white-space: nowrap;
    color: #A5A8FF; background: rgba(99, 102, 241, 0.15); }
.fr-empty-line { margin: 0; padding: 12px 14px; color: var(--text-muted); font-size: 0.86rem;
    border: 1px dashed var(--border-default); border-radius: var(--radius-md); }
.fr-note { margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }
.fr-more { display: flex; justify-content: center; }
.fr-more .action-btn { min-height: 40px; min-width: 140px; }

.fr-scroll { position: relative; }
.fr-scroll::before, .fr-scroll::after { content: ''; position: absolute; top: 1px; bottom: 1px; width: 32px; pointer-events: none; opacity: 0;
    transition: opacity var(--duration-fast); z-index: 1; }
.fr-scroll::before { left: 1px; border-radius: var(--radius-md) 0 0 var(--radius-md); background: linear-gradient(to right, rgba(10, 13, 26, 0.92), rgba(10, 13, 26, 0)); }
.fr-scroll::after { right: 1px; border-radius: 0 var(--radius-md) var(--radius-md) 0; background: linear-gradient(to left, rgba(10, 13, 26, 0.92), rgba(10, 13, 26, 0)); }
.fr-scroll.fr-more-left::before, .fr-scroll.fr-more-right::after { opacity: 1; }
.fr-swipe { margin: -2px 0 0; color: var(--text-muted); font-size: 0.78rem; }
.fr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: rgba(17, 24, 39, 0.45); }
.fr-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.fr-table thead { background: rgba(46, 49, 146, 0.08); }
.fr-table th { padding: 10px 12px; text-align: left; vertical-align: bottom; font-family: var(--font-display); font-weight: 500; font-size: 0.72rem;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.fr-table th.fr-num, .fr-table th.fr-rtl { text-align: right; }
.fr-th { display: block; min-width: var(--fr-minw-desk, 0px); }   /* desk (minWidthStyle): a name whole, free text narrower */
.fr-text-table .fr-th { min-width: var(--fr-minw, 0px); }         /* no figure to keep on screen: every text column its full readable width */
.fr-xl { display: block; margin-top: 2px; font-size: 0.64rem; letter-spacing: 0.04em; color: #A5A8FF; }
.fr-table td { padding: 9px 12px; color: var(--text-secondary); vertical-align: top; white-space: normal; overflow-wrap: break-word;
    border-bottom: 1px solid rgba(148, 163, 194, 0.06); min-width: 0; }
.fr-table td.fr-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.fr-table td.fr-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* an Arabic name reads right-to-left and sits against the right of its column;
   a person's name in either script keeps the column's left edge */
.fr-table td.fr-rtl { text-align: right; }
.fr-table td.fr-auto { text-align: left; }
.fr-table td.fr-indent { padding-left: 32px; }
.fr-table tbody tr:hover td { background: rgba(46, 49, 146, 0.05); }

/* the pinned last figure column (pinnedKey → .fr-pin) lives in the PHONE block
   below — Run 52: on a desk it is inert (see the comment there). */

/* row styles: heading · subtotal · total · indent · muted (the spec's five) */
.fr-table tr.fr-row-heading td { padding-top: 14px; color: var(--text-primary); font-family: var(--font-display); font-weight: 600;
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(46, 49, 146, 0.06); }
.fr-table tr.fr-row-subtotal td { color: var(--text-primary); font-weight: 600; border-top: 1px solid rgba(155, 163, 194, 0.35); }
.fr-table tr.fr-row-total td { color: var(--text-primary); font-weight: 700; border-top: 1px solid rgba(155, 163, 194, 0.45);
    border-bottom: 3px double rgba(155, 163, 194, 0.55); }
.fr-table tr.fr-row-indent td { color: var(--text-secondary); font-size: 0.84rem; }
.fr-table tr.fr-row-muted td { color: var(--text-muted); font-style: italic; }
.fr-table tfoot tr td { background: rgba(46, 49, 146, 0.04); }

/* ── notes + the checks footer ── */
.fr-notes { margin: 0; padding-left: 1.2em; color: var(--text-secondary); font-size: 0.84rem; line-height: 1.55; display: flex; flex-direction: column; gap: 4px; }
.fr-checks { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--border-default); }
.fr-checks-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fr-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fr-check { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 12px; align-items: baseline; font-size: 0.86rem; line-height: 1.45; }
.fr-check-mark { font-family: var(--font-display); font-weight: 600; white-space: nowrap; }
.fr-check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fr-check-label { color: var(--text-secondary); }
.fr-check-detail { color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fr-check-ok .fr-check-mark { color: #4ADE80; }
.fr-check-syncing .fr-check-mark { color: #FBBF24; }
.fr-check-differs .fr-check-mark { color: #F87171; }
.fr-check-differs .fr-check-label { color: var(--text-primary); }
.fr-check-differs .fr-check-detail { color: #FCA5A5; }

/* ── phones ── */
@media (max-width: 760px) {
    .fr-picker-groups { display: none; }
    .fr-picker .fr-picker-select { display: flex; }
    .fr-picker-select .filter-select { width: 100%; }
    .fr-table { font-size: 0.82rem; }
    .fr-table th, .fr-table td { padding: 8px 10px; }
    .fr-table td.fr-indent { padding-left: 22px; }
    .fr-th { min-width: var(--fr-minw, 0px); }   /* phone: every text column holds a readable width */
    .fr-params { padding: 12px; }
    .fr-params .fr-field { flex: 1 1 140px; }
    .fr-params .fr-field .filter-input, .fr-params .fr-field .filter-select { width: 100%; box-sizing: border-box; }
    .fr-field-find, .fr-params .fr-field-wide { max-width: none; flex-basis: 100%; }
    .fr-refresh { margin-left: 0; width: 100%; }
    .fr-doc { padding: var(--space-md); gap: var(--space-md); }
    .fr-doc-title { font-size: 1.2rem; }
    .fr-tools { width: 100%; justify-content: flex-end; }
    .fr-check { grid-template-columns: 1fr; gap: 0; }
    /* Run 52 (combined check C3b): a date field may shrink to its card — the
       Ledger's shipped rule (ledger.css .ledger-filters .filter-date). admin.css
       gives .filter-date min-width: 140px, which pushed From / To past the params
       card's right edge on a 402-pt iPhone. min-width: 0 alone is enough in
       Chromium but NOT in WebKit: measured on the iOS simulator's Safari (iPhone
       17 Pro, 402 pt) the native date control kept a 194-px intrinsic width — From
       ran 30 px past the card, To over the Account field. Without the native
       appearance the field takes its column's width; tapping it still opens the
       native date picker (measured). */
    .fr-params .fr-field .filter-date { min-width: 0; -webkit-appearance: none; appearance: none; display: block; }
    /* the last figure column stays on screen while a wide table scrolls (pinnedKey)
       — an opaque cell, so the columns scrolling under it cannot show through; the
       right fade would only darken the pinned figure, so the left one alone says
       "there is more". #0F1525 / #12172E = the wrapper over the card over the page,
       composited, so the pinned column reads as the same surface; a row's tint rides
       on top as an image. When the table fits, sticky changes nothing.
       ⚠ Run 52 (run40-contract §23.4 R1): PHONES ONLY. On a desk the pin narrowed
       the visible width at 1180px and hid the columns a report compares (aging's
       Total owed under its memo column, a statement's Debit/Credit, Teacher pay's
       Payroll) — there the class is inert and the right fade returns. */
    .fr-table .fr-pin { position: sticky; right: 0; z-index: 1; }
    .fr-scroll.fr-more-right .fr-table .fr-pin, .fr-scroll.fr-more-left .fr-table .fr-pin { box-shadow: -10px 0 12px -10px rgba(0, 0, 0, 0.85); }
    .fr-table tbody tr > td.fr-pin, .fr-table tfoot tr > td.fr-pin { background-color: #0F1525; background-image: none; }
    .fr-table thead tr > th.fr-pin { background-color: #12172E; }
    .fr-table tr.fr-row-heading > td.fr-pin { background-image: linear-gradient(rgba(46, 49, 146, 0.06), rgba(46, 49, 146, 0.06)); }
    .fr-table tfoot tr > td.fr-pin.fr-pin { background-image: linear-gradient(rgba(46, 49, 146, 0.04), rgba(46, 49, 146, 0.04)); }
    .fr-table tbody tr:hover > td.fr-pin { background-image: linear-gradient(rgba(46, 49, 146, 0.05), rgba(46, 49, 146, 0.05)); }
    .fr-scroll.fr-pinned::after { display: none; }
}