/* ==========================================================================
   ReclameREUS CRM  |  crm-theme.css
   --------------------------------------------------------------------------
   WAAROM: Johan (15-09): "het CRM is niet overzichtelijk, medewerkers snappen
   het niet; het moet net zo makkelijk en duidelijk zijn als ons portaal."
   Dit bestand geeft ELK Filament-scherm de rust en de huisstijl van het
   klantportaal (resources/portal/src/style.css), volgens de bindende
   .reclamereus/CRM-ONTWERPTAAL.md.

   Geladen via de head-renderhook (resources/views/filament/custom-theme.blade.php)
   met een filemtime-cachebuster, dus na deploy direct actief.

   Uitgangspunten
   - Bouwt OP de panelkleuren uit AdminPanelProvider: primary = amber, gray =
     de warme ink-schaal (50 = canvas), success = #3C8C5A. Semantische tinten
     komen uit Filaments eigen variabelen (--danger-50 enz.), zodat een
     Filament-badge en een rr-badge met dezelfde status exact gelijk kleuren.
   - Overschrijft Filament via gewone specificiteit + bronvolgorde (dit
     bestand laadt na Filaments CSS). Geen !important, behalve bij
     "minder beweging", waar het moet winnen van elke transitie.
   - Donkere modus staat uit (->darkMode(false)): geen dark-varianten.
   - Eigen blades gebruiken de rr-*-klassen uit sectie 18, geen
     Tailwind-utilities (die zitten niet in Filaments bundel).

   Inhoud
    1. Tokens
    2. Basis
    3. Toegankelijkheid
    4. Sidebar
    5. Topbar
    6. Paginakop
    7. Secties en kaarten
    8. Tabellen
    9. Tabs
   10. Badges
   11. Knoppen
   12. Invoervelden
   13. Modals en dropdowns
   14. Notificaties
   15. Lege staat
   16. Widgets en cijfers
   17. Loginpagina
   18. Contract: rr-*-klassen
   19. Behouden: tegeltaal-focus (doorzet-modals)
   20. Behouden: CRM-configurator kleurherstel
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   Het palet en de maten van het klantportaal (resources/portal/src/style.css),
   herontwerp brok 1 (15-10-2026, ontwerp A.1). Namen blijven gelijk aan het
   portaal, zodat inline styles in blades dezelfde var(--ink-600) kunnen
   gebruiken als in de Vue-code. Amber-tinten staan als vaste hex (niet als
   color-mix) zodat knoppen nooit hun vulling verliezen in een oudere browser.

   AMBER IS MERK, GEEN WAARSCHUWING: de statustinten komen uit het Filament-
   palet (App\Filament\Support\CrmPalet) waar trap 50 het vlak (-bg), 500 de
   basis (punt en icoon) en 600 de tekst (-strong) is. De namen --status-amber-*
   blijven bestaan voor bestaande blades en betekenen nu "let op" (oranje-bruin),
   niet meer het merk.
   ========================================================================== */
:root {
  /* Papier: oppervlakken en randen */
  --canvas:          #F7F5F1;
  --surface:         #FFFFFF;
  --surface-sunken:  #F2EEE7;
  --surface-hover:   #FBF9F5;
  --border-subtle:   #EFEBE4;
  --border:          #EAE4DA;
  --border-strong:   #DDD5C8;

  /* Ink: warme charcoal-schaal. ink-500 is de lichtste tekstkleur op wit en
     canvas (AA); op een verzonken vlak gebruik je ink-600. ink-400 alleen voor
     iconen en decoratie, nooit voor lopende tekst. */
  --ink-950: #1C1A17;
  --ink-900: #2B2926;
  --ink-800: #3A3733;
  --ink-700: #524E48;
  --ink-600: #6B665E;
  --ink-500: #756F65;
  --ink-400: #A8A199;

  /* Amber: de enige actiekleur (merk, actief, focus). Geen waarschuwing. */
  --amber-50:    #FEF7EB;              /* volgende-stap-vlak, hover van een tekstknop */
  --amber-100:   #FDEFD8;              /* actief menu-item, actieve filterpil, iconentegel */
  --amber-200:   #FBDBA7;              /* rand en accent, spaarzaam */
  --amber-400:   #F8BC5D;
  --amber-500:   #F5A524;              /* primaire knop, focusrand, onderlijn actieve tab */
  --amber-hover: #E19821;              /* hover primaire knop */
  --amber-600:   #C6861D;              /* actieve knop, focusring, icoon in actief menu-item */
  --amber-700:   #895C14;              /* amber tekst op licht (5,8:1 op wit, 5,1:1 op amber-100) */
  --amber-ring:  rgba(245, 165, 36, 0.32);   /* focushalo 3px */
  --on-amber:    #1C1A17;              /* tekst op amber (8,5:1); wit haalt maar 2:1 */

  --success:        #3C8C5A;
  --success-strong: #1E7A43;

  /* Statustaal (CRM-ONTWERPTAAL §4): één woord, één kleur. Vlak = trap 50,
     punt = trap 500, tekst = trap 600 van het Filament-palet, met vaste
     terugvalwaarden voor als het palet ontbreekt. */
  --status-grijs-bg:     var(--surface-sunken);
  --status-grijs-tekst:  var(--ink-700);
  --status-grijs-punt:   var(--ink-500);
  --status-amber-bg:     rgb(var(--warning-50, 255, 239, 224));
  --status-amber-tekst:  rgb(var(--warning-600, 180, 80, 12));
  --status-amber-punt:   rgb(var(--warning-500, 199, 122, 18));
  --status-blauw-bg:     rgb(var(--info-50, 237, 242, 247));
  --status-blauw-tekst:  rgb(var(--info-600, 44, 79, 107));
  --status-blauw-punt:   rgb(var(--info-500, 62, 107, 143));
  --status-groen-bg:     rgb(var(--success-50, 227, 245, 234));
  --status-groen-tekst:  rgb(var(--success-600, 30, 122, 67));
  --status-groen-punt:   rgb(var(--success-500, 60, 140, 90));
  --status-rood-bg:      rgb(var(--danger-50, 251, 236, 233));
  --status-rood-tekst:   rgb(var(--danger-600, 158, 51, 32));
  --status-rood-punt:    rgb(var(--danger-500, 200, 71, 47));

  /* Ruimte: 8px-schaal. 4 en 12 alleen voor fijne details. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-control: 10px;    /* knop, veld, menu-item, tab, melding */
  --radius-card:    16px;    /* kaart, sectie, modal, dropdown */
  --radius-card-lg: 20px;    /* hero en loginkaart */
  --radius-inner:   6px;     /* skeleton, kleine vlakjes */
  --radius-pill:    9999px;

  /* Elevatie: warm getinte, gelaagde schaduwen. De hairline-ring IS de rand;
     daardoor geen harde borders nodig. Geen verloop, geen glans. */
  --ring-hairline:     0 0 0 1px #EFEBE4;
  --shadow-xs:         0 1px 2px rgba(28, 26, 23, 0.04);
  --shadow-sm:         0 1px 2px rgba(28, 26, 23, 0.04);
  --shadow-md:         0 1px 2px rgba(43, 41, 38, 0.05), 0 4px 8px rgba(43, 41, 38, 0.06), 0 8px 16px rgba(43, 41, 38, 0.04);
  --shadow-lg:         0 2px 4px rgba(43, 41, 38, 0.05), 0 8px 16px rgba(43, 41, 38, 0.07), 0 16px 32px rgba(43, 41, 38, 0.06);
  --shadow-xl:         0 4px 8px rgba(43, 41, 38, 0.06), 0 12px 24px rgba(43, 41, 38, 0.08), 0 24px 48px rgba(43, 41, 38, 0.10);
  --shadow-card:       var(--ring-hairline), var(--shadow-sm);
  --shadow-card-hover: var(--ring-hairline), var(--shadow-md);

  /* Beweging */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;

  /* Portaal-aliassen: code die uit het portaal wordt overgenomen werkt direct */
  --color-canvas: var(--canvas);
  --color-border: var(--border);
  --r-control:    var(--radius-control);
  --r-card:       var(--radius-card);
  --r-card-lg:    var(--radius-card-lg);
}


/* ==========================================================================
   2. BASIS
   ========================================================================== */
.fi-body {
  background-color: var(--canvas);
  color: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Lopende tekst 440 (het portaal), niet Filaments 400: het variabele
     lettertype heeft dat gewicht. Elementen met een eigen gewicht houden dat. */
  font-weight: 440;
}

/* Bedragen en aantallen staan onder elkaar in tabellen en cijferkaarten:
   met even brede cijfers lopen de kolommen recht. Op gewone tekst heeft dit
   geen zichtbaar effect, dus veilig voor alle tabeltekst. */
