/* ═══════════════════════════════════════════════════════════════════════════
   ▲ ENGINEER MATE — report preview (paper on screen)

   Loaded only on the screen that shows the live document preview. The PDF does
   NOT use this file: dompdf gets its own interpolated stylesheet inside
   exports/project-report.blade.php.

   ┌─ THE RULE THIS FILE EXISTS TO ENFORCE ───────────────────────────────────┐
   │ A .doc-page is PAPER. It is white, its type is black, and it does not     │
   │ follow the app's light/dark theme — because the sheet it is previewing    │
   │ will be printed on white and emailed to a client. A dark-mode preview     │
   │ would be a preview of a document that does not exist.                     │
   │                                                                          │
   │ What DOES change with the theme is everything around the paper: the       │
   │ desk it sits on, the toolbar, the shadow. That is why --page-desk is a    │
   │ semantic token and every colour inside .doc-page is a literal.            │
   └──────────────────────────────────────────────────────────────────────────┘

   The report COLOUR SCHEME arrives as five CSS custom properties written onto
   the preview root by Blade: --rpt-dark, --rpt-mid, --rpt-head, --rpt-soft,
   --rpt-rule. Changing the scheme re-writes those five values and the whole
   sheet follows, with no re-render of the document itself.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The desk ─────────────────────────────────────────────────────────────── */
