:root {
  --sfondo: #0f1111;
  --pannello: #1a242f;
  --pannello-alt: #232f3e;
  --bordo: #3a4553;
  --testo: #f2f2f2;
  --testo-secondario: #b7b7b7;
  --accento: #ff9900;
  --accento-hover: #e88b00;
  --rosso: #ff5c5c;
  --verde: #4caf50;
}

* { box-sizing: border-box; }

body {
  font-family: "Amazon Ember", "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--sfondo);
  color: var(--testo);
  margin: 0;
  padding: 0 0 40px;
}

header.topbar {
  background: #131921;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--accento);
}

header.topbar .brand {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--testo);
}

header.topbar nav a {
  color: var(--testo);
  text-decoration: none;
  margin-left: 18px;
  font-size: 0.95rem;
  padding: 6px 10px;
  border-radius: 4px;
}

header.topbar nav a:hover,
header.topbar nav a.attivo {
  background: var(--pannello-alt);
  color: var(--accento);
}

header.topbar form { display: inline; }

header.topbar button.logout {
  background: none;
  border: 1px solid var(--bordo);
  color: var(--testo-secondario);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
header.topbar button.logout:hover { border-color: var(--accento); color: var(--accento); }

main {
  max-width: 1400px;
  margin: 24px auto;
  padding: 0 20px;
}

h1 { font-size: 1.4rem; margin-bottom: 4px; }
h2 { font-size: 1.05rem; color: var(--accento); margin-top: 28px; }

.pannello {
  background: var(--pannello);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  padding: 18px 20px;
  margin-top: 16px;
}

label { font-size: 0.85rem; color: var(--testo-secondario); }

input[type=date], input[type=text], input[type=number], select {
  background: #0f1720;
  border: 1px solid var(--bordo);
  color: var(--testo);
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 0.9rem;
}
input:focus, select:focus { outline: 2px solid var(--accento); border-color: var(--accento); }

button, .btn {
  background: var(--accento);
  color: #111;
  border: none;
  padding: 10px 18px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
}
button:hover, .btn:hover { background: var(--accento-hover); }

.esito { color: var(--verde); margin-top: 12px; font-weight: 600; }
.avviso { color: var(--rosso); margin-top: 12px; font-weight: 600; }
.vuoto { color: var(--testo-secondario); margin-top: 20px; }

/* Tabella stile foglio Excel: pensata per stare tutta su uno schermo, senza scroll orizzontale */
.excel-wrap { margin-top: 14px; border: 1px solid var(--bordo); border-radius: 8px; }
table.excel {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 0.72rem;
}
table.excel th, table.excel td {
  border: 1px solid var(--bordo);
  padding: 4px 2px;
  text-align: center;
}
table.excel th { line-height: 1.15; }
table.excel thead th {
  background: var(--pannello-alt);
  color: var(--accento);
  font-weight: 600;
}
table.excel td.etichetta-riga {
  background: var(--pannello-alt);
  color: var(--testo);
  font-weight: 700;
  text-align: left;
  padding-left: 8px;
  width: 90px;
}
table.excel input[type=text] {
  width: 100%;
  text-align: center;
  padding: 4px 2px;
  background: #0f1720;
  font-size: 0.72rem;
}
table.excel tr.riga-chiusa td.etichetta-riga { color: var(--rosso); }
table.excel tr.riga-chiusa input { background: #2a1414; color: #886; }
table.excel input:disabled { background: #15181b; color: #555; }

.chiuso-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.chiuso-toggle input { width: auto; }

.riga-selettori { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }

table.mese { border-collapse: collapse; width: 100%; margin-top: 16px; font-size: 0.85rem; }
table.mese th, table.mese td { border: 1px solid var(--bordo); padding: 6px 10px; }
table.mese thead th { background: var(--pannello-alt); color: var(--accento); }
table.mese tr.chiuso-pranzo td.pranzo,
table.mese tr.chiuso-cena td.cena { background: #2a1414; color: var(--rosso); }

.login-box {
  max-width: 360px;
  margin: 100px auto;
  background: var(--pannello);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  padding: 28px 26px;
}
.login-box h1 { text-align: center; color: var(--accento); font-size: 1.3rem; }
.login-box label { display: block; margin-top: 14px; }
.login-box input { width: 100%; margin-top: 6px; }
.login-box button { width: 100%; margin-top: 22px; }

.stats-row { display: flex; gap: 24px; flex-wrap: wrap; }
.cards-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.tabella-scroll { overflow-x: auto; border-radius: 8px; }

.conto-economico { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.conto-economico .conto-colonna { flex: 1 1 380px; min-width: 300px; }
.conto-tabella { width: 100%; }
.conto-tabella td:nth-child(2), .conto-tabella th:nth-child(2),
.conto-tabella td:nth-child(3), .conto-tabella th:nth-child(3) { text-align: right; white-space: nowrap; }

/* --- Responsive: schermi piccoli (telefono) --- */
@media (max-width: 640px) {
  main { padding: 0 12px; margin: 16px auto; }

  header.topbar {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 8px;
  }
  header.topbar .brand { font-size: 1.05rem; width: 100%; }
  header.topbar nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  header.topbar nav a { margin-left: 0; padding: 8px 10px; }

  h1 { font-size: 1.15rem; }
  h2 { font-size: 0.95rem; }

  .pannello { padding: 14px; }

  .login-box { margin: 40px auto; max-width: 92vw; padding: 22px 18px; }

  .riga-selettori { flex-direction: column; align-items: stretch; gap: 10px; }
  .riga-selettori label { width: 100%; }
  .riga-selettori select, .riga-selettori input { width: 100%; }

  input[type=date], input[type=text], input[type=number], select, button, .btn {
    font-size: 16px; /* evita lo zoom automatico di iOS sui campi */
    min-height: 40px;
  }

  .stats-row { gap: 12px; }
  .stats-row > div { flex: 1 1 45%; min-width: 130px; }

  .cards-row { gap: 10px; }
  .cards-row > .pannello { min-width: 100%; }

  /* tabelle di sola lettura (riepiloghi): scorrono in orizzontale invece di schiacciarsi */
  .tabella-scroll, table.mese { overflow-x: auto; display: block; }

  /* form di inserimento: la tabella diventa un elenco verticale, un campo per riga,
     molto più facile da compilare col dito su schermo piccolo */
  .excel-wrap { overflow-x: visible; border: none; }
  table.excel, table.excel tbody { display: block; width: 100%; }
  table.excel thead { display: none; }
  table.excel tr {
    display: block;
    margin-bottom: 18px;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--pannello);
  }
  table.excel td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: none;
    border-bottom: 1px solid var(--bordo);
    padding: 10px 0;
    font-size: 0.9rem;
  }
  table.excel td:last-child { border-bottom: none; }
  table.excel td::before {
    content: attr(data-label);
    color: var(--testo-secondario);
    font-weight: 600;
    flex: 0 0 auto;
    margin-right: 8px;
  }
  table.excel td.etichetta-riga {
    display: block;
    background: none;
    border-bottom: 2px solid var(--accento);
    padding-bottom: 10px;
    margin-bottom: 6px;
    width: auto;
  }
  table.excel td.etichetta-riga .chiuso-toggle { margin-top: 8px; }
  table.excel input[type=text] {
    width: 55%;
    text-align: right;
    font-size: 16px; /* evita lo zoom automatico di iOS */
  }
}

/* --- Stampa / "Scarica PDF" (window.print del browser, niente dipendenze server) --- */
.solo-stampa { display: none; }
@media print {
  .no-print, header.topbar { display: none !important; }
  .solo-stampa { display: block !important; }
  body { background: #fff; color: #111; }
  .pannello { background: #fff; border: 1px solid #999; color: #111; }
  table.mese th, table.mese td { border: 1px solid #999; color: #111; }
  table.mese thead th { background: #eee; color: #111; }
  a[href] { color: #111; text-decoration: none; }
  .settimana-stampa { page-break-after: always; }
  .settimana-stampa:last-child { page-break-after: auto; }
  .nome-lavoratore { font-size: 1.15rem; font-weight: 700; }
}