.fi-ta-text,
.fi-ta-summary-row,
.fi-ta-text-summary,
.fi-in-text,
.fi-wi-stats-overview-stat-value {
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   3. TOEGANKELIJKHEID
   ========================================================================== */

/* Zichtbare toetsenbordfocus (WCAG 2.4.7). Filament zet op veel knoppen en
   menu-items 'outline-none' met alleen een lichte achtergrond als focus;
   dat is voor toetsenbordgebruikers vrijwel onzichtbaar. amber-700 (#895C14)
   haalt 6:1 tegen wit en 5,5:1 tegen het canvas. Het ontwerp noemt amber-600
   voor deze ring, maar die haalt op het canvas maar 2,8:1 (WCAG 1.4.11 eist 3:1
   voor niet-tekst); daarom blijft het amber-700. Tekstvelden krijgen hun focus
   via de ring op de veldwrapper (sectie 12), daarom staan ze hier niet bij. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--amber-700);
  outline-offset: 2px;
}

/* Systeemvoorkeur "minder beweging": animaties en transities uit. !important
   is nodig omdat Filament transities via utility-klassen en Alpine zet. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   4. SIDEBAR
   Vol wit paneel met een rand rechts (paneelvorm blijft; Johan: geen blokken
   verplaatsen), 18rem breed (AdminPanelProvider), items en labels in de stijl
   van het portaal. Ontwerp B.4: horizontale binnenruimte 16px (was 24), item
   40px hoog met 4px ertussen, 16px tussen groepen en een groepslabel van 24px.
   Doel: op 1440x900 staan Vandaag, Werk, Financieel en Klanten volledig in
   beeld zonder te scrollen, en geen enkel label wordt afgekapt.
   Het actieve item krijgt amber-100 met ink-950 / 700 en een amber-600 icoon
   zodat "waar ben ik" in één oogopslag klopt.
   ========================================================================== */
.fi-sidebar {
  background-color: var(--surface);
  border-inline-end: 1px solid var(--border);
}

.fi-sidebar-header {
  background-color: var(--surface);
  box-shadow: 0 1px 0 var(--border);
}

/* Merk links: tekst "ReclameREUS CRM" (16 / 800) tot er een logo is. */
.fi-logo {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-950);
}

.fi-sidebar-nav {
  /* 16px links; rechts 8px, want Filament reserveert daar altijd de ruimte van
     een schuifbalk (scrollbar-gutter: stable, ca. 11px): zichtbaar is het dus
     ook ca. 16px. Boven en onder 12px zodat het menu van de eigenaar op 900px
     hoog zonder schuifbalk past. */
  padding: 12px 8px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Filament trekt de groepenlijst 8px naar buiten (-mx-2) en zet 28px tussen
   de groepen; hier staan de items op 16px van de rand en 16px uit elkaar. */
.fi-sidebar-nav-groups {
  margin-inline: 0;
  row-gap: 16px;
}

.fi-sidebar-group {
  row-gap: 4px;
}

.fi-sidebar-group-items {
  row-gap: 4px;
}

/* Groepslabel 12 / 700 / 0,12em in hoofdletters, op dezelfde lijn als het
   icoon van de items (10px binnenruimte), 24px hoog. */
.fi-sidebar-group-button {
  min-height: 24px;
  padding: 0 10px;
}

.fi-sidebar-group-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.fi-sidebar-item-button {
  min-height: 40px;
  padding: 8px 10px;
  column-gap: 8px;
  border-radius: var(--radius-control);
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible {
  background-color: var(--surface-sunken);
}

.fi-sidebar-item-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700);
}

.fi-sidebar-item-button:hover .fi-sidebar-item-label {
  color: var(--ink-950);
}

/* ink-500 i.p.v. Filaments ink-400: iconen halen zo 3:1 (WCAG 1.4.11).
   18px zoals het portaal: de ruimte is nodig voor het label. Met 18rem, 10px
   binnenruimte en 8px tussen icoon, label en getal past "Openstaande
   betalingen" (168px) ook naast een getal van twee cijfers. */
.fi-sidebar-item-icon {
  width: 18px;
  height: 18px;
  color: var(--ink-500);
}

:is(.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
    .fi-sidebar-item.fi-active > * > .fi-sidebar-item-button) {
  background-color: var(--amber-100);
}

:is(.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
    .fi-sidebar-item.fi-active > * > .fi-sidebar-item-button) .fi-sidebar-item-label {
  color: var(--ink-950);
  font-weight: 700;
}

:is(.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
    .fi-sidebar-item.fi-active > * > .fi-sidebar-item-button) .fi-sidebar-item-icon {
  color: var(--amber-600);
}

/* EEN GETAL IN EEN DICHTE GROEP (toets 15-10, I5). Producten (zonder koppeling) en Inkomende e-mails
   (onverwerkt) hebben een getal, maar in een dichte groep is dat getal niet te zien. Een kleine stip
   achter het groepslabel zegt dat er iets wacht; klap de groep open voor het getal zelf. Alleen bij
   een dichte groep (de pijl is dan omgedraaid): in een open groep staan de getallen er zelf. */
.fi-sidebar-group:has(.fi-sidebar-group-collapse-button.\-rotate-180):has(.fi-sidebar-item .fi-badge) .fi-sidebar-group-label::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-start: 8px;
  border-radius: 50%;
  background-color: var(--amber-600);
  vertical-align: middle;
}

/* Navigatie-badges: zachte pillen (kleur en maat via sectie 10, zonder punt),
   geen felrode bollen. Een getal betekent actie; het hoeft niet te schreeuwen. */
.fi-sidebar-item .fi-badge:not(.px-0\.5) {
  min-width: 20px;
  min-height: 20px;
  padding-block: 2px;
  padding-inline: 6px;
  font-size: 13px;
  line-height: 16px;
}


/* ==========================================================================
   5. TOPBAR
   Wit met één hairline eronder; geen zwevende schaduw. Links één omgevingspil,
   rechts het zoekveld als pil (40 hoog, vanaf 1273px 280 breed), een ronde
   belknop en de avatar, beide 40 bij 40 (ontwerp B.5).
   ========================================================================== */
.fi-topbar > nav {
  background-color: var(--surface);
  box-shadow: 0 1px 0 var(--border);
}

/* Topbar-pillen (bestelmodus en wachtrij, resources/views/filament/components/).
   De kleur staat inline in die blades zodat de veiligheidsindicator ook
   zonder dit bestand zichtbaar blijft.

   EEN BALK BOVENIN MAG DE PAGINA NOOIT BREDER MAKEN (Johan 18-09: "ik kan de
   helft niet zien"). Gemeten op een venster van 1000px: de omgevingsbalk werd
   713px breed en duwde zoeken, het belletje en het accountmenu voorbij de
   rand — en .fi-topbar knipt af (overflow-x-clip), dus die verdwenen gewoon.
   Een pil met witte ruimte die niet mag afbreken kan standaard niet kleiner
   dan zijn tekst; min-width:0 geeft hem dat wel, en de uitlegregel krimpt met
   puntjes in plaats van de rest weg te duwen. */
.fi-topbar .rr-modus-pil {
  min-width: 0;
  flex-shrink: 1;
}

