/* ==========================================================================
   Nieuw ontwerp, naar het designpakket van viralsocials.nl (22 okt 2026)
   --------------------------------------------------------------------------
   Laadt ná app.css. De indeling blijft zoals hij is; dit bestand bepaalt het
   uiterlijk: de merkkleuren, Plus Jakarta Sans, de koele neutrale tinten, de
   rollen voor licht en donker, en de onderdelen die het vaakst in beeld zijn.

   Regels uit het pakket die hier overal gelden:
   - Werk met de rollen (--kleur-*), niet met merkkleuren.
   - Oranje is op licht geen tekstkleur: daar wordt het navy.
   - Een oranje knop heeft navy tekst, in licht én donker.
   - Op donker: nooit wit-transparant over navy, nooit oranje gloed. Tinten
     op donker zijn koel blauw.
   - Licht is de standaard. Donker alleen via de schakelaar (data-thema).
   ========================================================================== */

/* ---------- 1. Lettertype, zelf gehost ---------------------------------- */
@font-face {
  font-family: "VS Jakarta";
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "VS Jakarta";
  src: url("/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Merktokens, één op één uit tokens.css ------------------- */
:root {
  --vs-oranje: #fe751d;
  --vs-oranje-hover: #ff8a3d;
  --vs-navy: #06002e;
  --vs-wit: #ffffff;

  --n-50: #f6f8fb;  --n-100: #eef1f6; --n-200: #dfe4ec; --n-300: #c8cfdb; --n-400: #9aa3b3;
  --n-500: #6b7587; --n-600: #4e5869; --n-700: #363f50; --n-800: #222a38; --n-900: #121826;

  --d-bg: #06002e; --d-vlak-1: #0c1036; --d-vlak-2: #141a42; --d-vlak-3: #1e2550;
  --d-rand: #2c3560; --d-rand-sterk: #414b7a; --d-staal: #34416e;
  --d-tekst-2: #aeb6c8; --d-tekst-3: #8a93a8;

  --font-basis: "VS Jakarta", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-s: 10px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; --radius-pil: 999px;
  --hoek: -7deg; --hoek-klein: -2deg;
  --duur: 180ms;

  /* Rollen: licht */
  --kleur-achtergrond: var(--vs-wit);
  --kleur-vlak: var(--n-50);
  --kleur-vlak-2: var(--n-100);
  --kleur-rand: var(--n-200);
  --kleur-rand-sterk: var(--n-300);
  --kleur-tekst: var(--vs-navy);
  --kleur-tekst-2: var(--n-600);
  --kleur-accent: var(--vs-oranje);
  --kleur-accent-hover: var(--vs-oranje-hover);
  --kleur-op-accent: var(--vs-navy);
  --kleur-accent-tekst: var(--vs-navy);
  --kleur-focus: var(--vs-navy);
  --schaduw: 0 1px 2px rgb(6 0 46 / 0.06), 0 12px 32px rgb(6 0 46 / 0.08);

  --glas-vlak: rgb(255 255 255 / 0.72);
  --glas-vlak-sterk: rgb(255 255 255 / 0.92);
  --glas-rand: rgb(6 0 46 / 0.10);
  --glas-glans: rgb(255 255 255 / 0.9);
  --glas-blur: 18px;
  --glas-verzadiging: 1.5;
  --glas-schaduw:
    0 1px 1px rgb(6 0 46 / 0.05),
    0 2px 4px rgb(6 0 46 / 0.05),
    0 8px 16px -6px rgb(6 0 46 / 0.12),
    0 24px 48px -18px rgb(6 0 46 / 0.20);
  --podium-1: rgb(254 117 29 / 0.30);
  --podium-2: var(--n-300);

  /* ---------- 3. Dashboard-aanvullingen ---------- */
  /* Statuskleuren: rustig, los van het merkoranje. Donker genoeg voor tekst op licht (≥ 4,5:1). */
  --st-groen: #2f7d4f;  --st-groen-rgb: 47 125 79;  --st-groen-zacht: #e7f3ec; --st-groen-rand: #b9dcc6;
  --st-amber: #a86b12;  --st-amber-rgb: 168 107 18; --st-amber-zacht: #fbf1dc; --st-amber-rand: #ecd3a0;
  --st-rood:  #b4231b;  --st-rood-rgb: 180 35 27;   --st-rood-zacht: #fbeae8;  --st-rood-rand: #f1c3bf;
  --st-info:  var(--n-600);

  /* Kanalen voor doorzichtige tinten (app.css gebruikt rgb(var(--x-rgb) / a)) */
  --tint-rgb: 254 117 29;     /* oranje tint: op licht wordt het perzik */
  --koel-rgb: 107 117 135;
  --licht-rgb: 255 255 255;
  --diep-rgb: 6 0 46;
  --schaduw-rgb: 6 0 46;
  --scrim-rgb: 6 0 46;

  /* Fases op de borden: kleur zit in de balk en de stip, de tekst blijft navy of wit */
  --fase-idee: #9aa3b3;  --fase-check: #e3a43b; --fase-revisie: #d4574a; --fase-herzien: #86c29d;
  --fase-shoot: #414b7a; --fase-edit: #fe751d;  --fase-klant: #06002e;   --fase-posten: #2f8f5b;
  --fase-gepost: #c8cfdb; --fase-niet: #dfe4ec;

  /* ---------- 4. De oude namen in app.css, op de nieuwe rollen ---------- */
  --bg: var(--kleur-vlak);
  --panel: var(--kleur-achtergrond);
  --panel-2: var(--kleur-vlak-2);
  --line: var(--kleur-rand);
  --line-sterk: var(--kleur-rand-sterk);
  --green: var(--kleur-accent);
  --green-dim: rgb(254 117 29 / 0.12);
  --blue: var(--n-700);
  --cyan: var(--n-500);
  --text: var(--kleur-tekst);
  --gray: var(--n-700);
  --dim: var(--kleur-tekst-2);
  --muted: var(--kleur-tekst-2);
  --radius: var(--radius-m);
  --radius-sm: var(--radius-s);
  --font: var(--font-basis);
  --side-bg: var(--kleur-achtergrond);
  --side-panel: var(--kleur-vlak);
  --side-shadow: none;
  --nav-hover: var(--kleur-vlak-2);
  --nav-active-ring: transparent;
  --main-bg: var(--kleur-vlak);
  --btn-grad: var(--kleur-accent);
  --btn-text: var(--kleur-op-accent);
  --btn-shadow: none;
  --card-shadow: 0 1px 2px rgb(6 0 46 / 0.04), 0 8px 24px -12px rgb(6 0 46 / 0.10);
  --lead-glow: 0 0 0 1px var(--kleur-rand-sterk);
  --input-bg: var(--kleur-achtergrond);
  --track-bg: var(--kleur-vlak-2);
  --logo-filter: none;
  --theme-color: #ffffff;
  --topbar-bg: var(--glas-vlak);
  --topbar-border: var(--glas-rand);
  --topbar-pill: var(--kleur-achtergrond);
  --perf-accent: var(--kleur-accent);
  --perf-chart: var(--vs-navy);
  --perf-line: var(--kleur-rand);

  color-scheme: light;
}

/* Donker: alleen als iemand er zelf om vraagt met de schakelaar */
:root[data-thema="donker"] {
  --kleur-achtergrond: var(--d-bg);
  --kleur-vlak: var(--d-vlak-1);
  --kleur-vlak-2: var(--d-vlak-2);
  --kleur-rand: var(--d-rand);
  --kleur-rand-sterk: var(--d-rand-sterk);
  --kleur-tekst: var(--vs-wit);
  --kleur-tekst-2: var(--d-tekst-2);
  --kleur-accent-tekst: var(--vs-oranje);
  --kleur-focus: var(--vs-oranje);
  --schaduw: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px rgb(0 0 0 / 0.35);
  --glas-vlak: rgb(30 37 80 / 0.5);
  --glas-vlak-sterk: rgb(20 26 66 / 0.82);
  --glas-rand: rgb(200 215 240 / 0.14);
  --glas-glans: rgb(200 215 240 / 0.38);
  --glas-blur: 24px;
  --glas-verzadiging: 1;
  --glas-schaduw: 0 1px 1px rgb(0 0 0 / 0.3), 0 18px 44px -10px rgb(0 0 0 / 0.6);
  --podium-1: var(--d-staal);
  --podium-2: var(--d-vlak-3);

  --st-groen: #5cc58a;  --st-groen-rgb: 92 197 138;  --st-groen-zacht: #12302a; --st-groen-rand: #2a5a47;
  --st-amber: #e3b04b;  --st-amber-rgb: 227 176 75;  --st-amber-zacht: #2e2618; --st-amber-rand: #6b5326;
  --st-rood:  #f0897b;  --st-rood-rgb: 240 137 123;  --st-rood-zacht: #3b1d1f;  --st-rood-rand: #7a3a37;
  --st-info:  var(--d-tekst-2);

  --tint-rgb: 65 75 122;      /* geen oranje gloed over navy: die wordt magenta */
  --koel-rgb: 174 182 200;
  --licht-rgb: 200 215 240;   /* nooit wit-transparant over navy: dat wordt grauw paars */
  --diep-rgb: 200 215 240;
  --schaduw-rgb: 0 0 0;
  --scrim-rgb: 2 0 18;

  --fase-idee: #8a93a8;  --fase-check: #e3b04b; --fase-revisie: #ef8a7d; --fase-herzien: #7fc79a;
  --fase-shoot: #aeb6c8; --fase-edit: #fe751d;  --fase-klant: #ffffff;   --fase-posten: #5cc58a;
  --fase-gepost: #414b7a; --fase-niet: #2c3560;

  --bg: var(--d-bg);
  --panel: var(--d-vlak-2);
  --panel-2: var(--d-vlak-3);
  --gray: var(--d-tekst-2);
  --dim: var(--d-tekst-3);
  --muted: var(--d-tekst-3);
  --green-dim: var(--d-vlak-3);
  --blue: var(--d-tekst-2);
  --cyan: var(--d-tekst-3);
  --side-bg: var(--d-vlak-1);
  --side-panel: var(--d-vlak-2);
  --nav-hover: var(--d-vlak-2);
  --main-bg: var(--d-bg);
  --card-shadow: none;
  --input-bg: var(--d-vlak-1);
  --track-bg: var(--d-vlak-3);
  --theme-color: #06002e;
  --topbar-pill: var(--d-vlak-2);
  --perf-chart: var(--vs-wit);

  color-scheme: dark;
}

/* ---------- 5. Basis --------------------------------------------------- */
html, body { background: var(--bg); }
body {
  font-family: var(--font-basis);
  font-feature-settings: "ss01" 0;
  color: var(--text);
  letter-spacing: -0.005em;
}
h1, h2, h3, .kop { font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
a { color: var(--kleur-accent-tekst); text-decoration-color: var(--kleur-accent); }
.v, .stat .v, td, .num, .pd-tile-value, .pf-tile-value, .dash-num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--kleur-focus); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgb(254 117 29 / 0.28); color: var(--text); }
:root[data-thema="donker"] ::selection { background: var(--d-staal); }
* { scrollbar-color: var(--kleur-rand-sterk) transparent; }
*::-webkit-scrollbar-thumb { background: var(--kleur-rand-sterk); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--n-400); background-clip: padding-box; }

