/* rkm_responsive.css - adattamento automatico a tablet e computer (s@tXrkm 2.0)
   Le pagine nascono per il telefono: queste regole scattano solo oltre i 700 px, quindi il telefono non cambia.
   Da caricare per ULTIMO nell'<head> di ogni pagina. Le pagine con elenchi lunghi hanno <body class="wide">. */

/* ---------- Tablet (da 700 px) ---------- */
@media (min-width: 700px) {
  .wrap { max-width: 760px; }
  body.wide .wrap { max-width: 920px; }
  .main-content { max-width: 760px; }

  /* Menu: pulsanti su 3 colonne */
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-grid .menu-btn[style*="grid-column"] { grid-column: auto !important; }
  .menu-btn-full { grid-column: span 3; }

  /* Elenchi a card su 2 colonne */
  body.wide #list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
  body.wide #list > * { margin-bottom: 0 !important; }

  /* Pannelli e finestre di modifica: centrati e non a tutto schermo */
  .pan { max-width: 640px; margin: 40px auto; }

  /* Barra in basso (totali, pulsante salva) e pulsante flottante: contenute nella colonna */
  .fab { right: max(16px, calc(50% - 440px)); }

  /* Campi dei moduli un po' meno enormi */
  input[type=text], input[type=email], input[type=date], input[type=search], select { font-size: 15px; }
}

/* Pannelli a tutto schermo (anagrafica luoghi, veicoli): contenuto non troppo largo */
@media (min-width: 700px) { #panel .wrap, #panel > * { max-width: 860px; margin-left: auto; margin-right: auto; } }

/* ---------- Computer (da 1100 px) ---------- */
@media (min-width: 1100px) {
  .wrap { max-width: 840px; }
  body.wide .wrap { max-width: 1180px; }
  .main-content { max-width: 1040px; }

  .menu-grid { grid-template-columns: repeat(4, 1fr); }
  .menu-btn-full { grid-column: span 4; }
  .matrix-badge-container { max-width: 520px; }

  body.wide #list { grid-template-columns: repeat(3, 1fr); }
  .fab { right: max(16px, calc(50% - 560px)); }

  /* Registrazione giornata (insgiorno.php): Partenza e Arrivo affiancati */
  form[action="salva_spostamento.php"] { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  form[action="salva_spostamento.php"] > .fg-full,
  form[action="salva_spostamento.php"] > .btn-submit,
  form[action="salva_spostamento.php"] > div:not(.form-group) { grid-column: 1 / -1; }

  /* Approvazione rimborsi: i giorni su due colonne */
  body.wide #frm { column-count: 2; column-gap: 14px; }
  body.wide #frm > .giorno { break-inside: avoid; }
  body.wide #frm > .note, body.wide #frm > .btn, body.wide #frm > .tot { column-span: all; }
  .tot .in { max-width: 1180px; }

  /* Ricevute: l'elenco usa tutto lo spazio senza allungarsi troppo */
  body.wide .rc { max-width: 100%; }
}

/* ---------- Schermi molto grandi ---------- */
@media (min-width: 1500px) {
  body.wide .wrap { max-width: 1360px; }
  body.wide #list { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Barra in alto uniforme: azzurro chiaro e morbido come nel menu (tutte le pagine) ---------- */
.bar, .hb, .header-bar, .p-head { background: #dbe8f5 !important; color: #1f3a52 !important; box-shadow: 0 2px 8px rgba(0,60,120,.12) !important; }
.bar h1, .bar strong, .hb strong, .header-bar > strong, .p-head strong, .bar .who, .hb span { color: #1f3a52 !important; }
.bar a.back, .hb a, .header-bar a.back-link, .p-head button { color: #0b4a7d !important; background: rgba(31,58,82,.10) !important; }