/* ============================================================
   IVIS — adattamento tablet/telefono (F4).
   I layout di produzione usano stili inline con larghezze fisse:
   qui rilassiamo griglie e spaziature ai viewport piccoli e
   attiviamo la navigazione a cassetto (drawer).

   Markup: partials/nav-drawer.blade.php (vetrina) e layouts/admin.blade.php (admin).
   Comportamento opzionale (chiusura su overlay/Esc): public/js/mobile-nav.js

   Breakpoint: 1023.98px = Tailwind `lg` (nav), 860px = telefono, 620px = barra
   compatta. Il valore per il JS sta in `--ivis-nav-breakpoint` qui sotto:
   cambiando il breakpoint vanno aggiornati insieme variabile e @media.

   NOTA sui selettori: le regole agganciano le sottostringhe degli stili inline
   (`[style*="padding: 24px"]`). È il prezzo per non riscrivere 30 viste, ma il
   legame è fragile: se in una vista cambia un valore inline, la regola diventa
   muta. Il test tests/Feature/ResponsiveCssContractTest.php verifica che ogni
   sottostringa usata qui esista ancora in almeno una vista.

   NOTA su `:has()`: richiede Chrome 105+, Safari 15.4+, Firefox 121+. Su motori
   più vecchi le righe interessate non vanno a capo (possibile scroll
   orizzontale), tutto il resto dell'adattamento continua a funzionare.
   ============================================================ */

:root {
  /* letto da public/js/mobile-nav.js — deve combaciare con le @media qui sotto */
  --ivis-nav-breakpoint: 1024;
  /* = --spacing-gutter-mobile di resources/css/theme.css (non disponibile nei
     layout di produzione, che non passano da Vite) */
  --ivis-gutter-mobile: 18px;
  --ivis-gutter-tablet: 28px;
}

/* ---------- Chrome mobile: nascosto su desktop ---------- */
.ivis-nav, .ivis-admin-topbar { display: none; }

/* ===== Desktop stretto (1024–1279px): spazio per il selettore lingua =====

   Sotto 1024px il drawer assorbe ricerca, voci di menu e lingua; in questa
   fascia invece l'header deve tenere tutto insieme: logo, ricerca, navigazione,
   selettore lingua e carrello. La ricerca è l'unico elemento elastico, quindi
   la accorciamo: nascondere il selettore lascerebbe la fascia 1024–1279px senza
   alcun modo di cambiare lingua (il drawer non c'è ancora). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* stessa scelta della barra compatta a 620px: resta la sigla «IVIS» */
  header .ivis-logo-word { display: none; }
  .ivis-search { max-width: 240px !important; }
  header, header nav { gap: 14px !important; }
}

