/* =========================================================================
   Filiera sul server: accesso, account, pannello di amministrazione, e i
   ritocchi della demo quando gira qui (utente nel menu, link del cliente
   senza il riquadro della demo). Stessi colori e regole di base.css:
   raggio zero, niente ombre, la linea separa.
   ========================================================================= */

/* ------------------------------------------------ demo: il link del cliente */
body.solo-cliente .cli-demo { display: none; }

/* ------------------------------------------------ demo: chi e' collegato */
.fs-utente { display: grid; gap: 2px; padding: 10px 14px; margin: 0 10px 8px; border: 1px solid rgba(255, 255, 255, .12); font-size: 12px; color: #dcebe8; }
.fs-utente b { color: #fff; font-size: 13px; }
.fs-utente small { color: var(--verde-100); }
.fs-utente nav { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.fs-utente a { color: var(--ambra); }

/* ------------------------------------------------ pagine piccole */
body.fs-pagina { min-height: 100vh; display: grid; place-items: start center; padding: 48px max(16px, env(safe-area-inset-left, 0px)) 48px; background: var(--carta-2); }
.fs-scatola { width: min(460px, 100%); background: var(--carta); border: var(--filo); border-top: 3px solid var(--verde-950); padding: 28px 28px 24px; display: grid; gap: 14px; }
.fs-marchio { display: inline-flex; align-items: center; gap: 12px; color: var(--inchiostro); text-decoration: none; }
.fs-marchio span { font-family: var(--f-dato); font-size: var(--t-dato); letter-spacing: .18em; text-transform: uppercase; color: var(--inchiostro-3); }
.fs-scatola h1 { font-size: var(--t-xl); letter-spacing: var(--cr-tit); margin-top: 6px; }
.fs-scatola h2 { font-size: var(--t-md); margin-bottom: 10px; }
.fs-sotto { color: var(--inchiostro-2); }
.fs-modulo { display: grid; gap: 12px; }
.fs-largo { width: 100%; justify-content: center; }
.fs-errore { color: var(--errore); background: var(--errore-velo); padding: 8px 10px; font-size: var(--t-sm); margin: 0; }
.fs-fatto { color: var(--ok); background: var(--ok-velo); padding: 8px 10px; font-size: var(--t-sm); margin: 0; }
.fs-nota { font-size: var(--t-xs); color: var(--inchiostro-3); }
.fs-bottoni { display: flex; gap: 10px; flex-wrap: wrap; }
.fs-indietro a { font-size: var(--t-sm); }
.fs-sezione { border-top: var(--filo); padding-top: 16px; display: grid; gap: 10px; }
.fs-sessioni { list-style: none; margin: 0; padding: 0; display: grid; }
.fs-sessioni li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: var(--filo-chiaro); font-size: var(--t-sm); }

/* ------------------------------------------------ amministrazione */
body.fs-admin { background: var(--carta-2); }
.fs-admin__testa { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 12px max(16px, env(safe-area-inset-left, 0px)); background: var(--carta); border-bottom: var(--filo); position: sticky; top: 0; z-index: 5; }
.fs-admin__nav { display: flex; gap: 2px; }
.fs-tab { border: 0; background: none; padding: 8px 12px; font: inherit; font-size: var(--t-sm); color: var(--inchiostro-2); border-bottom: 2px solid transparent; cursor: pointer; }
.fs-tab:hover { color: var(--verde-scuro); }
.fs-tab.attiva { color: var(--inchiostro); border-bottom-color: var(--verde-950); font-weight: 600; }
.fs-admin__io { margin-left: auto; font-size: var(--t-xs); color: var(--inchiostro-3); }
.fs-admin__corpo { max-width: 1240px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-left, 0px)) 64px; display: grid; gap: 18px; }
.fs-admin__titolo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fs-admin__titolo h1 { font-size: var(--t-xl); letter-spacing: var(--cr-tit); }
.fs-tabella { overflow-x: auto; background: var(--carta); border: var(--filo); }
.fs-tabella table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 880px; }
.fs-tabella th { text-align: left; font-family: var(--f-dato); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro-3); padding: 10px 12px; border-bottom: var(--filo); }
.fs-tabella td { padding: 10px 12px; border-bottom: var(--filo-chiaro); vertical-align: top; }
.fs-tabella td small { display: block; color: var(--inchiostro-3); font-size: var(--t-xs); }
.fs-tabella tr.spento td { color: var(--inchiostro-3); }
.fs-tabella tr.allarme td { background: var(--errore-velo); }
.fs-azioni { white-space: nowrap; text-align: right; }
.fs-chip { display: inline-block; font-size: 11.5px; padding: 2px 7px; }
.fs-chip--ok { background: var(--ok-velo); color: var(--ok); }
.fs-chip--attesa { background: var(--attesa-velo); color: var(--attesa); }
.fs-chip--spento { background: var(--spento-velo); color: var(--spento); }
.fs-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); background: var(--carta); border: var(--filo); }
.fs-numeri > div { padding: 16px 20px; border-right: var(--filo); display: grid; gap: 4px; }
.fs-numeri > div:last-child { border-right: 0; }
.fs-numeri b { font-size: var(--t-kpi); font-variant-numeric: tabular-nums; }
.fs-velo { position: fixed; inset: 0; background: var(--velo); display: grid; place-items: center; padding: 16px; z-index: 30; }
.fs-velo[hidden] { display: none; }
.fs-finestra { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--carta); border-top: 3px solid var(--verde-950); padding: 22px 24px; display: grid; gap: 14px; }
.fs-finestra h2 { font-size: var(--t-lg); }
.fs-finestra__corpo { display: grid; gap: 12px; }
.fs-finestra__piede { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.fs-finestra textarea, .fs-finestra input[readonly] { font-family: var(--f-dato); font-size: 12px; }
.fs-due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .fs-due { grid-template-columns: 1fr; } }
.fs-avviso { position: fixed; right: 16px; bottom: 16px; background: var(--verde-950); color: #fff; padding: 10px 14px; font-size: var(--t-sm); z-index: 40; }