/* BMP mockup styles: mobile-first, one source of truth for the drawer width (--nav-w). */
:root{--nav-w:240px;--bg:#f4f5f7;--card:#fff;--ink:#1d2330;--muted:#5d6678;--line:#dfe3ea;--brand:#b0001a;
--ok:#1e7d32;--warn:#a86400;--late:#c62828;--crit:#7b0016;--inc:#5b3fa0;--na:#6b7280}
*{box-sizing:border-box}body{margin:0;font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;height:56px;padding:0 14px;background:#1d2330;color:#fff}
.top .brand{font-weight:800;letter-spacing:.3px}.top .brand b{color:#ff5a6e}.top .sp{flex:1}
.iconbtn{width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:inherit;font-size:22px;cursor:pointer}
.user{font-size:13px;opacity:.85}
.nav{position:fixed;top:56px;bottom:0;left:0;width:var(--nav-w);background:#fff;border-right:1px solid var(--line);padding:10px 8px;transform:translateX(-100%);transition:transform .2s;z-index:30}
.nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.nav a.on{background:#fde8eb;color:var(--brand);font-weight:700}.nav a span{width:22px;text-align:center}
body.nav-open .nav{transform:none}.scrim{display:none}
body.nav-open .scrim{display:block;position:fixed;inset:56px 0 0;background:#0006;z-index:25}
main{padding:14px;max-width:1400px}
@media (min-width:960px){
  .nav{transform:none}body .scrim{display:none!important}main{margin-left:var(--nav-w);padding:22px 28px}
  body.rail{--nav-w:68px}body.rail .nav a b{display:none}
}
h1{font-size:22px;margin:4px 0 14px}h2{font-size:16px;margin:0 0 10px}
.muted{color:var(--muted)}.small{font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}}@media(min-width:1200px){.kpis{grid-template-columns:repeat(7,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;border-left:5px solid var(--line)}
.kpi .n{font-size:26px;font-weight:800}.kpi .l{font-size:13px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
input,select,textarea{font:inherit;min-height:44px;padding:8px 10px;border:1px solid #c5ccd8;border-radius:10px;background:#fff;width:100%}
.filters input{flex:1 1 220px}.filters select{flex:0 1 170px;width:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid #c5ccd8;background:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}.btn.big{min-height:56px;font-size:16px;width:100%}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}
.s-ok{background:var(--ok)}.s-warn{background:var(--warn)}.s-late{background:var(--late)}.s-crit{background:var(--crit)}.s-inc{background:var(--inc)}.s-na{background:var(--na)}
.k-ok{border-left-color:var(--ok)}.k-warn{border-left-color:var(--warn)}.k-late{border-left-color:var(--late)}.k-crit{border-left-color:var(--crit)}.k-inc{border-left-color:var(--inc)}
.op{background:#e8ecf3;color:var(--ink);font-weight:600}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);cursor:pointer;white-space:nowrap}
/* phone: table rows become cards */
@media(max-width:759px){
  table.cards thead{display:none}table.cards tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
  table.cards td{display:flex;justify-content:space-between;gap:10px;border:0;padding:3px 0}table.cards td::before{content:attr(data-l);color:var(--muted);font-size:13px}
  table.cards td.t{font-size:17px;font-weight:800}table.cards td.t::before{content:none}
  table.cards td.hide-m{display:none}
}
.grid2{display:grid;gap:14px}@media(min-width:960px){.grid2{grid-template-columns:1.2fr 1fr}}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;font-weight:600}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(min-width:960px){.actions{grid-template-columns:repeat(4,1fr)}}
.banner{border-radius:12px;padding:12px 14px;margin-bottom:14px;font-weight:600}
.b-late{background:#fdecec;border:1px solid #f3b4b4;color:#8a1414}.b-info{background:#eef3fb;border:1px solid #c8d6ee;color:#23406e}.b-inc{background:#f1ecfa;border:1px solid #d3c6ee;color:#43307a}
.meas{border:1px dashed #c5ccd8;border-radius:10px;padding:10px 12px;background:#fafbfc}
.meas .v{font-size:24px;font-weight:800}.tag-old{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;background:#fff3cd;color:#7a5600;border-radius:6px;padding:1px 6px}
.form{display:grid;gap:12px;max-width:560px}.form label{display:grid;gap:4px;font-weight:600;font-size:14px}.form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.seg label{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border:1px solid #c5ccd8;border-radius:10px;font-weight:600}
.seg input{width:auto;min-height:0}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid #c5ccd8;border-radius:10px;background:#fff}
.opt input{width:auto;min-height:0;margin-top:4px}.opt.dis{opacity:.55;background:#f3f4f6}
.hint{font-size:13px;color:var(--muted);font-weight:400}
.label-preview{background:#d9dde4;border-radius:12px;padding:16px;display:flex;justify-content:center}.label-preview img{width:100%;max-width:560px;box-shadow:0 4px 16px #0003;border-radius:6px}
.hub a.card{display:block;text-decoration:none}.hub a.card:hover{border-color:var(--brand)}
@media(max-width:599px){
  .user{display:none}.kpi{padding:8px 12px}.kpi .n{font-size:22px}
  .filters select{flex:1 1 calc(50% - 4px);width:auto}.filters .btn{flex:1 1 100%}
}
/* v2: smartphone-first, SOC monitoring at the centre */
.wrap{max-width:560px;margin:0 auto}
.vcard{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-left:6px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;text-decoration:none}
.vcard .id{font-size:18px;font-weight:800}.vcard .sub{font-size:13px;color:var(--muted)}.vcard .soc{margin-left:auto;text-align:right}
.vcard .soc b{font-size:22px}.socbar{height:8px;border-radius:4px;background:#e6e9ef;overflow:hidden;margin-top:4px}.socbar i{display:block;height:100%}
.chips{display:flex;gap:8px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}.chips a{flex:none;min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid #c5ccd8;background:#fff;text-decoration:none;font-weight:600;font-size:14px}
.chips a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero{text-align:center;padding:18px 14px}.hero .big{font-size:56px;font-weight:900;line-height:1}.hero .when{font-size:14px;color:var(--muted);margin-top:6px}
.socin{font-size:44px;font-weight:800;text-align:center;min-height:72px}
details summary{min-height:44px;display:flex;align-items:center;font-weight:600;cursor:pointer;color:var(--muted)}
.result{border-radius:12px;padding:14px;font-size:16px}.r-ok{background:#e8f5ec;border:1px solid #b5dcc1}.r-bad{background:#fdecec;border:1px solid #f3b4b4}
.preset{background:#f7f8fa;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.preset dl.kv{font-size:14px}
[hidden]{display:none!important}
.wrap .actions{grid-template-columns:1fr 1fr}
.form label.opt{display:flex;font-weight:400}
.preset dl.kv{grid-template-columns:1fr;gap:2px}.preset dl.kv dd{margin-bottom:8px}

/* author line under every record: who inserted / last updated, visible to everyone */
.who{font-size:12px;color:var(--muted);margin-top:4px}.who b{color:var(--ink);font-weight:600}
.log li{list-style:none;border-bottom:1px solid var(--line);padding:10px 0}.log{margin:0;padding:0}
/* Black alarm: technical impossibility to recharge — above every other state, hazard black/yellow, never dismissable */
:root{--black:#000;--hazard:#ffd400}
.alarm{background:var(--black);color:#fff;border:3px solid var(--hazard);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-weight:700}
.alarm a{color:var(--hazard)}.alarm .who,.alarm .who b{color:#d8d8d8}
.alarmbar{display:block;background:repeating-linear-gradient(135deg,var(--black) 0 14px,#1a1a1a 14px 28px);color:#fff;border-bottom:3px solid var(--hazard);
  padding:10px 16px;font-weight:800;text-decoration:none;position:sticky;top:56px;z-index:25}
.alarmbar b{color:var(--hazard)}@media(min-width:960px){.alarmbar{margin-left:var(--nav-w)}}
.vcard.k-black{background:var(--black);border:3px solid var(--hazard);border-left-width:8px;color:#fff}.vcard.k-black .sub{color:#e0e0e0}
.btn.black{background:var(--black);border-color:var(--hazard);color:#fff}

/* --- app additions (not in the mockups): state borders on cards, stacked alarm bars, server-rendered shell --- */
.vcard.k-ok{border-left-color:var(--ok)}.vcard.k-warn{border-left-color:var(--warn)}.vcard.k-late{border-left-color:var(--late)}
.vcard.k-crit{border-left-color:var(--crit)}.vcard.k-inc{border-left-color:var(--inc)}.vcard.k-na{border-left-color:var(--na)}
.vcard.k-black{border-left-color:var(--hazard)}
.alarmwrap{position:sticky;top:56px;z-index:25}.alarmwrap .alarmbar{position:static}
.nav a.soon{opacity:.45;cursor:default}
.logout{margin:0}.logout button{width:auto;padding:0 10px;font-size:14px;min-height:44px}
.err{background:#fdecec;border:1px solid #f3b4b4;color:#8a1414;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-weight:600}
.chips a span.n{margin-left:4px;opacity:.8}
.vcard{color:inherit}.vcard .soc .socbar{margin-left:auto}
.search{display:flex;gap:8px;margin-bottom:12px}.search input{flex:1}.search .btn{min-height:44px}
.btn.big{display:flex}
.socin{width:100%}
.est-note{font-size:13px;color:var(--muted)}
.disabled-radio{opacity:.55}
#aperto,#esito,#nuovo{scroll-margin-top:150px}
.label-preview iframe{width:100%;max-width:760px;border:0;background:#fff;box-shadow:0 4px 16px #0003;border-radius:6px}
.checks{display:grid;gap:6px;max-height:260px;overflow:auto}
.card.form{grid-template-columns:minmax(0,1fr)}.checks label{min-width:0}.checks input,.form .seg input{width:auto}.card.form .hint{overflow-wrap:anywhere}
.wrap>div{min-width:0}
.vcard.k-out{background:#eceef2;border-left-color:#8a94a6;color:#4a5262}.vcard.k-out .id{color:#4a5262}
.banner.b-out{background:#e6e8ed;border:1px solid #c3c8d2;color:#3b4252}