:root {
  --bg: #eef1f5;
  --card: #ffffff;
  --ink: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #2563eb;
  --ok: #16a34a;      --ok-bg: #dcfce7;
  --warn: #d97706;    --warn-bg: #fef3c7;
  --crit: #dc2626;    --crit-bg: #fee2e2;
  --shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px; line-height: 1.5;
}
.ic {
  width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.18em;
  stroke: currentColor; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.stat .l .ic, .server-meta .ic { width: 1.2em; height: 1.2em; }

/* ── top bar ── */
.topbar {
  background: #0f172a; color: #fff; padding: 14px 24px;
  display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10;
}
.topbar .logo { width: 26px; height: 26px; display: block; flex: none; }
.topbar h1 { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: .2px; }
.topbar .spacer { flex: 1; }
.topbar .updated { color: #94a3b8; font-size: 12px; }
.topbar button {
  background: #1e293b; color: #cbd5e1; border: 1px solid #334155;
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar button:hover { background: #334155; color: #fff; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.wrap { max-width: 1280px; margin: 0 auto; padding: 22px; }

/* ── fleet summary ── */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; margin-bottom: 24px; }
.stat { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.stat .n { font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat .l { color: var(--muted); font-size: 12.5px; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.stat.alert .n { color: var(--crit); }
.stat.warn .n { color: var(--warn); }

/* ── server panel ── */
.server { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; }
.server-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.server-head .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.crit { background: var(--crit); }
.server-head .name { font-size: 16px; font-weight: 700; }
.server-head .host { color: var(--muted); font-size: 12.5px; }
.server-head .badges { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.badge { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px; background: #f1f5f9; color: var(--muted); }
.badge.ok { background: var(--ok-bg); color: #166534; }
.badge.warn { background: var(--warn-bg); color: #92400e; }
.badge.crit { background: var(--crit-bg); color: #991b1b; }
.badge .material-symbols-outlined { font-size: 15px; }

/* server meta bar */
.server-meta { display: flex; gap: 26px; flex-wrap: wrap; padding: 12px 20px; background: #f8fafc; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.server-meta .m { display: flex; align-items: center; gap: 6px; }
.server-meta b { color: var(--ink); font-weight: 600; }
.gauge { width: 90px; height: 7px; border-radius: 4px; background: #e2e8f0; overflow: hidden; display: inline-block; vertical-align: middle; }
.gauge > i { display: block; height: 100%; border-radius: 4px; }

/* ── app tiles ── */
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 12px; padding: 18px 20px; }
.tile { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; position: relative;
  transition: box-shadow .12s, transform .12s; cursor: default; background: #fff; }
.tile:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.tile::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; }
.tile.ok::before { background: var(--ok); } .tile.degraded::before { background: var(--warn); } .tile.critical::before { background: var(--crit); }
.tile .row1 { display: flex; align-items: center; gap: 8px; }
.tile .aname { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px; margin-left: auto; }
.pill.ok { background: var(--ok-bg); color: #166534; } .pill.degraded { background: var(--warn-bg); color: #92400e; } .pill.critical { background: var(--crit-bg); color: #991b1b; }
.tile .meta { margin-top: 8px; display: flex; gap: 12px; color: var(--muted); font-size: 11.5px; flex-wrap: wrap; }
.tile .meta code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.tile .pub { display: inline-flex; align-items: center; gap: 3px; }
.tile .pub.up { color: var(--ok); } .tile .pub.down { color: var(--crit); }
.tile .row1 .row1-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.tile .row1 .row1-right .pill { margin-left: 0; }

/* Production marker — deliberately dark so it never reads as a status colour */
.prodtag { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800;
  letter-spacing: .5px; padding: 2px 6px; border-radius: 999px; background: #0f172a;
  color: #fff; margin-left: 6px; vertical-align: middle; }
:root[data-theme="dark"] .prodtag, :root:not([data-theme="light"]) .prodtag { background: #e2e8f0; color: #0f172a; }

/* Admin-toggle voor de productie-classificatie op de app-detailpagina. Aan = zelfde
   look als .prodtag; uit = ingetogen omtrek zodat "niet-prod" niet schreeuwt. */
.prodtoggle { display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px;
  border-radius: 999px; margin-left: 6px; vertical-align: middle; border: 1px solid var(--border);
  background: transparent; color: var(--muted); line-height: 1; }
.prodtoggle .material-symbols-rounded, .prodtoggle svg { font-size: 12px; width: 12px; height: 12px; }
.prodtoggle:hover { border-color: var(--muted); }
.prodtoggle.on { background: #0f172a; color: #fff; border-color: #0f172a; }
:root[data-theme="dark"] .prodtoggle.on, :root:not([data-theme="light"]) .prodtoggle.on { background: #e2e8f0; color: #0f172a; border-color: #e2e8f0; }

/* Weergavenaam en unitnaam. De unitnaam blijft klein zichtbaar zodra ze
   verschillen: dat is de naam die systemctl, de logs en de deploy kennen. */
.unitsub { display: block; font-size: 11px; color: var(--muted); font-family: ui-monospace,
  SFMono-Regular, Menlo, monospace; margin-top: 1px; }
.unitname { padding: 0 20px 10px; font-size: 12px; color: var(--muted); }
.unitname code { font-size: 12px; }
.renamebtn { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 2px 4px;
  display: inline-flex; align-items: center; border-radius: 6px; }
.renamebtn:hover { color: var(--ink); background: rgba(127,127,127,.14); }
.renameinput { font-size: 15px; font-weight: 700; padding: 2px 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); min-width: 220px; }

.unreachable { padding: 18px 20px; color: var(--crit); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.loading, .empty { text-align: center; color: var(--muted); padding: 60px 20px; }

/* clickable server header → detail */
.server-head.clickable { cursor: pointer; }
.server-head.clickable:hover { background: #f8fafc; }
.head-chev { color: var(--muted); width: 1.2em; height: 1.2em; flex: none; transition: transform .15s; }
.head-chev.open { transform: rotate(90deg); }
.appsum { display: flex; align-items: center; gap: 7px; margin-left: 10px; flex-wrap: wrap; }
.scount { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.schip { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.schip.ok { background: var(--ok-bg); color: #166534; }
.schip.warn { background: var(--warn-bg); color: #92400e; }
.schip.crit { background: var(--crit-bg); color: #991b1b; }
.detailbtn { margin-left: 4px; background: transparent; border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 11px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.detailbtn:hover { background: #f1f5f9; color: var(--ink); }

/* ── server detail page ── */
.detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.detail-head .name { font-size: 20px; font-weight: 700; }
.detail-head .host { color: var(--muted); font-size: 13px; }
.detail-head .badges { margin-left: auto; display: flex; gap: 8px; }
.back { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px;
  cursor: pointer; font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); box-shadow: var(--shadow); }
.back:hover { background: #f1f5f9; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 16px; }
.sbig { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.sbig .sb-ic { width: 38px; height: 38px; border-radius: 10px; background: #eff2f7; color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.sbig .sb-ic .ic { width: 20px; height: 20px; }
.sbig.warn .sb-ic { background: var(--warn-bg); color: var(--warn); }
.sbig.crit .sb-ic { background: var(--crit-bg); color: var(--crit); }
.sb-v { font-size: 21px; font-weight: 700; line-height: 1.1; }
.sb-l { color: var(--muted); font-size: 12px; margin-top: 1px; }
.sb-sub { color: #94a3b8; }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.chartcard { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.ch-h { font-size: 12.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ch-h .ic { color: var(--muted); }
.ch-src { margin-left: auto; font-weight: 400; color: #94a3b8; font-size: 11px; }
.spark { width: 100%; height: 56px; display: block; }
.spark-empty { color: #94a3b8; font-size: 12px; padding: 18px 0; text-align: center; }

.cols { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.panel-sec { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.panel-sec h3 { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--ink); }
.panel-sec.side h3:not(:first-child) { margin-top: 18px; }
.apptable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.apptable th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.apptable td { padding: 8px; border-bottom: 1px solid #f1f5f9; }
.apptable tr:last-child td { border-bottom: none; }
.apptable .pill { margin: 0; }
.li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 5px 0; color: var(--ink); }
.li .ic { color: var(--muted); flex: none; }
.li.ok .ic { color: var(--ok); } .li.crit { color: var(--crit); } .li.crit .ic { color: var(--crit); }
.li.warn .li-r { color: var(--warn); font-weight: 600; } .li.warn .ic { color: var(--warn); }
.li-r { margin-left: auto; color: var(--muted); }

/* clickable tiles / rows → app detail */
.tile.clickable { cursor: pointer; }
.clickrow { cursor: pointer; }
.clickrow:hover td { background: #f8fafc; }

/* app detail: logs + key/value + timeline */
.detail-head .pill { margin: 0; }
.logbox {
  background: #0f172a; color: #e2e8f0; margin: 0 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.55; padding: 12px 14px;
  border-radius: 9px; overflow: auto; max-height: 280px; white-space: pre;
}
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 5px 0; color: var(--muted); border-bottom: 1px solid #f1f5f9; }
.kv:last-of-type { border-bottom: none; }
.kv b { color: var(--ink); font-weight: 600; }
.kv code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-size: 11px; color: var(--ink); max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-sec a { color: var(--accent); text-decoration: none; }
.panel-sec a:hover { text-decoration: underline; }

@media (max-width: 720px) { .charts, .cols { grid-template-columns: 1fr; } }

@media (max-width: 640px) { .server-head { flex-wrap: wrap; } .server-head .badges { margin-left: 0; width: 100%; } }

/* Cockpit-link op serverdetail */
.cockpitlink { margin-left: 10px; background: var(--accent); color: #fff; border-radius: 8px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cockpitlink:hover { filter: brightness(1.08); }

/* ── shell + left sidebar (auth / user-management) ── */
.shell { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar { width: 210px; flex: none; background: #0f172a; color: #cbd5e1;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar .sb-brand { display: flex; align-items: center; gap: 9px; padding: 16px 18px;
  font-weight: 700; color: #fff; font-size: 15px; letter-spacing: .3px; }
.sidebar .sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.sidebar .sb-item { display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; color: #cbd5e1; font: inherit; font-size: 13.5px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; text-align: left; }
.sidebar .sb-item:hover { background: #1e293b; color: #fff; }
.sidebar .sb-item.active { background: var(--accent); color: #fff; }
.sidebar .sb-item .ic { width: 1.05em; height: 1.05em; }
.sidebar .sb-user { margin-top: auto; padding: 14px 16px; border-top: 1px solid #1e293b; font-size: 12px; }
.sidebar .sb-u-name { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .sb-u-meta { color: #94a3b8; margin: 3px 0 10px; }
.sidebar .sb-logout { display: flex; align-items: center; gap: 7px; width: 100%; justify-content: center;
  background: #1e293b; border: 0; color: #cbd5e1; font: inherit; font-size: 12.5px; padding: 8px;
  border-radius: 8px; cursor: pointer; }
.sidebar .sb-logout:hover { background: #334155; color: #fff; }
.main { flex: 1; min-width: 0; }

/* ── login / first-run ── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: #f1f5f9; }
.login-card { width: 100%; max-width: 360px; background: #fff; border-radius: 14px;
  box-shadow: 0 10px 40px rgba(15,23,42,.12); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-brand strong { font-size: 16px; }
.login-sub { color: var(--muted); font-size: 12.5px; }
.login-hint { color: var(--muted); font-size: 12.5px; margin: 0; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: #334155; }
.login-card input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; }
.login-card input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.login-note { color: var(--muted); font-size: 11.5px; margin-top: -6px; }
.login-err { background: var(--crit-bg); color: #991b1b; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; }
.login-card button { margin-top: 6px; background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 11px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.login-card button:disabled { opacity: .6; cursor: default; }

@media (max-width: 640px) {
  .shell { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .sidebar .sb-nav { flex-direction: row; }
  .sidebar .sb-user { margin: 0 0 0 auto; border: 0; padding: 8px 14px; }
  .sidebar .sb-u-meta { display: none; }
}

/* ── fase 3: user-management + account ── */
.page { max-width: 900px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-h { font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.page-head .page-h { margin: 0; }
.muted { color: var(--muted); }
.login-ok { background: var(--ok-bg); color: #166534; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; }
.login-link { background: none; border: 0; color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; padding: 2px; text-align: center; }

.btn-primary { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 9px 14px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
  font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.btn:hover { background: #f1f5f9; }
.btn.sm, .btn-primary.sm { padding: 5px 10px; font-size: 12px; }
.btn.danger { color: var(--crit); border-color: #fecaca; }
.btn.danger:hover { background: var(--crit-bg); }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }

.card-sec { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.card-sec h3 { margin: 0 0 12px; font-size: 15px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label, .frm-row label, .mini { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: #334155; }
.stack input, .frm-row input, .mini select, .stack select {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.stack input:focus, .frm-row input:focus, .mini select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.frm-row { display: flex; gap: 12px; }
.frm-row > label { flex: 1; }
.acc-meta { font-size: 13.5px; line-height: 1.6; }

.srvpick { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line);
  border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; background: #fff; color: var(--muted); }
.chip-check.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-check input { accent-color: #fff; }

.ulist { display: flex; flex-direction: column; gap: 12px; }
.urow { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.urow-view { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.urow-tag { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #eef2ff; color: #3730a3; }
.urow-edit { flex: 1 1 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; }
.urow-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.urow-id { display: flex; flex-direction: column; }
.urow-id .muted { font-size: 12px; }
.ustatus { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; }
.ustatus.active { background: var(--ok-bg); color: #166534; }
.ustatus.invited { background: var(--warn-bg); color: #92400e; }
.ustatus.disabled { background: #e2e8f0; color: #475569; }
.urow-ctl { display: flex; flex-direction: column; gap: 8px; }
.urow-ctl .mini { flex-direction: row; align-items: center; gap: 6px; font-size: 11.5px; }
.urow-ctl .mini select { padding: 5px 8px; font-size: 12.5px; }
.urow-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* mobile (iPhone etc.) — stack the user rows + forms */
@media (max-width: 720px) {
  .urow { grid-template-columns: 1fr; gap: 10px; }
  .urow-act { justify-content: flex-start; }
  .frm-row { flex-direction: column; }
  .wrap { padding: 16px; }
}

/* gear button next to the user (Account) */
.sidebar .sb-u-top { display: flex; align-items: flex-start; gap: 8px; }
.sidebar .sb-u-info { min-width: 0; flex: 1; }
.sidebar .sb-u-info .sb-u-meta { margin: 3px 0 0; }
.sidebar .sb-gear { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 0; cursor: pointer;
  background: #1e293b; color: #cbd5e1; display: inline-flex; align-items: center; justify-content: center; }
.sidebar .sb-gear:hover { background: #334155; color: #fff; }
.sidebar .sb-gear.active { background: var(--accent); color: #fff; }
.sidebar .sb-gear .ic { width: 17px; height: 17px; }
.sidebar .sb-user .sb-logout { margin-top: 10px; }

/* fase 4: passkeys */
.pk-login { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 7px; }
.pk-list { display: flex; flex-direction: column; gap: 8px; }
.pk-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.pk-item .ic { color: var(--accent); vertical-align: -0.15em; }

/* login-card button hierarchy: primary = Inloggen; passkey = secondary; forgot = text link */
.login-card .pk-login { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.login-card .pk-login:hover { background: #eff6ff; }
.login-card .login-link { background: none; border: 0; color: var(--accent); font-weight: 600; padding: 4px; }
.login-card .login-link:hover { text-decoration: underline; }

/* row layout tweaks for kebab pattern */
.urow-main { flex: 1 1 220px; }
.urow > .urow-act { margin-left: auto; }

/* kebab row-actions dropdown */
.rowact { position: relative; display: inline-block; }
.kebab { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--card);
  cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.kebab:hover { background: #f1f5f9; color: var(--ink); }
.rowact-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 180px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(15,23,42,.16); padding: 5px; }
.rowact-item { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; font-size: 13px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--ink); }
.rowact-item:hover { background: #f1f5f9; }
.rowact-item.danger { color: var(--crit); }
.rowact-item.danger:hover { background: var(--crit-bg); }

/* modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center;
  justify-content: center; z-index: 100; padding: 20px; }
.modal { background: var(--card); border-radius: 14px; box-shadow: 0 20px 60px rgba(15,23,42,.3); width: 100%;
  max-width: 480px; max-height: 90vh; overflow: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-x { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 6px; }
.modal-x:hover { background: #f1f5f9; color: var(--ink); }
.modal-body { padding: 20px; }

/* toasts */
.toasts { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.toast { padding: 11px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 24px rgba(15,23,42,.18);
  background: #0f172a; color: #fff; animation: toastin .18s ease-out; }
.toast.ok { background: #16a34a; } .toast.err { background: var(--crit); } .toast.info { background: #0f172a; }
@keyframes toastin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* pip-packages list (read-only) */
.piptable { display: flex; flex-direction: column; gap: 4px; }
.piprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.piprow:last-child { border-bottom: 0; }
.pipname { font-weight: 600; }
.pipver code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 11px; }

/* ── Systeemstatus (System-menu): tabs + logbox + tabellen ── */
.sysstat .sub { color: var(--muted); margin: 2px 0 16px; }
.systabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.systab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: 14px; border: none; background: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.systab:hover { color: var(--ink); }
.systab.on { color: var(--accent); border-bottom-color: var(--accent); }
.systab svg { width: 16px; height: 16px; }
.systoolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; flex-wrap: wrap;
  color: var(--muted); font-size: 13px; }
.systoolbar select { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.logbox { max-height: 56vh; overflow: auto; margin: 0; padding: 12px 14px; border-radius: 10px;
  background: #0f172a; color: #cbd5e1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.emptybox { text-align: center; color: var(--muted); padding: 44px 0; }
.emptybox svg { width: 34px; height: 34px; opacity: .45; }
.emptybox b { display: block; margin-top: 8px; color: var(--ink); font-weight: 600; }
.sysrow { display: flex; gap: 14px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.sysrow .ts { color: var(--muted); min-width: 152px; font-variant-numeric: tabular-nums; }
.sysrow .who { min-width: 190px; }
.sysrow .act { font-weight: 600; min-width: 160px; }
.sysrow .act.warn { color: var(--warn); }
.statgrid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.statcell { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.statcell .v { font-size: 18px; font-weight: 700; }
.statcell .l { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* App-restart-knop op de app-detailpagina (admin-only, inline-bevestiging) */
.restartbtn { margin-left: 10px; display: inline-flex; align-items: center; gap: 5px;
  background: var(--card); color: var(--muted); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.restartbtn:hover { color: var(--ink); border-color: var(--muted); }
.restartbtn svg { width: 14px; height: 14px; }
.restartconfirm { margin-left: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.btn-danger { background: var(--crit); color: #fff; border: 0; border-radius: 8px; padding: 4px 12px; cursor: pointer; font: inherit; font-weight: 600; }
.btn-danger:disabled { opacity: .6; cursor: default; }
.btn-plain { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; text-decoration: underline; }

/* Onderhoudsmodus-banner (alert-mails gepauzeerd tijdens patchen) */
.maintbar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 8px 14px; border-radius: 10px;
  background: #fff7ed; color: #9a3412; border: 1px solid #fdba74;
  font-size: 14px; font-weight: 600;
}
.maintbar svg { width: 16px; height: 16px; }
.maintbar .btn-plain { margin-left: auto; color: #9a3412; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .maintbar { background: #3b2410; color: #fdba74; border-color: #7c3d12; }
  :root:not([data-theme="light"]) .maintbar .btn-plain { color: #fdba74; }
}

/* Klaar voor live (stap 4a) */
.relintro { font-size: 12.5px; margin: -6px 0 16px; max-width: 820px; }
.relgroup .server-head .badges { align-items: center; }
.reltablewrap { overflow-x: auto; padding: 4px 12px 8px; }
.reltable td { vertical-align: top; }
.reltable .unitsub { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.reltable code { font-size: 11.5px; }
.relsha a { color: var(--ink); text-decoration: none; }
.relsha a:hover { text-decoration: underline; }
.relchev { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--muted); transition: transform .15s; }
.relchev.open { transform: rotate(90deg); }
.relcounts { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.relgate { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.relgate .ic { width: 15px; height: 15px; }
.relgate.ok { color: var(--ok); } .relgate.warn { color: var(--warn); } .relgate.crit { color: var(--crit); }
.relstatus { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: #f1f5f9; color: var(--muted); white-space: nowrap; }
.relstatus.ok { background: var(--ok-bg); color: #166534; }
.relstatus.go { background: #dbeafe; color: #1e40af; }
.relstatus.warn { background: var(--warn-bg); color: #92400e; }
.relstatus.crit { background: var(--crit-bg); color: #991b1b; }
.relact { white-space: nowrap; text-align: right; }
.relact > * { margin-left: 6px; }
.btn-plain.sm { font-size: 12px; }
a.btn-plain { color: var(--accent); }
.relcommits td { background: #f8fafc; padding: 6px 12px 10px 30px; }
.relcommit { display: flex; gap: 8px; align-items: baseline; font-size: 12px; padding: 2px 0; }
.relcommit a { color: var(--muted); }
.relkind { flex: none; width: 74px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.relcommit.k-own .relkind { color: #92400e; }
.relcommit.k-maint { opacity: .65; }
.relreview { border-top: 1px solid var(--line); padding: 10px 20px 14px; }
.relreview h4 { display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; font-size: 12.5px; }
.relreview .li { flex-wrap: wrap; }
.relreview .li a { font-weight: 600; color: var(--ink); }
.relreview .li.crit a { color: var(--crit); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .relstatus { background: #1e293b; }
  :root:not([data-theme="light"]) .relstatus.go { background: #1e3a8a; color: #bfdbfe; }
  :root:not([data-theme="light"]) .relcommits td { background: rgba(148,163,184,.08); }
}
:root[data-theme="dark"] .relstatus { background: #1e293b; }
:root[data-theme="dark"] .relstatus.go { background: #1e3a8a; color: #bfdbfe; }
:root[data-theme="dark"] .relcommits td { background: rgba(148,163,184,.08); }
.relsha { white-space: nowrap; }
.relsha .unitsub { white-space: normal; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--card); }
/* Klaar-voor-live-badge op server-schermen */
.relbadge { border: 0; font-family: inherit; cursor: pointer; }
.relbadge:hover { filter: brightness(.96); text-decoration: underline; }
.badge.go { background: #dbeafe; color: #1e40af; }
.relfocus { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge.go { background: #1e3a8a; color: #bfdbfe; }
}
:root[data-theme="dark"] .badge.go { background: #1e3a8a; color: #bfdbfe; }
.relsec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 0; }
.relsec > a { color: var(--ink); }
.relsec-stuck { color: var(--warn); font-size: 12px; }
.relsec-stuck a { color: inherit; }