/* NEX Monitor – Oberfläche (NEX-Design: Beere #A40049, Slate, Archivo + Plex Mono) */
@font-face { font-family:"Archivo"; src:url(fonts/archivo.woff2) format("woff2"); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url(fonts/plexmono.woff2) format("woff2"); font-weight:400; font-display:swap; }

:root {
  --berry:#A40049; --berry-ink:#7A0037;
  --font:"Archivo","Segoe UI",system-ui,sans-serif;
  --mono:"Plex Mono",ui-monospace,Consolas,monospace;
  --r:6px; --r-lg:8px;
  --bg:#F3F5F6; --bg2:#FFFFFF; --bg3:#EEF1F3; --bg4:#E2E7EA;
  --line:#D6DDE1; --line-strong:#9AA8B0;
  --text:#1B2328; --text2:#4A5961; --text3:#5F6E76;
  --accent:#A40049; --accent-soft:#F7E6EE; --on-accent:#fff;
  --up:#1E8A5A; --down:#C42B20; --pending:#C27C00; --maint:#3D63C9; --none:#C9D1D6;
  --up-soft:#E3F2EA; --down-soft:#FBE7E5; --pending-soft:#FBF0DC; --maint-soft:#E6ECFA;
  --focus:0 0 0 3px rgba(164,0,73,.22);
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#11181C; --bg2:#172126; --bg3:#0E1418; --bg4:#22303A;
    --line:#2A3940; --line-strong:#4D626C;
    --text:#E3E9EC; --text2:#B4C1C8; --text3:#8597A0;
    --accent:#D6327A; --accent-soft:#3A1528; --on-accent:#fff;
    --up:#3FB97F; --down:#F0564A; --pending:#E8A93A; --maint:#6E8EF0; --none:#2E3D45;
    --up-soft:#15302A; --down-soft:#3A1A1A; --pending-soft:#3A2E15; --maint-soft:#1C2645;
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#11181C; --bg2:#172126; --bg3:#0E1418; --bg4:#22303A;
  --line:#2A3940; --line-strong:#4D626C;
  --text:#E3E9EC; --text2:#B4C1C8; --text3:#8597A0;
  --accent:#D6327A; --accent-soft:#3A1528; --on-accent:#fff;
  --up:#3FB97F; --down:#F0564A; --pending:#E8A93A; --maint:#6E8EF0; --none:#2E3D45;
  --up-soft:#15302A; --down-soft:#3A1A1A; --pending-soft:#3A2E15; --maint-soft:#1C2645;
  color-scheme:dark;
}

* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--text); font:15px/1.5 var(--font); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1, h2, h3 { font-stretch:92%; line-height:1.2; margin:0 0 .6em; }
h1 { font-size:1.55rem; font-weight:680; letter-spacing:-.01em; }
h2 { font-size:1.12rem; font-weight:650; }
h3 { font-size:.98rem; font-weight:650; }
code, .mono { font-family:var(--mono); font-size:.88em; }
.muted { color:var(--text3); }
.small { font-size:.86rem; }
hr { border:0; border-top:1px solid var(--line); margin:20px 0; }

