/* ==========================================================================
   Themis-One - foglio di stile per tablet e smartphone
   Caricato da base.html/login.html con media="(max-width: 900px)": sui
   monitor desktop il browser non lo applica, quindi style.css resta
   l'unico riferimento per la versione desktop.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Tablet e finestre strette (<= 900px)                                    */
/* ---------------------------------------------------------------------- */
:root { --topbar-h: 64px; }

/* Senza min-width:0 un figlio scorrevole (tabelle, tab) allarga l'intera
   colonna invece di scorrere al suo interno */
.main-area { min-width: 0; }
.settings-grid,
.panel-grid { grid-template-columns: minmax(0, 1fr); }

.page-content { padding: 22px 20px 40px; }
.app-footer { padding: 14px 20px; }

/* Topbar: si tengono solo gli elementi essenziali */
.topbar { padding: 0 18px; gap: 12px; }
.topbar-brand { gap: 10px; min-width: 0; }
.topbar-brand > img { width: 40px; height: 40px; }
.topbar-brand-text,
.topbar-group-badge,
.account-text { display: none; }
.topbar-right { gap: 10px; }

/* Le colonne che "occupano" 2-3 celle non devono creare colonne implicite
   quando la griglia ne ha meno */
.field.span-2,
.field.span-3 { grid-column: 1 / -1; }

.map-side { max-width: none; }

/* Testo descrittivo dentro una .field: niente flex, cosi' i <strong> restano in riga */
.field.hint { display: block; }

.profile-header { flex-wrap: wrap; padding: 18px 20px; }
.profile-actions { flex-wrap: wrap; }

/* Le tab scorrono in orizzontale invece di andare a capo */
.tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-link { white-space: nowrap; flex-shrink: 0; }

