/* ========================================
   GRID SHARED - MudDataGrid/MudTable styling gedeeld door 2+ grid-componenten
   (FilterableGrid, DialogDataGrid) en MudBlazor-brede tabel-defaults
   ======================================== */

/* GLOBAL DATAGRID ROW HEIGHT - minimale regelhoogte 30px */
/* Bij tabelcellen werkt height als min-height: de cel groeit mee als content groter is */
.mud-table-row td {
    height: 33px !important;
}

/* Verberg de dropdown-pijl van de MudAutocomplete in de filter-balk (attribute-veld picker) —
   global (niet scoped), want Blazor CSS isolation's b-scope attribuut landt niet op MudAutocomplete's
   eigen interne adornment-markup, dus een ::deep regel in GridFilterBar.razor.css matcht niets. */
.filter-bar .filter-input .mud-input-adornment-end {
    display: none !important;
}

/* Checked row - achtergrondkleur voor aangevinkte rijen in alle grids */
/* CSS-only: detecteert checked checkbox in eerste kolom via :has() */
.mud-table .mud-table-body .mud-table-row:has(td:first-child .mud-checkbox input:checked),
.mud-table .mud-table-body .mud-table-row.mud-selected-item {
    background-color: var(--bw-color-selection) !important;
}

/* MudDataGrid styling */
.mud-table-cell,
.mud-table-head .mud-table-cell {
    padding: 4px 8px !important;
    font-size: 0.825rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* DataGrid cell styling */
.mud-table .mud-table-cell {
    font-size: 0.825rem !important;
}

/* HEADER TOP BORDER - MudBlazor geeft elke rij alleen een border-bottom (var(--mud-palette-table-lines)),
   dus de kolomkop oogt aan de bovenkant "open" t.o.v. de onderrand eronder. Trek dat gelijk met
   dezelfde lijn erboven. Bij DialogDataGrid mét toolbar (ShowToolbar=true, zoals de Track & Trace-
   dialogs) doet toolbar-row's eigen border-bottom al dienst als bovenrand van de kop — daar niet
   nogmaals toevoegen, anders ontstaat een dubbele lijn net onder de toolbar. */
.grid-panel .mud-table-head .mud-table-cell {
    border-top: 1px solid var(--mud-palette-table-lines);
}

.toolbar-row ~ .grid-panel .mud-table-head .mud-table-cell {
    border-top: none;
}

/* MudDataGrid rendert NoRecordsContent in een <th class="mud-table-empty-row">
   i.p.v. een <td>, waardoor de browser user-agent stylesheet de tekst standaard
   vetgedrukt toont. Gelijktrekken met gewone grid-tekst (centrering blijft staan). */
.mud-table-empty-row {
    font-weight: normal !important;
    font-size: 0.825rem !important;
}

/* Hover effect - consistent across all grids.
   Gebruikt MudBlazor's palette-variabele (op :root door de ThemeProvider) zodat de
   kleur in beide thema's correct is, los van de .mud-theme-dark class-scope. */
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: var(--mud-palette-table-hover) !important;
}

/* TOOLBAR ROW - boven het grid-panel, gedeeld door FilterableGrid en DialogDataGrid.
   Was scoped in FilterableGrid.razor.css, maar Blazor CSS isolation past
   scoped regels alleen toe op elementen uit datzelfde .razor-bestand: DialogDataGrid's eigen
   .toolbar-row-div kreeg de regel dus nooit, en de iconen/border-bottom stonden ongestyled
   (geen align-items: center -> iconen niet op dezelfde hoogte). Hier in grid-shared.css geldt
   hij ongescoped voor beide componenten. */
.toolbar-row {
    padding: 8px 0;
    margin: 0 14px;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
}

/* Toolbar-actie-iconen (filter, verversen, kebab, en record-acties): vaste vierkante knop zodat
   het hover-rondje een nette cirkel is met ruimte rond het icoon, en alle knoppen even groot en
   in lijn staan - ongeacht de breedte van de glyph (de kebab-dots zijn smal). De schuifknop van een
   MudSwitch is ook een mud-icon-button; die houdt de eigen maat van MudBlazor, anders staat het
   bolletje niet midden op de baan. */
