/* Monitor tabs (AI server / NAS / Databases / Network / Overview): the old TEKNOS control
   site's components, scoped under .mon and re-coloured to the dashboard's neon palette. */
.mon{--bg2:rgba(4,6,12,.55);--panel:rgba(14,18,32,.78);--panel2:rgba(22,27,46,.86);--line:rgba(122,92,255,.22);--line2:rgba(62,240,255,.38);
  --txt:#e8ecf8;--mut:#8e98b8;--accent:#3ef0ff;--good:#3ad29f;--warn:#ffcc66;--bad:#ff6b6b;--ts:#b69cff;--net:#9bdcff;
  --chip:rgba(122,92,255,.14);--shadow:0 10px 30px rgba(0,0,0,.35);--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--txt);font-size:15px;line-height:1.5}
.mon a{color:var(--accent)} .mon .mut{color:var(--mut)} .mon .pad{padding:24px 16px} .mon .mono{font-family:var(--mono);font-size:12px} .mon .nowrap{white-space:nowrap}
.mon .tile,.mon .card,.mon .list,.mon .tbl-wrap{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* section headings */
.mon h1.pg{font-size:22px;margin:4px 0 2px} .mon p.lead{margin:0 0 16px;color:var(--mut);font-size:14px}
.mon h2{font-size:12px;text-transform:uppercase;letter-spacing:1.3px;color:var(--mut);margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);font-weight:600}
.mon h2 .c{color:var(--mut);font-weight:500;margin-left:6px}
.mon .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mon .spacer{flex:1}

/* tiles */
.mon .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.mon .tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);min-width:0}
.mon .tile .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--mut)}
.mon .tile .v{font-size:22px;font-weight:650;margin-top:2px;line-height:1.2}
.mon .tile .s{font-size:12.5px;color:var(--mut);margin-top:2px}
.mon .tile.ok{border-left:3px solid var(--good)} .mon .tile.warn{border-left:3px solid var(--warn)} .mon .tile.bad{border-left:3px solid var(--bad)}
.mon a.tile{color:inherit;display:block} .mon a.tile:hover{text-decoration:none;border-color:var(--line2)}

/* cards */
.mon .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
@media(max-width:420px){.mon .cards{grid-template-columns:1fr}}
.mon .card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;display:flex;flex-direction:column;gap:9px;min-width:0;box-shadow:var(--shadow)}
.mon .card.attn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.mon .card.wide{grid-column:1/-1}
.mon .card .top2{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.mon .card h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px;min-width:0}
.mon .card h3 img{width:18px;height:18px;border-radius:4px}
.mon .card .desc{margin:0;color:color-mix(in srgb,var(--txt) 85%,var(--mut));font-size:13.5px}
.mon .tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.mon .tag{font-size:10.5px;font-weight:700;letter-spacing:.4px;padding:2px 7px;border-radius:999px;background:var(--chip);
  color:var(--mut);border:1px solid var(--line);text-transform:uppercase;white-space:nowrap}
.mon .tag.auto{color:var(--warn)}

/* pills + access badges */
.mon .pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap;display:inline-block}
.mon .pill.live,.mon .pill.ok{background:rgba(58,210,159,.16);color:var(--good)}
.mon .pill.gate{background:rgba(255,204,102,.16);color:var(--warn)}
.mon .pill.api{background:rgba(76,194,255,.15);color:var(--net)}
.mon .pill.off,.mon .pill.bad{background:rgba(255,107,107,.14);color:var(--bad)}
.mon .pill.warn{background:rgba(255,170,90,.16);color:#e8a14e}
.mon .pill.local,.mon .pill.mut{background:rgba(138,150,173,.14);color:var(--mut)}
.mon .acc{font-size:9.5px;font-weight:800;letter-spacing:.5px;padding:2px 6px;border-radius:5px;white-space:nowrap}
.mon .acc.public,.mon .acc.raw,.mon .acc.internet{background:rgba(76,194,255,.13);color:var(--net);border:1px solid rgba(76,194,255,.35)}
.mon .acc.tailscale{background:rgba(182,156,255,.14);color:var(--ts);border:1px solid rgba(182,156,255,.38)}
.mon .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--mut)}
.mon .dot.on{background:var(--good)} .mon .dot.off{background:var(--bad)} .mon .dot.warn{background:var(--warn)}
.mon .dot.crit{background:var(--bad);box-shadow:0 0 6px var(--bad)}

