/* =========================================================================
   Header compatto e menu a cassetto su smartphone e tablet (08/10/2026)
   -------------------------------------------------------------------------
   Criterio (deciso da Andrea al Cancello 1): dispositivo touch senza mouse
   fino a 1279px di larghezza, oppure finestra sotto i 600px. Sopra i 1280px
   (iPad Pro in orizzontale) resta l'header desktop. I portatili con
   touchscreen dichiarano pointer:fine/hover:hover e restano desktop.
   La stessa query e' in mobile_nav.js e header_search.js: se cambia qui va
   cambiata anche li' (test: tests/test_mobile_nav.py).

   Fuori dalla query questo file nasconde soltanto gli elementi nuovi: su PC
   e Mac l'header e' identico a prima.
   ========================================================================= */

.mnav-only{display:none}
.mnav[hidden]{display:none}

@media (max-width:599px), (hover:none) and (pointer:coarse) and (max-width:1279px){

  /* --- Header compatto: hamburger | titolo | lente + campanella -------- */
  header.topbar{
    flex-wrap:nowrap;align-items:center;gap:2px;
    min-height:0;height:calc(56px + env(safe-area-inset-top, 0px));
    padding:env(safe-area-inset-top, 0px) calc(6px + env(safe-area-inset-right, 0px)) 0 calc(6px + env(safe-area-inset-left, 0px));
  }
  header.topbar>.app-identity,
  header.topbar>.data-freshness,
  header.topbar>.header-greeting,
  header.topbar>nav.header-actions{display:none}

  header.topbar .mnav-only{display:inline-grid}
  header.topbar .mnav-toggle{order:0}
  header.topbar .mnav-title{order:1;display:block;flex:1 1 auto;min-width:0;padding:0 4px;
    color:#fff;font-family:var(--font-heading);font-size:17px;font-weight:800;line-height:1.15;
    text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Homepage: wordmark JetTulio come nella pagina di accesso. */
  header.topbar .mnav-title .jt-wordmark{font-size:20px}
  header.topbar .header-search{order:2}
  header.topbar .mnav-bell{order:3}

  /* Icone dell'header compatto: area di tocco 44x44, senza riquadro. */
  header.topbar .mnav-toggle,
  header.topbar .mnav-bell,
  header.topbar .header-search .header-search-toggle{
    width:44px;min-width:44px;height:44px;min-height:44px;border-color:transparent;background:transparent}
  header.topbar .mnav-toggle:hover,
  header.topbar .mnav-bell:hover,
  header.topbar .header-search .header-search-toggle:hover{background:rgba(255,255,255,.1);border-color:transparent;transform:none}
  header.topbar .mnav-toggle .app-icon{width:24px;height:24px}
  header.topbar .mnav-bell .app-icon,
  header.topbar .header-search-toggle .app-icon{width:22px;height:22px}
  header.topbar a.mnav-bell,header.topbar a.mnav-bell:hover{color:#fff;text-decoration:none}
  header.topbar .mnav-bell .notification-badge{top:3px;right:1px}

  /* Ricerca PV: stessa apertura a tutta larghezza dei telefoni (style.css,
     blocco max-width:760px), estesa ai tablet in modalita' compatta. */
  header.topbar .header-search{flex:0 0 44px;min-width:44px;max-width:44px;height:44px;container-type:normal}
  header.topbar .header-search-toggle{display:inline-grid}
  header.topbar .header-search-field{display:none;position:fixed;top:0;left:0;right:0;width:auto;height:auto;
    z-index:210;padding:max(10px,env(safe-area-inset-top)) 12px 10px;background:var(--brand-dark,#2c2c2c);
    border-bottom:3px solid var(--brand-primary);box-shadow:0 8px 24px rgba(0,0,0,.4);
    grid-template-columns:1fr auto;gap:8px;align-items:center}
  header.topbar .header-search.is-open .header-search-field{display:grid;width:auto}
  header.topbar .header-search:focus-within .header-search-field{width:auto}
  header.topbar .header-search-field input{height:44px;padding-right:12px;font-size:16px}
  header.topbar .header-search-lens{left:23px;top:calc(max(10px,env(safe-area-inset-top)) + 22px)}
  header.topbar .header-search-kbd{display:none}
  header.topbar .header-search-close{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;
    border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;
    font-size:24px;line-height:1;cursor:pointer}
  body header.topbar .header-search .station-search-results{position:absolute;top:100%;left:0;right:0;width:auto;
    max-width:none;max-height:min(70dvh,480px);border-radius:0 0 12px 12px;border-top:0}
  body header.topbar .header-search .station-search-results button{min-height:48px}

  /* Aggiornamento dati in corso: sottile barra animata sotto l'header (il
     testo «Dati aggiornati» e' nel cassetto). */
  header.topbar:has(.data-freshness.is-running)::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
    background:linear-gradient(90deg,transparent,#fff 50%,transparent) 0 0/40% 100% no-repeat,var(--brand-primary);
    animation:mnav-running 1.3s linear infinite}

  /* Spazio in fondo: la pagina non finisce sotto la barra di sistema. */
  .wrap{padding-bottom:env(safe-area-inset-bottom, 0px)}
}
@keyframes mnav-running{from{background-position:-40% 0,0 0}to{background-position:140% 0,0 0}}

/* --- Cassetto -------------------------------------------------------------
   Fuori dall'header (position:fixed sul body), sopra a tutto. Colori dai
   token del design system: segue il tema chiaro/scuro; l'intestazione
   utente e' scura come l'header in entrambi i temi. */
.mnav{position:fixed;inset:0;z-index:300}
.mnav-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .22s ease}
.mnav-panel{position:absolute;top:0;bottom:0;left:0;width:min(84vw,360px);display:flex;flex-direction:column;
  background:var(--ds-surface-elevated);color:var(--ds-text);box-shadow:8px 0 30px rgba(0,0,0,.35);
  transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.8,.2,1);outline:none;
  touch-action:pan-y}
.mnav .mnav-panel:focus,.mnav .mnav-panel:focus-visible{outline:none}
.mnav.is-open .mnav-scrim{opacity:1}
.mnav.is-open .mnav-panel{transform:translateX(0)}
@media (min-width:600px){.mnav-panel{width:340px}}

.mnav-head{flex:0 0 auto;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;align-items:center;
  padding:calc(14px + env(safe-area-inset-top, 0px)) 14px 12px calc(16px + env(safe-area-inset-left, 0px));
  background:var(--brand-dark,#2c2c2c);color:#fff;border-bottom:3px solid var(--brand-primary)}
.mnav-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--brand-primary);
  color:#fff;font-family:var(--font-heading);font-size:18px;font-weight:800}
.mnav-user{min-width:0}
.mnav-user strong{display:block;font-family:var(--font-heading);font-size:16px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnav-user span{display:block;color:#c9c9c9;font-size:12.5px}
.mnav-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;
  background:transparent;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.mnav-close:hover{background:rgba(255,255,255,.1)}
.mnav-fresh{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:2px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.14);color:#c9c9c9;font-size:12px}
.mnav-fresh strong{color:#fff;font-size:12px}
.mnav-fresh .df-running{display:inline-flex;align-items:center;gap:6px;color:#ffd9d9}
.mnav-fresh [hidden]{display:none}
.mnav-fresh button{margin-left:auto;min-height:36px;padding:5px 12px;border:1px solid rgba(255,255,255,.28);border-radius:8px;
  background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.mnav-fresh button:disabled{opacity:.55;cursor:default}

.mnav-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 10px 10px}
.mnav-group{margin:14px 10px 4px;color:var(--ds-text-secondary);font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.mnav-list{margin:0;padding:0;list-style:none}
.mnav .mnav-item{display:flex;align-items:center;gap:14px;width:100%;min-height:46px;padding:0 12px;border:0;border-radius:10px;
  background:transparent;color:var(--ds-text);font:inherit;font-size:15px;font-weight:650;text-align:left;
  text-decoration:none;cursor:pointer}
.mnav .mnav-item:hover{background:var(--ds-surface-subtle);color:var(--ds-text);text-decoration:none}
.mnav-item .app-icon{flex:0 0 21px;width:21px;height:21px}
.mnav .mnav-item[aria-current="page"]{background:var(--ds-brand-soft);color:var(--ds-brand-text);font-weight:800;
  box-shadow:inset 3px 0 0 var(--brand-primary)}
.mnav-count{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:9px;background:var(--brand-primary);
  color:#fff;font-size:11px;font-weight:800;text-align:center}
.mnav-foot{flex:0 0 auto;border-top:1px solid var(--ds-border);
  padding:6px 10px calc(8px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px))}
.mnav-foot form{margin:0}
.mnav-foot .mnav-item{min-height:44px;font-size:14px}
.mnav-foot .mnav-item.mnav-exit{color:var(--ds-danger)}
/* Tema: mostra solo l'icona del tema attivo (come il pulsante desktop). */
.mnav-theme .app-icon{display:none}
:root[data-theme="light"] .mnav-theme .ds-icon-theme-light,
:root[data-theme="dark"] .mnav-theme .ds-icon-theme-dark,
:root[data-theme="auto"] .mnav-theme .ds-icon-theme-auto,
:root:not([data-theme]) .mnav-theme .ds-icon-theme-auto{display:block}

/* Pagina ferma sotto il cassetto aperto (anche su iOS: vedi mobile_nav.js). */
html.mnav-locked,html.mnav-locked body{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .mnav-scrim,.mnav-panel{transition:none}
  header.topbar:has(.data-freshness.is-running)::after{animation:none}
}