:root { --sfondo: #eef2f3; --pannello: #fff; --inchiostro: #17252b; --testo: #1f2c32; --grigio: #5f6e76; --bordo: #d8e0e3; --riga: #e8edef; --ok: #1f9254; --avviso: #f9c12e; --errore: #c6362c; --primario: #0e7c86; --primario-scuro: #0a646d; --arancio: #f26a21; --raggio: 12px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--sfondo); color: var(--testo); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--primario); }
:focus-visible { outline: 3px solid var(--arancio); outline-offset: 2px; }
.testata { display: flex; align-items: center; gap: 28px; padding: 8px max(20px, calc((100vw - 1680px) / 2)); background: var(--pannello); border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 5; }
.testata .logo { display: block; flex: none; line-height: 0; }
.testata .logo img { height: 50px; width: auto; }
.menu { display: flex; gap: 4px; flex: 1; }
.menu a { padding: 8px 12px; border-radius: 8px; color: var(--grigio); font-weight: 600; text-decoration: none; }
.menu a:hover { background: var(--sfondo); color: var(--testo); }
.menu a.attiva { color: var(--testo); box-shadow: inset 0 -3px 0 var(--arancio); border-radius: 8px 8px 0 0; }
.testata .orologio { color: var(--grigio); font-variant-numeric: tabular-nums; margin-left: auto; }
main { padding: 20px; max-width: 1720px; margin: 0 auto; }
button, .tasto { font: inherit; font-size: 13px; letter-spacing: .02em; border: 1px solid transparent; border-radius: 8px; padding: 8px 14px; background: #e4eaec; color: var(--testo); cursor: pointer; font-weight: 700; display: inline-block; text-decoration: none; white-space: nowrap; }
button:hover, .tasto:hover { background: #d8e0e3; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }
.tasto-primario { background: var(--primario); color: #fff; }
.tasto-primario:hover { background: var(--primario-scuro); }
.tasto-errore { background: var(--pannello); color: var(--errore); border-color: var(--errore); }
.tasto-errore:hover { background: #fbeaea; }
.tasto-avviso { background: var(--avviso); color: var(--inchiostro); }
.tasto-avviso:hover { background: #efb61f; }
.tasto-apri { background: var(--inchiostro); color: #fff; }
.tasto-apri:hover { background: #2b3e46; }
.nota { color: var(--grigio); font-size: 14px; margin: 0 0 12px; }
/* login */
.accesso { max-width: 380px; margin: 10vh auto 0; background: var(--pannello); border-radius: var(--raggio); padding: 28px; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--bordo); }
.accesso h1 { margin: 0; font-size: 22px; }
.accesso label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--grigio); }
.accesso input { font: inherit; padding: 10px; border: 1px solid var(--bordo); border-radius: 8px; }
.accesso .tasto { min-height: 44px; background: var(--primario); color: #fff; font-size: 15px; }
.esito { color: var(--errore); min-height: 1.4em; margin: 0; }
/* il quadro scuro in cima: colpo d'occhio nell'elenco, identita' e comandi nella pagina di una cassa */
.quadro { background: var(--inchiostro); color: #fff; border-radius: var(--raggio); margin-bottom: 24px; }
.riepilogo { display: grid; grid-template-columns: repeat(4, 1fr) 1.5fr; }
.riepilogo .conta { padding: 18px 22px; color: #b9c7cd; font-size: 14px; border-right: 1px solid rgba(255,255,255,.12); display: block; text-decoration: none; }
.riepilogo .conta:last-child { border-right: 0; }
.riepilogo .conta b { display: block; color: #fff; font-size: 34px; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.riepilogo .conta.online b { color: #6fdc9f; }
.riepilogo .conta.allarme { background: var(--errore); color: #fff; }
.riepilogo .conta.pacchetto b { font-size: 24px; line-height: 1.6; color: var(--avviso); }
.riepilogo .conta.pacchetto:hover { background: rgba(255,255,255,.06); border-radius: 0 var(--raggio) var(--raggio) 0; }
.testata-cassa { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 0; border-radius: var(--raggio) var(--raggio) 0 0; }
.testata-cassa .indietro { color: #b9c7cd; font-size: 14px; text-decoration: none; }
.testata-cassa .indietro:hover { color: #fff; }
.testata-cassa h1 { margin: 0; font-size: 28px; line-height: 1.2; color: #fff; }
.testata-cassa .intestazione { margin-top: 8px; gap: 12px; }
.testata-cassa .stato { margin: 4px 0 0; color: #b9c7cd; }
.testata-cassa .avvisi { margin-top: 10px; }
.testata-cassa .badge:not(.no):not(.avviso):not(.ok) { background: rgba(255,255,255,.14); color: #fff; }
.testata-cassa .tasto-errore { background: transparent; color: #ffb4ad; border-color: #ffb4ad; }
.testata-cassa .tasto-errore:hover { background: rgba(255,180,173,.12); }
.testata-cassa.irraggiungibile { background: #5c1f1a; }
/* le schede della pagina di una cassa */
.schede { display: flex; gap: 2px; overflow-x: auto; background: var(--pannello); border: 1px solid var(--bordo); border-top: 0; padding: 0 12px; margin-bottom: 16px; border-radius: 0 0 var(--raggio) var(--raggio); position: sticky; top: 67px; z-index: 4; }
.scheda { flex: none; background: transparent; border: 0; border-radius: 0; color: var(--grigio); font-size: 14px; letter-spacing: 0; padding: 13px 13px; box-shadow: inset 0 -3px 0 transparent; }
.scheda:hover { background: transparent; color: var(--testo); }
.scheda:focus-visible { outline-offset: -3px; }
.scheda.attiva { color: var(--testo); box-shadow: inset 0 -3px 0 var(--arancio); }
.conteggio:empty { display: none; }
.conteggio { display: inline-block; margin-left: 6px; min-width: 19px; padding: 0 5px; border-radius: 10px; background: var(--avviso); color: var(--inchiostro); font-size: 12px; line-height: 19px; text-align: center; }
.pannello-scheda { border: 1px solid var(--bordo); }
.dati-cassa { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 28px; margin: 0; }
.dati-cassa dt { color: var(--grigio); font-size: 13px; }
.dati-cassa dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.zona-togli { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--riga); }
.zona-togli .nota { margin: 0; }
.testa-attivita { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.viste { display: inline-flex; background: var(--sfondo); border-radius: 9px; padding: 3px; }
.vista { background: transparent; color: var(--grigio); letter-spacing: 0; padding: 6px 14px; }
.vista:hover { background: transparent; color: var(--testo); }
.vista.attiva { background: var(--pannello); color: var(--testo); box-shadow: 0 1px 2px rgba(23,37,43,.2); }
.scegli-pacchetto { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.scorri { overflow-x: auto; }
.festa > h2 .tasto-festa { margin-left: auto; font-size: 13px; padding: 6px 12px; }
.impostazioni-festa { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 12px; }
.impostazioni-festa fieldset { border: 1px solid var(--bordo); border-radius: 8px; padding: 8px 12px; margin: 0; }
.impostazioni-festa legend { font-weight: 700; font-size: 13px; color: var(--grigio); padding: 0 6px; }
.riga-imp { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f2f4; font-size: 14px; }
.riga-imp:last-child { border-bottom: 0; }
.riga-imp input[type=text], .riga-imp input[type=number] { font: inherit; padding: 5px 8px; border: 1px solid var(--bordo); border-radius: 6px; max-width: 200px; }
.riga-imp input[type=checkbox] { width: 22px; height: 22px; }
.impostazioni-festa .azioni-riga { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.riga-imp span { min-width: 0; overflow-wrap: anywhere; }
.pallino.online { background: var(--ok); }
.ordina-riga { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ordina-riga > div:first-child { flex: 1; min-width: 260px; }
.ordina-riga p { margin: 0 0 8px; }
.qr { background: #fff; padding: 8px; border: 1px solid var(--bordo); border-radius: 8px; }
.qr img, .qr canvas { display: block; }
.carica { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.carica input[type=file] { font: inherit; }
code { background: #eef1f4; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.pallino { width: 12px; height: 12px; border-radius: 50%; background: var(--grigio); flex: 0 0 auto; }
@keyframes lampeggia { 50% { opacity: .3; } }
.vuoto { background: var(--pannello); border-radius: var(--raggio); padding: 24px; color: var(--grigio); }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th, .tabella td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #edf0f2; vertical-align: top; }
.registro { background: #14181c; color: #d7dde3; border-radius: 8px; padding: 12px; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0; }
.registro .errore { color: #ff8a8a; }
.registro .evento { color: #8ecbff; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #14181c; color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 10; }
.pannello-scheda { min-width: 0; }
.tabelle-festa { min-width: 0; }
.tabelle-festa .scorri-tabella { overflow-x: auto; max-width: 100%; }
.tabella-festa { min-width: 640px; }
.tabella-festa th, .tabella-festa td { vertical-align: middle; }
.tabella-festa input[type=text], .tabella-festa input[type=number], .tabella-festa select { font: inherit; padding: 5px 8px; border: 1px solid var(--bordo); border-radius: 6px; max-width: 200px; }
.tabella-festa input[type=text]:not([data-campo=prezzo]), .tabella-festa select { width: 100%; min-width: 96px; }
.tabella-festa input[type=checkbox] { width: 22px; height: 22px; }
.tabella-festa input[type=color] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--bordo); border-radius: 6px; }
.tabella-festa tr.modificata td { background: #fff8d6; }
.tabella-festa tr.in-attesa td { background: #eef3fb; }
.tabella-festa tr.rifiutata td { background: #fdecec; }
.tabella-festa tr.eliminata input, .tabella-festa tr.eliminata select { text-decoration: line-through; opacity: .6; }
.tabella-festa input.invalido { border-color: var(--errore); background: #fff0f0; }
.tabella-festa .stato-riga { white-space: nowrap; }
.tabella-festa .stato-riga button { font-size: 13px; padding: 5px 10px; }
.tabelle-festa .azioni-riga { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.tabelle-festa .azioni-riga .a-sinistra { margin-right: auto; }
.avvisi-lista { margin: 0 0 10px; padding-left: 18px; font-size: 14px; }
.tabella-festa td.stato-riga { white-space: normal; min-width: 150px; max-width: 280px; background: var(--pannello); }
@media (min-width: 700px) { .tabella-festa td.stato-riga { position: sticky; right: 0; box-shadow: -6px 0 6px -6px rgba(0,0,0,.25); } }
.tabella-festa tr.incerta td { background: #fff1c9; }
.tabella-festa tr.incerta input, .tabella-festa tr.incerta select { opacity: .6; }
/* le feste e le casse: righe con le stesse colonne, cosi' i dati si leggono in verticale */
.festa { margin-bottom: 26px; }
.festa > h2 { font-size: 19px; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.festa > h2 a { color: inherit; text-decoration: none; }
.festa > h2 a:hover { color: var(--primario); }
.festa > h2 .tasto-festa { margin-left: auto; }
.elenco-casse { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.cassa { display: grid; grid-template-columns: minmax(250px, 1.5fr) minmax(120px, .7fr) minmax(130px, .9fr) minmax(120px, .8fr) minmax(max-content, 1.2fr); gap: 8px 20px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--riga); }
.cassa:first-child { border-top: 0; }
.cassa.irraggiungibile { background: #fff4f3; }
.cassa.spento { background: #f8fafa; }
.chi { display: flex; gap: 12px; align-items: center; min-width: 0; }
.intestazione { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nome { font-weight: 800; font-size: 17px; color: var(--testo); text-decoration: none; }
a.nome:hover { color: var(--primario); }
.cassa .stato { color: var(--grigio); font-size: 14px; }
.cassa.irraggiungibile .stato { color: var(--errore); font-weight: 700; }
.dato { min-width: 0; }
.dato span { display: block; color: var(--grigio); font-size: 13px; }
.dato b { font-weight: 600; overflow-wrap: anywhere; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.avvisi { display: flex; gap: 6px; flex-wrap: wrap; }
.cassa .avvisi { grid-column: 1 / -1; padding-left: 26px; }
.pallino { width: 14px; height: 14px; border-radius: 50%; background: #9aa7ad; flex: 0 0 auto; }
.acceso > .chi .pallino, .acceso .intestazione .pallino { background: var(--ok); box-shadow: 0 0 0 4px rgba(31,146,84,.2); }
.testata-cassa.acceso .pallino { background: #6fdc9f; box-shadow: 0 0 0 4px rgba(111,220,159,.22); }
.irraggiungibile .pallino { background: var(--errore); animation: lampeggia 1s infinite; }
.testata-cassa.irraggiungibile .pallino { background: #ff8a80; }
.riavvio .pallino { background: var(--avviso); }
@media (prefers-reduced-motion: reduce) { .irraggiungibile .pallino { animation: none; } }
.badge { display: inline-block; border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 700; background: #e4eaec; color: var(--testo); }
.badge.ok { background: #d9f2e3; color: #14663a; }
.badge.no { background: #fbe1df; color: #8d1f18; }
.badge.avviso { background: #fff0c4; color: #604500; }
.blocco { background: var(--pannello); border-radius: var(--raggio); padding: 18px 20px; overflow-x: auto; }
.blocco h2 { margin: 0 0 10px; font-size: 16px; }
.dettaglio { display: flex; flex-direction: column; gap: 16px; }
.dettaglio > * { min-width: 0; }
.tabella th { color: var(--grigio); font-weight: 600; font-size: 13px; }
@media (max-width: 1100px) {
  .riepilogo { grid-template-columns: repeat(4, 1fr); }
  .riepilogo .conta.pacchetto { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); }
  .cassa { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .chi, .cassa .azioni { grid-column: 1 / -1; }
  .cassa .azioni { justify-content: flex-start; order: 5; }
}
@media (max-width: 640px) {
  main { padding: 12px; }
  .testata { gap: 12px; padding: 6px 12px; }
  .testata .logo img { height: 40px; }
  .testata .orologio { display: none; }
  .menu a { padding: 8px; }
  .riepilogo { grid-template-columns: repeat(2, 1fr); }
  .riepilogo .conta { padding: 12px 16px; border-right: 0; }
  .riepilogo .conta b { font-size: 28px; }
  .cassa { grid-template-columns: 1fr 1fr; padding: 14px; }
  .cassa .avvisi { padding-left: 0; }
  .testata-cassa { padding: 14px 16px; }
  .testata-cassa h1 { font-size: 22px; }
  .schede { top: 53px; }
  .blocco { padding: 14px; }
}
.tasto-colore { display: block; width: 44px; height: 28px; padding: 0; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .25); }
.tasto-colore:hover { filter: brightness(.92); }
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.finestra { display: flex; flex-direction: column; gap: 14px; width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 20px; background: var(--pannello); border-radius: var(--raggio); }
.finestra h2 { margin: 0; font-size: 18px; }
.griglia-colori { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.scelta-colore { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 6px; background: none; font-size: 12px; font-weight: 600; text-align: center; white-space: normal; }
.scelta-colore span { display: block; height: 48px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .25); }
.scelta-colore[aria-pressed="true"] { outline: 3px solid var(--inchiostro); outline-offset: -1px; }
.fuori-tavolozza { grid-column: 1 / -1; }
.azioni-finestra { display: flex; justify-content: flex-end; }
.piccolo { font-size: 13px; color: var(--grigio); }
.titolo-tabella { margin: 26px 0 4px; font-size: 16px; }
.tabelle-festa[data-risorsa="supplementi"] .titolo-tabella { margin-top: 0; }
.segno-menu { background: #dcebff; color: #123f73; margin-bottom: 4px; }
.riassunto-festa { min-width: 200px; }
.riassunto-festa .piccolo { margin-bottom: 4px; }
.finestra-larga { width: min(720px, 100%); }
.gruppo-menu { border: 1px solid var(--bordo); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.testa-gruppo-menu { display: flex; gap: 8px; margin-bottom: 8px; }
.testa-gruppo-menu input { flex: 1; font: inherit; padding: 5px 8px; border: 1px solid var(--bordo); border-radius: 6px; }
.elenco-spunte fieldset { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.elenco-spunte legend { font-weight: 700; font-size: 13px; color: var(--grigio); padding: 0 0 2px; }
.elenco-spunte label { display: inline-flex; gap: 5px; align-items: center; font-size: 14px; }
.spunta-reparto { margin-left: 10px; font-weight: 400; }
.azioni-finestra { gap: 8px; }
.campi-utente { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.campi-utente label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--grigio); }
.campi-utente label.spunta { flex-direction: row; align-items: center; gap: 8px; }
.campi-utente input:not([type=checkbox]), .campi-utente select { font: inherit; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 6px; color: var(--testo); }
.tabelle-festa[data-risorsa="utenti"] .titolo-tabella { margin-top: 0; }
/* La scheda Report della pagina di una cassa. */
.report-scelta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.report-scelta select { font: inherit; padding: 8px 10px; border: 1px solid var(--bordo); border-radius: 8px; }
.report-riga { color: var(--grigio); margin: 0 0 12px; }
.report-riga.errore { color: var(--errore); }
.tabella td.azioni-report { white-space: nowrap; text-align: right; }