.rr-modus-pil__uitleg {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Onder 1600px verdwijnt de uitlegregel visueel en houdt de pil zijn korte
   label plus de tooltip; schermlezers lezen de hele zin nog voor. Eerst lag
   deze grens op 768px en daarna op 1280px, maar op een laptopscherm van
   ~1500px (waar Johan op werkt) stonden de twee zinnen er dan nog steeds, als
   halve zinnen met puntjes die de zoekbalk verdrongen. Het label (PRODUCTIE,
   PROEFOMGEVING) zegt wat je moet weten; de hele zin staat in de tooltip. */
@media (max-width: 1599.98px) {
  .rr-modus-pil__uitleg {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Zoekveld als pil. De breedte krimpt mee met het venster (22vw, tussen 180 en
   280px) zodat de balk de kolom nooit verbreedt (zie 5-0): op 1280px is het veld
   280px breed, op 1000px 220px. Placeholder: lang/vendor/filament-panels/nl. */
.fi-global-search-field {
  width: clamp(180px, 22vw, 280px);
}

.fi-global-search-field .fi-input-wrp {
  min-height: 40px;
  border-radius: var(--radius-pill);
  background-color: var(--surface);
}

.fi-global-search-field .fi-input-wrp:not(.fi-invalid) {
  --tw-ring-color: var(--border);
}

/* Belknop en avatar: ronde knoppen van 40 bij 40 (Filament trekt een
   icoonknop met een negatieve marge in; die gaat weg zodat de cirkel zijn
   eigen ruimte heeft). */
.fi-topbar-database-notifications-btn {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: var(--radius-pill);
  color: var(--ink-600);
}

.fi-topbar-database-notifications-btn:hover {
  background-color: var(--surface-sunken);
  color: var(--ink-950);
}

.fi-topbar .fi-user-avatar {
  width: 40px;
  height: 40px;
}


/* ==========================================================================
   5-0. DE INHOUD SCHUIFT NOOIT MEER ONDER HET MENU (de echte oorzaak, 24-09)
   Johan zag twee keer (18-09 op een bestelling, 24-09 op "Bij leveranciers")
   de linkerkant van de pagina onder het menu verdwijnen, op een gewoon
   laptopscherm van ~1500px. Het lag niet aan de schermbreedte maar aan hoe
   Filament de pagina opbouwt:
   - .fi-layout is een flex-rij in OMGEKEERDE volgorde (row-reverse): de
     inhoudskolom staat rechts, het menu links;
   - de inhoudskolom (.fi-main-ctn) is een flex-kind met de standaard
     min-width:auto, en kan daardoor niet smaller worden dan zijn breedste
     inhoud;
   - is er iets te breed (hier: de twee balken bovenin met hun lange zin,
     vorige week de knoppenrij van de bestelpagina), dan wordt de kolom breder
     dan de ruimte naast het menu. In een omgekeerde rij loopt dat teveel naar
     LINKS weg, dus onder het menu door, en .fi-layout knipt af in plaats van
     te schuiven. Het menu ligt er dan bovenop en de balk bovenin lijkt over
     de menukolom te lopen.
   Gemeten op 1512px met beide balken: de kolom begon op 142px in plaats van
   320px. Met min-width:0 mag de kolom krimpen en wordt wat te breed is binnen
   de kolom opgevangen (balken met puntjes, tabellen met hun eigen schuifrand);
   gemeten: kolom op 320px, niets meer buiten de kolom. Dit geldt voor elke
   pagina en elke breedte, dus ook voor iets wat er morgen bijkomt.
   ========================================================================== */
.fi-main-ctn {
  min-width: 0;
}


/* ==========================================================================
   5a. HET MENU STAAT VAST VANAF 900px, NIET PAS VANAF 1024px
   Filament klapt onder 1024px om naar de telefoonstand: het menu wordt dan
   een laag OVER de pagina in plaats van een kolom ernaast. Johan werkt in een
   venster van ongeveer 1000px (CRM naast een ander venster) en zag daardoor
   het menu over zijn bestelling heen liggen: "ik kan de helft niet zien"
   (18-09). Op die breedte is er gewoon plaats voor allebei — gemeten bij
   1000px: menu 240px, inhoud 745px, geen horizontaal schuiven. Onder 900px
   blijft de telefoonstand staan, want daar is die plaats er echt niet.
   ========================================================================== */
@media (min-width: 900px) and (max-width: 1023.98px) {
  .fi-sidebar {
    position: sticky;
    top: 0;
    z-index: 0;
    height: 100vh;
    /* Het menu krijgt van Filament een verschuiving mee wanneer het "dicht"
       staat; die moet hier weg, anders staat de kolom buiten beeld. */
    transform: none !important;
    width: 15rem !important;
    box-shadow: none !important;
  }

  /* Zonder deze regel blijft het menu verborgen als Alpine nog niet klaar is. */
  .fi-sidebar[x-cloak] {
    display: flex !important;
  }

  /* Het waas over de pagina en de open/dicht-knoppen horen bij de
     telefoonstand; met een vast menu doen ze niets meer. */
  .fi-sidebar-close-overlay,
  .fi-topbar-open-sidebar-btn,
  .fi-topbar-close-sidebar-btn {
    display: none !important;
  }
}


/* ==========================================================================
   5a2. TABBLADEN BREKEN AF, ZE SCHUIVEN NIET
   Filament zet een tabbladenrij op overflow-x:auto. Onder 1280px past de rij
   van de bestelpagina (Bestelregels, Ontwerpen, Bijlagen, Bestandscontroles,
   Verzendingen, Taken, Betaling, Factuur, Goedkeuring) daar niet in en kreeg
   je een schuifbalk met tabbladen die je niet ziet staan. Een tabblad dat je
   niet ziet, bestaat niet (CRM-ONTWERPTAAL §1.6).
   ========================================================================== */
@media (max-width: 1279.98px) {
  .fi-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 4px;
  }
}


/* ==========================================================================
   5b. PAGINAKOP: KNOPPEN BREKEN AF IN PLAATS VAN BUITEN BEELD TE VALLEN
   Filament zet de knoppenrij van een paginakop op shrink-0. Op de
   bestelpagina is die rij 876px breed (Naar leverancier(s), Controle bij
   leverancier, Factuur & betaling, Meer, Verwijderen) en stak hij op een
   venster van 1000px 31px buiten de pagina — met horizontaal schuiven als
   gevolg, waardoor de linkerkant van elke regel wegviel. De rij mag krimpen,
   en breekt dan netjes af over twee regels (fi-ac heeft al flex-wrap).
   ========================================================================== */
.fi-header > div.shrink-0 {
  flex-shrink: 1;
  min-width: 0;
}


/* ==========================================================================
   6. PAGINAKOP
   Titel 30 / 800, beschrijving 16 / 440 in ink-600 (max 72 tekens breed) en
   een hairline eronder; de 24px ruimte komt van de padding. Het kruimelpad is
   rustig (13 / 500 ink-600): een pad is geen label.
   ========================================================================== */
.fi-header {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.fi-header-heading {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-950);
}

.fi-header-subheading {
  max-width: 72ch;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 440;
  color: var(--ink-600);
}

.fi-breadcrumbs-item-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-600);
}

.fi-breadcrumbs-item-separator {
  color: var(--ink-400);
}


/* ==========================================================================
   6b. PAGINAKOP: TITEL EN BESCHRIJVING LINKS, KNOPPEN WAAR RUIMTE IS
   Herstelronde brok 2: op 1440 brak de bestelkop ("Verwijderen" alleen op een tweede rij, de
   beschrijving brak midden in "€ 77,44 incl. / btw"). De kop mag nu omslaan: passen de knoppen naast
   de titel, dan staan ze rechts ernaast; passen ze niet, dan komen ze samen op één eigen rij onder de
   titel en de beschrijving, rechts uitgelijnd. Titel en beschrijving houden zo de volle breedte.
   Alleen vanaf 640px (daaronder staat alles al onder elkaar). Sectie 5b (knoppen mogen krimpen)
   blijft ongemoeid; deze regels komen eroverheen.
   ========================================================================== */
@media (min-width: 640px) {
  .fi-header {
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 24px;
  }

  .fi-header > div:first-child {
    flex: 1 1 auto;
  }

  .fi-header > div.shrink-0 {
    flex: 0 1 auto;
    margin-top: 0;
    margin-left: auto;
  }

  .fi-header > div.shrink-0 .fi-ac {
    justify-content: flex-end;
  }
}


/* ==========================================================================
   7. SECTIES EN KAARTEN
   Eén kaartfamilie: witte vlakken met de hairline-ring als rand en de
   zachte basisschaduw. Titel 16 / 800, beschrijving 14 in ink-600.
   ========================================================================== */
.fi-section:not(.fi-aside),
.fi-section.fi-aside > .fi-section-content-ctn {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.fi-section-header-heading {
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  color: var(--ink-950);
}

.fi-section-header-description {
  font-size: 14px;
  color: var(--ink-600);
}

.fi-section:not(.fi-aside) > .fi-section-content-ctn,
.fi-section-footer {
  border-color: var(--border-subtle);
}

/* Maatwerk-blades met een losse 'rounded-xl'-kaart zonder eigen achtergrond
   (instellingen, categoriebeheer, controle-overzichten) bleven vroeger wit
   door een brede regel. Die regel maakte ook gekleurde vlakken wit
   (bg-gray-50, bg-info-50). Nu krijgen alleen kaarten zonder eigen
   bg-klasse een witte ondergrond; gekleurde vlakken houden hun kleur. */
.fi-page .rounded-xl:not([class*="bg-"]) {
  background-color: var(--surface);
}


/* ==========================================================================
   8. TABELLEN
   Kaart-look, kop als hoofdletterlabel (A.1.3), zachte scheidingslijnen.
   ========================================================================== */
.fi-ta-ctn {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Filaments scheidingslijnen (divide-gray-200) naar border-subtle. De
   selector volgt Tailwinds eigen divide-selector, zodat hij daarvan wint. */
.fi-ta-ctn.divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.fi-ta-ctn .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-subtle);
}

