/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL BASE STYLES — embracingearth.space
   Performance & UX best practices:
   • GPU-composited font rendering (antialiased + grayscale)
   • Smooth color-scheme transitions for future dark-mode support
   • text-rendering: optimizeLegibility for premium typography
   ═══════════════════════════════════════════════════════════════════ */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Reserve scrollbar gutter to prevent layout shift WITHOUT making body a
     scroll container. `overflow-y: scroll` (the old approach) made body
     overflow:scroll which broke every position:sticky descendant (they pin
     to body's scroll, but body has height:auto so never actually scrolls).
     `scrollbar-gutter: stable` reserves the same visual space without
     creating any scroll container. — embracingearth.space */
  scrollbar-gutter: stable;
}
html {
  /* Make sure html — not body — owns the page scroll. Sticky descendants
     anchor to the nearest scrolling ancestor (now html / the viewport).
     embracingearth.space */
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUI SVG SAFEGUARD — embracingearth.space
   Tailwind's preflight resets SVGs to `display: block`. If MUI's dynamic CSS 
   injection is delayed or blocked by an extension, SVGs inside flex containers 
   (like Select dropdowns) can catastrophically expand to 100% width.
   This safety net ensures unstyled SVGs remain reasonably sized.
   ═══════════════════════════════════════════════════════════════════════════ */
svg[class*="MuiSvgIcon-"] {
  width: 1em !important;
  height: 1em !important;
  display: inline-block;
  flex-shrink: 0;
}

/* ═══ Performance: GPU-promote common animated containers ═══ */
.MuiGrid-container,
.MuiCard-root,
.MuiPaper-root {
  /* Hint to browser for efficient compositing during transitions */
  contain: layout style;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL PAGE CONTAINER — embracingearth.space
   ⚠️  ALL outer padding lives in Layout.tsx inner container.
       This class must NOT set padding/margin — it caused triple-stacking
       (Layout p:3 + inner px + this class) making pages have different
       widths depending on which wrapper they used.
   The Framer Motion <PageTransition> component handles enter/exit
   animations — no CSS animation here to avoid double-fade flicker.
   ═══════════════════════════════════════════════════════════════════ */
.page-container {
  max-width: 100%;
  margin: 0 auto;
  /* No padding — Layout.tsx owns it */
  /* No animation — PageTransition.tsx owns it */
}

/* Premium Glass & Shadow Effects */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  border-radius: 16px;
}

.premium-shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar Polish */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.5);
}

