/* JARVIS — backend. Stessa aria della pagina del volto, ma pensato per leggere tabelle e compilare moduli. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;
           src:url(vendor/inter-latin.woff2) format("woff2")}
@font-face{font-family:Orbitron;font-style:normal;font-weight:500 700;font-display:swap;
           src:url(vendor/orbitron-latin.woff2) format("woff2")}
:root{
  --bg:#020611; --bg2:#071632; --card:#071630; --field:#041024;
  --accent:#5ee7ff; --accent-2:#2aa8ff; --text:#eef8ff; --muted:#8fb0d0;
  --line:rgba(94,231,255,.26); --line-2:rgba(94,231,255,.13);
  --ok:#35f08a; --warn:#ffc93c; --err:#ff6b8a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;display:flex;background:radial-gradient(ellipse 90% 60% at 60% 0%,var(--bg2) 0%,var(--bg) 70%) fixed;
     color:var(--text);font:14px/1.5 Inter,system-ui,sans-serif;color-scheme:dark}
a{color:var(--accent)}
h1{font:500 22px Orbitron,sans-serif;letter-spacing:.14em;color:#7fe6ff;margin-bottom:18px;text-transform:uppercase;
   text-shadow:0 0 14px rgba(94,231,255,.4)}
h2{font:500 14px Orbitron,sans-serif;letter-spacing:.1em;color:var(--accent);margin-bottom:8px;text-transform:uppercase}
h2 small{font:400 12px Inter,sans-serif;letter-spacing:0;color:var(--muted);text-transform:none}
h2.gap,.gap{margin-top:18px}
h3{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:var(--text);margin:20px 0 6px}
.sub{font-size:13px;color:var(--muted);margin-bottom:14px;max-width:880px}
code{background:var(--field);padding:2px 7px;border-radius:6px;font-size:12px;overflow-wrap:anywhere}

/* Colonna di navigazione */
.side{flex:none;width:236px;min-height:100vh;display:flex;flex-direction:column;gap:20px;padding:22px 14px;
      background:rgba(4,12,28,.9);border-right:1px solid var(--line-2);position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:12px;padding:0 6px}
.brand b{display:block;font:500 15px Orbitron,sans-serif;letter-spacing:.2em;color:#7fe6ff}
.brand small{color:var(--muted);font-size:12px}
.logo{width:34px;height:34px;border-radius:50%;border:2px solid var(--accent);display:grid;place-items:center;flex:none;box-shadow:0 0 12px rgba(94,231,255,.45)}
.logo i{width:14px;height:14px;border-radius:50%;background:var(--accent)}
#nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto}
#nav button{text-align:left;padding:10px 14px;border-radius:12px;border:1px solid transparent;background:transparent;color:#cfe6fb}
#nav button:hover{background:rgba(94,231,255,.07)}
#nav button.on{border-color:var(--line);background:linear-gradient(180deg,rgba(18,62,112,.7),rgba(8,30,66,.7));color:#fff;
               box-shadow:inset 0 0 16px rgba(70,190,255,.18)}
.foot{display:flex;flex-direction:column;gap:8px}
.who{font-size:12px;color:var(--muted);padding:0 6px;overflow-wrap:anywhere}

main{flex:1;min-width:0;padding:30px 34px 70px;max-width:1280px}
.view{display:none}
.view.on{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:18px}
.cols{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap}
.cols>.card{flex:1 1 300px;min-width:0}
.cols>.card.grow{flex:2 1 460px}

/* Moduli */
label{display:block;font-size:13px;margin-bottom:12px}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  display:block;width:100%;margin-top:5px;padding:9px 11px;border-radius:10px;border:1px solid var(--line);
  background:var(--field);color:var(--text);font:14px Inter,system-ui,sans-serif;outline:0}
textarea{min-height:120px;resize:vertical;line-height:1.45}
textarea.tall{min-height:320px}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input.mini{display:inline-block;width:80px;margin:0 4px;padding:3px 8px}
.check{display:flex;align-items:center;gap:8px;color:var(--muted)}
button,.btn{font:500 14px Inter,system-ui,sans-serif;color:var(--text);cursor:pointer;padding:9px 16px;border-radius:10px;
       border:1px solid var(--line);background:transparent;text-decoration:none;text-align:center;white-space:nowrap}
