/* Palette e tipografia allineate a iotrack24.it */
:root{
  --petrol:#2A5B5F; --petrol-deep:#173e41; --cyan:#86C5D1; --aqua:#B2E4E8;
  --bg:#ffffff; --surface:#f1f8f9; --surface-2:#e4f1f3;
  --fg:#16383b; --muted:#5a777a; --border:#d9e8ea; --accent-ink:#1d7d88;
  --on-dark:#eaf6f7; --on-dark-mut:#9cc4c8;
  --success:#1f9e6f; --warn:#e0a106; --danger:#e0413c;
  --font-display:'Manrope',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r-sm:10px; --r:14px; --r-lg:20px;
  --shadow-sm:0 1px 2px rgba(23,62,65,.06), 0 2px 8px rgba(23,62,65,.05);
  --shadow:0 8px 30px rgba(23,62,65,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--surface);color:var(--fg);font:15px/1.5 var(--font-body);display:flex;flex-direction:column}

/* ---- barra superiore ---- */
.topbar{display:flex;align-items:center;gap:22px;padding:0 22px;height:72px;flex:none;
  background:var(--petrol-deep);color:var(--on-dark);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand img{width:34px;height:34px;object-fit:contain}
.brand-name{font:800 19px/1 var(--font-display);letter-spacing:-.02em;display:flex;flex-direction:column;gap:3px}
.brand-name small{font:500 8.5px/1 var(--font-mono);letter-spacing:.16em;color:var(--on-dark-mut)}
.module{font:600 13px var(--font-body);color:var(--aqua);border-left:1px solid rgba(154,196,200,.35);padding-left:22px}

.counters{margin-left:auto;display:flex;gap:26px}
.counters div{text-align:right}
.counters b{display:block;font:700 18px/1.2 var(--font-mono);color:var(--aqua)}
.counters span{font-size:10px;color:var(--on-dark-mut);text-transform:uppercase;letter-spacing:.09em}

/* ---- barra endpoint ---- */
.endpointbar{flex:none;display:flex;align-items:center;gap:14px;padding:9px 22px;
  background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:7px;background:var(--surface);color:var(--petrol);
  border:1px solid var(--border);border-radius:999px;padding:4px 13px;font-size:13px;font-weight:500}
.badge b{font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px rgba(224,65,60,.15)}
.dot.on{background:var(--success);box-shadow:0 0 0 3px rgba(31,158,111,.16)}
.endpoint{font:12.5px var(--font-mono);color:var(--muted)}
.endpoint b{color:var(--accent-ink)}

main{flex:1;display:flex;min-height:0}

/* ---- colonna dispositivi ---- */
aside{width:296px;flex:none;background:var(--bg);border-right:1px solid var(--border);overflow-y:auto;padding:18px}
aside h2{font:700 11px var(--font-display);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 12px}
aside h2 small{font:500 9px var(--font-mono);letter-spacing:.1em;color:var(--cyan);margin-left:6px}

.devices{display:flex;flex-direction:column;gap:9px;margin-bottom:28px}
.dev{background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--border);
  border-radius:var(--r-sm);padding:11px 13px;cursor:pointer;transition:.15s}
.dev:hover{box-shadow:var(--shadow-sm)}
.dev.online{border-left-color:var(--success)}
.dev.sel{background:var(--surface);border-color:var(--cyan);border-left-color:var(--accent-ink)}
.dev .imei{font:600 13.5px var(--font-mono);color:var(--fg)}
.dev .meta{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;gap:9px;flex-wrap:wrap}
.dev .pos{font:11.5px var(--font-mono);color:var(--accent-ink);margin-top:5px}

.cmd{display:flex;flex-wrap:wrap;gap:8px}
.cmd input{flex:1;min-width:150px;background:var(--bg);border:1px solid var(--border);color:var(--fg);
  border-radius:var(--r-sm);padding:9px 11px;font:13px var(--font-mono)}
.cmd input:focus{outline:2px solid var(--aqua);outline-offset:-1px;border-color:var(--cyan)}
.cmd button{background:var(--petrol);color:#fff;border:0;border-radius:var(--r-sm);padding:9px 18px;
  font:600 14px var(--font-body);cursor:pointer;transition:.15s}
.cmd button:hover:not(:disabled){background:var(--petrol-deep)}
.cmd button:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.hint{width:100%;margin:3px 0 0;font-size:11.5px;color:var(--muted)}

/* ---- area centrale ---- */
.content{flex:1;display:flex;flex-direction:column;min-width:0}
.tabs{display:flex;align-items:center;gap:2px;padding:0 18px;background:var(--bg);border-bottom:1px solid var(--border);flex:none}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  padding:14px 15px;cursor:pointer;font:500 14px var(--font-body);transition:.15s}
.tab:hover{color:var(--petrol)}
.tab.active{color:var(--petrol);border-bottom-color:var(--accent-ink);font-weight:600}
.filter{margin-left:16px;font:12px var(--font-mono);color:var(--accent-ink);background:var(--surface);
  border-radius:999px;padding:3px 6px 3px 12px}
.filter:empty{display:none}
.filter button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:0 6px}
.pause{margin-left:auto;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:pointer}
.pause input{accent-color:var(--accent-ink)}

