:root{
  --bg:#0f172a; --panel:#1e293b; --panel2:#243349; --line:#334155;
  --text:#f1f5f9; --muted:#94a3b8; --accent:#38bdf8; --accent2:#0ea5e9;
  --ok:#22c55e; --warn:#f59e0b; --crit:#ef4444;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}

/* ---- Nav ---- */
.topnav{
  display:flex; align-items:center; gap:1.25rem;
  padding:0 1.5rem; height:56px; background:#0b1220;
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;
}
.topnav .brand{font-weight:700; font-size:1.1rem; margin-right:.5rem}
.topnav a{color:var(--muted); font-size:.95rem; padding:.4rem 0}
.topnav a:hover{color:var(--text)}
.topnav a.active{color:var(--text); border-bottom:2px solid var(--accent)}
.topnav .spacer{flex:1}
.topnav .who{color:var(--muted); font-size:.9rem}
.topnav a.logout{color:#fda4af}
.dot{color:var(--accent)}

.wrap{max-width:1000px; margin:0 auto; padding:1.75rem 1.5rem 3rem}
.muted{color:var(--muted); font-size:.85rem}
.page-head{margin-bottom:1.25rem}
.page-head h1{margin:0 0 .25rem; font-size:1.6rem}
.live{color:var(--ok)}

.flash{
  background:#7f1d1d; color:#fee2e2; padding:.7rem 1rem;
  border-radius:8px; margin-bottom:1rem; font-size:.9rem;
}

/* ---- Cards grid ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin-bottom:1.5rem}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem;
}
.card.link:hover{border-color:var(--accent); transform:translateY(-2px); transition:.15s}
.card-label{color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em}
.card-value{font-size:2rem; font-weight:700; line-height:1}

/* ---- Bars ---- */
.bar{height:9px; background:#0b1220; border-radius:6px; overflow:hidden; margin:.2rem 0}
.bar-fill{height:100%; background:linear-gradient(90deg,var(--accent2),var(--accent)); border-radius:6px; transition:width .4s ease}
.bar-fill.warn{background:linear-gradient(90deg,#d97706,var(--warn))}
.bar-fill.crit{background:linear-gradient(90deg,#b91c1c,var(--crit))}

/* ---- Panels ---- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.2rem 1.3rem; margin-bottom:1.25rem}
.panel h2{margin:0 0 .9rem; font-size:1.1rem}
.disk-row{margin-bottom:.9rem}
.disk-head{display:flex; align-items:baseline; gap:.5rem; font-size:.9rem; margin-bottom:.3rem}
.disk-num{margin-left:auto; color:var(--muted)}

table.proc{width:100%; border-collapse:collapse; font-size:.88rem}
table.proc th,table.proc td{text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line)}
table.proc th{color:var(--muted); font-weight:600}
table.proc td:nth-child(4),table.proc td:nth-child(5){font-variant-numeric:tabular-nums}

.hint{color:var(--muted); font-size:.9rem}

/* ---- Login ---- */
.login-screen{min-height:80vh; display:flex; align-items:center; justify-content:center}
.login-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:2rem 2rem 1.8rem; width:340px; display:flex; flex-direction:column; gap:.4rem;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.login-card h1{margin:0; text-align:center; font-size:1.6rem}
.login-card .sub{margin:.1rem 0 1.2rem; text-align:center; color:var(--muted)}
.login-card label{display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; color:var(--muted); margin-bottom:.7rem}
.login-card input{
  background:#0b1220; border:1px solid var(--line); border-radius:8px;
  padding:.6rem .7rem; color:var(--text); font-size:1rem;
}
.login-card input:focus{outline:none; border-color:var(--accent)}
.login-card button{
  margin-top:.5rem; background:var(--accent2); color:#04212f; border:none;
  border-radius:8px; padding:.7rem; font-size:1rem; font-weight:700; cursor:pointer;
}
.login-card button:hover{background:var(--accent)}

/* ---- Logs ---- */
.svc .svc-state{display:flex; align-items:center; gap:.5rem; font-size:1.4rem; font-weight:700}
.dotstate{width:11px; height:11px; border-radius:50%; display:inline-block; flex:0 0 auto}
.dotstate.on{background:var(--ok); box-shadow:0 0 8px var(--ok)}
.dotstate.off{background:var(--crit); box-shadow:0 0 8px var(--crit)}
.svc-active{font-size:1.2rem; text-transform:capitalize}

.logbar{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:.9rem}
.logbar label{display:flex; flex-direction:column; gap:.25rem; font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em}
.logbar label.chk{flex-direction:row; align-items:center; gap:.4rem; text-transform:none; font-size:.85rem}
.logbar select{background:#0b1220; color:var(--text); border:1px solid var(--line); border-radius:7px; padding:.4rem .5rem; font-size:.9rem}
.logbar button{background:var(--accent2); color:#04212f; border:none; border-radius:7px; padding:.5rem .9rem; font-weight:700; cursor:pointer; align-self:flex-end}
.logbar button:hover{background:var(--accent)}
.logbar #loginfo{margin-left:auto}
.logview{
  background:#0a0f1c; border:1px solid var(--line); border-radius:8px;
  padding:.9rem 1rem; max-height:60vh; overflow:auto; margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8rem; line-height:1.5; color:#cbd5e1; white-space:pre-wrap; word-break:break-word;
}

/* ---- Sicherheit ---- */
.tag{display:inline-block; padding:.12rem .5rem; border-radius:999px; font-size:.72rem; font-weight:600; white-space:nowrap}
.tag-warn{background:#78350f; color:#fde68a}
.tag-ok{background:#064e3b; color:#a7f3d0}
.tag-info{background:#1e3a5f; color:#bae6fd}
#events td{vertical-align:top}
#events tr.sev-warn td:first-child{border-left:3px solid var(--warn)}
#events tr.sev-ok td:first-child{border-left:3px solid var(--ok)}
.panel table.proc{max-height:none}

/* IP-Links (Top-IPs + Ereignisse) */
.iplink{color:var(--accent); border-bottom:1px dotted var(--accent); cursor:pointer; white-space:nowrap}
.iplink:hover{color:var(--text); border-bottom-color:var(--text)}

/* Floating-Tooltip beim Mouseover */
.iptip{
  position:absolute; z-index:50; max-width:320px;
  background:#0b1220; color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:.55rem .7rem; font-size:.8rem; line-height:1.5;
  box-shadow:0 10px 30px rgba(0,0,0,.5); pointer-events:none;
}

/* Detail-Popup (Modal) */
.modal-bg{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.7); padding:1rem;
}
/* hidden-Attribut muss display:flex schlagen, sonst ist das Popup immer sichtbar */
.modal-bg[hidden], .iptip[hidden]{display:none}
.modal{
  position:relative; width:min(440px,100%); background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.5rem;
  box-shadow:0 25px 70px rgba(0,0,0,.55);
}
.modal h3{margin:0 0 1rem; font-size:1.25rem; word-break:break-all}
.modal-x{
  position:absolute; top:.6rem; right:.8rem; background:none; border:none;
  color:var(--muted); font-size:1.6rem; line-height:1; cursor:pointer;
}
.modal-x:hover{color:var(--text)}
table.kv{width:100%; border-collapse:collapse; font-size:.9rem; margin-bottom:1rem}
table.kv th,table.kv td{text-align:left; padding:.4rem .3rem; border-bottom:1px solid var(--line); vertical-align:top}
table.kv th{color:var(--muted); font-weight:600; width:38%; white-space:nowrap}
table.kv td{word-break:break-word}
.ext{display:flex; flex-wrap:wrap; gap:.5rem}
.ext a{
  background:var(--panel2); border:1px solid var(--line); border-radius:7px;
  padding:.4rem .7rem; font-size:.82rem; color:var(--accent);
}
.ext a:hover{border-color:var(--accent); color:var(--text)}