.fi-ta-ctn .border-gray-200 {
  border-color: var(--border-subtle);
}

.fi-ta-table > thead > tr {
  background-color: var(--surface-sunken);
}

.fi-ta-header-cell {
  padding-block: 12px;
}

/* Hoofdletterlabel 12 / 700 / 0,06em (A.1.3). Hoofdletters maken van 12 px een label in plaats
   van te kleine lopende tekst. ink-600 (niet ink-500): op de verzonken kop haalt alleen ink-600 AA. */
.fi-ta-header-cell-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.fi-ta-row {
  transition: background-color var(--dur-fast) var(--ease-out);
}

.fi-ta-row:hover {
  background-color: var(--surface-hover);
}

/* GEEN HORIZONTAAL SCHUIVEN (Johan 15-09: "klaar met de scrollbalken").
   Tekstkolommen mogen afbreken (TextColumn::wrap() staat globaal aan in
   AppServiceProvider); lange codes, e-mailadressen en URL's zonder spaties
   breken hier binnen hun cel af i.p.v. de hele tabel breder te maken dan het
   scherm. Badges houden hun nowrap en breken dus nooit.

   GEEN AFBREEKSTREEPJES MEER (toets 15-10, I2). Eerst stond hier hyphens:auto: de afbreker vulde elke
   regel tot de rand, dus "Fietsenmaker Pedaal" werd "Fietsenmaker Pe-daal" en "Fietsenmakerij" werd
   "Fietsenma-kerij", terwijl het hele woord gewoon op de volgende regel paste. Nu hyphens:manual: een
   woord gaat naar de volgende regel (de spatie is het afbreekpunt) en breekt alleen als het ook dan
   niet in de kolom past. Gemeten op de tien lijsten (harnas, woorden zonder streepje of apenstaartje
   die over twee regels staan): op 1440 en 1512 px nul, op 1280 px 14 in plaats van 44 (allemaal
   Verzendingen) en op Bestellingen op 1000 px 0 in plaats van 11. overflow-wrap:anywhere blijft bewust staan: een
   code of e-mailadres mag een kolom laten krimpen in plaats van de tabel buiten het scherm te duwen
   (met break-word schoof Verzendingen op 1280 px 60 px buiten beeld, en dat is precies de
   scrollbalk waar Johan op 15-09 klaar mee was). Wat dan nog midden in een woord breekt is een
   te smalle kolom in een tabel met veel kolommen; dat lost de lijstindeling op (A.3.4: hooguit zes
   kolommen, rr-woorden-heel op de naamkolom), niet dit globale vangnet. */