/* ---------- 6. Het kader: zijbalk, bovenbalk, hoofdvlak ---------------- */
.app, .shell-main { background: var(--main-bg); }
.side {
  background: var(--side-bg);
  border-right: 1px solid var(--kleur-rand);
  box-shadow: none;
  padding: 10px 12px 12px;
}
.brand-shell { border-bottom: 1px solid var(--kleur-rand); padding: 14px 10px 14px; }
.side .brand .logo { width: 72%; max-width: 132px; }
.brand-sub {
  color: var(--kleur-tekst-2); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-group { color: var(--kleur-tekst-2); font-size: 10px; letter-spacing: 0.14em; font-weight: 700; }
.nav-item {
  position: relative; color: var(--kleur-tekst-2); font-weight: 600; font-size: 13px;
  border-radius: var(--radius-s); padding: 8px 10px;
}
.nav-item:hover { background: var(--kleur-vlak-2); color: var(--kleur-tekst); }
/* Actief: navy (op donker wit) met een oranje streep, zoals de actieve staat op de site */
.nav-item.active {
  background: var(--kleur-vlak-2); color: var(--kleur-tekst); box-shadow: none; font-weight: 700;
}
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--kleur-accent);
}
.nav-item .badge { background: var(--kleur-accent); color: var(--kleur-op-accent); font-weight: 800; }
.side-kicker { color: var(--kleur-tekst-2); letter-spacing: 0.14em; }
.sys-status-card { background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius-m); }
.sys-row .sys-dot { background: var(--n-400); }
.sys-row.live .sys-dot { background: var(--st-groen); box-shadow: 0 0 0 3px rgb(var(--st-groen-rgb) / 0.18); }
.sys-row.down .sys-dot { background: var(--st-rood); box-shadow: 0 0 0 3px rgb(var(--st-rood-rgb) / 0.18); }
.btn-signout, .side-foot #logout.btn-signout {
  color: var(--kleur-tekst-2); border: 1px solid var(--kleur-rand-sterk); background: transparent;
  border-radius: var(--radius-pil);
}
.btn-signout:hover, .side-foot #logout.btn-signout:hover {
  color: var(--st-rood); border-color: var(--st-rood); background: var(--st-rood-zacht); box-shadow: none;
}

