html, body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* FIXED: Let the loading system handle the app container setup */
#app {
  /* Initial state handled by index.html loading system */
}

/* Prevent the document itself from growing a horizontal scrollbar when the
   drawer/RTL margin math miscomputes. Auth pages keep their own overflow rules. */
html:has(body.egk-app:not(.auth-page)),
body.egk-app:not(.auth-page),
body.egk-app:not(.auth-page) #app {
  max-width: 100%;
  overflow-x: clip;
}

/* App-level styles for EGKits
   All rules scoped under .egk-app to avoid leaking into other frontends */

/* Drawer scrollbars and behavior (scoped) */
.egk-app .mud-drawer {
  overflow: hidden !important;
}
.egk-app .mud-drawer .mud-drawer-content {
  overflow: hidden !important;
}

.egk-app .mud-drawer-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.egk-app .mud-drawer-content {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Nav menu internal scrollbars (scoped) */
.egk-app .mud-navmenu {
  overflow: hidden auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 100, 100, 0.3) transparent !important;
}
.egk-app .mud-navmenu::-webkit-scrollbar {
  width: 4px !important;
}
.egk-app .mud-navmenu::-webkit-scrollbar-track {
  background: transparent !important;
}

.egk-app .mud-navmenu::-webkit-scrollbar-thumb {
  border-radius: 2px !important;
  background: rgba(100, 100, 100, 0.3) !important;
}
.egk-app .mud-navmenu::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.5) !important;
}

/* MudMainContent scroll fix - ensure main content area scrolls properly.
   Height MUST use dvh (dynamic viewport height), not vh: on mobile, 100vh is the
   LARGE viewport (the height with the browser toolbar hidden), so a 100vh shell is
   taller than the visible screen. That pushes the bottom of the scrollable
   .content-wrapper below the fold and makes the inner scroll feel stuck / "not
   scrolling". 100dvh tracks the actual visible viewport so the inner scroll area is
   sized correctly. The plain 100vh line stays first as a fallback for old browsers. */
.egk-app .mud-main-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.egk-app .mud-main-content > .content-wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* MudLayout must not block scroll propagation */
.egk-app .mud-layout {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Clip any residual horizontal overflow from drawer/RTL margin math.
     Use clip (not hidden) so we don't create a secondary scroll container. */
  overflow-x: clip;
  max-width: 100%;
}

/* Persistent drawer offset: DO NOT hand-roll margins on .mud-main-content.
   MudBlazor already applies the correct direction-aware offset natively:
     .mud-drawer-open-persistent-left  .mud-main-content { margin-left:  var(--mud-drawer-width-left) }
     .mud-drawer-open-persistent-right .mud-main-content { margin-right: var(--mud-drawer-width-right) }
   (the drawer anchors right automatically under MudRTLProvider). Custom
   !important margin rules here fought those and caused, in Arabic, either an
   empty strip or content sliding under the drawer. We only need to tell
   MudBlazor how wide our drawer actually is (we style it to 280px; the
   MudBlazor default var is 240px, which would leave a 40px overlap). */
.egk-app .egk-layout {
  --egk-drawer-width: 280px;
  --mud-drawer-width-left: 280px;
  --mud-drawer-width-right: 280px;
}

/* Outer BaseLayout shell: never let RTL drawer math scroll the page sideways */
.egk-app .base-layout-wrapper,
.egk-app .main-app-layout {
  max-width: 100%;
  overflow-x: clip;
}

/* Ensure breadcrumb doesn't flex-grow */
.egk-app .mud-main-content > .breadcrumb-wrapper {
  flex-shrink: 0;
}

/* ── Mobile / tablet scroll fix ──────────────────────────────────────────────
   On touch devices DON'T trap scrolling inside the nested .content-wrapper (a
   flex child with overflow:auto). Nested overflow scrollers behave unreliably
   on mobile/tablet — touch scrolling "sticks" and the page can't move past the
   fold (the reported bug). Instead release the 100dvh / overflow:hidden locks
   on the layout + main content so the DOCUMENT scrolls naturally (body/html are
   already overflow:auto after load; the app bar keeps its padding-top offset;
   ScrollToTop targets window). Desktop (>1024px) keeps the inner-scroll model.
   !important is required: it beats the non-!important scoped MainLayout.razor.css
   rules, which load after this file and would otherwise re-lock the height. */
