/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/*
 * public/print.css — the Enterprise Print Layout (operator governance
 * directive 2026-08-23). One stylesheet for every printed page of the
 * panel: a MitaBase letterhead, the client's own branding (logo + name
 * from /api/branding, the same [data-brand-*] hooks the navbar uses),
 * the Etmita copyright in the footer of EVERY page, and nothing from
 * the web chrome — no sidebar, navbar, buttons, menus, toasts or
 * tooltips. Paper is white, type is ink, data is what gets printed.
 *
 * Loaded for all media: the `.print-only` letterhead/footer live in
 * index.html and must stay hidden on screen; everything else is inside
 * @media print. Repetition per page: app.js (beforeprint) moves the main
 * column into one `table.print-frame` whose <thead> is the letterhead
 * (a table header repeats on every printed page; a position:fixed
 * letterhead overlapped the continuation pages) and whose <tfoot> is an
 * empty spacer holding the room for the footer, which is fixed to the
 * bottom edge of every page. All of it verified against real PDFs on
 * 2026-08-23 — see scripts/test-print.js for the pinned findings.
 */

.print-only { display: none !important; }

@media print {
  @page { size: A4 portrait; margin: 12mm 12mm 12mm 12mm; }
  /* the Planung grid (a column per driver) gets the wide side of the sheet */
  @page wide { size: A4 landscape; margin: 10mm 12mm; }
  html.print-wide, .print-frame.is-wide { page: wide; }

  /* Entrance animations (fill: backwards → opacity 0 on the first frame)
     freeze at their first keyframe on paper: no motion in print, ever. */
  *, *::before, *::after { animation: none !important; transition: none !important; }

  /* `body.dark` outranks a bare `body` even against !important — the dark
     canvas showed through the footer spacer as a black band (2026-08-23) */
  html, body, body.dark {
    background: #fff !important;
    color: #111 !important;
    height: auto !important;
    overflow: visible !important;
    font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif !important;
    font-size: 10.5pt;
    line-height: 1.4;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body { padding: 0 !important; margin: 0 !important; }

  /* ── the web chrome stays on the web ───────────────────────────── */
  #app-sidebar-root, .sidebar, #sidebar, #app-navbar, .topbar-mobile, .bottom-nav,
  #toast-container, #negin-toasts, .mt-tip, .mt-dnd-ghost, .dsp3-menu, .dsp3-dialog,
  #palette-shell, .sidebar-palette-cta, .modal-shell, .modal-overlay, .drawer-overlay,
  .dsp3-actions, .dsp3-bar, .dsp3-selbar, .dsp3-undo, .dsp3-top, .dsp3-cal-hint,
  .dsp3-tk-acts, .dsp3-sel, .dsp3-newrow, .dsp3-iconbtn, .dsp3-menu,
  .sg-head, .sg-selbar, .sg-menu, .sh-bar, .sh-foot, .sh-tools,
  .fin-head-actions, .vl3-row-acts, .prs-actions,
  button, [role="tablist"], input[type="search"], .sr-only { display: none !important; }

  /* ── page frame: everything flows, nothing scrolls ─────────────── */
  #main-dashboard, .layout-shell, .layout-body, .layout-col, .layout-main, #layout-main, main,
  [id^="tab-"], .dsp3-page, .dsp3-host, .sg, .sg-wrap, .sg-in, .sh, .sh-wrap, .dsp3-tablewrap,
  .dsp3-strip, .dsp3-lanes, .dsp3-groups, .ov3-page {
    position: static !important; display: block !important;
    height: auto !important; max-height: none !important; min-height: 0 !important;
    overflow: visible !important; padding: 0 !important; margin: 0 !important;
    background: transparent !important; box-shadow: none !important;
  }
  [id^="tab-"].hidden { display: none !important; }
  #main-dashboard, .layout-body, .layout-col, #layout-main, [id^="tab-"], .dsp3-page, .dsp3-host, #dsp3-root, .sg, .sg-wrap { border: 0 !important; outline: 0 !important; }
  .dsp3-page.is-env > .dsp3-host { display: block !important; }
  .dsp3-strip { display: flex !important; flex-wrap: wrap; gap: 4mm; }

  /* ── paper tokens: the MITA scope prints in ink on white, dark mode or not ── */
  .mt-scope, body.dark .mt-scope, #tab-overview, body.dark #tab-overview {
    --surface-canvas: #fff; --surface-raised: #fff; --surface-card: #fff;
    --surface-inset: #f4f4f2; --surface-overlay: #e8e8e6;
    --text-primary: #111; --text-body: #222; --text-secondary: #444; --text-muted: #666;
    --text-on-accent: #111; --text-on-status: #fff;
    --border-default: #c8c8c6; --border-subtle: #dedede; --border-strong: #9a9a9a;
    --accent: #2f5f00; --accent-fill: #7ce000; --accent-fill-solid: #7ce000; --accent-soft: #eef7dc; --accent-contrast: #111;
    --status-valid: #1f8a5b; --status-valid-soft: #e4f5ec; --status-expiring: #a86400; --status-expiring-soft: #fbf0dc;
    --status-expired: #b42323; --status-expired-soft: #fbe3e3; --status-info: #1d5fbf; --status-info-soft: #e4edfb;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
    background: #fff !important; color: #222 !important;
  }
  .dsp3-row, .sg-block, .dsp3-lane, .dsp3-group, .dsp3-ticket, .dsp3-grow, .dsp3-kpi, .dsp3-cal, .ov3-card {
    break-inside: avoid; page-break-inside: avoid; box-shadow: none !important;
  }
  .dsp3-ticket { flex: 0 0 46% !important; }
  table { border-collapse: collapse !important; width: 100%; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  th, td { border: 1px solid #d4d4d4 !important; padding: 2mm 2.5mm !important; vertical-align: top; }
  .sg-table th, .sg-table td, .dsp3-table th, .dsp3-table td, .sh-table th, .sh-table td { position: static !important; }
  /* the Planung grid: every driver column on one sheet, the notes
     layer (screen-positioned) off, blocks small but whole */
  .sg-in { min-width: 0 !important; width: 100% !important; }
  .sg-table { table-layout: fixed !important; width: 100% !important; font-size: 7.5pt; }
  .sg-corner { width: 11mm !important; min-width: 11mm !important; }
  .sg-col { width: auto !important; min-width: 0 !important; }
  .sg-col-in { padding: 1mm 1.5mm !important; gap: 1.5mm; }
  .sg-col-right .dsp3-act, .sg-col .dsp3-day-chip { display: none !important; }
  .sg-time { width: 11mm !important; min-width: 11mm !important; font-size: 7pt; }
  .sg-cell { padding: 1mm !important; height: auto !important; }
  .sg-block { background-image: none !important; margin-bottom: 1.5mm; padding: 1.5mm 2mm !important; }
  .sg-block-top .dsp3-pill { height: 4mm; font-size: 6pt; }
  .sg-text { font-size: 7pt; line-height: 1.3; white-space: pre-wrap !important; overflow-wrap: anywhere; }
  .sg-notes { display: none !important; }
  a { color: inherit !important; text-decoration: none !important; }
  a[href^="tel:"]::after { content: none; }
  img { max-width: 100%; }

  /* ── the frame: letterhead as <thead>, footer as <tfoot> ───────── */
  /* fixed layout: the page width is the law — an auto table lets a nested
     100%-wide fixed table (the Planung grid) blow the cell up to Chrome's
     "infinite" width and print one column per sheet (seen 2026-08-23) */
  .print-frame { width: 100% !important; max-width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; border: 0 !important; background: transparent !important; table-layout: fixed !important; }
  .print-frame > thead { display: table-header-group; }
  .print-frame > tfoot { display: table-footer-group; }
  /* the frame's sections and rows paint nothing: a dark-mode row
     background under the spacer cell showed as a hairline (2026-08-23) */
  .print-frame > thead, .print-frame > tbody, .print-frame > tfoot, .print-frame > * > tr { background: transparent !important; }
  .print-frame > thead > tr > td, .print-frame > tfoot > tr > td, .print-frame > tbody > tr > td.print-frame-body {
    border: 0 !important; padding: 0 !important; vertical-align: top;
  }
  /* the footer row reserves the room; the footer itself is fixed to the
     bottom edge of every page (Chrome paints a fixed box on each page,
     and the spacer row keeps the content above it). The room is PADDING,
     not height, and the cell paints nothing: a sized or painted cell left
     a hairline at the page's right edge (verified 2026-08-23) */
  .print-frame > tfoot > tr > td { height: 0; padding: 0 0 11mm !important; border: 0 !important; background: transparent !important; }
  /* the body row MUST break across pages — the generic `tr` rule above
     would otherwise ask the engine to keep the whole document on one
     page */
  .print-frame > tbody, .print-frame > tbody > tr, .print-frame > tbody > tr > td.print-frame-body {
    break-inside: auto !important; page-break-inside: auto !important;
  }
  /* no focus rings or table outlines on paper (a 3px outline on the frame
     cells drew a stray line beside the footer spacer) */
  .print-frame, .print-frame > *, .print-frame > * > tr, .print-frame > * > tr > td, .print-frame-body *:focus, .print-frame-body *:focus-visible { outline: 0 !important; }
  .print-frame-body { padding-top: 5mm !important; padding-bottom: 4mm !important; }
  /* Nothing inside the frame clips: on paper a full address beats an
     ellipsis, and a clipped box cannot break across pages. */
  .print-frame-body * { overflow: visible !important; text-overflow: clip !important; }

  /* ── letterhead (every page) ───────────────────────────────────── */
  .print-letterhead {
    display: flex !important; align-items: center; justify-content: space-between; gap: 8mm;
    height: 13mm; padding-bottom: 2mm; border-bottom: 0.6pt solid #111;
    font-family: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif; color: #111;
  }
  .pl-brand { display: flex; align-items: center; gap: 3mm; }
  .pl-mark { height: 9mm; width: auto; }
  .pl-word { font-weight: 700; font-size: 13pt; letter-spacing: -0.01em; line-height: 1; }
  .pl-word em { font-style: normal; color: #4a8f00; }
  .pl-sub { display: block; font-size: 7pt; letter-spacing: 0.14em; text-transform: uppercase; color: #555; margin-top: 1mm; }
  .pl-client { display: flex; align-items: center; gap: 3mm; text-align: end; margin-inline-start: auto; }
  .pl-client-logo { height: 9mm; width: auto; max-width: 30mm; object-fit: contain; }
  .pl-client-logo[src=""], .pl-client-logo:not([src]) { display: none; }
  .pl-client strong { display: block; font-size: 11pt; }
  .pl-client span { display: block; font-size: 7.5pt; color: #555; }
  .pl-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1mm; font-size: 8pt; color: #333; min-width: 34mm; border-inline-start: 0.4pt solid #bbb; padding-inline-start: 4mm; }
  .pl-meta strong { font-size: 9.5pt; color: #111; }

  /* ── footer (every page): the Etmita copyright is law ──────────── */
  .print-footer {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex !important; align-items: center; justify-content: space-between; gap: 6mm;
    height: 7mm; padding-top: 2mm; border-top: 0.4pt solid #bbb; background: #fff;
    font-size: 7.5pt; color: #444; font-family: "IBM Plex Sans", system-ui, sans-serif;
  }
  .print-footer strong { color: #111; }

  /* Persian documents keep their face and direction on paper. */
  html[lang="fa"] body, html[lang="fa"] .print-letterhead, html[lang="fa"] .print-footer { font-family: "Yekan Bakh", "Vazirmatn", "IBM Plex Sans", sans-serif !important; }
}