/* ============================================================================
   ICT OSA — livello mobile / PWA (iPhone, Android, tablet).
   Si aggiunge a shell.css e grid.css senza sostituirli.
   ============================================================================ */

/* Safe-area (notch) quando l'app è a schermo intero (standalone) */
.app-header { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.app-content { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* Evita lo zoom automatico di iOS sui campi (font < 16px) e rende i controlli comodi al tocco */
@media (max-width: 820px) {
  input, select, textarea, button { font-size: 16px; }
  .app-content { padding-left: 14px; padding-right: 14px; }
}

/* Target di tocco più ampi su telefono */
@media (max-width: 640px) {
  .btn, .btn-primary, .mag-btn, .dis-btn,
  button[type="submit"], .grid-actions a {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .app-nav__link, .app-nav__sub a, .app-nav__toggle { min-height: 44px; }
  /* i form a griglia diventano una colonna */
  .fgrid, .att-add .g { grid-template-columns: 1fr !important; }
  .dis-filters, .mag-filters { flex-direction: column; align-items: stretch; }
  .dis-filters > div, .mag-filters > div { width: 100%; }
  .dis-filters input, .dis-filters select,
  .mag-filters input, .mag-filters select { width: 100%; }
  /* tab scrollabili orizzontalmente senza rompere il layout */
  .mag-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .mag-tabs a { display: inline-block; }
}

/* Contenitore tabelle: scroll orizzontale controllato (fallback quando non "a schede") */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------------
   Tabelle "a schede" su telefono: le righe diventano card leggibili.
   Applicare class="... t-cards" alla <table> e data-label="Etichetta" ai <td>.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  table.t-cards, table.t-cards tbody, table.t-cards tr, table.t-cards td { display: block; width: 100%; }
  table.t-cards thead { position: absolute; left: -9999px; }        /* nasconde l'intestazione */
  table.t-cards tr {
    border: 1px solid var(--g-line, #e6e9ee); border-radius: 12px; background: var(--g-card, #fff);
    margin: 0 0 10px; padding: 6px 14px; box-shadow: 0 1px 3px rgba(20,30,45,.05);
  }
  table.t-cards td {
    border: none !important; padding: 8px 0 !important;
    display: flex; justify-content: space-between; gap: 14px; text-align: right;
    align-items: center; min-height: 0;
  }
  table.t-cards td + td { border-top: 1px solid var(--g-line, #f2f4f7) !important; }
  table.t-cards td::before {
    content: attr(data-label); color: var(--g-dim, #6b7683); font-weight: 600;
    text-align: left; flex: 0 0 42%; white-space: nowrap;
  }
  table.t-cards td[data-label=""]::before,
  table.t-cards td:not([data-label])::before { content: ""; }
  table.t-cards td:empty { display: none; }
}

/* Scanner QR/barcode (overlay fotocamera) */
.scan-ov { position: fixed; inset: 0; z-index: 9999; background: #000; display: none; flex-direction: column; }
.scan-ov.open { display: flex; }
.scan-ov video { flex: 1; width: 100%; object-fit: cover; }
.scan-ov__bar { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; color: #fff; background: #0f2b25; }
.scan-ov__bar b { font-size: .95rem; }
.scan-ov__close { background: rgba(255,255,255,.15); color: #fff; border: none; border-radius: 8px;
  padding: 9px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.scan-ov__hint { color: #cfe3dc; font-size: .82rem; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); text-align: center; }
.scan-btn { display: inline-flex; align-items: center; gap: 6px; }

/* Densità "compatta" (preferenza utente) */
.dens-compatta .app-content{padding-top:12px}
.dens-compatta .card,.dens-compatta .mag-card,.dens-compatta .dis-card,.dens-compatta .acc-card{padding:14px}
.dens-compatta .kpi{padding:13px 14px 12px}
.dens-compatta .kpis,.dens-compatta .wrow{gap:10px;margin-bottom:14px}