/* ============================================================
   PRINT FALLBACK — the app's own pages on paper
   Loaded on index.html / tech.html / customer.html / job.html only.
   NEVER on print.html: that page owns fixed Letter geometry and its
   own @page margin.

   An earlier version of this file forced white backgrounds and black
   text on everything. Browsers already drop backgrounds by default,
   so that bleached every zone chip, grade, setpoint bar and brand
   accent into grey mush — the page printed uglier than it looked on
   screen. The correct move is the opposite: opt INTO color printing
   and then get out of the way, hiding only the chrome.
   ============================================================ */

@page {
  size: letter portrait;
  margin: 0.45in;
}

@media print {
  /* Print the design as designed. Without this Chrome silently drops
     every fill and the green/amber/red gauge language stops meaning
     anything on paper. */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
  }

  html,
  body {
    background: #fff !important;
    font-size: 10.5pt;
  }

  /* ---------- chrome that has no business on paper ---------- */

  .rail,
  .topbar,
  .no-print,
  #nav-mobile,
  #drawer-root,
  #chat-root,
  #range-seg,
  #range-loading,
  #btn-print,
  #btn-sync,
  #btn-ask {
    display: none !important;
  }

  /* The sticky range strip: drop the sticky treatment, keep the label —
     on paper "which window is this?" is worth the line. */
  .backdrop-blur {
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    padding: 0 0 6pt 0 !important;
  }

  /* ---------- layout ---------- */

  #app,
  #views,
  main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Anything that scrolled on screen shows everything on paper. */
  .overflow-x-auto,
  .overflow-y-auto,
  .overflow-auto,
  .overflow-hidden {
    overflow: visible !important;
    max-height: none !important;
  }

  /* ---------- surfaces keep their identity ---------- */

  .ticket,
  .panel {
    border: 0.75pt solid #c9d2db !important;
    border-radius: 6pt !important;
    background: #fff !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Zone chips, grades and setpoint bars carry the meaning — their color
     stays. Only the outline is firmed up so light fills survive toner. */
  .zone-chip {
    border: 0.5pt solid currentColor !important;
    padding: 1pt 5pt !important;
  }
  .setpoint {
    height: 6pt !important;
    break-inside: avoid;
  }

  /* ---------- tables ---------- */

  .board {
    width: 100% !important;
    font-size: 9pt !important;
  }
  .board thead {
    display: table-header-group; /* repeat headers across pages */
  }
  .board thead th {
    position: static !important;
    background: #eef2f6 !important;
    color: #4a545f !important;
  }
  .board tbody tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .board tbody tr:hover {
    background: transparent !important;
  }

  /* ---------- typography ---------- */

  h1,
  h2,
  h3,
  .ticket-title {
    break-after: avoid;
    page-break-after: avoid;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }

  /* Interactive affordances read as noise in ink. */
  button:not(.zone-chip),
  select,
  input,
  .seg {
    display: none !important;
  }

  /* One quiet pointer to the properly formatted export. */
  body::after {
    content: 'Printed from app.icareaircare.com — for the formatted one-page version use the Print button.';
    display: block;
    margin-top: 10pt;
    padding-top: 5pt;
    border-top: 0.5pt solid #d5dce3;
    font-size: 7.5pt;
    color: #75808c;
  }
}