.fi-ta-cell .fi-ta-text {
  overflow-wrap: anywhere;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* CIJFERS, CODES EN TEKST IN EEN TABEL DIE NIET MAG AFBREKEN (Terug te betalen, herstelronde 14-10).
   De globale regel hierboven (overflow-wrap:anywhere + hyphens:auto) laat elke kolom tot een teken krimpen:
   een bedrag brak na het euroteken, een creditnotanummer op het koppelteken, een IBAN teken voor teken en
   "Correctie" werd "Cor-rectie". Twee klassen die een TextColumn via extraAttributes(['class' => ...]) krijgt:
   - rr-een-regel: bedragen, nummers en IBAN's op een regel, nooit afgebroken. De kolom is dan zo breed als zijn
     inhoud, en de tabel kiest daarom zelf welke kolommen krimpen (de tekstkolommen).
   - rr-woorden-heel: tekst die mag omslaan, maar alleen op een spatie en nooit met een afbreekstreepje;
     een lange toelichting blijft binnen 14rem.
   rr-nowrap is dezelfde regel voor een stukje tekst binnen zo'n cel (bijvoorbeeld een batchnummer). */
.fi-ta-cell .fi-ta-text.rr-een-regel,
.fi-ta-cell .fi-ta-text.rr-een-regel * {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.fi-ta-cell .fi-ta-text.rr-woorden-heel {
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.fi-ta-cell .fi-ta-text.rr-woorden-heel > p,
.fi-ta-cell .fi-ta-text.rr-woorden-heel .fi-ta-text-item-description {
  max-width: 14rem;
}

.rr-nowrap {
  white-space: nowrap;
}

/* Onder 1280px breed is er in "Terug te betalen" geen ruimte voor de kolom Wijze: die verdwijnt (visibleFrom('xl')) en
   de wijze staat boven de toelichting bij het IBAN. Vanaf 1280px is die extra regel er niet (de kolom zelf is er dan).
   De cellen krijgen onder 1280px ook minder opvulling, zodat de tabel in een smal venster niet door de rand schuift. */
@media (min-width: 1280px) {
  .rr-tot-xl {
    display: none;
  }
}

@media (max-width: 1279.98px) {
  .fi-ta-cell .fi-ta-text.rr-een-regel,
  .fi-ta-cell .fi-ta-text.rr-woorden-heel {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.rr-let-op {
  color: var(--status-rood-tekst);
  font-weight: 600;
}

/* Rijacties dichter op elkaar: de actiekolom kost zo minder breedte. */
.fi-ta-actions {
  gap: 8px;
}

/* GRIJZE ICOONKNOPPEN OVERAL (toets 15-10, I4 en D.1 punt 2): Filament zet ze op grijs 400 (2,5:1 op wit,
   2,35:1 op het canvas, bijvoorbeeld "Alle filters verwijderen"). Een bedienbaar icoon moet 3:1 halen
   (WCAG 1.4.11): ink-600, bij hover ink-950. Het icoon in het pagineringsknopje volgt dezelfde regel. */
.fi-icon-btn.fi-color-gray,
.fi-pagination-item-icon {
  color: var(--ink-600);
}

.fi-icon-btn.fi-color-gray:hover,
.fi-pagination-item-button:hover .fi-pagination-item-icon {
  color: var(--ink-950);
}

/* RIJ-ICOONKNOPPEN (toets 15-10, I4). Het menu van een rij en het potlood waren ink-400 en amber-500
   (2,5:1 en 2,0:1 op wit) en daarmee bijna onzichtbaar. Ink-600 haalt 5,5:1; bij hover een amber-50
   vlak met ink-950, zoals het portaal. De naam voor schermlezers komt uit het label van de knop
   (AppServiceProvider geeft elke groep acties standaard de naam "Meer acties"). */
.fi-ta-actions .fi-icon-btn {
  color: var(--ink-600);
}

.fi-ta-actions .fi-icon-btn:hover {
  background-color: var(--amber-50);
  color: var(--ink-950);
}

/* Celtekst in extra klein (->size('xs'), bijvoorbeeld de kolom Bron) was 12 px; inhoud is 14 px (0.4 en A.1.3).
   Alleen de grootte, niet de kleur of het gewicht: de kolom blijft een rustige tweede stem. */
.fi-ta-cell .fi-ta-text-item-label.text-xs,
.fi-ta-cell .fi-ta-text-item-description.text-xs {
  font-size: 14px;
  line-height: 20px;
}

/* Een lege cel ("Nog niemand", de streep) stond in ink-400 (2,5:1 op wit); ink-500 haalt AA. */
.fi-ta-cell .fi-ta-placeholder {
  color: var(--ink-500);
}

/* Een grijs icoon in een tabelkolom (bijvoorbeeld "niet vastgezet") was ink-400 (2,5:1): het icoon draagt de
   status, dus ink-500 (5:1 op wit). Groen en rood houden hun eigen tint. */
.fi-ta-icon-item.fi-color-gray {
  color: var(--ink-500);
}

/* Dezelfde regel voor een lege waarde op een bekijkpagina ("Nog niet", "Niet ingesteld"): ink-400 haalt 2,5:1. */
.fi-in-placeholder {
  color: var(--ink-500);
}

/* HET HUIDIGE PAGINANUMMER (toets 15-10, I4): amber-600 op het canvas haalde 2,8:1. Nu ink-950, dik,
   op een amber-100 pil (vlak én tekst: twee signalen, dus niet alleen kleur). */
.fi-pagination-item.fi-active .fi-pagination-item-label {
  color: var(--ink-950);
  font-weight: 700;
}

.fi-pagination-item.fi-active .fi-pagination-item-button {
  background-color: var(--amber-100);
}

/* Kaartweergave (bijv. taken): elke kaart hoort bij dezelfde familie. */
.fi-ta-content-grid .fi-ta-record {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.fi-ta-content-grid .fi-ta-record:hover {
  background-color: var(--surface);
  box-shadow: var(--shadow-card-hover);
}


/* ==========================================================================
   9. TABS
   Pill-stijl zoals het portaal: verzonken ondergrond, actieve tab wit met
   schaduw. Radius van de bak = radius van de pil + binnenruimte (9 + 4).
   ========================================================================== */
.fi-tabs:not(.fi-contained) {
  gap: 4px;
  padding: 4px;
  border-radius: calc(var(--radius-control) + 4px);
  background-color: var(--surface-sunken);
  box-shadow: none;
}

.fi-tabs.fi-contained {
  gap: 4px;
  border-color: var(--border-subtle);
}

.fi-tabs-item {
  padding: 8px 12px;
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 500;
}

.fi-tabs-item .fi-tabs-item-label {
  color: var(--ink-600);
}

.fi-tabs-item:hover .fi-tabs-item-label {
  color: var(--ink-900);
}

.fi-tabs-item:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

.fi-tabs-item.fi-active {
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
  color: var(--ink-950);
  font-weight: 600;
}

.fi-tabs-item.fi-active .fi-tabs-item-icon {
  color: var(--amber-600);
}

/* In een witte kaart (formuliertabs) is de actieve pil juist verzonken. */
.fi-tabs.fi-contained .fi-tabs-item.fi-active {
  background-color: var(--surface-sunken);
  box-shadow: none;
}

/* 9b. Tabbladen breken overal af, ze schuiven nooit (sectie 5a2 deed dat onder 1280px). Een langer label
   ("Geschiedenis" i.p.v. "Audit log") liet op 1280px een tab achter de schuifbalk verdwijnen. */
.fi-tabs {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 4px;
}


/* ==========================================================================
   10. BADGES (statuspil, ontwerp A.3.12)
   Volle pil zonder rand, 24 hoog, 13 / 700, tekst in -strong (trap 600) op het
   vlak (trap 50) met links een punt van 6px in de basiskleur (trap 500). Zo
   kloppen alle bestaande ->badge()->color()-kolommen vanzelf. Status draagt
   altijd tekst plus kleur; de kleur is nooit de enige drager.
   Geen punt bij: een badge met icoon of verwijderknop, een extra kleine badge
   (px-0.5) en een getal in het menu (daar telt het getal, zie hieronder).
   ========================================================================== */
.fi-badge {
  gap: 6px;
  min-height: 24px;
  border-radius: var(--radius-pill);
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
}

/* xs-badges (px-0.5) houden hun compacte maat. */
.fi-badge:not(.px-0\.5) {
  padding-block: 2px;
  padding-inline: 10px;
}

.fi-badge::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--status-grijs-punt);
}

.fi-badge.px-0\.5::before,
.fi-badge:has(.fi-badge-icon, .fi-badge-delete-button)::before,
.fi-sidebar-item .fi-badge::before {
  content: none;
}

.fi-badge.fi-color-gray {
  background-color: var(--status-grijs-bg);
  color: var(--status-grijs-tekst);
}

.fi-badge.fi-color-warning {
  background-color: var(--status-amber-bg);
  color: var(--status-amber-tekst);
}

.fi-badge.fi-color-warning::before {
  background-color: var(--status-amber-punt);
}

/* Het merk zelf als pil: amber-100 met amber-700 (5,1:1). */
.fi-badge.fi-color-primary {
  background-color: var(--amber-100);
  color: var(--amber-700);
}

.fi-badge.fi-color-primary::before {
  background-color: var(--amber-500);
}

.fi-badge.fi-color-info {
  background-color: var(--status-blauw-bg);
  color: var(--status-blauw-tekst);
}

.fi-badge.fi-color-info::before {
  background-color: var(--status-blauw-punt);
}

.fi-badge.fi-color-success {
  background-color: var(--status-groen-bg);
  color: var(--status-groen-tekst);
}

.fi-badge.fi-color-success::before {
  background-color: var(--status-groen-punt);
}

.fi-badge.fi-color-danger {
  background-color: var(--status-rood-bg);
  color: var(--status-rood-tekst);
}

.fi-badge.fi-color-danger::before {
  background-color: var(--status-rood-punt);
}

/* Alleen voor "omgezet" en "creditnota" (zoals het portaal); in gebruik vanaf brok 15. */
.fi-badge.fi-color-bijzonder {
  background-color: rgb(var(--bijzonder-50, 241, 236, 247));
  color: rgb(var(--bijzonder-600, 91, 62, 134));
}

.fi-badge.fi-color-bijzonder::before {
  background-color: rgb(var(--bijzonder-500, 124, 91, 184));
}

/* Een getal in het menu betekent "er is werk": amber-100 met amber-700 is
   nadruk, geen alarm (ontwerp A.1.2). Wordt het te laat, dan geeft de bron
   danger en wordt het rood. */
.fi-sidebar-item .fi-badge.fi-color-warning {
  background-color: var(--amber-100);
  color: var(--amber-700);
}


/* ==========================================================================
   11. KNOPPEN (ontwerp A.3, portaal rr-knop)
   Primair = vlak amber met charcoal tekst, 800; hover --amber-hover, actief
   --amber-600; geen verloop, geen glans, geen lift. Secundair = wit met 1px
   --border-strong, 700, hover amber rand. Uit-staat is neutraal (verzonken
   vlak), nooit een halve amber knop. Hoogtes op het 8px-grid.
   Alleen losse knoppen (.rounded-lg); knoppen in een knoppengroep houden
   Filaments aaneengesloten vorm.
   ========================================================================== */
.fi-btn.rounded-lg {
  border-radius: var(--radius-control);
  font-weight: 700;
}

.fi-btn.fi-size-sm {
  min-height: 36px;
}

.fi-btn.fi-size-md,
.fi-btn.fi-size-lg {
  min-height: 40px;
}

.fi-btn.fi-size-xl {
  min-height: 48px;
}

.fi-btn.rounded-lg.fi-color-primary:not(.fi-btn-outlined):not(label) {
  background: var(--amber-500);
  color: var(--on-amber);
  font-weight: 800;
  box-shadow: none;
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.fi-btn.rounded-lg.fi-color-primary:not(.fi-btn-outlined):not(label):hover {
  background: var(--amber-hover);
}

.fi-btn.rounded-lg.fi-color-primary:not(.fi-btn-outlined):not(label):active {
  background: var(--amber-600);
  transform: scale(0.985);
}

.fi-btn.rounded-lg.fi-color-primary:not(.fi-btn-outlined):not(label) .fi-btn-icon {
  color: currentColor;
}

/* Toetsenbordfocus op een knop: de halo erbij, de hoekradius blijft. De
   outline van sectie 3 blijft staan. */
.fi-btn.rounded-lg:focus-visible {
  box-shadow: 0 0 0 3px var(--amber-ring);
}

.fi-btn.rounded-lg.fi-color-gray:not(.fi-btn-outlined):not(label) {
  background-color: var(--surface);
  color: var(--ink-950);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-xs);
}

.fi-btn.rounded-lg.fi-color-gray:not(.fi-btn-outlined):not(label):hover {
  background-color: var(--surface);
  color: var(--ink-950);
  box-shadow: 0 0 0 1px var(--amber-500), var(--shadow-xs);
}

.fi-btn.rounded-lg.fi-color-gray:not(.fi-btn-outlined):not(label):focus-visible {
  box-shadow: 0 0 0 1px var(--amber-500), 0 0 0 3px var(--amber-ring);
}

.fi-btn.rounded-lg.fi-color-gray:not(.fi-btn-outlined):not(label) .fi-btn-icon {
  color: var(--ink-500);
}

/* Gevulde waarschuwings- en succesknoppen: wit op trap 600 haalt AA, maar
   Filaments hover (trap 500) haalt dat voor deze twee niet meer (3,4:1 en 4,1:1,
   en de oude regel die de tekst donker maakte klopt niet meer nu waarschuwing niet
   langer amber is). Hover gaat daarom naar trap 700, donkerder in plaats van lichter. */
.fi-btn.rounded-lg.fi-color-warning:not(.fi-btn-outlined):not(label):hover {
  background-color: rgb(var(--warning-700));
}

.fi-btn.rounded-lg.fi-color-success:not(.fi-btn-outlined):not(label):hover {
  background-color: rgb(var(--success-700));
}

/* Een amberkleurige tekstlink is amber-700 (5,8:1 op wit); trap 600 haalt maar
   3,1:1. De onderstreping bij hover komt van Filament zelf. */
.fi-link.fi-color-primary .text-custom-600,
.fi-link.fi-color-primary .fi-link-icon {
  color: var(--amber-700);
}

/* Tekst in primary-600 (amber-600) haalt maar 3,1:1 op wit en 2,8:1 op het canvas. Filament zet die
   trap op losse labels in eigen blades (bijvoorbeeld een "v.a. prijs"); als tekst is amber-700 de kleur. */
.text-primary-600 {
  color: var(--amber-700);
}

/* ÉÉN AMBER KNOP PER SCHERM (D.1 punt 6). Kortingsniveaus en Controleregels herhalen de aanmaakknop
   uit de paginakop in de kop van de tabel (en in de lege staat): "Kortingsniveau aanmaken" stond twee
   keer in amber. Heeft de paginakop al een primaire knop, dan wordt de herhaling in de tabelkop of de
   lege staat secundair (wit met rand, hover amber rand), met dezelfde actie. Alleen die twee plekken:
   knoppen in de werkbalk, in een rij of in een venster blijven zoals ze zijn. */
.fi-page:has(.fi-header .fi-btn.fi-color-primary) :is(.fi-ta-header, .fi-ta-empty-state) .fi-btn.rounded-lg.fi-color-primary:not(.fi-btn-outlined):not(label) {
  background: var(--surface);
  color: var(--ink-950);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-xs);
}

.fi-page:has(.fi-header .fi-btn.fi-color-primary) :is(.fi-ta-header, .fi-ta-empty-state) .fi-btn.rounded-lg.fi-color-primary:not(.fi-btn-outlined):not(label):hover {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--amber-500), var(--shadow-xs);
}

.fi-page:has(.fi-header .fi-btn.fi-color-primary) :is(.fi-ta-header, .fi-ta-empty-state) .fi-btn.rounded-lg.fi-color-primary:not(.fi-btn-outlined):not(label) .fi-btn-icon {
  color: var(--ink-500);
}

/* Uit-staat. Alleen de knoppen die de server uitzet (Filament zet dan de klasse
   pointer-events-none): een knop die even uit staat tijdens een Livewire-verzoek
   krijgt alleen het attribuut en blijft dus gewoon amber. Een knop met een reden
   als tooltip (pointer-events:auto) blijft hetzelfde ogen, ook bij hover. */
.fi-btn.rounded-lg.fi-color-primary.pointer-events-none:not(.fi-btn-outlined):not(label),
.fi-btn.rounded-lg.fi-color-primary.pointer-events-none:not(.fi-btn-outlined):not(label):hover,
.fi-btn.rounded-lg.fi-color-primary[aria-disabled="true"]:not(.fi-btn-outlined):not(label),
.fi-btn.rounded-lg.fi-color-primary[aria-disabled="true"]:not(.fi-btn-outlined):not(label):hover {
  background: var(--surface-sunken);
  color: var(--ink-500);
  opacity: 1;
  box-shadow: none;
  transform: none;
}

.fi-btn.rounded-lg.fi-color-gray.pointer-events-none:not(.fi-btn-outlined):not(label),
.fi-btn.rounded-lg.fi-color-gray.pointer-events-none:not(.fi-btn-outlined):not(label):hover,
.fi-btn.rounded-lg.fi-color-gray[aria-disabled="true"]:not(.fi-btn-outlined):not(label),
.fi-btn.rounded-lg.fi-color-gray[aria-disabled="true"]:not(.fi-btn-outlined):not(label):hover {
  opacity: 0.5;
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-xs);
}


/* ==========================================================================
   12. INVOERVELDEN
   Radius 10, rand --border-strong, minimaal 40px hoog (ook selects en
   datumkiezers: de wrapper krijgt de hoogte en centreert zijn inhoud, zodat
   formulierrijen gelijk hoog blijven). Focus: amber rand met een zachte halo
   van 3px zoals het portaal.
   ========================================================================== */
.fi-input-wrp {
  align-items: center;
  min-height: 40px;
  border-radius: var(--radius-control);
}

/* Randkleur via Tailwinds ring-variabele; een ongeldig veld (.fi-invalid)
   houdt zijn rode ring. */
.fi-input-wrp:not(.fi-invalid) {
  --tw-ring-color: var(--border-strong);
}

/* Specificiteit bewust hoger dan Filaments focus-within-variant, zodat de
   halo zonder !important wint. 1px rand + 3px zichtbare halo. */
.fi-input-wrp:not(.fi-invalid):not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
  box-shadow: 0 0 0 1px var(--amber-500), 0 0 0 4px var(--amber-ring);
}

