:root {
  color-scheme: light dark;
  --bg: #eef1f4;
  --surface: #ffffff;
  --text: #1b1e23;
  --muted: #5d6670;
  --line: #d5dbe2;
  --accent: #1d4e73;
  --accent-soft: #e7f0f6;
  --critical: #8c2f2f;
  --high: #8a4e16;
  --medium: #6d5b14;
  --low: #3e4c5a;
  --ok: #1f6b45;
  --warn: #8a4e16;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181c;
    --surface: #1e242b;
    --text: #e6ebf1;
    --muted: #a8b2bc;
    --line: #323a44;
    --accent: #9ec3e2;
    --accent-soft: #243443;
    --critical: #e0a0a0;
    --high: #e2b48a;
    --medium: #d7c98a;
    --low: #b7c3ce;
    --ok: #8fceb0;
    --warn: #e2b48a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.45 "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--accent); }

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand { font-weight: 650; text-decoration: none; }

nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }

nav a { text-decoration: none; }

nav a[aria-current="page"] { text-decoration: underline; }

main { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }

h1 { font-size: 1.7rem; margin: 0 0 0.4rem; }

h2 { font-size: 1.15rem; margin: 0 0 0.7rem; }

h3 { font-size: 1.02rem; margin: 0 0 0.35rem; }

.panel { margin: 1.5rem 0; }

.stats, .cards, .today-stats, .action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}

.action-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.stat, .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.95rem 1.05rem;
}

.stat-value { font-size: 1.55rem; margin: 0; font-weight: 650; }

.stat-label, .meta, .priority { color: var(--muted); margin: 0.2rem 0 0; font-size: 0.9rem; }

.priority-critical { border-color: var(--critical); border-left-width: 4px; }
.priority-high { border-color: var(--high); border-left-width: 4px; }
.priority-medium { border-color: var(--medium); border-left-width: 4px; }
.priority-low { border-color: var(--low); border-left-width: 4px; }

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; background: var(--surface); }

th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; }

.filters, .actions-form, .decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.8rem;
  align-items: end;
  margin: 0.4rem 0 0.2rem;
}

.decision-actions { margin-top: 0.85rem; }

label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; color: var(--muted); }

input, select, button, .button-link {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
}

button, .button-link { cursor: pointer; text-decoration: none; display: inline-block; }

button.primary, .button-link {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  button.primary, .button-link {
    color: #102030;
  }
}

.action-row { margin: 0.75rem 0 0; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; }

.facts div { margin: 0; }

dt { color: var(--muted); font-size: 0.85rem; }

dd { margin: 0.15rem 0 0; }

.empty, .lede { color: var(--muted); }

.lede { margin: 0 0 1rem; max-width: 46rem; }

.banner {
  background: var(--surface);
  border: 1px solid var(--critical);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.ready {
  font-weight: 650;
  color: var(--ok);
  margin: 0.6rem 0 0;
}

.actions { padding-left: 1.2rem; }

.crumb { margin: 0 0 0.4rem; }

.status-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.status-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  display: inline-flex;
  gap: 0.45rem;
  align-items: baseline;
}

.status-label { color: var(--muted); font-size: 0.85rem; }

.status-value { font-weight: 600; font-size: 0.92rem; text-transform: lowercase; }

.status-healthy .status-value,
.status-ok .status-value { color: var(--ok); }

.status-degraded .status-value,
.status-unconfigured .status-value,
.status-disabled .status-value { color: var(--warn); }

.status-unhealthy .status-value,
.status-critical .status-value { color: var(--critical); }

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.activity-list li {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  justify-content: space-between;
}

.activity-list li:last-child { border-bottom: 0; }

.audit-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.audit-panel summary {
  cursor: pointer;
  font-weight: 600;
}

.login-wrap {
  max-width: 28rem;
  margin: 3rem auto;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
}

.login-form button { align-self: flex-start; }

.auth-actions { margin-left: auto; }