/* ============================================================
   Operio — Design System (webapp)
   Eén centrale set design-tokens + herbruikbare UI-klassen.
   Geladen vóór de inline <style> in index.html, zodat specifieke
   schermregels desgewenst nog kunnen overschrijven.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ── Oppervlakken (rustige slate-dark, modern SaaS) ── */
  --bg:     #0f1115;
  --bg2:    #161922;
  --bg3:    #202531;
  --card:   #181b23;
  --border: #2a2f3a;

  /* ── Merk + status ── */
  --red:    #1f74ff;   /* primaire actie / merk */
  --red2:   #e74c3c;   /* actief/hover accent */
  --gold:   #5b9dff;
  --green:  #2ecc71;   /* succes */
  --orange: #e67e22;   /* waarschuwing */
  --blue:   #3498db;   /* info */
  --purple: #8e44ad;

  /* ── Tekst (duidelijke hiërarchie, goede leesbaarheid) ── */
  --text:   #f3f5f9;
  --text2:  #aeb6c4;
  --text3:  #7e8796;

  /* ── Vorm & diepte ── */
  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 4px 20px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);

  /* ── Spacing-schaal ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
}

/* ── Status badges (herbruikbaar) ──────────────────────── */
.ds-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1;
  border: 1px solid transparent;
}
.ds-badge--ok    { background: rgba(46,204,113,0.14); color: #4ade80; border-color: rgba(46,204,113,0.30); }
.ds-badge--warn  { background: rgba(230,126,34,0.14); color: #f6ad55; border-color: rgba(230,126,34,0.30); }
.ds-badge--info  { background: rgba(52,152,219,0.14); color: #63b3ed; border-color: rgba(52,152,219,0.30); }
.ds-badge--danger{ background: rgba(231,76,60,0.14);  color: #fc8181; border-color: rgba(231,76,60,0.30); }
.ds-badge--muted { background: rgba(126,135,150,0.14);color: var(--text2); border-color: var(--border); }

/* ── Lege staat (geen data) ────────────────────────────── */
.ds-empty {
  text-align: center; color: var(--text3);
  padding: 48px 20px; font-size: 14px;
}
.ds-empty .ds-empty__icon { font-size: 40px; display: block; margin-bottom: 12px; opacity: 0.7; }

/* ── Touch-vriendelijke knoppen (min. 44px hoog) ───────── */
.ds-btn {
  min-height: 48px; border: none; border-radius: var(--radius-sm);
  font-size: 16px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.15s, transform 0.1s;
}
.ds-btn:active { transform: scale(0.98); }
.ds-btn--primary   { background: var(--red);  color: #fff; }
.ds-btn--secondary { background: var(--bg3);  color: var(--text); border: 1px solid var(--border); }
.ds-btn--danger    { background: var(--red2); color: #fff; }
.ds-btn:hover { filter: brightness(1.08); }

/* ── Hulpklassen ───────────────────────────────────────── */
.ds-muted { color: var(--text2); }
.ds-faint { color: var(--text3); }