/* ============================================
   Studio - de schermlaag boven framework.css
   ============================================

   WAT DIT IS. Eén stijlrichting voor de hele backend: de inhoud wordt wit, de zijbalk staat op
   een getinte grond, getallen worden tabulair en krijgen Rubik (de letter van het logo), en de
   acht semantische kleuren worden drie. Gekozen op 01-11-2026 uit drie richtingen.

   WAAROM EEN EIGEN BESTAND EN NIET IN framework.css. Main en stable stonden op hetzelfde punt,
   dus alles wat op main staat rijdt mee met de eerstvolgende promotie naar de negenenveertig
   installs. Een halve huisstijl die ongevraagd bij Hijmans op het scherm komt is geen uitrol maar
   een storing. Deze laag staat standaard uit en gaat per install aan via Instellingen >
   Huisstijl (`ui_studio` in `entity_settings`), dus hij is terug te draaien zonder uitrol - de
   regel uit BOUWEN.md §0.3.

   DE REGEL IN DIT BESTAND. Alleen tokens, plus de plekken die een token niet kan bereiken.
   Elke regel hier is dus óf een waarde in `:root`, óf een component waar framework.css een
   getal hardcodeert (13px, een icoonvierkant, een uppercase kolomkop). Komt er een derde soort
   regel bij, dan hoort die wijziging in framework.css zelf en niet hier, anders staat dezelfde
   component over twee bestanden en lopen ze uit elkaar.

   WAT HIER NIET IN STAAT. De inline stijlen in de views. Inline wint van elke stylesheet, dus
   die zijn in dezelfde ronde naar klassen verhuisd (`.me-card`, `.statwaarde`) met exact de
   huidige waarden, zodat het klassieke scherm niet verandert.

   Alles hangt aan `[data-ui="studio"]` op `<html>`, gezet door templates/layout.php. */

/* --- 1. Tokens ---------------------------------------------------------------
   Dezelfde namen als in framework.css, zodat geen enkele component hoeft te weten dat deze
   laag bestaat. Nieuw zijn --grond (de kleur onder de zijbalk), --merk-contrast en --schaduw. */

