/* Capita Platform Monitoring — "Klar"
 * Gleiches Design-System wie die uebrigen Capita Web-Tools (Inter + JetBrains Mono,
 * heller SaaS-Look, Capita-Rot als Akzent), Dark/Light pro Nutzer.
 * Ergaenzt um Status-Farben (gruen/gelb/rot) fuer Uptime / Alarme / Stacks.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@600;700&display=swap');

:root {
  color-scheme: light;
  --bg:#f6f7f9;
  --surface:#ffffff;
  --ink:#191d25;
  --ink-2:#444b59;
  --muted:#7e8696;
  --faint:#aab0bd;
  --border:#e1e4ea;
  --line:#eef0f3;

  --accent:#d2232a;        /* Capita-Rot */
  --accent-dark:#a81b21;
  --accent-soft:#fbe9ea;

  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --radius:12px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(25,29,37,.04), 0 4px 16px -8px rgba(25,29,37,.10);
  --shadow-lg:0 12px 36px -12px rgba(25,29,37,.22), 0 2px 6px rgba(25,29,37,.06);

  /* Status-Rampe */
  --ok:#1f9d6b;     --ok-bg:#e7f6ef;     --ok-ink:#0e6e49;
  --warn:#c9871a;   --warn-bg:#fdf3e2;   --warn-ink:#8a5b06;
  --bad:#d2232a;    --bad-bg:#fbe9ea;    --bad-ink:#a81b21;
  --neutral:#7e8696;--neutral-bg:#eef0f3;

  --hover:#f9fafc;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0f1421;
  --surface:#161d2b;
  --ink:#e8edf5;
  --ink-2:#aeb8c8;
  --muted:#828ea0;
  --faint:#5a6476;
  --border:#28313f;
  --line:#1f2733;

  --accent:#e2474d;
  --accent-dark:#c43a40;
  --accent-soft:#3a1d20;

  --shadow:0 1px 2px rgba(0,0,0,.30), 0 6px 18px -10px rgba(0,0,0,.55);
  --shadow-lg:0 14px 40px -14px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.4);

  --ok:#3fc28a;     --ok-bg:#16302440;   --ok-ink:#5fd6a3;
  --warn:#e0a743;   --warn-bg:#3a2e1640; --warn-ink:#f0c069;
  --bad:#e2474d;    --bad-bg:#3a1d2040;  --bad-ink:#f08a8e;
  --neutral:#828ea0;--neutral-bg:#1f2733;

  --hover:#1c2533;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.hidden { display:none !important; }
.mono { font-family:var(--mono); }
.hint { color:var(--muted); margin:6px 0 14px; font-size:13px; }
.error-text { color:var(--accent); }

/* ---------- Login / Denied ---------- */
.centered { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:44px 48px;
  text-align:center;
  max-width:460px;
}
.login-card p { color:var(--muted); margin:14px 0 26px; }
.login-card code {
  font-family:var(--mono); font-size:12px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:6px; padding:2px 6px;
}

/* ---------- Brand / Header ---------- */
.brand { font-size:18px; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; }
.brand span { font-weight:500; color:var(--faint); }

.env-badge {
  font-family:var(--mono); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  padding:3px 9px; border-radius:8px;
  background:var(--accent-soft); color:var(--accent);
}

#app-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 30px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40;
}
.header-right { display:flex; align-items:center; gap:12px; }
.user-name { color:var(--muted); font-size:13px; }

.data-age {
  font-family:var(--mono); font-size:11.5px;
  padding:5px 10px; border-radius:8px;
  background:var(--bg); color:var(--muted);
  display:inline-flex; align-items:center; gap:7px;
}
.data-age::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); }

/* ---------- Buttons ---------- */
.btn {
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  padding:9px 15px;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  color:var(--ink);
  font-family:inherit;
  transition:background .15s, border-color .15s;
  display:inline-flex; align-items:center; gap:8px;
}
.btn:hover { background:var(--bg); border-color:var(--faint); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.btn-ghost { background:transparent; }
.btn-small { padding:6px 12px; font-size:12.5px; }
.theme-toggle { font-size:15px; line-height:1; padding:7px 10px; }

/* ---------- Layout ---------- */
main { max-width:1320px; margin:0 auto; padding:26px 30px 70px; }
h2 { font-size:16px; font-weight:700; letter-spacing:-.01em; }

.panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:20px 22px;
  margin-bottom:18px;
}
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.muted-count { color:var(--muted); font-size:12px; font-family:var(--mono); }

/* ---------- KPI-Karten ---------- */
.kpis {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:14px;
  margin-bottom:20px;
}
.kpi {
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid var(--neutral);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:16px 18px;
}
.kpi.ok   { border-left-color:var(--ok); }
.kpi.warn { border-left-color:var(--warn); }
.kpi.bad  { border-left-color:var(--bad); }
.kpi-num { font-size:28px; font-weight:800; letter-spacing:-.02em; font-family:var(--mono); }
.kpi.ok .kpi-num   { color:var(--ok); }
.kpi.warn .kpi-num { color:var(--warn); }
.kpi.bad .kpi-num  { color:var(--bad); }
.kpi-label { font-size:12px; color:var(--muted); margin-top:3px; font-weight:600; }

/* ---------- Status-Pills ---------- */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:999px;
  font-family:var(--mono);
}
.pill::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.pill.ok   { background:var(--ok-bg);   color:var(--ok-ink); }
.pill.warn { background:var(--warn-bg); color:var(--warn-ink); }
.pill.bad  { background:var(--bad-bg);  color:var(--bad-ink); }
.pill.neutral { background:var(--neutral-bg); color:var(--muted); }

/* ---------- Daten-Tabellen ---------- */
.data-table { width:100%; border-collapse:collapse; margin-top:8px; }
.data-table th {
  text-align:left;
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700;
  padding:9px 12px;
  border-bottom:1px solid var(--border);
}
.data-table td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover td { background:var(--hover); }
.data-table .num { font-family:var(--mono); text-align:right; }
.data-table a { color:var(--accent); text-decoration:none; }
.data-table a:hover { text-decoration:underline; }
.row-bad td { background:var(--bad-bg); }
.cell-name { font-weight:600; }
.cell-sub { font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.empty-row td { color:var(--muted); text-align:center; padding:18px; font-style:italic; }

/* ---------- Flow-Fehler: gewollte Timeouts (eingeklappt) ---------- */
.flows-timeouts { margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
.flows-timeouts > summary {
  cursor:pointer; font-size:13px; font-weight:600; color:var(--muted);
  list-style:none; display:flex; align-items:center; gap:8px;
}
.flows-timeouts > summary::before { content:"▸"; font-size:11px; }
.flows-timeouts[open] > summary::before { content:"▾"; }
.flows-timeouts .data-table td { color:var(--muted); }

/* ---------- Fokus ---------- */
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }