:root {
  --bg: #1a1410;
  --bg-card: #241c17;
  --bg-input: #2c2218;
  --border: #4a3a2a;
  --text: #f0e6d8;
  --text-dim: #b8a890;
  --accent: #c0392b;
  --accent-hover: #e74c3c;
  --accent-soft: #3a2218;
}

/* Tema chiaro */
:root[data-theme="light"] {
  --bg: #f2ede8;
  --bg-card: #ffffff;
  --bg-input: #f8f4f0;
  --border: #d4c8bc;
  --text: #2a1f18;
  --text-dim: #7a6458;
  --accent: #c0392b;
  --accent-hover: #e74c3c;
  --accent-soft: #fde8e6;
}

* { box-sizing: border-box; }

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 24px;
  background: var(--bg);
  color: var(--text);
}

.logo-nav {
  height: 50px;
  width: auto;
  margin-right: 16px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

h1 { margin-top: 0; color: var(--text); }
h2 { color: var(--text); }

.sezione {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  position: relative;
}

.sezione-socio,
.sezione-presenza,
.sezione-pagamento {
  background: #3a3a3a;
  border-color: #555;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 0.9em;
  color: var(--text-dim);
}

input, select {
  width: 100%;
  padding: 8px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 1em;
}

input::placeholder { color: #6a5a48; }

input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}

input.campo-ok, select.campo-ok {
  background: #1a3a1a;
  border-color: #3a7a3a;
  color: #a8e6a8;
}
input.campo-ok:disabled, select.campo-ok:disabled {
  background: #1a3a1a !important;
  border-color: #3a7a3a !important;
  color: #a8e6a8 !important;
}
input.campo-vuoto, select.campo-vuoto {
  background: #3a1a1a;
  border-color: #7a3a3a;
  color: #e6a8a8;
}
input.campo-vuoto:disabled, select.campo-vuoto:disabled {
  background: #3a1a1a !important;
  border-color: #7a3a3a !important;
  color: #e6a8a8 !important;
}
input.campo-ok:focus, select.campo-ok:focus,
input.campo-vuoto:focus, select.campo-vuoto:focus {
  border-color: var(--accent);
}

.suggerimenti {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  width: calc(100% - 40px);
  z-index: 10;
}

.suggerimenti li {
  padding: 8px;
  cursor: pointer;
  color: var(--text);
}

.suggerimenti li:hover,
.suggerimenti li.evidenziato {
  background: var(--accent-soft);
}

.griglia-situazione { gap: 8px; }

.box-situazione {
  background: #2e2e2e;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 8px;
}

.box-situazione.alert-verde   { background: #1a3d1a !important; border-color: #2d7a2d !important; }
.box-situazione.alert-rosso   { background: #3d1a1a; border-color: #a02020; }
.box-situazione.alert-arancio { background: #3d2a0a; border-color: #b06010; }

.box-situazione span {
  display: block;
  font-size: 0.75em;
  color: var(--text-dim);
}

.box-situazione strong {
  font-size: 1.05em;
  color: var(--text);
}

#form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.griglia-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.griglia-pagamento {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 4px 0;
}

.griglia-abbonamento {
  display: grid;
  grid-template-columns: 1fr 1fr 0.5fr 1.5fr 1.5fr 1fr;
  gap: 8px;
  padding: 4px 0;
}

/* Tabella Resoconto */
.tabella-resoconto {
  border-collapse: collapse;
  font-size: 0.88em;
  min-width: 600px;
}
.tabella-resoconto th, .tabella-resoconto td {
  border: 1px solid #444;
  padding: 2px 2px;
  text-align: right;
  white-space: nowrap;
  font-size: 0.82em;
}
.tabella-resoconto thead th {
  background: #2a2a2a;
  text-align: center;
  font-size: 0.85em;
}
.tabella-resoconto thead th small { color: #aaa; font-weight: normal; }
.th-etichetta, .td-etichetta { text-align: left !important; width: 1%; white-space: nowrap; font-weight: bold; background: #222; }
.th-totale, .td-totale { background: #1e2a1e; font-weight: bold; width: 1%; white-space: nowrap; text-align: right; }
.riga-verde td  { background: #1a3a1a; color: #7fff7f; }
.riga-verde .td-etichetta { background: #1a3a1a; }
.riga-arancio td { background: #2a2010; }
.riga-arancio .td-etichetta { background: #2a2010; }
.riga-blu td  { background: #1a2040; }
.riga-blu .td-etichetta { background: #1a2040; }
.riga-banc td { background: #1e1e2a; color: #ccc; }
.riga-banc .td-etichetta { background: #1e1e2a; }
.riga-cassa td { background: #2a2a1a; }
.riga-cassa .td-etichetta { background: #2a2a1a; }
.riga-cassa2 td { background: #252520; font-weight:bold; }
.riga-cassa2 .td-etichetta { background: #252520; }
.riga-discr td { background: #2a1a10; }
.riga-discr .td-etichetta { background: #2a1a10; }
.val-zero { color: #4caf50; }
.val-neg  { color: #f44336; font-weight: bold; }
.val-pos  { color: #ff9800; }

#cfCheck {
  display: none;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.85em;
  margin-bottom: 10px;
}
#cfCheck.cf-ok  { display:block; background:#1a3d1a; border:1px solid #2d7a2d; color:#d0ffd0; font-size:0.95em; }
#cfCheck.cf-err { display:block; background:#3d1a1a; border:1px solid #a02020; color:#ffd0d0; }

.cf-griglia {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
}
.cf-campo {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.cfi {
  font-weight: bold;
  font-size: 1em;
  flex-shrink: 0;
}
.cfi-ok   { color: #7fff7f; }
.cfi-err  { color: #ff6060; }
.cfi-warn { color: #ffaa00; }
.cf-det {
  display: block;
  font-size: 0.8em;
  opacity: 0.75;
  white-space: normal;
}

.ricerca-grande {
  font-size: 1.4em;
  font-weight: bold;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  padding: 4px 2px;
  color: var(--text);
  width: 100%;
  margin-bottom: 10px;
}
.ricerca-grande:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.ricerca-grande::placeholder {
  color: var(--text-dim);
  font-weight: normal;
  font-size: 0.85em;
}

.btn-anno-nav {
  padding: 6px 10px;
  margin: 0;
  background: var(--bg-input);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.9em;
  cursor: pointer;
  font-weight: bold;
  line-height: 1;
}
.btn-anno-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--text); background: transparent; }
.btn-anno-nav:disabled { cursor: default; }

.btn-mese-res {
  padding: 6px 10px;
  margin: 0;
  background: var(--bg-input);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.82em;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.btn-mese-res:hover { border-color: var(--accent); color: var(--text); background: transparent; }
.btn-mese-res-attivo {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-mese-res-attivo:hover { background: var(--accent-hover); }

.btn-matita {
  padding: 3px 8px;
  margin: 0;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
.btn-matita:hover { border-color: var(--text); color: var(--text); background: transparent; }

#cfFormAnagrafica {
  margin-top: 8px;
  margin-bottom: 4px;
  padding: 12px 16px;
}

.anag-form-griglia {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.anag-campo label {
  font-size: 0.8em;
  margin-bottom: 3px;
}

.anag-campo input {
  padding: 6px 8px;
  font-size: 0.9em;
}

.griglia-banconote {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.campo-calcolato input {
  background: #1a3d1a;
  border-color: #2d7a2d;
  font-weight: bold;
  color: #7fff7f;
}

.campo-larga {
  grid-column: span 3;
}

.sezione-titolo {
  margin: 0 0 14px 0;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}

button {
  padding: 12px;
  margin-top: 8px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.5px;
}

button:hover { background: var(--accent-hover); }

#esito { font-weight: bold; margin-top: 8px; display: block; }

.menu-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 10px;
}

.tab-btn {
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  background: var(--bg-card);
  color: var(--text-dim);
  cursor: pointer;
  font-weight: bold;
}

.tab-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.preselezioni-sessione {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin-bottom: 12px;
}

.sede-sessione {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sede-sessione label {
  font-size: 0.85em;
  color: var(--text-dim);
  font-weight: bold;
  margin: 0;
  white-space: nowrap;
}

.sede-sessione select {
  width: auto;
  padding: 6px 10px;
  font-size: 0.9em;
}
.sede-sessione select.campo-vuoto {
  background: #3a1a1a;
  border-color: #7a3a3a;
  color: #e6a8a8;
}
.sede-sessione select.campo-ok {
  background: #1a3a1a;
  border-color: #3a7a3a;
  color: #a8e6a8;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  color: var(--text);
}

table th, table td {
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
}

table th {
  background: var(--accent-soft);
  color: var(--text-dim);
  position: sticky;
  top: 0;
}

table tbody tr:hover {
  background: var(--accent-soft);
}

.btn-storico {
  padding: 4px 12px;
  margin: 0;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.8em;
  cursor: pointer;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.btn-storico:hover {
  border-color: var(--text-dim);
  color: var(--text);
  background: transparent;
}

.btn-elimina {
  grid-column: unset;
  padding: 2px 7px;
  margin: 0;
  background: transparent;
  color: #a02020;
  border: 1px solid #a02020;
  border-radius: 3px;
  font-size: 0.85em;
  cursor: pointer;
  font-weight: bold;
}

.btn-elimina:hover {
  background: #3d1a1a;
  color: #e04040;
  border-color: #e04040;
}

.pagina-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.subtab-btn {
  padding: 6px 16px;
  margin: 0;
  background: var(--bg-input);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: bold;
  cursor: pointer;
}
.subtab-btn:hover { border-color: var(--accent); color: var(--text); }
.subtab-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

.db-subtab-btn {
  padding: 6px 14px;
  margin: 0;
  background: var(--bg-input);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: bold;
  cursor: pointer;
}
.db-subtab-btn:hover { border-color: var(--accent); color: var(--text); }
.db-subtab-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

#db-table th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-size: 0.8em;
  padding: 5px 8px;
  background: var(--accent-soft);
}
#db-table th:hover { color: var(--text); }
#db-table th.sort-asc::after  { content: ' ▲'; color: #e67e22; }
#db-table th.sort-desc::after { content: ' ▼'; color: #e67e22; }
#db-table td { padding: 4px 8px; font-size: 0.82em; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
#db-table tr.db-row-sel > td { background: #1a2a3a; }
.db-check { cursor: pointer; display: none; }
.db-mode-sel .db-check { display: inline-block; }
.db-btn-riga { padding: 2px 8px; margin: 0 2px; font-size: 0.78em; border-radius: 3px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-dim); }
.db-btn-riga:hover { border-color: var(--text); color: var(--text); }
.db-btn-riga.modifica { border-color: #5a7a5a; color: #a8d8a8; }
.db-btn-riga.salva    { border-color: #3a7a3a; background: #1a3a1a; color: #a8e6a8; }
.db-btn-riga.annulla  { border-color: #7a5a3a; color: #e6c8a8; }
.db-btn-riga.elimina  { border-color: #7a3a3a; color: #e6a8a8; }
.db-btn-riga.elimina:hover { background: #3a1a1a; }
.db-cell-input { width: 100%; min-width: 70px; padding: 2px 5px; background: var(--bg); color: var(--text); border: 1px solid var(--accent); border-radius: 3px; font-size: 0.95em; }
.db-resize-handle { position: absolute; right: 0; top: 0; width: 6px; height: 100%; cursor: col-resize; background: transparent; z-index: 2; }
.db-resize-handle:hover, .db-resize-active { background: var(--accent); opacity: 0.5; }
.db-col-virtual { background: #1a2a1a !important; color: #a8e6a8; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — attivo solo sotto 768px di larghezza: su desktop (>768px) queste
   regole non si applicano mai, il browser le ignora del tutto.
   Pensato in particolare per la vista "Attività Istruttori" in sola lettura,
   che è quella con più probabilità di essere aperta da telefono.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { padding: 10px; }

  .menu-tab { flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
  .tab-btn { padding: 7px 12px; font-size: 0.85em; }
  .logo-nav { height: 36px; margin-right: 8px; }

  /* Login: la card resta leggibile senza bisogno di zoom manuale */
  #pagina-login > div { padding: 24px 20px; }

  /* Calendario Attività Istruttori: troppo largo per stare su uno schermo
     stretto (7 colonne coi dettagli di ogni lezione) — invece di rompere il
     layout o rimpicciolire il testo fino a renderlo illeggibile, lo si scorre
     in orizzontale mantenendo il resto della pagina (nav, titolo) fermo. */
  #attivita-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #attivita-container table {
    min-width: 820px;
  }
}