/*
    Report hub Pack 3 — the report document, on screen and on paper.

    Every colour and font here comes from a --rpt-* custom property that
    ReportTheme.BuildStyle writes onto .report-document. Nothing is hardcoded,
    so the four presets (and any tenant override) restyle the whole document
    without touching this file.

    The PDF story is the browser's own print-to-PDF — no PDF package ships and
    none is added. That only works if the screen view is already the document,
    which is why this page runs on EmptyLayout with no nav or shell.

    ── WHY THIS IS A GLOBAL STYLESHEET, NOT ReportDocument.razor.css ──

    It WAS a .razor.css, and every rule in it was dead.

    Blazor CSS isolation rewrites a component stylesheet's selectors to carry a
    scope attribute — `.report-table` becomes `.report-table[b-abc123]` — and
    stamps that attribute onto elements the component's own MARKUP renders. The
    document body is injected as a MarkupString, which is raw HTML: it carries
    no scope attribute, so NOTHING here matched it. The branding, the table
    styling and — worst — every @media print rule silently did nothing, which
    is the entire point of the feature.

    ::deep would fix the descendant selectors, but not cleanly for the @page and
    bare-element print rules below. A plain global sheet is unambiguous, and the
    document is a self-contained surface that no other page shares.
*/

/* ── screen ──────────────────────────────────────────────────────────────── */

.report-toolbar {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: 1rem auto .5rem;
    max-width: 210mm;
    width: 100%;
}

.report-loading,
.report-denied {
    margin: 3rem auto;
    max-width: 40rem;
    text-align: center;
}

.report-document {
    /* A4 content width, so what is on screen is the shape that prints. */
    max-width: 210mm;
    width: 100%;
    margin: 0 auto 3rem;
    background: var(--rpt-page);
    color: var(--rpt-ink);
    font-family: var(--rpt-body-font);
    box-shadow: 0 1px 3px rgb(0 0 0 / .18);
}

.report-cover {
    /* Css mode emits class names and NO inline style, so the accent has to
       reach this sheet as a token. --rpt-on-accent is the computed readable
       foreground for it (white is only 3.44:1 on some brand colours), written
       by ReportTheme.BuildStyle alongside --rpt-accent. */
    padding: 32px;
    background: var(--rpt-accent);
    color: var(--rpt-on-accent);
    break-after: page;
}

.report-cover__title {
    margin: .5rem 0 0;
    font-family: var(--rpt-heading-font);
    font-size: 28px;
}

.report-cover__tenant,
.report-cover__meta {
    font-size: 13px;
    opacity: .85;
}

.report-section {
    padding: 24px;
    break-inside: avoid;
}

.report-section__heading {
    margin: 0 0 4px;
    font-family: var(--rpt-heading-font);
    color: var(--rpt-ink);
    font-size: 20px;
}

.report-section__meta {
    margin-bottom: 16px;
    color: var(--rpt-muted);
    font-size: 13px;
}

/* ── table ───────────────────────────────────────────────────────────────── */

.report-table {
    width: 100%;
    border-collapse: collapse;
}

.report-th {
    padding: 8px 10px;
    text-align: right;
    background: var(--rpt-table-header);
    color: var(--rpt-ink);
    border-bottom: 2px solid var(--rpt-rule);
    font-weight: 600;
}

.report-th--label { text-align: left; }

/* The Corporate preset puts the header row on the accent; the other presets
   use the neutral table-header surface, which Mono flattens to the page. Css
   mode emits no inline style, so the PRESET has to reach this sheet as a
   modifier class on the document root. */
.report-document--corporate .report-th {
    background: var(--rpt-accent);
    color: var(--rpt-on-accent);
}

.report-td {
    padding: 7px 10px;
    text-align: right;
    border-bottom: 1px solid var(--rpt-rule);
}

.report-td--label { text-align: left; }

.report-row--band { background: var(--rpt-band); }

.report-empty {
    padding: 12px;
    color: var(--rpt-muted);
}

.report-footer {
    padding: 0 24px 24px;
    color: var(--rpt-muted);
    font-size: 12px;
}

/* A wide table must scroll inside its own box rather than pushing the page
   sideways; print re-flows it (below), so this is a screen-only concession. */
@media screen {
    .report-table-scroll { overflow-x: auto; }
}

/* ── print ───────────────────────────────────────────────────────────────── */

@media print {
    @page {
        size: A4;
        margin: 18mm 14mm;
    }

    /* The document IS the page: drop the screen framing entirely. */
    .report-document {
        max-width: none;
        margin: 0;
        box-shadow: none;
    }

    /* Toolbar, back link — anything that only makes sense on screen. */
    .report-nochrome { display: none !important; }

    .report-cover { break-after: page; }
    .report-section { break-inside: avoid; }

    /* THE reason no PDF library is needed: a table split across pages repeats
       its header and footer rows automatically. */
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr { break-inside: avoid; }

    /* Backgrounds are off by default when printing. The banding and the header
       fill carry meaning here (they are how a long table stays readable), so
       ask for them — and accept that a user who declines still gets a correct,
       if flatter, document, because the rules carry the structure too. */
    .report-table,
    .report-cover,
    .report-th,
    .report-row--band {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* The Dark preset is a SCREEN look. Printing it would empty a toner
       cartridge for one report, so paper always gets the light palette.

       This must reset the TOKENS, not just background/color on the root.
       Every descendant reads var(--rpt-ink), var(--rpt-page), var(--rpt-rule)
       and friends from the inline style attribute — so overriding only the two
       root properties left the dark values in play everywhere below, printing
       a near-white title onto white paper. Re-pointing the tokens fixes the
       whole subtree at once, which is the reason they exist. */
    .report-document {
        --rpt-page: #ffffff;
        --rpt-ink: #111827;
        --rpt-muted: #4b5563;
        --rpt-rule: #d1d5db;
        --rpt-table-header: #f3f4f6;
        --rpt-band: #f9fafb;
        background: #ffffff !important;
        color: #111827 !important;
    }

    /* --rpt-accent and --rpt-on-accent are deliberately NOT re-pointed: they
       are a matched pair (a fill and the foreground computed to read on it),
       so changing one without the other is how the cover becomes unreadable.
       Only the neutral tokens above need re-pointing for paper. */
}

@media (prefers-reduced-motion: reduce) {
    .report-document * {
        animation: none !important;
        transition: none !important;
    }
}

/* ── charts (Pack 4) ─────────────────────────────────────────────────────── */

.report-chart {
    margin: 0 0 20px;
}

.report-chart__svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.report-chart__svg--donut {
    max-width: 260px;
    margin: 0 auto;
    display: block;
}

.report-chart__label {
    font-size: 11px;
    fill: var(--rpt-muted);
}

.report-chart__value {
    font-size: 11px;
    fill: var(--rpt-ink);
    font-weight: 600;
}

.report-chart__note {
    margin-top: 6px;
    font-size: 11px;
    color: var(--rpt-muted);
}

/* The accessible data table is the chart's non-visual equivalent. On PAPER the
   table below the chart already carries every row, so this would duplicate it —
   it is marked report-nochrome and the print block hides it. */
.report-chart__data {
    margin-top: 8px;
    font-size: 12px;
    color: var(--rpt-muted);
}

.report-chart__data summary {
    cursor: pointer;
}

.report-chart__table th,
.report-chart__table td {
    padding: 3px 8px;
    text-align: left;
    border-bottom: 1px solid var(--rpt-rule);
}

@media print {
    /* A chart must not be split across a page break — half a bar chart is
       worse than putting it on the next page whole. */
    .report-chart { break-inside: avoid; }
}