/* =====================================================================
   Studio Coletto — adattamento per telefono  (v2)
   =====================================================================
   Si attiva solo sotto i 700px: su computer e sul tabellone non cambia
   nulla. Collegare in <head> DOPO </style>:
       <link rel="stylesheet" href="mobile.css">
   ===================================================================== */

@media (max-width: 700px) {

  /* ---------- INTESTAZIONE ----------
     Prima titolo e chip utente si sovrapponevano: la barra non aveva
     abbastanza spazio e nessuno dei due elementi cedeva. */

  body header { height: 52px; padding: 0 9px; gap: 8px; }

  body .header-brand { flex: 1 1 auto; min-width: 0; overflow: hidden; gap: 9px; }
  body .header-right { flex: 0 0 auto; gap: 6px; }

  /* Il logo dice già "Coletto": il titolo scritto è ridondante */
  body .header-title, body .header-sub { display: none; }
  body .header-logo { width: 82px; height: 32px; border-radius: 7px; }

  body .user-chip { padding: 5px 10px; font-size: 12px; max-width: 108px; }
  body .user-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body .admin-badge { display: none; }
  body .header-right .btn { padding: 8px 11px; font-size: 12px; }

  body nav { top: 52px; padding: 0 5px; }
  body .nav-tab { padding: 12px 10px; font-size: 12px; }
  body #tab-refresh { margin-left: 0 !important; }

  body .main { padding: 13px 10px 40px; }
  body .page-title { font-size: 17px; margin-bottom: 13px; }


  /* ---------- STATISTICHE: sempre due colonne, compatte ---------- */

  body .stats-row { grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 13px; }
  body .stat-card { padding: 9px 11px; border-radius: 10px; }
  body .stat-num { font-size: 20px; }
  body .stat-label { font-size: 9px; letter-spacing: .4px; margin-top: 1px; }


  /* ---------- FILTRI E RICERCA ---------- */

  body .filter-bar { gap: 6px; margin-bottom: 11px; }
  body .filter-chip { padding: 7px 14px; font-size: 12.5px; }
  body .search-wrap { width: 100%; margin-left: 0; }
  /* 16px impedisce a iPhone di ingrandire la pagina quando si scrive */
  body .search-wrap input { width: 100%; min-width: 0; font-size: 16px; padding: 10px 14px 10px 34px; }


  /* ---------- SCHEDA RICHIESTA ----------
     barra di avanzamento e stato affiancati: una riga in meno,
     così ne entrano di più sullo schermo. */

  body .request-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 10px; padding: 11px 13px; border-left-width: 5px;
  }

  body .request-row .rr-tipo {
    flex: 0 0 100%; width: auto; margin: 0;
    font-size: 10px; letter-spacing: .4px;
    white-space: normal; overflow: visible;
  }

  body .request-row .rr-main { flex: 0 0 100%; min-width: 0; }
  body .request-row .rr-cliente { font-size: 15.5px; white-space: normal; line-height: 1.25; }
  body .request-row .rr-date { font-size: 11.5px; margin-top: 3px; }
  body .request-row .rr-flag { font-size: 11.5px; line-height: 1.35; align-items: flex-start; margin-top: 4px; }
  body .request-row .rr-flag i { margin-top: 2px; }

  body .request-row .rr-progress-wrap { flex: 1 1 150px; width: auto; gap: 8px; }
  body .request-row .rr-progress-bar { height: 11px; }
  body .request-row .rr-progress-label { font-size: 11.5px; min-width: 60px; }

  body .request-row .status-badge { flex: 0 0 auto; font-size: 10.5px; padding: 4px 11px; }

  body .request-row .rr-actions {
    flex: 0 0 100%; display: flex; gap: 6px;
    padding-top: 9px; border-top: 1px solid var(--border);
  }
  body .request-row .rr-actions .btn { min-height: 40px; font-size: 13px; padding: 8px 10px; }
  body .request-row .rr-actions .btn-icon { flex: 0 0 42px; padding: 8px 0; }
  body .request-row .rr-actions .btn-primary { flex: 1; }
  body .request-row .rr-actions label.btn { flex: 1; min-height: 40px; }

  body .rowlist { gap: 8px; }


  /* ---------- FINESTRE: pannello che sale dal basso ---------- */

  body .modal-overlay { padding: 0; align-items: flex-end; }
  body .modal-overlay .modal {
    max-width: 100%; width: 100%; max-height: 92vh;
    border-radius: 18px 18px 0 0; padding: 18px 15px 14px;
  }
  /* barretta grigia: fa capire che si può chiudere */
  body .modal-overlay .modal::before {
    content: ''; display: block; width: 42px; height: 4px;
    background: var(--border-strong); border-radius: 3px; margin: -4px auto 13px;
  }
  body .modal h3 { font-size: 15.5px; margin-bottom: 14px; }
  body .modal-actions { bottom: -14px; padding: 11px 0 6px; gap: 8px; }
  body .modal-actions .btn { flex: 1; min-height: 45px; font-size: 13.5px; }


  /* ---------- CHECKLIST ---------- */

  body .check-row { padding: 11px 6px; gap: 11px; flex-wrap: wrap; }
  body .check-row input[type=checkbox] { width: 23px; height: 23px; }
  body .check-label { font-size: 14.5px; line-height: 1.35; }
  body .check-date { font-size: 15px; padding: 9px 10px; width: 100%; margin-left: 34px; }
  body .note-section textarea { font-size: 16px; min-height: 74px; }


  /* ---------- MODULI ---------- */

  body .form-grid { grid-template-columns: 1fr; gap: 11px; }
  body .form-group input,
  body .form-group select,
  body .form-group textarea { font-size: 16px; padding: 11px; }
  body .form-actions { flex-direction: column; }
  body .form-actions .btn { width: 100%; min-height: 45px; }
  body .segmented { width: 100%; }
  body .segmented button { flex: 1; padding: 10px 6px; font-size: 12px; }
  body .input-affix { width: 100%; }


  /* ---------- AMMINISTRAZIONE ---------- */

  body .admin-grid { grid-template-columns: 1fr; gap: 13px; }
  body .panel-body { padding: 14px; }
  body .panel { margin-bottom: 14px; }
  body .admin-row { flex-wrap: wrap; gap: 8px; }
  body .admin-row .btn { min-height: 38px; }
  body .admin-card-title .btn { min-height: 38px; }
  body .ordine-row { padding: 13px 12px; }
  body .tipi-checkbox-row input[type=checkbox] { width: 21px; height: 21px; }


  /* ---------- TABELLA COMMITTENTI: da tabella a schede ---------- */

  body .data-table thead { display: none; }
  body .data-table, body .data-table tbody,
  body .data-table tr, body .data-table td { display: block; width: 100%; }

  body .data-table tr {
    border: 1px solid var(--border); border-radius: 11px;
    margin-bottom: 8px; padding: 11px 13px; background: #fff;
  }
  body .data-table td { border: none; padding: 2px 0; font-size: 13.5px; }
  body .data-table td:first-child { font-size: 15px; margin-bottom: 3px; }
  body .data-table td:nth-child(2)::before { content: 'P.IVA: '; color: var(--text-muted); }
  body .data-table td:nth-child(3)::before { content: 'SDI: ';   color: var(--text-muted); }
  body .data-table td:nth-child(4)::before { content: 'Contatto: '; color: var(--text-muted); }
  body .data-table td:last-child { margin-top: 9px; }
  body .data-table td:last-child::before { content: none; }
  body .data-table td:last-child .btn { min-height: 40px; flex: 1; }


  /* ---------- LOGIN ---------- */

  body .login-box { padding: 28px 20px; }
  body .login-field input { font-size: 16px; padding: 13px 42px 13px 40px; }
  body .login-btn { min-height: 48px; }


  /* ---------- VARIE ---------- */

  body .checklist-preview-row { font-size: 13.5px; padding: 10px 12px; }
  body #toast { left: 11px; right: 11px; bottom: 11px; max-width: none; }
}


/* ---------------------------------------------------------------------
   Telefoni stretti (360px e meno).
   Le statistiche restano su due colonne: in colonna singola
   occupavano mezzo schermo.
   --------------------------------------------------------------------- */
@media (max-width: 380px) {
  body .stat-num { font-size: 18px; }
  body .stat-label { font-size: 8.5px; }
  body .request-row .rr-cliente { font-size: 14.5px; }
  body .nav-tab { padding: 12px 8px; font-size: 11.5px; }
  body .request-row .rr-progress-wrap { flex: 1 1 100%; }
}