/* De bovenbalk is bediening en ligt boven de inhoud: daar hoort glas */
.topbar {
  position: relative; z-index: 5;
  background: var(--glas-vlak);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-verzadiging));
  backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-verzadiging));
  border-bottom: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-glans), 0 8px 24px -18px rgb(var(--schaduw-rgb) / 0.35);
}
.topbar-label {
  color: var(--kleur-tekst-2); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.topbar-title { color: var(--kleur-tekst); font-weight: 800; letter-spacing: -0.02em; }
.topbar-search {
  background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius-pil);
  color: var(--kleur-tekst-2); box-shadow: none;
}
.topbar-search:hover { border-color: var(--kleur-rand-sterk); }
.topbar-search-key { background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand); color: var(--kleur-tekst-2); border-radius: 6px; }
.topbar-user {
  background: var(--topbar-pill); border: 1px solid var(--kleur-rand); border-radius: var(--radius-pil);
  box-shadow: none;
}
.topbar-user:hover { border-color: var(--kleur-rand-sterk); }
.topbar-user-copy b { color: var(--kleur-tekst); }
.topbar-user-copy span { color: var(--kleur-tekst-2); }
/* Alleen de kleur: de verkorte 'background' wiste background-size, waardoor een profielfoto op
   ware grootte vanaf de linkerbovenhoek in het rondje stond (Niek, 22 okt 2026). */