:root[data-ui="studio"] {
    /* De inhoud is wit, de zijbalk staat op grijs. Precies omgekeerd aan het klassieke scherm,
       en dat is wat de richting zijn rust geeft: de kaarten hoeven niet meer op te vallen. */
    --grond: #f6f8fb;
    --bg: #ffffff;
    --card: #ffffff;
    --card2: #fbfcfd;

    /* Haarlijnen in plaats van randen. Een kaart is nu een lijn, geen bak. */
    --border: #e3e8ee;
    --border2: #d5dbe3;
    --subtle: rgba(15, 26, 43, .04);

    --text: #0f1a2b;
    --muted: #5a6b82;   /* 5,7:1 op wit, waar het oude #64748b op 4,6:1 zat */

    /* De merkkleur van de grond af geduwd, zodat kleine tekst erop leest: op wit dieper, op
       donker lichter. De merkkleur zelf is per install instelbaar, dus dat moet in CSS gebeuren
       en niet met een tweede hex. Hier 86% merk plus zwart: 4,65:1 op wit, tegen 3,56:1 voor de
       merkkleur zelf. Niet voor de primaire knop - die is de merkkleur zélf, zie onder. */
    --merk-contrast: color-mix(in srgb, var(--brand) 86%, #000);
    --schaduw: 0 1px 2px rgba(15, 26, 43, .06), 0 1px 1px rgba(15, 26, 43, .03);

    /* Drie statuskleuren in de schermen. Blauw, oranje en paars blijven bestaan voor grafieken
       en voor de schalen die verder lopen dan goed/let op/fout, maar niet meer als badge. */
    --green: #0a6c4d;
    --amber: #8a5300;
    /* Rood zit in dezelfde tint als het merk, alleen dieper: dezelfde verhouding tussen rood,
       groen en blauw (0,24 en 0,23), zodat het merkteken, de knop en een fout één familie zijn en
       niet drie bijna-gelijke roden. Het is géén color-mix op --brand: een fout moet rood blijven,
       ook op een install met een blauwe huisstijl. 7,06:1 op wit. */
    --red: #a72826;
    --red-rgb: 167, 40, 38;
    --blue: #2d4f8a;
    --orange: #8a4b00;
    --purple: #5b4b9a;

    --goed-bg: #e8f6f0;
    --goed-tekst: #0a6c4d;
    --letop-bg: #fdf3e2;
    --letop-tekst: #8a5300;
    --fout-bg: #ffeeed;
    --fout-tekst: #a72826;

    --radius: 10px;
    --radius-sm: 7px;
    --radius-xs: 5px;
}

/* Donker is hier een gelijkwaardige tweeling en geen bijzaak: de inhoud wordt een graad lichter
   dan de zijbalk, zodat de verhouding dezelfde blijft als in het licht. Drie attributen, dus
   deze blok wint altijd van het blok hierboven. */
:root[data-ui="studio"][data-theme="dark"] {
    --grond: #0d1016;
    --bg: #14181f;
    --card: #14181f;
    --card2: #191e26;

    --border: rgba(255, 255, 255, .09);
    --border2: rgba(255, 255, 255, .16);
    --subtle: rgba(255, 255, 255, .05);

    --text: #e8edf4;
    --muted: #9aa6b8;

    /* Op de donkere grond de andere kant op, zelfde doel. */
    --merk-contrast: color-mix(in srgb, var(--brand) 88%, #fff);

    --green: #5ed3a4;
    --amber: #f1b556;
    /* Dezelfde tint, naar wit opgelicht in plaats van naar zwart. 7,34:1 op de donkere grond,
       gelijk aan het zalmrood dat hier eerst stond. */
    --red: #fe817f;
    --red-rgb: 254, 129, 127;
    --blue: #7e9ccd;
    --orange: #e8a059;
    --purple: #a99cf0;

    --goed-bg: rgba(94, 211, 164, .14);
    --goed-tekst: #5ed3a4;
    --letop-bg: rgba(241, 181, 86, .14);
    --letop-tekst: #f1b556;
    --fout-bg: rgba(254, 129, 127, .14);
    --fout-tekst: #fe817f;

    --schaduw: 0 1px 2px rgba(0, 0, 0, .5);
}

/* --- 2. De omlijsting -------------------------------------------------------
   De zijbalk en de bovenbalk zakken naar de grond, de inhoud komt naar voren. */

[data-ui="studio"] .nav,
[data-ui="studio"] .topbar { background: var(--grond); }

/* --- 3. Typografie ---------------------------------------------------------
   Acht maten in plaats van dertien, en drie gewichten. framework.css zet deze getallen vast in
   px, dus ze moeten hier stuk voor stuk opnieuw. Rubik staat alleen op koppen en op getallen
   die een beslissing zijn; de rest blijft Inter, want Rubik leest niet in een tabel. */

[data-ui="studio"] body { font-size: 14px; }
[data-ui="studio"] h1 {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
}
[data-ui="studio"] h2 { font-size: 15px; font-weight: 600; }
[data-ui="studio"] h3 { font-size: 13px; font-weight: 600; }
[data-ui="studio"] .label { font-size: 11px; letter-spacing: .04em; }
[data-ui="studio"] .muted,
[data-ui="studio"] .row-sub { font-size: 13px; }
[data-ui="studio"] .row-title { font-size: 14px; font-weight: 500; }

/* Elk getal dat onder een ander getal kan komen staan, wordt tabulair. In framework.css staat
   dit zes keer in 2795 regels, en daardoor lopen bedragen in een kolom niet door. */
[data-ui="studio"] .text-right,
[data-ui="studio"] .privacy-amount,
[data-ui="studio"] .kpi-value,
[data-ui="studio"] .statwaarde,
[data-ui="studio"] .me-waarde,
[data-ui="studio"] .tab-telling,
[data-ui="studio"] .nav-sein { font-variant-numeric: tabular-nums; }

/* --- 4. Vlakken -------------------------------------------------------------
   Eén schaduwniveau, want er is maar één hoogte. De kaart zelf houdt zijn haarlijn. */

[data-ui="studio"] .card,
[data-ui="studio"] .kpi-card { box-shadow: var(--schaduw); }
[data-ui="studio"] .card-header { padding: 15px 18px 13px; }
[data-ui="studio"] .card-body { padding: 18px; }

/* De streep blijft een echte rand, alleen dunner: 3px wordt 2px.

   TWEE DINGEN DIE IK EERST FOUT DEED, en die allebei hetzelfde opleverden: geen streep te zien.

   1. Een `inset`-schaduw in plaats van een rand. Die ligt op de achtergrond van de kaart, en dus
      ónder elk kind met een eigen achtergrond: een tabelkop of een gevulde kaartkop legt hem
      eroverheen en dan is hij half of helemaal weg. Een rand kan geen enkel kind overdekken.

   2. Bij `merk`, `info` en `stil` de streep helemaal weghalen. Die kleuren zeggen geen staat maar
      "kijk hier", en dat hoeft niet te schreeuwen - maar de kaart raakte zo ook zijn linkerrand
      kwijt, en die hoort bij de vorm. Nu houden ze de rand in de haarlijnkleur: je ziet de kant
      van de kaart, zonder dat er iets roept. */
[data-ui="studio"] .kaart-ernst { border-left-width: 2px; }
[data-ui="studio"] .kaart-ernst.is-merk,
[data-ui="studio"] .kaart-ernst.is-info,
[data-ui="studio"] .kaart-ernst.is-stil { --ernst: var(--border2); }
[data-ui="studio"] .notif-toast { border-left-width: 2px; }

/* De melding met een gekleurde linkerrand was het enige element dat zijn aandacht uit een balk
   haalde in plaats van uit zijn inhoud. De rand gaat eraf; wat er staat is al dringend. */
[data-ui="studio"] .insight-card { border-left: 1px solid var(--border); padding: 14px 18px; }
[data-ui="studio"] .insight-title { font-size: 14px; }
[data-ui="studio"] .insight-desc { font-size: 13px; }

/* --- 5. Kerngetallen -------------------------------------------------------
   Het icoonvierkant verdwijnt. Het was decoratie: zestien verschillende iconen die alle zestien
   hetzelfde zeiden, namelijk "hier staat een getal". De ruimte gaat naar het getal zelf. */

[data-ui="studio"] .kpi-icon { display: none; }
[data-ui="studio"] .kpi-card { padding: 16px 18px; }
[data-ui="studio"] .kpi-value {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.025em;
}
[data-ui="studio"] .kpi-label { font-size: 13px; }

/* Dezelfde behandeling voor de twee rijen die het kpi-component niet gebruiken: de strook over
   alle BV's op het dashboard en de statrij op de facturatieschermen. */
[data-ui="studio"] .me-waarde,
[data-ui="studio"] .statwaarde {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.025em;
}
[data-ui="studio"] .me-label,
[data-ui="studio"] .strookkop {
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
[data-ui="studio"] .strookkop { font-weight: 500; color: var(--text); }
[data-ui="studio"] .me-card { padding: 16px 18px; border-radius: var(--radius); box-shadow: var(--schaduw); }
[data-ui="studio"] .statrij .card-body { padding: 16px 18px; }

/* --- 6. Tabellen -----------------------------------------------------------
   De kolomkop was 10px uppercase met letterspatie: het kleinste en het moeilijkst leesbare
   element op het scherm, terwijl het de enige uitleg van de kolom is. Nu gewoon een woord. */

:where([data-ui="studio"]) th {
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
    background: var(--card2);
    padding: 9px 16px;
}
:where([data-ui="studio"]) td { font-size: 14px; padding: 11px 16px; }
[data-ui="studio"] .table.dicht th,
[data-ui="studio"] .table.dicht td { padding: 8px 9px; }
[data-ui="studio"] .table.dicht td { font-size: 13px; }

/* --- 7. Knoppen ------------------------------------------------------------
   Vaste hoogtes in plaats van hoogte-uit-padding, zodat een knop op een telefoon te raken is.
   `.btn-sm` was 23px hoog (4px padding om 11px tekst); dat is onder elke richtlijn. */

[data-ui="studio"] .btn {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    background: var(--card);
    box-shadow: var(--schaduw);
}
[data-ui="studio"] .btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
[data-ui="studio"] .btn-icon { width: 32px; padding: 0; }
/* De primaire knop is de merkkleur zélf, niet de diepere variant.
   Ik had hem dieper gemaakt voor het contrast: wit op #fd3d3a haalt 3,56:1 en dat is onder de
   4,5:1 die voor gewone tekst geldt. Maar dit is de plek waar de huisstijl het meest te zien is,
   en een knop die net niet jouw rood is valt op. Bovendien was het klassieke scherm al jaren
   gewoon `var(--brand)`, dus mijn versie was hier de afwijking en niet de verbetering.
   Waar dat diepere rood wél werk doet is kleine tekst op wit: zie de links hieronder. */
[data-ui="studio"] .btn-primary {
    background: var(--brand);
    border-color: var(--brand);
}
/* Hoveren maakt hem dieper in plaats van doorschijnend; dat leest als indrukken. */
[data-ui="studio"] .btn-primary:hover { background: var(--merk-contrast); border-color: var(--merk-contrast); color: #fff; }
[data-ui="studio"] .btn-ghost { background: transparent; box-shadow: none; }
[data-ui="studio"] .btn:hover { background: var(--card2); border-color: var(--border2); color: var(--text); }

/* Een link in de inhoud is kleine tekst op wit, en dáár is 3,56:1 werkelijk te weinig: je leest
   het woord wel, maar je ziet niet dat het een link is zonder goed te kijken.

   LET OP DE `:where()`, DIE IS HIER HET HELE PUNT. In deze codebase is bijna alles een `<a>`: de
   menu-items, de tabs, de terugknop, de meeste knoppen. framework.css zet daarom `a` op de
   merkkleur en haalt die per component weer weg (`.nav-item` krijgt `--text`, `.btn` ook). Een
   gewone `[data-ui="studio"] a` weegt zwaarder dan zo'n losse klasse en wint dus van al die
   componenten: dan wordt het hele menu rood, iconen incluis, want die erven hun lijnkleur via
   `currentColor`. Precies dat ging hier mis.

   `:where()` weegt nul. Deze regel wint daardoor alleen van framework's eigen `a` (gelijke
   specificiteit, maar deze stylesheet komt later), en verliest van elke component die zijn eigen
   kleur zet. Dus: links in de inhoud dieper rood, en alles wat een klasse heeft blijft zoals het
   was. */
:where([data-ui="studio"]) a { color: var(--merk-contrast); }
:where([data-ui="studio"]) a:hover { color: var(--brand); }

/* Op een telefoon worden het 44px, want daar is een knop geen aanwijzer maar een duim. */
@media (max-width: 767px) {
    [data-ui="studio"] .btn { height: 40px; padding: 0 14px; font-size: 14px; }
    [data-ui="studio"] .btn-sm { height: 36px; font-size: 13px; }
    [data-ui="studio"] .nav-item { padding: 10px 10px; }
}

/* Een focusring stond op vier plekken in 2795 regels en nergens anders. Wie met het toetsenbord
   werkt zag dus niet waar hij was. Nu één regel voor alles wat focus kan krijgen. */
[data-ui="studio"] a:focus-visible,
[data-ui="studio"] button:focus-visible,
[data-ui="studio"] input:focus-visible,
[data-ui="studio"] select:focus-visible,
[data-ui="studio"] textarea:focus-visible,
[data-ui="studio"] summary:focus-visible,
[data-ui="studio"] [tabindex]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* --- 8. Badges -------------------------------------------------------------
   De tinten zaten hardgecodeerd als rgba() in framework.css, dus een token kan er niet bij.
   Ze worden rustiger en rechthoekiger: een status in een lijst is een woord, geen knop. */

[data-ui="studio"] .badge {
    border-radius: var(--radius-xs);
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 500;
}
[data-ui="studio"] .badge-green { background: var(--goed-bg); color: var(--goed-tekst); }
[data-ui="studio"] .badge-amber { background: var(--letop-bg); color: var(--letop-tekst); }
[data-ui="studio"] .badge-red { background: var(--fout-bg); color: var(--fout-tekst); }
[data-ui="studio"] .badge-blue,
[data-ui="studio"] .badge-purple,
[data-ui="studio"] .badge-orange,
[data-ui="studio"] .badge-grey,
[data-ui="studio"] .badge-muted { background: var(--subtle); color: var(--muted); }

/* --- 9. Zijbalk en kopregel ------------------------------------------------ */

[data-ui="studio"] .nav-item { font-size: 14px; padding: 7px 10px; border-radius: var(--radius-sm); }
[data-ui="studio"] .nav-item.active { color: var(--merk-contrast); }
[data-ui="studio"] .nav-group-label { font-size: 11px; letter-spacing: .06em; opacity: 1; }
[data-ui="studio"] .nav-user-name { font-size: 13px; }
[data-ui="studio"] .nav-user-role { font-size: 12px; }
[data-ui="studio"] .topbar-title { font-size: 16px; font-weight: 600; }

[data-ui="studio"] .tabs a { font-size: 14px; padding: 9px 13px 10px; }
[data-ui="studio"] .tab-telling { font-size: 11px; }

/* --- 10. Velden ------------------------------------------------------------
   Het veldlabel was 10px uppercase, net als de kolomkop, en wordt hier gewoon een woord.

   De tekstgrootte van het veld zelf blijft op een telefoon 16px staan. Dat is geen schoonheid
   maar een rem: onder 16px zoomt Safari in zodra je in een veld tikt, en dan staat het scherm
   scheef. Alleen vanaf 768px gaat hij naar 14px. */

[data-ui="studio"] .form-input { border-radius: var(--radius-sm); }
[data-ui="studio"] .form-label {
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
@media (min-width: 768px) {
    [data-ui="studio"] .form-input { font-size: 14px; }
}