.pane{display:none;flex:1;min-height:0;overflow:auto;padding:18px}
.pane.active{display:block}
#pane-map.active{display:flex;padding:0}
#map{flex:1;min-height:300px;background:var(--surface-2)}
.hidden{display:none!important}
.empty{color:var(--muted);text-align:center;padding:56px 20px;font-size:14px}

/* ---- record AVL ---- */
.records{display:flex;flex-direction:column;gap:10px}
.rec{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm);animation:in .25s ease}
.rec[open]{border-color:var(--cyan);box-shadow:var(--shadow)}
@keyframes in{from{opacity:0;transform:translateY(-6px)}}
.rec>summary{list-style:none;cursor:pointer;padding:12px 15px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.rec>summary::-webkit-details-marker{display:none}
.rec>summary:hover{background:var(--surface)}
.rec .imei{font:600 13px var(--font-mono);color:var(--petrol)}
.rec .when{font:12.5px var(--font-mono);color:var(--muted)}
.rec .ev{font-size:12px;font-weight:500;background:var(--surface);color:var(--petrol);
  border:1px solid var(--border);border-radius:999px;padding:2px 11px}
.rec .ev.hot{background:#fdf6e3;border-color:#f0dda6;color:#8a6407}
.rec .gps{margin-left:auto;font:12.5px var(--font-mono);color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.rec .gps b{color:var(--fg);font-weight:600}
.rec .nofix{color:var(--warn);font-weight:600}
.rec .body{border-top:1px solid var(--border);padding:15px;background:var(--surface)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-bottom:14px}
.cell{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 11px}
.cell span{display:block;font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.cell b{font:600 13.5px var(--font-mono);color:var(--fg)}

table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
th{text-align:left;color:var(--muted);font:600 9.5px var(--font-body);text-transform:uppercase;
  letter-spacing:.08em;padding:8px 11px;background:var(--surface-2);border-bottom:1px solid var(--border)}
td{padding:6px 11px;border-bottom:1px solid var(--border);font-family:var(--font-mono)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface)}
td.name{font-family:var(--font-body)}
tr.unknown td.name{color:var(--muted);font-style:italic}
td.val{color:var(--accent-ink);font-weight:500}
td.hex{color:var(--muted);font-size:11.5px}

/* ---- byte grezzi ---- */
.raw{display:flex;flex-direction:column;gap:8px;font-family:var(--font-mono);font-size:11.5px}
.pk{background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--accent-ink);
  border-radius:var(--r-sm);padding:9px 12px;box-shadow:var(--shadow-sm)}
.pk.out{border-left-color:var(--success)}
.pk .hd{display:flex;gap:11px;color:var(--muted);margin-bottom:5px;flex-wrap:wrap;font-size:11px}
.pk .hd b{color:var(--petrol)}
.pk .hex{word-break:break-all;line-height:1.65;color:var(--fg)}

/* ---- log ---- */
.log{font-family:var(--font-mono);font-size:12.5px;display:flex;flex-direction:column;gap:1px}
.ln{display:flex;gap:12px;padding:4px 9px;border-radius:6px;background:var(--bg);border:1px solid var(--border)}
.ln time{color:var(--muted);flex:none}
.ln b{flex:none;width:56px;font-weight:700}
.ln.ok b{color:var(--success)} .ln.warn b{color:var(--warn)}
.ln.error b{color:var(--danger)} .ln.info b{color:var(--accent-ink)}
.ln.error{background:#fdf1f1;border-color:#f3cfce}

.leaflet-container{background:var(--surface-2);font-family:var(--font-body)}
@media(max-width:900px){
  aside{display:none}
  .topbar{height:auto;padding:12px 16px;gap:14px}
  .module{display:none}
  .counters{gap:16px;width:100%;margin-left:0;justify-content:space-between}
}

.pubbox{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
.pubbox .pub{background:#eaf7f4;border:1px solid #a9ded0;border-radius:999px;padding:3px 13px;
  font-size:13px;color:var(--petrol);font-family:var(--font-body)}
.pubbox .pub b{color:#12795a;font-family:var(--font-mono);font-weight:700}
.pubbox code{font:12px var(--font-mono);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:4px 10px;color:var(--muted);white-space:pre}
.pubbox button{background:none;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:4px 11px;font:500 12px var(--font-body);color:var(--petrol);cursor:pointer}
.pubbox button:hover{background:var(--surface);border-color:var(--cyan)}

/* Comandi GPRS e risposte nel flusso dati */
.rec.cmd{padding:0}
.rec.cmd.sent{border-left:3px solid var(--accent-ink)}
.rec.cmd.reply{border-left:3px solid var(--success)}
.cmd-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:11px 15px}
.rec.cmd .ev{font-weight:600}
.rec.cmd.reply .ev{background:#eaf7f4;border-color:#a9ded0;color:#12795a}
.cmd-text{margin:0;padding:11px 15px;border-top:1px solid var(--border);background:var(--surface);
  font:12.5px/1.6 var(--font-mono);color:var(--fg);white-space:pre-wrap;word-break:break-word}

/* Uscita dalla sessione */
.logout{margin-left:auto;color:var(--on-dark-mut);text-decoration:none;font-size:12px;
  border:1px solid rgba(154,196,200,.35);border-radius:999px;padding:4px 13px;transition:.15s}
.logout:hover{color:var(--on-dark);border-color:var(--aqua)}
.logout + .counters{margin-left:22px}