@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap');

:root {
  --cream:        #f6f4f0;
  --cream-dark:   #ede9e2;
  --navy:         #0E2A5E;
  --navy-mid:     #183470;
  --silver:       #A8ABB5;
  --silver-light: #C4C7D0;
  --ink:          #0a0c12;
  --ink-mid:      rgba(10,12,18,0.50);
  --ink-faint:    rgba(10,12,18,0.28);
  --border:       rgba(14,42,94,0.10);
  --border-mid:   rgba(14,42,94,0.18);
  --green:        #107a4a;
  --green-soft:   rgba(16,122,74,0.10);
  --red:          #c0392b;
  --red-soft:     rgba(192,57,43,0.10);
  --orange:       #b85c00;
  --shadow:       0 1px 0 rgba(255,255,255,0.9) inset, 0 4px 24px rgba(14,42,94,0.07);
  --shadow-lift:  0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 32px rgba(14,42,94,0.12);
  --radius:       16px;
  --ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font: 14px/1.55 'Geist', -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--ink-mid); }
.small-text { font-size: 12px; font-weight: 400; }
code {
  background: var(--cream-dark);
  border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 6px; font-size: 12px;
}
::selection { background: rgba(14,42,94,0.12); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- login ---------- */
.login-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
  background: #091c40;
}
.login-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(168,171,181,0.28);
  border-radius: 20px;
  padding: 48px 40px;
  width: 340px;
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
  animation: popIn .5s var(--ease);
}
.login-card .logo {
  font-size: 32px; font-weight: 700; letter-spacing: -.03em;
  color: #fff; margin-bottom: 0; line-height: 1;
}
.login-card .logo span { color: #A8ABB5; }
.login-card p { color: rgba(255,255,255,0.40); font-size: 13px; margin-bottom: 18px; }
.login-card input {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(168,171,181,0.35);
  color: #fff;
  padding: 12px 16px; border-radius: 10px;
  font-size: 15px; font-family: inherit;
  transition: border-color .15s;
}
.login-card input::placeholder { color: rgba(255,255,255,0.35); }
.login-card input:focus {
  outline: none;
  border-color: #A8ABB5;
}
.error-text { color: #e05252; font-size: 12px; }
.login-card .btn.primary {
  background: #A8ABB5;
  border-color: #A8ABB5;
  color: #091c40;
  box-shadow: none;
}
.login-card .btn.primary:hover {
  background: #C4C7D0;
  border-color: #C4C7D0;
  box-shadow: none;
}

/* ---------- layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 256px;
  background: var(--navy);
  padding: 28px 16px;
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
}
.site-list { flex: 1; overflow-y: auto; }
.sidebar-bottom { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.logo {
  font-size: 18px; font-weight: 800; letter-spacing: -.03em;
  display: flex; align-items: center; gap: 8px;
  justify-content: center; padding-bottom: 12px;
  color: var(--cream);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 4px;
}
.logo span { color: var(--silver-light); }
.main {
  flex: 1; padding: 32px 42px 60px;
  max-width: 1200px;
}

.site-list {
  display: flex; flex-direction: column; gap: 3px;
  flex: 1; overflow-y: auto;
}
.site-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 11px;
  cursor: pointer; border: none;
  background: none;
  color: rgba(255,255,255,0.65);
  font: 500 13.5px/1.4 inherit; font-family: inherit;
  text-align: left; width: 100%;
  transition: background .2s, color .2s, transform .15s var(--ease);
}
.site-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  transform: translateX(2px);
}
.site-item.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 600;
}
.site-item .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(16,122,74,0.3);
}
.site-item .dot.down {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.25);
}
.site-item .dot.unknown { background: var(--silver); box-shadow: none; }
.site-item .meta {
  margin-left: auto; font-size: 11px;
  color: rgba(255,255,255,0.35);
  display: flex; gap: 5px; align-items: center;
}
.site-item .err-badge {
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 10px; padding: 1px 6px;
}

/* ---------- knoppen ---------- */
.btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  padding: 9px 18px; border-radius: 11px;
  cursor: pointer;
  font: 600 13px/1.4 inherit; font-family: inherit;
  transition: transform .18s var(--ease), box-shadow .18s, background .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--border-mid); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 4px 14px rgba(14,42,94,0.25);
}
.btn.primary:hover {
  background: var(--navy-mid);
  box-shadow: 0 6px 20px rgba(14,42,94,0.35);
}
.btn.ghost {
  background: none;
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
}
.btn.ghost:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  box-shadow: none;
}
.btn.danger {
  background: var(--red);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(192,57,43,0.25);
}
.btn.full { width: 100%; }
.btn.small { font-size: 12px; padding: 6px 13px; }

