/*
 * Filament 4-componentstyling herstellen op legacy-pagina's en pixel-gelijk maken aan de
 * referentie-omgeving (test-app.planningsagenda.net).
 *
 * De globale app-CSS (Tailwind preflight + @tailwindcss/forms base) zet ONGELAYERDE element-resets
 * op bare `select` / `[type=checkbox]` / `button`. Die winnen van Filament 4's `@layer`-CSS,
 * ongeacht specificiteit. Deze override is eveneens ongelayerd en laadt via @filamentStyles ná de
 * app-CSS, en herstelt/matcht de waarden van de referentie.
 */

.fi-select-input,
.fi-input {
    color: var(--gray-950);
}

/* Checkbox: afgeronde hoeken (6px) en lichte rand i.p.v. de grijze forms-plugin-rand. */
.fi-checkbox-input {
    border-radius: var(--radius-md);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Checkbox: de blauwe focus-ring weghalen die als lelijke blauwe rand om de aangevinkte/
   gefocuste (rij-)checkbox bleef staan. Het zwarte vinkje markeert de selectie al duidelijk. */
.fi-checkbox-input:focus,
.fi-checkbox-input:focus-visible,
.fi-checkbox-input:checked {
    box-shadow: none !important;
    outline: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
}

/* Per-pagina select: zelfde hoogte/padding als referentie (was 42px door grote line-height). */
.fi-pagination .fi-select-input {
    padding-block: calc(var(--spacing) * 1.5);
    padding-inline-start: calc(var(--spacing) * 4);
    line-height: 1.5;
}

/* Tabel-actieknoppen (Pdf/Excel): zelfde padding als referentie (Filament 4's sm is kleiner). */
.fi-ta-actions .fi-btn.fi-size-sm {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
}

/*
 * Knop-achtergrond herstellen. Tailwind preflight `button { background-color: transparent }`
 * (ongelayerd) overschreef Filament's gelayerde achtergrond, waardoor o.a. de bulk-actieknop
 * "Verwijderen" wit-op-transparant (onzichtbaar) werd. Filament zet de juiste kleur in `--bg`
 * (incl. hover via de color-classes), dus dit herstelt achtergrond én hover-states. Knoppen zonder
 * achtergrondkleur (ghost/link) hebben geen `--bg` en blijven dus transparant.
 */
.fi-btn {
    background-color: var(--bg);
}

/*
 * Knop-padding herstellen. Tailwind preflight `button { padding: 0 }` (ongelayerd) overschreef
 * Filament's padding, waardoor knoppen zonder eigen padding-override platgedrukt werden. Het meest
 * zichtbaar in de bevestigingsmodal ("Weet u zeker dat u dit wilt doen?"): de "Ja"-knop werd een
 * dunne rode balk. Herstel per maat exact de Filament-defaults.
 */
.fi-btn {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
}

.fi-btn.fi-size-xs {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
}

.fi-btn.fi-size-sm {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
}

.fi-btn.fi-size-lg {
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2.5);
}

.fi-btn.fi-size-xl {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
}

/*
 * Knop-radius herstellen. Filament zet `border-radius: var(--radius-lg)`, maar die viel weg waardoor
 * de modal-knoppen scherpe hoeken kregen. Expliciet herstellen met fallback (8px) voor het geval de
 * Tailwind v4 theme-variabele in deze context niet resolvet.
 */
.fi-btn {
    border-radius: var(--radius-lg, 0.5rem);
}

/*
 * Knop-schaduw + rand herstellen. Filament tekent de subtiele drop-shadow én de 1px rand van knoppen
 * via een composiet box-shadow die op de niet-resolvende Tailwind v4 --tw-shadow/--tw-ring-variabelen
 * leunt (zelfde oorzaak als bij dropdown-panel en paginatie). Daardoor verloren alle knoppen hun
 * schaduw en werd de grijze ("Nee"/Annuleren) knop wit-op-wit/onzichtbaar. Expliciet herstellen.
 */

