/*
 * ═══════════════════════════════════════════════════════════════
 * Sentinel — Swiss Minimal · Gray Edition  (v2)
 * ═══════════════════════════════════════════════════════════════
 * Midtoon koel grijs — geen wit, geen donker.
 * Leesbaar als krantenpapier, strak als een jaarverslag.
 *
 * Testgebruik in index.html (NA de bestaande </style> tag):
 *   <link rel="stylesheet" href="/themes/swiss-minimal.css">
 * ═══════════════════════════════════════════════════════════════
 */

/* ── 1. Design Tokens ─────────────────────────────────────────── */
:root {
  /* Achtergronden — warme koel-grijstinten, nooit wit */
  --bg:        #dde0e6;   /* paginagrond: medium koelgrijs */
  --bg-s:      #e8eaee;   /* cards, sidebar, topbar: iets lichter */
  --bg-e:      #d5d8de;   /* inputs, wells: iets donkerder dan bg */
  --bg-h:      #cfd2d8;   /* hover: duidelijk zichtbaar */

  /* Borders — zichtbaar maar niet zwaar */
  --border:    #b8bec9;
  --border-sub:#c8cdd6;

  /* Typografie — zwart-op-grijs hiërarchie, max leesbaarheid */
  --tx:        #111318;   /* primaire tekst: bijna zwart */
  --tx-2:      #2e3444;   /* secundair */
  --tx-m:      #5a6278;   /* meta / labels */
  --tx-f:      #8c95a8;   /* placeholder / fade */

  /* Accentkleur — corporate blauw */
  --blue:      #1a56db;
  --blue-d:    #dae4fb;   /* iets minder helder op grijze achtergrond */

  /* Status kleuren — iets verzadigd om af te steken op grijs */
  --teal:      #0e7490;
  --teal-d:    #d8f4f9;
  --green:     #0d7a3e;
  --green-d:   #d4f3e5;
  --red:       #b91c1c;
  --red-d:     #fce8e8;
  --yellow:    #92400e;
  --yellow-d:  #fef3cd;

  /* Typografie */
  --font:      'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Radius — subtiel afgerond */
  --r4:        2px;
  --r8:        4px;
  --r12:       6px;
}

/* ── 2. Base ──────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--tx);
}

/* ── 3. Layout ────────────────────────────────────────────────── */
.sidebar {
  background: var(--bg-s);
  border-right: 1px solid var(--border);
}

.topbar {
  background: var(--bg-s);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}

/* ── 4. Sidebar ───────────────────────────────────────────────── */
.sb-logo {
  border-bottom: 1px solid var(--border);
  padding: 14px 16px 12px;
}

.sb-item {
  color: var(--tx-m);
  border-left: 2px solid transparent;
  font-size: 12px;
  font-weight: 500;
}

.sb-item:hover {
  background: var(--bg-h);
  color: var(--tx);
}

.sb-item.active {
  background: var(--blue-d);
  color: var(--blue);
  border-left-color: var(--blue);
  font-weight: 600;
}

/* ── 5. Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-s);
  border: 1px solid var(--border);
  border-radius: var(--r8);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  padding: 18px 20px;
}

/* ── 6. KPI blokken ───────────────────────────────────────────── */
.kpi {
  background: var(--bg-s);
  border: 1px solid var(--border);
  border-radius: var(--r8);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  padding: 16px 18px;
}

.kpi::before {
  height: 3px;
  opacity: .85;
}

.kpi-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx-m);
}

.kpi-val {
  font-size: 26px;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -.02em;
}

/* ── 7. Tabellen ──────────────────────────────────────────────── */
.tbl th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx-m);
  background: var(--bg-s);
  border-bottom: 2px solid var(--border);
  padding: 8px 12px;
}

.tbl td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-sub);
  font-size: 12.5px;
  color: var(--tx-2);
}

.tbl tr:hover td {
  background: var(--bg-h);
}

/* ── 8. Knoppen ───────────────────────────────────────────────── */
.btn {
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r4);
  letter-spacing: .01em;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
}

.btn-primary:hover {
  background: #1748c2;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--tx-2);
}

.btn-ghost:hover {
  background: var(--bg-h);
  border-color: #a0a8b5;
  color: var(--tx);
}

/* ── 9. Form-elementen ────────────────────────────────────────── */
.field input,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: var(--bg-s);
  border: 1px solid var(--border);
  color: var(--tx);
  border-radius: var(--r4);
}

.field input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
  outline: none;
}

/* ── 10. Chips / badges ───────────────────────────────────────── */
.chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 2px;
}

.chip-pos  { background: var(--green-d);  color: var(--green); }
.chip-neg  { background: var(--red-d);    color: var(--red); }
.chip-neu  { background: var(--border);   color: var(--tx-m); }
.chip-mix  { background: var(--yellow-d); color: var(--yellow); }

/* ── 11. Modals ───────────────────────────────────────────────── */
.modal-box,
#jmModal > div,
#globalModal > div {
  background: var(--bg-s);
  border: 1px solid var(--border);
  border-radius: var(--r8);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

/* ── 12. Signals ──────────────────────────────────────────────── */
.signal {
  background: var(--bg-s);
  border: 1px solid var(--border-sub);
  border-radius: var(--r4);
}

.signal.high   { border-left: 3px solid var(--red); }
.signal.medium { border-left: 3px solid var(--yellow); }
.signal.low    { border-left: 3px solid var(--green); }

/* ── 13. Topbar elementen ─────────────────────────────────────── */
.tb-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--tx-2);
  border-radius: var(--r4);
  font-size: 11.5px;
  font-weight: 500;
}

.tb-btn:hover {
  background: var(--bg-h);
  color: var(--tx);
}

.tb-btn.active {
  background: var(--blue-d);
  color: var(--blue);
  border-color: #96b0ee;
}

.tb-live {
  background: var(--green-d);
  color: var(--green);
}

/* ── 14. Login scherm ─────────────────────────────────────────── */
.login-screen {
  background: var(--bg);
}

.login-box {
  background: var(--bg-s);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
}

/* ── 15. Journalist kaarten (auto monitor) ────────────────────── */
.jm-auto-row,
[style*="background:var(--bg-s)"][style*="border:1px solid var(--border)"][style*="border-radius:8px"] {
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ── 16. Scrollbar — grijs thema ──────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #a0a8b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #7c8496; }

/* ── 17. Selectie-kleur ───────────────────────────────────────── */
::selection {
  background: rgba(26,86,219,.18);
  color: var(--tx);
}