/* Global z-index and modal behavior fixes for MudBlazor dialogs
   Ensure dialog overlay sits above app bar, menus, and any custom popovers
   while keeping dialog content above the overlay. */

/* Raise the global popover z-index variable used by EGKits.css (wins via !important) */
:root {
    --egk-popover-z: var(--egk-z-popover-strong, 12040) !important;

    /* Centralized stacking hierarchy. Toasts/snackbars must always win, so they
       sit above dialogs (12010), strong popovers (12040) and the popover
       provider (20000). Keep this the highest interactive layer in the app. */
    --egk-z-snackbar: 30000;
}

/* Ensure MudBlazor menus/tooltips/popovers render above the fixed app bar.
   (Component-scoped CSS cannot reliably style popovers because they are rendered in the global provider.) */
.mud-popover.mud-menu,
.mud-popover.mud-tooltip,
.mud-popover {
    /* Keep popovers above the header/drawer, but below dialog overlays/content */
    z-index: calc(var(--egk-z-overlay-dialog, 12000) - 20) !important;
}

/* Elevate only dialog overlays high, avoid impacting drawer overlays */
body > .mud-overlay.mud-overlay-dialog,
.mud-dialog-root > .mud-overlay,
.mud-dialog-container > .mud-overlay {
    z-index: var(--egk-z-overlay-dialog, 12000) !important;
    pointer-events: auto !important;
}

/* Ensure the dialog itself is above its overlay */
.mud-dialog-container,
.mud-dialog-root,
.mud-dialog {
    z-index: var(--egk-z-dialog, 12010) !important;
}

/* === POPOVER PROVIDER: guarantee it sits above all page content === */
.mud-popover-provider {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20000 !important;
    pointer-events: none !important;
}

.mud-popover-provider > * {
    pointer-events: auto !important;
}

/* === TOAST / SNACKBAR: always the top-most layer ===
   The app elevates dialogs (12010), strong popovers (12040) and the popover
   provider (20000) far above MudBlazor's default snackbar z-index (~1500),
   which caused toasts to render *behind* create/edit dialogs and confirmation
   modals. Force the snackbar provider and every snackbar item above all of
   them. Both the provider wrapper and the items are set so we win regardless
   of which element forms the stacking context.

   Override the MudBlazor variable too, so any element that reads it inherits
   the correct layer (portal-safe: the providers live at the App.razor root,
   outside any dialog/component stacking context). */
:root {
    --mud-zindex-snackbar: var(--egk-z-snackbar, 30000) !important;
}

.mud-snackbar-provider,
.mud-snackbar-provider .mud-snackbar,
.mud-snackbar {
    z-index: var(--egk-z-snackbar, 30000) !important;
}

/* Keep toasts visible (not clipped) on mobile / full-screen modal views */
@media (max-width: 600px) {
    .mud-snackbar-provider,
    .mud-snackbar {
        z-index: var(--egk-z-snackbar, 30000) !important;
    }
}

/* === LANGUAGE SELECTOR FIX: Ensure language selector works in all contexts === */
/* Language selector container must stay fixed and above page content */
.auth-lang-switch {
    z-index: 15000 !important;
    position: fixed !important;
}

.language-selector-trigger {
    z-index: 15000 !important;
    position: relative;
}

/* Language selector popover must be above dialogs and auth layout.
   Use fallback #fff because --mud-palette-surface is undefined on auth
   pages where MudThemeProvider is absent. */