.topbar-avatar { background-color: var(--vs-navy); color: var(--vs-wit);
  background-size: cover; background-position: center; background-repeat: no-repeat; }
:root[data-thema="donker"] .topbar-avatar { background-color: var(--vs-oranje); color: var(--vs-navy); }

/* Schakelaar licht/donker */
.thema-knop {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border: 1px solid var(--kleur-rand); border-radius: var(--radius-pil);
  background: var(--topbar-pill); color: var(--kleur-tekst); cursor: pointer;
  transition: border-color var(--duur), background-color var(--duur);
}
.thema-knop:hover { border-color: var(--kleur-rand-sterk); }
.thema-knop svg { width: 18px; height: 18px; }
.thema-knop .ic-maan { display: block; }
.thema-knop .ic-zon { display: none; }
:root[data-thema="donker"] .thema-knop .ic-maan { display: none; }
:root[data-thema="donker"] .thema-knop .ic-zon { display: block; color: var(--vs-oranje); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* ---------- 7. Knoppen ------------------------------------------------- */
.btn, .new-btn, .login-btn {
  border-radius: var(--radius-pil);
  background: var(--kleur-accent);
  color: var(--kleur-op-accent);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 6px 16px -8px rgb(254 117 29 / 0.6);
  transition: background-color var(--duur), border-color var(--duur), transform var(--duur);
}
:root[data-thema="donker"] .btn, :root[data-thema="donker"] .new-btn, :root[data-thema="donker"] .login-btn {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
}
.btn:hover, .new-btn:hover, .login-btn:hover { background: var(--kleur-accent-hover); filter: none; transform: none; }
.btn:active, .new-btn:active { transform: translateY(1px) scale(0.99); }
.btn.ghost, .btn.gray, .btn.secondary {
  background: transparent; color: var(--kleur-tekst); border: 1px solid var(--kleur-rand-sterk); box-shadow: none;
}
.btn.ghost:hover, .btn.gray:hover, .btn.secondary:hover {
  background: var(--kleur-vlak-2); border-color: var(--kleur-tekst); color: var(--kleur-tekst);
}
.btn.danger { background: var(--st-rood-zacht); color: var(--st-rood); border: 1px solid var(--st-rood-rand); box-shadow: none; }
.btn.danger:hover { background: var(--st-rood); color: var(--vs-wit); border-color: var(--st-rood); }
:root[data-thema="donker"] .btn.danger:hover { color: var(--vs-navy); }
.btn.sm.active-toggle { background: var(--vs-navy); color: var(--vs-wit); border-color: var(--vs-navy); }
:root[data-thema="donker"] .btn.sm.active-toggle { background: var(--vs-oranje); color: var(--vs-navy); border-color: var(--vs-oranje); }

/* ---------- 8. Kaarten, vlakken, lijsten -------------------------------- */
.card, .panel, .section-row, .team-card, .client-card, .scan-card, .scard {
  background: var(--panel);
  border: 1px solid var(--kleur-rand);
  box-shadow: var(--card-shadow);
}
.card, .panel { border-radius: var(--radius-m); }
.card.accent { border-left: 3px solid var(--kleur-accent); }
.client-card, .team-card {
  border-radius: var(--radius-l);
  transition: border-color var(--duur), transform var(--duur), box-shadow var(--duur);
}
.client-card:hover, .team-card:hover {
  background: var(--panel); border-color: var(--kleur-rand-sterk); transform: translateY(-2px);
  box-shadow: var(--schaduw);
}
/* Klaar om te posten is geen fout maar een seintje: merkoranje, niet rood */
.client-card.is-hot { border-color: rgb(var(--tint-rgb) / 0.45); }
.client-card .scan-pill.hot { background: var(--kleur-accent); color: var(--kleur-op-accent); border-color: var(--kleur-accent); }
.client-card .team-stat.hot { background: rgb(var(--tint-rgb) / 0.10); border-color: rgb(var(--tint-rgb) / 0.40); }
.client-card .team-card-meter-fill.hot { background: var(--kleur-accent); }
.client-card .team-card-meter-fill.busy { background: var(--vs-navy); }
:root[data-thema="donker"] .client-card .team-card-meter-fill.busy { background: var(--d-tekst-2); }
:root[data-thema="donker"] .client-card.is-hot { border-color: var(--vs-oranje); }
.client-card .team-card-meter-fill { background: var(--n-400); }
.stat .k, .scard .k, th {
  color: var(--kleur-tekst-2); font-weight: 700; letter-spacing: 0.08em;
}
.stat .v { font-weight: 800; letter-spacing: -0.02em; }
.stat .v.green { color: var(--kleur-accent-tekst); }

.pill { background: var(--green-dim); color: var(--kleur-tekst); font-weight: 700; }
.pill.gray { background: var(--kleur-vlak-2); color: var(--kleur-tekst-2); }
.badge-active { background: var(--green-dim); color: var(--kleur-tekst); }
.chip-warn { color: var(--st-amber); border-color: var(--st-amber-rand); }

/* Tabbladen: de actieve tab is een oranje pil met navy tekst, zoals op de site */
.tab { border-radius: var(--radius-pil); background: var(--panel); border: 1px solid var(--kleur-rand); color: var(--kleur-tekst-2); font-weight: 700; }
.tab:hover { border-color: var(--kleur-rand-sterk); color: var(--kleur-tekst); }
.tab.active { background: var(--kleur-accent); color: var(--kleur-op-accent); border-color: var(--kleur-accent); }

/* Klantwerkruimte: één doorlopende lijn met een oranje streep onder de actieve tab */
.tabs-primary .tab { color: var(--kleur-tekst-2); font-weight: 700; }
.tabs-primary .tab.active { color: var(--kleur-tekst); border-bottom-color: var(--kleur-accent); }
/* Segmentknoppen (organic / youtube / …): het gekozen segment ligt als een massief vlakje bovenop */
.pl-segs { background: var(--kleur-vlak-2); border-color: var(--kleur-rand); border-radius: var(--radius-pil); }
.pl-seg { border-radius: var(--radius-pil); color: var(--kleur-tekst-2); }
.pl-seg.active, .pl-seg.on, .pl-seg[aria-pressed="true"] {
  background: var(--panel); color: var(--kleur-tekst); box-shadow: 0 1px 2px rgb(var(--schaduw-rgb) / 0.12);
}

/* Tabellen */
table { font-variant-numeric: tabular-nums; }
th, td { border-bottom-color: var(--kleur-rand); }
th { font-size: 10.5px; }
tbody tr:hover td { background: var(--kleur-vlak); }

/* Formulieren */
input, select, textarea {
  font-family: inherit;
}
.field input, .field select, .field textarea, .modal .field input, .modal .field select, .modal .field textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
input[type="search"], input[type="url"], select, textarea {
  background: var(--input-bg); border: 1px solid var(--kleur-rand); color: var(--kleur-tekst);
  border-radius: var(--radius-s);
}
/* Cellen op het bord: rustig tot je eroverheen gaat (zelfde gedrag als voorheen) */
input.pl-in, select.pl-in, textarea.pl-in { background: transparent; border-color: transparent; border-radius: 8px; }
input.pl-in:hover, select.pl-in:hover, textarea.pl-in:hover { border-color: var(--kleur-rand); }
input:focus, select:focus, textarea:focus, .pl-in:focus {
  outline: none; border-color: var(--kleur-focus); box-shadow: 0 0 0 3px rgb(var(--diep-rgb) / 0.10);
}
:root[data-thema="donker"] input:focus, :root[data-thema="donker"] select:focus,
:root[data-thema="donker"] textarea:focus, :root[data-thema="donker"] .pl-in:focus {
  border-color: var(--vs-oranje); box-shadow: 0 0 0 3px var(--d-staal);
}
::placeholder { color: var(--n-400); opacity: 1; }
:root[data-thema="donker"] ::placeholder { color: var(--d-tekst-3); }

/* Vensters (modals): massief vlak, ruime hoek, navy-getinte achtergrond */
.modal-bg { background: rgb(var(--scrim-rgb) / 0.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal {
  background: var(--panel); border: 1px solid var(--kleur-rand); border-radius: var(--radius-l);
  box-shadow: var(--schaduw);
}
.modal h2, .modal h3 { letter-spacing: -0.02em; }

/* Zoekvenster (Ctrl K): bediening boven de inhoud, dus glas, sterke variant */
.cmd-palette {
  background: var(--glas-vlak-sterk);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-verzadiging));
  backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-verzadiging));
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-glans), var(--glas-schaduw);
  border-radius: var(--radius-l);
}