@media (max-width: 1023.98px) {

  /* ===== 1. Componenti della navigazione mobile ===== */

  .ivis-nav { display: block; flex: 0 0 auto; }

  /* Il burger resta sopra l'overlay: senza JS è l'unico modo di richiudere. */
  .ivis-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 42px; padding: 0 10px; box-sizing: border-box;
    border-radius: 12px; cursor: pointer; list-style: none;
    position: relative; z-index: 960;
    color: #10263B; background: #EFF4F9;
  }
  .ivis-burger::-webkit-details-marker { display: none; }
  .ivis-burger > span { display: block; height: 2.5px; border-radius: 2px; background: currentColor; }
  .ivis-nav--admin .ivis-burger { color: #FFFFFF; background: transparent; }

  .ivis-overlay {
    position: fixed; inset: 0; z-index: 900; background: rgba(16, 38, 59, .5);
    animation: ivisFadeIn .2s ease-out;
  }

  .ivis-drawer {
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 950;
    display: flex; flex-direction: column; box-sizing: border-box;
    width: 300px; max-width: 84vw; overflow-y: auto;
    background: #FFFFFF; box-shadow: 0 20px 60px rgba(16, 38, 59, .28);
    animation: ivisDrawerInRight .24s ease-out;
  }
  .ivis-drawer--left {
    right: auto; left: 0; width: 264px; padding: 16px 14px;
    background: #10263B; animation-name: ivisDrawerInLeft;
  }

  .ivis-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px 20px; border-bottom: 1px solid #DDE6EE;
  }
  .ivis-drawer__title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 18px; color: #10263B; }
  .ivis-drawer__close {
    border: none; background: none; padding: 0 4px; cursor: pointer;
    font-size: 30px; line-height: 1; color: #64717E;
  }
  .ivis-drawer__close:hover { color: #10263B; }
  .ivis-drawer__body { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
  .ivis-drawer__link {
    padding: 13px 12px; border-radius: 12px;
    font-size: 16px; font-weight: 700; color: #10263B;
  }
  .ivis-drawer__link:hover { background: #EFF4F9; color: #176BAA; }
  .ivis-drawer__link.is-active { color: #176BAA; }
  .ivis-drawer .ivis-search { max-width: none !important; }

  /* Il drawer della vetrina vive dentro l'header sticky (z-index: 50), quindi
     resterebbe sotto agli overlay di pagina. Mentre è aperto li abbassiamo:
     banner cookie (9999), toast (100) e spinner del catalogo (100). */
  body:has(details.ivis-nav[open]) #cookie-consent,
  body:has(details.ivis-nav[open]) .ui-toaster,
  body:has(details.ivis-nav[open]) #catalog-loading { z-index: 40 !important; }

  .ivis-admin-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 800;
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 14px; box-sizing: border-box; background: #10263B;
  }

  @keyframes ivisFadeIn { from { opacity: 0 } to { opacity: 1 } }
  @keyframes ivisDrawerInRight { from { transform: translateX(100%) } to { transform: none } }
  @keyframes ivisDrawerInLeft { from { transform: translateX(-100%) } to { transform: none } }

  /* ===== 2. Header vetrina: solo logo, carrello e burger ===== */

  /* restano nella barra solo carrello e burger; il resto passa nel drawer */
  header > .ivis-search,
  header nav > [data-nav-collapsible] { display: none; }
  header, header nav { gap: 12px !important; }

  /* ===== 3. Shell admin: sidebar sostituita dal drawer ===== */

  /* box-sizing: il 100vh inline non deve sommarsi all'altezza della barra */
  .ivis-admin-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-top: 56px; box-sizing: border-box;
  }
  /* !important: l'aside ha `display: flex` inline, che vincerebbe sulla regola. */
  .ivis-admin-shell > aside { display: none !important; }
  /* i toast non devono finire sotto la barra fissa */
  .ivis-admin-shell ~ .ui-toaster { top: 66px; right: 12px; left: 12px; }

  /* ===== 4. Larghezze fisse e griglie dense ===== */

  img { max-width: 100%; }

  /* le griglie a 3–4 colonne passano a 2 (le tabelle admin sono escluse: scorrono) */
  [style*="repeat(4,"]:not(.ui-table__head):not(.ui-table__row),
  [style*="repeat(3,"]:not(.ui-table__head):not(.ui-table__row),
  [style*="1fr 1fr 1fr"]:not(.ui-table__head):not(.ui-table__row) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* colonne laterali fisse (filtri catalogo, nav account, indice termini) */
  [style*="grid-template-columns: 260px"],
  [style*="grid-template-columns: 280px"],
  [style*="grid-template-columns: 300px"] {
    grid-template-columns: 200px minmax(0, 1fr) !important;
  }

  /* riepiloghi laterali del checkout/carrello */
  [style*="1fr) 380px"], [style*="1fr) 320px"] {
    grid-template-columns: minmax(0, 1fr) 280px !important;
  }

  /* Le tabelle admin conservano le colonne e scorrono in orizzontale dentro la
     card: senza il contenitore scorrevole le righe sfonderebbero la pagina.
     Vale per ogni tabella costruita con <x-ui.table>. */
  .ui-table { overflow-x: auto; }
  .ui-table .ui-table__head, .ui-table .ui-table__row { min-width: 900px; }

  /* ===== 5. Spaziature e tipografia ===== */

  /* Gutter di pagina: 48px è l'unico valore orizzontale usato nei layout. */
  [style*="px 48px"], [style*="padding: 0 48px"] {
    padding-left: var(--ivis-gutter-tablet) !important;
    padding-right: var(--ivis-gutter-tablet) !important;
  }

  /* Ritmo verticale delle sezioni più alte. */
  [style*="padding: 72px 48px"] { padding-top: 46px !important; padding-bottom: 46px !important; }
  [style*="padding: 60px 48px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  [style*="padding: 56px 48px"] { padding-top: 40px !important; padding-bottom: 40px !important; }

  [style*="font-size: 40px"] { font-size: 32px !important; }
}

/* ============================================================
   Telefono (≤ 860px): una colonna, chrome compatto
   ============================================================ */
@media (max-width: 860px) {

  /* tutte le griglie passano a colonna singola (tabelle admin escluse) */
  [style*="grid-template-columns"]:not(.ui-table__head):not(.ui-table__row) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Eccezione: le griglie a 4 colonne sono fatte di riquadri compatti
     (KPI, trust strip, riepiloghi). In colonna singola diventano enormi e vuoti. */
  [style*="repeat(4,"]:not(.ui-table__head):not(.ui-table__row) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* In una griglia a colonna singola uno `span 2` creerebbe una seconda colonna
     implicita: i campi resterebbero affiancati e di larghezze diverse. */
  [style*="grid-column: span 2"] { grid-column: auto !important; }

  /* Padding interni (shorthand) — prima delle regole longhand sul gutter. */
  [style*="padding: 48px"] { padding: 24px 18px !important; }
  [style*="padding: 28px"] { padding: 20px !important; }
  /* schede (furgoni, ordini, riepiloghi): più spazio utile per il contenuto */
  [style*="padding: 26px"] { padding: 18px !important; }
  [style*="padding: 24px"] { padding: 18px !important; }
  main[style*="padding: 32px 36px 56px"] { padding: 20px 18px 40px !important; }

  /* Gutter di pagina = --ivis-gutter-mobile. */
  [style*="px 48px"], [style*="padding: 0 48px"] {
    padding-left: var(--ivis-gutter-mobile) !important;
    padding-right: var(--ivis-gutter-mobile) !important;
  }

  /* Ritmo verticale delle sezioni più alte. */
  [style*="padding: 72px 48px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  [style*="padding: 60px 48px"] { padding-top: 34px !important; padding-bottom: 34px !important; }
  [style*="padding: 56px 48px"] { padding-top: 32px !important; padding-bottom: 32px !important; }
  [style*="padding: 40px 48px"] { padding-top: 26px !important; padding-bottom: 26px !important; }
  [style*="padding: 36px 48px"] { padding-top: 24px !important; padding-bottom: 24px !important; }
  [style*="padding: 22px 48px"] { padding-top: 16px !important; padding-bottom: 16px !important; }
  [style*="padding: 18px 48px"] { padding-top: 14px !important; padding-bottom: 14px !important; }

  [style*="font-size: 44px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 27px !important; }
  [style*="font-size: 36px"] { font-size: 25px !important; }
  [style*="font-size: 34px"] { font-size: 24px !important; }
  [style*="font-size: 30px"] { font-size: 23px !important; }

  /* In una sola colonna le spalle laterali (nav account, indice dei termini,
     riepilogo del carrello/checkout) diventano blocchi in cima: lo `position:
     sticky` inline le terrebbe incollate, con il contenuto che scorre sotto.
     L'header della vetrina resta sticky, è l'unica barra che deve seguire. */
  :not(header)[style*="position: sticky"] { position: static !important; }

  /* la barra in fondo al footer si impila */
  footer > div[style*="justify-content: space-between"] {
    flex-direction: column !important; align-items: flex-start !important; gap: 14px !important;
  }

  /* Righe orizzontali. Regola di base: NON vanno a capo — così «icona + frase»
     resta affiancato invece di spezzarsi su due righe.
     Solo i blocchi dichiarati flessibili (`flex: 1`) possono scendere sotto il
     proprio min-content: il testo va a capo dentro la colonna invece di
     allargare la riga, e `break-word` evita che una parola lunga sbordi.
     Niente `min-width: 0` generalizzato: schiaccerebbe badge e pill. */
  [style*="display: flex"]:not([style*="flex-direction: column"]) > [style*="flex: 1"] {
    min-width: 0; overflow-wrap: break-word;
  }

  /* Vanno a capo solo le righe che contengono elementi non comprimibili:
     controlli (pulsanti, form, link), pill/badge e blocchi `flex: 0 0 auto`
     (miniature del carrello, colonne di riepilogo). Le righe di solo testo
     restano su una riga e mandano a capo il testo al loro interno. */
  [style*="display: flex"]:not([style*="flex-direction: column"]):has(
    button, form, .ui-btn, a,
    > .ui-badge, > [style*="border-radius: 999px"], > [style*="flex: 0 0 auto"]
  ) {
    flex-wrap: wrap !important;
  }

  /* Le righe con space-between sono due cose insieme: barre «titolo ↔ azioni»
     e righe dati «etichetta ↔ valore» (schede tecniche, riepiloghi, totali).
     In entrambi i casi, quando vanno a capo serve un minimo di distanza e il
     secondo blocco deve restare allineato a destra, non incolonnarsi a sinistra. */
  [style*="justify-content: space-between"]:not([style*="flex-direction: column"]):not([style*="gap"]) {
    gap: 6px 12px !important;
  }
  /* `:not(:first-child)`: se la riga ha un solo blocco (il secondo è dentro un
     @if) allineare a destra sposterebbe l'intero titolo di pagina. */
  [style*="justify-content: space-between"]:not([style*="flex-direction: column"]) > :last-child:not(:first-child) {
    margin-left: auto; text-align: right;
  }

  /* passi del checkout: trattini di collegamento più corti */
  [style*="justify-content: center"][style*="gap: 12px"] > div[style*="width: 40px"] { width: 14px !important; }

  /* Schede con icona a sinistra (resi): in verticale l'icona mangia 64px di
     larghezza e il testo resta rientrato rispetto alle azioni sotto. Su telefono
     l'icona passa in cima e tutto il contenuto parte dal bordo della card. */
  /* `align-items: stretch`: in colonna il valore inline `flex-start` darebbe ai
     figli la larghezza del contenuto (max-content) → riga di 680px.
     `flex-wrap: nowrap`: in direzione colonna il wrap crea una SECONDA COLONNA
     a destra, e il blocco azioni finirebbe fuori dalla card. */
  .ivis-icon-card {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .ivis-icon-card > [style*="width: 44px"] { width: 36px !important; height: 36px !important; }
  /* in colonna il blocco azioni è già a piena larghezza: niente basis 100% (=altezza) */
  .ivis-icon-card > .ivis-card-actions { flex: 0 0 auto !important; }

  /* Colonna azioni di una scheda (resi, fermate del giro): passa sotto il
     contenuto — che così usa tutta la larghezza — e da colonna diventa una riga
     che va a capo: stato, data e pulsanti restano su una o due righe invece di
     incolonnarsi uno sotto l'altro. */
  .ivis-card-actions {
    flex: 1 0 100% !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
  }
  /* anche i gruppi annidati (azioni multiple, frecce di riordino) tornano in riga */
  .ivis-card-actions [style*="flex-direction: column"],
  .ivis-card-actions [style*="text-align: right"] {
    flex-flow: row wrap !important;
    align-items: center !important;
    text-align: left !important;
    margin-top: 0 !important;
  }

  /* Scelta della consegna: il prezzo passa su una riga sua, così la descrizione
     del metodo non resta compressa in una colonna di 180px. */
  .delivery-option-card > :last-child { flex: 1 0 100%; text-align: right; }

  /* Righe «miniatura + testo + prezzo» (carrello, articoli dell'ordine, conferma):
     il prezzo passa su una riga sua e allineato a destra, così il nome
     dell'articolo usa tutta la larghezza invece di una colonna di 180px.
     La riga si riconosce dalla miniatura: `overflow: hidden` + `flex: 0 0 auto`.
     `:nth-child(n+3)`: serve una terza colonna (miniatura + testo + prezzo);
     con due soli figli l'ultimo È il testo e finirebbe allineato a destra. */
  [style*="display: flex"]:not([style*="flex-direction: column"]):has(> [style*="overflow: hidden"][style*="flex: 0 0 auto"])
    > :last-child:nth-child(n+3):not([style*="flex: 1"]):not([style*="overflow: hidden"]) {
    flex: 1 0 100% !important;
    text-align: right !important;
  }
  /* Il testo accanto alla miniatura si restringe e va a capo dentro la colonna,
     invece di finire sotto la foto. */
  [style*="display: flex"]:not([style*="flex-direction: column"]):has(> [style*="overflow: hidden"][style*="flex: 0 0 auto"])
    > :nth-child(2):not([style*="overflow: hidden"]) {
    /* base 0 e non `auto`: la riga va a capo in base alla dimensione ideale del
       contenuto, quindi con `auto` il titolo lungo spingerebbe comunque a capo. */
    flex: 1 1 0%; min-width: 0; overflow-wrap: break-word;
  }

  /* miniatura del carrello: 110px lasciano troppo poco spazio al testo */
  [style*="width: 110px"][style*="height: 110px"] { width: 88px !important; height: 88px !important; }

  /* Codici, email e URL lunghi non devono allargare le schede.
     `break-word` e non `anywhere`: quest'ultimo spezza le parole a metà anche
     quando andrebbero a capo normalmente.
     Le celle delle tabelle sono escluse: lì la larghezza è garantita dallo
     scroll orizzontale, e spezzare «#ORD-47089351» a metà è solo peggio. */
  .ivis-admin-shell { overflow-wrap: break-word; }
  .ui-table__head, .ui-table__row { overflow-wrap: normal; }

  /* banner cookie a piena larghezza */
  #cookie-consent > div { margin: 0 12px 12px !important; padding: 18px 18px !important; }
}

/* ============================================================
   Telefono stretto (≤ 620px): nella barra resta il solo monogramma «IVIS»,
   altrimenti la scritta «Elettrodomestici» spinge carrello e burger a capo.
   Nel footer la scritta resta (markup diverso, senza questa classe).
   ============================================================ */
@media (max-width: 620px) {
  header .ivis-logo-word { display: none; }

  /* Header di accesso/verifica: il logo è centrato da uno spaziatore elastico,
     che però toglie spazio al selettore lingua e fa uscire la barra dallo
     schermo. Su telefono rinunciamo al centraggio: logo a sinistra, lingua a
     destra. */
  .ivis-auth-header .ivis-auth-spacer { display: none; }
}