/* ==============================================================================================
   REPORT PRINT DOCUMENT
   The paper half of a report page. A report on screen is a workspace -- employee pickers, date
   ranges, expand chevrons, row action menus -- and none of that means anything on a sheet. So a
   page that supports printing renders a SECOND layout: <ReportPrintDocument>, hidden on screen
   and the only thing @media print shows. The screen layout opts out by carrying
   .report-print-hidden (render it with <ReportScreenView> rather than typing the class).

   The direction is the accountant's working paper: one masthead, hairline ruling, figures in
   tabular columns, single-rule-above / double-rule-below totals, and a signature block at the
   foot. Every mark is a border or a glyph -- nothing depends on a fill being printed -- so the
   sheet reads the same whether or not the driver has "background graphics" ticked. That matters
   here: ProfitLossTable renders net profit as .text-white on .bg-green, which without this
   printed the single most important number on a P&L as nothing at all.

   GLOBAL, not scoped. The chrome comes from ReportPrintDocument while the sections come from
   each page, so the rules must cross a component boundary Blazor's CSS isolation will not.

   The @page box (paper size, margins) is deliberately NOT here. Blazor cannot scope an at-rule
   and a bare @page in Stafy.RxErp.Web.ServerApp.styles.css would re-size every printed page in
   the app, the 80mm POS receipts included -- so printSnapshot() injects it for one print instead.

   Ported from rx.pos/source/Stafy.Web.Pos.Server/wwwroot/css/report-print.css. Keep the epd-*
   names in step with it; the two products fix the same paper bugs.

   TWO RULES FOR PAGE AUTHORS
     1. Never nest a ReportPrintDocument inside .table-responsive -- Bootstrap sets overflow:auto
        on it and the paper is clipped to one screenful.
     2. Never put an @page rule in a .razor.css. Pass one of the ReportPrintDocument constants.
   ============================================================================================ */

/* Outside any media query on purpose: the paper layout never shows on screen. */
.report-print-doc {
    display: none;
}

