/* ============================================================
   RESPONSIVE.CSS — additivo a styles.css
   Caricato DOPO styles.css per fare override mirati.
   ============================================================
   Breakpoint:
     mobile:  ≤ 767 px
     tablet:  768 – 1023 px
     desktop: ≥ 1024 px
   ============================================================ */

/* ===== Utility classes responsive ===== */
.hide-on-mobile { display: initial; }
.show-on-mobile { display: none !important; }
.hide-on-tablet { display: initial; }
.show-on-tablet { display: none !important; }

@media (max-width: 767px) {
  .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: initial !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-on-tablet { display: none !important; }
  .show-on-tablet { display: initial !important; }
}

/* ===== Touch device fixes ===== */
@media (max-width: 1023px) {
  /* Tap target più ampi su touch */
  button, a, input, select { touch-action: manipulation; }
  /* Disattiva tap highlight grigio iOS */
  * { -webkit-tap-highlight-color: transparent; }
  /* Migliora il rendering del font su retina mobile */
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  /* Disattiva user-select su elementi cliccabili (evita selezione accidentale al tap) */
  button, .btn, label, [role="button"] { user-select: none; -webkit-user-select: none; }
}

/* ===== Scroll orizzontale (per tabelle / liste in mobile) ===== */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.scroll-x > * { scroll-snap-align: start; }

/* ===== Bottom sheet (modali leggeri mobile) ===== */
.bottom-sheet-backdrop {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(15,17,21,.55);
  backdrop-filter: blur(3px);
  animation: bsFadeIn .18s ease;
}
.bottom-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,.18);
  max-height: 90vh;
  display: flex; flex-direction: column;
  animation: bsSlideUp .22s cubic-bezier(.2,.7,.3,1);
}
.bottom-sheet-handle {
  width: 38px; height: 4px;
  background: var(--line);
  border-radius: 99px;
  margin: 10px auto 4px;
  flex-shrink: 0;
}
.bottom-sheet-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 18px 28px;
}

/* ===== Full-screen sheet (modali pesanti mobile) ===== */
.fullscreen-sheet {
  position: fixed; inset: 0; z-index: 100;
  background: var(--surface);
  display: flex; flex-direction: column;
  animation: fsSlideUp .22s cubic-bezier(.2,.7,.3,1);
}
.fullscreen-sheet-header {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 1;
}
.fullscreen-sheet-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@keyframes bsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bsSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fsSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ===== Bottom navigation bar (mobile) ===== */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: stretch;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(0,0,0,.04);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  padding: 9px 4px 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  color: var(--ink-3);
  background: transparent;
  border: 0; outline: 0;
  cursor: pointer;
  transition: color .15s;
}
.bottom-nav-item.active { color: var(--red); }
.bottom-nav-item-icon { width: 22px; height: 22px; }

