/* ====================================================================
   MUDBLAZOR CORE OVERRIDES

   CRITICAL: This file MUST load AFTER MudBlazor.min.css in _Host.cshtml

   Purpose: Override MudBlazor's default html { overflow: auto } rule
   which breaks position:sticky throughout the application.

   Position sticky ONLY works when the VIEWPORT scrolls, not when
   a container with overflow:auto scrolls. MudBlazor sets overflow:auto
   on the html element, making IT the scrolling container, which breaks
   any element using position:sticky.

   This override allows the viewport to scroll naturally, enabling
   position:sticky to work as expected.
   ==================================================================== */

/* Ultra-high specificity selectors to override everything */
html:root,
html:not(#fake-id-for-specificity),
html {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
}

body:not(#fake-id-for-specificity),
body {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
}

/* ================================================
   POPOVER Z-INDEX HIERARCHY - PAGE VS DIALOG CONTEXT

   Page dropdowns: z-index 1600 (BELOW page headers at 1700)
   Dialog dropdowns: z-index 10100 (ABOVE dialog container at 10000)

   Uses :has() selector to detect when dialog is open.
   ================================================ */

/* DEFAULT: Page-level dropdowns - BELOW sticky headers */
.mud-popover,
.mud-popover-content,
.mud-picker-paper,
.mud-picker-content,
.mud-select-popover {
    z-index: 1600 !important;
}

/* WHEN DIALOG OPEN: Raise dropdowns above dialog container */
/* Uses :has() to detect if body contains an open dialog */
body:has(.mud-dialog-container .mud-dialog) .mud-popover,
body:has(.mud-dialog-container .mud-dialog) .mud-popover-content,
body:has(.mud-dialog-container .mud-dialog) .mud-picker-paper,
body:has(.mud-dialog-container .mud-dialog) .mud-picker-content,
body:has(.mud-dialog-container .mud-dialog) .mud-select-popover {
    z-index: 10100 !important;
}

/* APP BAR DROPDOWN Z-INDEX: See end of file for final rule with highest specificity */

.mud-dialog-container .mud-popover,
.mud-dialog-container .mud-popover-content,
.mud-dialog-container .mud-picker-paper,
.mud-dialog-container .mud-picker-content,
.mud-dialog .mud-popover,
.mud-dialog .mud-popover-content,
.mud-dialog .mud-picker-paper,
.mud-dialog .mud-picker-content {
    position: fixed !important;
}

/* ================================================
   FIX MUD-OVERLAY BLOCKING POPOVER CLICKS
   The dialog backdrop (mud-overlay-dialog) should not auto-close dialog,
   but MudSelect/MudAutocomplete overlays MUST receive clicks to close dropdowns.

   DEFECT-12612: Removed pointer-events: none from .mud-overlay
   This was breaking MudSelect/MudAutocomplete close-on-outside-click behavior
   because MudBlazor uses the overlay to detect outside clicks.

   COMPANY-SELECTOR-FIX: MudMenu overlays were blocking clicks to MudMenuItem.
   The overlay intercepts the click to close the menu BEFORE the menu item's
   OnClick fires. Solution: Let clicks pass through the overlay to menu items,
   while still allowing the overlay to close the menu on outside clicks.
   ================================================ */

/* Only disable pointer events on the DIALOG backdrop, not dropdown overlays */
.mud-overlay.mud-overlay-dialog {
    pointer-events: none !important; /* Don't auto-close dialog on backdrop click */
}

/* IMPORTANT: MudSelect and other dropdown overlays need pointer events to close on outside click */
/* The default .mud-overlay MUST have pointer-events: auto (which is the browser default) */

/* Re-enable pointer events for the dialog itself */
.mud-dialog-container {
    pointer-events: auto !important;
}

/* Ensure popovers and their providers can receive clicks */
.mud-popover-provider,
.mud-popover,
.mud-popover-content,
.mud-picker-paper,
.mud-picker-content,
.mud-list {
    pointer-events: auto !important;
}

/* ================================================
   FIX MUD-MENU ITEM CLICKS BLOCKED BY OVERLAY
   MudMenu renders an overlay to detect outside clicks and close the menu.
   This overlay intercepts clicks to menu items, preventing OnClick from firing.

   Solution: Disable pointer-events on the menu overlay so clicks pass through
   to the menu items underneath. The menu will still close when clicking outside
   because MudBlazor handles this via JavaScript blur/focus events.
   ================================================ */

/* Disable pointer events on MudMenu overlays ONLY - let clicks pass through to menu items */
/* IMPORTANT: Do NOT include .mud-popover-provider .mud-overlay here -
   MudSelect needs the overlay for click-outside-to-close functionality.
   Previously this rule was too broad and broke MudSelect dropdowns in dialogs.

   NOTE: .mud-menu-item is specific to MudMenu items (MudSelect uses .mud-list-item),
   so this selector safely targets only MudMenu overlays without affecting MudSelect. */
.mud-overlay:has(~ .mud-popover .mud-menu-item) {
    pointer-events: none !important;
}

/* Ensure the menu popover and items can still receive clicks */
.mud-menu .mud-popover,
.mud-menu .mud-popover-paper,
.mud-menu .mud-list,
.mud-popover.mud-popover-open {
    pointer-events: auto !important;
    z-index: 1310 !important;
}

.mud-menu-item {
    pointer-events: auto !important;
    position: relative;
    z-index: 1311 !important;
    cursor: pointer !important;
}

/* Ensure anchor tags in menu items are clickable */
a.mud-menu-item {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ================================================
   NOTE: CompanySelector now uses MudSelect instead of MudMenu
   to avoid overlay click-blocking issues. MudSelect works correctly
   with the DEFECT-12612 fix for close-on-outside-click.
   ================================================ */

/* ================================================
   FIX POPOVER CLIPPING IN DIALOGS
   MudBlazor's .mud-dialog-content has overflow-y: auto
   which clips popovers that extend beyond the dialog bounds.
   Override to allow popovers to extend freely.
   ================================================ */
/* Ensure dialog container allows overflow */
.mud-dialog-container .mud-dialog {
    overflow: visible !important;
}

/* Ensure dialog content allows overflow */
.mud-dialog .mud-dialog-content {
    overflow: visible !important;
}

/* Allow dialog content wrapper to scroll when needed, but only on inner content */
.mud-dialog-content .neo-dialog-content {
    max-height: calc(90vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ================================================
   FIX MUD-MAIN-CONTENT CLIPPING POPOVERS
   MudBlazor applies overflow restrictions to the main
   content area which clips dialog popovers. Override
   to allow popovers to extend beyond page boundaries.
   Use ultra-high specificity to override everything.
   ================================================ */
/* Allow overflow for ALL pages to ensure dialogs work consistently */
html body .mud-layout .mud-main-content,
html body .mud-main-content,
.mud-main-content {
    overflow: visible !important;
    position: static !important; /* Prevent popover positioning relative to this element */
}

/* Ensure MudBlazor layout doesn't clip either */
.mud-layout {
    overflow: visible !important;
}

/* ================================================
   Z-INDEX HIERARCHY NOTE
   Main z-index rules are defined at top of this file.
   See "POPOVER Z-INDEX HIERARCHY - PAGE VS DIALOG CONTEXT"
   ================================================ */

/* ================================================
   DROPDOWN POSITIONING - HISTORY & CURRENT STATE

   Bug #12226: Originally added position:fixed to prevent detachment on scroll
   REVERTED: This global fix caused dropdowns to appear at wrong positions
             (bottom of page) because fixed positioning calculates coordinates
             differently than absolute positioning.

   The proper fix is:
   1. Remove transforms from parent containers (done in employee-dashboard.css)
   2. Let MudBlazor handle native positioning
   3. Use AnchorOrigin/TransformOrigin on MudSelect for fine control

   Reference: https://github.com/MudBlazor/MudBlazor/issues/7451
   ================================================ */

/* DISABLED - Caused dropdowns to appear at bottom of page
.mud-popover-provider .mud-popover {
    position: fixed !important;
}
*/

/* Explicit class - only use when specifically needed */
.mud-popover-fixed {
    position: fixed !important;
}

/* DISABLED - Caused positioning issues
.mud-autocomplete-popover,
.mud-autocomplete .mud-popover,
.mud-popover-content {
    position: fixed !important;
}
*/

/* ================================================
   DEFECT-12707: Prevent background scroll when dialog is open
   When a dropdown opens inside a modal dialog, the background
   page should remain stationary and not scroll.

   IMPORTANT: Must use higher specificity than the body override
   rules above (body:not(#fake-id-for-specificity)) to actually
   take effect. Using :not(#fake-id) bumps specificity to win.

   UPDATED: Removed top: 0 and left: 0 to prevent scroll-to-top issue.
   JavaScript in dialog-scroll-fix.js now handles dynamic positioning
   to preserve scroll position when dialogs open/close.
   ================================================ */

/* Lock body scroll when dialog overlay is present */
/* DEFECT-12707: Prevent background scroll when dialog is open */
/* NOTE: We use ONLY overflow:hidden here, NOT position:fixed.
   position:fixed breaks MudBlazor popover/dropdown positioning inside dialogs
   because getBoundingClientRect() returns incorrect values.
   dialog-scroll-fix.js tracks scroll position and restores it on close. */
body:not(#fake-id-for-specificity):has(.mud-overlay-dialog) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Enhanced scroll lock when BOTH dialog AND dropdown are open */
/* This prevents any scroll chaining when interacting with dropdowns inside dialogs */
body:has(.mud-overlay-dialog):has(.mud-popover-open) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Ensure dialog content scrolls independently and doesn't chain to body */
.mud-dialog .neo-dialog-content,
.mud-dialog-content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ================================================
   FIX: Ensure MudSelect popover stays within viewport
   The popover may be positioned off-screen when the
   trigger element is near the edge of the viewport.
   Constrain max dimensions to keep within viewport
   but DON'T force a width - let dropdowns size naturally.

   NOTE: The popover uses position:fixed and calculates
   top/left based on getBoundingClientRect() which can
   produce unexpected values when body has position:fixed
   (from the dialog overlay scroll lock above).
   ================================================ */
.mud-popover.mud-popover-open {
    max-height: calc(100vh - 32px) !important;
    /* Don't set max-width - let MudBlazor size naturally to content */
}

/* ================================================
   DROPDOWN LIST HEIGHT LIMIT
   Limit dropdown lists to show ~5 items before scrolling.
   Each MudListItem is approximately 36-48px depending on density.
   5 items × 40px average = 200px + small padding buffer = 210px
   ================================================ */
.mud-popover .mud-list,
.mud-select-popover .mud-list,
.mud-autocomplete-popover .mud-list {
    max-height: 210px !important;
    overflow-y: auto !important;
}

/* User profile menu should show all items without scrolling */
.user-profile-menu .mud-list {
    max-height: none !important;
    overflow-y: visible !important;
}

/* ================================================
   FINAL Z-INDEX RULES (MUST BE LAST - ORDER MATTERS)
   These rules are ordered from lowest to highest priority.

   PopoverClass is applied DIRECTLY to .mud-popover element,
   so use .mud-popover.appbar-selector-popover (not :has())
   ================================================ */

/* 1. App bar dropdowns: z-index 2100 (above app bar 2000, drawer 1900)
   Only applies when NO dialog is open */
html body:not(:has(.mud-overlay-dialog)) .mud-popover.appbar-selector-popover,
html body:not(:has(.mud-overlay-dialog)) .mud-popover.user-profile-menu {
    z-index: 2100 !important;
}

/* 2. Dialog dropdowns: z-index 10100 (above dialog container 10000)
   This MUST come after app bar rule to override when dialog is open */
html body:has(.mud-overlay-dialog) .mud-popover,
html body:has(.mud-overlay-dialog) .mud-popover-content,
html body:has(.mud-overlay-dialog) .mud-select-popover {
    z-index: 10100 !important;
}