@media (max-width: 1024px) {
  .egk-app .mud-layout {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .egk-app .mud-main-content {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .egk-app .mud-main-content > .content-wrapper {
    flex: 0 1 auto;
    min-height: 0;
    /* MUST be `overflow: visible` on BOTH axes. CSS spec: `overflow-y: visible`
       combined with `overflow-x: hidden` is an impossible pair, so the browser
       silently COMPUTES overflow-y as `auto` — turning .content-wrapper back into
       a scroll container that has nothing to scroll. On touch devices that
       swallows the swipe (and overscroll-behavior:contain stops it chaining to the
       document), so the page can't scroll. Horizontal overflow is still clipped by
       the ancestor `#app { overflow-x: hidden }`, so `overflow: visible` here is
       safe and is what actually releases the touch-scroll trap. */
    overflow: visible !important;
  }
}

/* Link and button colors (scoped) */
.egk-app a,
.egk-app .btn-link {
  color: #0071c1;
}
.egk-app .btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Accessible focus styles (scoped). Do not blanket-remove outlines. */
.egk-app :focus-visible {
  box-shadow: var(--egk-focus-ring);
  outline: 2px solid var(--egk-focus-color);
  outline-offset: 2px;
}

.egk-app .content {
  padding-top: var(--egk-space-4);
}

.egk-app .valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}
.egk-app .invalid {
  outline: 1px solid red;
}
.egk-app .validation-message {
  color: red;
}

/* Blazor error UI (scoped) */
.egk-app #blazor-error-ui {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--egk-z-toast, 1400);
  display: none;
  width: 100%;
  padding: 0.6rem 1.25rem 0.7rem;
  background: lightyellow;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  color-scheme: light only;
  box-sizing: border-box;
}

.egk-app #blazor-error-ui .dismiss {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  cursor: pointer;
}

.egk-app .blazor-error-boundary {
  padding: 1rem 1rem 1rem 3.7rem;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA9NC42NzgyIDI5MSA9Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDhGNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgeD90ZDgzNGM2ZjA4ODA4NjZMMWM1NmQyMjMzOGVkZDE5NCI+PC9nPjwvc3ZnPg==") no-repeat 1rem/1.8rem, #b32121;
  color: white;
}

.egk-app .blazor-error-boundary::after {
  content: "An error has occurred.";
}

/* Loading progress visuals */
.egk-app .loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem;
}
.egk-app .loading-progress circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.egk-app .loading-progress circle:last-child {
  transition: stroke-dasharray 0.05s ease-in-out;
  stroke: #1b6ec2;
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
}
.egk-app .loading-progress-text {
  position: absolute;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
  text-align: center;
  font-weight: bold;
}
.egk-app .loading-progress-text::after {
  content: var(--blazor-load-percentage-text, "Loading");
}

.egk-app code {
  color: #c02d76;
}

.egk-app .form-floating > .form-control-plaintext::placeholder,
.egk-app .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.egk-app .form-floating > .form-control-plaintext:focus::placeholder,
.egk-app .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ===== PROFESSIONAL LAYOUT PANEL STYLES ===== */

/* Layout Panel Variables */
.egk-app .layout-navigation-panel {
  --layout-border-radius: var(--egk-radius-md);
  --layout-transition: var(--egk-transition-normal, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}
.egk-app .layout-panel {
  background: var(--mud-palette-background);
}

/* Professional Header Styling */
.egk-app .layout-panel .panel-header {
  border-bottom: 1px solid var(--mud-palette-divider);
  padding-bottom: var(--egk-space-4);
}
.egk-app .layout-panel .panel-title {
  color: var(--mud-palette-text-primary);
  font-weight: 600;
}
.egk-app .layout-panel .panel-description {
  color: var(--mud-palette-text-secondary);
  line-height: 1.5;
}
.egk-app .layout-panel .section-title {
  color: var(--mud-palette-text-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--mud-palette-primary);
  padding-bottom: var(--egk-space-1);
}

/* Layout Presets */
.egk-app .layout-panel .preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--egk-space-3);
  margin-bottom: var(--egk-space-2);
}

.egk-app .layout-panel .preset-card {
  border: 2px solid var(--mud-palette-divider);
  border-radius: var(--layout-border-radius);
  transition: var(--layout-transition);
  cursor: pointer;
}
.egk-app .layout-panel .preset-card:hover {
  box-shadow: var(--egk-shadow-md);
  border-color: var(--mud-palette-primary);
  transform: translateY(-2px);
}

.egk-app .layout-panel .preset-card.selected {
  background: var(--mud-palette-primary-lighten);
  box-shadow: var(--egk-shadow-lg);
  border-color: var(--mud-palette-primary);
}
.egk-app .layout-panel .preset-content {
  text-align: center;
}
.egk-app .layout-panel .preset-icon {
  font-size: 2rem;
}
.egk-app .layout-panel .preset-title {
  font-weight: 600;
  margin-bottom: var(--egk-space-1);
}
.egk-app .layout-panel .preset-description {
  color: var(--mud-palette-text-secondary);
  font-size: 0.75rem;
}