/* ---------- header ---------- */
.site-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 20px;
  gap: 16px; flex-wrap: wrap;
  animation: fadeUp .4s var(--ease);
}
.site-header h1 {
  font-size: 26px; font-weight: 800; letter-spacing: -.03em;
  color: var(--navy);
}
.site-header a {
  color: var(--ink-mid); text-decoration: none;
  transition: color .2s;
}
.site-header a:hover { color: var(--navy); }
.header-right { display: flex; align-items: center; gap: 12px; }
.live-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--border);
  padding: 8px 16px; border-radius: 999px; font-size: 13px;
  box-shadow: var(--shadow);
}
.pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,122,74,0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(16,122,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,122,74,0); }
}
.range-select {
  background: #fff; border: 1px solid var(--border);
  color: var(--ink); padding: 8px 12px; border-radius: 11px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s;
}
.range-select:hover { border-color: var(--border-mid); }
.range-select:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(14,42,94,0.08);
}

/* ---------- tabs ---------- */
.tabs {
  display: flex; gap: 2px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 13px; padding: 5px;
  margin-bottom: 24px; width: fit-content;
  max-width: 100%; flex-wrap: wrap;
  box-shadow: var(--shadow);
  animation: fadeUp .45s var(--ease);
}
.tab {
  background: none; border: none;
  color: var(--ink-mid);
  padding: 8px 16px; cursor: pointer;
  font: 600 13.5px/1.4 inherit; font-family: inherit;
  border-radius: 9px;
  transition: background .25s var(--ease), color .25s, box-shadow .25s;
}
.tab:hover { color: var(--ink); background: var(--cream); }
.tab.active {
  color: #fff;
  background: var(--navy);
  box-shadow: 0 3px 10px rgba(14,42,94,0.25);
}
.badge {
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700;
  border-radius: 10px; padding: 1px 7px; margin-left: 4px;
}
.tab.active .badge { background: rgba(255,255,255,0.25); }
.tab-panel { animation: fadeUp .4s var(--ease); }