/* ✨ Glitter Text Animation */
@keyframes glitter {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.text-glitter {
  background: linear-gradient(270deg,
      #FFD700,
      #FFA500,
      #FF69B4,
      #9370DB,
      #4169E1,
      #00BFFF);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glitter 3s ease infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SCROLL FIX - embracingearth.space
   Ensures touch scrolling works in all modal/dialog/popup containers on iOS/Android
   899.95px so it fires at the same width as the JS bottom-sheet switch
   (useMediaQuery(down('md'))) — dialogs were CSS-styled at 768px but
   JS-switched at 900px, leaving tablets in a half-state.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899.95px) {

  /* Enable touch scroll in common scrollable containers */
  [role="dialog"] [style*="overflow"],
  [role="presentation"] [style*="overflow"],
  .scrollable-content {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Ensure modals and dialogs allow internal scrolling */
  .MuiModal-root>div:not([class*="backdrop"]),
  .MuiPopover-paper {
    touch-action: pan-y !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POLISHED MOBILE UX - Kraken-tier quality - embracingearth.space
   Premium scroll behavior, touch feedback, typography, and layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* Global smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Reduced motion preference support (accessibility)

   `*::before, *::after` were added here, and they are not a tidy-up: almost
   every expensive decorative animation in this client lives on a pseudo-
   element, not on the element itself (the sidebar glow, the big-button glows
   and sheens, the shimmer sweeps — all `&::before` / `&::after`). A bare `*`
   does not match a pseudo-element, so a user who had asked their OS for
   reduced motion still got the whole decorative layer, which is both the
   accessibility failure and the expensive half of the idle cost.

   A complete copy of this rule (with the pseudo-elements) has existed in
   themes/globalTheme.css for some time — but nothing imports that file (see
   theme/tokens.ts, which records the same discovery about its colour
   variables), so it has never applied to anything. Fixed here, in the sheet
   that actually ships, rather than by reviving the dead one.

   Note this is the OS-level preference. The in-app Accessibility toggle
   (types/theme.ts → applyThemeSettings) emits its own copy of this block and
   defaults to `reducedMotion: false`, so it must never be the only guard.
   embracingearth.space */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Accessibility (WCAG 2.4.7 Focus Visible): a clear focus ring for CUSTOM
   keyboard-operable elements — the role="button" <div>/<img> tiles & rows we made
   focusable (upload/camera/thumbnail tiles, timeline rows, receipt thumbnails).
   :focus-visible means it shows only for keyboard navigation, never on a mouse
   click, so it's invisible to mouse users. Native MUI buttons/inputs/links keep
   their own focus styling (they aren't role="button"). embracingearth.space */
[role='button']:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST REFINEMENTS (≤768px) — Kraken/Coinbase-tier UX
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── CRITICAL: Prevent horizontal overflow on all mobile pages ───
     Uses `overflow-x: clip` instead of `hidden` so we don't create a scroll
     container (which would silently auto-compute overflow-y to auto and kill
     position:sticky descendants). #root is excluded for the same reason.
     embracingearth.space */
  html, body {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* Force all flex rows to wrap on mobile to prevent overflow */
  .MuiStack-root[style*="row"],
  .MuiBox-root[class*="flexRow"] {
    flex-wrap: wrap !important;
  }

  /* ─── Typography scale-up ─── */
  /* Base font on mobile: 16px minimum for readability (WCAG AA) */
  html {
    font-size: 16px;
  }

  /* Prevent iOS auto-zoom on input focus (inputs below 16px trigger zoom) */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* ─── Cards: more breathing room ─── */
  .MuiCard-root,
  .MuiPaper-root.MuiCard-root {
    border-radius: 16px;
  }

  .MuiCardContent-root {
    padding: 16px !important;
  }

  .MuiCardContent-root:last-child {
    padding-bottom: 16px !important;
  }

  /* ─── Tables: readable on small screens ─── */
  .MuiTableCell-root {
    padding: 12px 12px;
    font-size: 0.875rem;
  }

  .MuiTableCell-head {
    font-weight: 600;
    font-size: 0.8125rem;
  }

  /* ─── Buttons: larger text, more padding ─── */
  .MuiButton-root {
    font-size: 0.9375rem;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    text-transform: none;
  }

  .MuiButton-sizeSmall {
    font-size: 0.8125rem;
    padding: 8px 16px;
    min-height: 40px;
  }

  .MuiButton-sizeLarge {
    font-size: 1rem;
    padding: 14px 28px;
    min-height: 52px;
  }

  /* ─── Typography bumps ─── */
  .MuiTypography-h4 {
    font-size: 1.5rem !important;
  }

  .MuiTypography-h5 {
    font-size: 1.25rem !important;
  }

  .MuiTypography-h6 {
    font-size: 1.125rem !important;
  }

  .MuiTypography-body1 {
    font-size: 0.9375rem;
  }

  .MuiTypography-body2 {
    font-size: 0.875rem;
  }

  /* ─── Chips: tappable ─── */
  .MuiChip-root {
    height: 36px;
    font-size: 0.8125rem;
    border-radius: 18px;
  }

  .MuiChip-label {
    padding: 0 12px;
  }

  /* ─── Tabs: thumb-friendly ─── */
  .MuiTab-root {
    min-height: 48px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
    padding: 12px 16px;
  }

  /* ─── Select & TextField: comfortable sizing ─── */
  .MuiOutlinedInput-root {
    border-radius: 12px;
  }

  .MuiOutlinedInput-input {
    padding: 14px 16px;
  }

  .MuiInputLabel-root {
    font-size: 0.9375rem;
  }

  /* ─── Bottom sheet gesture area ─── */
  .MuiDialog-paper[style*="bottom"] .drag-handle,
  .bottom-sheet-handle {
    width: 40px;
    height: 5px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    margin: 10px auto 6px;
  }

  /* ─── Alert components ─── */
  .MuiAlert-root {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.875rem;
  }

  /* ─── Accordion ─── */
  .MuiAccordionSummary-root {
    min-height: 52px !important;
    padding: 0 16px;
  }

  .MuiAccordionSummary-content {
    margin: 14px 0 !important;
  }

  /* Tooltips are NOT hidden on mobile — MUI shows them natively on long-press.
     Individually noisy tooltips opt out via disableTouchListener at the
     component. embracingearth.space */

  /* ─── Snackbar: wider on mobile ───
     Bottom clearance includes the safe-area inset because MobileBottomBar grows
     by it on notched phones. Keep in sync with the MuiSnackbar theme override
     in App.tsx (this !important copy wins). embracingearth.space */
  .MuiSnackbar-root {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; /* Above bottom nav */
  }

  .MuiSnackbarContent-root {
    min-width: 0 !important;
    width: 100%;
    border-radius: 12px;
    font-size: 0.875rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIALOG + TOUCH-TARGET RULES (≤899.95px) — embracingearth.space
   Moved out of the ≤768px block above: the bottom-sheet JS switch is
   useMediaQuery(down('md')) = 900px, so dialog chrome and touch sizing must
   fire at the same width (tablets are touch devices too). Phone-only
   cosmetics stay in the narrower block above.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899.95px) {

  /* ─── Hide scrollbars in modal surfaces ─── */
  .MuiDialogContent-root,
  .MuiDrawer-paper,
  [role="dialog"] {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .MuiDialogContent-root::-webkit-scrollbar,
  .MuiDrawer-paper::-webkit-scrollbar,
  [role="dialog"]::-webkit-scrollbar {
    display: none;
  }

  /* ─── Touch targets: 48px minimum (Google Material 3 spec) ───
     Chips excluded: they're secondary facets, not primary tap actions —
     the intended 36px mobile chip height applies. embracingearth.space */
  button,
  [role="button"],
  .MuiIconButton-root,
  .MuiListItemButton-root,
  .MuiMenuItem-root,
  .MuiTab-root {
    min-height: 48px;
  }

  /* Links and standalone buttons need both dimensions */
  a:not(.MuiTypography-root),
  .MuiButton-root {
    min-height: 48px;
  }

  /* Icon buttons: 44px with generous padding */
  .MuiIconButton-root {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  /* List items: taller for thumb reach */
  .MuiListItem-root,
  .MuiListItemButton-root {
    min-height: 52px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* ─── Dialogs: mobile spacing — only when NOT fullScreen ───
     Skip dialogs that opted into fullScreen (they have .MuiDialog-paperFullScreen).
     Use lower specificity (no !important on size) so component-level sx wins.
     Margin is intentionally NOT set here: App.css owns dialog-paper margin
     (`margin: 0 !important` on the same non-fullScreen selector, higher
     specificity) as the single source of truth. — embracingearth.space */
  .MuiDialog-paper:not(.MuiDialog-paperFullScreen) {
    max-height: calc(100vh - 24px);
    width: calc(100% - 24px);
    max-width: 100%;
  }

  .MuiDialogTitle-root {
    padding: 20px 20px 12px !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
  }

  .MuiDialogContent-root {
    padding: 8px 20px 20px !important;
  }

  /* Nested-DialogContent de-doubling lives in App.css (.MuiDialog-paper
     .MuiDialogContent-root wins the cascade tie there). embracingearth.space */

  /* :not(.compat-sheet-actions) — CompatDialog's cloned actions render inside the
     bottom sheet's own padded footer Box; padding here would double up. embracingearth.space */
  .MuiDialogActions-root:not(.compat-sheet-actions) {
    padding: 12px 20px 20px !important;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION GATE — decoration stops when nobody can see it. embracingearth.space

   lib/motionGate.ts publishes `data-fin-motion` on <html>; these rules turn it
   into `animation-play-state`. See that file for why this exists and for the
   measured numbers. In short: an always-on CSS animation costs the same
   whether or not it is being looked at, and a desktop app spends most of its
   life behind another window.

   `paused` rather than `none` on purpose — a paused animation holds its
   current frame and resumes from it, so nothing jumps when the window returns.
   ═════════════════════════════════════════════════════════════════════════ */

html[data-fin-motion='calm'] *,
html[data-fin-motion='calm'] *::before,
html[data-fin-motion='calm'] *::after,
html[data-fin-motion='off'] *,
html[data-fin-motion='off'] *::before,
html[data-fin-motion='off'] *::after {
  animation-play-state: paused !important;
}

/* WHAT KEEPS MOVING WHILE THE WINDOW IS MERELY UNFOCUSED.

   A progress indicator is not decoration: it is the app telling you that work
   you started is still running. Freezing it while you read something in
   another window would be a lie, and you can still see it. So `calm` spares
   anything that reports live progress — MUI's own spinners and bars, plus
   anything marked `data-motion-keep`. Nothing is spared in `off`, where the
   window is not on screen at all.

   These selectors carry a class/attribute, so they outrank the rule above on
   specificity and do not depend on source order. */
html[data-fin-motion='calm'] [data-motion-keep],
html[data-fin-motion='calm'] [data-motion-keep] *,
html[data-fin-motion='calm'] [data-motion-keep]::before,
html[data-fin-motion='calm'] [data-motion-keep]::after,
html[data-fin-motion='calm'] .MuiCircularProgress-root,
html[data-fin-motion='calm'] .MuiCircularProgress-root *,
html[data-fin-motion='calm'] .MuiLinearProgress-root,
html[data-fin-motion='calm'] .MuiLinearProgress-root *,
html[data-fin-motion='calm'] .MuiLinearProgress-root::before,
html[data-fin-motion='calm'] .MuiLinearProgress-root::after {
  animation-play-state: running !important;
}

/* Global layout safety.
   ⚠️  CRITICAL — use `overflow-x: clip`, NOT `hidden`.
   `hidden` triggers the CSS spec's "you can't mix visible and non-visible
   on the two axes" rule: the browser auto-computes overflow-y to non-visible
   too, turning the element into a scroll container. Sticky descendants then
   pin to THIS container's scroll — which never actually scrolls because
   body/html have height:auto and grow to fit content. Sticky becomes inert.
   `overflow: clip` (Chrome 90+, Firefox 81+, Safari 15.4+) prevents the
   overflow WITHOUT creating a scroll container — sticky descendants keep
   using window/html as their natural scroll context. embracingearth.space */
html,
body {
  max-width: 100vw;
  overflow-x: clip;
}
html,
body,
#root {
  /* Never apply transforms/filters on root elements; they break position: fixed/sticky */
  transform: none !important;
  filter: none !important;
}

/* Mobile: force page content to respect viewport width (NOT dialogs) */
@media (max-width: 768px) {
  /* Containers that may have buttons/chips in a row */
  .MuiCardContent-root > .MuiBox-root,
  .MuiCardContent-root > .MuiStack-root,
  main {
    max-width: 100vw;
  }

  /* Replaced `main *` (which crushed overflow-x:auto table containers to the
     viewport width). Only replaced media needs capping — page overflow is
     already guarded by html/body overflow-x:clip. embracingearth.space */
  main img,
  main video,
  main canvas {
    max-width: 100%;
  }
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Global fix for LEGACY Dialog components only - exclude enhanced dialogs */
.MuiDialog-root:not(.enhanced-dialog-container) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  /* Changed to center */
  justify-content: center !important;
  z-index: 1300 !important;
  padding: 16px !important;
  /* Add padding for mobile safety */
  /* Force viewport positioning */
  transform: none !important;
  margin: 0 !important;
  /* Remove any filters that might be applied */
  filter: none !important;
}

.MuiDialog-root:not(.enhanced-dialog-container) .MuiDialog-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  /* Changed to center */
  justify-content: center !important;
  padding: 16px !important;
  overflow: visible !important;
  /* Allow dialog positioning - was hidden causing clipping */
  /* Force viewport positioning */
  transform: none !important;
  margin: 0 !important;
  /* Remove any filters that might be applied */
  filter: none !important;
  /* CRITICAL: Override inline styles that hide the container */
  opacity: 1 !important;
  visibility: visible !important;
  /* CRITICAL z-index fix (2026-05-30): the container has position:fixed, which
     creates its OWN stacking context — so the paper's z-index is trapped inside
     it and can't beat the backdrop at the root level. The backdrop below is
     forced to 1399 !important; without an explicit container z-index the
     container falls to the theme's value (2), so the backdrop paints ON TOP of
     the whole dialog and swallows every click (modal looks open but closes on
     interaction, hover dead). Lifting the CONTAINER above the backdrop is what
     actually fixes click-through — paper z-index alone never could.
     embracingearth.space */
  z-index: 1400 !important; /* above backdrop (1399) */
}

/* embracingearth.space — a fullScreen dialog (e.g. mobile) must be edge-to-edge.
   Two things blocked that: (1) the container's 16px safety padding, and (2) the
   global `.MuiDialog-paper { max-width: calc(100vw - 32px) }` cap overriding
   MUI's own paperFullScreen sizing. Both are neutralised here for fullScreen. */
.MuiDialog-root:not(.enhanced-dialog-container) .MuiDialog-container:has(> .MuiDialog-paperFullScreen) {
  padding: 0 !important;
}
/* Root-level carve-out: the root rule above forces `padding: 16px !important`
   on EVERY legacy dialog root — that padding shrinks a fullScreen mobile sheet
   away from the viewport edges. Zero it when the root hosts a fullScreen
   paper so the sheet's own offset/padding survive. embracingearth.space */
.MuiDialog-root:not(.enhanced-dialog-container):has(.MuiDialog-paperFullScreen) {
  padding: 0 !important;
}
.MuiDialog-root:not(.enhanced-dialog-container) .MuiDialog-paperFullScreen {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.MuiDialog-root:not(.enhanced-dialog-container) .MuiDialog-paper:not(.MuiDialog-paperFullScreen) {
  /* Positioning only — DO NOT force max-width / max-height here.
     Doing so overrides MUI's maxWidth="sm|md|lg|xl" prop and makes every
     dialog stretch to the viewport. Sizes are controlled by the component.
     — embracingearth.space */
  position: relative !important;
  margin: 0 !important;
  z-index: 1400 !important; /* Above backdrop */
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  filter: none !important;
}

/* Ensure backdrop is positioned correctly, but let MUI control visibility */
.MuiBackdrop-root {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1399 !important;
  /* Below dialog but above other content */
  /* Do not force backdrop to be visible; allow MUI state to toggle it */
  transform: none !important;
  margin: 0 !important;
  filter: none !important;
}

/* Removed: legacy role="dialog" overrides. In MUI v5 role="dialog" IS the paper
   element itself, so the original selectors `div[role="dialog"] .MuiDialog-paper`
   never matched anything useful. The `:not(.enhanced-dialog-container)` rules
   above already cover positioning. — embracingearth.space */

/* ULTRA AGGRESSIVE OVERRIDE - Target all possible dialog selectors */
/*
[class*="MuiDialog"],
[class*="MuiBackdrop"],
[role="dialog"],
[data-testid*="dialog"],
[data-testid*="modal"] {
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

[role="dialog"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1300 !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.MuiBackdrop-root {
  opacity: 1 !important;
  visibility: visible !important;
  background-color: transparent !important;
}
*/

/* Removed forced viewport centering overrides. */

/* Remove any body-level filters that might affect dialogs */
/* body filters removed to prevent dialog interference */

/* Removed dialog/backdrop global visibility overrides. */

/* Removed extra dialog container visibility overrides. */

/* ═══ Mobile dialog — bottom-sheet with PROPER safe area clearance ═══
   AppBar = 52px, BottomNav ≈ 60px + safe-area.
   Dialog.tsx already handles bottom-sheet positioning — these CSS rules
   act as a safety net for legacy MuiDialog usage that bypasses Dialog.tsx.
   IMPORTANT: Do NOT set max-height too aggressively — Dialog.tsx owns that.
   ═══════════════════════════════════════════════════════════════════════ */
/* 899.95px (not 768px) so the CSS safety net fires at the SAME width as
   Dialog.tsx's useMediaQuery(down('md')) JS switch. embracingearth.space */
@media (max-width: 899.95px) {

  /* Container: bottom-aligned for sheet effect, SAFE z-index.
     Selectors mirror the legacy `:not(.enhanced-dialog-container)` rules above
     so these LATER rules win the !important specificity tie (the bare
     `.MuiDialog-container` selector lost to the legacy centering rules). */
  .MuiDialog-root:not(.enhanced-dialog-container),
  .MuiDialog-root:not(.enhanced-dialog-container) .MuiDialog-container {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  /* Paper: full-width bottom sheet, clears AppBar at top */
  .MuiDialog-paper {
    /* 52px AppBar + 16px breathing room = 68px top clearance */
    max-height: calc(100dvh - 68px) !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    /* Safe area bottom padding so buttons aren't behind home indicator */
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
  }

  /* Title: clear, bold */
  .MuiDialog-paper .MuiDialogTitle-root {
    padding: 16px 20px 10px !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
  }

  /* Content: scrollable, touch-optimised */
  .MuiDialog-paper .MuiDialogContent-root {
    flex: 1 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: 4px 20px 16px !important;
  }

  /* De-double the NESTED DialogContent. CompatDialog renders a consumer
     <DialogContent> inside this sheet's own padded MuiDialogContent, so the
     20px side padding above stacked twice — ~40px of dead gutter each side on
     phones, on top of the sheet's 16px. Zero the inner one's horizontal
     padding (higher specificity than the rule above so it wins); the outer
     sheet already supplies the gutter. Mirrors the .compat-sheet-actions
     footer de-doubling. embracingearth.space */
  .MuiDialog-paper .MuiDialogContent-root .MuiDialogContent-root {
    /* All four sides: the parent rule above also sets 4px top / 16px bottom,
       which double-stacked vertically the same way the sides did. The outer
       sheet supplies the gutter; Tabs + each TabPanel supply inner spacing. */
    padding: 0 !important;
  }

  /* Actions: comfortable tap zone.
     :not(.compat-sheet-actions) — CompatDialog's cloned actions sit inside the
     bottom sheet's own padded footer Box; padding here would double up. embracingearth.space */
  .MuiDialog-paper .MuiDialogActions-root:not(.compat-sheet-actions) {
    padding: 10px 20px 10px !important;
    gap: 8px;
  }

  /* Drawer scroll */
  .MuiDrawer-paper {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}

/* ─── Tablet dialog sizing ─── embracingearth.space
   PREVIOUS BUG: a blanket `max-width: 80vw !important` on every
   `.MuiDialog-paper` between 769–1024px overrode MUI's per-component
   `maxWidth="sm|md|lg"` prop. Result: every dialog that asked for
   "sm" (600px) stretched to 820px+ on tablets — including
   IncomeSetupDialog which became near-fullscreen on smaller laptops.
   See screenshot evidence from 2026-05-26.

   FIX: scope the cap to ONLY dialogs that opted into NO width via
   `maxWidth={false}` (MUI compiles this to `.MuiDialog-paperWidthFalse`).
   Dialogs that explicitly request `maxWidth="sm|md|lg|xl"` get an
   MUI class like `.MuiDialog-paperWidthSm` and keep their requested
   width. The blanket cap is preserved as a safety net only for
   "no maxWidth" dialogs that would otherwise expand uncontrolled.

   For most dialogs you should NOT rely on this — set `maxWidth` on
   the component instead. */
@media (min-width: 769px) and (max-width: 1024px) {
  .MuiDialog-paper.MuiDialog-paperWidthFalse:not(.MuiDialog-paperFullScreen) {
    max-width: 80vw;
  }
}

/* Enhanced Dialog Styles - No backdrop blur (handled by React component) */
/* Backdrop blur is now handled by the React component's style prop */

/* Enhanced backdrop for glassmorphism */
.enhanced-backdrop {
  background-color: transparent !important;
}

/* EnhancedDialog relies on component-scoped backdrop handling; no global hiding needed. */

/* Scoped EnhancedDialog backdrop helpers retained but simplified. */
/* 
Z-INDEX HIERARCHY (from bottom to top):
1. Main content: z-index: 1
2. EnhancedDialog backdrop: z-index: 1301 (1300 + 1)
3. EnhancedDialog content: z-index: 1310 (1300 + 10)
4. Sidebar/Navigation: z-index: 1600
5. Dropdowns/Menus: z-index: 1700

This ensures proper layering without conflicts.
*/

/* Keep dialog container default layering; no forced z-index. */

/* Keep popper/menu defaults; remove global z-index forcing to avoid interfering with AppBar/Drawer. */

/* Remove per-style z-index rules. */

/* Remove sidebar z-index forcing; Layout sets correct values. */

/* Remove duplicate sidebar handling; not needed. */

/* Remove menu z-index forcing. */

/* Remove z-index lowering on header when dialog is active to avoid sticky glitches */
/* .enhanced-dialog-active .MuiBox-root,
.enhanced-dialog-active main,
.enhanced-dialog-active header {
  z-index: 1 !important;
} */

/* Remove global backdrop disabling; let components control it. */

/* Prevent global backdrop-blur classes from affecting EnhancedDialog */
.enhanced-dialog-container .backdrop-blur,
.enhanced-dialog-container .backdrop-blur-sm,
.enhanced-dialog-container .backdrop-blur-lg,
.enhanced-dialog-container .glass-morphism,
.enhanced-dialog-container .glass-morphism-dark {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Force EnhancedDialog to be the only visible dialog layer */
/* Use 100% instead of 100vw to avoid scrollbar-induced overflow - embracingearth.space */
.enhanced-dialog-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Remove only backdrops globally when EnhancedDialog is active; keep dialogs visible */
/* ✅ FIXED: Only target dialog backdrops, preserve dropdown backdrops for click-outside behavior */
.enhanced-dialog-active *[class*="MuiBackdrop"][class*="MuiDialog-backdrop"],
body:has(.enhanced-dialog-container) *[class*="MuiBackdrop"][class*="MuiDialog-backdrop"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -999999 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

/* Do not hide dialogs/containers; we only remove backdrops now */

/* Removed global backdrop removal. */

/* Removed nuclear backdrop override block. */

/* Removed maximum-specificity backdrop overrides. */

/* Keep defaults for drawers/menus. */

/* Drag handle styles */
.drag-handle {
  cursor: grab !important;
}

.drag-handle:active {
  cursor: grabbing !important;
}

/* Enhanced dialog animations */
@keyframes enhancedDialogEnter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes enhancedDialogExit {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
}

.enhanced-dialog-enter {
  animation: enhancedDialogEnter 0.3s ease-out;
}

.enhanced-dialog-exit {
  animation: enhancedDialogExit 0.3s ease-in;
}

/* DISABLED: We no longer hide MUI menus/popovers/selects while EnhancedDialog is active. Backdrops are already suppressed elsewhere to prevent dimming. */

/* ULTRA-SPECIFIC: Only hide DIALOG backdrops; ALLOW Menu/Popover backdrops (embracingearth.space) */
/* ⚠️ CRITICAL: These rules must NOT block Menu/Popover backdrops inside dialogs */
.enhanced-dialog-active .MuiBackdrop-root.MuiBackdrop-invisible.MuiModal-backdrop:not(.enhanced-dialog-container):not([class*="MuiMenu-backdrop"]):not([class*="MuiPopover-backdrop"]),
.enhanced-dialog-active .css-g3hgs1-MuiBackdrop-root-MuiModal-backdrop:not(.enhanced-dialog-container):not([class*="MuiMenu-backdrop"]):not([class*="MuiPopover-backdrop"]),
.enhanced-dialog-active .css-1nnwp34-MuiBackdrop-root-MuiDialog-backdrop:not(.enhanced-dialog-container),
.enhanced-dialog-active .MuiBackdrop-invisible:not(.enhanced-dialog-container):not([class*="MuiMenu-backdrop"]):not([class*="MuiPopover-backdrop"]),
body:has(.enhanced-dialog-container) .MuiBackdrop-root.MuiBackdrop-invisible.MuiModal-backdrop:not(.enhanced-dialog-container):not([class*="MuiMenu-backdrop"]):not([class*="MuiPopover-backdrop"]),
body:has(.enhanced-dialog-container) .css-g3hgs1-MuiBackdrop-root-MuiModal-backdrop:not(.enhanced-dialog-container):not([class*="MuiMenu-backdrop"]):not([class*="MuiPopover-backdrop"]),
body:has(.enhanced-dialog-container) .css-1nnwp34-MuiBackdrop-root-MuiDialog-backdrop:not(.enhanced-dialog-container),
body:has(.enhanced-dialog-container) .MuiBackdrop-invisible:not(.enhanced-dialog-container):not([class*="MuiMenu-backdrop"]):not([class*="MuiPopover-backdrop"]) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -999999 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  transform: scale(0) !important;
  clip: rect(0, 0, 0, 0) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* EMERGENCY OVERRIDE: Target the specific backdrop class directly (embracingearth.space) */
/* ⚠️ CRITICAL: Exclude Menu/Popover backdrops to allow dropdowns inside dialogs */
.css-1nnwp34-MuiBackdrop-root-MuiDialog-backdrop:not([class*="MuiMenu-backdrop"]):not([class*="MuiPopover-backdrop"]) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -999999 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  transform: scale(0) !important;
  clip: rect(0, 0, 0, 0) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Also target any MuiDialog backdrop globally (but exclude Menu/Popover) */
div[class*="MuiBackdrop-root"][class*="MuiDialog-backdrop"]:not([class*="MuiMenu-backdrop"]):not([class*="MuiPopover-backdrop"]) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -999999 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  transform: scale(0) !important;
  clip: rect(0, 0, 0, 0) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   DROPDOWN CLICK-OUTSIDE FIX (embracingearth.space)
   ============================================================
   CRITICAL: Dropdowns need backdrops for click-outside detection.
   Strategy: Keep backdrops INVISIBLE but FUNCTIONAL for dropdowns.
             Continue DISABLING backdrops for dialogs (preserve existing fix).
   ============================================================ */

/* ✅ ENSURE DROPDOWN MENUS HAVE HIGH Z-INDEX */
div[class*="MuiMenu-root"],
div[class*="MuiPopover-root"],
div[class*="MuiSelect-root"]>div[class*="MuiMenu-root"],
div[class*="MuiAutocomplete-root"]>div[class*="MuiMenu-root"] {
  z-index: 1300 !important;
  /* Higher than dialogs (1200) but lower than modals (1300) */
}

/* ✅ CRITICAL FIX: Boost dropdown z-index when inside glassmorphism popups (embracingearth.space) */
.enhanced-dialog-container div[class*="MuiMenu-root"],
.enhanced-dialog-container div[class*="MuiPopover-root"],
.enhanced-dialog-container div[class*="MuiSelect-root"]>div[class*="MuiMenu-root"],
.enhanced-dialog-container div[class*="MuiAutocomplete-root"]>div[class*="MuiMenu-root"] {
  z-index: 1700 !important;
  /* Above EnhancedDialog container (1695) to prevent rendering behind panel */
}

/* ✅ ULTRA CRITICAL FIX: Target MUI portals globally when glassmorphism dialog is open (embracingearth.space) */
/* MUI Select renders menus via portals outside the dialog DOM, so we need global targeting */
body:has(.enhanced-dialog-container) div[class*="MuiMenu-root"],
body:has(.enhanced-dialog-container) div[class*="MuiPopover-root"]:not([class*="MuiDialog"]),
body:has(.enhanced-dialog-container) div[class*="MuiPaper-root"][role="presentation"],
body:has(.enhanced-dialog-container) div[class*="MuiPaper-root"][role="menu"] {
  z-index: 1700 !important;
  /* Force all dropdowns above glassmorphism dialogs */
}

/* ✅ ENSURE TABLE DROPDOWNS ARE NOT BLOCKED BY TABLE OVERFLOW
   Scoped: stickyHeader cells excluded (position:relative here broke
   position:sticky headers), and the old `... *` descendant rule is gone
   (it nuked text-overflow:ellipsis in every cell). Selects/Menus render
   through portals, so cell overflow doesn't clip them anyway.
   embracingearth.space */
.MuiTable-root .MuiTableCell-root:not(.MuiTableCell-stickyHeader) {
  overflow: visible !important;
}

/* ✅ ENSURE DROPDOWN BACKDROPS WORK IN TABLES */
.MuiTable-root div[class*="MuiBackdrop-root"][class*="MuiMenu-backdrop"],
.MuiTable-root div[class*="MuiBackdrop-root"][class*="MuiPopover-backdrop"] {
  pointer-events: auto !important;
  z-index: 1299 !important;
}

/* ✅ CRITICAL FIX: Boost dropdown backdrops in glassmorphism popups (embracingearth.space) */
/* REMOVED: This was preventing dialog from closing when dropdown is open - embracingearth.space */
/* .enhanced-dialog-container div[class*="MuiBackdrop-root"][class*="MuiMenu-backdrop"],
.enhanced-dialog-container div[class*="MuiBackdrop-root"][class*="MuiPopover-backdrop"] {
  pointer-events: auto !important;
  z-index: 1699 !important;
  display: block !important;
  opacity: 0 !important;
  visibility: visible !important;
} */

/* ✅ ULTRA CRITICAL FIX: Global backdrop targeting when glassmorphism dialog is open (embracingearth.space) */
/* REMOVED: This was preventing dialog from closing when dropdown is open - embracingearth.space */
/* body:has(.enhanced-dialog-container) div[class*="MuiBackdrop-root"][class*="MuiMenu-backdrop"],
body:has(.enhanced-dialog-container) div[class*="MuiBackdrop-root"][class*="MuiPopover-backdrop"]:not([class*="MuiDialog"]),
body:has(.enhanced-dialog-container) div[class*="MuiBackdrop-root"][class*="MuiModal-backdrop"]:not([class*="MuiDialog"]) {
  pointer-events: auto !important;
  z-index: 1699 !important;
  display: block !important;
  opacity: 0 !important;
  visibility: visible !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
} */

/* ENABLE DROPDOWN/MENU BACKDROPS (for click-outside functionality) */
/* Use 100% instead of 100vw to avoid scrollbar-induced overflow - embracingearth.space */
div[class*="MuiBackdrop-root"][class*="MuiMenu-backdrop"],
div[class*="MuiBackdrop-root"][class*="MuiPopover-backdrop"]:not([class*="MuiDialog"]),
div[class*="MuiBackdrop-root"][class*="MuiModal-backdrop"]:not([class*="MuiDialog-backdrop"]) {
  /* Make backdrop invisible but clickable - preserves click-outside behavior */
  display: block !important;
  opacity: 0 !important;
  /* Invisible */
  visibility: visible !important;
  pointer-events: auto !important;
  /* ✅ CRITICAL: Enables click-outside detection */
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Let MUI manage positioning/z-index */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  clip: auto !important;
  z-index: inherit !important;
}

/* ✅ GLOBAL OVERRIDE: Ensure dropdown backdrops always work */
div[class*="MuiBackdrop-root"]:not([class*="MuiDialog-backdrop"]) {
  pointer-events: auto !important;
}

/* ✅ CRITICAL FIX: Prevent mobile sidebar from blocking content clicks - embracingearth.space */
@media (max-width: 899px) {

  /* ✅ NUCLEAR OPTION: Hide permanent drawer completely on mobile/tablet */
  .MuiDrawer-root:not(.MuiModal-root) {
    display: none !important;
    pointer-events: none !important;
  }

  /* ✅ ULTRA CRITICAL: Ensure ALL content is clickable - embracingearth.space */
  main[role="main"],
  .MuiBox-root[component="main"],
  div[data-testid*="main-content"],
  .main-content-area,
  main[role="main"] *,
  .MuiBox-root[component="main"] * {
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  /* ✅ EMERGENCY FIX: Force main content to be on top of any hidden layers - embracingearth.space */
  main[role="main"] {
    position: relative !important;
    z-index: 1200 !important;
    /* Above drawer backdrop (1199) */
  }

  /* Ensure dropdowns and interactive elements work on mobile */
  .MuiPopover-root,
  .MuiMenu-root,
  .MuiSelect-root .MuiMenu-root,
  .MuiAutocomplete-root .MuiMenu-root {
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }

  /* ✅ SIMPLIFIED: Only target TEMPORARY drawer backdrops - embracingearth.space */
  /* When closed (aria-hidden=true or opacity:0), disable pointer events */
  .MuiDrawer-root.MuiModal-root[aria-hidden="true"],
  .MuiDrawer-root.MuiModal-root[aria-hidden="true"] *,
  .MuiDrawer-root.MuiModal-root .MuiBackdrop-root[style*="opacity: 0"],
  .MuiDrawer-root.MuiModal-root .MuiBackdrop-root[style*="visibility: hidden"] {
    pointer-events: none !important;
  }

  /* When open (aria-hidden=false), allow clicks on backdrop to close */
  .MuiDrawer-root.MuiModal-root[aria-hidden="false"] .MuiBackdrop-root {
    pointer-events: auto !important;
  }

  /* Ensure drawer paper is clickable when open */
  .MuiDrawer-root.MuiModal-root[aria-hidden="false"] .MuiDrawer-paper {
    pointer-events: auto !important;
  }

  /* Ensure hamburger menu button always works */
  .MuiAppBar-root .MuiIconButton-root[aria-label*="drawer"],
  .MuiAppBar-root .MuiIconButton-root[aria-label*="menu"] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}

/* ✅ CRITICAL FIX: Shift MUI Dialogs to account for sidebar on desktop - embracingearth.space */
/* Fixed in theme.ts - no additional CSS needed here */

/* ✅ SPECIFIC FIX: Delete confirmation dialog positioning - embracingearth.space */
/* Override the specific App.css rules that are forcing flexbox centering */
@media (min-width: 900px) {

  /* Override the rule from line 68-87 */
  .delete-confirmation-dialog.MuiDialog-root:not(.enhanced-dialog-container) .MuiDialog-container {
    position: fixed !important;
    top: 50% !important;
    left: calc(50% + 120px) !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  /* Override the rule from line 121-139 (div[role="dialog"]) */
  .delete-confirmation-dialog[role="dialog"].MuiDialog-root,
  .delete-confirmation-dialog[role="dialog"] .MuiDialog-container {
    position: fixed !important;
    top: 50% !important;
    left: calc(50% + 120px) !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1300 !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Override the dialog root itself */
  .delete-confirmation-dialog.MuiDialog-root {
    position: fixed !important;
    top: 50% !important;
    left: calc(50% + 120px) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Ensure proper width for delete dialog */
  .delete-confirmation-dialog .MuiDialog-paper {
    max-width: 600px !important;
    width: 600px !important;
  }

  /* ✅ SPECIFIC FIX: Transaction selection dialog positioning - embracingearth.space */
  /* Override the specific App.css rules for transaction selection dialog */
  .transaction-selection-dialog.MuiDialog-root:not(.enhanced-dialog-container) .MuiDialog-container {
    position: fixed !important;
    top: 50% !important;
    left: calc(50% + 120px) !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  .transaction-selection-dialog[role="dialog"].MuiDialog-root,
  .transaction-selection-dialog[role="dialog"] .MuiDialog-container {
    position: fixed !important;
    top: 50% !important;
    left: calc(50% + 120px) !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .transaction-selection-dialog.MuiDialog-root {
    position: fixed !important;
    top: 50% !important;
    left: calc(50% + 120px) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Ensure proper width for transaction selection dialog */
  .transaction-selection-dialog .MuiDialog-paper {
    max-width: 800px !important;
    width: 800px !important;
  }

  /* ✅ ADJUSTED: Simple link transaction dialog positioning - embracingearth.space */
  .simple-link-transaction-dialog.MuiDialog-root:not(.enhanced-dialog-container) .MuiDialog-container {
    position: fixed !important;
    top: 45% !important;
    /* Moved down from 50% */
    left: calc(50% + 30px) !important;
    /* Moved more left from 60px to 30px */
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  .simple-link-transaction-dialog[role="dialog"].MuiDialog-root,
  .simple-link-transaction-dialog[role="dialog"] .MuiDialog-container {
    position: fixed !important;
    top: 45% !important;
    /* Moved down from 50% */
    left: calc(50% + 30px) !important;
    /* Moved more left from 60px to 30px */
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .simple-link-transaction-dialog.MuiDialog-root {
    position: fixed !important;
    top: 45% !important;
    /* Moved down from 50% */
    left: calc(50% + 30px) !important;
    /* Moved more left from 60px to 30px */
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Compact width for simple link dialog */
  .simple-link-transaction-dialog .MuiDialog-paper {
    max-width: 600px !important;
    width: 600px !important;
  }

  /* ✅ GENERAL FIX: All MUI Dialogs positioning - embracingearth.space */
  /* Override the specific App.css rules for ALL MUI Dialogs (except EnhancedDialog) */
  /* embracingearth.space — full-viewport overlay + flexbox centering. The old
     `left:calc(50%+120px); right:auto; bottom:auto; transform:translate(-50%,-50%)`
     sidebar-offset trick made the width:auto fixed container shrink-wrap to its
     content (~32px) and crushed every legacy dialog. inset:0 + flex centering
     is the correct, collapse-proof pattern. */
  .MuiDialog-root:not(.enhanced-dialog-container) .MuiDialog-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Override the rule from line 121-139 (div[role="dialog"]) for all dialogs */
  [role="dialog"].MuiDialog-root:not(.enhanced-dialog-container),
  [role="dialog"] .MuiDialog-container:not(.enhanced-dialog-container *) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1300 !important;
    transform: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Override the dialog root itself for all dialogs */
  .MuiDialog-root:not(.enhanced-dialog-container) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
  }
}

/* ✅ CRITICAL FIX: Prevent dropdowns from taking full width - embracingearth.space */
/* Target the presentation container that MUI creates */
/* IMPORTANT: Only override width, NOT positioning - MUI calculates position dynamically */
/* embracingearth.space — the `:not(.MuiDialog-*)` exclusions are essential.
   MUI v5 puts `role="presentation"` on BOTH the Dialog root AND the inner
   `.MuiDialog-container`, so both are `div[role="presentation"]`. Without the
   exclusions this dropdown-width rule forces `fit-content` on them, collapsing
   every dialog (root → ~32px, container → shrink-wrapped) and crushing the
   Paper. Popover/Menu/Select/Autocomplete are NOT `.MuiDialog-*`, so they
   stay correctly width-constrained.
   `:not(.MuiDrawer-root)` is needed for the same reason — temporary Drawers
   (left nav + right Activity sidebar) are Modals with role="presentation",
   and this rule forced them to fit-content/90vw, overriding their own
   width/maxWidth (live-repro 2026-06-11: timeline drawer 90vw instead of
   100% / 440px cap). Third instance of this bug class. */
div[role="presentation"]:not(.MuiDialog-root):not(.MuiDialog-container):not(.MuiDrawer-root),
.MuiModal-root[role="presentation"]:not(.MuiDialog-root):not(.MuiDrawer-root),
.MuiPopover-root[role="presentation"] {
  /* ONLY control width, let MUI handle positioning */
  width: fit-content !important;
  max-width: 90vw !important;
  min-width: auto !important;
  /* DO NOT override left/right/inset/transform - breaks positioning */
}

.MuiPopover-root,
.MuiMenu-root,
.MuiSelect-root .MuiMenu-root,
.MuiAutocomplete-root .MuiMenu-root {
  /* Ensure dropdowns don't expand to full width */
  width: fit-content !important;
  max-width: 90vw !important;
  min-width: auto !important;
}

/* Fix specific dropdown components */
/* embracingearth.space — `.MuiPaper-root:not(.MuiDialog-paper)` excludes dialog
   Papers: the dialog Paper is a direct child of `.MuiDialog-container`
   (a `div[role="presentation"]`), so a bare `div[role="presentation"]>.MuiPaper-root`
   forced `width:auto !important` on it and shrink-wrapped the whole dialog. */
.MuiSelect-root .MuiMenu-root .MuiPaper-root,
.MuiAutocomplete-root .MuiMenu-root .MuiPaper-root,
.MuiPopover-root .MuiPopover-paper,
.MuiMenu-root .MuiPaper-root,
div[role="presentation"]>.MuiPaper-root:not(.MuiDialog-paper):not(.MuiDrawer-paper),
div[role="presentation"]>.MuiPopover-paper {
  width: auto !important;
  max-width: 90vw !important;
  min-width: 200px !important;
  box-sizing: border-box !important;
  /* DO NOT override left/right - let MUI position the dropdown correctly */
}

/* Ensure dropdown content doesn't force full width */
/* embracingearth.space — the `div[role="presentation"]` variants MUST exclude
   dialogs: `.MuiDialog-root` and `.MuiDialog-container` BOTH carry
   role="presentation", so a bare `div[role="presentation"] .MuiBox-root`
   forced `width:auto !important` on every Box inside every dialog —
   including `<Box component="input">` (AppInput), collapsing the input to
   its intrinsic ~225px while its bordered wrapper stayed full width. Result:
   clicking the right side of dialog text fields did nothing (live-repro
   2026-06-11). Same bug class as the dialog-Paper shrink-wrap fix above. */
.MuiPopover-root .MuiBox-root,
.MuiMenu-root .MuiList-root,
.MuiSelect-root .MuiMenu-root .MuiList-root,
div[role="presentation"]:not(.MuiDialog-root):not(.MuiDialog-container):not(.MuiDrawer-root) .MuiList-root,
div[role="presentation"]:not(.MuiDialog-root):not(.MuiDialog-container):not(.MuiDrawer-root) .MuiBox-root {
  width: auto !important;
  max-width: 100% !important;
}

/* ✅ ULTRA AGGRESSIVE: Override any inline styles forcing full width - embracingearth.space */
/* CRITICAL: Only override WIDTH, not positioning (left/right/inset) - embracingearth.space */
.MuiPopover-root[style*="width"],
.MuiMenu-root[style*="width"],
div[role="presentation"][style*="width"] {
  width: fit-content !important;
  /* DO NOT override left/right/inset - let MUI handle positioning */
}

.MuiPopover-paper[style*="width"],
.MuiMenu-paper[style*="width"],
div[role="presentation"]>.MuiPaper-root[style*="width"]:not(.MuiDrawer-paper) {
  width: fit-content !important;
  max-width: 90vw !important;
  /* DO NOT override left/right/inset - let MUI handle positioning */
}

/* Target any MUI classes that might force full width */
.css-1poimk-MuiPaper-root-MuiMenu-paper-MuiPaper-root-MuiPopover-paper,
.css-1poimk-MuiPaper-root-MuiMenu-paper,
.css-1poimk-MuiPaper-root-MuiPopover-paper,
.MuiPaper-root.MuiMenu-paper,
.MuiPaper-root.MuiPopover-paper {
  width: fit-content !important;
  max-width: 90vw !important;
  min-width: 200px !important;
}

/* ✅ CRITICAL FIX: Prevent fullWidth Select/Autocomplete from making dropdown full width - embracingearth.space */
/* The parent FormControl might be fullWidth, but the dropdown menu should not be */
.MuiFormControl-root.MuiFormControl-fullWidth>.MuiInputBase-root~.MuiMenu-root,
.MuiFormControl-root.MuiFormControl-fullWidth>.MuiInputBase-root~div[role="presentation"] {
  width: auto !important;
  max-width: 90vw !important;
}

.MuiFormControl-root.MuiFormControl-fullWidth>.MuiInputBase-root~.MuiMenu-root .MuiPaper-root,
.MuiFormControl-root.MuiFormControl-fullWidth>.MuiInputBase-root~div[role="presentation"] .MuiPaper-root {
  width: fit-content !important;
  max-width: 90vw !important;
  min-width: 200px !important;
}

/* Override for Select dropdowns specifically */
.MuiSelect-root~.MuiMenu-root,
.MuiSelect-root~div[role="presentation"] {
  width: auto !important;
  max-width: 90vw !important;
}

.MuiSelect-root~.MuiMenu-root .MuiPaper-root,
.MuiSelect-root~div[role="presentation"] .MuiPaper-root {
  width: fit-content !important;
  max-width: 90vw !important;
  min-width: 200px !important;
}

/* Override for Autocomplete dropdowns specifically */
.MuiAutocomplete-root~.MuiPopper-root,
.MuiAutocomplete-root~div[role="presentation"] {
  width: auto !important;
  max-width: 90vw !important;
}

.MuiAutocomplete-root~.MuiPopper-root .MuiPaper-root,
.MuiAutocomplete-root~div[role="presentation"] .MuiPaper-root {
  width: fit-content !important;
  max-width: 90vw !important;
  min-width: 200px !important;
}

/* ✅ EMERGENCY FIX: Force Select/Menu backdrops to be clickable (embracingearth.space) */
div[class*="MuiModal-backdrop"]:not([class*="MuiDialog-backdrop"]),
div.MuiBackdrop-root:not([class*="MuiDialog-backdrop"]) {
  pointer-events: auto !important;
  cursor: default !important;
}

/* ✅ REMOVED: This was breaking both dropdown and dialog closing behavior */
/* The issue: Disabling dialog backdrop prevents closing the dialog entirely */
/* New approach: Smart z-index management for proper event handling */

/* ✅ CRITICAL FIX: Ensure dialog backdrop can receive clicks even when dropdown is open */
/* Strategy: Keep dialog backdrop active at z-index 1696, but position dropdown backdrop strategically */
.enhanced-dialog-backdrop {
  pointer-events: auto !important;
  /* Always allow clicks */
  z-index: 1696 !important;
  /* Below dropdown but should still work */
}

/* ✅ SMART FIX: Make dropdown backdrop semi-transparent and allow clicks to pass through to dialog backdrop for outside-dialog clicks */
/* The dropdown backdrop should only block clicks within the dialog area */

/* ✅ CRITICAL FIX: Allow dropdown backdrop clicks to pass through to enhanced dialog - embracingearth.space */
/* ONLY disable pointer events when INSIDE enhanced dialog */
.enhanced-dialog-container .MuiPopover-root+.MuiBackdrop-root,
.enhanced-dialog-container .MuiMenu-root+.MuiBackdrop-root {
  /* Make backdrop invisible but allow clicks to pass through to dialog backdrop */
  pointer-events: none !important;
  z-index: 1695 !important;
  /* Below dialog backdrop */
  opacity: 0 !important;
  visibility: hidden !important;
}

/* For dropdowns OUTSIDE enhanced dialog, backdrop should work normally */
body:not(:has(.enhanced-dialog-container)) .MuiPopover-root+.MuiBackdrop-root,
body:not(:has(.enhanced-dialog-container)) .MuiMenu-root+.MuiBackdrop-root {
  pointer-events: auto !important;
  opacity: 0 !important;
  visibility: visible !important;
}

/* ✅ CRITICAL FIX: Ensure enhanced dialog can close when dropdown is open - embracingearth.space */
body:has(.enhanced-dialog-container) .enhanced-dialog-backdrop {
  pointer-events: auto !important;
  z-index: 1697 !important;
  /* Above dropdown backdrop but below dropdown content */
  /* Allow clicks outside dialog area to close dialog even when dropdown is open */
}

/* ✅ CRITICAL FIX: Dropdown backdrop should not interfere with dialog closing - embracingearth.space */
/* ONLY when dropdown is INSIDE the dialog */
.enhanced-dialog-container div[class*="MuiBackdrop-root"][class*="MuiPopover-backdrop"],
.enhanced-dialog-container div[class*="MuiBackdrop-root"][class*="MuiMenu-backdrop"] {
  /* Make dropdown backdrop transparent to clicks when inside enhanced dialog */
  pointer-events: none !important;
  z-index: 1695 !important;
  /* Below dialog backdrop */
  opacity: 0 !important;
  visibility: hidden !important;
}

/* For dropdowns OUTSIDE dialog, backdrop should work normally */
body:not(:has(.enhanced-dialog-container)) div[class*="MuiBackdrop-root"][class*="MuiPopover-backdrop"],
body:not(:has(.enhanced-dialog-container)) div[class*="MuiBackdrop-root"][class*="MuiMenu-backdrop"] {
  pointer-events: auto !important;
  opacity: 0 !important;
  visibility: visible !important;
}

/* ✅ CRITICAL FIX: Ensure ALL dropdowns and popovers are always clickable - embracingearth.space */
.MuiPopover-root,
.MuiMenu-root,
.MuiSelect-root .MuiMenu-root,
.MuiAutocomplete-root .MuiMenu-root,
div[role="presentation"]:has(.MuiPopover-paper),
div[role="presentation"]:has(.MuiMenu-paper) {
  pointer-events: auto !important;
  z-index: 1800 !important;
  /* Higher than sidebar (1701) */
}

.MuiPopover-root .MuiPopover-paper,
.MuiMenu-root .MuiMenu-paper,
.MuiSelect-root .MuiMenu-root .MuiPaper-root,
.MuiAutocomplete-root .MuiMenu-root .MuiPaper-root,
div[role="presentation"]:has(.MuiPopover-paper) .MuiPopover-paper,
div[role="presentation"]:has(.MuiMenu-paper) .MuiMenu-paper {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1801 !important;
  /* Fix dropdown width - embracingearth.space */
  width: auto !important;
  max-width: 90vw !important;
  min-width: 200px !important;
  /* Prevent full-width expansion */
  box-sizing: border-box !important;
}

/* Ensure ALL interactive components in dropdowns are clickable */
.MuiPopover-root .MuiListItemButton-root,
.MuiMenu-root .MuiMenuItem-root,
.MuiMenu-root .MuiListItemButton-root,
.MuiSelect-root .MuiMenu-root .MuiMenuItem-root,
.MuiAutocomplete-root .MuiMenu-root .MuiMenuItem-root,
.MuiPopover-root .MuiButton-root,
.MuiMenu-root .MuiButton-root,
div[role="presentation"]:has(.MuiPopover-paper) .MuiListItemButton-root,
div[role="presentation"]:has(.MuiMenu-paper) .MuiMenuItem-root {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 1802 !important;
}

/* Override any conflicting backdrop styles for ALL dropdowns */
.MuiPopover-root+.MuiBackdrop-root,
.MuiMenu-root+.MuiBackdrop-root,
.MuiSelect-root .MuiMenu-root+.MuiBackdrop-root,
.MuiAutocomplete-root .MuiMenu-root+.MuiBackdrop-root {
  pointer-events: auto !important;
  z-index: 1799 !important;
  /* Just below dropdown but above sidebar */
}

/* REMOVED: This was preventing dialog from closing when dropdown is open - embracingearth.space */
/* body:has(.enhanced-dialog-container) div[class*="MuiBackdrop-root"][class*="MuiModal-backdrop"]:not([class*="MuiDialog"]) {
  pointer-events: auto !important;
  z-index: 1699 !important;
  position: fixed !important;
  inset: 0 !important;
} */

/* CONTINUE DISABLING Dialog backdrops (preserves existing dialog positioning fix) */
/* ⚠️ CRITICAL: Only target DIALOG backdrops, never Menu/Popover backdrops (embracingearth.space) */
div[class*="MuiBackdrop-root"][class*="MuiDialog-backdrop"]:not([class*="MuiMenu-backdrop"]):not([class*="MuiPopover-backdrop"]),
.css-1nnwp34-MuiBackdrop-root-MuiDialog-backdrop:not([class*="MuiMenu-backdrop"]):not([class*="MuiPopover-backdrop"]),
div[class*="MuiBackdrop-root"][class*="MuiDialog-backdrop"]:not([class*="MuiMenu-backdrop"]):not([class*="MuiPopover-backdrop"]) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -999999 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  transform: scale(0) !important;
  clip: rect(0, 0, 0, 0) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Mobile enhancements kept minimal; component styles handle layout. */

/* Responsive content container used inside EnhancedDialog */
.responsive-dialog-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
  gap: 12px;
  overflow-x: hidden;
  /* prevent content from spilling out horizontally */
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .responsive-dialog-content {
    padding: 8px 8px;
    /* ensure some inner breathing room */
  }

  .responsive-dialog-content .MuiGrid-container {
    margin: 0 !important;
    width: 100% !important;
  }

  .responsive-dialog-content .MuiGrid-item {
    padding: 0 !important;
    /* remove gutters that may cause overflow */
  }

  .responsive-dialog-content .MuiFormControl-root,
  .responsive-dialog-content .MuiTextField-root,
  .responsive-dialog-content .MuiSelect-root,
  .responsive-dialog-content .MuiAutocomplete-root {
    width: 100% !important;
    min-width: 0 !important;
    /* allow shrinking */
  }

  .responsive-dialog-content .MuiInputBase-root,
  .responsive-dialog-content .MuiFormLabel-root,
  .responsive-dialog-content .MuiTypography-root {
    font-size: 14px;
  }

  .responsive-dialog-content .MuiButton-root {
    min-width: auto;
  }
}

/* Ensure a consistent visual margin inside the dialog near edges */
.enhanced-dialog-container .responsive-dialog-content {
  padding-bottom: 12px;
}

/* Remove iOS-specific global dialog positioning overrides. */

/* Remove Android-specific global dialog positioning overrides. */

/* Remove PWA global dialog positioning overrides. */

/* Remove dialog panel z-index overrides. */

/* Remove global body/html filter overrides tied to dialogs. */

/* Remove global backdrop blur prevention; component styles will handle. */

/* ✅ CRITICAL FIX: Ultra-high z-index for delete confirmation dialog to prevent browser extension overlays - embracingearth.space */
.delete-confirmation-dialog {
  z-index: 99999 !important;
}

.delete-confirmation-dialog .MuiDialog-root {
  z-index: 99999 !important;
}

.delete-confirmation-dialog .MuiDialog-container {
  z-index: 99999 !important;
}

.delete-confirmation-dialog .MuiDialog-paper {
  z-index: 99999 !important;
}

.delete-confirmation-dialog .MuiBackdrop-root {
  z-index: 99998 !important;
}

.delete-confirmation-dialog .MuiDialogActions-root {
  z-index: 100000 !important;
  pointer-events: auto !important;
}

.delete-confirmation-dialog .MuiButton-root {
  z-index: 100001 !important;
  pointer-events: auto !important;
}

/* Remove global popper/menu z-index overrides. */

/* Keep component-scoped popover styles if needed; no global z-index. */

/* Leave menu item styles; remove dependency on dialog state. */

/* Keep default hover/selected styles. */

/* Remove dialog-dependent select rounding. */

/* Keep defaults for backdrops of menus/popovers. */

/* Remove dialog-state dim overrides. */

/* Remove global backdrop guards. */

/* Remove drawer stabilization tied to dialog state. */

/* Scoped, minimal dialog rules to avoid breaking AppBar/Drawer stickiness */
.ai2-app-root .MuiDialog-root .MuiDialog-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: visible !important;
  /* Allow dialog positioning outside container */
}

.ai2-app-root .MuiDialog-root .MuiDialog-paper {
  position: relative;
  margin: 0;
  max-height: calc(100vh - 32px);
  /* DO NOT set max-width here. This selector has 3-class specificity
     and overrides BOTH MUI's per-component `maxWidth="sm|md|lg"` prop
     AND any `sx={{ maxWidth: ... }}` override on PaperProps (emotion-
     compiled classes are 1-class specificity).
     The previous rule `max-width: calc(100vw - 32px)` made every
     dialog stretch nearly to viewport edge on wide screens (e.g.
     2368px on a 2400px monitor) — root cause confirmed via DOM
     inspection on 2026-05-26. embracingearth.space */
}

/* EnhancedDialog container should never be clipped */
.enhanced-dialog-container {
  overflow: visible !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Ensure EnhancedDialog content can be positioned anywhere */
.enhanced-dialog-container .motion-div,
.enhanced-dialog-container>div {
  overflow: visible !important;
}

/* ✅ CRITICAL FIX: Prevent dropdown clipping in glassmorphism dialogs (embracingearth.space) */
/* Allow dropdowns to render outside dialog boundaries */
.enhanced-dialog-container .responsive-dialog-content {
  overflow: visible !important;
}

/* Ensure dialog content doesn't clip dropdowns */
.enhanced-dialog-container .MuiDialogContent-root,
.enhanced-dialog-container .MuiFormControl-root,
.enhanced-dialog-container .MuiSelect-root,
.enhanced-dialog-container .MuiAutocomplete-root {
  overflow: visible !important;
}

/* Header and sidebar sit BELOW the MUI modal layer (1300) so dialogs,
   menus and popovers always render ON TOP. These were 1700 / 1701, which
   hid every dialog behind the header and sidebar. The drawer stays just
   above the AppBar so the sidebar still overlaps it. embracingearth.space */
.ai2-app-root header.MuiAppBar-root {
  z-index: 1200;
}

.ai2-app-root .MuiDrawer-root.MuiDrawer-docked .MuiDrawer-paper {
  z-index: 1250;
}

/* Ensure app root doesn't clip content */
.ai2-app-root {
  min-height: 100vh;
  position: relative;
  overflow: visible !important;
}

/* ⚠️  REMOVED the explicit `body, html { overflow-y: auto; position: relative }`
   rule that lived here. It made body a scroll container (instead of letting
   the window scroll), which broke `position: sticky` for every descendant.
   The earlier `html, body { overflow-x: hidden }` at the top of this file
   is enough to prevent horizontal page overflow without making body a scroll
   container. embracingearth.space */

/* Removed aggressive iframe/dialog hiding that affected popups. */

/* ═══ Command Palette & Keyboard Shortcuts — embracingearth.space ═══ */
.ai2-command-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 1699;
  /* Simple blur only — no darkening/tint overlay */
  background: transparent;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: ai2-fade-in 0.2s ease;
}
.ai2-command-palette-content {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.ai2-command-palette-content > * {
  pointer-events: auto;
}
@keyframes ai2-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* WCAG: Screen reader only — embracingearth.space */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   NIGHT SURFACE LAYER — body.theme-dark only. embracingearth.space

   Why this file still exists: years of components paint their own surfaces
   with light literals (white cards, pale gradients, #f8fafc wells). Chasing
   every one of ~9,400 colour literals is a long war; this layer wins the big
   battles at the CSS origin instead, scoped entirely under body.theme-dark so
   light mode is untouched by construction.

   WHAT CHANGED. Every value here used to be a hardcoded hex that happened to
   agree with nothing — the MUI palette shipped #0f172a/#1e293b while this
   sheet painted #12161c/#171c24 over the top, and a third file
   (themes/globalTheme.css) declared a fourth set that was never imported at
   all. They are now all the SAME --fin-* custom properties that App.tsx
   writes onto <html> from theme/tokens.ts, so this sheet can no longer
   disagree with the palette.

   The fallbacks in each var() are the dark values on purpose: this sheet only
   ever applies under body.theme-dark, so if the variables have not landed yet
   (the first paint before React mounts) the dark value is the correct guess.

   WHAT THIS LAYER CANNOT DO. It repaints BACKGROUNDS. It cannot fix a
   component that hardcodes a light-mode TEXT colour, because it has no way to
   know which of a component's colours is text. That is the actual cause of
   the unreadable dashboard and sidebar, and it is fixed at the call sites —
   see Layout.tsx (nav labels) and Dashboard.tsx (summary tiles).
   ========================================================================== */

body.theme-dark {
  background: linear-gradient(178deg, #12161c 0%, #10151d 45%, #0e1622 100%)
    fixed;
  background: var(--fin-canvas-image, linear-gradient(178deg, #12161c 0%, #10151d 45%, #0e1622 100%))
    fixed;
  color: #e4e9ef;
  color: var(--fin-text-primary, #e4e9ef);
}

/* ── Surfaces: every Paper-family box becomes deep matte grey. The :not()
      exemptions keep semantic colour (alerts) their own. ── */
body.theme-dark
  .MuiPaper-root:not(.MuiAlert-standardError):not(.MuiAlert-standardWarning):not(
    .MuiAlert-standardSuccess
  ):not(.MuiAlert-standardInfo) {
  background-color: #171c24 !important;
  background-color: var(--fin-surface-base, #171c24) !important;
  background-image: none !important;
  color: #e4e9ef;
  color: var(--fin-text-primary, #e4e9ef);
}
body.theme-dark .MuiCard-root {
  background-color: #171c24 !important;
  background-color: var(--fin-surface-base, #171c24) !important;
  background-image: none !important;
  border-color: #2a3340 !important;
  border-color: var(--fin-line-default, #2a3340) !important;
}
body.theme-dark .MuiDialog-paper,
body.theme-dark .MuiDrawer-paper,
body.theme-dark .MuiMenu-paper,
body.theme-dark .MuiPopover-paper {
  background-color: #1a2029 !important;
  background-color: var(--fin-surface-raised, #1a2029) !important;
  background-image: none !important;
}

/* Matte: elevation is a half-step of lightness, so the shadow only grounds. */
body.theme-dark .MuiPaper-elevation1,
body.theme-dark .MuiPaper-elevation2,
body.theme-dark .MuiPaper-elevation3 {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  box-shadow: var(--fin-shadow-1, 0 1px 2px rgba(0, 0, 0, 0.4)) !important;
}

/* ── Wells, tables, inputs. ── */
body.theme-dark .MuiTableCell-root {
  border-color: #232b36;
  border-color: var(--fin-line-subtle, #232b36);
  color: #e4e9ef;
  color: var(--fin-text-primary, #e4e9ef);
}
body.theme-dark .MuiTableCell-head {
  background-color: #1a2029 !important;
  background-color: var(--fin-surface-raised, #1a2029) !important;
  color: #b6c0cd;
  color: var(--fin-text-secondary, #b6c0cd);
}
body.theme-dark .MuiOutlinedInput-root {
  background-color: #12161c;
  background-color: var(--fin-surface-sunken, #12161c);
}
/* The input outline is the only thing identifying the control, so it uses the
   3:1 `interactive` line rather than the decorative hairline (WCAG 1.4.11). */
body.theme-dark .MuiOutlinedInput-notchedOutline {
  border-color: #626e7d !important;
  border-color: var(--fin-line-interactive, #626e7d) !important;
}
body.theme-dark .MuiInputBase-input {
  color: #e4e9ef;
  color: var(--fin-text-primary, #e4e9ef);
}
body.theme-dark .MuiInputLabel-root {
  color: #b6c0cd;
  color: var(--fin-text-secondary, #b6c0cd);
}
body.theme-dark .MuiDivider-root {
  border-color: #232b36;
  border-color: var(--fin-line-subtle, #232b36);
}
body.theme-dark .MuiChip-outlined {
  border-color: #626e7d;
  border-color: var(--fin-line-interactive, #626e7d);
  color: #b6c0cd;
  color: var(--fin-text-secondary, #b6c0cd);
}

/* ── Buttons that hardcoded the near-black light primary. ── */
body.theme-dark .MuiButton-outlined {
  border-color: #626e7d;
  border-color: var(--fin-line-interactive, #626e7d);
  color: #e4e9ef;
  color: var(--fin-text-primary, #e4e9ef);
}
body.theme-dark .MuiIconButton-root:not(.Mui-disabled) {
  color: #b6c0cd;
  color: var(--fin-text-secondary, #b6c0cd);
}

/* ── The accent wash, where a tint of colour is wanted: selected nav items,
      hover wells. A tint, never a glow — and now the SAME teal the palette
      uses for actions, rather than a one-off sea-blue only this file knew. ── */
body.theme-dark .Mui-selected {
  background-color: rgba(45, 212, 191, 0.14) !important;
  background-color: var(--fin-accent-soft, rgba(45, 212, 191, 0.14)) !important;
}
body.theme-dark .MuiListItemButton-root:hover,
body.theme-dark .MuiMenuItem-root:hover {
  background-color: rgba(45, 212, 191, 0.14);
  background-color: var(--fin-accent-soft, rgba(45, 212, 191, 0.14));
}

/* ── Scrollbars join the night. ── */
body.theme-dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body.theme-dark ::-webkit-scrollbar-track {
  background: #12161c;
  background: var(--fin-surface-sunken, #12161c);
}
body.theme-dark ::-webkit-scrollbar-thumb {
  background: #2a3340;
  background: var(--fin-line-default, #2a3340);
  border-radius: 5px;
}
body.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: #37424f;
  background: var(--fin-line-strong, #37424f);
}

/* ── Broad literal-killers, last: anything that inline-painted itself a white
      or near-white ground inside the app shell. Emotion's inline sx classes
      tie on specificity, so !important settles it — but ONLY for backgrounds
      in the whites the light design actually uses.

      The two `linear-gradient` entries are new. A flat wash written as a
      gradient — `linear-gradient(0deg, rgba(255,255,255,0.75), ...)`, which is
      how the dashboard summary tiles painted themselves — is a
      background-IMAGE, not a background-colour, so the colour rules above
      slid straight past it and left a 75%-white panel sitting on the dark
      card. Text on it measured 1.15:1. ── */
body.theme-dark [style*='background: rgb(255, 255, 255)'],
body.theme-dark [style*='background-color: rgb(255, 255, 255)'],
body.theme-dark [style*='background: rgb(248, 250, 252)'],
body.theme-dark [style*='background-color: rgb(248, 250, 252)'] {
  background-color: #171c24 !important;
  background-color: var(--fin-surface-base, #171c24) !important;
}
body.theme-dark [style*='linear-gradient(0deg, rgba(255, 255, 255'],
body.theme-dark [style*='linear-gradient(0deg,rgba(255,255,255'] {
  background-image: none !important;
  background-color: #1a2029 !important;
  background-color: var(--fin-surface-raised, #1a2029) !important;
}