/* ===== Spazio per la bottom nav nel main content (solo mobile) ===== */
@media (max-width: 767px) {
  /* Padding-bottom su TUTTI gli scroll principali per non essere tagliati dal bottom-nav.
     Escludiamo scroll interni a modali/drawer/popup con :not(). */
  .has-bottom-nav .scroll:not(.modal-mobile):not(.no-bottom-pad) {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* ===== Mobile drawer (hamburger menu, slide da sinistra) ===== */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15,17,21,.45);
  backdrop-filter: blur(3px);
  animation: bsFadeIn .18s ease;
}
.drawer-panel {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
  width: 88vw; max-width: 320px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  animation: drawerSlide .22s cubic-bezier(.2,.7,.3,1);
  box-shadow: 4px 0 24px rgba(0,0,0,.12);
}
@keyframes drawerSlide { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ===== Mobile header (replaces desktop header on mobile) ===== */
.mobile-header {
  position: sticky; top: 0; z-index: 30;
  height: 50px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.mobile-header-title {
  flex: 1; min-width: 0;
  font-family: var(--font-display);
  font-size: 15.5px; font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-icon-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  cursor: pointer; flex-shrink: 0;
}

/* Su iOS, gli input con font < 16px causano zoom automatico al focus.
   Forziamo 16px minimo su mobile per tutti gli input testuali. */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ===== Dark mode: garantisce contrasto su TUTTI i componenti ===== */
.theme-dark {
  /* Hardcoded fallback: se --ad-* non definite, uso valori diretti */
  --bg: #0d1017;
  --surface: #141821;
  --surface-2: #1a1f29;
  --line: rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.05);
  --ink: #f0f2f7;              /* testi principali (numeri, titoli) — BIANCO */
  --ink-2: rgba(232,236,246,.85);
  --ink-3: rgba(232,236,246,.62);
  --ink-4: rgba(232,236,246,.45);
  --red-tint: rgba(255,64,90,.12);
  --red-tint-2: rgba(255,64,90,.28);
  /* State colors senza blu (unificati al brand rosso) */
  --st-disponibile: #4ade80;    /* verde */
  --st-prenotato:   #fb923c;    /* arancio */
  --st-inarrivo:    #eab308;    /* ambra/giallo (era blu) */
  --st-arrivo:      #eab308;    /* alias */
  --st-noleggiato:  #c084fc;    /* viola tenue */
  --st-trattativa:  #f472b6;    /* rosa */
  --st-venduto:     #94a3b8;    /* grigio */

  /* CRITICAL: color esplicito così i figli ereditano bianco invece del body nero */
  color: #f0f2f7;
  background: #0d1017;
}

/* Forza colore su TUTTI i figli senza color esplicito */
.theme-dark button,
.theme-dark input,
.theme-dark textarea,
.theme-dark select,
.theme-dark div,
.theme-dark span,
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark p,
.theme-dark a,
.theme-dark label {
  color: inherit;
}

/* Fix aggressivo: qualsiasi elemento in dark con background bianco → scuro */
.theme-dark [style*="background:#fff"],
.theme-dark [style*="background: #fff"],
.theme-dark [style*="background:#ffffff"],
.theme-dark [style*="background: #ffffff"] {
  background: #1a1f29 !important;
}
/* Testi hardcoded in nero → bianco */
.theme-dark [style*="color:#0d0f13"],
.theme-dark [style*="color: #0d0f13"],
.theme-dark [style*="color:#000"],
.theme-dark [style*="color: #000"] {
  color: #f0f2f7 !important;
}

/* Fix input/select/textarea in dark mode (placeholder visibile) */
.theme-dark input::placeholder,
.theme-dark textarea::placeholder,
.theme-dark select { color: rgba(232,236,246,.4); }

.theme-dark input,
.theme-dark textarea,
.theme-dark select {
  background: #171c25;
  color: #f0f2f7;
  border-color: rgba(255,255,255,.09);
}
.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus {
  background: #1f2530;
  border-color: var(--red);
}
/* Tabelle: bordi più visibili in dark */
.theme-dark table td,
.theme-dark table th { border-color: rgba(255,255,255,.09); }

/* Also nel light mode: cambia il blu del in-arrivo al giallo ambra */
:root {
  --st-inarrivo: #d97706;
  --st-arrivo: #d97706;
}

/* ===== Responsive: nasconde sidebar e header desktop su mobile (gestiti via JS, qui solo fallback) ===== */
@media (max-width: 1023px) {
  .desktop-sidebar { display: none !important; }
  .desktop-header { display: none !important; }
}

/* ===== Fix scroll horizontal indesiderato su mobile ===== */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
}

/* Nota: il login mobile ha un componente LoginMobile dedicato in login.jsx,
   quindi qui non servono più override CSS per il vecchio layout. */

