/* sv-modal-alignment.css
 *
 * 2026-05-16: align every modal in the app to the master-password modal
 * look-and-feel. Visual source: sv-modal-system.css (the canonical sv-modal-*
 * primitives) which itself was derived from the master-password / sign-in
 * flow. Tommy asked for this as a "deep audit all modals to match the master-
 * password look and feel" — instead of rewriting every modal's JSX or CSS
 * file individually, this overlay maps each existing modal class to the
 * canonical glass/gradient/border treatment.
 *
 * Loaded AFTER each modal's own CSS so it wins specificity without !important
 * where possible. !important is only used for properties that the per-modal
 * CSS hardcodes at the same specificity level.
 *
 * If a modal looks wrong after this CSS lands, the fix is to add its class
 * to the appropriate selector list below — not to revert this file.
 */

/* ── Backdrops: dark glass with subtle blue tint, blur+saturate ─────────── */
.bfm-backdrop,
.cmodal,
.confirm-modal__backdrop,
.nested-editor__backdrop,
.smm__backdrop,
.upload-prompt__backdrop {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(44, 102, 177, 0.20), transparent 62%),
    rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
}

/* ── Cards/panels: layered glass, white-tinged border, 24px radius, ───────
 * cinematic shadow.
 */
.bfm-modal,
.cmodal__card,
.confirm-modal__panel,
.cts-drag-overlay__card,
.cts-pair__card,
.m-sheet__card,
.nested-editor__panel,
.onboard__card,
.sharex__card,
.shr-mobile-sheet__panel,
.smm__panel,
.te-ai-modal__card,
.upload-prompt__card,
.wt-handoff__card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(7, 7, 11, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(28px) saturate(1.42) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.42) !important;
  box-shadow:
    0 34px 96px -22px rgba(0, 0, 0, 0.88),
    0 10px 30px -12px rgba(0, 0, 0, 0.65) !important;
  color: rgba(255, 255, 255, 0.94);
  font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* Light theme: don't apply the dark glass — keep the per-modal light style.
 * Each modal already has its own [data-theme="light"] override, and the
 * master-password modal also stays dark, so this is mostly defensive.
 */
:root[data-theme="light"] .bfm-modal,
:root[data-theme="light"] .cmodal__card,
:root[data-theme="light"] .confirm-modal__panel,
:root[data-theme="light"] .nested-editor__panel,
:root[data-theme="light"] .onboard__card,
:root[data-theme="light"] .sharex__card,
:root[data-theme="light"] .upload-prompt__card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(7, 7, 11, 0.86) !important;
  color: rgba(255, 255, 255, 0.94) !important;
}

/* ── Top highlight shimmer pseudo (matches sv-modal-card::after) ───────── */
.bfm-modal::after,
.cmodal__card::after,
.confirm-modal__panel::after,
.sharex__card::after,
.onboard__card::after,
.te-ai-modal__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    transparent 24%,
    transparent 74%,
    rgba(255, 255, 255, 0.025)
  );
  z-index: 0;
}

/* Make sure modal content sits above the ::after shimmer overlay */
.bfm-modal > *,
.cmodal__card > *,
.confirm-modal__panel > *,
.sharex__card > *,
.onboard__card > *,
.te-ai-modal__card > * {
  position: relative;
  z-index: 1;
}