/* ========================================
   MUDBLAZOR OVERRIDES - app-brede tweaks zonder specifieke eigenaar-component
   ======================================== */

/* MudBlazor geeft elk icoon een `inline-block` doos van 1em (`.mud-icon-root`). Een SVG vulde die
   doos zelf; een Font Awesome-glyph is tekst en hangt aan de baseline, dus elk icoon zakt een
   ander stukje weg en de rij oogt scheef. Centreer daarom elke font-icoon in zijn doos. */
.mud-icon-root.fa,
.mud-icon-root.fas,
.mud-icon-root.far,
.mud-icon-root.fal,
.mud-icon-root.fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* FA-glyphs vullen hun em-vak meer dan MudBlazor's Material-SVG's, waardoor ze bij dezelfde
   MudBlazor-Size groter ogen dan de oude iconen. MudBlazor rendert font-iconen (FA) als <span>
   en zijn eigen iconen als <svg>, dus verklein hier alleen de font-iconen; MudBlazor's interne
   SVG-iconen (pager, checkbox-vinkjes, dropdown-pijltjes) blijven ongemoeid. Waarden gelijk aan
   de prototype; MudBlazor's defaults zijn 1.25 / 1.5 / 2.25rem. */
span.mud-icon-root.mud-icon-size-small  { font-size: 1.05rem; }
span.mud-icon-root.mud-icon-size-medium { font-size: 1.1rem; }
span.mud-icon-root.mud-icon-size-large  { font-size: 1.9rem; }

/* Binnen een MudIconButton (header, toolbar boven de grids) sturen MudBlazor's eigen regels de
   icoongrootte. Target daarom de FA-classes zelf met !important zodat het wint, ongeacht
   specificiteit. Icon-buttons bevatten nooit grote decoratieve iconen, dus 1rem is veilig. */
.mud-icon-button .fa,
.mud-icon-button .fas,
.mud-icon-button .far,
.mud-icon-button .fal,
.mud-icon-button .fad,
.mud-icon-button .fab { font-size: 1.0rem !important; }

/* MudBlazor zet `.mud-svg-icon { color: var(--mud-palette-text-disabled) }` waardoor
   onze checkbox SVG's grijs/onzichtbaar tegen witte achtergrond kunnen zijn.
   Forceer color + fill op alle relevante elementen binnen een checkbox. */
.mud-checkbox .mud-svg-icon,
.mud-checkbox .mud-icon-root,
.mud-checkbox .mud-icon-button {
    color: var(--bw-color-text-primary) !important;
}

.mud-checkbox svg,
.mud-checkbox svg path,
.mud-checkbox svg path:last-child {
    fill: var(--bw-color-text-primary) !important;
}

/* Behoud de "frame" path transparant - alleen het zichtbare checkbox-icoon krijgt de kleur */
.mud-checkbox svg path[fill="none"] {
    fill: none !important;
}

/* Uitgeschakelde checkboxes houden MudBlazor's disabled-kleur. MudBlazor kleurt disabled via
   `.mud-checkbox.mud-disabled *` (zonder !important) - dat verliest van de geforceerde kleur/fill
   hierboven, waardoor een disabled checkbox er precies zo uitziet als een enabled checkbox. Deze
   regels staan later in de cascade en zijn specifieker (.mud-checkbox.mud-disabled), dus ze winnen.
   MudBlazor zet `mud-disabled` op .mud-input-control, op het <label class="mud-checkbox"> en op de
   knop, dus .mud-checkbox.mud-disabled matcht en dekt ook de :hover/:focus/:active-varianten die
   MudBlazor op de knop zet.

   --mud-palette-text-disabled komt van MudThemeProvider (MainLayout) en volgt de light/dark mode. */
.mud-checkbox.mud-disabled .mud-svg-icon,
.mud-checkbox.mud-disabled .mud-icon-root,
.mud-checkbox.mud-disabled .mud-icon-button {
    color: var(--mud-palette-text-disabled) !important;
}

.mud-checkbox.mud-disabled svg,
.mud-checkbox.mud-disabled svg path,
.mud-checkbox.mud-disabled svg path:last-child {
    fill: var(--mud-palette-text-disabled) !important;
}

/* Niet weglaten: de regel hierboven kleurt ook het transparante "frame" path, en wint van de
   algemene path[fill="none"]-regel (zelfde specificiteit, maar later in de cascade). Zonder deze
   correctie wordt een disabled checkbox een dichtgevuld grijs vierkant. */
