/* Overrides op het Syncfusion bootstrap5-thema. Wordt in App.razor direct ná
   _content/Syncfusion.Blazor.Themes/bootstrap5.css gelinkt, zodat deze regels op nette wijze
   winnen zonder verzwaarde selectors of !important. */

/* Accent-tokens: het thema heeft de Bootstrap-primary-blauwtinten hardcoded (geen variabele),
   dus syncfusion-accent.css remapt ze naar deze tokens. Hover/active mengen de tenant-accent met
   zwart, net als Bootstrap zelf (#0d6efd -> #0b5ed7 -> #0a58ca, ~-12%/-20% lightness). */
:root {
    --ht-sf-primary: var(--buttonbackground);
    --ht-sf-primary-hover: color-mix(in srgb, var(--buttonbackground) 88%, #000);
    --ht-sf-primary-active: color-mix(in srgb, var(--buttonbackground) 80%, #000);
    /* Horizontale inset van de grid in een card: gelijk aan de card-body-padding, zodat de
       uitgetrokken grid met zijn celinhoud tóch op de contentrand van de card uitlijnt. */
    --ht-grid-card-inset: 30px;
    /* Verticale celruimte; één token omdat de lege rij dezelfde maat moet aanhouden als een datarij. */
    --ht-grid-cell-padding-y: .9rem;
}

/* Luchtiger rijen, dichter bij de oude DataTables-look. De lege-rij-cel (laadmelding of
   geen-resultaten) telt mee: met dezelfde verticale maat en één regel inhoud is die rij even hoog
   als een datarij, en verspringt de tabel niet zodra de rijen binnenkomen. Het thema zet daar
   0.7em neer; dit bestand wordt erná gelinkt en wint bij gelijke specificiteit. */
.e-grid td.e-rowcell,
.e-grid th.e-headercell,
.e-grid .e-emptyrow td {
    padding-top: var(--ht-grid-cell-padding-y);
    padding-bottom: var(--ht-grid-cell-padding-y);
}

/* Kolomkoppen iets minder zwaar (matcht de rest van de UI). */
.e-grid .e-headercell .e-headertext { font-weight: 500; }

/* Geen omranding rond de grid als geheel (alleen de horizontale rijlijnen blijven). */
.e-grid { border-width: 0; font-family: inherit; }

/* Trek de grid in een card tot de randen van de card-body (negeert de body-padding). */
.card-body .e-grid { margin-left: calc(-1 * var(--ht-grid-card-inset)); margin-right: calc(-1 * var(--ht-grid-card-inset)); }
/* De lege-rij-cel overspant alle kolommen en krijgt de inset dus aan beide kanten; zo begint de
   melding op dezelfde x als de eerste kolomkop erboven en als de eerste cel zodra er rijen zijn. */
.card-body .e-grid td.e-rowcell:first-child,
.card-body .e-grid th.e-headercell:first-child,
.card-body .e-grid td.e-filterbarcell:first-child,
.card-body .e-grid .e-emptyrow td { padding-left: var(--ht-grid-card-inset); }

.card-body .e-grid td.e-rowcell:last-child,
.card-body .e-grid th.e-headercell:last-child,
.card-body .e-grid td.e-filterbarcell:last-child,
.card-body .e-grid .e-emptyrow td { padding-right: var(--ht-grid-card-inset); }

/* Toolbar (zoek/kolomkiezer) zonder eigen achtergrond, zodat hij opgaat in de card. */
.e-grid .e-toolbar,
.e-grid .e-toolbar .e-toolbar-items { background: transparent; }

/* Toolbar heeft standaard een border-top van 1px; weg zodat hij naadloos in de card zit. */
.e-grid .e-toolbar { border-top-width: 0; }