/* ═══════════════════════════════════════════════════════════════════════════
   desktop-fill.css — Scala la UI su schermi grandi (PC/monitor del server).
   ───────────────────────────────────────────────────────────────────────────
   PROBLEMA: la UP è dimensionata in rem/px con base 16px. Su un monitor da PC
   il gestionale resta fisicamente piccolo e lascia il font minuto.

   SOLUZIONE: alzare la base tipografica (`:root { font-size }`) SOLO su schermi
   larghi. Tutto ciò che è in `rem`/`--fs-*` scala in proporzione → font più
   grande e contenuti che riempiono lo schermo, senza riscrivere i layout.

   ⚠️ GATED da `min-width`: gli smartphone (< 1024px) NON sono toccati. I
   breakpoint mobili di main.css sono tutti `max-width`, quindi non collidono.

   Caricato per ULTIMO in index.html (dopo theme-light) per vincere la cascata.
   Per disattivarlo basta togliere il <link>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tier 1: laptop / monitor standard ──────────────────────────────────── */
@media (min-width: 1024px) {
  :root {
    font-size: 18px;               /* base 16 → 18  (+12,5% su tutti i rem) */

    /* I token font del design system (assets/css/system/01-tokens.css) sono in
       PX e da soli non scalerebbero. Li ridefiniamo in rem mantenendo lo stesso
       rapporto, così anche il testo che li usa cresce insieme al resto. */
    --fs-body-l:  1rem;            /* 16px → scala con root */
    --fs-body-m:  0.875rem;        /* 14px */
    --fs-body-s:  0.8125rem;       /* 13px */
    --fs-caption: 0.6875rem;       /* 11px */
    --fs-num-xl:  2.5rem;          /* 40px */
    --fs-num-l:   1.75rem;         /* 28px */
    --fs-num-m:   1.125rem;        /* 18px */
    --lh-body-l:  1.5rem;
    --lh-body-m:  1.25rem;
    --lh-body-s:  1.125rem;
    --lh-caption: 0.875rem;
  }
}

/* ── Tier 2: monitor Full-HD e desktop ampi ─────────────────────────────── */
@media (min-width: 1440px) {
  :root { font-size: 19.5px; }
}

/* ── Tier 3: monitor grandi / TV del locale ─────────────────────────────── */
@media (min-width: 1800px) {
  :root { font-size: 21px; }
}

/* ── Larghezza piena su PC (come la barra inferiore) ─────────────────────────
   faro-pro.css centra il contenuto con `width: min(100%, 1240px); margin:0 auto`,
   lasciando i vuoti ai lati sui monitor larghi. Qui lo si porta a tutta larghezza.
   GATED min-width:1024 → lo smartphone (sotto quella soglia) resta identico, dove
   tra l'altro min(100%,1240px) valeva già 100%. Il padding laterale di .panel
   (16px) resta come piccolo margine di respiro, come la barra sotto.          */
@media (min-width: 1024px) {
  .mappa-inner,
  #menu > .panel,
  #view-prenotazioni > .panel {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}