/*
 * Adattamento a schermi bassi, portatili, tablet e telefoni.
 * Caricato per ultimo: le sue regole prevalgono su quelle degli altri file.
 */

@media (max-height: 900px) {
  /* la sidebar scorre da sola invece di allungare tutta la pagina oltre la finestra;
     il riquadro logo non sporge (verrebbe tagliato dallo scroll) */
  .sidebar { overflow-y: auto; overflow-x: hidden; }
  .brand-logo-card { width: 100% !important; }
}
@media (max-height: 760px) {
  /* il riquadro promo in fondo al menu restava tagliato a metà: sotto questa altezza non serve */
  .side-promo { display: none !important; }
}
@media (max-height: 720px) {
  .topbar { padding-top: 10px; padding-bottom: 10px; }
  .stepper-wrap { padding: 10px 32px 8px; }
  .step-hint { display: none; }
  .step-label { margin-top: 6px; }
}
@media (max-width: 1280px) {
  .content { padding: 8px 20px 28px; }
  .filters { flex-wrap: wrap; }
  .tabs { overflow-x: auto; scrollbar-width: thin; }
  .tab { white-space: nowrap; flex-shrink: 0; }
  /* barre filtri a 6 colonne (Richieste / Prenotazioni): 3 per riga invece di sbordare a destra */
  .content [style*="grid-template-columns:1.3fr 1.3fr 1fr 1fr 1fr auto"],
  .content [style*="grid-template-columns:1.2fr 1.2fr 1fr 1fr 1fr auto"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .content [style*="grid-template-columns"] > * { min-width: 0; }
}
@media (max-width: 1100px) {
  /* sotto i 1100 px (ad esempio un portatile con ridimensionamento al 150%) la barra in alto
     non ci sta: niente scritta «online», menu profilo e nome utente accorciati, margini più stretti */
  .topbar { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .topbar-actions { gap: 9px; }
  .topbar-actions > span:first-child { display: none; }
  /* i tre elementi larghi vanno limitati a mano: un <select> e un chip non scendono
     sotto la larghezza del testo piu lungo se non glielo si impone */
  .breadcrumb { max-width: 30%; }
  #profile-switch { max-width: 126px; padding-left: 10px; padding-right: 10px; }
  .user-chip { min-width: 0; padding-left: 8px; padding-right: 10px; }
  .user-chip span { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .feat-row, .welcome-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr !important; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 252px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.4); }
  .brand-logo-card { width: 100% !important; }
  .side-promo { position: relative !important; }
  .hamburger { display: inline-flex; align-items: center; }
  body.role-sm .hamburger { display: none; }
  #sidebar-overlay.show { display: block; }
}
@media (max-width: 600px) {
  .content { padding: 16px 13px 64px !important; overflow-x: hidden; }
  .topbar { flex-wrap: wrap; gap: 8px; height: auto; padding-top: 8px; padding-bottom: 8px; }
  .topbar-actions { gap: 8px !important; flex-wrap: wrap; }
  .ai-hero-inputwrap { flex-wrap: wrap; }
  .ai-hero-inputwrap input, .ai-hero-btn { width: 100%; }
  /* qualsiasi griglia a colonne fisse (form, cockpit prenotazione, KPI, modali) → 1 colonna */
  [style*="grid-template-columns"], .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  /* tabelle: scroll orizzontale invece di sfondare */
  .voci-table, table { display: block; overflow-x: auto; white-space: nowrap; }
  /* modali quasi a tutto schermo, padding ridotto */
  #modal-opzioni > div { padding: 10px !important; }
  #modal-opzioni > div > div { max-height: 92vh !important; }
  .feat-row { grid-template-columns: 1fr !important; }
  /* niente scroll orizzontale di pagina: chi è largo scorre nel suo box */
  .main { overflow-x: hidden; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .tabs .tab { white-space: nowrap; flex-shrink: 0; }
  /* i figli di grid/flex non devono sfondare (min-width:auto di default) */
  .content [style*="grid-template-columns"] > * { min-width: 0; }
  .glass { min-width: 0; max-width: 100%; }
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .filters { flex-wrap: wrap; }
  /* riepilogo wizard: colonna singola */
  .quote-grid { grid-template-columns: 1fr !important; }
  div[style*="max-width:700px"], div[style*="max-width:720px"] { max-width: 96vw !important; }
  /* check-in grid del Site Manager: scorre nel suo contenitore */
  #checkin-grid { overflow-x: auto; }
  .stat-row { flex-wrap: wrap; }
  .btn { max-width: 100%; }
  /* KPI: cifre grandi (es. 79.400 €) senza a-capo né tagli sul bordo card */
  .kpi-value { font-size: 19px; white-space: nowrap; }
  .kpi { min-width: 0; overflow: hidden; }
  /* le griglie sono a 1 colonna → gli span-2/3 inline creerebbero una
     colonna implicita che sborda a destra (es. nelle finestre modali) */
  [style*="grid-column"] { grid-column: auto !important; }
  /* backdrop modali (anche quelli con stile inline): margini da telefono */
  .modal-backdrop, div[id^="modal-"][style*="position:fixed"] { padding: 12px !important; }
  .modal-card { max-width: calc(100vw - 24px) !important; }
}