/* ---------- 9. Borden en fases ------------------------------------------ */
.st-ideation, .st-ideationqc, .st-ideationqualitycheck { --c: var(--fase-idee); }
.st-ideationrevisionneeded, .st-editrevisionneeded, .st-designrevisionneeded,
.st-revisionneeded, .st-revisionsneeded { --c: var(--fase-revisie); }
.st-ideationrevisioncompleted, .st-editrevisioncompleted, .st-designrevisioncompleted,
.st-revisioncompleted, .st-revisionscompleted { --c: var(--fase-herzien); }
.st-readyforshoot, .st-readyforvideoshoot, .st-readyfordesign { --c: var(--fase-shoot); }
.st-readyforediting, .st-readyforvideoediting { --c: var(--fase-edit); }
.st-qualitycheck, .st-qualitycontrol { --c: var(--fase-check); }
.st-clientapproval { --c: var(--fase-klant); }
.st-readyforposting { --c: var(--fase-posten); }
.st-posted { --c: var(--fase-gepost); }
.st-notposting { --c: var(--fase-niet); }
/* Leadfases */
.st-nieuw { --c: var(--fase-idee); }
.st-gecontacteerd { --c: var(--fase-shoot); }
.st-gekwalificeerd { --c: var(--fase-klant); }
.st-callgepland { --c: var(--fase-herzien); }
.st-voorsteluit { --c: var(--fase-edit); }
.st-onderhandeling { --c: var(--fase-check); }
.st-gewonnen { --c: var(--fase-posten); }
.st-verloren { --c: var(--fase-revisie); }
.st-onhold { --c: var(--fase-gepost); }
/* De fasekleur draagt de balk en de stip; de tekst blijft leesbaar navy of wit */
.pl-group .ct, .pl-ghead .nm, .sbadge, .health-row .lbl {
  color: var(--kleur-tekst);
}
.pl-group .ct { background: color-mix(in srgb, var(--c, var(--n-400)) 22%, transparent); }
.pl-table th { background: var(--kleur-vlak); }
.pl-table tr:hover td, .pl-table tr:hover td.it { background: var(--kleur-vlak); }

