/* Serverwatch: poche aggiunte sopra app.css di Netwatch. */
.bulb.sw { background: #16a34a; box-shadow: 0 0 8px #16a34a88; }
.dot.dim { opacity: .45; }
.upt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.upt.ok { color: #15803d; }
.upt.warn { color: #b45309; }
.upt.bad { color: #dc2626; }
@media (prefers-color-scheme: dark) {
  .upt.ok { color: #4ade80; } .upt.warn { color: #fbbf24; } .upt.bad { color: #f87171; }
}
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.kpi { padding: 12px 14px; border-radius: 10px; border: 1px solid #8883; }
.kpi b { display: block; font-size: 1.6em; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .85em; opacity: .75; }
.kpi.alarm { border-color: #dc2626; }
.custgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cust { padding: 12px 14px; border-radius: 10px; border: 1px solid #8883; text-decoration: none; color: inherit; display: block; }
.cust:hover { border-color: #2f6fed; }
.cust.alarm { border-color: #dc2626; }
.cust h3 { margin: 0 0 4px; font-size: 1.05em; }
.cust .line { font-size: .88em; opacity: .85; }
tr.child td:nth-child(2) { padding-left: 26px; }
tr.child td:nth-child(2)::before { content: '└ '; opacity: .4; }
tr.off td { opacity: .5; }
.strip { display: flex; gap: 2px; height: 28px; align-items: stretch; margin: 6px 0 2px; }
.strip i { flex: 1; border-radius: 2px; background: #8883; }
.strip i.ok { background: #22c55e; } .strip i.warn { background: #f59e0b; } .strip i.bad { background: #ef4444; }
.meter { height: 8px; border-radius: 4px; background: #8883; overflow: hidden; min-width: 120px; }
.meter > i { display: block; height: 100%; background: #2f6fed; }
.meter > i.hi { background: #ef4444; }
.secret { font-family: ui-monospace, monospace; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: .92em; }
.facts dt { opacity: .7; }
.facts dd { margin: 0; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.fgrid label { display: flex; flex-direction: column; gap: 4px; font-size: .9em; }
.fgrid label.wide { grid-column: 1 / -1; }
.fgrid label.check { flex-direction: row; align-items: center; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }