/* ============================================================
   Woolab Contract Suite — Responsive layer (mobile/tablet)
   ------------------------------------------------------------
   CSS responsive CENTRALIZZATO per evitare patch sparse nelle view.
   Caricato DOPO gli stili inline di layouts/main.php (admin) e
   layouts/public.php (pagine pubbliche), quindi le regole qui
   sotto integrano/sovrascrivono solo sotto le soglie mobile/tablet.

   Breakpoint: 1024px (tablet), 768px (mobile / sidebar a scomparsa),
   480px (smartphone piccoli).

   Non altera il layout desktop: tutte le regole di layout sono
   dentro @media; a livello base si definiscono solo elementi nuovi
   (hamburger, overlay, .detail-grid) e safety net anti-scroll.
   ============================================================ */

/* --- Safety net: niente scroll orizzontale accidentale --- */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* --- Griglia dettaglio (preventivo/contratto): 2 colonne desktop --- */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

/* --- Hamburger + overlay (admin): nascosti su desktop --- */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: 4px; padding: 0;
  background: none; border: 1px solid var(--border, #dde2ea);
  border-radius: 7px; color: var(--primary, #0a2342); cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; display: block; }
.nav-overlay { display: none; }

/* ===================== TABLET (<= 1024px) ===================== */
@media (max-width: 1024px) {
  .main-content { padding: 18px; }
  .stats-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1.6fr 1fr; }
}

/* ===================== MOBILE (<= 768px) ===================== */
@media (max-width: 768px) {
  /* Sidebar a scomparsa via hamburger (la regola base translateX(-100%)
     e' negli stili inline di main.php; qui aggiungo transizione/ombra/z) */
  .nav-toggle { display: inline-flex; }
  .sidebar {
    width: 260px; z-index: 120;
    transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.35);
  }
  .sidebar.open { transform: translateX(0); }
  .nav-overlay.show {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 110;
  }
  /* Tap target piu' grandi nella nav */
  .nav-item a { padding: 12px 16px; }

  .topbar { padding: 0 12px; }
  .topbar-title { font-size: 14px; }
  .main-content { padding: 16px 14px; }

  /* Header pagina: impila titolo e azioni */
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-header > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }

  /* Form e filtri: una colonna, controlli a piena larghezza */
  .form-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .form-control { max-width: none; width: 100%; }

  /* Dettaglio preventivo/contratto: una colonna */
  .detail-grid { grid-template-columns: 1fr; }

  /* Card header che impila titolo + azioni */
  .card-header { flex-wrap: wrap; gap: 10px; }

  /* Tabelle: scroll orizzontale fluido, niente colonne schiacciate */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data-table th, table.data-table td { white-space: nowrap; }

  /* Stat cards 2 per riga */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* ----- Pagine pubbliche (accettazione preventivo/contratto) ----- */
  .pub-header { padding: 14px 18px; }
  .pub-body { margin: 18px auto; padding: 0 14px; }
  .card-body { padding: 18px; overflow-x: auto; }
  .meta-table td:first-child { width: 120px; }
  table.items th, table.items td { padding: 8px 9px; font-size: 12px; }
  .otp-input { font-size: 24px; letter-spacing: 8px; }
}

/* ===================== SMARTPHONE (<= 480px) ===================== */
@media (max-width: 480px) {
  .main-content { padding: 14px 12px; }
  .page-header h1 { font-size: 18px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card .stat-val { font-size: 24px; }
  .topbar-actions .btn-primary { padding: 7px 10px; font-size: 12px; }
  .card-body { padding: 16px; }
  .pub-header { padding: 12px 14px; }
  .pub-body { padding: 0 10px; }
}