/* ---------- Kopfleiste ---------- */
.top { background:#1E2A30; color:#C7D2D7; border-bottom:3px solid var(--berry); }
.top-in { max-width:1320px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:22px; height:56px; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-stretch:88%; font-size:1.08rem; letter-spacing:.01em; white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand-mark { width:26px; height:26px; border-radius:5px; background:var(--berry); display:grid; place-items:center; }
.brand-mark svg { width:16px; height:16px; }
.nav { display:flex; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none; }
.nav a { color:#C7D2D7; padding:7px 11px; border-radius:var(--r); font-size:.92rem; white-space:nowrap; }
.nav a:hover { background:#26343B; color:#fff; text-decoration:none; }
.nav a.on { background:#34444C; color:#fff; }
@media (max-width:760px) {
  .top-in { flex-wrap:wrap; height:auto; padding:10px 16px 0; gap:8px 12px; }
  .brand { flex:1; }
  .nav { order:3; flex-basis:100%; margin:0 -16px; padding:0 10px 6px; }
  .wrap { padding:18px 16px 50px; }
}
.top-actions { display:flex; gap:8px; align-items:center; }
.icon-btn svg { width:16px; height:16px; }
.icon-btn { background:none; border:1px solid #34444C; color:#C7D2D7; border-radius:var(--r); height:32px; min-width:32px; padding:0 8px; cursor:pointer; display:inline-grid; place-items:center; }
.icon-btn:hover { background:#26343B; color:#fff; text-decoration:none; }

.wrap { max-width:1320px; margin:0 auto; padding:24px 20px 60px; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.page-head h1 { margin:0; }
.page-head .sub { color:var(--text3); margin-top:4px; word-break:break-all; }

/* ---------- Karten & Raster ---------- */
.card { background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; }
.card + .card { margin-top:16px; }
.grid > .card + .card, .grid > * > .card:first-child { margin-top:0; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.card-head h2 { margin:0; }
.grid { display:grid; gap:16px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px) { .g2, .g3, .g4 { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .g2, .g3, .g4 { grid-template-columns:1fr; } }

.kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
@media (max-width:900px) { .kpis { grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px) { .kpis { grid-template-columns:repeat(2,1fr); } }
.kpi { background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px; border-left:4px solid var(--none); }
.kpi .n { font:600 1.6rem/1.1 var(--mono); }
.kpi .l { color:var(--text3); font-size:.84rem; }
.kpi.up { border-left-color:var(--up); } .kpi.down { border-left-color:var(--down); }
.kpi.pending { border-left-color:var(--pending); } .kpi.maint { border-left-color:var(--maint); }
.kpi.down .n { color:var(--down); }

.stat { padding:12px 14px; background:var(--bg3); border-radius:var(--r); }
.stat .l { color:var(--text3); font-size:.8rem; }
.stat .v { font:600 1.15rem/1.3 var(--mono); }
.stat .s { color:var(--text3); font-size:.78rem; }

/* ---------- Status ---------- */
.pill { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:.8rem; font-weight:600; background:var(--bg4); color:var(--text2); white-space:nowrap; }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill.up { background:var(--up-soft); color:var(--up); }
.pill.down { background:var(--down-soft); color:var(--down); }
.pill.pending { background:var(--pending-soft); color:var(--pending); }
.pill.maint { background:var(--maint-soft); color:var(--maint); }
.pill.paused { background:var(--bg4); color:var(--text3); }
.dot { width:10px; height:10px; border-radius:50%; background:var(--none); flex:none; display:inline-block; }
.dot.up { background:var(--up); } .dot.down { background:var(--down); box-shadow:0 0 0 3px var(--down-soft); }
.dot.pending { background:var(--pending); } .dot.maint { background:var(--maint); } .dot.paused { background:var(--line-strong); }

.bars { display:flex; gap:2px; height:22px; align-items:stretch; min-width:0; }
.bars i { flex:1 1 0; min-width:3px; max-width:8px; border-radius:2px; background:var(--none); }
.bars i.up { background:var(--up); } .bars i.down { background:var(--down); }
.bars i.pending { background:var(--pending); } .bars i.maint { background:var(--maint); }
.bars i:hover { opacity:.7; }
.bars.big { height:34px; gap:3px; }
.bars.big i { max-width:none; }

/* ---------- Monitorliste ---------- */
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.toolbar input[type=search] { flex:1; min-width:200px; }
.mlist { background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.mrow { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(140px,2fr) 80px 74px; gap:14px; align-items:center; padding:10px 16px; border-top:1px solid var(--line); color:var(--text); }
.mrow:first-child { border-top:0; }
.mrow:hover { background:var(--bg3); text-decoration:none; }
.mrow .name { display:flex; align-items:center; gap:10px; min-width:0; }
.mrow .name b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow .name .t { color:var(--text3); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow .num { font:500 .85rem var(--mono); text-align:right; color:var(--text2); }
.mrow.child .name { padding-left:22px; }
.mrow.paused { opacity:.6; }
.mhead { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(140px,2fr) 80px 74px; gap:14px; padding:8px 16px; color:var(--text3); font-size:.78rem; background:var(--bg3); border-bottom:1px solid var(--line); }
.mhead span:nth-child(n+3) { text-align:right; }
@media (max-width:760px) {
  .mrow, .mhead { grid-template-columns:minmax(0,1fr) 70px; }
  .mrow .bars, .mrow .num.resp, .mhead span:nth-child(2), .mhead span:nth-child(3) { display:none; }
}
.tag { display:inline-block; padding:0 7px; border-radius:4px; font-size:.72rem; font-weight:600; color:#fff; line-height:1.6; margin-right:3px; vertical-align:middle; }
.empty { padding:40px 16px; text-align:center; color:var(--text3); }

/* ---------- Formulare ---------- */
label { display:block; font-weight:600; font-size:.88rem; margin-bottom:5px; }
.field { margin-bottom:14px; }
.field .hint { color:var(--text3); font-size:.8rem; margin-top:4px; font-weight:400; }
input[type=text], input[type=password], input[type=number], input[type=url], input[type=search], input[type=email],
input[type=datetime-local], input[type=time], select, textarea {
  width:100%; padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--bg2); color:var(--text); font:inherit; font-size:.94rem;
}
textarea { font-family:var(--mono); font-size:.85rem; min-height:80px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--focus); }
.check { display:flex; gap:8px; align-items:flex-start; font-weight:500; margin-bottom:8px; cursor:pointer; }
.check input { margin-top:4px; accent-color:var(--accent); }
.row { display:flex; gap:12px; } .row > * { flex:1; }
@media (max-width:560px) { .row { flex-direction:column; gap:0; } }
fieldset { border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px 4px; margin:0 0 16px; }
legend { font-weight:650; padding:0 6px; font-size:.92rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; border-radius:var(--r); border:1px solid var(--line-strong); background:var(--bg2); color:var(--text); font:600 .9rem var(--font); cursor:pointer; white-space:nowrap; }
.btn:hover { background:var(--bg3); text-decoration:none; }
.btn.primary { background:var(--berry); border-color:var(--berry); color:#fff; }
.btn.primary:hover { background:var(--berry-ink); }
.btn.danger { color:var(--down); border-color:var(--down); }
.btn.danger:hover { background:var(--down-soft); }
.btn.sm { padding:4px 10px; font-size:.82rem; }
.btn:disabled { opacity:.5; cursor:default; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }

.flash { padding:10px 14px; border-radius:var(--r); margin-bottom:16px; border:1px solid; }
.flash.ok { background:var(--up-soft); border-color:var(--up); color:var(--text); }
.flash.err { background:var(--down-soft); border-color:var(--down); color:var(--text); }
.flash.warn { background:var(--pending-soft); border-color:var(--pending); color:var(--text); }

table.tbl { width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th { text-align:left; color:var(--text3); font-weight:600; font-size:.78rem; padding:6px 8px; border-bottom:1px solid var(--line); }
.tbl td { padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl tr:last-child td { border-bottom:0; }
.tbl td.mono, .tbl td .mono { white-space:nowrap; }
.scroll-x { overflow-x:auto; }

/* ---------- Chart ---------- */
.chart-wrap { position:relative; height:240px; }
.chart-wrap canvas { width:100%; height:100%; display:block; }
.chart-tip { position:absolute; pointer-events:none; background:var(--bg4); border:1px solid var(--line); border-radius:var(--r); padding:5px 8px; font:.78rem var(--mono); white-space:nowrap; display:none; z-index:2; }
.seg { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r); overflow:hidden; }
.seg button { border:0; background:var(--bg2); color:var(--text2); padding:5px 10px; font:600 .8rem var(--font); cursor:pointer; border-left:1px solid var(--line); }
.seg button:first-child { border-left:0; }
.seg button.on { background:var(--berry); color:#fff; }

.copy { display:flex; gap:6px; }
.copy input { font-family:var(--mono); font-size:.82rem; }

/* ---------- Login ---------- */
.login { min-height:100vh; display:grid; place-items:center; padding:20px; background:#1E2A30; }
.login .card { width:100%; max-width:380px; padding:28px; border-top:4px solid var(--berry); }
.login .brand { color:var(--text); margin-bottom:18px; }

/* ---------- Öffentliche Statusseite ---------- */
.sp { max-width:880px; margin:0 auto; padding:36px 20px 60px; }
.sp-head { margin-bottom:22px; }
.sp-banner { padding:16px 20px; border-radius:var(--r-lg); color:#fff; font-weight:650; font-size:1.05rem; display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.sp-banner.up { background:var(--up); } .sp-banner.down { background:var(--down); }
.sp-banner.partial { background:var(--pending); } .sp-banner.maint { background:var(--maint); }
.sp-group { margin-bottom:22px; }
.sp-item { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,1.3fr) 70px; gap:14px; align-items:center; padding:10px 16px; border-top:1px solid var(--line); }
.sp-item:first-of-type { border-top:0; }
@media (max-width:600px) { .sp-item { grid-template-columns:minmax(0,1fr) 64px; } .sp-item .bars { display:none; } }
.incident { border-left:4px solid var(--pending); }
.incident.danger { border-left-color:var(--down); } .incident.info, .incident.primary { border-left-color:var(--maint); }
.incident.success { border-left-color:var(--up); }
.sp-foot { text-align:center; color:var(--text3); font-size:.82rem; margin-top:30px; }

.log { background:var(--bg3); border:1px solid var(--line); border-radius:var(--r); padding:12px; font:.82rem/1.6 var(--mono); white-space:pre-wrap; max-height:420px; overflow:auto; }
.ntype-fields:not(.on) { display:none !important; }
[data-show]:not(.on) { display:none !important; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap; }
.tabs button { background:none; border:0; border-bottom:2px solid transparent; padding:8px 12px; font:600 .9rem var(--font); color:var(--text2); cursor:pointer; margin-bottom:-1px; }
.tabs button.on { color:var(--accent); border-bottom-color:var(--accent); }
.tabpane { display:none; } .tabpane.on { display:block; }