/* Placeholder in ink-500: Filaments ink-400 haalt geen leesbaar contrast. */
.fi-input-wrp input::placeholder,
.fi-input-wrp textarea::placeholder {
  color: var(--ink-500);
}

/* Veldlabel 14 / 600 in ink-700. */
.fi-fo-field-wrp-label {
  font-weight: 600;
  color: var(--ink-700);
}


/* Het kruisje van een gekozen waarde in een keuzelijst (Choices.js, bijvoorbeeld de verzendmethode op een
   bestelling) heeft verborgen tekst "Remove item" (text-indent buiten beeld) in grijs; de meting telde die
   als tekst met 3,3:1. Het kruisje zelf is een afbeelding. Ink-600 haalt AA, dus ook als de tekst ooit
   zichtbaar wordt. */
.choices__button {
  color: var(--ink-600);
}


/* ==========================================================================
   13. MODALS EN DROPDOWNS
   Radius 16, schaduw-xl, titel 18 / 700, voet op --surface-hover met een
   hairline erboven, en een gewassen achtergrond (blur) zoals het portaal.
   ========================================================================== */
.fi-modal-window:not(.fi-modal-slide-over-window) {
  border-radius: var(--radius-card);
  box-shadow: var(--ring-hairline), var(--shadow-xl);
}

.fi-modal-close-overlay {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Een plakkende kop/voet heeft een eigen witte achtergrond: die moet de
   hoekradius van het venster volgen, anders steken er witte hoekjes uit. */
.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-header.fi-sticky {
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}

.fi-modal-header.fi-sticky {
  border-color: var(--border-subtle);
}

/* De voet staat op surface-hover, met een hairline erboven en eigen
   binnenruimte; de onderhoeken volgen het venster. */
.fi-modal-footer {
  padding-block: 16px;
  border-top: 1px solid var(--border-subtle);
  background-color: var(--surface-hover);
}

.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-footer {
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}

.fi-modal-heading {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink-950);
}

.fi-modal-description {
  color: var(--ink-600);
}

.fi-dropdown-panel {
  border-radius: var(--radius-card);
  box-shadow: var(--ring-hairline), var(--shadow-lg);
}


/* ==========================================================================
   14. NOTIFICATIES
   Losse meldingen als zwevende kaart (radius 10, tint van de soort, rand 25%,
   icoon 20px in de basiskleur, titel 14 / 700); meldingen in de
   meldingenlijst (.fi-inline) blijven vlak.
   ========================================================================== */
.fi-no-notification:not(.fi-inline) {
  border-radius: var(--radius-control);
  box-shadow: var(--ring-hairline), var(--shadow-lg);
}

.fi-no-notification.fi-color-custom:not(.fi-inline) {
  --tw-ring-color: rgb(var(--c-600) / 0.25);
}

.fi-no-notification-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-950);
}

.fi-no-notification-body {
  font-size: 14px;
  color: var(--ink-800);
}

.fi-no-notification-date {
  font-size: 12px;
  color: var(--ink-500);
}

.fi-no-notification-icon {
  width: 20px;
  height: 20px;
}

.fi-no-notification-icon.fi-color-success { color: rgb(var(--success-500)); }
.fi-no-notification-icon.fi-color-warning { color: rgb(var(--warning-500)); }
.fi-no-notification-icon.fi-color-danger  { color: rgb(var(--danger-500)); }
.fi-no-notification-icon.fi-color-info    { color: rgb(var(--info-500)); }
.fi-no-notification-icon.fi-color-primary { color: rgb(var(--primary-600)); }


/* ==========================================================================
   15. LEGE STAAT (Filament-tabellen)
   Icoon, één zin, eerste actie. Voor eigen blades: .rr-leeg (sectie 18).
   ========================================================================== */
.fi-ta-empty-state-icon-ctn {
  background-color: var(--surface-sunken);
}

.fi-ta-empty-state-icon {
  color: var(--ink-500);
}

.fi-ta-empty-state-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
}

.fi-ta-empty-state-description {
  font-size: 14px;
  color: var(--ink-600);
}


/* ==========================================================================
   16. WIDGETS EN CIJFERS
   ========================================================================== */
.fi-wi-stats-overview-stat {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.fi-wi-stats-overview-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-600);
}

.fi-wi-stats-overview-stat-value {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-950);
}

.fi-wi-stats-overview-stat-description {
  font-size: 13px;
}


/* ==========================================================================
   17. LOGINPAGINA
   Warm canvas met één kaart. Op mobiel blijft de kaart schermbreed zonder
   hoeken, zoals Filament hem bedoelt.
   ========================================================================== */
