/* ====================================================================
   ASTA MART — MODAL CONSISTENCY LAYER (audit item 4)
   ====================================================================
   The audit (AUDIT-six-fixes.md item 4) found NINE independently-written
   modal implementations with inconsistent centering, hardcoded colours,
   and backdrop treatments ranging from blur(2px) to blur(20px) to none.

   This file does NOT introduce a new modal system — the brief explicitly
   forbids that. It normalises the EXISTING implementations against the
   most fully-featured one already in the codebase (the unified navbar
   auth overlay in shared-navbar.js, which already had theme vars + Esc +
   backdrop click).

   Scope is deliberately narrow: centering, theme tokens, and backdrop
   treatment only. Layout/size/animation of each modal is left alone.
   ==================================================================== */

/* ── 1. SHARED BACKDROP TREATMENT ──────────────────────────────────
   Was: blur 2 / 6 / 8 / 20 / none across implementations. */
.modal-overlay,
.vouch-overlay,
.sync-overlay,
.am-modal-overlay,
.si-overlay,
.amo-modal {
  background: var(--am-modal-scrim, rgba(44, 36, 32, 0.55)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .vouch-overlay,
html[data-theme="dark"] .sync-overlay,
html[data-theme="dark"] .am-modal-overlay,
html[data-theme="dark"] .si-overlay,
html[data-theme="dark"] .amo-modal {
  background: rgba(0, 0, 0, 0.68) !important;
}

/* ── 2. TRUE VIEWPORT CENTERING ────────────────────────────────────
   .si-overlay used align-items:flex-start + padding-top:104px, and
   .amo-modal used align-items:flex-start — neither was centered.
   Both are scrollable-content modals, so we center with `margin:auto`
   on the inner panel instead of forcing align-items:center, which would
   clip tall content on short viewports. */
.si-overlay.open,
.amo-modal.amo-open {
  align-items: flex-start !important;
  padding: 24px !important;
}
.si-overlay.open > .si-modal,
.amo-modal.amo-open > .amo-sheet {
  margin: auto !important;   /* centers on BOTH axes, still scrolls when tall */
}

/* ── 3. AUTH MODAL — THEME TOKENS ──────────────────────────────────
   app.js injects a <style> block that hardcodes background:#FAF7F4 and
   color:#6B5344 for .modal-box.

   CORRECTION (2026-08-29): an earlier version of this comment claimed
   dark-mode.css "never patched .modal-box". That was WRONG and is retracted.
   `git show b38f095:public/static/dark-mode.css` proves dark-mode.css:204
   ALREADY contained `html[data-theme="dark"] .modal-box { background:
   rgba(22,20,28,0.95) !important; ... }` before this audit began.

   FURTHER CORRECTION — .modal-box is DEAD CODE and the #FAF7F4 bug reported
   in item 4 is NOT user-visible. shared-navbar.css:438 sets
   `display: none !important` on `.modal-overlay#authModal`. Every page that
   contains a `.modal-box` also loads shared-navbar.css, and the only page
   that omits it (agent-cards.html) has no #authModal and is not routed.
   That !important rule pre-dates this audit. The live auth modal users
   actually see is implementation B, `#ngAuthOverlay .auth-modal-unified`.

   These rules are therefore RETAINED as defence-in-depth only: they cost
   nothing, and they keep .modal-box theme-correct if impl A is ever revived.
   tests/audit-shot.js asserts impl A stays display:none and fails loudly if
   that changes (assertDeadCode), rather than saving a screenshot of nothing.
   These rules load after app.js's injected block. */
.modal-box {
  background: var(--am-bg-card, var(--bg-card, #FAF7F4)) !important;
  border-color: var(--am-border, rgba(0, 0, 0, 0.08)) !important;
  color: var(--am-text-1, var(--text-1, #2C2420)) !important;
}
html[data-theme="dark"] .modal-box {
  background: var(--am-bg-1, #141218) !important;
  border-color: var(--am-border, rgba(255, 255, 255, 0.08)) !important;
  color: var(--am-text-1, #f0edf5) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .modal-close {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--am-text-2, #c4bfd0) !important;
}

/* ── 3b. OVERLAYS MUST OUTRANK THE NAVBAR ──────────────────────────
   Found while verifying dismiss parity at 390x844. The shared navbar is
   `z-index: 9999` (shared-navbar.css:13), but the modal overlays were written
   independently and sit BELOW it:
     .modal-overlay      2000   (style.css:2018)
     .sync-overlay       3000   (vault-dashboard.html:338)
     .amc-backdrop       4000 / .amc-panel 4001  (chat.css:64,73)
     .am-modal-overlay   5000   (listing.html:91)
   Only .si-overlay (10050) and .auth-overlay-unified (99999) cleared it.

   Consequence, measured: on mobile the sync modal's close button sits at
   y=37..81, and `document.elementFromPoint` at its centre returned
   `nav.navbar-glass`, NOT the button — the navbar painted over it, so the X
   was unclickable. `.amc-panel` is `width: 100vw` on mobile (chat.css:85) and
   had the same defect: the navbar covered the chat header's back/close
   controls. Both are PRE-EXISTING bugs, not regressions from this audit
   (`git diff b38f095 116eb3a -- public/static/chat.css` touches no z-index).

   Fix: lift every overlay above the navbar. A modal is by definition on top
   of page chrome, so this is a consistency correction, not a new system. */
.modal-overlay,
.vouch-overlay,
.sync-overlay,
.am-modal-overlay,
.si-overlay,
.amo-modal,
.amc-backdrop {
  z-index: 10500 !important;
}
/* Panel one above its own backdrop, both still above the navbar. */
.amc-panel {
  z-index: 10501 !important;
}
/* The unified auth overlay already cleared the navbar at 99999 — leave it
   highest so an auth prompt raised from within another modal stays on top. */

/* ── 3c. BODY SCROLL LOCK WHILE A MODAL IS OPEN (audit Pass 1) ──────
   No overlay in the codebase locked the background scroll, so the page
   scrolled behind every modal. modal-behavior.js now toggles
   `body.am-modal-open` whenever any overlay is visible; this rule performs
   the actual lock. The scrollbar-width compensation (set as a CSS var by
   the JS) prevents the horizontal layout shift a bare overflow:hidden
   causes on desktop. */
body.am-modal-open {
  overflow: hidden !important;
  padding-right: var(--am-scrollbar-comp, 0) !important;
}

/* ── 4. CHAT BACKDROP parity (was blur(2px)) ───────────────────────── */
.amc-backdrop {
  background: var(--am-modal-scrim, rgba(44, 36, 32, 0.55)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
html[data-theme="dark"] .amc-backdrop { background: rgba(0, 0, 0, 0.68) !important; }