/* Agenda-banen: zelfde regel, de kleur zit in de bovenrand */
.ag-lane-head, .ag-lane-title { color: var(--kleur-tekst); }

/* ---------- 10. Inloggen en laden: glas op een podium ------------------- */
.login-wrap {
  background:
    radial-gradient(42rem 28rem at 12% 8%, var(--podium-1), transparent 62%),
    radial-gradient(38rem 30rem at 92% 96%, var(--podium-2), transparent 60%),
    var(--kleur-vlak);
  font-family: var(--font-basis);
}
.login-wrap::before {
  opacity: 1; animation: none;
  background-image: radial-gradient(var(--kleur-rand-sterk) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.login-panel {
  background: var(--glas-vlak);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-verzadiging));
  backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-verzadiging));
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 var(--glas-glans), var(--glas-schaduw);
  color: var(--kleur-tekst);
}
.login-badge {
  width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; margin: 0 auto 22px;
}
.login-badge img { width: 148px; height: auto; filter: none; }
.login-panel h1 { color: var(--kleur-tekst); font-size: 26px; letter-spacing: -0.03em; }
.login-panel p.sub { color: var(--kleur-tekst-2); }
.login-panel .field label { color: var(--kleur-tekst-2); letter-spacing: 0.1em; }
.login-panel .field input { background: var(--input-bg); border: 1px solid var(--kleur-rand); color: var(--kleur-tekst); }
.login-panel .field input::placeholder { color: var(--n-400); }
.login-panel .field input:focus { border-color: var(--kleur-focus); box-shadow: 0 0 0 3px rgb(var(--diep-rgb) / 0.10); background: var(--input-bg); }
.login-panel .err { color: var(--st-rood); }
.login-divider { color: var(--kleur-tekst-2); }
.login-divider::before, .login-divider::after { background: var(--kleur-rand); }
.login-google-btn { background: var(--vs-wit); color: var(--vs-navy); border: 1px solid var(--kleur-rand-sterk); border-radius: var(--radius-pil); }
.login-remember { color: var(--kleur-tekst-2); }
.login-remember input { accent-color: var(--vs-navy); }
:root[data-thema="donker"] .login-remember input { accent-color: var(--vs-oranje); }
.login-foot a { color: var(--kleur-tekst-2); }
.login-btn { padding: 13px 18px; font-size: 15px; }
.splash-panel { color: var(--kleur-tekst-2); }
.splash-panel img { width: 120px; height: auto; }