@media print {

    /* -- 1. App shell ---------------------------------------------------------------------- */
    /* The workspace does not go to paper; the document replaces it wholesale. */
    .report-print-hidden {
        display: none !important;
    }

    html, body {
        background: #fff !important;
    }

    body {
        margin: 0;
    }

    /* MainNavigation, TablerHeader and ReleaseVersionBadge already carry d-print-none. These
       do not, and every one of them can land on a sheet: the reconnect modal and error bar are
       rendered by _Host.cshtml, the containers by MainLayout, and the overlay widgets escape
       their component to document.body where no d-print-none can reach them. */
    #components-reconnect-modal,
    #blazor-error-ui,
    .modal, .modal-backdrop,
    .offcanvas, .offcanvas-backdrop,
    .toast-container, .toasts, .toast,
    [data-tippy-root], .tippy-box,
    .introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer, .introjs-tooltip,
    .selectize-dropdown,
    .dropdown-menu,
    .daterangepicker,
    .litepicker,
    .dz-hidden-input {
        display: none !important;
    }

    /* Tabler's frame. .page is min-height:100% and .container-xl carries a max-width and
       gutters; on paper both just push the measure in and strand the last rows on a second
       sheet. Hand the document the full text block instead. */
    .page {
        background: none !important;
        border: 0 !important;
        display: block !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    .content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .container, .container-sm, .container-md, .container-lg,
    .container-xl, .container-xxl, .container-fluid {
        margin: 0 !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: auto !important;
    }

    /* -- 2. The document ------------------------------------------------------------------- */
    .report-print-doc {
        color: #111111;
        display: block;
        /* Kanit is already loaded by _Host.cshtml and is the only bundled face with Thai
           coverage -- a th-TH letterhead falls back to tofu without it. */
        font-family: "Kanit", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-size: 8.6pt;
        line-height: 1.4;
    }

    .report-print-doc h1,
    .report-print-doc h2,
    .report-print-doc p,
    .report-print-doc dl,
    .report-print-doc dd,
    .report-print-doc ol,
    .report-print-doc ul {
        margin: 0;
        padding: 0;
    }

    /* Nothing inside the document may depend on a fill, a shadow or the dark theme. Backgrounds
       are dropped by the driver anyway; shadows print as grey mud. */
    .report-print-doc * {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Bootstrap/Tabler colour utilities are themselves !important, so .text-white on a
       .bg-green total row wins over any plain rule and prints white on white. Neutralise the
       utilities only -- not the epd-* greys below, which none of these selectors match. */
    .report-print-doc [class*="text-"],
    .report-print-doc [class*="bg-"],
    .report-print-doc [class*="badge"] {
        border-color: currentColor !important;
        color: inherit !important;
    }

    /* A table's hairlines belong to the table, not to that neutraliser. It matches class names by
       substring, so the layout-only utilities -- .text-nowrap, .text-end, .text-truncate, which
       carry no colour at all -- are caught by it too, and a cell wearing one printed its hairline
       in currentColor: near-black. One column then ruled every row while its neighbours stayed
       grey (the account statement's DATE column, and the timesheet's). Ordinary body rows only;
       the week rule, the total row and the flagged row keep the heavier borders they ask for. */
    .report-print-doc .epd-table tbody tr:not(.epd-week-rule):not(.epd-total-row):not(.epd-grand-total-row):not(.epd-row-flag) td {
        border-bottom-color: #e4e4e4 !important;
    }

    /* -- 3. Masthead ----------------------------------------------------------------------- */
    /* Thick rule under the masthead, thin rule under the run line: the classic statement
       pairing, and it costs nothing but borders. */
    .epd-masthead {
        align-items: start;
        border-bottom: 2pt solid #111111;
        display: grid;
        gap: 12mm;
        grid-template-columns: minmax(0, 1fr) auto;
        padding-bottom: 4mm;
    }

    .report-print-doc .epd-eyebrow {
        color: #6b6b6b !important;
        font-size: 6.6pt;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }

    .epd-title {
        font-size: 19pt;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.15;
        margin-top: 1.5mm !important;
    }

    .epd-issuer-name {
        display: block;
        font-size: 10pt;
        font-weight: 700;
        margin-top: 3mm !important;
    }

    .report-print-doc .epd-issuer-line {
        color: #5c5c5c !important;
        display: block;
        font-size: 7.6pt;
        max-width: 85mm;
    }

    .epd-docmeta {
        text-align: right;
    }

    /* Outlined, not filled: a printer that drops backgrounds must never drop the one word that
       says whether this document was signed off -- or that it is a DRAFT payslip. */
    .epd-stamp {
        border: 1.4pt solid currentColor;
        display: inline-block;
        font-size: 9pt;
        font-weight: 800;
        letter-spacing: 0.16em;
        padding: 1.6mm 4mm;
        text-transform: uppercase;
    }

    .report-print-doc .epd-stamp.is-final { color: #14312e !important; }
    .report-print-doc .epd-stamp.is-draft { color: #8a5a00 !important; }

    .epd-docmeta-list {
        display: grid;
        gap: 0 6mm;
        grid-template-columns: auto auto;
        justify-content: end;
        margin-top: 4mm !important;
        text-align: right;
    }

    .report-print-doc .epd-docmeta-list dt {
        color: #6b6b6b !important;
        font-size: 6.6pt;
        font-weight: 700;
        letter-spacing: 0.14em;
        padding-top: 0.8mm;
        text-transform: uppercase;
    }

    .epd-docmeta-list dd {
        font-size: 8.4pt;
        font-weight: 700;
        padding-top: 0.6mm;
    }

    .report-print-doc .epd-runline {
        border-bottom: 0.4pt solid #c9c9c9;
        color: #6b6b6b !important;
        font-size: 7.2pt;
        letter-spacing: 0.02em;
        padding: 1.6mm 0 2.4mm;
    }

    /* -- 4. Sections ----------------------------------------------------------------------- */
    .epd-section {
        margin-top: 7mm;
    }

    /* A heading orphaned at the foot of a sheet is the one break that always reads as a bug. */
    .epd-section-head {
        border-bottom: 0.8pt solid #111111;
        break-after: avoid;
        font-size: 7.4pt;
        font-weight: 800;
        letter-spacing: 0.18em;
        padding-bottom: 1.2mm;
        text-transform: uppercase;
    }

    .epd-section-avoid-break {
        break-inside: avoid;
    }

    /* -- 5. Summary figures ---------------------------------------------------------------- */
    /* Horizontal ruling only. Vertical rules would need per-row nth-child arithmetic that a
       full-width lead figure breaks the moment a figure is added or dropped. */
    .epd-figures {
        /* Closing rule on the container, not just the cells: a figure count that is not a
           multiple of the column count leaves the last row part-filled, and cell borders alone
           stop the rule dead partway across. On a full row it lands on the same pixel as the
           cell borders, so it never reads as a double line. */
        border-bottom: 0.4pt solid #dcdcdc;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .epd-figures.is-four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .epd-figure {
        border-bottom: 0.4pt solid #dcdcdc;
        display: block;
        padding: 2.6mm 4mm 2.6mm 0;
    }

    .epd-figure.is-lead { grid-column: 1 / -1; }

    .report-print-doc .epd-figure-label {
        color: #6b6b6b !important;
        display: block;
        font-size: 6.6pt;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .epd-figure-value {
        display: block;
        font-size: 13pt;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-top: 0.8mm;
    }

    .epd-figure.is-lead .epd-figure-value { font-size: 20pt; }

    .report-print-doc .epd-figure-note {
        color: #5c5c5c !important;
        display: block;
        font-size: 7pt;
        margin-top: 0.6mm;
    }

    /* -- 6. Schedules ---------------------------------------------------------------------- */
    .epd-table {
        border-collapse: collapse;
        margin-top: 2mm;
        width: 100%;
    }

    /* A schedule that runs past the foot of a sheet carries its column names onto the next. */
    .epd-table thead {
        display: table-header-group;
    }

    /* The totals row must NOT do the same. As a table-footer-group the browser repeats it at
       the bottom of every page fragment, so a four-page statement prints a full-period "Total"
       after row 19 -- which reads as a subtotal of the rows above it and is wrong by three
       pages of entries. As a row group it appears once, where a total belongs. */
    .epd-table tfoot {
        display: table-row-group;
    }

    .epd-table tr {
        break-inside: avoid;
    }

    .report-print-doc .epd-table th {
        border-bottom: 0.4pt solid #111111;
        color: #4a4a4a !important;
        font-size: 6.4pt;
        font-weight: 700;
        letter-spacing: 0.12em;
        padding: 1.6mm 2mm 1.4mm 0;
        text-align: left;
        text-transform: uppercase;
        vertical-align: bottom;
    }

    .epd-table td {
        border-bottom: 0.4pt solid #e4e4e4;
        padding: 1.5mm 2mm 1.5mm 0;
        vertical-align: top;
    }

    .epd-table th:last-child,
    .epd-table td:last-child { padding-right: 0; }

    /* Single rule above, double rule below: how a ledger has always closed a column. */
    .epd-table tfoot td {
        border-bottom: 2.4pt double #111111;
        border-top: 0.8pt solid #111111;
        font-weight: 800;
        padding-bottom: 1.8mm;
        padding-top: 1.8mm;
    }

    /* Figures only. A column heading is a label, not a number. */
    td.epd-num,
    td.epd-mono {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* Both selectors have to out-specify `.epd-table th`, which sets text-align:left for the
       label columns. `.epd-num` alone loses that fight and the heading drifts left of the
       column it names. */
    .epd-table td.epd-num,
    .epd-table th.epd-num { text-align: right; }
    .epd-table th.epd-num { white-space: nowrap; }

    .report-print-doc .epd-col-no { color: #8c8c8c !important; text-align: right; width: 6mm; }
    .epd-col-share { width: 14mm; }
    .epd-col-bar { width: 34mm; }

    /* Share bar. A border, not a background -- backgrounds are the first thing a print driver
       throws away, and a row of invisible bars is worse than no bars at all. */
    .epd-bar {
        border-bottom: 3.6pt solid #14312e;
        display: block;
        margin-top: 1.4mm;
        min-width: 0.6mm;
    }

    /* -- 7. Row kinds ---------------------------------------------------------------------- */
    /* Screen rows carry their meaning in a background tint (bg-red-lt absent, bg-cyan-lt leave,
       bg-azure-lt special duty...). None of that survives the driver, so paper re-states it in
       the Status column and marks the row with a rule or an indent instead. */
    .report-print-doc .epd-row-muted td {
        color: #5c5c5c !important;
        font-style: italic;
    }

    .epd-row-flag td:first-child {
        border-left: 2pt solid currentColor;
        padding-left: 1.5mm;
    }

    /* Closes a calendar week without the full-width orange bar the screen draws. */
    .epd-week-rule td { border-bottom: 1.2pt solid #111111; }

    .report-print-doc .epd-subrow td {
        color: #4a4a4a !important;
        font-size: 7.6pt;
        font-style: italic;
    }

    .epd-subrow td:first-child { padding-left: 4mm; }

    .epd-total-row td {
        border-top: 0.8pt solid #111111;
        font-weight: 800;
    }

    .epd-grand-total-row td {
        border-bottom: 2.4pt double #111111;
        border-top: 0.8pt solid #111111;
        font-weight: 800;
    }

    /* -- 8. Side-by-side schedules --------------------------------------------------------- */
    /* Two narrow schedules side by side fill the measure; stacked they leave two thirds of the
       sheet white. */
    .epd-columns {
        display: grid;
        gap: 10mm;
        grid-template-columns: 1fr 1fr;
    }

    .epd-columns .epd-section { break-inside: avoid; }

    /* -- 9. Prose blocks ------------------------------------------------------------------- */
    .epd-exceptions {
        list-style: decimal;
        margin-top: 2mm !important;
        padding-left: 5mm !important;
    }

    .epd-exceptions li {
        border-bottom: 0.4pt solid #e4e4e4;
        break-inside: avoid;
        padding: 1.4mm 0;
    }

    .report-print-doc .epd-footnote {
        color: #5c5c5c !important;
        font-size: 7.4pt;
        margin-top: 2mm !important;
    }

    .epd-footnote.is-warning { font-weight: 700; }

    /* Marker legend. Every glyph the rows use (dagger, caret, arrow) is spelled out here, so
       the sheet explains itself to a reader who has never seen the screen. */
    .report-print-doc .epd-legend {
        color: #5c5c5c !important;
        display: flex;
        flex-wrap: wrap;
        font-size: 6.8pt;
        gap: 1mm 6mm;
        margin-top: 2mm !important;
    }

    .epd-notes {
        margin-top: 2mm !important;
        white-space: pre-wrap;
    }

    /* -- 10. Sign-off ---------------------------------------------------------------------- */
    /* A document nobody signs is a printout, not a record. */
    .epd-signoff {
        break-inside: avoid;
        display: grid;
        gap: 10mm;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 12mm;
    }

    .epd-signoff.is-two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .epd-sign-rule {
        border-bottom: 0.6pt solid #111111;
        display: block;
        height: 13mm;
    }

    .epd-sign-role {
        display: block;
        font-size: 8pt;
        font-weight: 700;
        margin-top: 1.4mm;
    }

    .report-print-doc .epd-sign-hint {
        color: #8c8c8c !important;
        display: block;
        font-size: 6.6pt;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .report-print-doc .epd-colophon {
        border-top: 0.4pt solid #c9c9c9;
        color: #8c8c8c !important;
        display: flex;
        flex-wrap: wrap;
        font-size: 6.6pt;
        gap: 2mm 8mm;
        justify-content: space-between;
        margin-top: 8mm;
        padding-top: 2mm;
    }
}