.mud-checkbox.mud-disabled svg path[fill="none"] {
    fill: none !important;
}

/* MUDTABS - leesbare kleuren in licht én donker thema.
   Inactieve tabs volgen de tekstkleur uit het thema (--bw-color-text-primary),
   in donkere modus is dit automatisch de dark-palette tekstkleur via .mud-theme-dark. */
.mud-tabs .mud-tab {
    color: var(--bw-color-text-primary);
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
}

.mud-tabs .mud-tab-slider {
    background-color: var(--mud-palette-primary);
}

/* GLOBAL BUTTON STYLES */
.mud-button-filled {
    box-shadow: none !important;
}

/* Buttons: gewone hoofdlettergebruik (geen all-caps) */
.mud-button-root.mud-button-filled-primary,
.mud-button-root.mud-button-outlined-primary,
.mud-button-root.mud-button-text-primary,
.mud-button-root.mud-button-filled-default,
.mud-button-root.mud-button-outlined-default,
.mud-button-root.mud-button-text-default {
    text-transform: none !important;
}

/* Primaire en secundaire buttons identiek in licht én donker thema.
   Primair = gevuld teal met witte tekst; secundair = transparant met teal rand/tekst. */
.mud-button-root.mud-button-filled-primary:not(:disabled) {
    background-color: var(--mud-palette-primary) !important;
    color: #ffffff !important;
}

/* Hover-kleur expliciet herstellen: de !important hierboven overschrijft anders ook
   MudBlazor's eigen :hover regel, waardoor er geen hover-effect meer zichtbaar is. */
.mud-button-root.mud-button-filled-primary:hover:not(:disabled) {
    background-color: var(--mud-palette-primary-darken) !important;
}

.mud-button-root.mud-button-outlined-primary:not(:disabled),
.mud-button-root.mud-button-text-primary:not(:disabled) {
    background-color: transparent !important;
    color: var(--mud-palette-primary) !important;
}

.mud-button-root.mud-button-outlined-primary:hover:not(:disabled),
.mud-button-root.mud-button-text-primary:hover:not(:disabled) {
    background-color: var(--mud-palette-primary-hover) !important;
}

.mud-button-root.mud-button-outlined-primary:not(:disabled) {
    border-color: var(--mud-palette-primary) !important;
}

/* :disabled bewust uitgesloten van de kleur-forcering hierboven, zodat disabled
   knoppen (bv. "Maak voorontvangst" zonder selectie) terugvallen op MudBlazor's eigen
   disabled-styling in plaats van de geforceerde primary-kleur te tonen. Geen aparte disabled-regel
   nodig - dit werkt voor elke MudButton-variant/kleur in de hele portal. */

/* Verwijder de lijn onder alle MudBlazor input-underlines (o.a. zoekbalk input) */
.mud-input-underline:before,
.mud-input-underline:after {
    display: none !important;
}

/* Tooltip body — gebruikt de tekstkleur uit het actieve thema in lichte modus.
   Dark mode override staat onderaan in deze sectie. */
.mud-tooltip {
    background-color: var(--bw-color-text-primary) !important;
    color: white !important;
}

/* Tooltip-driehoekje: MudBlazor maakt dit met een transparante border en alleen border-top-color zichtbaar.
   Het driehoekje wordt geroteerd op basis van de placement, dus border-top-color overruled is voldoende. */
.mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after,
.mud-tooltip.mud-tooltip-arrow::after {
    border-top-color: var(--bw-color-text-primary) !important;
}

/* In donkere modus blijft de tooltip de bestaande donkere chrome-kleur gebruiken,
   omdat de thema-tekstkleur dan ongebruikt is (zie ThemeService.EffectiveTextColor). */
.mud-theme-dark .mud-tooltip {
    background-color: #35373b !important;
}

.mud-theme-dark .mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after,
.mud-theme-dark .mud-tooltip.mud-tooltip-arrow::after {
    border-top-color: #35373b !important;
}

/* "Meer opties" grid menu - menu item iconen op 22x22. Icoon trigger heeft zijn eigen
   regel bij GridIconActions.razor.css; deze regel is een generieke default voor ELK
   MudMenu-popover item-icoon in de app. */
.mud-menu-popover .mud-menu-item .mud-icon-root {
    font-size: 1.1rem !important;
    width: 22px !important;
    height: 22px !important;
}

