:root{
  --deep:#0E1A22; --panel:#14252F; --panel-2:#1B303C; --line:#23414F;
  --text:#DCE8ED; --muted:#7C99A6;
  --signal:#F2A03D; --sel:#4FD1C5; --stop:#E5615E; --ok:#63C08A;
  --warn:#E8C24A; --idle:#6E8B99; --off:#4A5A64;
  --cond:'Barlow Semi Condensed',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--deep);color:var(--text);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
/* tutti i campi di testo seguono il tema scuro, anche fuori da label.f:
   prima alcuni restavano bianchi col testo grigio, illeggibili */
input[type=text],input[type=password],input[type=number],input[type=search],
input[type=datetime-local],input[type=date],input[type=time],input:not([type]),
textarea,select{background:var(--deep);color:var(--text);
  border:1px solid var(--line);border-radius:3px;padding:8px 9px}
textarea{resize:vertical;line-height:1.5;font-family:inherit}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--sel)}
input[type=checkbox],input[type=radio]{accent-color:var(--sel);
  width:auto;padding:0;border:0;background:none}
input[type=color]{padding:2px;height:34px}
option{background:var(--panel);color:var(--text)}

.shell{display:grid;grid-template-columns:400px 1fr;grid-template-rows:54px 1fr;
  height:100%;max-width:100vw;overflow-x:hidden}
/* i figli di una griglia hanno larghezza minima automatica: senza questo
   un contenuto largo (la barra in alto) sfonda e taglia la mappa di lato */
.shell > *{min-width:0}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 16px;
  background:var(--panel);border-bottom:1px solid var(--line);
  min-width:0;overflow:hidden}
.topbar > *{flex:none}
.topnav{display:flex;gap:4px;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none}
.topnav::-webkit-scrollbar{display:none}
.brand{font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.05;white-space:nowrap;
  display:flex;align-items:center;gap:11px}
.brand-logo{width:34px;height:34px;flex:none;border-radius:50%}
.brand-txt{display:inline-block}
.brand span{color:var(--signal)}
.brand .vers{font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--deep);background:var(--signal);border-radius:2px;padding:1px 4px;
  margin-left:6px;vertical-align:super;font-weight:700}
.brand em{display:block;font-style:normal;font-size:10.5px;font-weight:500;
  letter-spacing:.15em;color:var(--muted)}
.spacer{margin-left:auto}
.chip{display:flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--line);
  border-radius:999px;background:var(--deep);cursor:pointer;white-space:nowrap;
  font-family:var(--cond);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.chip:hover{border-color:#3A6478}
.chip.on{border-color:var(--sel);color:var(--sel)}
.chip.plain{cursor:default}
.chip.plain:hover{border-color:var(--line)}
.who b{color:var(--signal);font-weight:600}

.led{width:9px;height:9px;border-radius:50%;background:#33505E;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.led.on{background:var(--ok);box-shadow:0 0 9px var(--ok)}
.led.live{background:var(--ok);box-shadow:0 0 9px var(--ok);animation:beat 1.9s ease-in-out infinite}
.led.err{background:var(--stop);box-shadow:0 0 9px var(--stop)}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.42}}

.side{background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;border-bottom:1px solid var(--line);flex:none}
.tab{flex:1;padding:13px 4px;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  font-family:var(--cond);font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--signal)}
.tab:focus-visible{outline:2px solid var(--sel);outline-offset:-3px}
.pane{flex:1;overflow-y:auto;padding:16px;display:none}
.pane.show{display:block}

/* ---- strip radio ---- */
.strip{border:1px solid var(--line);border-left:3px solid #33505E;background:var(--panel-2);
  border-radius:3px;padding:0;margin-bottom:4px;overflow:hidden}