/* Alle gevulde knoppen (o.a. de rode "Ja"): subtiele drop-shadow. */
.fi-btn:not(.fi-outlined) {
    box-shadow:
        0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Grijze "witte" knop (o.a. "Nee"/Annuleren): witte achtergrond + zichtbare 1px grijze rand. */
.fi-btn:not(.fi-outlined):not(.fi-color) {
    background-color: var(--color-white, #fff);
    color: var(--gray-950);
    box-shadow:
        0 0 0 1px var(--gray-300),
        0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Outlined knoppen: 1px ring + subtiele schaduw. */
.fi-btn.fi-outlined {
    box-shadow:
        0 0 0 1px var(--gray-300),
        0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/*
 * Per-pagina select: toon altijd de niet-compacte variant ("Per pagina │ select"), gelijk aan de
 * referentie. De app-CSS zet `label { display: block }` (ongelayerd) waardoor Filament's responsive
 * compact/niet-compact-toggle niet greep en BEIDE varianten verschenen (dubbele select). We forceren
 * hier de juiste variant.
 */
.fi-pagination .fi-pagination-records-per-page-select.fi-compact {
    display: none;
}

.fi-pagination .fi-pagination-records-per-page-select:not(.fi-compact) {
    display: inline-flex;
}

/*
 * Tabel-rij-scheidingslijnen herstellen. Tailwind preflight `*{ border-width: 0 }` (ongelayerd)
 * verwijderde de border-top die Filament op elke rij zet, waardoor de horizontale lijnen weg waren.
 */
.fi-ta-row {
    border-top: 1px solid var(--gray-200);
}

/*
 * Icon-knoppen (o.a. de kolom-in/uitschakelen-knop) hadden een witte (onzichtbare) icoon-kleur
 * doordat de globale app-CSS de kleur overschreef. Herstel naar Filament's grijs.
 */
.fi-icon-btn {
    color: var(--gray-500);
}

/*
 * Dropdown-panelen (o.a. de kolom-in/uitschakelen-lijst) hadden geen rand of schaduw, waardoor het
 * paneel over de tabel leek te "zweven" zonder afbakening. Oorzaak: Filament's composiet box-shadow
 * leunt op Tailwind v4 `--tw-shadow`/ring-variabelen die hier niet resolveden. Expliciete ring +
 * schaduw zoals Filament bedoelt.
 */
.fi-dropdown-panel {
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--gray-950) 5%, transparent),
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/*
 * Kolom-manager: verberg niet-toggleable kolommen (altijd-zichtbare standaardkolommen). Filament 4
 * toont die met een disabled checkbox; de oude versie liet ze helemaal weg. We tonen dus alleen de
 * optionele kolommen die je daadwerkelijk aan/uit kunt zetten.
 */
.fi-ta-col-manager-item:has(input[type="checkbox"]:disabled) {
    display: none;
}

/*
 * Paginatie-paginanummers: het kader (afgeronde witte pill met 1px ring + schaduw) viel weg doordat
 * Filament's composiet box-shadow op de niet-resolvende Tailwind v4 --tw-shadow/ring-variabelen leunt.
 * Daardoor leken de paginanummers kale tekst. Ring + schaduw + segment-scheidingslijnen expliciet
 * herstellen zoals Filament bedoelt.
 */
.fi-pagination-items {
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent),
        0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.fi-pagination-item {
    border-inline-style: solid;
    border-inline-width: 0.5px;
    border-color: var(--gray-200);
}

/* Paginatie-knoppen: preflight `button{padding:0}` maakte ze piepklein (18x18). Comfortabele,
   vierkante grootte met padding herstellen zoals de referentie (~36x36). */
.fi-pagination-item-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--spacing) * 9);
    min-height: calc(var(--spacing) * 9);
    padding-inline: calc(var(--spacing) * 2);
}

/* Selectie-toolbar ("X records geselecteerd" + "Selecteer alle X" / "Alles deselecteren").
   Twee herstellingen t.o.v. de referentie (v3):
   1) Kleur: deze Filament-links (.fi-link.fi-color) halen hun kleur uit `color: var(--text)`, maar
      `--text` wordt in deze build niet gezet -> kleur valt terug op de geerfde witte toolbar-tekst
      (wit-op-wit, onzichtbaar). Daardoor leken "selecteer alles"/"deselecteer alles" te ontbreken.
      Expliciet de neutrale donkere tekstkleur zetten, gelijk aan de teller ernaast.
   2) Plaatsing: Filament zet de acties via een `margin-inline-start: auto`-wrapper rechts in een rij.
      In v3 stonden ze links, onder de "X records geselecteerd"-teller. Indicator als kolom stapelen,
      links uitlijnen en de auto-marge resetten. */
.fi-ta-selection-indicator {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: calc(var(--spacing) * 1.5);
}
.fi-ta-selection-indicator > * {
    margin-inline-start: 0;
}
.fi-ta-selection-indicator-actions-ctn {
    gap: calc(var(--spacing) * 4);
}
.fi-ta-selection-indicator .fi-link.fi-color {
    color: var(--gray-700);
}