/* Stili di base condivisi dalle pagine dell'applicazione. */

* { box-sizing: border-box; }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: #155C99; text-decoration: none; }
a:hover { color: #0f4675; }

::selection { background: #F5ADC1; color: #9E2E4D; }

input, select, textarea, button { font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #EE7595 !important; }

/* Indicatore di focus visibile per chi naviga da tastiera */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #EE7595;
  outline-offset: 2px;
}

.isc { scroll-behavior: smooth; }
.isc::-webkit-scrollbar { width: 10px; height: 10px; }
.isc::-webkit-scrollbar-thumb { background: #d9d4ca; border-radius: 6px; }

/* Effetti al passaggio del mouse (nel prototipo erano attributi inline) */
header nav a:hover { background: #fdeef2; }
tbody tr:hover { background: #fdeef2 !important; }

/* Stampa: la scheda toro deve occupare da sola il foglio */
/* Stampa / PDF della scheda: SEMPRE una sola pagina A4 verticale.
   Il fattore di riduzione lo calcola app.js prima della stampa (--print-scale),
   così la scheda entra intera nel foglio senza spezzarsi su più pagine. */
@page {
  size: A4 portrait;
  margin: 6mm;
}

@media print {
  html, body { height: auto !important; background: #fff !important; }
  body * { visibility: hidden !important; }
  #bullsheet, #bullsheet * { visibility: visible !important; }
  #bullsheet {
    position: absolute; left: 0; top: 0;
    width: var(--print-width, 100%);
    transform: scale(var(--print-scale, 1));
    transform-origin: top left;
  }
  /* Niente interruzioni interne: la scheda resta un blocco unico */
  #bullsheet, #bullsheet * {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  #bullsheet img { page-break-inside: avoid !important; break-inside: avoid !important; }
  .bull-toolbar { display: none !important; }

  /* Confronto tori (la pagina aggiunge la classe `stampa-confronto` al body).
     Qui NON si usa il trucco della scheda (visibility + position:absolute):
     la tabella è lunga e un elemento posizionato in assoluto verrebbe tagliato
     dopo il primo foglio invece di continuare sul secondo. Si toglie di mezzo
     il resto della pagina con display:none e la tabella scorre normalmente,
     spezzandosi solo tra una sezione e l'altra. */
  body.stampa-confronto * { visibility: visible !important; }
  body.stampa-confronto header,
  body.stampa-confronto footer,
  body.stampa-confronto .assistant-fab,
  body.stampa-confronto .assistant-panel,
  body.stampa-confronto .cmp-hide-print { display: none !important; }
  body.stampa-confronto #comparesheet .cmp-scroll { overflow: visible !important; border: 0 !important; }
  body.stampa-confronto #comparesheet table { min-width: 0 !important; width: 100% !important; }
  body.stampa-confronto #comparesheet img { max-height: 88px !important; }
  body.stampa-confronto .cmp-sez { page-break-inside: avoid; break-inside: avoid; }
  /* La colonna delle etichette non deve "seguire" la pagina in stampa */
  body.stampa-confronto .cmp-lab { position: static !important; }
}

/* ------------------------------ Confronto tori ------------------------------
   La prima colonna (le etichette) resta ferma mentre si scorre in orizzontale:
   su telefono, con 4 tori affiancati, senza questo non si capirebbe più a quale
   riga appartiene il numero che si sta guardando. */
.cmp-lab {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* Adattamento a schermi stretti */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: 1fr 1fr !important; }
}

/* ------------------------- Telefono / tablet stretto ------------------------- */
@media (max-width: 820px) {
  /* Header pubblico su telefono:
     riga 1 = logo centrato · riga 2 = menu su una riga · riga 3 = IT/EN + catalogo + accedi */
  .pub-header { position: relative; height: auto !important; padding: 10px 8px 7px !important; flex-wrap: wrap !important; justify-content: center !important; gap: 4px !important; }
  .pub-header > a:first-child { order: 1; width: 100%; justify-content: center !important; }
  .pub-header > a:first-child img { height: 42px !important; }
  /* IT/EN in alto a destra, catalogo in alto a sinistra: logo centrato in mezzo,
     nessuna sovrapposizione */
  .pub-actions { display: contents !important; }
  .pub-lang { position: absolute !important; top: 11px; right: 8px; }
  .pub-cta { position: absolute !important; top: 11px; left: 8px; padding: 6px 10px !important; font-size: 11px !important; }
  /* Menu (con Accedi) tutto su una riga */
  .pub-nav { order: 2; width: 100%; margin-left: 0 !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 0 !important; }
  .pub-nav a { padding: 5px 3px !important; font-size: 10.5px !important; }
  .pub-nav button { padding: 5px 3px !important; font-size: 10.5px !important; }

  /* Hero home su telefono: altezza compatta, testo nel riquadro scuro leggibile */
  .hero-sec { height: 400px !important; }
  .hero-title { font-size: 22px !important; margin-top: 8px !important; }
  .hero-sub { font-size: 13px !important; margin-top: 8px !important; }
  .hero-panel { margin-bottom: 14px !important; padding: 12px 14px 14px !important; max-width: 100% !important; }
  /* La barra ricerca NON si sovrappone all'hero su telefono; "Cerca" va sotto */
  .hero-search { margin-top: 16px !important; }
  .hero-search-btn { flex: 1 1 100% !important; }

  /* Schede toro: da due colonne a una sola; le colonne possono restringersi
     (evita che etichette lunghe facciano uscire la scheda dallo schermo) */
  .sheet-body { grid-template-columns: 1fr !important; }
  .sheet-body > div { min-width: 0 !important; }
  .sheet-head-grid { grid-template-columns: 1fr !important; gap: 4px !important; }

  /* Tabelle larghe (catalogo, tori simili): scorrono in orizzontale */
  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Footer e griglie a più colonne */
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .media-grid { grid-template-columns: 1fr 1fr !important; }

  /* CMS: barra laterale sopra, contenuto sotto */
  .admin-shell { grid-template-columns: 1fr !important; }
  .admin-sidebar { position: static !important; height: auto !important; }
  .admin-content { padding: 18px 14px 50px !important; }
  .admin-content h1 { font-size: 22px !important; }

  /* Pagina Accedi: solo il form (niente pannello promo), header compatto */
  .login-grid { grid-template-columns: 1fr !important; }
  .login-promo { display: none !important; }
  .login-headbar { padding: 0 14px !important; gap: 10px !important; }
  .login-nav a, .login-nav span { padding: 7px 8px !important; font-size: 12.5px !important; }
}

@media (max-width: 480px) {
  /* footer resta a 2 colonne (compatto): Naviga e Contatti vicini, non a tutta pagina */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 18px 16px !important; }
  .media-grid { grid-template-columns: 1fr !important; }
  /* Con la voce "Confronta" il menu ha 8 voci: su telefono piccolo si stringe
     ancora un po' per restare su una riga sola. */
  .pub-nav a, .pub-nav button { padding: 5px 2px !important; font-size: 9.5px !important; }
}

/* ------------------------------- Stampa (in fondo) -------------------------------
   In stampa la "larghezza schermo" è quella del foglio (~790px), quindi le regole
   per telefono qui sopra scatterebbero mettendo la scheda su UNA colonna: molto
   più alta e quindi spezzata su più fogli. Qui si ripristina il layout a due
   colonne, così la scheda entra intera in una sola pagina A4 verticale.
   Questo blocco va tenuto per ultimo: a parità di !important vince l'ultimo. */
@media print {
  .sheet-body { grid-template-columns: 1.55fr 1fr !important; }
  .sheet-head-grid { grid-template-columns: 1.4fr 1fr 1fr !important; gap: 10px !important; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr !important; }
}