#popup-CustomEMSelectLanguageDropDown {
    width: max-content !important;
    min-width: max-content !important;
}
.rz-dropdown-items-wrapper {
    scrollbar-width: none !important; /* Verbergt de scrollbar */
    -ms-overflow-style: none !important; /* Voor IE 10+ */
    overflow: auto !important;
}
.rz-dropdown-items-wrapper::-webkit-scrollbar {
    display: none !important;
}

/* ============================================================
   EyeManage — Component-specific overrides
   Color tokens are defined in design-system.css (single source of truth).
   This file contains only layout/component overrides.
   ============================================================ */

/* ============================================================
   NavRail "Menu 6" host (DT-2.39-4)
   De rail (NavRail.razor) schildert zelf z'n teal-gradient via --em-rail-bg en
   regelt z'n eigen scroll; de RadzenSidebar is enkel de 272px-brede container.
   De oude RadzenPanelMenu-styling (oranje selected-border, 2nd-level-wrappers) is
   verwijderd — NavMenu/RadzenPanelMenu wordt niet meer gebruikt.
   ============================================================ */
:root {
    --rz-sidebar-width: 272px;
}

.rz-sidebar {
    width: var(--rz-sidebar-width);
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.rz-sidebar > .nav-rail {
    height: 100%;
}

/* ============================================
   Online Booking Layout Styles
   ============================================ */

/* CSS Custom Property for dynamic branding */
.online-booking-layout {
    --online-booking-primary: #2196F3;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.online-booking-header {
    background-color: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-base-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.online-booking-logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.online-booking-logo-link:hover {
    opacity: 0.9;
}

/* Body Styles */
.online-booking-body {
    flex: 1;
    background-color: var(--rz-base-100);
    padding: 0;
}

.online-booking-content {
    padding: 1rem;
}

/* Footer Styles */
.online-booking-footer {
    background-color: var(--rz-base-background-color);
    border-top: 1px solid var(--rz-base-300);
    margin-top: auto;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .online-booking-header .rz-stack {
        padding: 0.5rem !important;
    }

    .online-booking-content {
        padding: 0.5rem;
    }

    .online-booking-footer .rz-stack {
        text-align: center;
    }
}

/* Step Indicator Styles - for booking flow */
.online-booking-steps {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-base-300);
}

.online-booking-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
    background-color: var(--rz-base-200);
    transition: all 0.2s ease;
}

.online-booking-step.active {
    background-color: var(--online-booking-primary);
    color: white;
    font-weight: 500;
}

.online-booking-step.completed {
    background-color: var(--rz-success);
    color: white;
}

