/* PA UI kit: Inter laden voor de gedeelde zijbalk (Filament-pagina's laden de app-bundle niet) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/*
 * 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);
}

/* PA UI kit: zijbalk-zoekveld identiek aan legacy pagina's zodat het menu niet
   verspringt bij navigeren; de Tailwind-utilities uit de sidebar-markup zitten
   niet in de Filament-bundle, dus de maten staan hier expliciet */
input#zoekwaarde {
    min-height: 38px;
    padding: 8px 12px 8px 2.25rem;
    border-radius: 6px;
    font-size: 12.8px;
}

/* PA UI kit: zijbalk-typografie en -spacing gelijk aan de app-bundle;
   de Tailwind-utilities uit de menu-markup zitten niet in de Filament-bundle */
.bg-menu-overwrite,
.bg-menu-overwrite nav {
    font-family: "Inter", "Open Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 12.8px;
    color: rgb(31, 41, 55);
}
.bg-menu-overwrite nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    font-size: 12.8px;
    line-height: 19.2px;
    color: rgb(31, 41, 55);
    text-decoration: none;
}
.bg-menu-overwrite nav li + li {
    margin-top: 4px;
}

/* PA UI kit: menu-badges op de legacy-maat (23px) zodat de menu-items niet verschuiven */
span[class*="min-w-[25px]"][class*="rounded-full"] {
    height: 23px;
    line-height: 15px;
}

/* PA UI kit: recente-dossiers dropdown identiek aan legacy en app-bundle
   (de Tailwind-utilities uit de item-markup zitten niet in de Filament-bundle) */
ul#recenteDossiersUl > li {
    display: flex;
    justify-content: space-between;
    position: relative;
    column-gap: 4px;
    padding: 8px 12px !important;
    margin: 2px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s ease;
}
ul#recenteDossiersUl > li:hover {
    background-color: #eff3fb;
}

/* PA UI kit: widget-koppen op de instellingen-index (Filament laadt de app-bundle niet).
   Zelfde kaart-look als de andere lagen: witte kop, donkere titel, kit-radius */
.widget {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
    margin-bottom: 16px;
    overflow: hidden;
}
.widget .widget-header,
.widget .widget-header.pa-bg-blue,
.widget .widget-header.bordered-bottom.bordered-yellow,
#widgetTitle .widget-header,
#widgetTitle .widget-header.pa-bg-blue {
    background: #fff !important;
    background-color: #fff !important;
    border: 0;
    border-bottom: 1px solid #e5e7eb !important;
    min-height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
}
.widget .widget-caption {
    background: transparent !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 600;
    padding: 0 !important;
    text-shadow: none;
}
.widget .widget-body {
    padding: 16px;
    background: #fff;
}

/* Categorie- en paneltitels (h3-blok) op instellingen-pagina's: kaartkop-stijl
   in plaats van het blauwe balk-blok; zelfde look als de edit-pagina's */
div.bg-white h3.text-white.bg-pa-blue {
    background: transparent !important;
    background-color: transparent !important;
    color: #111827 !important;
    font-size: 13px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
/* Kop-rij van die kaarten: kit-scheidingslijn naar de inhoud */
div.bg-white.shadow > div.px-4.py-2 {
    border-bottom: 1px solid #e5e7eb;
}

/* Op de instellingen-index draagt de kop-rij zelf bg-pa-blue: ook wit maken */
div.bg-white.shadow > div.bg-pa-blue {
    background: #fff !important;
    background-color: #fff !important;
    border-bottom: 1px solid #e5e7eb;
}

/* Widget-kop met tabs op Filament-pagina's (o.a. rollen per module):
   zelfde kit-gedrag als de app-bundle-laag */
.widget > .widget-header {
    background: #fff !important;
    border: 0;
    border-bottom: 1px solid #e5e7eb !important;
    min-height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
}
.widget > .widget-header > .tabbable {
    flex: 1 1 auto;
    min-width: 0;
}
.widget > .widget-header .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 0;
    background: transparent;
}
.widget > .widget-header .nav-tabs > li,
.widget > .widget-header .nav-tabs > li > a {
    border-radius: 6px !important;
    border: 0 !important;
}
.widget > .widget-header .nav-tabs > li > a {
    padding: 10px 15px;
    color: #374151;
    font-size: 12.8px;
    background: transparent;
    margin: 0;
}
.widget > .widget-header .nav-tabs > li.active {
    background: transparent !important;
    background-color: transparent !important;
}
.widget > .widget-header .nav-tabs > li.active > a,
.widget > .widget-header .nav-tabs > li > a.active {
    background-color: #396BC4 !important;
    color: #fff !important;
    border-radius: 6px !important;
}
.widget > .widget-header .nav-tabs > li:not(.active):hover > a {
    background-color: #eff3fb;
    border-radius: 6px !important;
}

/* DataTables binnen de kit: grijze scheidingslijnen in plaats van de rode/thema-lijn */
table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 1px solid #e5e7eb !important;
}
table.dataTable tbody td {
    border-color: #f3f4f6 !important;
}

/* DataTables-zoekveld op kit-maat (zoals het zoekveld op de andere lijstpagina's) */
div.dataTables_filter input[type="search"],
div.dataTables_wrapper input[type="search"],
div.dataTables_wrapper div.dataTables_filter input[type="search"] {
    min-height: 38px;
    padding: 8px 12px;
    padding-left: 36px !important;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #f9fafb;
    font-size: 12.8px;
}

/* Tab-li's niet laten stretchen; de blauwe vulling zit op de link (pill),
   niet op de li — dekt ook de bg-pa-blue utility-variant */
.widget > .widget-header .nav-tabs > li {
    align-self: center;
    background: transparent !important;
    background-color: transparent !important;
}
.widget > .widget-header .nav-tabs > li > a {
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: auto !important;
}
.widget > .widget-header .nav-tabs > li.bg-pa-blue > a,
.widget > .widget-header .nav-tabs > li.text-white > a {
    background-color: #396BC4 !important;
    color: #fff !important;
    border-radius: 6px !important;
}

/* Captions bínnen tab-links zijn tab-labels, geen kaartkoppen: normale regelhoogte */
.widget .widget-header .nav-tabs .widget-caption {
    line-height: 1.4 !important;
    font-size: 12.8px !important;
    font-weight: 500;
    color: inherit !important;
}

/* Zoekbalk boven Filament-lijsten uitlijnen met de eerste kolomtekst (NAAM) */
.fi-ta-header-toolbar {
    padding-left: 35px !important;
}

/* Vergrootglas: het font-icoon (label::before) centreert nooit betrouwbaar door
   geerfde regelhoogtes; vervangen door een background-SVG die altijd exact
   verticaal gecentreerd rendert */
div.dataTables_wrapper .dataTables_filter label::before,
div.dataTables_filter label::before {
    display: none !important;
    content: none !important;
}
div.dataTables_filter input[type="search"],
div.dataTables_wrapper input[type="search"],
div.dataTables_wrapper div.dataTables_filter input[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23396BC4' stroke-width='2'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m13.5 13.5 4 4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 14px 14px !important;
}

/* Export-knoppen (Pdf/Excel) in de lijst-toolbar op kit-maat,
   gelijk aan de exportknoppen op de andere lijstpagina's (32px) */
.fi-ta-header-toolbar button.fi-color,
.fi-ta-header-toolbar a.fi-color,
.fi-ta-actions button.fi-color,
.fi-ta-actions a.fi-color {
    height: 32px;
    font-size: 12.8px;
    padding: 6px 12px;
    border-radius: 6px;
}