/* ---------- kaarten & kpi's ---------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 20px;
  box-shadow: var(--shadow);
  transition: box-shadow .3s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lift); }
.card h3 {
  font-size: 14px; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: 16px;
  color: var(--navy); text-transform: uppercase;
  letter-spacing: .04em; font-size: 11px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .main { padding: 20px; }
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.kpi {
  background: #fff; border: 1px solid var(--border);
  border-top: 3px solid var(--border-mid);
  border-radius: var(--radius); padding: 20px 22px;
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  animation: fadeUp .45s var(--ease) backwards;
  position: relative; overflow: hidden;
}
.kpi:nth-child(2) { animation-delay: .05s; }
.kpi:nth-child(3) { animation-delay: .1s; }
.kpi:nth-child(4) { animation-delay: .15s; }
.kpi:nth-child(5) { animation-delay: .2s; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.kpi.kpi-green { border-top-color: var(--green); }
.kpi.kpi-red   { border-top-color: var(--red); }
.kpi.kpi-navy  { border-top-color: var(--navy); }
.kpi .label {
  font-size: 11px; font-weight: 700;
  color: var(--ink-faint); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .06em;
}
.kpi .value {
  font-size: 28px; font-weight: 800; letter-spacing: -.03em;
  color: var(--navy);
}
.kpi .value.green { color: var(--green); }
.kpi .value.red   { color: var(--red); }
.kpi .kpi-sub {
  font-size: 11px; color: var(--ink-faint);
  margin-top: 5px; font-weight: 500;
}

.chart-box { position: relative; height: 280px; }
.chart-box.small { height: 220px; }

/* ---------- tabellen ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table td, .table th {
  padding: 9px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.table th {
  color: var(--ink-faint); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.table tr:last-child td { border-bottom: none; }
.table tr { transition: background .15s; }
.table tr:hover td { background: var(--cream); }
.table td.num {
  text-align: right; color: var(--ink-mid);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.table .bar {
  display: block; height: 3px;
  background: var(--navy); border-radius: 2px;
  margin-top: 5px; opacity: .2;
  transition: width .6s var(--ease);
}

/* ---------- errors ---------- */
.error-item {
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 12px; padding: 16px 18px;
  margin-bottom: 12px; background: #fff;
  transition: box-shadow .25s var(--ease), opacity .3s;
  animation: fadeUp .35s var(--ease) backwards;
}
.error-item:hover { box-shadow: var(--shadow); }
.error-item.resolved { opacity: .6; border-left-color: var(--green); }
.error-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.error-msg { font-weight: 600; color: var(--red); word-break: break-word; }
.error-item.resolved .error-msg { color: var(--ink-mid); }
.error-meta { font-size: 12px; color: var(--ink-mid); margin-top: 6px; }
.error-stack {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  font: 12px/1.6 ui-monospace, "SF Mono", monospace;
  margin-top: 12px; white-space: pre-wrap;
  word-break: break-all; color: var(--ink-mid);
  max-height: 180px; overflow-y: auto;
}
.error-actions { display: flex; gap: 8px; flex-shrink: 0; }
.status-pill {
  font-size: 11px; padding: 2px 10px;
  border-radius: 999px; font-weight: 700;
}
.status-pill.open { background: var(--red-soft); color: var(--red); }
.status-pill.resolved { background: var(--green-soft); color: var(--green); }

/* ---------- uptime ---------- */
.uptime-blocks { display: flex; flex-wrap: wrap; gap: 3px; }
.uptime-blocks span {
  width: 10px; height: 28px; border-radius: 3px;
  background: var(--green); opacity: .7;
  transition: transform .15s var(--ease), opacity .15s;
}
.uptime-blocks span.down { background: var(--red); }
.uptime-blocks span:hover { transform: scaleY(1.15); opacity: 1; }

/* ---------- installatie ---------- */
.code-block {
  background: var(--navy); color: var(--cream-dark);
  border-radius: 12px; padding: 16px 18px;
  font: 12.5px/1.7 ui-monospace, "SF Mono", monospace;
  overflow-x: auto; margin: 12px 0;
  white-space: pre-wrap; word-break: break-all;
}
.danger-zone { border-color: rgba(192,57,43,0.25); }

/* ---------- modal & lege staat ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(14,42,94,0.25);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; animation: fadeUp .2s ease;
}
.modal {
  background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 30px;
  width: 390px; max-width: calc(100vw - 40px);
  display: flex; flex-direction: column; gap: 15px;
  box-shadow: var(--shadow-lift);
  animation: popIn .35s var(--ease);
}
.modal h3 {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  color: var(--navy);
}
.modal label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.modal input {
  background: var(--cream); border: 1.5px solid var(--border);
  color: var(--ink); padding: 10px 13px; border-radius: 11px;
  font-size: 14px; font-family: inherit; font-weight: 400;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.modal input:focus {
  outline: none; border-color: var(--navy);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(14,42,94,0.08);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

.empty-state {
  text-align: center; padding: 100px 20px;
  display: flex; flex-direction: column; gap: 16px;
  align-items: center; animation: fadeUp .5s var(--ease);
}
.empty-state h2 {
  font-size: 26px; font-weight: 800; letter-spacing: -.03em;
  color: var(--navy);
}
.empty-state p { color: var(--ink-mid); }

/* ---- Agent tab ---- */
.agent-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.agent-header h3 { margin: 0; }