/* Layout Settings Grid */
.egk-app .layout-panel .layout-settings-grid {
  display: flex;
  flex-direction: column;
  gap: var(--egk-space-3);
}

.egk-app .layout-panel .layout-setting-card {
  border-radius: var(--layout-border-radius);
  transition: var(--layout-transition);
}
.egk-app .layout-panel .layout-setting-card:hover {
  box-shadow: var(--egk-shadow-sm);
  transform: translateY(-1px);
}

.egk-app .layout-panel .setting-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mud-palette-action-hover);
}
.egk-app .layout-panel .setting-icon {
  font-size: 1.25rem;
}
.egk-app .layout-panel .setting-title {
  font-weight: 600;
  margin-bottom: var(--egk-space-1);
}
.egk-app .layout-panel .setting-description {
  color: var(--mud-palette-text-secondary);
  line-height: 1.4;
}
.egk-app .layout-panel .professional-switch {
  transform: scale(1.1);
}

/* Navigation Style Options */
.egk-app .layout-panel .navigation-style-options {
  display: flex;
  flex-direction: column;
  gap: var(--egk-space-3);
}
.egk-app .layout-panel .navigation-radio-group .mud-radio-group {
  gap: var(--egk-space-3);
}

.egk-app .layout-panel .navigation-style-card {
  border: 2px solid var(--mud-palette-divider);
  border-radius: var(--layout-border-radius);
  transition: var(--layout-transition);
  cursor: pointer;
}
.egk-app .layout-panel .navigation-style-card:hover {
  border-color: var(--mud-palette-primary);
  transform: translateY(-1px);
}
.egk-app .layout-panel .navigation-style-card.selected {
  background: var(--mud-palette-primary-lighten);
  border-color: var(--mud-palette-primary);
}
.egk-app .layout-panel .nav-radio {
  margin: 0;
}
.egk-app .layout-panel .nav-style-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.egk-app .layout-panel .nav-style-title {
  font-weight: 600;
  margin-bottom: var(--egk-space-1);
}
.egk-app .layout-panel .nav-style-description {
  color: var(--mud-palette-text-secondary);
  line-height: 1.4;
}
.egk-app .layout-panel .nav-style-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--egk-space-1);
  margin-top: var(--egk-space-2);
}
.egk-app .layout-panel .preview-chip {
  height: 20px;
  font-size: 0.7rem;
}
.egk-app .layout-panel .current-style-chip {
  height: 20px;
  font-size: 0.7rem;
}

/* Layout Summary */
.egk-app .layout-panel .layout-summary-card {
  border-radius: var(--layout-border-radius);
  background: var(--mud-palette-surface);
}
.egk-app .layout-panel .layout-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--egk-space-4);
  margin-bottom: var(--egk-space-4);
}
.egk-app .layout-panel .summary-item {
  display: flex;
  flex-direction: column;
  gap: var(--egk-space-2);
}
.egk-app .layout-panel .summary-label {
  color: var(--mud-palette-text-secondary);
  letter-spacing: 0.5px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.egk-app .layout-panel .productivity-tip {
  border-radius: var(--layout-border-radius);
  background: var(--mud-palette-info-lighten);
  border-left: 4px solid var(--mud-palette-info);
}

/* Responsive Design */
@media (width <= 768px) {
  .egk-app .layout-panel .preset-grid {
    grid-template-columns: 1fr;
  }
  .egk-app .layout-panel .layout-summary-grid {
    grid-template-columns: 1fr;
  }
  .egk-app .layout-panel .setting-info {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--egk-space-2);
  }
}

/* Dark Mode Adjustments */
.mud-theme-dark .egk-app .layout-panel .preset-card.selected,
.mud-theme-dark .egk-app .layout-panel .navigation-style-card.selected {
  background: var(--mud-palette-primary-darken);
}
.mud-theme-dark .egk-app .layout-panel .setting-icon-container {
  background: var(--mud-palette-action-hover-dark);
}

/* RTL Support */
[dir="rtl"] .egk-app .layout-panel .preset-grid,
[dir="rtl"] .egk-app .layout-panel .layout-settings-grid,
[dir="rtl"] .egk-app .layout-panel .navigation-style-options {
  direction: rtl;
}
[dir="rtl"] .egk-app .layout-panel .setting-icon-container {
  margin-left: var(--egk-space-3);
  margin-right: 0;
}

/* Performance Optimizations */
.egk-app .layout-panel {
  contain: layout style paint;
  will-change: transform;
}