.online-booking-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Mobile: Stack steps vertically */
@media (max-width: 576px) {
    .online-booking-steps {
        flex-wrap: wrap;
    }

    .online-booking-step {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .online-booking-step-number {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.625rem;
    }
}

/* DT-11-15 / DT-3: Radzen DialogService-dialogs moeten boven de CustomDrawer liggen.
   CustomDrawer portaalt naar body op z-index 999000+. Een Radzen-dialog rendert als
   .rz-dialog-wrapper met DAARBINNEN zowel de inhoud (.rz-dialog) als de backdrop
   (.rz-dialog-mask). Door alleen de WRAPPER naar 1000000 te tillen komt de hele dialoog
   — inhoud én backdrop — boven elke drawer.

   BELANGRIJK (DT-3): til de .rz-dialog-mask NIET apart op. Radzen nest de mask binnen de
   wrapper, ná de inhoud, met een lage z (var --rz-dialog-mask-zindex: 1000) zodat hij
   áchter de inhoud (.rz-dialog, z 1001) blijft. Forceer je de mask hoog (de oude
   `.rz-dialog-mask { z-index: 999999 }`), dan schildert hij OVER de eigen dialoog-inhoud
   → de dialoog oogt dim/grijs en, omdat de mask pointer-events:none heeft, klikbaar-maar-dim.
   De wrapper-elevatie (1000000 > drawer 999000+) dekt de drawer al, dus de mask hoeft
   niet omhoog. */

.rz-dialog-wrapper {
    z-index: 1000000 !important;
}

/* DT-66670.2-4: popup-panelen (dropdown/overlay/multiselect/autocomplete) portaalt Radzen naar
   body — `Radzen.openPopup` doet letterlijk `document.body.appendChild(popup)`. Ze concurreren
   dus met de hoogste app-overlays in de body-stacking-context, niet met hun eigen dialoog.
   Op 1000000 vielen ze daardoor ACHTER alles in de Till-tier (TillDrawer 1100000,
   aflever-checklist 1100002): de medewerker-keuze in de kassa was onzichtbaar zodra je 'm opende.
   Een popup hoort per definitie boven zijn eigenaar, dus staan ze nu in een eigen tier bóven de
   Till-tier. Binnen een drawer werkte het al: die dialogen zitten gevangen in de
   drawer-stacking-context (999xxx) en de body-popup lag daar toch al boven. */
.rz-dropdown-panel,
.rz-overlaypanel,
.rz-multiselect-panel,
.rz-autocomplete-panel {
    z-index: 1100100 !important;
}

/* Blijft één stap boven de popups staan (tooltip over een open dropdown), en komt daarmee
   meteen ook boven de Till-tier — waar hij voorheen onzichtbaar was. */
.rz-tooltip {
    z-index: 1100101 !important;
    pointer-events: none;
}

/* DT-3: deze regels stonden voorheen ALS PER-INSTANTIE INLINE <style>-blok in
   CustomDrawer.razor — dat injecteerde dezelfde globale overrides één keer per
   drawer-instantie (op een volle pagina ~8×), die over elkaar heen vielen en
   bovendien conflicteerden met de regels hierboven (dropdown 999999 vs 1000000).
   Nu staat alles hier, één keer, als enige bron van waarheid.

   z-index-hiërarchie (laag → hoog):
     CustomDrawer overlay/drawer  999000 + stackLevel*10  (inline per instantie gezet)
     .rz-dialog-mask              Radzen-natuurlijk (var 1000, BINNEN de wrapper, achter inhoud)
     .rz-dialog-wrapper           1000000
     em-dialog-above-drawer       1000010 (wrapper)  — opt-in (mask blijft Radzen-natuurlijk)
     loginlocatie-gate            1000020   (LocationSelectionModal, inline)
     Till-tier                    1100000+  (TillDrawer en Till-dialogs, inline)
     em-dialog-topmost            1100010 (wrapper)  — opt-in, bovenop élke overlay-laag van de
                                             app (drawers én Till-tier); voor dialogen die vanuit
                                             de kassa én vanuit een drawer geopend worden, zoals
                                             de aflever-checklist (mask blijft Radzen-natuurlijk)
     gids-spotlight/paneel        1100050/1100051 (supportlaag — begeleidt binnen een drawer)
     popup-panelen                1100100   (dropdown/overlay/multiselect/autocomplete —
                                             portalen naar body, horen boven élke overlay)
     .rz-tooltip                  1100101   (klikt door)

   Regel voor nieuwe lagen: alles wat een eigen overlay op body zet, blijft ONDER 1100100 —
   anders verdwijnen de popups er weer achter. */

/* Opt-in: dialogs die boven elke drawer-stack moeten renderen
   (DialogOptions.CssClass="em-dialog-above-drawer"). Alleen de wrapper optillen —
   de mask blijft Radzen-natuurlijk binnen de wrapper (zie waarschuwing hierboven). */
.rz-dialog-wrapper.em-dialog-above-drawer { z-index: 1000010 !important; }

/* Opt-in (DT-66675.2-2): dialogen die boven ÉLKE overlay-laag moeten staan — drawers én de
   Till-tier (1100000+). De aflever-checklist wordt vanuit beide werelden geopend (orderdrawer,
   kassa, werkplaats) en kan dus niet met em-dialog-above-drawer toe. Blijft bewust onder de
   popup-panelen (1100100), anders verdwijnt de medewerker-dropdown erachter. Ook hier: alleen
   de wrapper optillen, nooit de mask apart (zie waarschuwing hierboven). */
.rz-dialog-wrapper.em-dialog-topmost { z-index: 1100010 !important; }

/* DT-66673.2-11: de supportlaag hoort BOVEN de drawers.
   De gids begeleidt de gebruiker juist binnen een orderdrawer, dus met de oude waarden
   (spotlight 898, gids-paneel 899) lagen de dim-laag en de stappen onder de drawer (999000+):
   er dimde niets en de stappen waren onzichtbaar. Beide staan nu in een eigen tier boven de
   drawers en boven de Till-tier, en bewust ONDER de popup-panelen (1100100) — anders verdwijnen
   dropdowns achter de dim-laag. De zwevende hulpknop blijft juist wél onder de drawers: binnen
   een drawer neemt de knop in de voet het over (SupportDrawerFooterButton). */
.guide-spotlight { z-index: 1100050 !important; }
.guide-overlay { z-index: 1100051 !important; }

/* De hulpknop in de voet van een drawer: gecentreerd, want links en rechts staan de acties
   (Annuleren/Opslaan, bedragen). Absoluut gepositioneerd zodat een eigen FooterContent zijn
   lay-out houdt. pointer-events op de wrapper uit, zodat de lege ruimte ernaast klikbaar blijft
   voor wat eronder ligt.

   DT-66673.2-12: verticaal midden in de voet in plaats van vanaf de onderrand. Met een vaste
   afstand tot de onderkant hing de knop lager dan de actieknoppen ernaast — die staan in de
   normale flow en zijn hoger, dus de optische lijn liep niet. Centreren volgt de voethoogte,
   ook als die per drawer verschilt. */
.drawer-footer__help {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.drawer-footer__help > * {
    pointer-events: auto;
}

/* Zelfde kwaal als de header-tekstknoppen hieronder: CustomButton zet Shade.Lighter, en een
   text-variant in die tint valt op de lichte voet vrijwel weg. Volle primary-kleur en wat meer
   gewicht maken hem leesbaar zonder dat hij met "Opslaan" gaat concurreren.

   De hover krijgt een echt vlak: bij een text-knop is dat het enige dat laat zien dát het een
   knop is en waar zijn klikgebied ligt. */
.drawer-footer__help .rz-button.rz-variant-text {
    color: var(--rz-primary) !important;
    font-weight: 600;
    background-color: transparent;
    border-radius: 1.25rem;
    padding-inline: 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.drawer-footer__help .rz-button.rz-variant-text .rz-icon {
    color: var(--rz-primary) !important;
}

.drawer-footer__help .rz-button.rz-variant-text:hover,
.drawer-footer__help .rz-button.rz-variant-text:focus-visible {
    background-color: var(--rz-primary-lighter, rgba(32, 139, 170, 0.12)) !important;
    color: var(--rz-primary-dark, var(--rz-primary)) !important;
}

.drawer-footer__help .rz-button.rz-variant-text:hover .rz-icon,
.drawer-footer__help .rz-button.rz-variant-text:focus-visible .rz-icon {
    color: var(--rz-primary-dark, var(--rz-primary)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .drawer-footer__help .rz-button.rz-variant-text {
        transition: none;
    }
}

/* DT-3: Radzen sluit de confirm-/alert-varianten BEWUST uit van de normale
   content-padding (`.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert)
   .rz-dialog-content { padding: var(--rz-dialog-content-padding) }`), waardoor de
   boodschap en de OK/Annuleren-knoppen pal tegen de rand plakken. We geven de confirm-
   en alert-inhoud diezelfde theme-padding terug via de variabele — zo klopt het in
   light én dark automatisch (eyemanage.css laadt ná de theme-CSS). */
.rz-dialog-confirm .rz-dialog-content,
.rz-dialog-alert .rz-dialog-content {
    padding: var(--rz-dialog-content-padding, 1.25rem) !important;
}

/* CustomDrawer-eigen elementen — volle viewport. De z-index zelf wordt per
   instantie inline gezet (_overlayZIndex/_drawerZIndex), niet hier. */
.simple-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

.simple-drawer {
    position: fixed !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

/* Header text-buttons: Shade.Lighter maakt de kleur onleesbaar op lichte achtergrond.
   Forceer de primary-kleur (zonder shade) zodat knoppen zichtbaar zijn in light mode
   én correct blijven in dark mode. */
.rz-header .rz-button.rz-variant-text {
    color: var(--rz-primary) !important;
}

.rz-header .rz-button.rz-variant-text .rz-icon {
    color: var(--rz-primary) !important;
}

/* ───── Spotlight: highlight van het via zoeken geselecteerde object (DT-3.7-1) ───── */
.spotlight-highlight {
    border-radius: 12px;
    animation: spotlight-highlight-pulse 2.4s ease-out 3;
    outline: 2px solid var(--rz-primary, #5340c2);
    outline-offset: 2px;
}

@keyframes spotlight-highlight-pulse {
    0% { box-shadow: 0 0 0 0 rgba(83, 64, 194, 0.45); }
    70% { box-shadow: 0 0 0 12px rgba(83, 64, 194, 0); }
    100% { box-shadow: 0 0 0 0 rgba(83, 64, 194, 0); }
}