/* NAV DRAWER MENU ITEMS - SideDrawer + MobileNavDrawer share the exact same pill/active-item
   treatment; promoted here per css-conventions.md now that a second component
   genuinely needs the identical rule. Both drawers wrap their MudNavMenu-rendered
   .mud-nav-item/.mud-nav-link markup in a literal .side-drawer-menu/.mobile-nav-menu div, so
   these selectors stay scoped to the two drawers and won't leak onto some future MudNavMenu
   elsewhere in the app. This file is global/unscoped CSS, so unlike each component's own
   ComponentName.razor.css, no `::deep` is needed to reach MudBlazor-internal markup here. */
.side-drawer-menu .mud-nav-item,
.mobile-nav-menu .mud-nav-item {
    margin: 2px 4px 2px 12px;
    border-radius: 8px;
    width: auto !important;
    overflow: hidden;
}

.side-drawer-menu .mud-nav-link,
.mobile-nav-menu .mud-nav-link {
    padding-left: 12px !important;
}

.side-drawer-menu .mud-nav-link-icon,
.mobile-nav-menu .mud-nav-link-icon {
    font-size: 1.1rem !important;
    width: 22px !important;
    height: 22px !important;
}

/* Niet-actieve menu items kleur var(--bw-color-text-primary); de dark-mode waarde volgt
   automatisch via de CSS custom property cascade vanaf body.mud-theme-dark. */
.side-drawer-menu .mud-nav-link,
.side-drawer-menu .mud-nav-link-icon,
.mobile-nav-menu .mud-nav-link,
.mobile-nav-menu .mud-nav-link-icon {
    color: var(--bw-color-text-primary) !important;
}

.side-drawer-menu .mud-nav-item:hover,
.side-drawer-menu .mud-nav-item.nav-item-active,
.mobile-nav-menu .mud-nav-item:hover,
.mobile-nav-menu .mud-nav-item.nav-item-active {
    background-color: var(--mud-palette-action-default-hover) !important;
}

.side-drawer-menu .mud-nav-item:hover .mud-nav-link,
.side-drawer-menu .mud-nav-item:hover .mud-nav-link-icon,
.side-drawer-menu .mud-nav-item.nav-item-active .mud-nav-link,
.side-drawer-menu .mud-nav-item.nav-item-active .mud-nav-link-icon,
.mobile-nav-menu .mud-nav-item:hover .mud-nav-link,
.mobile-nav-menu .mud-nav-item:hover .mud-nav-link-icon,
.mobile-nav-menu .mud-nav-item.nav-item-active .mud-nav-link,
.mobile-nav-menu .mud-nav-item.nav-item-active .mud-nav-link-icon {
    color: var(--bw-color-text-primary-strong) !important;
}

.side-drawer-menu .mud-nav-item:hover .mud-nav-link,
.side-drawer-menu .mud-nav-item.nav-item-active .mud-nav-link,
.mobile-nav-menu .mud-nav-item:hover .mud-nav-link,
.mobile-nav-menu .mud-nav-item.nav-item-active .mud-nav-link {
    background-color: transparent !important;
}

/* Alleen het actieve item krijgt bold */
.side-drawer-menu .mud-nav-item.nav-item-active .mud-nav-link,
.mobile-nav-menu .mud-nav-item.nav-item-active .mud-nav-link {
    font-weight: 600 !important;
}

/* DIALOG CONTENT - MudBlazor's eigen padding-top zet de inhoud een stuk onder de titelbalk. Voor
   dialogs met een grid staat de toolbar daardoor los van de kop; de toolbar-row heeft al een eigen
   min-height van 48px die de ruimte levert. */
.mud-dialog .mud-dialog-content {
    padding-top: 0;
}

/* PICKER HEADER (MudDatePicker/MudDateRangePicker/MudTimePicker) - MudBlazor kleurt
   deze koptekst standaard met de primary-kleur (.mud-theme-primary, teal). In donkere modus oogt dat
   niet fraai; gebruik daar dezelfde achtergrond als de grid-headers (--mud-palette-background-gray),
   zoals simple-filter-row hierboven al doet. Alleen donkere modus - in het lichte thema blijft de
   teal header ongewijzigd. Tekstkleur blijft wit; die heeft ook op de donkere achtergrond genoeg
   contrast. .mud-picker-toolbar is de gedeelde toolbar-component van alle Mud*Picker-varianten,
   dus deze regel dekt ze allemaal in één keer. */
.mud-theme-dark .mud-picker-toolbar {
    background-color: var(--mud-palette-background-gray) !important;
}