/* ==============================================
   HOSPITALITY RESERVATION BOARD DRAWER FIX
   ============================================== 
   Fix for reservation drawer appearing disabled/grayed out.
   This must be in global CSS because MudDrawer renders outside
   the component scope into a portal/overlay container.
*/

/* Ensure reservation drawer is always fully visible and interactive */
.mud-drawer.reservation-drawer,
.mud-drawer-temporary.reservation-drawer,
.mud-drawer--open.reservation-drawer {
    pointer-events: auto !important;
    opacity: 1 !important;
    z-index: 1400 !important;
}

/* Ensure drawer content is fully visible */
.mud-drawer.reservation-drawer .mud-drawer-content,
.mud-drawer-temporary.reservation-drawer .mud-drawer-content {
    opacity: 1 !important;
    background: var(--mud-palette-surface) !important;
    pointer-events: auto !important;
}

/* Ensure child elements are interactive and visible — EXCEPT genuinely disabled
   controls, which must keep their disabled appearance + non-interactivity (a11y:
   a disabled button must look and behave disabled). */
.mud-drawer.reservation-drawer *:not(.mud-disabled):not(:disabled),
.mud-drawer-temporary.reservation-drawer *:not(.mud-disabled):not(:disabled) {
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* Ensure ENABLED buttons are clickable and visible (disabled excluded). */
.mud-drawer.reservation-drawer button:not(:disabled),
.mud-drawer.reservation-drawer .mud-button:not(.mud-disabled),
.mud-drawer.reservation-drawer .mud-button-root:not(.mud-disabled),
.mud-drawer.reservation-drawer .mud-icon-button:not(.mud-disabled),
.mud-drawer-temporary.reservation-drawer button:not(:disabled),
.mud-drawer-temporary.reservation-drawer .mud-button:not(.mud-disabled),
.mud-drawer-temporary.reservation-drawer .mud-button-root:not(.mud-disabled),
.mud-drawer-temporary.reservation-drawer .mud-icon-button:not(.mud-disabled) {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* (Removed) A previous rule force-enabled .mud-disabled buttons (opacity:1 +
   pointer-events:auto), defeating the disabled affordance. Disabled buttons now
   correctly render disabled; the visibility fix above targets only enabled
   controls, so the original "drawer looks grayed-out" bug stays fixed. */

/* Remove any filters or backdrop effects */
.mud-drawer.reservation-drawer,
.mud-drawer-temporary.reservation-drawer,
.mud-drawer.reservation-drawer *,
.mud-drawer-temporary.reservation-drawer * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
}

/* Ensure overlay/backdrop doesn't cover the drawer */
.mud-overlay-drawer {
    z-index: 1300 !important;
}

/* Navigation drawer must sit above its overlay on mobile/tablet */
.egk-app .mud-drawer.navigation-drawer,
.egk-app .mud-drawer--open.navigation-drawer {
    z-index: 1400 !important;
}

.egk-app .mud-drawer.navigation-drawer .mud-drawer-content {
    pointer-events: auto !important;
}

/* Make absolutely sure the drawer is above any overlays */
.mud-drawer--open.reservation-drawer {
    z-index: 1401 !important;
    position: fixed !important;
}

/* ==============================================
   HOME DASHBOARD CUSTOMIZE DRAWER FIX
   ==============================================
   The customize panel renders as a temporary MudDrawer
   portaled outside component scope. MainLayout elevates
   .mud-overlay to z-index 2000, which sits above the
   default drawer stack and blocks toggles/drag controls.
*/

.mud-drawer.dashboard-customize-drawer,
.mud-drawer-temporary.dashboard-customize-drawer,
.mud-drawer--open.dashboard-customize-drawer {
    pointer-events: auto !important;
    opacity: 1 !important;
    z-index: 2600 !important;
}

.mud-drawer.dashboard-customize-drawer .mud-drawer-content,
.mud-drawer-temporary.dashboard-customize-drawer .mud-drawer-content {
    opacity: 1 !important;
    background: var(--mud-palette-surface) !important;
    pointer-events: auto !important;
}

.mud-drawer.dashboard-customize-drawer *:not(.mud-disabled):not(:disabled),
.mud-drawer-temporary.dashboard-customize-drawer *:not(.mud-disabled):not(:disabled) {
    pointer-events: auto !important;
    opacity: 1 !important;
}

.mud-drawer.dashboard-customize-drawer button:not(:disabled),
.mud-drawer.dashboard-customize-drawer .mud-button:not(.mud-disabled),
.mud-drawer.dashboard-customize-drawer .mud-button-root:not(.mud-disabled),
.mud-drawer.dashboard-customize-drawer .mud-icon-button:not(.mud-disabled),
.mud-drawer.dashboard-customize-drawer .mud-switch:not(.mud-disabled),
.mud-drawer-temporary.dashboard-customize-drawer button:not(:disabled),
.mud-drawer-temporary.dashboard-customize-drawer .mud-button:not(.mud-disabled),
.mud-drawer-temporary.dashboard-customize-drawer .mud-button-root:not(.mud-disabled),
.mud-drawer-temporary.dashboard-customize-drawer .mud-icon-button:not(.mud-disabled),
.mud-drawer-temporary.dashboard-customize-drawer .mud-switch:not(.mud-disabled) {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.mud-drawer.dashboard-customize-drawer,
.mud-drawer-temporary.dashboard-customize-drawer,
.mud-drawer.dashboard-customize-drawer *,
.mud-drawer-temporary.dashboard-customize-drawer * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
}

body:has(.dashboard-customize-drawer.mud-drawer--open) .mud-overlay:not(.mud-overlay-dialog) {
    z-index: 2550 !important;
}

.mud-drawer--open.dashboard-customize-drawer {
    z-index: 2601 !important;
    position: fixed !important;
}


.egk-app .layout-panel .preset-card,
.egk-app .layout-panel .navigation-style-card {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Print Styles */
@media print {
  .egk-app .layout-panel {
    display: none !important;
  }
}

/* Global MudBlazor input focus overrides - now scoped and accessible */
.egk-app .mud-input-root.mud-input-outlined.mud-input-focused,
.egk-app .mud-input-root.mud-input-outlined:focus-within,
.egk-app .mud-input-outlined.mud-input-focused,
.egk-app .mud-input-outlined:focus-within {
  box-shadow: var(--egk-focus-ring);
}

/* ===== CHAT TYPING INDICATOR ANIMATION ===== */
/* Global keyframes for typing indicator - must be global for inline styles to work */
@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* Typing dot base styles for chat */
.typing-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mud-palette-primary, #1976d2);
}

/* Ensure MudBlazor popover dropdowns render above dialogs.
   MudBlazor v9 positions popovers in the MudPopoverProvider. The popovers are
   `position: absolute` and placed at DOCUMENT coordinates (anchorRect + window
   scroll), so the provider must NOT be a positioned/viewport-pinned containing
   block — otherwise every popover is offset by window.scrollY and drops to the
   bottom of the page on any scrolled view (app-wide dropdown-misplacement bug).
   The elevation above dialogs is handled by the high z-index on the popovers
   themselves (rule below), not on the provider. */
.mud-popover-provider {
  pointer-events: none;
}

.mud-popover-provider .mud-popover,
.mud-popover.egk-autocomplete-popover,
.mud-popover-provider .mud-popover.mud-popover-open {
  z-index: 20010 !important;
  pointer-events: auto;
}

/* CRITICAL: a CLOSED popover must never capture pointer input.
   The rule above forces EVERY .mud-popover (incl. closed ones) to
   pointer-events:auto + z-index:20010. The app-switcher mega-menu (.asm-popover)
   is sized large/near-full-screen on mobile, so while CLOSED it stays in the DOM
   as an invisible, full-screen box at z 20010 that swallowed ALL taps (nav menu,
   scroll-to-top, dialog buttons) and blocked page scrolling on mobile/tablet.
   Confirmed via elementFromPoint: center/top/bottom all hit `.asm-popover`
   (pe:auto, pos:fixed). Restoring pointer-events:none on the CLOSED popover makes
   it pass-through; the OPEN popover (.mud-popover-open) keeps auto and works. */
.mud-popover.asm-popover:not(.mud-popover-open) {
  pointer-events: none !important;
}

/* Dialog click fix — SCOPED to "a dialog is open" only.
   The rule above keeps every popover node (incl. CLOSED/hidden ones) at
   pointer-events:auto + z-index:20010. On mobile/tablet a hidden popover box
   overlaps the centered, full-width dialog and swallows taps on its buttons.
   We can't make closed popovers pass-through globally (that regressed page
   scrolling), so we only neutralize them WHILE A DIALOG IS OPEN. Open popovers
   (e.g. a MudSelect opened inside the dialog) keep auto + their high z-index,
   so dropdowns within dialogs still work. Normal pages (no dialog) are untouched,
   preserving the working scroll behavior. */
body:has(.mud-dialog-container .mud-dialog) .mud-popover-provider .mud-popover:not(.mud-popover-open),
body:has(.mud-dialog-root .mud-dialog) .mud-popover-provider .mud-popover:not(.mud-popover-open) {
  pointer-events: none !important;
}