.fi-simple-layout {
  background-color: var(--canvas);
}

.fi-simple-main {
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-card);
}

@media (max-width: 639.98px) {
  .fi-simple-main {
    border-radius: 0;
  }
}

.fi-simple-header-heading {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-950);
}

.fi-simple-header-subheading {
  color: var(--ink-600);
}


/* ==========================================================================
   18. CONTRACT: rr-*-KLASSEN
   --------------------------------------------------------------------------
   Gedeeld contract voor alle eigen CRM-blades (CRM-ONTWERPTAAL §8). Gebruik
   deze klassen in plaats van Tailwind-utilities. Kort per klasse:

   rr-page              Verticale paginastapel, 24px tussenruimte.
   rr-grid-2/-3/-4      Responsive raster, 16px gap. Onder 768px één kolom;
                        tussenstap twee kolommen tot er ruimte is voor 3
                        (vanaf 1200px) of 4 (vanaf 1280px).
   rr-card              Witte kaart, radius 14px, hairline + zachte schaduw,
                        24px binnenruimte.
   rr-card--klikbaar    Klikbare kaart: diepere schaduw bij hover, cursor.
   rr-card__kop         Kaartkop 16px/600: titel links, actie rechts.
   rr-eyebrow           Klein label boven iets: 11px/600, hoofdletters.
   rr-titel             Paginatitel 28px/700.
   rr-tekst             Lopende tekst 14px.
   rr-meta              Secundaire tekst 13px.
   rr-getal             Groot getal 32px/700, even brede cijfers.
   rr-tegel             Actietegel: kaart met eyebrow, getal, uitlegregel en
                        pijl rechtsonder (kind .rr-tegel__pijl).
     --rustig           Getal 0: groen accent bij "Alles bij".
     --aandacht         Amber accentstreep links.
     --probleem         Rode accentstreep links.
   rr-lijst             Gestapelde rijen met zachte scheidingslijn (ul of div).
   rr-lijst__rij        Rij: flex, 12px verticaal, hover-tint. Heeft 12px
                        zij-ruimte in de ouder nodig (rr-card heeft 24px).
   rr-statusstrook      Brede strook bovenaan een detailpagina: badge,
                        kerngegevens en rechts de volgende stap.
   rr-volgende-stap     Amber-50 vlak met amber-700 tekst.
   rr-kv                Definitielijst: label links (13px), waarde rechts.
   rr-details           Native <details>, summary "Technische details" met
                        chevron; inhoud op verzonken ondergrond.
   rr-badge(--kleur)    Statuspil 12px/600: --grijs --amber --blauw --groen
                        --rood. Zelfde tinten als de Filament-badges.
   rr-knop(--variant)   Knop 40px hoog: --primair (amber) of --secundair (wit).
   rr-leeg              Lege staat: icoon, één zin, eerste actie.
   rr-icoon(--maat)     Heroicon (inline SVG uit App\Support\CrmIcoon): 16px in
                        tekst en pillen, --knop 20px, --groot 24px.
   rr-muted-num         Getal rechts uitgelijnd, even brede cijfers.

   Twee klassenamen bestonden al vóór dit contract en worden hier bewust
   uitgesloten, zodat bestaande schermen niet veranderen:
   - .rr-tegel direct na .rr-tegel-input = de keuzetegels in de doorzet-
     modals (resources/views/filament/forms/), die hun opmaak inline zetten.
   - .rr-leeg direct in .rr-regel-rij = een lege cel in de offerteregel-
     tabel (app/Filament/Forms/OfferteRegelTabel.php), die op mobiel
     verborgen wordt.
   ========================================================================== */

/* ---------- Layout ---------- */
.rr-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.rr-grid-2,
.rr-grid-3,
.rr-grid-4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .rr-grid-2,
  .rr-grid-3,
  .rr-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .rr-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .rr-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Kaarten ---------- */
.rr-card {
  min-width: 0;
  padding: 24px;
  background-color: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--ink-800);
}

a.rr-card {
  display: block;
  text-decoration: none;
}

.rr-card--klikbaar {
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.rr-card--klikbaar:hover {
  box-shadow: var(--shadow-card-hover);
}

.rr-card__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink-900);
}

.rr-card__kop > :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* ---------- Typografie ---------- */
.rr-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.rr-titel {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-950);
}

.rr-tekst {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-800);
}

.rr-meta {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-600);
}

a.rr-meta {
  text-decoration: none;
}

a.rr-meta:hover {
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rr-getal {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-950);
}

/* ---------- Actietegels ---------- */
.rr-tegel:not(.rr-tegel-input + .rr-tegel) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 24px;
  background-color: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--ink-800);
  text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.rr-tegel:not(.rr-tegel-input + .rr-tegel):is(a, button, .rr-card--klikbaar):hover {
  box-shadow: var(--shadow-card-hover);
}

.rr-tegel__pijl {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  color: var(--ink-400);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.rr-tegel__pijl svg {
  width: 20px;
  height: 20px;
}

.rr-tegel:is(a, button, .rr-card--klikbaar):hover .rr-tegel__pijl {
  color: var(--amber-600);
  transform: translateX(2px);
}

/* Rustig (0): het getal groen (32px vet = grote tekst, 4,1:1 volstaat) en
   een groene stip voor "Alles bij". De tekst draagt de betekenis, de kleur
   ondersteunt alleen. */
.rr-tegel--rustig .rr-getal {
  color: var(--success);
}

.rr-tegel--rustig .rr-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--success-strong);
}

.rr-tegel--rustig .rr-meta::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--success);
}

.rr-tegel--aandacht::before,
.rr-tegel--probleem::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background-color: var(--amber-500);
}

.rr-tegel--probleem::before {
  background-color: rgb(var(--danger-600, 220, 38, 38));
}

/* ---------- Lijsten ---------- */
.rr-lijst {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rr-lijst > li {
  margin: 0;
}

.rr-lijst > * + * {
  border-top: 1px solid var(--border-subtle);
}

.rr-lijst__rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  margin-inline: -12px;
  padding: 12px;
  border-radius: var(--radius-control);
  font-size: 14px;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.rr-lijst__rij:hover {
  background-color: var(--surface-hover);
}

/* ---------- Detailpagina ---------- */
.rr-statusstrook {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 16px 24px;
  background-color: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-800);
}

/* De statusbadge is hier de blikvanger: iets groter dan in een lijst. */
.rr-statusstrook > .rr-badge {
  min-height: 28px;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 20px;
}

.rr-statusstrook > .rr-volgende-stap {
  margin-inline-start: auto;
}

@media (max-width: 767.98px) {
  .rr-statusstrook {
    padding: 16px;
  }

  .rr-statusstrook > .rr-volgende-stap {
    width: 100%;
    margin-inline-start: 0;
  }
}

.rr-volgende-stap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-control);
  background-color: var(--amber-50);
  color: var(--amber-700);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.rr-volgende-stap :is(strong, b) {
  font-weight: 600;
}

.rr-volgende-stap svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Hover via onderstreping: een donkerder amber vlak zou onder AA zakken. */
a.rr-volgende-stap:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rr-kv {
  display: grid;
  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 24px;
  margin: 0;
}

/* <dl><div><dt/><dd/></div></dl> is ook geldige HTML: de div doet niet mee. */
.rr-kv > div {
  display: contents;
}

.rr-kv :is(dt) {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-600);
}

.rr-kv :is(dd) {
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

@media (max-width: 479.98px) {
  .rr-kv {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .rr-kv :is(dd) {
    margin-bottom: 8px;
  }
}

/* Technische details: de chevron is puur CSS (randen), zodat er geen
   data-URI nodig is die een Content-Security-Policy kan blokkeren. */
.rr-details {
  margin: 0;
}

.rr-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 8px 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ink-600);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.rr-details > summary::-webkit-details-marker {
  display: none;
}

.rr-details > summary::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-inline: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.rr-details[open] > summary::before {
  transform: rotate(45deg);
}

.rr-details > summary:hover {
  color: var(--ink-900);
}

.rr-details > :not(summary) {
  margin-top: 8px;
  padding: 16px;
  overflow-x: auto;
  border-radius: var(--radius-control);
  background-color: var(--surface-sunken);
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-700);
}