.agent-log-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.agent-log-item:last-child { border-bottom: none; }
.agent-log-item.has-action { background: var(--red-soft); margin: 0 -20px; padding: 14px 20px; border-radius: 10px; border: none; margin-bottom: 6px; }

.agent-log-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px;
}
.agent-action {
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 20px; text-transform: uppercase;
  background: var(--green-soft); color: var(--green);
}
.agent-action.notify, .agent-action.redeploy {
  background: var(--red-soft); color: var(--red);
}
.agent-severity {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 20px; background: var(--cream-dark);
}
.sev-high { background: var(--red-soft); color: var(--red); }
.sev-medium { background: rgba(184,92,0,.1); color: var(--orange); }

.agent-reason {
  font-size: 14px; font-weight: 500; color: var(--ink); flex: 1;
}
.agent-ts { font-size: 12px; white-space: nowrap; }
.agent-log-meta { font-size: 12px; margin-top: 2px; }

/* ---- Klanten-paneel ---- */
.client-card {
  margin-bottom: 16px;
}
.client-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.client-name { font-size: 16px; font-weight: 700; color: var(--navy); }
.client-email { font-size: 13px; margin-top: 2px; }
.client-actions { display: flex; gap: 8px; }
.client-sites { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.client-site-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.client-site-item a { margin-left: auto; }
.online-count { font-size: 11px; color: var(--silver); }

/* ---- Guard-banner & incidenten ---- */
.guard-banner {
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px; padding: 12px 18px; margin-bottom: 18px;
  font-size: 13px; font-weight: 600;
  animation: fadeUp .4s var(--ease);
}
.guard-banner.ok { background: var(--green-soft); color: var(--green); border: 1px solid rgba(16,122,74,0.2); }
.guard-banner.bad { background: var(--red-soft); color: var(--red); border: 1px solid rgba(192,57,43,0.25); }

.incident-item {
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: 12px; padding: 0;
  margin-bottom: 10px; background: #fff;
  overflow: hidden;
}
.incident-item.critical { border-left-color: var(--red); }
.incident-item.resolved { opacity: .65; border-left-color: var(--green); }
.incident-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px; cursor: pointer;
  transition: background .15s;
}
.incident-top:hover { background: var(--cream); }
.incident-kind {
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 20px;
  background: var(--cream-dark); color: var(--ink-mid); text-transform: uppercase;
}
.incident-item.critical .incident-kind { background: var(--red-soft); color: var(--red); }
.incident-title { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 160px; }
.incident-timeline {
  border-top: 1px solid var(--border);
  background: var(--cream);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 7px;
}
.tl-row { display: flex; gap: 12px; font-size: 12.5px; line-height: 1.5; }
.tl-ts { color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

.vercel-row { display: flex; gap: 10px; margin-top: 10px; }
.vercel-row input {
  flex: 1; background: var(--cream); border: 1.5px solid var(--border);
  color: var(--ink); padding: 9px 13px; border-radius: 11px;
  font-size: 13px; font-family: inherit;
}
.vercel-row input:focus { outline: none; border-color: var(--navy); background: #fff; }

/* ---- Sidebar groepen ---- */
.site-group { margin-bottom: 4px; }
.site-group-header {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  padding: 7px 10px; border-radius: 8px;
  color: rgba(255,255,255,0.55); font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background .15s, color .15s;
}
.site-group-header:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); }
.group-arrow {
  font-size: 8px; transition: transform .2s;
  display: inline-block; transform: rotate(0deg);
}
.group-arrow.open { transform: rotate(90deg); }
.group-name { flex: 1; text-align: left; }
.group-count {
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6);
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
}
.site-group-items { padding-left: 8px; }
.site-group-items.hidden { display: none; }