/* ════════════════════════════════════════════════════════════════════
   Boat Menù — foglio di stampa (export PDF via window.print())
   Pensato per la lista della spesa su A4, ma valido su tutte le pagine.
   Caricato con media="print"; le regole sono comunque dentro @media print
   così il file resta corretto anche se il link perde l'attributo.
   ════════════════════════════════════════════════════════════════════ */

@page {
  size: A4 portrait;
  margin: 14mm 12mm 16mm;
}

/* Conteggio pagine: solo i motori con margin box lo onorano (nessun
   browser oggi). Tenuto in un @page separato così, se viene scartato,
   non porta con sé size e margin. */
@page {
  @bottom-right {
    content: "Pagina " counter(page) " di " counter(pages);
    font-family: monospace;
    font-size: 8pt;
    color: #555;
  }
}

@media print {

  /* ─── token in bianco e nero ──────────────────────────────────────
     Riscrivere i token invece delle singole regole: tutto il design
     system segue. Il selettore include data-theme="dark" per battere
     il tema scuro se attivo al momento della stampa. */
  :root,
  :root[data-theme="dark"] {
    --bg: #fff;  --bg-2: #fff;
    --ink: #000; --fg: #000;
    --muted: #333; --faint: #555;

    --glass: transparent; --glass-2: transparent;
    --glass-strong: transparent; --glass-line: transparent;
    --border: #999; --border-soft: #bbb; --shadow: transparent;

    --accent: #000; --accent-2: #000; --accent-on: #fff;
    --accent-soft: transparent; --accent-ring: transparent;

    --success: #000; --warn: #000; --danger: #000;
    --success-soft: transparent; --warn-soft: transparent; --danger-soft: transparent;

    --blob-1: transparent; --blob-2: transparent; --blob-3: transparent;
    --blur: 0px;
  }

  /* ─── azzeramento vetri, ombre, blur, animazioni ──────────────────
     Illeggibili in stampa e costosi in inchiostro. */
  *, *::before, *::after {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    line-height: 1.4;
  }

  /* ─── cosa non si stampa ──────────────────────────────────────────
     Sfondo ambientale, navigazione, controlli e stati effimeri. */
  .seascape, .scrim, .sidebar, .topbar, .mobilenav,
  .btn, .theme-toggle, .menu-toggle,
  .toast-host, .io-menu, .crew-modal,
  .gen-progress, .skel, .skel-card, .errbox, .dish.is-loading,
  .meter, .ring, .day-rail, .ai-compose,
  .no-print { display: none !important; }

  /* Le miniatura dei piatti sono gradienti: senza sfondo restano riquadri vuoti. */
  .dish .thumb { display: none !important; }

  /* ─── colonna singola su A4 ───────────────────────────────────────*/
  .app, .main, .col,
  .grid, .cols-2, .cols-3, .cols-4, .cols-2-1, .cols-1-2,
  .stats-itin, .meals-rail { display: block !important; }

  .content {
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .content > * + *,
  .col > * + * { margin-top: 6mm !important; }

  .glass, .glass-2 { border: 0 !important; border-radius: 0 !important; }
  .panel { padding: 0 !important; }

  /* ─── intestazione stampata ───────────────────────────────────────
     <div class="print-head" data-trip="…" data-boat="…"
          data-dates="…" data-crew="6 coperti"></div>
     I quattro attributi vanno sempre valorizzati dal JS: attr() senza
     fallback non renderizza nulla se manca l'attributo. */
  .print-head {
    display: block !important;
    margin: 0 0 6mm !important;
    padding-bottom: 3mm !important;
    border-bottom: 1.2pt solid #000 !important;
  }
  .print-head::before {
    content: attr(data-trip);
    display: block;
    font-family: var(--font-display);
    font-size: 18pt;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .print-head::after {
    content: attr(data-boat) " · " attr(data-dates) " · " attr(data-crew);
    display: block;
    margin-top: 1.5mm;
    font-size: 9.5pt;
    color: #333;
  }

  /* ─── reparti: testata + totale, mai spezzati a metà ──────────────
     Se un reparto è più alto della pagina il browser ignora l'avoid e
     lo spezza comunque: nessun rischio di pagine bianche. */
  .glass, .panel, .meal { break-inside: avoid; page-break-inside: avoid; }
  .row-item, li, tr { break-inside: avoid; page-break-inside: avoid; }
  .meal-head, .panel-head,
  h1, h2, h3, h4, .h1, .h2, .h3, .eyebrow { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  .meal-head {
    display: flex !important;
    align-items: baseline !important;
    gap: 3mm !important;
    margin: 0 0 2.5mm !important;
    padding-bottom: 1.5mm !important;
    border-bottom: 0.8pt solid #000 !important;
  }
  .meal-head .ico { display: none !important; }
  .meal-head h3 { font-size: 13pt !important; }
  /* .count porta il totale del reparto: "15 articoli · € 168" */
  .meal-head .count { margin-left: auto !important; font-size: 9.5pt !important; color: #333 !important; }

  /* ─── righe articolo ──────────────────────────────────────────────*/
  .row-item {
    display: flex !important;
    align-items: center !important;
    gap: 3mm !important;
    padding: 1.6mm 0 !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-bottom: 0.4pt dotted #bbb !important;
  }
  /* In stampa la lista è uniforme: si spunta a mano, anche il già preso. */
  .row-item.is-checked { opacity: 1 !important; }
  .row-item.is-checked strong,
  .row-item.is-checked .num { text-decoration: none !important; }

  /* Quadratini vuoti da spuntare a penna: la spunta a schermo non si stampa. */
  .check input { display: none !important; }
  .check .box {
    width: 4.2mm !important;
    height: 4.2mm !important;
    border: 0.8pt solid #000 !important;
    border-radius: 0.8mm !important;
    background: #fff !important;
  }
  .check .box svg { display: none !important; }

  .qty-edit {
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: right !important;
    font-size: 10pt !important;
  }

  /* ─── elementi che vivevano di solo background ────────────────────*/
  .divider { height: 0 !important; border-top: 0.5pt solid #999 !important; }
  .badge-dot {
    width: 2mm !important; height: 2mm !important;
    border: 0.9pt solid #000 !important;
  }
  .badge, .chip, .allergen, .allergen-alert {
    padding: 0.4mm 1.6mm !important;
    border: 0.5pt solid #666 !important;
    border-radius: 1mm !important;
    color: #000 !important;
    font-size: 8.5pt !important;
  }
  /* La variante .pin è ancorata alla miniatura, che qui non si stampa:
     senza questo finirebbe sopra il titolo del piatto. */
  .allergen-alert.pin {
    position: static !important;
    display: inline-flex !important;
    margin-bottom: 1mm !important;
  }
  .dish { border: 0.5pt solid #999 !important; }

  /* ─── totali ──────────────────────────────────────────────────────
     Il totale generale resta l'elemento più grande della pagina. */
  .display { font-size: 16pt !important; }
  .stat .val { font-size: 14pt !important; }
  .num { font-variant-numeric: tabular-nums; }

  /* Il disclaimer allergeni si stampa: è un avviso di sicurezza. */
  .disclaimer {
    border: 0.5pt solid #999 !important;
    padding: 2mm 3mm !important;
    color: #333 !important;
    font-size: 9pt !important;
  }
  .disclaimer-close { display: none !important; }

  /* ─── utility ─────────────────────────────────────────────────────*/
  .print-only { display: revert !important; }
  .no-print { display: none !important; }
}

/* Rete di sicurezza: se un giorno print.css venisse caricato senza
   media="print", questi due restano coerenti anche a schermo. */
@media screen {
  .print-head, .print-only { display: none; }
}