.language-selector-popover,
.mud-popover.language-selector-popover {
    z-index: 15010 !important;
    position: fixed !important;
    background-color: var(--mud-palette-surface, #fff) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Inner MudBlazor elements must also be opaque */
.language-selector-popover .mud-paper,
.language-selector-popover .mud-list,
.language-selector-popover .mud-menu {
    background-color: var(--mud-palette-surface, #fff) !important;
}

/* Ensure language selector works in auth pages */
body.auth-page .auth-lang-switch {
    z-index: 15000 !important;
    position: fixed !important;
}

body.auth-page .language-selector-popover,
body.auth-page .mud-popover.language-selector-popover {
    z-index: 15010 !important;
    background-color: #fff !important;
    color: #212121 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.auth-page .language-selector-popover .mud-paper,
body.auth-page .language-selector-popover .mud-list,
body.auth-page .language-selector-popover .mud-menu {
    background-color: #fff !important;
    color: #212121 !important;
}

/* Ensure all text in the language popover is readable on auth pages */
body.auth-page .language-selector-popover .mud-typography,
body.auth-page .language-selector-popover .mud-list-item {
    color: #212121 !important;
}

body.auth-page .language-selector-popover .mud-text-secondary {
    color: rgba(0,0,0,0.6) !important;
}

:root[data-theme='dark'] .language-selector-popover,
:root[data-theme='dark'] .mud-popover.language-selector-popover {
    background-color: var(--mud-palette-surface, #1e1e2e) !important;
}

:root[data-theme='dark'] .language-selector-popover .mud-paper,
:root[data-theme='dark'] .language-selector-popover .mud-list,
:root[data-theme='dark'] .language-selector-popover .mud-menu {
    background-color: var(--mud-palette-surface, #1e1e2e) !important;
}

/* Language selector is intentionally light on auth/mobile pages.
   This must override dark-theme/global MudBlazor list hover rules because the
   popover is rendered globally by MudPopoverProvider, outside component scope. */
body .language-selector-popover,
body .mud-popover.language-selector-popover,
body .language-selector-popover .mud-paper,
body .language-selector-popover .mud-list,
body .language-selector-popover .mud-list-root,
body .language-selector-popover .mud-list-padding,
body .language-selector-popover .mud-menu,
body .language-selector-popover .professional-language-menu,
body .language-selector-popover .language-options-container,
body .language-selector-popover .language-options-list {
    background-color: #fff !important;
    color: #212121 !important;
}

body .language-selector-popover .mud-list-item,
body .language-selector-popover .mud-list-item-clickable,
body .language-selector-popover .mud-list-item-button,
body .language-selector-popover .mud-list-item-gutters,
body .language-selector-popover .professional-language-item {
    background-color: #fff !important;
    color: #212121 !important;
}

body .language-selector-popover .mud-list-item:hover,
body .language-selector-popover .mud-list-item:focus,
body .language-selector-popover .mud-list-item:focus-visible,
body .language-selector-popover .mud-list-item-clickable:hover,
body .language-selector-popover .mud-list-item-clickable:focus,
body .language-selector-popover .mud-list-item-button:hover,
body .language-selector-popover .mud-list-item-button:focus,
body .language-selector-popover .mud-list-item:hover .professional-language-item,
body .language-selector-popover .mud-list-item-clickable:hover .professional-language-item,
body .language-selector-popover .mud-list-item-button:hover .professional-language-item {
    background-color: #f5f7fa !important;
    color: #212121 !important;
}

body .language-selector-popover .mud-list-item:hover *,
body .language-selector-popover .mud-list-item:focus *,
body .language-selector-popover .mud-list-item-clickable:hover *,
body .language-selector-popover .mud-list-item-clickable:focus *,
body .language-selector-popover .mud-list-item-button:hover *,
body .language-selector-popover .mud-list-item-button:focus * {
    color: #212121 !important;
}

body .language-selector-popover .language-menu-header,
body .language-selector-popover .language-menu-header *,
body .language-selector-popover .language-stats .mud-chip,
body .language-selector-popover .language-stats .mud-chip * {
    color: #fff !important;
}

body .language-selector-popover .mud-text-secondary,
body .language-selector-popover .language-secondary-info,
body .language-selector-popover .language-menu-footer .mud-typography {
    color: rgba(0,0,0,0.64) !important;
}

/* === SNACKBAR FIX: Ensure snackbar is opaque and readable on auth pages === */
body.auth-page .mud-snackbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--mud-palette-dark, #323232) !important;
    color: #fff !important;
}

body.auth-page .mud-snackbar .mud-snackbar-content-message {
    color: #fff !important;
}

body.auth-page .mud-snackbar .mud-button-text {
    color: var(--mud-palette-primary, #1976d2) !important;
}

/* === AUTH PAGE SCROLLING FIX ===
   Ensure all containers between html and the login content allow content
   to flow through. Only html scrolls. overflow-x uses 'clip' to prevent
   horizontal overflow WITHOUT creating a scroll container (unlike 'hidden'
   which per CSS spec forces overflow-y:visible to compute as auto). */
body.auth-page,
body.auth-page #app,
body.auth-page .auth-fullscreen-layout,
body.auth-page .login-container,
body.auth-page .desktop-layout,
body.auth-page .login-section {
    overflow-y: visible !important;
    overflow-x: clip !important;
    height: auto !important;
    max-height: none !important;
}

/* === AUTH PAGE STACKING FIX ===
   The auth layout's isolation:isolate (from scoped CSS) creates a stacking
   context that, combined with nested backdrop-filter layers, can cause the
   login card content to paint above MudBlazor popovers rendered in the
   global MudPopoverProvider.  Remove isolation on auth pages so the layout
   no longer forms its own compositing boundary.  The pseudo-element
   backgrounds (z-index:-1/-2) still render behind content without it. */
body.auth-page .auth-fullscreen-layout {
    isolation: auto !important;
}

/* Lower the login card's internal z-index so it cannot compete with the
   popover provider (z-index 20000) even if a new stacking context is
   accidentally introduced on an ancestor. */
body.auth-page .login-card .mud-card-content,
.egk-app .login-card .mud-card-content {
    z-index: auto !important;
}

/* === AUTH PAGE: push login section below the fixed language selector bar === */
body.auth-page .login-section,
.egk-app .login-section {
    padding-top: 70px !important;
}

/* When a dialog is actually open, nav drawer must not be interactive or above overlay.
   Use .mud-dialog inside the container to avoid matching the always-present empty container.
   Exclude the theme-studio drawer so it stays interactive. */
body:has(.mud-dialog-container .mud-dialog) .mud-drawer:not(.enterprise-theme-studio):not(.dashboard-customize-drawer),
body:has(.mud-dialog-root .mud-dialog) .mud-drawer:not(.enterprise-theme-studio):not(.dashboard-customize-drawer) {
    z-index: calc(var(--egk-z-overlay-dialog, 12000) - 10) !important;
    pointer-events: none !important;
}

/* Keep the home dashboard customize drawer interactive even when a dialog is open elsewhere */
.mud-drawer.dashboard-customize-drawer,
.mud-drawer-temporary.dashboard-customize-drawer,
.mud-drawer--open.dashboard-customize-drawer {
    z-index: var(--egk-z-dialog, 12010) !important;
    pointer-events: auto !important;
}

.mud-drawer.dashboard-customize-drawer .mud-drawer-content {
    pointer-events: auto !important;
}

/* === THEME STUDIO FIX: Always keep the theme-studio drawer interactive and on top === */
.mud-drawer.enterprise-theme-studio,
.mud-drawer-temporary.enterprise-theme-studio {
    z-index: var(--egk-z-dialog, 12010) !important;
    pointer-events: auto !important;
}

.mud-drawer.enterprise-theme-studio .mud-drawer-content {
    pointer-events: auto !important;
}

/* Keep the app bar visually under the overlay while a dialog is open */
body:has(.mud-dialog-container .mud-dialog) .mud-appbar {
    z-index: calc(var(--egk-z-overlay-dialog, 12000) - 8000) !important;
}

/* Make sure the *dialog* overlay always covers the full viewport */
body > .mud-overlay.mud-overlay-dialog,
.mud-dialog-root > .mud-overlay,
.mud-dialog-container > .mud-overlay {
    position: fixed !important;
    inset: 0 !important;
}

    /* Improve overlay contrast slightly for readability behind dialogs */
    .mud-overlay.mud-overlay-dark {
        background-color: rgba(0, 0, 0, 0.45) !important;
    }

/* Reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mud-dialog, .mud-overlay {
        transition: none !important;
        animation: none !important;
    }
}

/* --- FIX: Ensure the dialog close button renders within the dialog header --- */
/* Scope the title container as positioning context */
.mud-dialog .mud-dialog-title {
    position: relative !important;
}

/* Place action area (close button) in the header corner inside the dialog */
.mud-dialog .mud-dialog-title-actions {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    z-index: 1;
}

/* RTL support: mirror to the left side */
[dir="rtl"] .mud-dialog .mud-dialog-title-actions {
    right: auto !important;
    left: 8px !important;
}

/* Reset any global positioning that may have leaked onto the icon button */
.mud-dialog .mud-dialog-title-actions .mud-icon-button,
.mud-dialog .mud-dialog-title-actions .mud-button-root {
    position: static !important;
    margin: 0 !important;
}