.doc-wrap {
    background: var(--ap-surface-sunk, #eeeeeb);
    border: 1px solid var(--ap-border, #e4e4e1);
    border-radius: var(--ap-radius-sm, .35rem);
    padding: 1rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 78vh;
}

[data-theme="dark"] .doc-wrap { background: #0a0a0a; }

/* Scaling wrapper. A4 is 210 mm ≈ 794 px, which does not fit a phone or a
   narrow split pane, so the sheet is scaled rather than reflowed — reflowing
   would stop it being a preview of the printed page. */
.doc-scale {
    transform-origin: top center;
    transition: transform 140ms ease;
}

/* ── Why box-sizing is declared HERE ──────────────────────────────────────────
   With `table-layout: fixed` the declared column widths are authoritative —
   but only for the CONTENT box unless told otherwise. Cell padding and the
   collapsed border are then ADDED on top, so thirteen columns each gain ~6 px
   and the table runs off the right edge of a portrait sheet even though the
   percentages sum to exactly 100.

   This stylesheet also cannot assume the global `* { box-sizing: border-box }`
   from apex-pylon.css is present: the preview is sometimes rendered standalone
   (docs/report-preview-sample.html) and the PDF never loads that file at all.
   Declaring it on the document subtree makes the sheet correct on its own.  */
.doc-page, .doc-page *, .dtbl, .dtbl th, .dtbl td { box-sizing: border-box; }

/* ── The paper ────────────────────────────────────────────────────────────── */
.doc-page {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto 14px;
    background: #ffffff;
    color: #111111;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 12px 32px rgba(0, 0, 0, .12);
}

.doc-page-land { width: 297mm; min-height: 210mm; }

.doc-body { position: absolute; top: 13mm; left: 18mm; right: 18mm; bottom: 18mm; overflow: hidden; }
.doc-page-land .doc-body { top: 11mm; left: 12mm; right: 12mm; bottom: 15mm; }
.doc-page-land .doc-ftr, .doc-page-land .doc-ftr-blank { left: 12mm; right: 12mm; }
.doc-inner { position: relative; z-index: 1; }

.doc-logo-img { max-height: 16mm; max-width: 60mm; margin-bottom: 3px; }

/* ── Letterhead, section bar, footer ──────────────────────────────────────── */
.doc-head-block { text-align: center; margin-bottom: 5px; }
.doc-logo { font-size: 21px; font-weight: 900; letter-spacing: .05em; color: var(--rpt-dark); line-height: 1.15; }
.doc-logo-sub { font-size: 9px; color: #555; }

.doc-hdr {
    background: var(--rpt-dark);
    color: #ffffff;
    text-align: center;
    padding: 7px 10px;
    font-size: 13.5px;
    font-weight: 900;
    letter-spacing: .07em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.doc-hdr-sm { font-size: 10px; letter-spacing: .04em; padding: 6px 8px; }

.doc-ftr {
    position: absolute; bottom: 5mm; left: 18mm; right: 18mm;
    background: var(--rpt-dark); color: #ffffff; text-align: center;
    padding: 4px 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
}

.doc-ftr-blank { position: absolute; bottom: 5mm; left: 18mm; right: 18mm; height: 8mm; }

/* Tiled, not one big diagonal: a single centred watermark is trivially cropped
   out of a screenshot. Black at 5.5 % — never the scheme colour and never
   yellow, which vanishes at watermark opacity and on a mono laser. */
.doc-wm {
    position: absolute;
    font-size: 13px; font-weight: 900;
    color: #000000; opacity: .055;
    pointer-events: none; user-select: none;
    letter-spacing: .18em;
    transform: rotate(-38deg);
    white-space: nowrap;
    z-index: 0;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
.doc-page h2 {
    font-size: 15px; margin: 8px 0 3px; font-weight: 900;
    text-transform: uppercase; color: var(--rpt-dark);
    border-bottom: 2.5px solid var(--rpt-rule);
    padding-bottom: 3px; letter-spacing: .08em;
}

.doc-page h3 {
    font-size: 13.5px; margin: 8px 0 3px; font-weight: 900;
    color: var(--rpt-mid); letter-spacing: .04em;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.dtbl { width: 100%; border-collapse: collapse; margin: 3px 0 7px; font-size: 11.5px; }
.dtbl th, .dtbl td { border: 1px solid #aaa; padding: 3.5px 5px; vertical-align: middle; text-align: center; }
.dtbl th { background: var(--rpt-head); font-weight: 900; color: var(--rpt-dark); }
.dtbl td.tal, .dtbl th.tal { text-align: left; }
.dtbl td.tar { text-align: right; }
.dtbl tr:nth-child(even) td { background: var(--rpt-soft); }

/* Mirrors the PDF exactly — fixed layout, percentage widths, same font step.
   If these two ever diverge the preview stops being a preview. */
.dtbl.sched { font-size: 10px; table-layout: fixed; width: 100%; max-width: 100%; }
.dtbl.sched th, .dtbl.sched td { padding: 2.5px 3px; overflow: hidden; }
.dtbl.sched th { line-height: 1.15; }
.dwrap { word-wrap: break-word; overflow-wrap: break-word; }

.doc-compact .dtbl { font-size: 9.8px; margin: 2px 0 4px; }
.doc-compact .dtbl th, .doc-compact .dtbl td { padding: 1.9px 4px; line-height: 1.3; }
.doc-compact h2 { font-size: 13px; margin: 6px 0 2px; }
.doc-compact .dfbox { font-size: 9.2px; line-height: 1.45; padding: 5px 8px; margin: 2px 0 3px; }

.dsum-total td { background: var(--rpt-head) !important; font-weight: 900; }
.dhl td { background: #fde68a !important; font-weight: 900 !important; }
.dmuted td { color: #777; }

/* ── Callouts ─────────────────────────────────────────────────────────────── */
.dfbox {
    background: var(--rpt-soft);
    border-left: 3.5px solid var(--rpt-dark);
    padding: 6px 10px; margin: 3px 0 6px;
    font-size: 11px; line-height: 1.6;
}

/* Written specifications are set at the PAPER's size (project-report.blade.php:
   8.8 px, 7.6 px notes, 4 × 7 px padding). The sheets are cut by measured height
   (ReportDocument::specChunks); at the 10.5 px this used to be, the preview drew
   every block ~19 % taller than the paper and the last one on a sheet fell under
   the footer, where overflow:hidden cut it off. */
.dspec {
    border-left: 3px solid var(--rpt-mid);
    background: var(--rpt-soft);
    padding: 4px 7px; margin: 3px 0;
    font-size: 8.8px; line-height: 1.45;
}
.dspec .dnote-inline { font-size: 7.6px; }

.dcallout {
    border: 1px solid var(--rpt-rule);
    border-left: 3px solid var(--rpt-dark);
    background: var(--rpt-soft);
    padding: 5px 8px; margin-top: 6px; font-size: 10px;
}

.dwarn {
    border: 1px solid #c0392b; background: #fdecec;
    padding: 5px 8px; margin-top: 6px; font-size: 10px; color: #8c2318;
}

.dnote { font-size: 9.5px; color: #444; margin: 2px 0 4px; line-height: 1.5; }
.dnote-inline { font-size: 9px; color: #6b7280; }

/* Verdicts stay OUTSIDE the scheme: an engineering finding must read the same
   whichever colour the firm prints in. Each also carries a glyph, so the
   verdict survives greyscale and colour-blindness. */
.dpass { color: #15803d; font-weight: bold; }
.dfail { color: #c0392b; font-weight: bold; }

/* ── Signatures ───────────────────────────────────────────────────────────── */
.dsig { width: 100%; border-collapse: collapse; margin-top: 6px; }
.dsig td { width: 50%; padding: 14px 10px 4px; vertical-align: bottom; }
.dsig-line { border-top: 1px solid var(--rpt-dark); margin-top: 34px; padding-top: 3px; font-weight: bold; font-size: 11px; }
.dsig-cap { font-size: 9px; color: #4a5568; }

/* ── Diagram ──────────────────────────────────────────────────────────────── */
.dsld { text-align: center; overflow: visible; }

/* The box is sized in mm by ReportDocument::fitDiagram(); the SVG inside
   stretches to fill it. Same millimetre figures the PDF uses, so what is on
   screen is the size that prints. */
.dsld-box { margin: 0 auto; }
.dsld-box svg { width: 100%; height: 100%; display: block; }
.dsld img { display: block; margin: 0 auto; }
.dsld-note { margin-top: 5px; text-align: center; }

/* ── Preview toolbar ──────────────────────────────────────────────────────── */
.doc-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .6rem .75rem;
    background: var(--ap-surface, #fff);
    border: 1px solid var(--ap-border, #e4e4e1);
    border-bottom: 0;
    border-radius: var(--ap-radius-sm, .35rem) var(--ap-radius-sm, .35rem) 0 0;
}

.doc-toolbar + .doc-wrap { border-radius: 0 0 var(--ap-radius-sm, .35rem) var(--ap-radius-sm, .35rem); }

/* Swatches for the scheme picker. Each shows the three roles that carry the
   sheet, so the choice is made by looking rather than by reading a name. */
.rpt-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }

.rpt-swatch {
    display: inline-flex; flex-direction: column;
    width: 44px; height: 30px;
    border-radius: 4px; overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer; padding: 0;
    background: none;
    transition: border-color 120ms ease, transform 120ms ease;
}

.rpt-swatch:hover { transform: translateY(-1px); }
.rpt-swatch .s-dark { flex: 2; }
.rpt-swatch .s-head { flex: 1; }
.rpt-swatch.active { border-color: var(--ap-accent, #ffd400); }
.rpt-swatch:focus-visible { outline: 3px solid var(--ap-accent, #ffd400); outline-offset: 2px; }

.doc-pagecount { font-size: .78rem; color: var(--ap-text-muted, #5c5c58); }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .doc-wrap { padding: .5rem; max-height: 64vh; }
    .doc-toolbar { padding: .5rem; }
    .rpt-swatch { width: 38px; height: 26px; }
}

/* ── Printing the preview directly ────────────────────────────────────────── */
@media print {
    body * { visibility: hidden; }
    .doc-wrap, .doc-wrap * { visibility: visible; }
    .doc-wrap {
        position: absolute; inset: 0;
        max-height: none; overflow: visible;
        padding: 0; border: 0; background: #fff;
    }
    .doc-scale { transform: none !important; }
    .doc-page { box-shadow: none; margin: 0; page-break-after: always; }
    .doc-toolbar { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEME PICKER — used in the designer AND in the preview toolbar.

   Lives in this file rather than in apex-pylon.css because it is part of the
   report surface, and because the swatch fills are literal scheme colours
   rather than app tokens: a swatch has to show the actual printed colour, so
   it is the one place in the UI where a non-brand hue is painted on purpose.
   ═══════════════════════════════════════════════════════════════════════════ */

.rpt-picker { min-width: 0; }

.rpt-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }

.rpt-swatch {
    display: inline-flex; flex-direction: column;
    width: 46px; height: 32px;
    border-radius: 4px; overflow: hidden;
    border: 2px solid var(--ap-border, #e4e4e1);
    cursor: pointer; padding: 0; background: none;
    transition: border-color 120ms ease, transform 120ms ease;
}

.rpt-swatch:hover { transform: translateY(-1px); border-color: var(--ap-text-muted, #5c5c58); }

/* Two bars: the section-bar fill on top, the table-header fill beneath. Those
   are the two colours that actually carry the sheet, so the swatch previews
   the decision rather than just labelling it. */
.rpt-swatch .s-dark { flex: 2; }
.rpt-swatch .s-head { flex: 1; }

.rpt-swatch.active {
    border-color: var(--ap-accent, #ffd400);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ap-accent, #ffd400) 35%, transparent);
}

.rpt-swatch:focus-visible { outline: 3px solid var(--ap-accent, #ffd400); outline-offset: 2px; }

.rpt-current {
    display: flex; align-items: center; gap: .4rem;
    margin-top: .45rem;
    font-size: .82rem;
    color: var(--ap-text, #141414);
}

.rpt-dot {
    width: 12px; height: 12px; border-radius: 3px;
    border: 1px solid var(--ap-border-strong, #cfcfca);
    flex-shrink: 0;
}

/* Bigger targets on a phone — a 32 px swatch is under the 44 px floor. */
@media (max-width: 767.98px) {
    .rpt-swatch { width: 52px; height: 40px; }
}