/* link rows + where rows */
.mon .links{display:flex;flex-direction:column;gap:5px}
.mon .lrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.mon .lrow a{font-size:13.5px;word-break:break-all}
.mon .lnote{font-size:12px;color:var(--mut)}
.mon .where{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:8px}
.mon .w{display:grid;grid-template-columns:18px 86px 1fr;gap:6px;font-size:12.5px;line-height:1.45;align-items:start}
.mon .w .wk{color:var(--mut)} .mon .w .wv{min-width:0;overflow-wrap:anywhere}
.mon .w .sub2{display:block;color:var(--mut);font-size:11.5px}
.mon .ctr{display:block}
.mon a.open{font-size:12px;margin-left:5px}
.mon details.more summary{cursor:pointer;color:var(--mut);font-size:12.5px;list-style:revert}
.mon details.more ul{list-style:none;margin:6px 0 0;padding:0;max-height:220px;overflow:auto;font-size:12.5px}
.mon details.more li{padding:1px 0}
.mon .pnote{font-size:12.5px;border-top:1px dashed color-mix(in srgb,var(--warn) 40%,var(--line));padding-top:7px}
.mon .pnote .warn,.mon .pnote .crit{color:var(--warn)} .mon .pnote .info{color:var(--mut)}

/* filter bar */
.mon .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 14px}
.mon .chips{display:flex;flex-wrap:wrap;gap:6px}
.mon .chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
.mon .chip b{color:var(--mut);font-weight:600;margin-left:3px}
.mon .chip.on{background:color-mix(in srgb,var(--accent) 22%,var(--panel));border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.mon input.search{flex:1 1 220px;max-width:360px;background:var(--panel);color:var(--txt);border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;font:inherit;font-size:14px}

/* lists + tables */
.mon .list{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mon .li{display:flex;gap:10px;align-items:flex-start;padding:9px 14px;border-top:1px solid var(--line);font-size:13.5px}
.mon .li:first-child{border-top:0}
.mon .li .ic{flex:0 0 18px;text-align:center}
.mon .li.crit .ic,.mon .li.warn .ic{color:var(--warn)} .mon .li.crit{background:rgba(255,107,107,.05)}
.mon .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.mon table{border-collapse:collapse;width:100%;font-size:13px}
.mon th,.mon td{text-align:left;padding:7px 12px;border-top:1px solid var(--line);vertical-align:top}
.mon th{border-top:0;font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--mut);font-weight:600;background:var(--bg2)}
.mon td.num,.mon th.num{text-align:right;font-variant-numeric:tabular-nums}

/* buttons */
.mon .btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--panel2);border-radius:9px;
  padding:6px 12px;font-size:13px;cursor:pointer;white-space:nowrap}
.mon .btn:hover{border-color:var(--accent)} .mon .btn:disabled{opacity:.55;cursor:default}
.mon .btn.go{border-color:color-mix(in srgb,var(--good) 55%,var(--line));color:var(--good)}
.mon .btn.stop{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));color:var(--bad)}
.mon .btn.small{padding:3px 9px;font-size:12px}

/* stat strip inside cards */
.mon .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px}
.mon .stat{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:6px 8px}
.mon .stat .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut)}
.mon .stat .v{font-size:15px;font-weight:650}

/* findings */
.mon .fnd{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:6px;background:var(--bg2)}
.mon .fnd .t{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.mon .fnd .d{font-size:12.5px;color:var(--mut);margin:4px 0 0}
.mon .sev{font-size:10px;font-weight:800;text-transform:uppercase;padding:2px 6px;border-radius:5px;flex:0 0 auto}
.mon .sev.critical{background:rgba(255,107,107,.18);color:var(--bad)} .mon .sev.high{background:rgba(255,150,90,.18);color:#f08a4b}
.mon .sev.medium{background:rgba(255,204,102,.16);color:var(--warn)} .mon .sev.low{background:rgba(138,150,173,.16);color:var(--mut)}
.mon svg.spark{width:100%;height:46px;display:block}
.mon .hide{display:none!important}

/* machine labels: every panel says which box it is about */
.mon .mach{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.7px;padding:2px 8px;border-radius:999px;white-space:nowrap;margin-right:8px;flex:0 0 auto}
.mon .mach.ai{color:#3ef0ff;background:rgba(62,240,255,.10);border:1px solid rgba(62,240,255,.45)}
.mon .mach.nas{color:#ffb547;background:rgba(255,181,71,.10);border:1px solid rgba(255,181,71,.45)}
.mon .band{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:30px 0 12px;padding:10px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);border-left-width:4px}
.mon .band.ai{border-left-color:#3ef0ff;box-shadow:inset 30px 0 60px -40px rgba(62,240,255,.35)}
.mon .band.nas{border-left-color:#ffb547;box-shadow:inset 30px 0 60px -40px rgba(255,181,71,.35)}
.mon .band b{font-size:15px} .mon .band .mut{font-size:12.5px}
.mon .li .mach{margin-top:1px}
.mon h1.pg{font-weight:600} .mon tr.mut td{opacity:.6}
.mon .bn{border:1px solid rgba(255,107,107,.4);background:rgba(255,107,107,.08);border-radius:10px;padding:8px 12px;font-size:13.5px;margin-bottom:6px}
.mon .tiles + .band{margin-top:22px}