@import url(/fonts/lexend.css);
:root { --bg:#F5F4F0; --card:#fff; --ink:#1A1A1A; --muted:#6B6B6B; --line:#E4E2DC; --ok:#0B7A3E; --err:#B3261E; --warn:#9A6700; --accent:#5444E6; }
@media (prefers-color-scheme: dark) { :root { --bg:#141414; --card:#1E1E1E; --ink:#F2F2F2; --muted:#A0A0A0; --line:#2E2E2E; --ok:#4CC38A; --err:#FF8A80; --warn:#E3B341; --accent:#9C93FF; } }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width:1360px; margin-inline:auto; padding:20px 28px 48px; display:grid; gap:16px; } h1 { font-size:18px; margin:0; } h2 { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 10px; font-weight:600; }
section { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; overflow-x:auto; }
.muted { color:var(--muted); font-size:13px; } .ok { color:var(--ok); } .ko { color:var(--err); } .av { color:var(--warn); }
table { border-collapse:collapse; width:100%; } td, th { text-align:left; padding:6px 8px; border-top:1px solid var(--line); font-size:13.5px; vertical-align:middle; } th { border-top:0; color:var(--muted); font-size:12px; font-weight:600; }
input, select, textarea { padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--ink); font:inherit; max-width:100%; } select option { background:var(--card); color:var(--ink); }
input[type=color] { padding:0; width:42px; height:30px; } input[type=checkbox] { width:auto; }
button, a.b { font:inherit; border:1px solid var(--line); background:transparent; color:var(--ink); padding:6px 12px; border-radius:8px; cursor:pointer; text-decoration:none; font-size:14px; display:inline-block; } button:hover, a.b:hover { border-color:var(--accent); } button:disabled { opacity:.4; cursor:not-allowed; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; } button.danger:hover { border-color:var(--err); color:var(--err); }
.riga { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.esito { margin-top:10px; white-space:pre-wrap; font-size:14px; } .esito.ko { color:var(--err); } .esito.ok { color:var(--ok); }
.chip { display:inline-block; padding:1px 8px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted); margin:1px; }
img.mini { width:44px; height:44px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:6px; }

/* ---- Miglioramenti comuni (scala tipografica, spaziatura, focus, componenti riusabili) ---- */
:root { --t-xs:12.5px; --t-sm:13.5px; --t-md:15px; --t-lg:17px; --t-xl:22px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --ok-bg:color-mix(in srgb, var(--ok) 12%, transparent); --err-bg:color-mix(in srgb, var(--err) 12%, transparent); --acc-bg:color-mix(in srgb, var(--accent) 10%, transparent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
button, a.b { min-height:34px; transition:border-color .12s, background .12s; } button:active { transform:translateY(1px); }
.btn-sec { background:var(--acc-bg); border-color:transparent; color:var(--accent); font-weight:600; } .btn-ghost { border-color:transparent; color:var(--muted); } .btn-ghost:hover { color:var(--ink); }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:var(--t-xs); padding:2px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:transparent; } .pill.ok { color:var(--ok); border-color:var(--ok); background:var(--ok-bg); } .pill.ko { color:var(--err); border-color:var(--err); background:var(--err-bg); } .pill.acc { color:var(--accent); border-color:var(--accent); background:var(--acc-bg); }
.punto-stato { width:10px; height:10px; border-radius:50%; background:var(--muted); display:inline-block; flex:none; } .punto-stato.on { background:var(--ok); box-shadow:0 0 0 3px var(--ok-bg); } .punto-stato.off { background:var(--err); }
.vuoto { text-align:center; padding:var(--s5) var(--s4); color:var(--muted); border:1px dashed var(--line); border-radius:12px; } .vuoto b { display:block; color:var(--ink); font-size:var(--t-lg); margin-bottom:var(--s1); }
.switch { position:relative; width:38px; height:22px; flex:none; } .switch input { opacity:0; width:100%; height:100%; margin:0; position:absolute; cursor:pointer; z-index:1; } .switch span { position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .15s; } .switch span::after { content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; } .switch input:checked + span { background:var(--ok); } .switch input:checked + span::after { transform:translateX(16px); } .switch input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
dialog { border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); padding:0; width:min(720px, calc(100vw - 24px)); max-height:calc(100vh - 32px); box-shadow:0 20px 60px rgba(0,0,0,.35); } dialog::backdrop { background:rgba(10,12,20,.55); }
dialog .dh { padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:var(--s3); } dialog .dh h2 { margin:0; font-size:var(--t-lg); text-transform:none; letter-spacing:0; color:var(--ink); flex:1; } dialog .db { padding:var(--s4) var(--s5); overflow:auto; max-height:calc(100vh - 190px); display:grid; gap:var(--s4); } dialog .df { padding:var(--s3) var(--s5); border-top:1px solid var(--line); display:flex; gap:var(--s2); justify-content:flex-end; align-items:center; flex-wrap:wrap; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ---- Sistema di design v2: testata di pagina, campi con etichetta, tabelle che diventano schede sul telefono, avvisi, pericolo ---- */
.pagehead { display:flex; align-items:flex-end; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s2); } .pagehead h1 { font-size:var(--t-xl); margin:0; } .pagehead p { margin:2px 0 0; color:var(--muted); font-size:var(--t-md); max-width:70ch; } .pagehead .sp { flex:1; }
.campo { display:grid; gap:4px; } .campo > label, label.campo { font-size:var(--t-sm); font-weight:600; color:var(--ink); } .campo .aiuto { font-size:var(--t-xs); color:var(--muted); font-weight:400; } .campo input, .campo select, .campo textarea { width:100%; min-height:38px; }
.campi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--s3); }
input, select, textarea { min-height:34px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
button.pericolo { background:var(--err); border-color:var(--err); color:#fff; font-weight:600; } button.pericolo:hover { filter:brightness(1.08); } button.danger { color:var(--err); }
button.primary:disabled { background:var(--line); border-color:var(--line); color:var(--muted); }
.barra-azioni { position:sticky; bottom:0; background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:blur(6px); border-top:1px solid var(--line); padding:var(--s3) var(--s4); display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; justify-content:flex-end; z-index:4; }
#ui-toasts { position:fixed; right:var(--s4); bottom:var(--s4); display:grid; gap:var(--s2); z-index:100; max-width:min(380px, calc(100vw - 32px)); } .ui-toast { padding:var(--s3) var(--s4); border-radius:12px; background:var(--card); border:1px solid var(--line); box-shadow:0 8px 28px rgba(0,0,0,.25); font-size:var(--t-sm); animation:ui-entra .2s ease-out; } .ui-toast.ok { border-left:4px solid var(--ok); } .ui-toast.errore { border-left:4px solid var(--err); } .ui-toast.info { border-left:4px solid var(--accent); } .ui-toast.esce { opacity:0; transform:translateY(6px); transition:all .3s; }
@keyframes ui-entra { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
dialog.ui-conferma { width:min(440px, calc(100vw - 24px)); }
.tabella-resp { width:100%; } @media (max-width:720px) { .tabella-resp thead { display:none; } .tabella-resp, .tabella-resp tbody, .tabella-resp tr, .tabella-resp td { display:block; width:100%; } .tabella-resp tr { border:1px solid var(--line); border-radius:12px; padding:var(--s2) var(--s3); margin-bottom:var(--s2); background:var(--bg); } .tabella-resp td { border:0; padding:4px 0; } .tabella-resp td[data-et]::before { content:attr(data-et) ": "; color:var(--muted); font-size:var(--t-xs); } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:720px) { main, .pagina { padding-left:var(--s3) !important; padding-right:var(--s3) !important; } button, a.b, input, select { min-height:40px; } }

[hidden] { display:none !important; }

/* Demo: coerenza tra pagine */
main a:not([class]):not([role]) { color:var(--accent); text-underline-offset:2px; }
input[type=file] { font:inherit; color:var(--muted); max-width:100%; }
input[type=file]::file-selector-button { font:inherit; border:1px solid var(--line); background:var(--acc-bg); color:var(--accent); font-weight:600; border-radius:8px; padding:7px 14px; margin-right:10px; cursor:pointer; }
input[type=file]::file-selector-button:hover { border-color:var(--accent); }
/* Tabelle larghe (elenco offerte): a schede già sotto i 1400 px, così nulla resta nascosto da uno scorrimento laterale */
@media (max-width:1400px) { .tabella-larga thead { display:none; } .tabella-larga, .tabella-larga tbody, .tabella-larga tr, .tabella-larga td { display:block; width:100%; } .tabella-larga tr { border:1px solid var(--line); border-radius:12px; padding:var(--s2) var(--s3); margin-bottom:var(--s2); background:var(--bg); display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:4px var(--s3); } .tabella-larga td { border:0; padding:4px 0; } .tabella-larga td[data-et]::before { content:attr(data-et); display:block; color:var(--muted); font-size:var(--t-xs); margin-bottom:2px; } }

/* Testate di pagina allineate al contenuto */
body > header { max-width:1360px; margin-inline:auto; border-bottom:0 !important; padding:20px 28px 0 !important; }

.sr-only { left:0; }
html { overflow-x:hidden; }

/* ======================================================================================================
   TEMA «Facility» — interfaccia chiara, tela grigia morbida, schede bianche molto arrotondate, menu a pillola nera,
   pulsanti neri a pillola, chip di stato, accenti verde (ok/attivo) e arancio (priorità/avvisi). Ispirato al riferimento Xnord/FacilityFlow.
   Va tenuto in fondo: ridefinisce i valori (token) e i componenti di sopra.
   ====================================================================================================== */
:root { --bg:#EFEFEF; --card:#FFFFFF; --soft:#F3F3F3; --soft-2:#E4E4E4; --ink:#111111; --muted:#595959; --line:#E3E3E3; --accent:#111111; --on-accent:#FFFFFF;
  --ok:#076B4E; --err:#C2410C; --warn:#9A5B05; --blu:#3B7BE0; --navbg:#111111; --navfg:#FFFFFF; --navon-bg:#FFFFFF; --navon-fg:#111111;
  --ombra:0 1px 2px rgba(0,0,0,.03), 0 10px 32px rgba(20,20,20,.05); --r-scheda:24px; --r-campo:14px;
  --font:'Lexend', 'Segoe UI', system-ui, -apple-system, sans-serif; --ok-bg:color-mix(in srgb, var(--ok) 13%, transparent); --err-bg:color-mix(in srgb, var(--err) 12%, transparent); --acc-bg:color-mix(in srgb, var(--ink) 7%, transparent); }
@media all { :root[data-tema="dark"] { --bg:#101010; --card:#1B1B1B; --soft:#242424; --soft-2:#2D2D2D; --ink:#F2F2F2; --muted:#9A9A9A; --line:#2A2A2A; --accent:#F2F2F2; --on-accent:#111111;
  --ok:#35C9A3; --err:#FF7A55; --warn:#F0A04B; --blu:#7BA6F0; --navbg:#2B2B2B; --navfg:#FFFFFF; --navon-bg:#F2F2F2; --navon-fg:#111111; --ombra:0 1px 2px rgba(0,0,0,.4), 0 10px 32px rgba(0,0,0,.35); } }

body { font-family:var(--font); font-weight:400; font-size:14.5px; line-height:1.5; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; }
h1, .pagehead h1 { font-weight:400; font-size:30px; letter-spacing:-.025em; line-height:1.15; }
h2 { font-weight:500; letter-spacing:.07em; font-size:11.5px; color:var(--muted); }
b, strong, th, label { font-weight:500; }
section { border:0; border-radius:var(--r-scheda); box-shadow:var(--ombra); padding:20px 22px; }
.pagehead p { color:var(--muted); font-weight:400; font-size:14.5px; }
.muted { color:var(--muted); font-weight:400; }

/* campi: riempimento grigio, niente bordo, angoli morbidi */
input, select, textarea { background:var(--soft); border:1px solid transparent; border-radius:var(--r-campo); padding:7px 12px; font-weight:400; }
input:hover, select:hover, textarea:hover { border-color:var(--soft-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:0; border-color:var(--ink); background:var(--card); box-shadow:0 0 0 3px var(--acc-bg); }
input::placeholder { color:#6E6E6E; font-weight:400; }
input[type=search], input[placeholder*="erca" i] { border-radius:999px; }
input[type=color] { border-radius:12px; border:1px solid var(--line); background:var(--soft); }
input[type=checkbox], input[type=radio] { accent-color:var(--ink); }
select { padding-right:30px; }

/* pulsanti: pillole; il principale è nero */
button, a.b { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:7px 18px; font-weight:400; min-height:38px; }
button:hover, a.b:hover { border-color:var(--ink); }
button.primary { background:var(--ink); border-color:var(--ink); color:var(--on-accent); font-weight:500; } button.primary:hover { filter:none; opacity:.88; }
button.primary:disabled { background:var(--soft-2); border-color:var(--soft-2); color:var(--muted); opacity:1; }
.btn-sec { background:var(--soft); border-color:transparent; color:var(--ink); font-weight:500; } .btn-sec:hover { background:var(--soft-2); border-color:transparent; }
.btn-ghost { background:transparent; }
button.pericolo { background:var(--err); border-color:var(--err); color:#fff; } button.danger { color:var(--err); border-color:transparent; background:transparent; } button.danger:hover { background:var(--err-bg); border-color:transparent; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* tabelle: righe leggere, niente griglia */
td, th { padding:11px 10px; } td { border-top:1px solid var(--line); font-weight:400; font-size:14px; } td b, td strong { font-weight:500; }
th { color:var(--muted); font-weight:400; font-size:12px; letter-spacing:.02em; }
tr:hover > td { background:color-mix(in srgb, var(--soft) 55%, transparent); }

/* chip e stati: pillole piene senza bordo, con puntino */
.chip, .pill { border:0; background:var(--soft); color:var(--muted); padding:3px 11px; font-weight:400; }
.pill.ok { background:var(--ok-bg); color:var(--ok); } .pill.ko { background:var(--err-bg); color:var(--err); } .pill.acc { background:var(--acc-bg); color:var(--ink); }
.punto-stato.on { background:var(--ok); box-shadow:0 0 0 4px var(--ok-bg); }
.esito.ok { color:var(--ok); } .esito.ko { color:var(--err); }
.vuoto { border:1px dashed var(--soft-2); border-radius:20px; background:transparent; } .vuoto b { font-weight:500; }
.banner-avviso { border-radius:18px; border:0; background:color-mix(in srgb, var(--warn) 12%, var(--card)); }
.switch span { background:var(--soft-2); } .switch input:checked + span { background:var(--ok); }
img.mini { border-radius:12px; border:0; background:var(--soft); }

/* finestre, avvisi a comparsa */
dialog { border:0; border-radius:28px; box-shadow:0 24px 80px rgba(0,0,0,.3); } dialog .dh, dialog .df { border-color:var(--line); }
.ui-toast { border:0; border-radius:18px; box-shadow:var(--ombra), 0 10px 30px rgba(0,0,0,.12); } .ui-toast.ok { border-left:0; box-shadow:inset 4px 0 0 var(--ok), var(--ombra); } .ui-toast.errore { border-left:0; box-shadow:inset 4px 0 0 var(--err), var(--ombra); } .ui-toast.info { border-left:0; box-shadow:inset 4px 0 0 var(--ink), var(--ombra); }
.barra-azioni { border-top:0; box-shadow:0 -8px 30px rgba(0,0,0,.06); border-radius:22px 22px 0 0; }
.tabella-larga tr { background:var(--soft); border:0 !important; border-radius:20px !important; }
.tabella-larga tr:hover > td { background:transparent; }
@media (max-width:720px) { h1, .pagehead h1 { font-size:26px; } section { border-radius:20px; padding:16px; } .tabella-resp tr { background:var(--soft); border:0; border-radius:16px; } }

/* dentro le schede grigie i campi sono bianchi, così si vedono */
.tabella-larga td input, .tabella-larga td select, .tabella-resp tr input, .tabella-resp tr select { background:var(--card); }

/* Leggibilità: base 15px, testi secondari mai sotto 13px, grigi con contrasto AA (>= 4,5:1) */
body { font-size:15px; } .muted { font-size:13.5px; } th { font-size:12.5px; } td { font-size:14.5px; }
.chip, .pill { font-size:12.5px; }
:root[data-tema="dark"] { --muted:#B0B0B0; }
button:disabled { opacity:.6; }