button:hover,.btn:hover{background:rgba(94,231,255,.1)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:linear-gradient(180deg,#8ff0ff,#35c6ff);color:#04121c;border-color:transparent;font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.danger{border-color:rgba(255,107,138,.5);color:var(--err)}
button.small{padding:4px 10px;font-size:12px;border-radius:8px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>label{flex:1 1 200px;min-width:0}
.row>button{margin-bottom:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.pager{justify-content:center;margin-top:14px;color:var(--muted);font-size:13px}
.note{font-size:13px;line-height:1.5;padding:9px 12px;border-radius:10px;margin:12px 0 0;display:none;overflow-wrap:anywhere}
.note.show{display:block}
#note-top.show{margin:0 0 16px}
.note.ok{background:rgba(53,240,138,.08);border:1px solid rgba(53,240,138,.4)}
.note.err{background:rgba(255,107,138,.08);border:1px solid rgba(255,107,138,.4)}
.note.warn{background:rgba(255,201,60,.07);border:1px solid rgba(255,201,60,.35)}
.tag{display:inline-block;font:400 11px Inter,sans-serif;letter-spacing:0;text-transform:none;padding:1px 8px;border-radius:999px;
     border:1px solid var(--line);color:var(--muted);vertical-align:middle;white-space:nowrap}
.tag.ok{border-color:rgba(53,240,138,.5);color:var(--ok)}
.tag.warn{border-color:rgba(255,201,60,.5);color:var(--warn)}
.tag.err{border-color:rgba(255,107,138,.5);color:var(--err)}

/* Numeri in evidenza */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:0}
.stat b{display:block;font:500 24px Orbitron,sans-serif;color:#7fe6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat span{font-size:12px;color:var(--muted)}
.stat.warn b{color:var(--warn)}
.stat.err b{color:var(--err)}
.stats.small{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.stats.small .stat{padding:10px 12px}
.stats.small .stat b{font-size:18px}

/* Grafico a barre */
.chart{display:flex;align-items:flex-end;gap:6px;height:190px;padding-top:10px}
.chart div{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.chart i{display:block;width:100%;max-width:38px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#8ff0ff,#2aa8ff);min-height:2px}
.chart i.e{background:var(--err);border-radius:5px 5px 0 0;min-height:0}
.chart i.e+i{border-radius:0}
.chart em{font-style:normal;font-size:11px;color:var(--text)}
.chart span{font-size:10px;color:var(--muted);white-space:nowrap}

/* Tabelle ed elenchi */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
th{color:var(--muted);font-weight:500;white-space:nowrap}
td.num,th.num{text-align:right;white-space:nowrap}
td.right{text-align:right;white-space:nowrap}
td.wrap{overflow-wrap:anywhere;min-width:220px}
td.nowrap{white-space:nowrap}
td.empty{color:var(--muted);text-align:center;padding:18px}
[data-open]{cursor:pointer;color:var(--accent);font-weight:500}
.led{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5f7ea0}
.led.up{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.led.down{background:var(--err);box-shadow:0 0 8px var(--err)}
ul.list{list-style:none;font-size:13px}
ul.list li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line-2)}
ul.list li>div{flex:1;min-width:0;overflow-wrap:anywhere}
ul.list small{display:block;color:var(--muted);font-size:12px}
ul.list .empty{color:var(--muted)}
.tasks>div{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line-2)}
.tasks>div>div{flex:1;min-width:0}
.tasks small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* Scheda utente */
.backdrop{position:fixed;inset:0;background:rgba(1,4,12,.7);opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}
.backdrop.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(560px,100vw);display:flex;flex-direction:column;z-index:6;
       background:#050f24;border-left:1px solid var(--line);transform:translateX(102%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
.sheet.open{transform:none;visibility:visible;transition:transform .25s ease;box-shadow:-20px 0 60px rgba(0,0,0,.5)}
.sheet header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.sheet header h2{margin:0}
.sheet header button{width:36px;height:36px;padding:0;border-radius:50%}
.sheet .body{flex:1;overflow-y:auto;padding:18px 20px 40px}

/* Telefono: con campi sotto i 16px iOS ingrandisce la pagina al tocco */
@media (max-width:860px), (pointer:coarse){
  input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{font-size:16px}
}
@media (max-width:900px){
  body{display:block}
  .side{position:static;width:auto;height:auto;min-height:0;flex-direction:column;gap:12px;padding:14px 12px;border-right:0;border-bottom:1px solid var(--line-2)}
  #nav{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  #nav button{white-space:nowrap;padding:8px 12px}
  .foot{flex-direction:row;align-items:center;flex-wrap:wrap}
  .who{flex:1 1 100%}
  main{padding:18px 12px 50px}
  h1{font-size:18px}
  .card{padding:16px 14px}
  .tasks>div{flex-wrap:wrap}
}