/* ========================================
   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 met meerdere regels uitleg (bv. de compleetheidsscores op TaskResult): Class="wide-text-tooltip"
   komt op de bubble zelf. De breedte is begrensd op de viewport, zodat de tekst afbreekt in plaats van
   buiten het scherm te vallen; Style op MudTooltip komt niet op de bubble en begrenst dus niets. */
.mud-tooltip.wide-text-tooltip {
    max-width: min(400px, calc(100vw - 32px));
    white-space: normal;
    text-align: left;
}

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

/* Tooltip met alleen tag-chips (Klant tags / Overige tags op TaskResult): geen eigen achtergrond,
   zodat alleen de chips zichtbaar zijn. Staat na de dark-mode-regel zodat die hem niet overschrijft. */
.mud-tooltip.tag-list-tooltip,
.mud-theme-dark .mud-tooltip.tag-list-tooltip {
    background-color: transparent !important;
    box-shadow: none;
    padding: 0;
}

/* "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 - pill/active-item treatment van de SideDrawer.
   PMA-afwijking t.o.v. de portal: de portal deelt deze regels met MobileNavDrawer
   (.mobile-nav-menu) en markeert het actieve item met .nav-item-active. De PMA heeft geen
   .mobile-nav-menu en de PMA-SideDrawer markeert het actieve item met .mud-chip-color-primary
   (SideDrawer.GetPageClass); die selectors zijn daarop aangepast. Verder gelijk aan de portal.
   Dit bestand is globale CSS, dus er is geen `::deep` nodig voor MudBlazor-interne markup. */
.side-drawer-menu .mud-nav-item {
    margin: 2px 4px 2px 12px;
    border-radius: 8px;
    width: auto !important;
    overflow: hidden;
}

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

.side-drawer-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 {
    color: var(--bw-color-text-primary) !important;
}

.side-drawer-menu .mud-nav-item:hover,
.side-drawer-menu .mud-nav-item.mud-chip-color-primary {
    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.mud-chip-color-primary .mud-nav-link,
.side-drawer-menu .mud-nav-item.mud-chip-color-primary .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.mud-chip-color-primary .mud-nav-link {
    background-color: transparent !important;
}

/* Alleen het actieve item krijgt bold */
.side-drawer-menu .mud-nav-item.mud-chip-color-primary .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;
}