.rr-details :is(pre, code) {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- Badges ---------- */
.rr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(43, 41, 38, 0.06);
  background-color: var(--status-grijs-bg);
  color: var(--status-grijs-tekst);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.rr-badge--grijs {
  background-color: var(--status-grijs-bg);
  color: var(--status-grijs-tekst);
}

.rr-badge--amber {
  background-color: var(--status-amber-bg);
  color: var(--status-amber-tekst);
}

.rr-badge--blauw {
  background-color: var(--status-blauw-bg);
  color: var(--status-blauw-tekst);
}

.rr-badge--groen {
  background-color: var(--status-groen-bg);
  color: var(--status-groen-tekst);
}

.rr-badge--rood {
  background-color: var(--status-rood-bg);
  color: var(--status-rood-tekst);
}

/* ---------- Knoppen ----------
   Zelfde taal als .fi-btn (sectie 11): primair vlak amber (800), secundair
   wit met rand (700) en een amber rand bij hover; uit-staat is neutraal. */
.rr-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-control);
  background-color: var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-xs);
  color: var(--ink-950);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.rr-knop:hover {
  background-color: var(--surface);
  box-shadow: 0 0 0 1px var(--amber-500), var(--shadow-xs);
  color: var(--ink-950);
}

.rr-knop:active {
  transform: scale(0.985);
}

.rr-knop:focus-visible {
  box-shadow: 0 0 0 1px var(--amber-500), 0 0 0 3px var(--amber-ring);
}

.rr-knop svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.rr-knop:is([disabled], [aria-disabled="true"]) {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.rr-knop--secundair {
  background-color: var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-xs);
  color: var(--ink-950);
}

.rr-knop--primair {
  background: var(--amber-500);
  box-shadow: none;
  color: var(--on-amber);
  font-weight: 800;
}

.rr-knop--primair:hover {
  background: var(--amber-hover);
  box-shadow: none;
  color: var(--on-amber);
}

.rr-knop--primair:active {
  background: var(--amber-600);
}

.rr-knop--primair:focus-visible {
  box-shadow: 0 0 0 3px var(--amber-ring);
}

.rr-knop--primair:is([disabled], [aria-disabled="true"]),
.rr-knop--primair:is([disabled], [aria-disabled="true"]):hover {
  background: var(--surface-sunken);
  color: var(--ink-500);
  opacity: 1;
}

/* ---------- Iconen ----------
   Heroicons komen als inline SVG uit CrmIcoon (stroke en kleur volgen
   currentColor). Standaard 16px in tekst en pillen; het width/height-attribuut
   in de SVG zelf geeft dezelfde maat als dit bestand niet laadt. Dit staat
   bewust buiten de beschermde secties 5-0, 5a, 5a2, 5b, 19 en 20. */
.rr-icoon {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  vertical-align: -0.2em;
}

.rr-icoon--knop {
  width: 20px;
  height: 20px;
}

.rr-icoon--groot {
  width: 24px;
  height: 24px;
}

/* Sluitknop en andere losse icoonknop in eigen blades: 40 bij 40, icoon van 24px in ink-600 (5,6:1 op wit).
   Het icoon is altijd een Heroicon (CrmIcoon::svg) en de knop heeft altijd een aria-label. */
.rr-icoonknop {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background-color: transparent;
  color: var(--ink-600);
  cursor: pointer;
}

.rr-icoonknop:hover {
  background-color: var(--surface-sunken);
  color: var(--ink-950);
}

/* Status zonder eigen icoon: een rustig punt van 6px in plaats van een icoon. */
.rr-icoon-punt {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 5px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  vertical-align: middle;
}

/* ---------- Lege staat ---------- */
.rr-leeg:not(.rr-regel-rij > *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-600);
}

/* Het eerste icoon krijgt een zachte cirkel van 48px (24px icoon + 12px). */
.rr-leeg:not(.rr-regel-rij > *) > :is(svg, img):first-child {
  box-sizing: content-box;
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  padding: 12px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-sunken);
  color: var(--ink-500);
}

.rr-leeg:not(.rr-regel-rij > *) > p {
  max-width: 44ch;
  margin: 0;
}

.rr-leeg:not(.rr-regel-rij > *) > :is(.rr-knop, a, button):last-child {
  margin-top: 8px;
}

/* ---------- Getallen ---------- */
.rr-muted-num {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--ink-600);
}


/* ==========================================================================
   19. BEHOUDEN: TEGELTAAL-FOCUS (letterlijk overgenomen uit het oude thema)
   ========================================================================== */

/* ---------- TEGELTAAL (doorzet-modals) ----------
   Zichtbare toetsenbord-focus op de hele tegel; hoort bij de
   .rr-tegel-radio's in resources/views/filament/forms/. */
.rr-tegel-input:focus-visible + .rr-tegel {
    outline: 2px solid rgb(var(--primary-600));
    outline-offset: 2px;
}


/* ==========================================================================
   20. BEHOUDEN: CRM-CONFIGURATOR KLEURHERSTEL (letterlijk overgenomen)
   Functioneel, niet decoratief: zonder deze regels worden knoppen in de
   configurator onzichtbaar. Moet onderaan blijven staan (bronvolgorde).
   ========================================================================== */

/* ============================================================
   CRM CONFIGURATOR — ontbrekende Tailwind-kleuren herstellen
   ------------------------------------------------------------
   Filament serveert alleen zijn eigen kern-CSS; de teal/primary-
   utility-klassen die de native-configurator (Probo-leverstap,
   Berekenen/Laden-knoppen, selectie-styling) gebruikt zitten daar
   NIET in → knoppen werden wit-op-wit onzichtbaar en een gekozen
   leverdatum/verzendmethode kreeg geen zichtbare selectie ("klikken
   doet niets", terwijl de klik wél vuurt).
   Alles gescoped onder .fi-main: dat evenaart de specificiteit van
   de bredere '.fi-page .rounded-xl { background:#fff !important }'-
   regel hierboven en wint door latere bronvolgorde — zo krijgt óók
   een geselecteerde rounded-xl-kaart zijn teal-achtergrond terug.
   Raakt uitsluitend CSS; geen enkele configurator-blade gewijzigd.
   ============================================================ */

/* Achtergronden */
.fi-main .bg-teal-600  { background-color: #0d9488 !important; }
.fi-main .bg-teal-700  { background-color: #0f766e !important; }
.fi-main .bg-teal-100  { background-color: #ccfbf1 !important; }
.fi-main .bg-teal-50   { background-color: #f0fdfa !important; }
.fi-main .bg-teal-50\/40 { background-color: rgba(240,253,250,0.5) !important; }
.fi-main .bg-primary   { background-color: #d97706 !important; }
.fi-main .bg-primary\/90 { background-color: #c2680a !important; }
.fi-main .bg-primary\/5  { background-color: rgba(217,119,6,0.06) !important; }
.fi-main .bg-amber-50  { background-color: #fffbeb !important; }
.fi-main .bg-green-100 { background-color: #dcfce7 !important; }
.fi-main .bg-red-50    { background-color: #fef2f2 !important; }

/* Randen */
.fi-main .border-teal-600 { border-color: #0d9488 !important; }
.fi-main .border-teal-500 { border-color: #14b8a6 !important; }
.fi-main .border-teal-500\/60 { border-color: rgba(20,184,166,0.6) !important; }
.fi-main .border-teal-500\/50 { border-color: rgba(20,184,166,0.5) !important; }
.fi-main .border-teal-300 { border-color: #5eead4 !important; }
.fi-main .border-teal-300\/50 { border-color: rgba(94,234,212,0.5) !important; }
.fi-main .border-teal-100 { border-color: #ccfbf1 !important; }
.fi-main .border-primary  { border-color: #d97706 !important; }
.fi-main .border-amber-200 { border-color: #fde68a !important; }
.fi-main .border-red-200  { border-color: #fecaca !important; }

/* Tekst */
.fi-main .text-teal-900 { color: #134e4a !important; }
.fi-main .text-teal-800 { color: #115e59 !important; }
.fi-main .text-teal-700 { color: #0f766e !important; }
.fi-main .text-teal-600 { color: #0d9488 !important; }
.fi-main .text-primary  { color: #b45309 !important; }
.fi-main .text-amber-800 { color: #92400e !important; }
.fi-main .text-amber-700 { color: #b45309 !important; }
.fi-main .text-amber-600 { color: #d97706 !important; }
.fi-main .text-amber-500 { color: #f59e0b !important; }
.fi-main .text-green-700 { color: #15803d !important; }
.fi-main .text-green-600 { color: #16a34a !important; }
.fi-main .text-red-800  { color: #991b1b !important; }
.fi-main .text-red-600  { color: #dc2626 !important; }

/* Focus-/selectie-ringen (benadering; de border draagt het hoofd-signaal) */
.fi-main .ring-teal-500\/20 { box-shadow: 0 0 0 2px rgba(20,184,166,0.25) !important; }
.fi-main .ring-primary\/30  { box-shadow: 0 0 0 2px rgba(217,119,6,0.3) !important; }
.fi-main .ring-primary      { box-shadow: 0 0 0 2px #d97706 !important; }