/* ---------- 11. Performance: volgt nu de schakelaar ---------------------- */
.perf-dark, .pf-shell {
  --pd-bg: var(--bg); --pd-card: var(--panel); --pd-line: var(--kleur-rand);
  --pd-text: var(--kleur-tekst); --pd-muted: var(--kleur-tekst-2); --pd-accent: var(--kleur-accent);
  --pd-up: var(--st-groen); --pd-up-bg: var(--st-groen-zacht); --pd-down: var(--st-rood); --pd-down-bg: var(--st-rood-zacht);
  --pf-bg: var(--bg); --pf-card: var(--panel); --pf-card-line: var(--kleur-rand);
  --pf-text: var(--kleur-tekst); --pf-dim: var(--kleur-tekst-2); --pf-faint: var(--n-400); --pf-accent: var(--kleur-accent);
  --pf-up: var(--st-groen); --pf-up-bg: var(--st-groen-zacht); --pf-down: var(--st-rood); --pf-down-bg: var(--st-rood-zacht);
}
:root[data-thema="donker"] .perf-dark, :root[data-thema="donker"] .pf-shell { --pf-faint: var(--d-tekst-3); }
.pd-banner { border: 1px solid var(--kleur-rand); box-shadow: var(--card-shadow); }
.pd-banner b, .pf-banner-pill { background: var(--kleur-accent); color: var(--kleur-op-accent); }
.pd-sub .accent, .pf-head .pf-sub .accent, .perf-title h2 .accent { color: var(--kleur-accent-tekst); }
.pd-stat span:last-child, .pd-sheet-link, .pf-statrow .v, .perf-stat .v, .perf-stat .v.accent, .perf-congrats b {
  color: var(--kleur-tekst); font-weight: 800;
}
.pd-tile-ic, .pf-tile-label svg { color: var(--kleur-tekst); }
:root[data-thema="donker"] .pd-tile-ic, :root[data-thema="donker"] .pf-tile-label svg { color: var(--vs-oranje); }
.pd-tile, .pd-profile, .pf-tile {
  border: 1px solid var(--kleur-rand); box-shadow: var(--card-shadow);
}

/* ---------- 12. Meldingen bovenaan, voorbeeldbalk ------------------------ */
.niek-notice { background: var(--vs-navy); color: var(--vs-wit); }
.niek-notice-title, .niek-notice-x, .niek-notice-list strong { color: var(--vs-wit); }