/* ===== Product Editor mobile: forza tutte le griglie interne a 1 colonna ===== */
@media (max-width: 767px) {
  .product-editor-mobile div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Modali (ModalShell) su mobile: griglie a 1 colonna ===== */
@media (max-width: 767px) {
  .modal-mobile div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Dentro le modali riduco leggermente il gap dei form */
  .modal-mobile [style*="gap:16"],
  .modal-mobile [style*="gap: 16"] {
    gap: 12px !important;
  }
}

/* ===== Admin console: compattazione H2 headers su mobile ===== */
@media (max-width: 767px) {
  /* H2 dei sotto-componenti admin */
  .admin-content h2,
  div[style*="fontSize:19"][style*="fontWeight:800"],
  div[style*="fontSize: 19"][style*="fontWeight: 800"] {
    font-size: 17px !important;
  }
}

/* ===== Riduzione padding delle Field/label modali su mobile ===== */
@media (max-width: 767px) {
  .modal-mobile label {
    margin-bottom: 0 !important;
  }
}

/* ===== Eccezioni: dentro modali mobile, alcuni layout mantengono 3 colonne ===== */
@media (max-width: 767px) {
  .modal-mobile .summary-3col {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ===== Fix modale mobile: previeni scroll orizzontale interno ===== */
@media (max-width: 767px) {
  .modal-mobile,
  .modal-mobile > div {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* Tutti gli input dentro la modale — spingili a 16px minimo per evitare auto-zoom iOS */
  .modal-mobile input,
  .modal-mobile select,
  .modal-mobile textarea {
    font-size: 16px !important;
    max-width: 100% !important;
  }
  /* Range slider: già gestito, ma sicurezza */
  .modal-mobile input[type="range"] {
    max-width: calc(100vw - 40px) !important;
  }
  /* Text inside select options può essere lungo — evita che spinga la larghezza */
  .modal-mobile select {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ===== Admin: nascondi colonna "Azioni" (ultima colonna) su mobile ===== */
/* La colonna Azioni è sempre l'ultima. Uso :last-child dentro le griglie. */
@media (max-width: 767px) {
  /* Nasconde l'header "Azioni" (ultima span/th) e le celle azioni delle tabelle admin */
  .admin-hide-actions-mobile > *:last-child,
  .admin-hide-actions-mobile-row > *:last-child {
    display: none !important;
  }
}

/* ===== Dark mode: fix contrasto colori chip/badge specifici ===== */
.theme-dark {
  /* Colori stato con opacità per non essere troppo carichi */
  --st-disponibile: #4ade80;    /* verde più visibile */
  --st-prenotato:   #fb923c;    /* arancio più visibile */
  --st-arrivo:      #60a5fa;    /* blu */
  --st-noleggiato:  #a78bfa;    /* viola */
}

/* Chip bg pastel: se il bg era chiaro (#e8f6f0, #fdf0e0, #fdeef0), 
   in dark mode diventano bg scuro con testo colorato */
.theme-dark [style*="background:#e8f6f0"],
.theme-dark [style*="background: #e8f6f0"] {
  background: rgba(74,222,128,.12) !important;
}
.theme-dark [style*="background:#fdf0e0"],
.theme-dark [style*="background: #fdf0e0"] {
  background: rgba(251,146,60,.13) !important;
}
.theme-dark [style*="background:#fdeef0"],
.theme-dark [style*="background: #fdeef0"] {
  background: rgba(255,64,90,.14) !important;
}
.theme-dark [style*="background:#f3d9b0"],
.theme-dark [style*="background: #f3d9b0"] {
  background: rgba(251,146,60,.22) !important;
}
/* Nero-su-nero: label secondarie */
.theme-dark [style*="color:#7a1828"],
.theme-dark [style*="color: #7a1828"] {
  color: #fecaca !important;
}
.theme-dark [style*="color:#7a4600"],
.theme-dark [style*="color: #7a4600"] {
  color: #fed7aa !important;
}
.theme-dark [style*="color:#9a5800"],
.theme-dark [style*="color: #9a5800"] {
  color: #fdba74 !important;
}

/* ===== Dark mode: matricola badge nel catalogo ===== */
.theme-dark .matricola-badge {
  background: rgba(20,24,33,.92) !important;
  color: #f0f2f7 !important;
  border: 1px solid rgba(255,255,255,.15);
}

/* ===== Console admin: forza layout mobile-friendly per tutti i sotto-componenti ===== */
@media (max-width: 767px) {
  /* Sicurezza: 2 colonne → 1 colonna (una sopra l'altra) */
  .admin-sicurezza-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  /* Log/utenti/interruzioni/zone: tabelle troppo larghe → nascondere colonne meno importanti */
  .admin-table-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .admin-table-mobile > div[style*="grid-template-columns"] {
    display: none !important; /* nasconde header tabella */
  }
  /* Forza tutte le grid interne admin > 2 col a 1 col su mobile */
  .admin-force-1col > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  /* Default notifiche: nessuno scroll orizzontale */
  .admin-notif-mobile {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  .admin-notif-mobile > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
}

/* ===== Bottoni disabilitati: aspetto grigio non premibile ===== */
button:disabled,
button[disabled] {
  opacity: .5 !important;
  cursor: not-allowed !important;
  filter: grayscale(.4);
}

/* ============================================================
   STAMPA PDF — regole @media print
   Il foglio .pdf-print deve essere l'UNICA cosa visibile in stampa.
   ============================================================ */
@media print {
  /* Forza la stampa dei colori di sfondo (barra rossa, badge, ecc.) */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  /* Nasconde tutto tranne il foglio A4 */
  body * {
    visibility: hidden !important;
  }
  .pdf-print,
  .pdf-print * {
    visibility: visible !important;
  }
  /* Il foglio occupa tutta la pagina, senza scale/ombre */
  .pdf-print {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    min-height: auto !important;
    max-width: none !important;
    transform: none !important;
    box-shadow: none !important;
    animation: none !important;
    margin: 0 !important;
  }
  /* Nasconde esplicitamente overlay/toolbar */
  .no-print {
    display: none !important;
  }
  /* L'overlay del PDF: rendilo statico e visibile per far stampare il foglio dentro */
  .pdf-overlay {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    background: #fff !important;
    padding: 0 !important;
    inset: auto !important;
    backdrop-filter: none !important;
    overflow: visible !important;
  }
  @page {
    size: A4;
    margin: 10mm;   /* margini di sicurezza: il contenuto non arriva a filo del taglio */
  }
  html, body {
    background: #fff !important;
    width: auto;
    height: auto;
  }
  /* In stampa il foglio non ha altezza fissa: lascia che il contenuto fluisca
     naturalmente sulle pagine A4 (il browser impagina da solo). */
  .pdf-print {
    height: auto !important;
    min-height: 0 !important;
  }
  /* Evita che le singole righe/sezioni vengano spezzate a metà tra due pagine */
  .pdf-print .pdf-no-break,
  .pdf-print img,
  .pdf-print h1 {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .pdf-print .pdf-attr-row {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  /* La header rossa non si spezza */
  .pdf-print > div > div:first-child {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}