.strip-head{padding:8px 11px}
.strip .detail{display:none;padding:0 11px 11px}
.strip.open .detail{display:block}
.strip.open{margin-bottom:9px;background:#1F3945}
.chev{color:var(--muted);font-size:17px;line-height:1;transition:transform .15s;flex:none}
.strip.open .chev{transform:rotate(90deg)}
.when{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;flex:none}
.strip .rid{margin:0 0 5px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.strip.sel{border-left-color:var(--sel);background:#1F3945}
.strip.live{border-left-color:var(--signal)}
.strip-head{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.strip-head:hover{background:rgba(255,255,255,.03)}
.glyph{width:22px;height:22px;flex:none;color:var(--muted)}
.strip.live .glyph,.strip.sel .glyph{color:var(--text)}
.name{font-family:var(--cond);font-size:16px;font-weight:600;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.name.byid{font-family:var(--mono);font-size:14px;font-weight:600}

.meta{margin-top:5px;font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.65}
.meta .coord{color:var(--text)}
.badges{display:flex;gap:5px;flex-wrap:wrap}
.badges:not(:empty){margin-top:6px}
.badge{padding:1px 7px;border-radius:2px;font-family:var(--cond);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line)}
.badge.iv{color:var(--signal);border-color:#5A4526}
.badge.ptt{color:var(--sel);border-color:#26514E}

.acts{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.btn{padding:4px 9px;background:#22404E;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  font-family:var(--cond);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase}
.btn:hover:not(:disabled){background:#2C5266;border-color:#3A6478}
.btn:disabled{opacity:.32;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--sel);outline-offset:1px}
.btn.go{background:#7A4E17;border-color:#9A6420}
.btn.go:hover:not(:disabled){background:#96601D}
.btn.kill{background:#5E2A2A;border-color:#7A3838}
.btn.kill:hover:not(:disabled){background:#763636}
.btn.ghost{background:none}
.btn.small{padding:3px 8px;font-size:11px}

.cfgrow{display:none;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);gap:7px}
.cfgrow.open{display:grid;grid-template-columns:1fr 1fr;align-items:end}
.cfgrow .full{grid-column:1/-1;display:flex;gap:6px}

/* ---- blocchi e moduli ---- */
.block{border:1px solid var(--line);border-radius:3px;padding:14px;margin-bottom:14px;background:var(--panel-2)}
.blocktitle{font-family:var(--cond);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 11px}
label.f{display:block;margin-bottom:10px;font-size:12px;color:var(--muted)}
label.f input,label.f select,label.f textarea{width:100%;margin-top:5px;padding:8px 9px;
  background:var(--deep);border:1px solid var(--line);border-radius:2px;
  font-family:var(--mono);font-size:13px}
label.f textarea{resize:vertical;min-height:104px;line-height:1.5}
label.f input:focus,label.f select:focus,label.f textarea:focus{outline:none;border-color:var(--sel)}
.inline{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:11px}
.inline input[type=checkbox]{accent-color:var(--sel)}
.radio-opt{display:flex;gap:11px;align-items:flex-start;padding:11px;border:1px solid var(--line);
  border-radius:3px;margin-bottom:8px;cursor:pointer;background:var(--deep)}
.radio-opt.on{border-color:var(--sel);background:#1F3945}
.radio-opt input{margin-top:3px;accent-color:var(--sel)}
.radio-opt b{font-family:var(--cond);font-size:15px;letter-spacing:.05em;display:block}
.radio-opt small{color:var(--muted);font-size:12px;line-height:1.55;display:block;margin-top:3px}
.note{font-size:12px;color:var(--muted);line-height:1.6}
.note code{font-family:var(--mono);font-size:11px}
.alert{padding:10px 12px;border-radius:3px;font-size:12.5px;line-height:1.55;margin-bottom:12px;
  border-left:3px solid var(--stop);background:rgba(229,97,94,.11)}
.alert.info{border-left-color:var(--sel);background:rgba(79,209,197,.09)}
.alert.good{border-left-color:var(--ok);background:rgba(99,192,138,.1)}
.alert ul{margin:6px 0 0;padding-left:18px}
.empty{text-align:center;padding:32px 14px;color:var(--muted);font-size:13px;line-height:1.7}

/* ---- mappa ---- */
#map{height:100%;background:#0A1319}
.leaflet-control-layers,.leaflet-bar a{background:var(--panel);color:var(--text);border-color:var(--line)}
.leaflet-bar a:hover{background:var(--panel-2)}
.leaflet-control-attribution{background:rgba(14,26,34,.82)!important;color:var(--muted)!important}
.leaflet-control-attribution a{color:var(--muted)!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--text);border-radius:3px}
.leaflet-popup-content{margin:11px 13px;min-width:212px}
.leaflet-tooltip{background:var(--panel);border:1px solid var(--line);color:var(--text);
  font-family:var(--cond);font-size:13px;letter-spacing:.04em}

.mk{display:flex;flex-direction:column;align-items:center;width:80px;margin-left:-27px}
.mk .disc{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel);border:2px solid var(--signal);color:var(--signal);
  box-shadow:0 2px 8px rgba(0,0,0,.55)}
.mk .disc svg{width:19px;height:19px}
.mk.stale .disc{border-color:#4A6A79;color:#7C99A6}
.mk.sel .disc{border-color:var(--sel);color:var(--sel);box-shadow:0 0 0 5px rgba(79,209,197,.22)}
.mk .tag{margin-top:3px;padding:1px 5px;border-radius:2px;background:rgba(14,26,34,.86);
  border:1px solid var(--line);font-family:var(--cond);font-size:11px;letter-spacing:.04em;
  max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk .tag.byid{font-family:var(--mono);font-size:10px}

.pop b{font-family:var(--cond);font-size:16px;letter-spacing:.04em;display:block}
.pop .sub{font-size:11px;color:var(--muted);margin-top:1px}
.pop .co{font-family:var(--mono);font-size:12.5px;margin:8px 0 2px}
.pop .age{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.6}
.pop .row{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.pop a.btn{text-decoration:none;display:inline-block}

/* ---- finestra modale ---- */
.mask{position:fixed;inset:0;z-index:3000;background:rgba(5,12,16,.72);
  display:grid;place-items:center;padding:18px}
.mask[hidden]{display:none}
.dlg{background:var(--panel);border:1px solid var(--line);border-radius:5px;
  width:min(400px,100%);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.dlg h2{margin:0;padding:15px 17px;border-bottom:1px solid var(--line);
  font-family:var(--cond);font-size:16px;letter-spacing:.11em;text-transform:uppercase;font-weight:600}
.dlg .body{padding:17px}
.dlg .foot{display:flex;gap:8px;justify-content:flex-end;padding:13px 17px;border-top:1px solid var(--line)}
.opt{display:flex;gap:10px;align-items:flex-start;padding:11px;border:1px solid var(--line);
  border-radius:3px;margin-bottom:9px;background:var(--deep);cursor:pointer}
.opt.on{border-color:var(--sel);background:#1F3945}
.opt input[type=checkbox]{margin-top:3px;accent-color:var(--sel)}
.opt b{font-family:var(--cond);font-size:14.5px;letter-spacing:.05em;display:block}
.opt small{display:block;color:var(--muted);font-size:11.5px;line-height:1.5;margin-top:2px}
.opt .secs{width:74px;margin-top:7px;padding:5px 7px;background:var(--panel);
  border:1px solid var(--line);border-radius:2px;font-family:var(--mono);font-size:12.5px;text-align:right}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:4000;
  padding:10px 18px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--sel);
  border-radius:3px;font-size:13px;max-width:min(520px,92vw);box-shadow:0 8px 26px rgba(0,0,0,.5)}
.toast.bad{border-left-color:var(--stop)}

/* ---- ruolo utente: niente comandi di configurazione ---- */
body[data-role="user"] .admin-only{display:none!important}

/* ============ vista mobile ============
   Su telefono la pagina scorre: mappa in alto (altezza fissa), sotto
   l'elenco radio. I menu stanno tutti in una barra sola, scorrevole di
   lato. Le schede di consultazione prendono tutto lo schermo. */
body.mobile{overflow:auto}
body.mobile .shell{grid-template-columns:1fr;grid-template-rows:auto auto auto;
  height:auto;min-height:100%}
body.mobile .topbar{position:sticky;top:0;z-index:600;flex-wrap:wrap;
  padding:6px 10px;gap:7px;height:auto;overflow:visible}
body.mobile main{grid-row:2;height:58vh;min-height:260px;position:relative}
body.mobile #map{height:100%}
body.mobile .side{grid-row:3;border-right:0;border-top:1px solid var(--line);
  max-height:none;overflow:visible}
body.mobile .pane{display:none;padding:12px;overflow:visible}
body.mobile .pane.show{display:block}
body.mobile .cfgrow,body.mobile .mobile-hide{display:none}
body.mobile .brand em,body.mobile .brand .vers{display:none}
body.mobile .brand{font-size:15px;gap:8px}
body.mobile .brand-logo{width:26px;height:26px}
body.mobile .strip{margin-bottom:7px}
body.mobile .acts{gap:6px}

/* i menu tutti su una riga sola, scorrevole di lato con il dito */
body.mobile .topnav{order:5;width:100%;flex:1 0 100%;gap:5px;
  padding:4px 0 2px;-webkit-overflow-scrolling:touch}
body.mobile .topnav-btn{padding:8px 11px;font-size:12px;white-space:nowrap;flex:none}
body.mobile .tabs{position:sticky;top:0;z-index:5;background:var(--panel)}
body.mobile .tab{padding:12px 4px;font-size:13px}
body.mobile .chip{padding:6px 10px;font-size:11.5px}
body.mobile .chanstate{order:6;width:100%;flex:1 0 100%;justify-content:center;
  padding:5px 0 2px;border-top:1px solid var(--line)}

/* schede di consultazione a tutto schermo su mobile */
body.mobile.paneful{overflow:hidden}
body.mobile.paneful .shell{grid-template-rows:auto 1fr;height:100%}
body.mobile.paneful main{display:none}
body.mobile.paneful .side{grid-row:2;min-height:0;overflow:hidden}
body.mobile.paneful .pane{padding:12px 12px 40px;overflow-y:auto;height:100%}

/* le tabelle a griglia diventano schede impilate, leggibili sul telefono */
body.mobile .logrow{grid-template-columns:1fr;gap:3px;padding:9px 10px;
  border:1px solid var(--line);margin-bottom:5px;background:var(--panel-2)}
body.mobile .logrow:nth-child(odd){background:var(--panel-2)}
body.mobile .logkind{justify-self:start}
body.mobile .loglist{max-height:none;border:0;padding:0;background:transparent}
body.mobile .recrow{grid-template-columns:1fr;gap:5px}
body.mobile .recrow audio{width:100%}
body.mobile .msgsplit{grid-template-columns:1fr}
body.mobile .convlist{max-height:34vh}
body.mobile .convthread{max-height:52vh}
body.mobile .msgfilter{flex-direction:column;align-items:stretch;gap:8px}
body.mobile .msgfilter label{display:flex;flex-direction:column;gap:4px}
body.mobile .msgfilter select{width:100%}
body.mobile .userrow{flex-wrap:wrap}
body.mobile .usernew{flex-direction:column;align-items:stretch}
body.mobile .cols{grid-template-columns:1fr}

/* pulsanti e campi piu' grandi: si toccano col dito */
body.mobile .btn{padding:9px 13px;font-size:12px}
body.mobile input,body.mobile select,body.mobile textarea{
  min-height:40px;font-size:16px}   /* 16px evita lo zoom automatico su iPhone */
body.mobile .searchbar input{min-height:42px}

/* ---- barra audio su mobile: il PTT diventa grande ---- */
body.mobile .audiobar{order:7;width:100%;flex:1 0 100%;gap:8px;
  padding:6px 0 4px;border-top:1px solid var(--line)}
body.mobile .audiobtn{flex:1;justify-content:center;padding:13px 10px;
  font-size:13px;border-radius:6px}
body.mobile .audiobtn.talk{flex:2;padding:17px 10px;font-size:15px;
  font-weight:700;letter-spacing:.1em}
body.mobile .audiobtn.talk svg{width:18px;height:18px}
body.mobile .audiovu{width:100%;order:9;height:8px}
body.mobile .audiowho{order:8;width:100%;text-align:center;font-size:12px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---- schermi stretti anche senza vista mobile attiva ----
   E' il caso del telefono con «vista desktop»: senza questi accorgimenti la
   barra in alto sfonda e taglia la mappa di lato. */
@media (max-width:1100px){
  .shell{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
  .topbar{gap:8px;padding:0 10px}
  .brand em{display:none}
  .chanstate{min-width:0}
}
@media (max-width:900px){
  html,body{overflow:auto}
  .shell{grid-template-columns:1fr;grid-template-rows:auto auto auto;
    height:auto;min-height:100%}
  .topbar{flex-wrap:wrap;height:auto;padding:6px 10px;gap:7px;
    position:sticky;top:0;z-index:600;overflow:visible}
  .topnav{order:5;width:100%;flex:1 0 100%;padding:3px 0}
  .chanstate{order:6;width:100%;flex:1 0 100%;justify-content:center}
  .audiobar{order:7;width:100%;flex:1 0 100%;margin-left:0;padding:5px 0}
  .audiobtn{flex:1;justify-content:center;padding:12px 10px;font-size:13px}
  .audiobtn.talk{flex:2;padding:16px 10px;font-size:15px;font-weight:700}
  main{grid-row:2;height:56vh;min-height:240px}
  #map{height:100%}
  .side{grid-row:3;border-right:0;border-top:1px solid var(--line);
    max-height:none;overflow:visible}
  .pane{overflow:visible}
  .brand{font-size:15px}
  .cols{grid-template-columns:1fr}
  .msgsplit{grid-template-columns:1fr}
  .logrow{grid-template-columns:1fr;gap:3px}
  .recrow{grid-template-columns:1fr}
  input,select,textarea{font-size:16px}
}
/* schermi molto stretti */
@media (max-width:480px){
  .brand-txt{font-size:14px}
  .topnav-btn{padding:7px 9px;font-size:11.5px}
  .who,.buildline{font-size:10px}
}


/* ============ colore per età della posizione ============
   verde: fresca · giallo: invecchiata · grigio: vecchia o assente
   Le soglie si impostano dalla scheda Opzioni. */
.mk.age-green  .disc{border-color:var(--ok);   color:var(--ok)}
.mk.age-yellow .disc{border-color:var(--warn); color:var(--warn)}
.mk.age-grey   .disc{border-color:var(--idle); color:var(--idle)}
.mk.sel .disc{border-color:var(--sel);color:var(--sel);box-shadow:0 0 0 5px rgba(79,209,197,.22)}
.mk.voice .disc{animation:beat 1.2s ease-in-out infinite}

/* nell'elenco il colore sta sia sulla sagoma sia sul bordo sinistro */
.strip.age-green  .glyph{color:var(--ok)}
.strip.age-yellow .glyph{color:var(--warn)}
.strip.age-red    .glyph{color:var(--stop)}
.strip.age-grey   .glyph{color:var(--idle)}
.strip.age-green {border-left-color:var(--ok)}
.strip.age-yellow{border-left-color:var(--warn)}
.strip.age-red   {border-left-color:var(--stop)}
.strip.age-grey  {border-left-color:var(--idle)}
.strip.live{border-left-color:var(--signal)}

.mk.age-red   .disc{border-color:var(--stop); color:var(--stop)}
.mk.age-black .disc{border-color:var(--off); color:var(--off); opacity:.85}
.strip.age-black .glyph{color:var(--off)}
.strip.age-black{border-left-color:var(--off)}
.strip.age-black .name{opacity:.75}

.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:9px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;
  vertical-align:middle;border:2px solid currentColor}
.legend .g{color:var(--ok)} .legend .y{color:var(--warn)}
.legend .rd{color:var(--stop)} .legend .r{color:var(--idle)}
.legend .bk{color:var(--off)}
.legendbox{border:1px solid var(--line);border-radius:3px;padding:10px 12px;
  margin-bottom:12px;background:var(--panel-2)}
.legendbox .legend{margin-top:0;gap:10px}

/* ============ configurazione a tutta larghezza ============
   Durante la configurazione la mappa non serve: il pannello si allarga. */
body.cfgfull .shell{grid-template-columns:1fr}
body.cfgfull main{display:none}
body.cfgfull .side{border-right:0}
body.cfgfull .pane{max-width:920px;margin:0 auto;width:100%;padding:22px 20px 40px}
body.cfgfull .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;align-items:start}

/* ============ aggiunta rapida ============ */
.added{margin-top:11px;display:flex;flex-direction:column;gap:5px;max-height:190px;overflow:auto}
.added .it{display:flex;align-items:center;gap:8px;padding:5px 9px;border:1px solid var(--line);
  border-left:2px solid var(--ok);border-radius:2px;background:var(--deep);font-size:12px}
.added .it b{font-family:var(--mono);font-size:12px;color:var(--signal)}
.added .it span{color:var(--muted)}

/* ============ tasto naviga: solo in vista mobile ============ */
/* il tasto Naviga deve saltare all'occhio: arancione pieno, testo bianco */
.btn.nav{background:#E8770F;border-color:#F08A2A;color:#fff;font-weight:600}
.btn.nav:hover{background:#F5891E;border-color:#FF9C3D}
a.btn.nav{text-decoration:none}
.nav-only{display:none;text-decoration:none;margin-left:auto}
body.mobile .nav-only{display:inline-block}
body.mobile .rid{margin-left:0;opacity:.75}
body.mobile .name{flex:1}
body.mobile .meta{margin-top:3px;font-size:11.5px}
body.mobile .badges{display:none}

/* il visitatore senza accesso non vede alcun comando */
body[data-role="guest"] .admin-only,
body[data-role="guest"] .acts{display:none!important}
/* elementi riservati agli utenti autenticati (user e admin), non ai visitatori */
body[data-role="guest"] .guest-hide{display:none!important}


/* punti del tracciato storico */
.trkdot{cursor:pointer}
.trkinfo{border:1px solid var(--line);border-radius:3px;padding:11px 12px;background:var(--panel-2);
  font-size:12.5px;line-height:1.6}
.trkinfo b{font-family:var(--cond);font-size:15px;letter-spacing:.04em}
.trkinfo .mono{font-family:var(--mono);font-size:11.5px;color:var(--muted)}


/* diagnostica */
.diag{display:grid;grid-template-columns:1fr auto;gap:3px 12px;font-size:12.5px}
.diag b{font-family:var(--mono);font-size:12.5px;text-align:right}
.diag .k{color:var(--muted)}
.diag .zero b{color:var(--stop)}
.diag .ok b{color:var(--ok)}
.diaghead{font-family:var(--cond);letter-spacing:.08em;text-transform:uppercase;
  font-size:11.5px;color:var(--muted);margin:9px 0 5px}


/* pulsante «inquadra tutte» sulla mappa */
.fitbtn{position:absolute;left:12px;bottom:26px;z-index:900;
  padding:7px 13px;background:var(--panel);border:1px solid var(--line);
  border-radius:3px;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.45);
  font-family:var(--cond);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.fitbtn:hover{background:var(--panel-2);border-color:#3A6478}
main{position:relative}


/* pallino di stato nella riga chiusa, come negli apparati da sala operativa */
.strip .glyph{width:19px;height:19px}
.strip.age-green  .strip-head{box-shadow:inset 3px 0 0 -1px transparent}
.chip#reloginBtn{border-color:var(--stop);color:var(--stop)}
.chip#reloginBtn[hidden]{display:none}


/* registro eventi */
.logbox{max-height:340px;overflow:auto;background:var(--deep);border:1px solid var(--line);
  border-radius:3px;padding:8px 10px;font-family:var(--mono);font-size:11px;line-height:1.65}
.logbox .r{display:flex;gap:8px;padding:1px 0;border-bottom:1px solid rgba(35,65,79,.4)}
.logbox .r:last-child{border-bottom:0}
.logbox .h{color:var(--muted);flex:none}
.logbox .o{color:var(--sel);flex:none;min-width:66px}
.logbox .m{word-break:break-word}
.logbox .WARNING .m{color:var(--warn)}
.logbox .ERROR .m,.logbox .CRITICAL .m{color:var(--stop)}
.logbox .vuoto{color:var(--muted);text-align:center;padding:18px 0}

/* riepilogo collegati */
.stgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:12px}
.stcard{border:1px solid var(--line);border-radius:3px;padding:9px 11px;background:var(--deep);text-align:center}
.stcard b{display:block;font-family:var(--cond);font-size:23px;line-height:1.1;color:var(--signal)}
.stcard span{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.cltab{width:100%;border-collapse:collapse;font-size:11.5px}
.cltab th{text-align:left;font-family:var(--cond);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:5px 6px;border-bottom:1px solid var(--line)}
.cltab td{padding:5px 6px;border-bottom:1px solid rgba(35,65,79,.4);font-family:var(--mono);font-size:11px}
.cltab tr:last-child td{border-bottom:0}
.cltab .me{color:var(--sel)}


/* messaggi di testo */
.smsbox{max-height:170px;overflow:auto;margin:4px 0 11px;border:1px solid var(--line);
  border-radius:3px;background:var(--deep);padding:7px 9px}
.smsbox:empty{display:none}
.smsbox .m{padding:5px 0;border-bottom:1px solid rgba(35,65,79,.4);font-size:12.5px;line-height:1.5}
.smsbox .m:last-child{border-bottom:0}
.smsbox .m .h{font-family:var(--mono);font-size:10.5px;color:var(--muted);display:block}
.smsbox .in .t{color:var(--sel)}
.smsbox .out .t{color:var(--signal)}
.smsbox .no{color:var(--stop);font-size:10.5px}
.muted{color:var(--muted);font-size:11px;float:right}
#smsText{width:100%;resize:vertical}
.pkt{display:grid;grid-template-columns:auto auto 1fr;gap:2px 9px;font-size:10.5px}


/* console messaggi */
/* --- console messaggi a conversazioni --- */
.msgfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.msgfilter input,.msgfilter select{padding:7px 10px;background:var(--deep);
  border:1px solid var(--line);border-radius:3px;color:var(--text)}
.msgfilter #msgSearch{flex:1;min-width:160px}
.msgcustom,.trkcustom{display:flex;gap:14px;flex-wrap:wrap;margin:-2px 0 12px;
  padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:4px}
.msgcustom label,.trkcustom label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.msgcustom input,.trkcustom input{padding:6px 8px;background:var(--deep);border:1px solid var(--line);
  border-radius:3px;color:var(--text)}

.msgsplit{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:12px;
  min-height:340px;max-height:60vh}
@media(max-width:720px){.msgsplit{grid-template-columns:1fr;max-height:none}}

.convlist{overflow:auto;display:flex;flex-direction:column;gap:4px;
  border:1px solid var(--line);border-radius:4px;padding:6px;background:var(--deep)}
.convempty{color:var(--muted);font-size:13px;padding:16px;text-align:center}
.convitem{padding:9px 11px;border-radius:4px;cursor:pointer;border:1px solid transparent;
  transition:background .12s}
.convitem:hover{background:var(--panel-2)}
.convitem.on{background:#1F3945;border-color:var(--sel)}
.convtop{display:flex;align-items:baseline;gap:8px}
.convname{flex:1;font-family:var(--cond);font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convtime{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none}
.convprev{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convbadge{font-family:var(--mono);font-size:10px;padding:0 6px;border-radius:9px;
  margin-left:auto;flex:none}
.convbadge.no{background:var(--stop);color:#fff}

.convthread{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:4px;background:var(--panel);overflow:hidden}
.convhead{display:flex;align-items:center;gap:9px;padding:11px 14px;
  border-bottom:1px solid var(--line);font-family:var(--cond);font-size:15px;font-weight:700}
.convhead .convid{font-family:var(--mono);font-size:11px;color:var(--muted);
  font-weight:400;margin-left:auto}
.bubbles{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.bubble{display:flex;flex-direction:column;padding:9px 12px;border-radius:9px;max-width:78%}
.bubble.in{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);
  border-bottom-left-radius:2px}
.bubble.out{align-self:flex-end;background:#1b3a3a;border:1px solid #2f5f5f;
  border-bottom-right-radius:2px}
.bubble .btext{font-size:14px;line-height:1.45;word-break:break-word}
.bubble .bmeta{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:4px;
  align-self:flex-end}
.bubble .no{color:var(--stop)}
.tgtag{display:inline-block;font-family:var(--mono);font-size:10px;padding:1px 5px;
  border:1px solid var(--line);border-radius:9px;color:var(--muted);margin-left:5px}


/* icone nei pulsanti: allineate al testo, stesso colore */
.btn .ico{width:11px;height:11px;vertical-align:-1px;margin-right:4px;flex:none}
.btn{display:inline-flex;align-items:center}
.acts .btn{white-space:nowrap}


/* navigazione in alto per le sezioni secondarie */
.topnav{display:flex;gap:2px;margin-left:18px}
.topnav-btn{background:transparent;border:0;color:var(--muted);font-family:var(--cond);
  font-size:14px;font-weight:600;letter-spacing:.03em;padding:7px 14px;border-radius:4px;
  cursor:pointer;transition:all .12s}
.topnav-btn:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.topnav-btn.on{color:var(--deep);background:var(--signal)}
.topnav-btn[hidden]{display:none}

/* stato del canale voce nella barra superiore */
.chanstate{display:flex;align-items:center;gap:8px;margin-left:20px;padding:5px 13px;
  border:1px solid var(--line);border-radius:20px;background:var(--panel-2)}
.chan-led{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px rgba(74,222,128,.15)}
.chanstate.busy{border-color:var(--warn);background:rgba(240,180,40,.12)}
.chanstate.busy .chan-led{background:var(--warn);box-shadow:0 0 0 3px rgba(240,180,40,.2);
  animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.chan-txt{font-family:var(--cond);font-size:13.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.chan-timer{font-family:var(--mono);font-size:12px;color:var(--warn);font-weight:600}

/* pop-up di notifica messaggio: centrato e ben visibile */
.msgpop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9000;
  display:flex;flex-direction:column;gap:12px;width:min(92vw,460px)}
.msgpop-velo{position:fixed;inset:0;background:rgba(6,12,16,.45);z-index:-1;cursor:pointer}
.msgpop-card{background:var(--panel);border:1px solid var(--signal);border-left:4px solid var(--signal);
  border-radius:8px;padding:20px 22px;box-shadow:0 16px 50px rgba(0,0,0,.55);
  animation:popin .22s ease;cursor:pointer;position:relative}
@keyframes popin{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.msgpop-card .h{display:flex;align-items:center;gap:9px;font-family:var(--cond);font-size:16px;
  font-weight:700;color:var(--signal);margin-bottom:10px}
.msgpop-card .b{font-size:16px;line-height:1.5;word-break:break-word}
.msgpop-card .x{position:absolute;top:10px;right:14px;color:var(--muted);font-size:22px;line-height:1}

/* icone nella barra di navigazione superiore */
.navico{vertical-align:-2px;margin-right:6px;opacity:.85}
.topnav-btn.on .navico,.topnav-btn[aria-selected="true"] .navico{opacity:1}

/* raggruppamento delle radio per talkgroup (Impostazioni), stile SWAP */
.tggroups{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.tggroup{border:1px solid var(--line);border-radius:4px;background:var(--panel-2);overflow:hidden}
.tghead{display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
  user-select:none;transition:background .12s}
.tghead:hover{background:#1F3945}
.tgchev{color:var(--muted);font-size:16px;line-height:1;transition:transform .15s;flex:none}
.tggroup.open .tgchev{transform:rotate(90deg)}
.tgtitle{font-family:var(--cond);font-size:14px;font-weight:600;letter-spacing:.02em;flex:1}
.tgcount{font-family:var(--mono);font-size:11.5px;color:var(--muted);
  background:var(--deep);border:1px solid var(--line);border-radius:999px;
  min-width:22px;text-align:center;padding:1px 7px}
.tgbody{display:none;padding:2px 11px 9px;flex-direction:column;gap:1px}
.tggroup.open .tgbody{display:flex}
.tgradio{display:flex;align-items:center;gap:9px;padding:5px 4px;
  border-top:1px solid rgba(35,65,79,.5)}
.tgradio:first-child{border-top:0}
.tgdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--off)}
.tgdot.green{background:var(--ok)} .tgdot.yellow{background:var(--warn)}
.tgdot.red{background:var(--stop)} .tgdot.black{background:var(--off)}
.tgname{flex:1;font-size:13px}
.tgid{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* indicatore di chiamata in corso: più leggibile del semplice testo.
   Compare al posto di "Canale libero" nello stesso riquadro. */
.chanstate.busy{padding-right:15px}
.chan-call{display:none;align-items:center;gap:7px;min-width:0}
.chanstate.busy .chan-call{display:flex}
.chanstate.busy .chan-txt{display:none}
.chan-from{font-family:var(--cond);font-weight:600;font-size:13.5px;color:var(--warn);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.chan-arrow{color:var(--muted);font-size:12px;flex:none}
.chan-to{font-family:var(--cond);font-size:13px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.chan-tag{font-family:var(--cond);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--deep);background:var(--warn);border-radius:3px;padding:1px 5px;flex:none}

/* variante del pop-up per i messaggi di gruppo */
.msgpop-card.gruppo{border-color:var(--sel);border-left-color:var(--sel)}
.msgpop-card.gruppo .h{color:var(--sel)}

/* gestione utenti (scheda Stato, solo amministratore) */
.userlist{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.userrow{display:flex;align-items:center;gap:10px;padding:8px 11px;
  border:1px solid var(--line);border-radius:4px;background:var(--panel-2)}
.userdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--idle)}
.userdot.adm{background:var(--signal);box-shadow:0 0 7px var(--signal)}
.uname{flex:1;font-family:var(--cond);font-size:14px;font-weight:600}
.urole{width:150px;padding:5px 8px;background:var(--deep);border:1px solid var(--line);
  border-radius:3px;color:var(--text);font-size:12.5px}
.usernew{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding-top:12px;border-top:1px solid var(--line)}
.usernew input,.usernew select{padding:7px 9px;background:var(--deep);
  border:1px solid var(--line);border-radius:3px;color:var(--text)}
.btn.small{padding:4px 9px;font-size:11.5px}

/* barra di ricerca (schede Radio e Tracking) */
.searchbar{position:relative;display:flex;align-items:center;margin-bottom:11px}
.searchbar .searchico{position:absolute;left:11px;color:var(--muted);pointer-events:none}
.searchbar input{width:100%;padding:9px 32px 9px 33px;background:var(--deep);
  border:1px solid var(--line);border-radius:5px;color:var(--text);font-size:13.5px}
.searchbar input:focus{outline:none;border-color:var(--sel)}
.searchclear{position:absolute;right:8px;width:20px;height:20px;border:0;border-radius:50%;
  background:var(--line);color:var(--text);font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.searchclear:hover{background:var(--stop)}

/* pulsante che lampeggia mentre l'operazione (posizione/verifica) è in corso */
.btn.working{animation:btnwork 1s ease-in-out infinite;
  border-color:var(--signal);color:var(--signal)}
.btn.working:disabled{opacity:1;cursor:progress}
@keyframes btnwork{0%,100%{background:#22404E}
  50%{background:var(--signal);color:var(--deep)}}

/* Logbook: registro di tutte le attività */
.loglist{display:flex;flex-direction:column;gap:2px;max-height:62vh;overflow:auto;
  border:1px solid var(--line);border-radius:4px;padding:6px;background:var(--deep)}
.logrow{display:grid;grid-template-columns:78px 150px 130px 1fr;gap:10px;
  align-items:baseline;padding:6px 8px;border-radius:3px;font-size:12.5px}
.logrow:nth-child(odd){background:var(--panel-2)}
.logtime{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.logkind{font-family:var(--cond);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 6px;border-radius:2px;
  background:var(--line);color:var(--text);white-space:nowrap;text-align:center}
.logkind.ok{background:#1D4B3A;color:#7FE0B0}
.logkind.req{background:#1D3A4B;color:#7FC4E0}
.logkind.warn{background:#4B3A1D;color:#E0C47F}
.logkind.msg{background:#3A1D4B;color:#C47FE0}
.logkind.voce{background:#4B2A1D;color:#E09B7F}
.logkind.alert{background:#4B1D2A;color:#E07F9B}
.logkind.ars{background:#2A3A2A;color:#9BC49B}
.logwho{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logdet{color:var(--muted);overflow-wrap:anywhere}
@media (max-width:760px){
  .logrow{grid-template-columns:66px 1fr;gap:4px}
  .logkind{justify-self:start}
  .logwho,.logdet{grid-column:2}
}

/* riga con versione e build, in fondo alla colonna laterale */
.buildline{margin:14px 4px 6px;font-family:var(--mono);font-size:10px;
  color:var(--muted);opacity:.65;letter-spacing:.03em;text-align:center;
  border-top:1px solid var(--line);padding-top:9px}

/* barra audio nella testata */
.audiobar{display:flex;align-items:center;gap:8px;margin-left:auto;padding:0 10px}
.audiobtn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  background:#22404E;border:1px solid var(--line);border-radius:3px;cursor:pointer;
  color:var(--text);font-family:var(--cond);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase}
.audiobtn:hover:not(:disabled){background:#2C5266}
.audiobtn:disabled{opacity:.4;cursor:not-allowed}
.audiobtn.on{background:var(--ok);color:var(--deep);border-color:var(--ok)}
.audiobtn.talk.on{background:var(--stop);border-color:var(--stop);color:#fff;
  animation:talkpulse 1s ease-in-out infinite}
.audiobtn.talk.altrui{border-color:var(--warn)}
@keyframes talkpulse{50%{opacity:.72}}
.audiovu{display:inline-block;width:54px;height:6px;background:var(--deep);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
.audiovu i{display:block;height:100%;width:0;background:var(--ok);
  transition:width .08s linear}
.audiowho{font-size:11px;color:var(--warn);white-space:nowrap}

/* registrazioni nel Logbook */
.reclist{display:flex;flex-direction:column;gap:5px;max-height:46vh;overflow:auto}
.recrow{display:grid;grid-template-columns:80px 150px 56px 1fr auto;gap:10px;
  align-items:center;padding:7px 9px;border:1px solid var(--line);
  border-radius:4px;background:var(--panel-2);font-size:12.5px}
.rectime{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.recwho{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recdur{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.recrow audio{height:30px;width:100%;min-width:180px}
@media (max-width:760px){
  .recrow{grid-template-columns:1fr 1fr;gap:6px}
  .recrow audio{grid-column:1/-1}
  .audiobar{padding:0 4px}
  .audiovu,.audiowho{display:none}
}

/* pulsante a sola icona nella barra audio */
.audiobtn.ico{padding:6px 8px}
.audiobtn.ico svg{margin:0}
.dlgrow{display:flex;gap:8px;align-items:center;margin-top:11px;flex-wrap:wrap}
body.mobile .audiobtn.ico{flex:0 0 auto;padding:13px 12px}
/* il campo messaggio e gli altri fuori da label.f seguono il tema */
#msgText,#smsText,#csvText{background:var(--deep);color:var(--text);
  border:1px solid var(--line);border-radius:3px;padding:9px 10px;
  font-family:inherit;font-size:13.5px;line-height:1.5}
#msgText:focus,#smsText:focus,#csvText:focus{outline:none;border-color:var(--sel)}
#csvText{font-family:var(--mono);font-size:12px}

/* il tasto Parla non deve mai attivare selezione testo, menu contestuale o
   lente del telefono: interrompevano la pressione prolungata */
.audiobtn.talk{-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;touch-action:none;-webkit-tap-highlight-color:transparent}

/* ============ pannello radio (destra, espandibile) ============ */
/* pannello sulla sinistra della mappa: la linguetta resta sul bordo e il
   corpo si apre verso destra */
.radiopanel{position:absolute;top:10px;left:10px;z-index:500;display:flex;
  flex-direction:row-reverse;align-items:flex-start;gap:0;pointer-events:none}
.radiopanel *{pointer-events:auto}
/* Linguetta verticale sul bordo della mappa: scritta dall'alto in basso,
   così si capisce che è una scheda da aprire e non un riquadro capitato lì. */
.rp-toggle{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px 7px;background:var(--panel);border:1px solid var(--line);
  border-radius:0 6px 6px 0;border-left:0;cursor:pointer;color:var(--text);
  font-family:var(--cond);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;box-shadow:0 3px 14px rgba(0,0,0,.4);
  -webkit-user-select:none;user-select:none}
.rp-toggle-txt{writing-mode:vertical-rl;text-orientation:mixed;
  white-space:nowrap;line-height:1}
.rp-toggle svg{transition:transform .18s;flex:none}
.radiopanel.open .rp-toggle svg{transform:rotate(180deg)}
.rp-toggle:hover{border-color:#3A6478;color:var(--signal)}
/* Da chiuso il corpo deve sparire del tutto: se restassero bordo e ombra si
   vedrebbe una riga verticale sulla mappa anche a pannello compattato. */
.rp-body{width:0;overflow:hidden;background:transparent;
  border:0 solid var(--line);border-radius:6px 0 6px 6px;box-shadow:none;
  padding:0;transition:width .2s,padding .2s}
.radiopanel.open .rp-body{width:250px;padding:13px;background:var(--panel);
  border-width:1px;box-shadow:0 3px 18px rgba(0,0,0,.45)}
.rp-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.rp-title{font-family:var(--cond);font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.rp-me{font-weight:700;color:var(--signal);font-size:13px;white-space:nowrap}
.rp-row{display:flex;gap:7px;margin-top:9px}
.rp-row .audiobtn{flex:1;justify-content:center}
.rp-row .audiobtn.ico{flex:0 0 auto}

/* il pulsante Parla: grande e inequivocabile */
.pttbig{width:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;padding:20px 10px;border-radius:8px;
  background:#22404E;border:2px solid var(--line);cursor:pointer;color:var(--text);
  font-family:var(--cond);font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;touch-action:none;-webkit-tap-highlight-color:transparent}
.pttbig:hover:not(:disabled){background:#2C5266}
.pttbig:disabled{opacity:.45;cursor:not-allowed}
.pttbig.on{background:var(--stop);border-color:var(--stop);color:#fff;
  animation:talkpulse 1s ease-in-out infinite}
.pttbig.altrui{border-color:var(--warn);color:var(--warn)}
.rp-diag{margin-top:11px;padding:9px;background:var(--deep);border:1px solid var(--line);
  border-radius:4px;font-family:var(--mono);font-size:10.5px;line-height:1.7;
  color:var(--muted);white-space:pre-wrap}
.rp-diagbtn{width:100%;margin-top:8px;padding:6px;background:none;
  border:1px dashed var(--line);border-radius:4px;color:var(--muted);
  cursor:pointer;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.rp-diagbtn:hover{border-color:#3A6478;color:var(--text)}

/* su mobile il pannello si apre a tutta larghezza in basso */
body.mobile .radiopanel{position:fixed;top:auto;bottom:0;left:0;right:0;
  flex-direction:column;align-items:stretch}
body.mobile .rp-toggle{flex-direction:row;border-radius:8px 8px 0 0;
  border-left:1px solid var(--line);justify-content:center;padding:12px;
  font-size:12.5px;letter-spacing:.1em}
body.mobile .rp-toggle-txt{writing-mode:horizontal-tb}
body.mobile .radiopanel.open .rp-body{width:auto;max-height:62vh;overflow-y:auto;
  border-radius:0}
body.mobile .pttbig{padding:26px 10px;font-size:17px}
body.mobile .rp-toggle svg{transform:rotate(-90deg)}
body.mobile .radiopanel.open .rp-toggle svg{transform:rotate(90deg)}
.rp-avviso{margin:10px 0 0;padding:9px 10px;background:#4B3A1D;
  border:1px solid var(--warn);border-radius:4px;color:#E0C47F;
  font-size:11.5px;line-height:1.5}

/* i comandi di ingrandimento stanno in basso a destra: li alzo un poco per
   non finire sopra la riga dei crediti della mappa */
.leaflet-bottom.leaflet-right .leaflet-control-zoom{margin-bottom:26px}
/* su mobile il pannello radio si apre dal basso: sposto lo zoom più in alto */
body.mobile .leaflet-bottom.leaflet-right .leaflet-control-zoom{margin-bottom:12px}

/* richieste di accesso in attesa di approvazione */
.reglist{display:flex;flex-direction:column;gap:8px}
.regrow{border:1px solid var(--line);border-left:2px solid var(--warn);
  border-radius:4px;background:var(--panel-2);padding:10px 11px}
.reghead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.regnome{font-weight:700;font-size:13.5px}
.reggruppo{color:var(--muted);font-size:12px}
.regquando{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}
.regazioni{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.regcampo{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}
.regcampo input,.regcampo select{min-width:120px;padding:6px 8px;font-size:12.5px}
body.mobile .regazioni{flex-direction:column;align-items:stretch}
body.mobile .regcampo input,body.mobile .regcampo select{width:100%}