/* ==========================================================================
   app-pannello.css — componenti propri del pannello di controllo erecta-cloud.
   Tutto ciò che è comune (guscio, tipografia, pulsanti, pannelli, tabelle,
   badge, stati, KPI, schema di rete, barre) viene da erecta-ui.css e qui NON
   si ridefinisce. Si usano solo i token della skill.
   ========================================================================== */

/* --- token legacy: gli stili di pagina dei template li usano ancora; qui
   vengono reindirizzati sulla palette della skill, così nessun colore fuori
   palette sopravvive anche dove il nome vecchio resta --- */
:root {
  --brand: var(--azzurro);
  --brand-mid: var(--petrolio);
  --brand-d: var(--petrolio);
  --brand-soft: var(--azzurro-tenue);
  --cyan: var(--azzurro);
  --warn: var(--attenzione);
  --down: var(--critico);
  --ink: var(--testo);
  --muted: var(--testo-2);
  --hint: var(--testo-2);
  --line: var(--linea);
  --surface: var(--tenue);
  --card: var(--superficie);
  --page: var(--pagina);
  --bg: var(--pagina);
  --bar: var(--petrolio-scuro);
}

/* --- compatibilità con i template esistenti (nomi legacy -> stessa resa) --- */
.page { padding: 0 0 10px; }   /* = .sotto */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-map { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.code { font-weight: 700; }
.city { color: var(--testo-2); }
.err { background: var(--critico-tenue); color: var(--crit-ink); font-size: 12.5px; padding: 9px 12px; border-radius: 8px; margin-bottom: 12px; }
.lnk { border: 0; background: none; font-family: inherit; font-size: 12px; color: var(--inchiostro-marca); text-decoration: underline; cursor: pointer; padding: 0 0 0 9px; }

/* --- sedi: schede e liste --- */
.sitecard { background: var(--superficie); border: 1px solid var(--linea); border-left-width: 4px;
            border-radius: 0 var(--r) var(--r) 0; padding: 14px 16px; display: block; text-decoration: none; color: inherit; }
.sitecard:hover { box-shadow: 0 6px 18px rgba(8,63,75,.10); }
.sitecard .top { display: flex; align-items: center; justify-content: space-between; }
.sitecard .nm { font-weight: 600; font-size: 15px; color: var(--inchiostro-marca); }
.sitecard .cy { font-size: 12px; color: var(--testo-2); margin-top: 2px; }
.chips { display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
.chip { font-size: 11px; background: var(--tenue); color: var(--testo-2); padding: 2px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; }
.chip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.sitelist { border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; background: var(--superficie); }
.sitelist .r { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--linea); font-size: 13px; }
.sitelist .r:last-child { border-bottom: 0; }
.sitelist .r:hover { background: var(--tenue); }
.sitelist .l { display: flex; align-items: center; gap: 10px; }
.pin-dot { width: 10px; height: 10px; border-radius: 50%; }
.pin-marker { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bianco); box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.leaflet-container { font-family: "Poppins", system-ui, sans-serif; }

/* --- registro --- */
.logrow { display: grid; grid-template-columns: 210px 140px 1fr; gap: 14px; padding: 12px 6px; border-top: 1px solid var(--linea); font-size: 13px; }
.logrow:nth-child(even) { background: var(--tenue); }
.logrow .srv { font-weight: 600; }
.logrow .msg { color: var(--testo-2); }

/* --- accesso --- */
.login-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 340px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 26px 24px; }
.login-card .lg { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.login-card .lg img { height: 44px; margin-bottom: 10px; }

/* --- dettagli a espansione --- */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details.adduser > summary { display: inline-flex; align-items: center; justify-content: center; }
details.adduser[open] > summary { opacity: .75; }

@media (max-width: 820px) {
  .grid2, .grid-map { grid-template-columns: 1fr; }
}

/* --- utilità estratte dagli attributi style dei template (transitorie): --- */
/* ogni classe riproduce esattamente una dichiarazione inline. !important   */
/* conserva la precedenza che l'attributo aveva. Da riassorbire nei componenti. */
.u1 { margin-bottom:14px !important; }
.u2 { margin-top:0 !important; }
.u3 { display:flex !important; gap:10px !important; align-items:flex-end !important; flex-wrap:wrap !important; }
.u4 { margin:0 !important; }
.u5 { width:220px !important; }
.u6 { width:100% !important; border-collapse:collapse !important; font-size:13px !important; }
.u7 { text-align:left !important; color:var(--muted) !important; }
.u8 { padding:6px 8px !important; }
.u9 { border-top:1px solid var(--line) !important; }
.u10 { padding:8px !important; white-space:nowrap !important; }
.u11 { white-space:nowrap !important; }
.u12 { max-width:420px !important; }
.u13 { display:flex !important; justify-content:space-between !important; align-items:center !important; margin-top:12px !important; }
.u14 { margin-left:12px !important; }
.u15 { max-width:600px !important; }
.u16 { max-width:320px !important; }
.u17 { margin-top:12px !important; }
.u18 { font-size:11.5px !important; }
.u19 { max-width:680px !important; margin-bottom:16px !important; }
.u20 { width:100% !important; font-size:13px !important; border-collapse:collapse !important; }
.u21 { border-bottom:1px solid var(--line) !important; }
.u22 { padding:7px 0 !important; width:220px !important; }
.u23 { padding:7px 0 !important; }
.u24 { color:var(--ok-ink) !important; font-weight:700 !important; }
.u25 { color:var(--crit-ink) !important; font-weight:700 !important; }
.u26 { color:var(--att-ink) !important; font-weight:700 !important; }
.u27 { padding:7px 0 !important; vertical-align:top !important; }
.u28 { margin:2px 0 !important; }
.u29 { font-size:12px !important; }
.u30 { margin-top:8px !important; }
.u31 { max-width:680px !important; }
.u32 { background:var(--petrolio-scuro) !important; color:var(--linea) !important; padding:12px !important; border-radius:8px !important; font-size:12px !important; overflow:auto !important; }
.u33 { max-width:600px !important; margin-bottom:16px !important; }
.u34 { padding:6px 0 !important; }
.u35 { padding:8px 0 !important; }
.u36 { text-align:right !important; }
.u37 { display:inline !important; }
.u38 { background:none !important; border:0 !important; color:var(--crit-ink) !important; cursor:pointer !important; font-weight:600 !important; font-size:12px !important; }
.u39 { margin-top:10px !important; }
.u40 { justify-content:center !important; margin-bottom:14px !important; }
.u41 { height:26px !important; }
.u42 { font-size:1.15rem !important; margin:0 0 6px !important; text-align:center !important; }
.u43 { text-align:center !important; margin:0 0 16px !important; }
.u44 { display:flex !important; justify-content:center !important; margin-bottom:12px !important; }
.u45 { margin-bottom:12px !important; }
.u46 { background:var(--tenue) !important; border:1px solid var(--line) !important; border-radius:10px !important; padding:12px !important; margin-bottom:16px !important; }
.u47 { margin:0 0 6px !important; }
.u48 { display:block !important; font-size:15px !important; letter-spacing:.12em !important; word-break:break-all !important; }
.u49 { margin:8px 0 0 !important; }
.u50 { margin:0 0 16px !important; }
.u51 { letter-spacing:.35em !important; font-size:18px !important; text-align:center !important; }
.u52 { width:100% !important; }
.u53 { margin-top:14px !important; text-align:center !important; }
.u54 { background:none !important; border:0 !important; cursor:pointer !important; }
.u55 { display:flex !important; justify-content:space-between !important; align-items:flex-start !important; gap:16px !important; }
.u56 { font-size:12px !important; margin-top:4px !important; }
.u57 { border:1px solid var(--brand) !important; background:var(--azzurro-tenue) !important; margin-bottom:16px !important; }
.u58 { font-weight:700 !important; margin-bottom:4px !important; }
.u59 { margin:0 0 10px !important; }
.u60 { display:flex !important; align-items:center !important; gap:10px !important; }
.u61 { font-family:ui-monospace,Menlo,monospace !important; font-size:19px !important; letter-spacing:.06em !important; background:var(--superficie) !important; border:1px solid var(--line) !important; border-radius:9px !important; padding:10px 14px !important; }
.u62 { display:grid !important; grid-template-columns:1.3fr 1fr !important; gap:16px !important; align-items:start !important; }
.u63 { display:flex !important; align-items:center !important; gap:8px !important; margin:4px 0 8px !important; }
.u64 { display:flex !important; align-items:center !important; gap:8px !important; margin:4px 0 14px !important; }
.u65 { display:flex !important; gap:8px !important; }
.u66 { flex:1 !important; }
.u67 { margin-bottom:12px !important; display:inline-flex !important; text-decoration:none !important; }
.u68 { margin-top:2px !important; padding:12px !important; border:1px solid var(--line) !important; border-radius:10px !important; background:var(--superficie) !important; }
.u69 { font-size:12px !important; color:var(--muted) !important; font-weight:700 !important; margin-bottom:7px !important; }
.u70 { width:100% !important; font-size:13px !important; }
.u71 { padding:3px 0 !important; }
.u72 { text-align:right !important; font-family:ui-monospace,monospace !important; }
.u73 { color:var(--muted) !important; }
.u74 { padding:5px 0 !important; }
.u75 { color:var(--att-ink) !important; }
.u76 { color:var(--testo-2) !important; }
.u77 { color:var(--ok-ink) !important; }
.u78 { text-align:right !important; font-family:ui-monospace,monospace !important; font-size:11.5px !important; }
.u79 { margin-top:16px !important; }
.u80 { display:flex !important; justify-content:space-between !important; align-items:center !important; margin-bottom:10px !important; }
.u81 { display:flex !important; align-items:center !important; gap:12px !important; padding:11px 14px !important; border-bottom:1px solid var(--line) !important; }
.u82 { font-family:ui-monospace,monospace !important; }
.u83 { flex:1 1 0 !important; font-size:11.5px !important; }
.u84 { background:none !important; border:0 !important; color:var(--crit-ink) !important; font-weight:600 !important; font-size:12px !important; cursor:pointer !important; }
.u85 { background:none !important; border:0 !important; color:var(--muted) !important; font-weight:600 !important; font-size:12px !important; cursor:pointer !important; }
.u86 { margin-top:18px !important; }
.u87 { background:none !important; border:0 !important; color:var(--crit-ink) !important; font-size:12.5px !important; cursor:pointer !important; text-decoration:underline !important; }
.u88 { padding:6px 0 !important; width:200px !important; }
.u89 { margin-top:14px !important; padding-top:12px !important; border-top:1px solid var(--line) !important; }
.u90 { margin:0 0 8px !important; }
.u91 { max-width:640px !important; }
.u92 { margin-bottom:20px !important; }
.u93 { display:flex !important; align-items:center !important; gap:12px !important; padding:13px 16px !important; border-bottom:1px solid var(--line) !important; text-decoration:none !important; color:inherit !important; }
.u94 { flex:1 1 0 !important; min-width:0 !important; }
.u95 { font-weight:700 !important; }
.u96 { min-width:120px !important; text-align:right !important; font-size:11.5px !important; }
.u97 { padding:16px !important; }
.u98 { text-align:center !important; margin:-6px 0 18px !important; }
.u99 { width:100% !important; margin-top:6px !important; }
.u100 { display:flex !important; align-items:center !important; gap:10px !important; color:var(--muted) !important; font-size:12px !important; margin:16px 0 12px !important; }
.u101 { flex:1 !important; height:1px !important; background:var(--line) !important; }
.u102 { display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; width:100% !important; height:40px !important; border:1px solid var(--line) !important; border-radius:9px !important; text-decoration:none !important; color:var(--ink) !important; font-weight:600 !important; font-size:13.5px !important; background:var(--superficie) !important; }
.u103 { margin-bottom:18px !important; }
.u104 { color:var(--att-ink) !important; font-weight:600 !important; }
.u105 { cursor:pointer !important; font-size:12px !important; font-weight:600 !important; }
.u106 { margin-top:10px !important; text-align:left !important; }
.u107 { max-width:560px !important; }
.u108 { margin-top:14px !important; }
.u109 { display:flex !important; align-items:center !important; gap:12px !important; padding:10px 16px !important; border-bottom:1px solid var(--line) !important; color:var(--muted) !important; font-size:11.5px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.03em !important; }
.u110 { flex:1 1 0 !important; }
.u111 { width:80px !important; }
.u112 { width:70px !important; text-align:right !important; }
.u113 { width:90px !important; text-align:right !important; }
.u114 { width:60px !important; text-align:center !important; }
.u115 { width:70px !important; text-align:center !important; }
.u116 { width:70px !important; }
.u117 { display:flex !important; align-items:center !important; gap:12px !important; padding:12px 16px !important; border-bottom:1px solid var(--line) !important; }
.u118 { flex:1 1 0 !important; min-width:0 !important; font-weight:700 !important; }
.u119 { padding:5px 12px !important; font-size:12.5px !important; }
.u120 { max-width:300px !important; }
.u121 { display:flex !important; gap:10px !important; align-items:center !important; margin-top:6px !important; }
.u122 { border:1px solid var(--critico) !important; background:var(--critico-tenue) !important; margin-bottom:16px !important; }
.u123 { font-weight:800 !important; color:var(--crit-ink) !important; font-size:15px !important; margin-bottom:4px !important; }
.u124 { display:grid !important; grid-template-columns:1fr 1fr !important; gap:16px !important; align-items:start !important; }
.u125 { margin-bottom:10px !important; }
.u126 { font-size:13.5px !important; color:var(--testo-2) !important; margin-bottom:12px !important; }
.u127 { color:var(--testo) !important; }
.u128 { text-align:right !important; color:var(--muted) !important; }
.u129 { font-size:11px !important; }
.u130 { color:var(--crit-ink) !important; }
.u131 { max-width:560px !important; margin-bottom:18px !important; }
.u132 { padding:6px 18px 14px !important; margin-bottom:18px !important; }
.u133 { display:flex !important; gap:8px !important; align-items:center !important; flex-wrap:wrap !important; }
.u134 { height:32px !important; width:200px !important; }
.u135 { height:32px !important; width:auto !important; }
.u136 { height:32px !important; width:150px !important; }
.u137 { height:32px !important; padding:0 12px !important; }
.u138 { color:var(--crit-ink) !important; }
.u139 { max-width:560px !important; margin-top:12px !important; }
.u140 { display:flex !important; gap:10px !important; }
.u141 { user-select:all !important; }
.u142 { margin-top:14px !important; background:var(--surface) !important; }
.u143 { margin:0 0 6px !important; font-size:14px !important; }
.u144 { font-size:13px !important; color:var(--muted) !important; padding-left:18px !important; margin:0 !important; }
.u145 { font-size:12.5px !important; color:var(--hint) !important; margin:8px 0 0 !important; }
.u146 { margin-top:6px !important; }
.u147 { font-size:13px !important; color:var(--muted) !important; margin:0 0 14px !important; }
.u148 { font-size:13px !important; color:var(--crit-ink) !important; margin:0 0 14px !important; }
.u149 { background:var(--down) !important; }
.u150 { margin:-6px 0 16px !important; }
.u151 { max-width:640px !important; margin-bottom:16px !important; }
.u152 { max-width:640px !important; margin-bottom:16px !important; border-left:4px solid var(--warn) !important; }
.u153 { font-size:12.5px !important; font-weight:700 !important; color:var(--att-ink) !important; }
.u154 { margin:0 0 12px !important; }
.u155 { display:flex !important; align-items:center !important; gap:8px !important; padding:9px 11px !important; background:var(--surface) !important; border-radius:9px !important; font-size:12.5px !important; }
.u156 { font-family:ui-monospace,Menlo,monospace !important; word-break:break-all !important; }
.u157 { margin-left:auto !important; white-space:nowrap !important; }
.u158 { margin-top:22px !important; border-top:1px solid var(--line) !important; padding-top:18px !important; }
.u159 { margin-bottom:8px !important; }
.u160 { padding:8px 10px !important; border:1px solid var(--line) !important; border-radius:9px !important; font-family:inherit !important; font-size:13.5px !important; min-width:230px !important; }
.u161 { display:flex !important; align-items:center !important; gap:9px !important; cursor:pointer !important; }
.u162 { width:16px !important; height:16px !important; }
.u163 { margin-top:4px !important; }
.u164 { border:1px solid var(--ok-tenue) !important; background:var(--ok-tenue) !important; margin-bottom:16px !important; }
.u165 { padding:5px 0 !important; width:120px !important; }
.u166 { word-break:break-all !important; }
.u167 { margin:14px 0 6px !important; }
.u168 { background:var(--petrolio-scuro) !important; color:var(--bianco) !important; border-radius:8px !important; padding:12px 14px !important; font-size:12px !important; line-height:1.7 !important; overflow-x:auto !important; user-select:all !important; }
.u169 { display:flex !important; gap:10px !important; align-items:center !important; }
.u170 { background:none !important; border:0 !important; color:var(--muted) !important; cursor:pointer !important; font-weight:600 !important; font-size:12px !important; }
.u171 { color:var(--ok-ink) !important; }
.u172 { color:var(--att-ink) !important; }
.u173 { color:var(--inchiostro-marca) !important; }
.u174 { padding:14px 6px !important; }
.u175 { width:1px !important; background:var(--petrolio) !important; flex:0 0 auto !important; margin:2px 2px !important; }
.u176 { display:flex !important; align-items:center !important; gap:12px !important; flex-wrap:wrap !important; }
.u177 { font-size:11.5px !important; font-weight:700 !important; color:var(--testo-2) !important; background:var(--azzurro-tenue) !important; border:1px solid var(--azzurro-tenue) !important; border-radius:20px !important; padding:3px 11px !important; }
.u178 { background:var(--down) !important; border-color:var(--down) !important; }
.u179 { text-decoration:none !important; }
.u180 { opacity:.5 !important; cursor:not-allowed !important; }
.u181 { margin:6px 0 16px !important; }
.u182 { display:flex !important; gap:4px !important; margin-bottom:12px !important; border-bottom:1px solid var(--line) !important; }
.u183 { background:var(--petrolio-scuro) !important; color:var(--linea) !important; padding:12px !important; border-radius:8px !important; font-size:12px !important; overflow:auto !important; white-space:pre-wrap !important; }
.u184 { padding:6px 12px !important; font-size:12.5px !important; margin-top:10px !important; }
.u185 { display:none !important; }
.u186 { margin-top:12px !important; padding:10px 12px !important; background:var(--attenzione-tenue) !important; border:1px solid var(--attenzione) !important; border-radius:8px !important; }
.u187 { margin-top:8px !important; padding-top:8px !important; border-top:1px solid var(--attenzione) !important; }
.u188 { padding:7px 0 !important; width:210px !important; }
.u189 { margin:1px 0 !important; }
.u190 { display:inline-block !important; min-width:92px !important; font-weight:700 !important; }
.u191 { font-weight:400 !important; }
.u192 { flex:1 !important; max-width:220px !important; height:8px !important; background:var(--tenue) !important; border-radius:6px !important; overflow:hidden !important; }
.u193 { display:flex !important; gap:8px !important; align-items:center !important; margin:0 !important; }
.u194 { padding:4px 10px !important; font-size:12px !important; }
.u195 { background:none !important; border:0 !important; color:var(--crit-ink) !important; cursor:pointer !important; font-weight:700 !important; font-size:12.5px !important; }
.u196 { padding:6px 12px !important; font-size:12.5px !important; margin-top:8px !important; }
.u197 { color:var(--ok-ink) !important; font-weight:700 !important; }
.u198 { text-align:right !important; white-space:nowrap !important; }
.u199 { background:none !important; border:0 !important; color:var(--crit-ink) !important; cursor:pointer !important; font-weight:600 !important; font-size:12px !important; margin-left:8px !important; }
.u200 { margin:0 0 4px !important; }
.u201 { max-width:620px !important; }
.u202 { display:flex !important; gap:8px !important; align-items:center !important; }
.u203 { padding:8px 14px !important; }
.u204 { display:flex !important; gap:6px !important; align-items:center !important; margin:0 !important; }
.u205 { width:250px !important; }
.u206 { margin:0 0 14px !important; }
.u207 { max-width:720px !important; }
.u208 { display:flex !important; gap:16px !important; align-items:flex-end !important; flex-wrap:wrap !important; }
.u209 { display:block !important; font-size:12px !important; color:var(--muted) !important; margin-bottom:4px !important; }
.u210 { width:280px !important; }
.u211 { max-width:760px !important; }
.u212 { display:flex !important; gap:10px !important; align-items:center !important; margin-top:10px !important; }
.u213 { padding:6px 12px !important; font-size:12.5px !important; }
.u214 { font-size:12.5px !important; }
.u215 { display:flex !important; align-items:center !important; gap:12px !important; }
.u216 { display:flex !important; align-items:center !important; gap:10px !important; margin-bottom:8px !important; }
.u217 { display:flex !important; align-items:center !important; gap:8px !important; margin:0 !important; }
.u218 { padding:8px 8px !important; }
.u219 { padding:10px 8px !important; }
.u220 { font-weight:700 !important; text-decoration:none !important; }
.u221 { font-size:11.5px !important; font-weight:700 !important; color:var(--testo-2) !important; background:var(--azzurro-tenue) !important; border:1px solid var(--azzurro-tenue) !important; border-radius:20px !important; padding:2px 10px !important; }
.u222 { display:inline-block !important; width:9px !important; height:9px !important; border-radius:50% !important; background:var(--ok) !important; margin-right:7px !important; }
.u223 { display:inline-block !important; width:9px !important; height:9px !important; border-radius:50% !important; background:var(--down) !important; margin-right:7px !important; }
.u224 { padding:5px 12px !important; font-size:12.5px !important; background:var(--down) !important; border-color:var(--down) !important; }
.u225 { padding:5px 12px !important; font-size:12.5px !important; text-decoration:none !important; }
.u226 { padding:5px 12px !important; font-size:12.5px !important; opacity:.5 !important; cursor:not-allowed !important; }
.u227 { padding:5px 12px !important; font-size:12.5px !important; text-decoration:none !important; margin-left:6px !important; }
.u228 { display:flex !important; align-items:flex-end !important; gap:16px !important; }
.u229 { margin:0 0 9px !important; }
.u230 { border:1px solid var(--line) !important; border-radius:10px !important; padding:12px 14px !important; margin:8px 0 0 !important; }
.u231 { font-size:12px !important; color:var(--muted) !important; padding:0 6px !important; }
.u232 { margin-top:3px !important; }
.u233 { width:100% !important; font-family:ui-monospace,monospace !important; font-size:12.5px !important; padding:8px 10px !important; border:1px solid var(--line) !important; border-radius:9px !important; }
.u234 { display:flex !important; gap:10px !important; margin-top:6px !important; }
.u235 { color:var(--hint) !important; }
.u236 { padding:6px 18px 14px !important; }
.u237 { background:var(--testo-2) !important; }
.u238 { background:var(--ok) !important; }
.u239 { background:var(--warn) !important; }
.u240 { border-color:var(--critico) !important; background:var(--critico-tenue) !important; margin-bottom:16px !important; }
.u241 { margin-bottom:16px !important; }
.u242 { display:flex !important; gap:14px !important; flex-wrap:wrap !important; }
.u243 { min-width:150px !important; }
.u244 { min-width:190px !important; }
.u245 { margin-left:12px !important; font-size:13px !important; }
.u246 { padding:6px 14px 14px !important; }
.u247 { font-size:12px !important; color:var(--hint) !important; }
.u248 { width:100% !important; justify-content:center !important; }
.u249 { margin-right:8px !important; }
.u250 { display:flex !important; flex-direction:column !important; gap:5px !important; font-size:12px !important; color:var(--muted) !important; }
.u251 { display:inline-block !important; width:9px !important; height:9px !important; border-radius:50% !important; background:var(--ok) !important; margin-right:6px !important; }
.u252 { display:inline-block !important; width:9px !important; height:9px !important; border-radius:50% !important; background:var(--warn) !important; margin-right:6px !important; }
.u253 { display:inline-block !important; width:9px !important; height:9px !important; border-radius:50% !important; background:var(--down) !important; margin-right:6px !important; }
.u254 { display:inline-block !important; width:9px !important; height:9px !important; border-radius:50% !important; background:var(--testo-2) !important; margin-right:6px !important; }
.u255 { margin:22px 0 10px !important; }
.u258 { position:fixed !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; background:var(--pagina) !important; font-family:Manrope,sans-serif !important; text-align:center !important; padding:24px !important; }
.u259 { height:34px !important; margin-bottom:18px !important; }
.u260 { font-size:22px !important; font-weight:800 !important; color:var(--testo) !important; }
.u261 { color:var(--testo-2) !important; max-width:460px !important; margin:10px auto 0 !important; font-size:14px !important; }
.u263 { text-align:center !important; }
.u264 { font-size:18px !important; margin:0 0 8px !important; }
.u265 { font-size:13px !important; color:var(--muted) !important; margin:0 !important; }
.u266 { vertical-align:4px !important; margin-left:6px !important; }
.u267 { grid-template-columns:repeat(3,1fr) !important; margin-bottom:18px !important; }
.u268 { cursor:pointer !important; font-weight:700 !important; font-size:15px !important; }
.u269 { display:flex !important; gap:10px !important; margin-top:8px !important; }
.u270 { display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:10px !important; }
.u271 { border-style:dashed !important; color:var(--inchiostro-marca) !important; }
.u272 { background:var(--linea) !important; }
.u273 { text-align:right !important; color:var(--hint) !important; }
.u274 { margin-top:22px !important; }
.u275 { display:flex !important; align-items:center !important; gap:7px !important; flex-wrap:wrap !important; }
.u276 { width:76px !important; font-family:ui-monospace,monospace !important; font-size:12px !important; padding:3px 7px !important; border:1px solid var(--line) !important; border-radius:7px !important; }
.u277 { display:flex !important; gap:8px !important; flex-wrap:wrap !important; align-items:flex-end !important; margin-top:10px !important; }
.u278 { width:90px !important; }
.u279 { width:100% !important; height:auto !important; }
.u280 { display:flex !important; justify-content:space-between !important; align-items:flex-end !important; gap:16px !important; }
.u281 { font-size:12.5px !important; color:var(--muted) !important; background:var(--brand-soft) !important; border:1px solid var(--azzurro-tenue) !important; border-radius:8px !important; padding:10px 12px !important; margin-bottom:14px !important; }
.u282 { text-align:center !important; margin-top:10px !important; }
.u283 { background:var(--surface) !important; color:var(--inchiostro-marca) !important; padding:1px 6px !important; border-radius:6px !important; }
.u284 { color:var(--crit-ink) !important; padding-left:0 !important; }
.u285 { display:flex !important; justify-content:space-between !important; align-items:flex-start !important; gap:16px !important; flex-wrap:wrap !important; }
.u286 { display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:10px !important; }
.u287 { font-size:19px !important; }
.u288 { margin:2px 0 0 !important; }
.u289 { background:var(--linea) !important; }

/* --- stati come classi (al posto dei colori inline) --- */
.pin-dot.ok { background: var(--ok); }
.pin-dot.nd { background: var(--testo-2); }
.srow { border-left: 4px solid var(--linea); }
.srow.stato-up { border-left-color: var(--ok); }
.srow.stato-warn { border-left-color: var(--attenzione); }
.srow.stato-down { border-left-color: var(--critico); }
.srow.stato-unknown, .srow.stato-inactive { border-left-color: var(--testo-2); }
.cnt.ko { color: var(--crit-ink); }
.cnt.att { color: var(--att-ink); }
.uptime-cella { text-align: right; font-weight: 600; }
.uptime-cella.ko { color: var(--crit-ink); }
.esito-pwd { margin-top: 8px; font-size: 12px; }
.esito-pwd.ok { color: var(--ok-ink); }
.esito-pwd.att { color: var(--att-ink); }
.login-card.larga { width: 520px; max-width: 100%; }

/* --- contenitore delle pagine autonome --- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.tbl { width: 100%; }

/* ==========================================================================
   Interfaccia mobile: componenti propri del pannello
   ========================================================================== */
@media (max-width: 860px) {
  .u62, .u124 { grid-template-columns: 1fr !important; }
  .u10, .u11, .u157, .u198 { white-space: normal !important; }
  table.elenco td.u10 { padding: 0 !important; }   /* nelle schede la cella non ha rientro proprio */
  .u157 { margin-left: 0 !important; }

  /* righe dei tenant: pallino e nome in prima riga, poi i badge, poi l'ultimo contatto */
  .u93 { flex-wrap: wrap !important; row-gap: 8px !important; min-height: 48px; }
  .u94 { flex: 1 1 calc(100% - 30px) !important; }
  .u96 { min-width: 0 !important; width: 100% !important; text-align: left !important; }

  /* testata dei pannelli con titolo e pulsante: vanno a capo invece di stringersi */
  .u80 { flex-wrap: wrap !important; gap: 10px !important; }
  /* riga di una chiave di attivazione: chiave e stato, poi uso, poi azione */
  .u81 { flex-wrap: wrap !important; row-gap: 6px !important; }
  .u83 { flex: 1 1 100% !important; }
}

@media (max-width: 860px) {
  /* testata di pagina con titolo e pulsante: il pulsante va sotto, non si schiaccia */
  .u55 { flex-wrap: wrap !important; }
  .u55 > div:first-child { flex: 1 1 100%; }
  .u55 > .btn { flex: none; }
}

@media (max-width: 860px) {
  /* righe dei tenant: una freccia a destra dice che la riga si apre */
  .u93 { position: relative; padding-right: 36px !important; }
  .u93::after {
    content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 22px; line-height: 1; color: var(--testo-2);
  }
}

@media (max-width: 860px) {
  /* elenco dei tenant a schede: separatori sottili, niente righe alternate grigie */
  .sitelist > .logrow:nth-child(even) { background: transparent; }
}

@media (max-width: 860px) {
  /* moduli nelle righe-scheda (utenti, database residui): campi a tutta larghezza */
  table.a-schede form.u133 { flex-direction: column; align-items: stretch !important; }
  table.a-schede .u134, table.a-schede .u135, table.a-schede .u136, table.a-schede .u137 {
    width: 100% !important; height: 40px !important;
  }
}