.table-wrap { -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------- */
/* Smartphone (<= 640px)                                                   */
/* ---------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --topbar-h: 58px;
    --bottomnav-h: 62px;
  }

  html, body { font-size: 14.5px; }

  /* La sidebar diventa una barra di navigazione fissa in basso */
  .sidebar {
    display: flex;
    top: auto;
    right: 0;
    width: 100%;
    height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
    padding: 0 6px env(safe-area-inset-bottom);
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--navy-900);
    box-shadow: 0 -6px 20px rgba(11, 32, 56, 0.18);
    z-index: 60;
  }
  .sidebar::-webkit-scrollbar { display: none; }

  .sidebar-logo { display: none; }
  .sidebar-nav,
  .sidebar-footer { display: contents; }

  .sidebar-link {
    flex: 1 0 58px;
    max-width: 84px;
    width: auto;
    height: 52px;
    flex-direction: column;
    gap: 3px;
    border-radius: 10px;
  }

  .sidebar-link .icn { width: 21px; height: 21px; }

  /* Il tooltip diventa l'etichetta sotto l'icona */
  .sidebar-link .tooltip {
    position: static;
    opacity: 1;
    transform: none;
    background: none;
    box-shadow: none;
    padding: 0;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    font-weight: 600;
    color: inherit;
  }

  .sidebar-link.active::before {
    left: 14px;
    right: 14px;
    top: -5px;
    bottom: auto;
    width: auto;
    height: 3px;
  }

  .form-logout:has(.sidebar-link) { flex: 1 0 58px; max-width: 84px; display: flex; }
  .form-logout .sidebar-link { flex: 1; color: #9fb3cf; }

  /* Spazio per non coprire il contenuto con la barra in basso */
  .main-area { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }
  .page-content { padding: 18px 14px 32px; }
  .app-footer { padding: 12px 14px; }

  /* Topbar compatta */
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-brand > img { width: 34px; height: 34px; }
  .topbar-area {
    margin-left: 0;
    padding: 5px 10px;
    min-width: 0;
    font-size: 12.5px;
  }
  .topbar-area > span:not(.topbar-area-cambia) {
    display: block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-right { gap: 6px; }
  .topbar-right > .form-logout { display: none; } /* "Esci" e' nella barra in basso */
  .account-avatar { width: 34px; height: 34px; font-size: 13px; }
  .notif-button { width: 36px; height: 36px; }

  .weather-widget-trigger,
  .traffic-widget-trigger { padding: 7px 10px; font-size: 12px; gap: 6px; }
  /* Solo icone: i dettagli restano nel popover al tocco */
  #weather-text,
  #traffic-text { display: none; }
  .weather-widget-trigger,
  .traffic-widget-trigger { width: 36px; height: 36px; padding: 0; justify-content: center; }

  /* I popover si aprono a tutta larghezza sotto la topbar */
  .weather-popover,
  .traffic-popover {
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
  }

  /* Messaggi flash a tutta larghezza */
  .flash-stack { top: 12px; left: 12px; right: 12px; max-width: none; }

  /* Intestazioni e toolbar */
  .page-header { margin-bottom: 16px; }
  .page-header h1 { font-size: 21px; }
  .page-header .subtitle { font-size: 13px; }

  .page-toolbar { gap: 10px; margin-bottom: 16px; }
  .page-toolbar > * { width: 100%; }
  .search-box,
  .combobox { min-width: 0; max-width: none; width: 100%; flex: 1 1 100%; }
  .search-box { padding: 10px 14px; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions .btn { flex: 1 1 auto; justify-content: center; }
  .toolbar-filter { flex-wrap: wrap; }
  .toolbar-filter select { max-width: 100%; }

  /* Card e pannelli */
  .stat-grid { gap: 12px; margin-bottom: 16px; }
  .stat-card { padding: 16px; }
  .stat-icon { width: 44px; height: 44px; border-radius: 12px; }
  .stat-value { font-size: 21px; }

  .panel-grid { gap: 14px; }
  .panel,
  .card-simple,
  .form-card { padding: 16px; }
  .panel-header { flex-wrap: wrap; gap: 6px; }

  .map-layout { gap: 20px; }
  .map-svg-wrap { max-width: 100%; }

  .bars { gap: 10px; }

  /* Tabelle: scorrono in orizzontale invece di schiacciare le colonne */
  .table-wrap { margin: 0 -16px; padding: 0 16px; }
  .table-wrap > .data-table:has(th:nth-child(5)) { min-width: 640px; }
  .data-table td { padding: 10px; font-size: 13.5px; }
  .data-table th { padding: 9px 10px; }

  /* Form: input a 16px per evitare lo zoom automatico di iOS */
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="number"],
  .field input[type="date"],
  .field input[type="password"],
  .field input[type="file"],
  .field select,
  .field textarea,
  .search-box input,
  .toolbar-filter select { font-size: 16px; }

  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; justify-content: center; }

  .btn { padding: 11px 16px; }

  /* Profilo autista */
  .profile-header { gap: 14px; padding: 16px; }
  .profile-header .avatar-lg { width: 64px; height: 64px; font-size: 21px; border-radius: 16px; }
  .profile-meta { min-width: 0; flex-basis: calc(100% - 80px); }
  .profile-meta h2 { font-size: 18px; }
  .profile-meta .meta-row { gap: 6px 14px; }
  .profile-actions { width: 100%; }
  .profile-actions .btn { flex: 1 1 auto; justify-content: center; }

  .expiry-alert { padding: 14px; gap: 12px; }
  .expiry-alert-icon { width: 40px; height: 40px; }
  .expiry-alert-body > strong { font-size: 15px; }
  .expiry-chip { flex: 1 1 100%; }

  /* Scelta area aziendale */
  .area-grid { grid-template-columns: 1fr; gap: 12px; }
  .area-card { padding: 16px; gap: 12px; }
  .area-card-icon { width: 46px; height: 46px; }

  /* Popup quasi a tutto schermo */
  .modal,
  .modal-wide {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 40px);
    padding: 18px 16px;
  }
  .modal-summary > div,
  .modal-booking > div { flex-wrap: wrap; }

  /* Login */
  .login-shell { padding: 16px 16px 64px; }
  .login-card { padding: 28px 22px; }
  .login-logo img { width: 200px; }
}

/* Telefoni stretti: barra in basso solo con icone, cosi' tutte le voci
   (Impostazioni ed Esci comprese) restano visibili senza scorrere */
@media (max-width: 420px) {
  :root { --bottomnav-h: 56px; }
  .sidebar { justify-content: space-between; padding-left: 4px; padding-right: 4px; }
  .sidebar-link,
  .form-logout:has(.sidebar-link) { flex: 1 1 0; min-width: 0; height: 46px; }
  .sidebar-link .tooltip { display: none; }
  .sidebar-link .icn { width: 22px; height: 22px; }
  .sidebar-link.active::before { left: 10px; right: 10px; top: -5px; }
}

/* Dispositivi touch: niente effetti hover "appiccicosi" */
@media (hover: none) {
  .sidebar-link:hover { background: none; color: #9fb3cf; }
  .sidebar-link.active:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
  .expiry-chip:hover { transform: none; }
}