/* responsive.css — breakpoints e switch tra le 3 navigazioni:
     >  1024px  → topbar desktop
     ≤ 1024px e > 768px → tablet sidebar verticale
     ≤  768px  → mobile header + bottom nav

   Le tre nav sono sempre presenti nel DOM, nascoste/mostrate qui. */

/* ─── DESKTOP (default, > 1024px) ─────────────────────────────────────── */
.tablet-sidebar { display: none; }
.mobile-header  { display: none; }
.bottom-nav     { display: none; }

/* ─── TABLET (≤ 1024px) ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .topbar { display: none; }

  .tablet-sidebar { display: flex; }

  /* La sidebar è fixed: spostiamo l'app a destra e creiamo spazio */
  body { padding-left: var(--tablet-sidebar-w); }
  .page { padding: 16px 18px 28px; }

  /* Mobile menu / bottom nav restano nascosti al tablet */
  .mobile-header, .bottom-nav { display: none; }

  /* Tablet: tabella scrollabile orizzontalmente quando troppo larga */
  .data-table, .card table { display: block; overflow-x: auto; }
}

/* ─── MOBILE (≤ 768px) ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar         { display: none; }
  .tablet-sidebar { display: none; }

  body { padding-left: 0; padding-bottom: var(--bottom-nav-h); }

  .mobile-header { display: flex; }
  .bottom-nav    { display: block; }

  .page {
    padding: 14px 12px 24px;
    max-width: 100%;
  }
  .page-title {
    font-size: var(--fs-xl);
    margin: 0 0 12px;
  }

  /* Card più compatti */
  .card {
    padding: 12px;
    border-radius: var(--radius);
  }

  /* Stat cards a tutta larghezza in colonna */
  .stats-row { gap: 8px; }
  .stat-card { flex-basis: calc(50% - 4px); }

  /* Toolbar wrap-friendly */
  .toolbar { padding: 8px 0; gap: 8px; }
  .toolbar > * { flex: 1 1 auto; min-width: 0; }

  /* Grid form: sempre singola colonna */
  .form-grid { grid-template-columns: 1fr; }

  /* Modali: full screen */
  .modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .modal-body { padding: 14px; }

  /* Riga prodotto/righe ordine: in colonna su mobile */
  .modal .riga-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 0;
  }

  /* Toast leggermente sopra la bottom-nav */
  .toast {
    bottom: calc(var(--bottom-nav-h) + 16px);
    right: 12px; left: 12px;
    text-align: center;
  }

  /* Bell panel: full width */
  #bell-panel {
    position: fixed !important;
    top: var(--mobile-header-h) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }

  /* Tablet sidebar overlay quando aperta su mobile (fallback) */
  .tablet-sidebar.open {
    display: flex;
    position: fixed;
    z-index: 200;
  }
}

/* ─── EXTRA SMALL (≤ 420px) — telefoni stretti ─────────────────────────── */
@media (max-width: 420px) {
  .stat-card { flex-basis: 100%; }
  .bottom-nav-item { font-size: 9px; }
  .bottom-nav-item .nav-icon { font-size: 16px; }
  .page-title { font-size: var(--fs-lg); }
}

/* ─── PRINT ────────────────────────────────────────────────────────────── */
@media print {
  body { padding: 0 !important; background: #fff; }
  .topbar, .tablet-sidebar, .mobile-header, .bottom-nav,
  .toolbar, .modal-bg, .confirm-bg, .no-print { display: none !important; }
  .page { display: block !important; max-width: 100%; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  table { font-size: 11px; }
}