.toolbar-row .mud-icon-button:not(.mud-switch-base) {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
}

/* PANEL STYLES - voor correcte tabel hoogte. Gedeeld door FilterableGrid en DialogDataGrid. */
.grid-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.grid-panel .mud-table {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.grid-panel .mud-table-container {
    flex: 1;
    overflow-y: auto;
    /* Horizontale scroll zit BEWUST hier (i.p.v. op de buitenste .mud-data-grid, zie de
       "Vangnet"-regel verderop) zodat de scrollbar direct onder de rijen verschijnt, boven
       de pager — de pager is een sibling NA deze container, dus valt buiten
       zijn scroll-box. MudBlazor wil dit toch al: bij FixedHeader/FixedFooter zet het zelf
       .mud-table-sticky-header/-footer .mud-table-container { overflow-x: auto }; dit
       !important-blok maakt het onvoorwaardelijk (ook zonder Fixed*) en wint van een eerdere
       versie die het hier juist uitzette. Was dat destijds nodig omdat de buitenste
       .mud-data-grid TEGELIJK ook scrolde (dubbele horizontale scrollbar) — dat kan nu niet
       meer: de Vangnet-regel zet die buitenste overflow-x juist vast op hidden. */
    overflow-x: auto !important;
}

/* Houd .mud-table-container op de breedte van z'n eigen parent, ook al zet MudBlazor er
   inline `width: max-content` op (bij `HorizontalScrollbar="true"` OF ResizeMode.Container,
   zie MudDataGrid.razor.cs Stylename/TableStyle — beide grids draaien in ResizeMode.Column
   (een DialogDataGrid met vulkolom in Container, zie VULKOLOM) en zetten daarom expliciet
   HorizontalScrollbar="true"; de portal-SettingsGrid (niet
   overgenomen) komt via ResizeMode.Container aan diezelfde inline style).

   Ongebreideld zou max-content de container LATEN meegroeien met de tabelinhoud, waardoor
   de container zelf nooit smaller is dan de tabel en dus nooit hoeft te scrollen — de
   overflow (en daarmee de horizontale scrollbar) verschuift dan naar de buitenste
   .mud-data-grid, die de pager als sibling omvat en de scrollbar zo ONDER de pager toont.
   Met `width: 100% !important` blijft de container op paneelbreedte staan, zodat een tabel
   die breder is (vaste --bw-col-N kolombreedtes, of nowrap-kolommen zonder fixed layout)
   ZELF over de rand van de container heen gaat — precies de overflow die de container's
   eigen `overflow-x: auto !important` (hierboven) opvangt met een scrollbar aan zijn EIGEN
   onderrand, boven de pager.

   Gescoped op .mud-data-grid (i.p.v. .grid-panel) zodat het ook geldt voor
   grids in dialogs en pagina's zonder grid-panel wrapper. */
.mud-data-grid .mud-table-container {
    width: 100% !important;
}

.mud-data-grid .mud-table-container > table,
.mud-data-grid table.mud-table-root {
    min-width: 100%;
}

/* VASTE KOLOMBREEDTES

   Zonder table-layout: fixed rekent de browser de kolombreedtes elke render opnieuw uit op basis van
   de rij-inhoud. Omdat .mud-table-cell hierboven white-space: nowrap heeft, is de minimale breedte
   van een cel de volle tekstbreedte - dus verspringen alle kolommen zodra er andere data in staat
   (eerste load, filteren, pagineren). Met fixed layout zijn de breedtes van de EERSTE kop-rij
   bepalend en heeft rij-inhoud geen invloed meer.

   De breedtes komen als --bw-col-N binnen op .grid-panel.grid-fixed-cols, gezet door
   FilterableGrid/DialogDataGrid uit ColumnDef.EffectiveWidth. N is de positie in de gerenderde
   kop-rij, dus inclusief de checkbox-kolom als die er is.

   Het zijn PERCENTAGES en samen precies 100%, geen px: MudDataGrid hangt in de laad- en lege staat
   een rij met colspan="1000" in de tabel, en onder fixed layout gaat overruimte eerst naar kolommen
   zonder breedte. Die 998 spookkolommen slokten alle ruimte op, en zodra de data binnenkwam viel die
   rij weg en verspongen de echte kolommen (gemeten: 90/220 -> 282/690). Met shares die al op 100%
   uitkomen blijft er niets te verdelen en is de layout identiek in alle drie de staten.

   BEWUST geen !important en bewust een gewone stylesheet-regel: MudBlazor zet bij een drag-resize
   een inline width op datzelfde <th>, en inline wint hiervan - zo blijft de eigen resize werken. Een
   <colgroup> zou hier NIET werken: onder fixed layout gaat een <col>-breedte VOOR op die van het
   <th>, waardoor slepen geen zichtbaar effect heeft.

   Slepen doet MudBlazor zelf, in ResizeMode.Column: het zet een inline width op de gesleepte <th>
   EN op die van de volgende resizable kolom, met de breedte die de gesleepte kolom vrijgeeft. Omdat
   die twee elkaar opheffen blijft de som exact de tabelbreedte, is er niets te verdelen en staat
   elke andere kolom op de share die hieronder voor haar gedeclareerd is. Vrijgekomen ruimte gaat dus
   naar precies één buur in plaats van proportioneel naar alle kolommen - anders zou de rand onder de
   cursor nauwelijks meeschuiven. Bij pointerup leest portal-chrome.js (BoxwiseGridWidths) de
   gerenderde breedtes terug, waarna de shares opnieuw uit de opgeslagen breedtes komen en de inline
   widths eraf gaan. Kanttekening van deze modus: de LAATSTE kolom heeft geen volgende buur en is
   daarmee niet sleepbaar (MudBlazor stopt de gesture bij pointerdown).

   Scoping: tr:first-child houdt de filterrij (FilterMode.Simple) en de achteraan gehangen
   th.mud-table-loading-rij er buiten. NIET op `.mud-table-container > table` scopen: bij
   kolom-reordering hangt MudDataGrid een <div class="mud-drop-container"> daartussen, waardoor
   zo'n child-selector niets matcht en de tabel stil op auto layout blijft staan.

   .grid-fixed-cols is de bewuste opt-in: fixed layout mag ALLEEN aan als er ook echt --bw-col-N/
   --bw-table-width gezet zijn. FilterableGrid en DialogDataGrid zetten die class op hun .grid-panel
   alleen wanneer ColumnWidthVars niet leeg is; de portal-SettingsGrid (ResizeMode.Container, geen vars) en een
   DialogDataGrid zonder gedeclareerde kolommen krijgen hem niet en blijven dus op auto layout. Zonder
   deze gate zou `.grid-panel` alleen die grids fixed maken met width: auto (--bw-table-width valt
   terug op auto) - precies de "kolommen vastgepind op eerste render"-bug die deze regels elders juist
   oplossen.

   De ladder loopt tot 30; het breedste grid (Inkomend > Voormeldingen) heeft 23 kolommen plus een
   checkbox-kolom. Een kolom voorbij de ladder valt terug op width: auto en krijgt een gelijk deel
   van de resterende ruimte - lelijk, maar niet stuk. */
.grid-panel.grid-fixed-cols table.mud-table-root {
    table-layout: fixed;

    /* Een expliciete tabelbreedte is hier nodig: zonder definitieve breedte leidt Chrome de
       tabelbreedte af uit de rij-inhoud, waardoor de gedeclareerde shares wegvallen zodra die
       breder uitkomt (gemeten: 90/220 werd 341/341). --bw-table-width is de som van dezelfde
       gedeclareerde breedtes, meegegeven door FilterableGrid/DialogDataGrid.

       Vullen doet `.mud-data-grid table.mud-table-root { min-width: 100% }` hierboven. Smalle
       pane houdt de kolommen op hun declaratie en scrollt horizontaal (op .mud-table-container,
       zie hierboven), brede pane verdeelt de overruimte proportioneel. Tijdens een drag-resize
       is de som even oud, maar de tabel groeit toch mee: de som van de inline <th>-breedtes
       vormt de min-content van de tabel. */
    width: var(--bw-table-width, auto);
}

.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(1) { width: var(--bw-col-1); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(2) { width: var(--bw-col-2); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(3) { width: var(--bw-col-3); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(4) { width: var(--bw-col-4); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(5) { width: var(--bw-col-5); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(6) { width: var(--bw-col-6); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(7) { width: var(--bw-col-7); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(8) { width: var(--bw-col-8); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(9) { width: var(--bw-col-9); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(10) { width: var(--bw-col-10); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(11) { width: var(--bw-col-11); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(12) { width: var(--bw-col-12); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(13) { width: var(--bw-col-13); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(14) { width: var(--bw-col-14); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(15) { width: var(--bw-col-15); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(16) { width: var(--bw-col-16); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(17) { width: var(--bw-col-17); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(18) { width: var(--bw-col-18); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(19) { width: var(--bw-col-19); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(20) { width: var(--bw-col-20); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(21) { width: var(--bw-col-21); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(22) { width: var(--bw-col-22); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(23) { width: var(--bw-col-23); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(24) { width: var(--bw-col-24); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(25) { width: var(--bw-col-25); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(26) { width: var(--bw-col-26); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(27) { width: var(--bw-col-27); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(28) { width: var(--bw-col-28); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(29) { width: var(--bw-col-29); }
.grid-panel.grid-fixed-cols .mud-table-head tr:first-child > th:nth-child(30) { width: var(--bw-col-30); }

/* VULKOLOM (ColumnDef.Fill, alleen DialogDataGrid)

   Eén kolom neemt de ruimte die de rest overlaat en groeit mee met haar tekst, zodat een lange
   waarde de grid laat scrollen in plaats van afgekapt te worden. Daarvoor terug naar auto layout,
   maar alleen de vulkolom mag op rij-inhoud reageren:
   - --bw-col-N is hier px (auto voor de vulkolom), geen share. De ladder hierboven zet ze op de <th>.
   - width: max-content laat elke kolom op haar gedeclareerde breedte staan, ook als de tabel breder
     wordt dan de dialog; zonder krimpen de andere kolommen dan naar hun kop-tekst. min-width: 100%
     (hierboven) vult de dialog, en onder auto layout gaat die overruimte naar de kolom zonder breedte.
   - max-width: 0 haalt de tekst van de overige cellen uit de breedteberekening; ze kappen af met de
     ellipsis van .mud-table-cell. --bw-cap-N: none zet dat alleen voor de vulkolom uit. Een vulkolom
     voorbij de ladder wordt afgekapt als de rest - lelijk, niet stuk.
   - contain: inline-size op de kop-inhoud doet hetzelfde voor de kop: zonder zou label + sorteer- en
     optie-icoon de ondergrens van de kolom zijn en kun je hem niet smaller slepen. De kop kapt nu af
     zoals onder fixed layout.
   Slepen loopt hier via ResizeMode.Container (DialogDataGrid): alleen de gesleepte kolom verandert en
   de tabel groeit of krimpt mee. ResizeMode.Column haalt de ruimte bij de buur weg, en die kan onder
   auto layout niet kleiner dan haar inhoud - dan beweegt er niets. MudBlazor's inline width op de
   <th> wint van de ladder. */
.grid-panel.grid-fixed-cols.grid-fill-col table.mud-table-root {
    table-layout: auto;
    width: max-content;
}

.grid-panel.grid-fill-col .mud-table-head tr:first-child > th > :not(.mud-resizer) {
    contain: inline-size;
}

.grid-panel.grid-fill-col .mud-table-body td { max-width: 0; }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(1) { max-width: var(--bw-cap-1, 0); }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(2) { max-width: var(--bw-cap-2, 0); }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(3) { max-width: var(--bw-cap-3, 0); }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(4) { max-width: var(--bw-cap-4, 0); }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(5) { max-width: var(--bw-cap-5, 0); }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(6) { max-width: var(--bw-cap-6, 0); }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(7) { max-width: var(--bw-cap-7, 0); }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(8) { max-width: var(--bw-cap-8, 0); }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(9) { max-width: var(--bw-cap-9, 0); }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(10) { max-width: var(--bw-cap-10, 0); }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(11) { max-width: var(--bw-cap-11, 0); }
.grid-panel.grid-fill-col .mud-table-body td:nth-child(12) { max-width: var(--bw-cap-12, 0); }

/* De buitenste .mud-data-grid mag NOOIT zelf horizontaal scrollen — dat privilege ligt nu
   exclusief bij .mud-table-container (zie hierboven), zodat er precies één horizontale
   scrollbar is en die boven de pager staat. Zonder dit wint MudBlazor's eigen
   inline `overflow-x: auto` (gezet bij HorizontalScrollbar="true"/ResizeMode.Container) en
   scrollt de buitenste container ALSNOG mee zodra .mud-table-container breder is dan zijn
   parent — precies de dubbele-scrollbar situatie die dit bestand eerder omzeilde door de
   binnenste juist uit te zetten. !important wint van die inline style. */
.mud-data-grid {
    overflow-x: hidden !important;
}

/* CHIP STYLES - compacte chips met vaste hoogte */
.mud-table .mud-chip,
.mud-menu .mud-chip,
.mud-popover .mud-chip {
    margin: 0 4px 0 0 !important;
    font-size: 0.7rem !important;
    height: 20px !important;
}

/* DATAGRID PAGER STYLES - geen extra ruimte onder pager */
.mud-table-pagination {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 0 !important;
    margin: 0 !important;
    min-height: 36px !important;
}

/* Paginering mag NIET mee-scrollen bij horizontale scroll. De horizontale scroll staat nu
   op .mud-table-container (zie hierboven), en de pager is daar een sibling NA — dus buiten
   die scroll-box en al vanzelf onaangetast, zonder sticky-trucje. flex-shrink: 0 alleen nog
   nodig zodat de pager z'n eigen hoogte behoudt i.p.v. mee te krimpen in de flex-column.
   Gescoped op .grid-panel zodat het geldt voor alle volledige pagina-grids, maar grids in
   dialogs (zonder grid-panel) hun eigen gedrag behouden. */
.grid-panel .mud-table-pagination {
    flex-shrink: 0;
}

/* SIMPLE FILTER ROW - vereenvoudigde filter regel voor specifieke pagina's */

/* Hoogte van de onderste kop-/filterrij; de sticky-offset van de loading bar rekent hiermee. */
.simple-filter-row {
    --bw-grid-head-row-height: 32px;
}

/* Compactere kolom padding voor hele grid */
.simple-filter-row .mud-table-cell,
.simple-filter-row .mud-table-head .mud-table-cell {
    padding: 4px 4px !important;
}

/* Subtiele grijze achtergrond voor filter row.
   Gebruikt MudBlazor's eigen palette-variabele (op :root gezet door de ThemeProvider)
   zodat de kleur in beide thema's correct is, los van de .mud-theme-dark class-scope.

   MudDataGrid hangt de loading bar als extra <tr> achteraan de thead; :nth-last-child(1 of ...)
   telt die rij niet mee, tr:last-child zou hem opblazen tot een grijze band. */
.simple-filter-row .mud-table-head tr:nth-last-child(1 of :not(:has(.mud-table-loading))) {
    background-color: var(--mud-palette-background-gray) !important;
}

.simple-filter-row .mud-table-head tr:nth-last-child(1 of :not(:has(.mud-table-loading))) th,
.simple-filter-row .mud-table-head tr:nth-last-child(1 of :not(:has(.mud-table-loading))) td {
    background-color: var(--mud-palette-background-gray) !important;
    padding: 4px 4px !important;
    height: var(--bw-grid-head-row-height) !important;
    vertical-align: middle !important;
}

.simple-filter-row .mud-table-head th.mud-table-loading {
    top: var(--bw-grid-head-row-height) !important;
}

/* Verberg filter type icoon in de filterrij - ALLEEN de 2e tr (filterrij), NIET de header rij.
   `tr + tr` matcht alleen een tr die op een andere tr volgt = de filterrij in ColumnFilterRow mode.
   Belangrijk: `tr:last-child` werkt hier NIET, want bij FilterMode="Simple" is er maar 1 tr en
   die zou dan ook gehide worden (sort arrow + kebab in de header verdwijnen). */
.simple-filter-row .mud-table-head tr + tr .mud-icon-button:not(.mud-checkbox .mud-icon-button),
.simple-filter-row .mud-table-head tr + tr .mud-button-root.mud-icon-button:not(.mud-checkbox .mud-icon-button) {
    display: none !important;
}

/* Verberg ALLE iconen in filter row - behalve checkbox iconen in de header */
.simple-filter-row .mud-table-head tr + tr .mud-icon-root:not(.mud-checkbox .mud-icon-root) {
    display: none !important;
}

/* Verwijder "Filter value" placeholder tekst */
.simple-filter-row .mud-table-head input::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

.simple-filter-row .mud-table-head input::-webkit-input-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

.simple-filter-row .mud-table-head input::-moz-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* Filter input velden - outlined dense met witte achtergrond */
.simple-filter-row .mud-table-head tr:last-child .mud-input-control {
    margin: 0 !important;
}

/* Verwijder gap tussen filter elementen */
.simple-filter-row .mud-table-head tr:last-child th>div,
.simple-filter-row .mud-table-head tr:last-child td>div {
    gap: 0 !important;
}

.simple-filter-row .mud-table-head tr:last-child .mud-input {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 3px !important;
}

.simple-filter-row .mud-table-head tr:last-child .mud-input-slot {
    padding: 2px 6px !important;
    min-height: 22px !important;
    height: 22px !important;
    font-size: 0.825rem !important;
    background-color: #ffffff !important;
}

.simple-filter-row .mud-table-head tr:last-child input {
    padding: 0 !important;
    height: 18px !important;
    font-size: 0.825rem !important;
}

/* Dark mode support voor filter-inputs (header-achtergrond loopt via --mud-palette-background-gray) */
.mud-theme-dark .simple-filter-row .mud-table-head tr:last-child .mud-input,
.mud-theme-dark .simple-filter-row .mud-table-head tr:last-child .mud-input-slot {
    background-color: #2a2d31 !important;
    border-color: #35373b !important;
}

/* GRID-PAGINA - een FilterableGrid-pagina, eventueel met een uitleg erboven. Werkt als .page-fill in
   PMA: de negatieve marge heft de padding van .main-content-card op, zodat het grid alleen zijn eigen
   inset van 14px heeft, en de wrapper vult precies de kaart. Alleen het grid scrolt en de paginering
   blijft onderaan staan. Filteren gaat via de filterbalk van het grid.
   Gebruikt door: ActivityLog, McpCallLog, QueueStatus, StagingOverview, ProductionOverview, McpTools,
   PromptRegistry, Taxonomie, Terminology. */
.grid-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: -16px -24px;
}

.grid-page > div.page-container {
    height: auto;
    flex: 1;
    min-height: 0;
}

/* Vaste inhoud boven het grid (bijv. een uitleg-alert): dezelfde inset van 14px als de toolbar van
   het grid, ook aan de bovenkant. */
.grid-page-intro {
    flex-shrink: 0;
    padding: 14px 14px 0;
}

/* Een grid dat niet de hele pagina vult (meerdere grids onder elkaar, bijv. Beheer): de hoogte volgt
   de rijen in plaats van het venster. */
.grid-section > div.page-container {
    height: auto;
}

/* Getallen rechts uitlijnen in een gridkolom: HeaderClass/CellClass="grid-cell-number". */
.mud-table-cell.grid-cell-number {
    text-align: right;
}

/* Celinhoud centreren: HeaderClass/CellClass="grid-cell-center". */
.mud-table-cell.grid-cell-center {
    text-align: center;
}

/* Monospace celinhoud (ID's, tokens). */
.grid-cell-mono {
    font-family: monospace;
}

/* Titelregel in een tweeregelige gridcel (titel + ID eronder). */
.grid-cell-title {
    font-weight: 500;
}