:root{--navy:#1a2c3f;--navy2:#15242f;--cream:#dcd9ce;--muted:#8fa6bf;--line:rgba(220,217,206,.12);
  --green:#6fcf97;--gray:#6f8298;--red:#e2725b;--blue:#6fb0e0}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--navy);color:var(--cream);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;min-height:100vh}
.ic{width:15px;height:15px;color:var(--muted);flex:none}

.topbar{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;background:var(--navy);border-bottom:.5px solid var(--line)}
.online-dot{width:8px;height:8px;border-radius:50%;background:#2ecc71;flex:none}
.company{font-size:15px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.floor-sel{position:relative;display:flex;align-items:center;gap:6px;font-size:13px;color:#cdd6e0;background:rgba(220,217,206,.07);border:.5px solid rgba(220,217,206,.16);border-radius:20px;padding:6px 12px;cursor:pointer;user-select:none}
.floor-menu{position:absolute;top:110%;right:0;background:var(--navy2);border:.5px solid rgba(220,217,206,.18);border-radius:10px;padding:5px;min-width:150px;z-index:20;display:none}
.floor-menu.open{display:block}
.floor-menu a{display:block;font-size:13px;color:#c3cdd9;padding:9px 11px;border-radius:7px;cursor:pointer}
.floor-menu a:hover,.floor-menu a.on{background:rgba(124,203,142,.12);color:#fff}
.lock{display:flex}

.layout{display:flex;min-height:calc(100vh - 49px)}
.side{width:172px;flex:none;padding:12px 10px;border-right:.5px solid var(--line)}
.nav{display:flex;align-items:center;gap:9px;font-size:13px;color:#aeb9c6;padding:10px 11px;border-radius:9px;cursor:pointer;text-decoration:none}
.nav:hover{background:rgba(220,217,206,.05)}
.nav.on{background:rgba(124,203,142,.1);color:var(--cream)}
.nav-i{font-size:13px;width:14px;text-align:center}
.cnt{margin-left:auto;font-size:12px;color:var(--muted)}
.legend{margin-top:14px;padding-top:12px;border-top:.5px solid var(--line);font-size:12px;color:#7e93b8;line-height:2}
.legend>div{display:flex;align-items:center;gap:7px}
.lg{width:9px;height:9px;border-radius:50%;flex:none}
.lg.pi5{background:var(--green)}
.lg.esp{background:var(--blue)}

.main{flex:1;padding:16px;min-width:0}
.view{display:none}
.view.on{display:block}

.plan{position:relative;border:1px solid rgba(220,217,206,.28);border-radius:8px;height:300px;display:grid}
.room{border:.5px solid rgba(220,217,206,.16);position:relative}
.room-lbl{font-size:11px;color:#7e93b8;padding:5px 7px;position:absolute;top:0;left:0}
.layer{position:absolute;inset:0;pointer-events:none}
.src{position:absolute;transform:translate(-50%,-50%);z-index:3}
.src .sym{width:20px;height:20px;display:block}
.ping{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;border:1px solid rgba(124,203,142,.5);animation:ping 4.6s ease-out infinite}
.ping.esp{border-color:rgba(111,176,224,.5)}
@keyframes ping{0%{transform:translate(-50%,-50%) scale(.32);opacity:.42}70%{opacity:.1}100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}}
.blip{position:absolute;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);z-index:4}
.blip.connected{background:var(--green)}
.blip.offline{background:var(--gray)}
.blip.banned{background:var(--red);opacity:.5}
.blip.intruder{background:var(--red);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(226,114,91,.5)}50%{opacity:.5;box-shadow:0 0 0 6px rgba(226,114,91,0)}}

.alert-bar{display:flex;align-items:center;gap:10px;background:rgba(226,114,91,.16);border-bottom:.5px solid rgba(226,114,91,.5);color:#f0c0b3;font-size:13px;padding:10px 16px}
.alert-bar .ab-ic{color:#e2725b;font-size:18px;flex:none}
.alert-bar b{color:#fff;font-weight:600}
.src.off .sym path,.src.off .sym circle{stroke:#e2725b !important;fill:#e2725b}
.src.off{opacity:.95}
.alert{display:flex;align-items:center;gap:11px;background:rgba(226,114,91,.12);border:.5px solid rgba(226,114,91,.4);border-radius:9px;padding:9px 11px;margin-top:10px}
.alert .tri{color:var(--red);font-size:18px;flex:none}
.alert .txt{flex:1;min-width:0}
.alert .t1{font-size:12px;color:var(--cream)}
.alert .t2{font-size:11px;color:#9fb3d4}
.btn-ban{font-size:12px;color:#fff;background:#c0392b;border:none;border-radius:7px;padding:7px 14px;cursor:pointer;flex:none}
.btn-ban:hover{background:#d04434}

.dlist{display:flex;flex-direction:column}
.drow{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:.5px solid rgba(220,217,206,.1)}
.drow .sd{width:8px;height:8px;border-radius:50%;flex:none}
.drow .dn{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow .di{font-size:12px;color:var(--muted)}
.drow .ds{font-size:12px;min-width:48px;text-align:right}
.empty{font-size:14px;color:var(--muted);font-style:italic;padding:24px 4px}
.btn-sm{font-size:12px;color:#fff;background:#c0392b;border:none;border-radius:6px;padding:6px 12px;cursor:pointer}
.btn-unban{font-size:12px;color:#cdd6e0;background:none;border:.5px solid rgba(220,217,206,.25);border-radius:6px;padding:6px 12px;cursor:pointer}

.login-screen{position:fixed;inset:0;background:#1a2c3f;display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.login-screen[hidden]{display:none}   /* FIX: senza questa, display:flex sovrascrive l'attributo hidden -> il login non si nasconde mai dopo l'accesso */
.login-card{width:100%;max-width:340px;background:#15242f;border:.5px solid rgba(220,217,206,.14);border-radius:16px;padding:30px 26px;text-align:center}
.login-sym{width:62px;height:auto;display:block;margin:0 auto 14px}
.login-logo{font-size:20px;font-weight:600;letter-spacing:.16em;color:#dcd9ce}
.login-sub{font-size:13px;color:#8fa6bf;margin:4px 0 22px}
.li-fld{width:100%;background:#0f1b24;border:.5px solid #2a4760;border-radius:9px;padding:12px 13px;color:#dcd9ce;font-size:14px;margin-bottom:11px;outline:none;font-family:inherit;box-sizing:border-box}
.li-fld:focus{border-color:#3a5f80}
.li-err{font-size:12px;color:#ff6b6b;margin:-3px 0 10px}
.li-btn{width:100%;background:#1d3550;border:.5px solid #3a5f80;color:#dcd9ce;font-size:14px;border-radius:9px;padding:12px;cursor:pointer;font-family:inherit}
.li-btn:hover{background:#244468}
.lk-seg{display:flex;background:#0f1b24;border:.5px solid #2a4760;border-radius:9px;padding:3px;margin-bottom:13px}
.lk-opt{flex:1;background:none;border:none;color:#9fb3d4;font-size:12.5px;font-family:inherit;padding:8px 6px;border-radius:7px;cursor:pointer}
.lk-opt.on{background:#1d3550;color:#dcd9ce}
.appcard{background:var(--navy2);border:.5px solid var(--line);border-radius:13px;padding:16px}
.fld-l{font-size:12px;color:var(--muted);margin:11px 0 5px}
.fld-l:first-child{margin-top:0}
textarea.li-fld{resize:vertical;min-height:64px;line-height:1.5}
select.li-fld{appearance:none;-webkit-appearance:none}
/* calendario Storico */
.cal-sum{font-size:13px;color:var(--cream);margin:0 2px 12px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-title{font-size:15px;font-weight:600;color:var(--cream)}
.cal-nav{background:var(--navy2);border:.5px solid var(--line);color:var(--cream);width:34px;height:34px;border-radius:8px;font-size:18px;cursor:pointer}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{text-align:center;font-size:11px;color:var(--muted);padding-bottom:2px}
.cal-cell{aspect-ratio:1/1;background:var(--navy2);border:.5px solid var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.cal-cell.empty-cell{background:none;border:none;cursor:default}
.cal-n{font-size:13px;color:#c9d1d9}
.cal-h{font-size:9px;color:#9fd6b0;margin-top:1px}
.cal-has{background:rgba(124,203,142,.12);border-color:rgba(124,203,142,.4)}
.cal-today{outline:2px solid var(--green);outline-offset:-1px}
.cal-today .cal-n{color:#fff;font-weight:700}
.cal-detail{margin-top:16px}
.cal-dtitle{font-size:13px;color:var(--muted);margin-bottom:8px}
/* gestione (☰) */
.mgr-nav{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}
.mgr-tab{position:relative;flex:none;white-space:nowrap;background:var(--navy2);border:.5px solid var(--line);color:var(--muted);font-size:12.5px;font-family:inherit;padding:8px 14px;border-radius:20px;cursor:pointer}
.mgr-tab.on{background:rgba(124,203,142,.12);border-color:rgba(124,203,142,.4);color:var(--cream)}
.mgr-tab .tab-badge{position:static;margin-left:6px;display:inline-block;vertical-align:middle}
.reddot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none}
.li-note{font-size:11px;color:#6f8298;margin-top:16px;line-height:1.5}
.logout-btn{background:none;border:none;color:#8fa6bf;cursor:pointer;padding:0;display:flex;align-items:center}
.logout-btn:hover{color:#e2725b}

@media(max-width:620px){
  .layout{flex-direction:column}
  .side{width:100%;display:flex;gap:6px;overflow-x:auto;border-right:none;border-bottom:.5px solid var(--line);padding:8px 10px}
  .nav{flex:none;white-space:nowrap}
  .legend{display:none}
  .company{font-size:14px}
  .plan{height:240px}
}

/* ===== APP a 4 sezioni: tab-bar in basso (PWA, tutti gli OS) ===== */
body{padding-bottom:64px}
.appsec{padding:16px;max-width:1080px;margin:0 auto}
.sec-h{font-size:17px;font-weight:600;letter-spacing:.04em;color:var(--cream);margin:4px 0 16px}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--navy2);border-top:.5px solid var(--line);z-index:50;padding-bottom:env(safe-area-inset-bottom)}
.tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--muted);font-size:10.5px;font-family:inherit;padding:9px 2px 8px;cursor:pointer;transition:color .15s}
.tab svg{width:21px;height:21px}
.tab:hover{color:#b9c6d6}
.tab.on{color:var(--green)}
.tab-badge{position:absolute;top:5px;left:calc(50% + 8px);min-width:16px;height:16px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:600;line-height:16px;text-align:center;padding:0 4px;box-sizing:border-box}
/* card collezione orologi */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.wcard{background:var(--navy2);border:.5px solid var(--line);border-radius:13px;overflow:hidden}
.wcard .wph{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0f1b24;display:block;cursor:pointer}
.wcard .wnoph{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;color:#3f5168;background:#0f1b24}
.wcard .wb{padding:10px 11px}
.wcard .wm{font-size:14px;font-weight:600;color:var(--cream)}
.wcard .wr{font-size:12px;color:var(--muted);margin-top:1px}
.wcard .wst{display:inline-block;margin-top:7px;font-size:10.5px;color:#9fd6b0;background:rgba(124,203,142,.13);border-radius:20px;padding:2px 9px}
.wcard .wspec{font-size:11px;color:#7e93b8;margin-top:7px;line-height:1.5}
/* card firewall / esp */
.ecard{display:flex;align-items:center;gap:12px;background:var(--navy2);border:.5px solid var(--line);border-radius:12px;padding:13px 14px;margin-bottom:10px}
.ecard .edot{width:9px;height:9px;border-radius:50%;flex:none}
.ecard .en{font-size:14px;color:var(--cream);font-weight:600}
.ecard .em{font-size:12px;color:var(--muted);margin-top:2px}
.ecard .ebadge{margin-left:auto;font-size:11px;color:#cdd6e0;background:rgba(220,217,206,.08);border:.5px solid var(--line);border-radius:20px;padding:3px 10px;white-space:nowrap}
.esp-group{font-size:12px;color:#7e93b8;letter-spacing:.08em;text-transform:uppercase;margin:14px 2px 9px}
.esp-group:first-child{margin-top:2px}
.esp-rename{flex:none;font-size:11px;color:#cdd6e0;background:transparent;border:.5px solid var(--line);border-radius:7px;padding:5px 10px;cursor:pointer;font-family:inherit}
.esp-rename:hover{border-color:#3a5f80;color:#fff}
.blip-me{position:absolute;width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);z-index:6;background:#46d4e0;box-shadow:0 0 0 4px rgba(70,212,224,.25);animation:pulse 1.6s ease-in-out infinite}
/* FIX: display:flex inline batte [hidden] → forza il nascondimento delle barre quando non servono */
#empRepairBar[hidden],#installBar[hidden]{display:none!important}