.voorbeeld-balk {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--vs-navy); color: var(--vs-wit);
  font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--d-rand);
}
.voorbeeld-balk b {
  padding: 2px 10px; border-radius: var(--radius-pil); background: var(--vs-oranje); color: var(--vs-navy);
  font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.voorbeeld-balk span { color: var(--d-tekst-2); }
.voorbeeld-balk a {
  margin-left: auto; color: var(--vs-wit); font-weight: 700; text-decoration: underline;
  text-decoration-color: var(--vs-oranje); text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* ---------- 13. Toegankelijkheid ---------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .topbar, .login-panel, .cmd-palette {
    background: var(--glas-vlak-sterk); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .client-card, .team-card, .btn, .new-btn, .thema-knop { transition: none; }
  .client-card:hover, .team-card:hover { transform: none; }
}

/* Melding in het voorbeeld als iemand iets probeert op te slaan */
.voorbeeld-melding {
  position: fixed; left: 50%; bottom: 24px; z-index: 200; max-width: min(92vw, 34rem);
  padding: 12px 18px; border-radius: var(--radius-pil);
  background: var(--vs-navy); color: var(--vs-wit); font-size: 13.5px; font-weight: 600;
  box-shadow: var(--schaduw); transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: opacity var(--duur), transform var(--duur);
}
.voorbeeld-melding.zichtbaar { opacity: 1; transform: translate(-50%, 0); }
:root[data-thema="donker"] .voorbeeld-melding { background: var(--d-vlak-3); border: 1px solid var(--d-rand-sterk); }

/* Fasefamilies op het bord: de zijrand toont de familie, de streep bij de naam de fase */
/* De rand links volgt de kleur van de fase zelf (--c, gezet door .st-*), dezelfde kleur als het
   streepje voor de naam (Niek, 22 okt 2026: "nu staat alles hier oranje"). De familiekleur is
   alleen nog de terugval voor een fase zonder eigen kleur. */
.pl-group.fam-ideation { --fam: var(--fase-idee); }
.pl-group.fam-production { --fam: var(--fase-edit); }
.pl-group.fam-approval { --fam: var(--fase-posten); }
.pl-group.fam-posted { --fam: var(--fase-gepost); }
.pl-group.fam-revision { --fam: var(--fase-revisie); }
.pl-group.fam-revision-done { --fam: var(--fase-herzien); }
.pl-group { background: var(--panel); border-color: var(--kleur-rand); border-radius: var(--radius-m);
  border-left: 3px solid var(--c, var(--fam, var(--kleur-rand))); }
/* Datumvelden: het kalendericoontje volgt licht/donker */
:root[data-thema="donker"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); }

/* ---------- 14. Groei in de grafieken (22 okt 2026, naar de grafiek op de website) ---------- */
:root { --groei-vlak: #fe751d; --groei-vlak-boven: 0.20; }
/* Op donker geen oranje gloed over navy (wordt magenta): het vlak is koel blauw */
:root[data-thema="donker"] { --groei-vlak: #414b7a; --groei-vlak-boven: 0.55; }
.groei-plot { position: relative; touch-action: pan-y; cursor: crosshair; }
.groei-plot svg { display: block; width: 100%; overflow: visible; }
.pd-spark .groei-plot svg { height: 46px; }
.groei-plot-groot svg { height: 190px; }
.groei-stop-boven { stop-color: var(--groei-vlak); stop-opacity: var(--groei-vlak-boven); }
.groei-stop-onder { stop-color: var(--groei-vlak); stop-opacity: 0; }
.groei-stip {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--vs-oranje); pointer-events: none;
}
.groei-plot-groot .groei-stip { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.groei-stip-beweeg { opacity: 0; box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px rgb(var(--tint-rgb) / 0.45); }
.groei-cursor {
  position: absolute; top: -4px; bottom: -4px; width: 0; opacity: 0; pointer-events: none;
  border-left: 1px dashed var(--kleur-tekst-2);
}
.groei-tip {
  position: absolute; bottom: calc(100% + 10px); z-index: 3; transform: translateX(-50%);
  display: grid; gap: 1px; padding: 7px 11px; border-radius: var(--radius-s);
  background: var(--vs-navy); color: var(--vs-wit); white-space: nowrap;
  font-size: 12px; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 24px rgb(var(--schaduw-rgb) / 0.28);
  opacity: 0; pointer-events: none; transition: opacity var(--duur);
}
.groei-tip b { font-weight: 800; }
.groei-tip span { color: var(--d-tekst-2); font-weight: 600; }
.groei-tip.groei-tip-links { transform: translateX(-12px); }
.groei-tip.groei-tip-rechts { transform: translateX(calc(-100% + 12px)); }
:root[data-thema="donker"] .groei-tip { background: var(--vs-wit); color: var(--vs-navy); }
:root[data-thema="donker"] .groei-tip span { color: var(--n-600); }
.groei-plot.is-actief .groei-cursor, .groei-plot.is-actief .groei-stip-beweeg, .groei-plot.is-actief .groei-tip { opacity: 1; }
.groei-plot.is-actief .groei-stip-eind { opacity: 0.35; }

/* In rust: de groei over de getoonde periode, midden onder de lijn */
.pd-spark-x { align-items: baseline; gap: 6px; font-size: 10px; }
.pd-spark-x .groei-rust {
  color: var(--st-groen); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.pd-spark-x .groei-rust.is-min { color: var(--st-rood); }
.pd-chart-kop {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  margin: 0 4px 6px; font-size: 13px; color: var(--kleur-tekst-2); font-weight: 600;
}
.pd-chart-kop b { color: var(--st-groen); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pd-chart-kop b.is-min { color: var(--st-rood); }
@media (prefers-reduced-motion: reduce) { .groei-tip { transition: none; } }

.brand-sub[hidden] { display: none; }
/* Wint van de oude .pl-group.st-*-regels in app.css: elke fase houdt de kleur van zijn eigen streepje. */
.pl-group.pl-group[class*="st-"] { border-left-color: var(--c, var(--fam, var(--kleur-rand))); }