/* ============================================================
   CUPERTINO SHEET — Reusable platform-adaptive modal sheet

   macOS: Centered glass card, non-dismissible scrim (Apple HIG).
   iOS:   Bottom sheet sliding up from bottom, tap-outside dismisses.

   Platform detection: The parent `.window` element carries
   `.window--ios` when in iOS mode. All platform branching is
   handled via CSS descendant selectors — zero Dart changes.

   Follows Apple HIG:
   - Sheet is modal to content (window chrome remains accessible)
   - Back button auto-disabled via CSS :has() while sheet is open
   - Close / minimize controls remain functional
   - macOS: only Cancel button dismisses (scrim is non-interactive)
   - iOS: swipe / tap-outside dismisses

   Usage: <CupertinoSheet> component wraps any child content.
   Consumer provides form fields, summaries, action rows as child.
   ============================================================ */

/* ===========================================================
   macOS MODE (default) — Centered modal card
   =========================================================== */

/* ----------------------------------------------------------
   Scrim — fills parent, dims content behind the card.
   Centered flexbox layout for the card.
   ---------------------------------------------------------- */

.cupertino-sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  /* macOS: none — only the card is interactive. pointer-events: none lets
     drag / traffic-light events pass through the scrim area outside the card.
     The card sets pointer-events: auto. z-index is overridden per-platform
     by the macOS / iOS sections below. iOS sets this to auto so
     tap-outside-to-dismiss works. */
  pointer-events: none;
  animation: cupertino-sheet-scrim-in 200ms ease-out both;
}

@keyframes cupertino-sheet-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cupertino-sheet-scrim-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Backdrop — dims content. macOS: non-interactive (no tap-dismiss).
   pointer-events: none prevents accidental dismissal — only Cancel
   button dismisses, matching real NSSheet behavior. */
.cupertino-sheet-scrim__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* ----------------------------------------------------------
   Glass card — macOS sheet aesthetic.
   Translation animation, rounded corners, blur backdrop.
   ---------------------------------------------------------- */

.cupertino-sheet-card {
  position: relative;
  z-index: 11;
  /* Restore interactivity — scrim is pointer-events: none on macOS. */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  /* overflow: hidden is required to clip the scrollbar (and all content) to
     the border-radius. If overflow-y: auto is set here instead, WebKit/Chrome
     renders the scrollbar track outside the rounded corners, causing the thumb
     to visually protrude at the top and bottom edges. The actual scrolling is
     delegated to the inner .cupertino-sheet-card__scroll-body element. */
  overflow: hidden;
  border-radius: 20px;
  /* macOS: tracks --window-background so the sheet always matches the window
     it is attached to. rgb(31, 33, 44) is the default value via variables.css. */
  background: var(--window-background);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: cupertino-sheet-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cupertino-sheet-card-in {
  from {
    opacity: 0;
    transform: translateY(-56px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cupertino-sheet-card-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-56px);
  }
}

/* ----------------------------------------------------------
   Inner scroll body — carries overflow-y: auto so the card's
   overflow: hidden can clip the scrollbar to the border-radius.
   ---------------------------------------------------------- */
.cupertino-sheet-card__scroll-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* iOS safe-area bottom padding lives on the scroll body. */
.window--ios .cupertino-sheet-card__scroll-body {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Card scrollbar — slim, themed to match window aesthetic. */
.cupertino-sheet-card__scroll-body::-webkit-scrollbar {
  width: 6px;
}

.cupertino-sheet-card__scroll-body::-webkit-scrollbar-track {
  background: transparent;
}

.cupertino-sheet-card__scroll-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
}

.cupertino-sheet-card__scroll-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ===========================================================
   EXIT ANIMATION — macOS (default)
   =========================================================== */

.cupertino-sheet--closing {
  animation: cupertino-sheet-scrim-out 200ms ease-in both;
  pointer-events: none;
}

.cupertino-sheet--closing .cupertino-sheet-card {
  animation: cupertino-sheet-card-out 200ms ease-in both;
}

/* ===========================================================
   macOS MODE — Stacking context fix
   The .window-navigator__details-container establishes a new
   stacking context at z-index: 10 which traps the scrim below
   the title bar (z-index: 1000). Mirror the iOS pattern: flatten
   the navigator stacking contexts and raise the scrim above the
   title bar. pointer-events: none on the scrim is preserved, so
   drag / traffic-light events are unaffected.
   =========================================================== */

/* 1. Flatten details container stacking context */
.window:not(.window--ios) .window-navigator__details-container:has(.cupertino-sheet-scrim) {
  z-index: auto !important;
}

/* 2. Flatten detail page stacking context (overrides inline z-index) */
.window:not(.window--ios) .window-navigator__details-container:has(.cupertino-sheet-scrim)
  > .window-navigator__page--detail {
  z-index: auto !important;
}

/* 3. Scrim paints in .window's stacking context, above title bar (z:1000) */
.window:not(.window--ios) .cupertino-sheet-scrim {
  z-index: 1001;
}

/* ===========================================================
   iOS MODE — Full-height bottom sheet
   =========================================================== */

/* Scrim: align card to bottom, backdrop becomes tap-dismissible.
   The sheet intentionally covers the full window including the title bar
   (standard UISheetPresentationController behaviour on iOS).
   Re-enable pointer events so tap-outside-to-dismiss works. */
.window--ios .cupertino-sheet-scrim {
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
}

/* iOS: backdrop IS tap-dismissible (standard UISheet behavior). */
.window--ios .cupertino-sheet-scrim__backdrop {
  pointer-events: auto;
}

/* ── iOS: sheet covers the title bar ─────────────────────────
   The bottom sheet must cover EVERYTHING behind it, including
   the title bar and all its chrome (back button, close, title).
   ──────────────────────────────────────────────────────────── */

/* 1. Flatten details container stacking context */
.window--ios .window-navigator__details-container:has(.cupertino-sheet-scrim) {
  z-index: auto !important;
}

/* 2. Flatten detail page stacking contexts (overrides inline z-index) */
.window--ios .window-navigator__details-container:has(.cupertino-sheet-scrim)
  > .window-navigator__page--detail {
  z-index: auto !important;
}

/* 3. Scrim paints in .window's stacking context, above title bar (z:100) */
.window--ios .cupertino-sheet-scrim {
  z-index: 101;
}

/* Card: full-width full-height bottom sheet with top-only rounded corners.
   Slide-up animation replaces scale-in.  padding-top: 0 because the
   CupertinoSheet topbar component handles the top area on iOS.
   Uses both height + max-height to force near-full-height sheet. */
.window--ios .cupertino-sheet-card {
  width: 100%;
  height: calc(100% - 44px);
  max-height: calc(100% - 44px);
  border-radius: 32px 32px 0 0;
  /* iOS: UIColor.systemBackground dark = #1C1C1E — solid, fully opaque.
     No card-level padding — topbar sticks at top, scroll body owns the rest. */
  padding: 0;
  background: #1c1c1e;
  border: none;
  box-shadow: none;
  animation: cupertino-sheet-card-slide-up 300ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes cupertino-sheet-card-slide-up {
  from {
    /* opacity: 0; */
    transform: translateY(100%);
  }
  to {
    /* opacity: 1; */
    transform: translateY(0);
  }
}

@keyframes cupertino-sheet-card-slide-down {
  from {
    /* opacity: 1; */
    transform: translateY(0);
  }
  to {
    /* opacity: 0; */
    transform: translateY(100%);
  }
}

/* ----------------------------------------------------------
   EXIT ANIMATION — iOS
   ---------------------------------------------------------- */

.window--ios .cupertino-sheet--closing {
  animation: cupertino-sheet-scrim-out 150ms ease-in both;
}

.window--ios .cupertino-sheet--closing .cupertino-sheet-card {
  animation: cupertino-sheet-card-slide-down 150ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* ----------------------------------------------------------
   TOP BAR — iOS sheet navigation (close / confirm icons)
   Hidden on macOS — shown on iOS.
   ---------------------------------------------------------- */

.cupertino-sheet-topbar {
  display: none;
}

.window--ios .cupertino-sheet-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* sticky creates a containing block for the absolutely-centered title. */
  position: sticky;
  top: 0;
  z-index: 2;
  pointer-events: auto;
  /* Concentric positioning: card corner radius (32px) = button
     radius (22px, 44px ÷ 2) + gap (10px). Topbar height = button
     diameter (44px) + 2 × gap (10px) = 64px. Button center at
     (10 + 22, 10 + 22) = (32, 32) matches the 32px card corner arc. */
  height: 64px;
  min-height: 64px;
  padding: 10px;
  /* iOS: same systemBackground as card — solid, no blur. */
  background: #1c1c1e;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px 32px 0 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Topbar leading / trailing wrappers — establish z-index: 1 to remain
   above the absolutely-centered title (z-index: 0). */
.window--ios .cupertino-sheet-topbar__leading,
.window--ios .cupertino-sheet-topbar__trailing {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

/* Topbar title — hidden on macOS (topbar itself is hidden).
   On iOS: absolutely centered between leading/trailing buttons,
   matching UINavigationBar title style (SF Pro Semibold 17pt).
   Horizontal padding = button(44) + inset(10) + buffer(4) = 58px
   prevents text overlap with buttons at all reasonable widths. */
.cupertino-sheet-topbar__title {
  display: none;
}

.window--ios .cupertino-sheet-topbar__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 0 58px;
  overflow: hidden;
  z-index: 0;
  /* UINavigationBar title: SF Pro Semibold 17pt */
  font-family: var(--font-system-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* macOS header — rendered above [child] inside the card.
   Hidden on iOS: the topbar __title slot already contains the title.
   Style matches NSAlert heading: SF Pro Semibold ~14pt, centered. */
.cupertino-sheet-header {
  /* Card provides padding: 20px on all sides; gap: 12px separates
     header from the next sibling. Extra bottom padding adds a clear
     visual break between title and form content. */
  padding-top: 8px;
  padding-bottom: 4px;
  font-family: var(--font-system-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 1.3;
}

.window--ios .cupertino-sheet-header {
  display: none;
}

/* systemBlue solid background for the confirm action icon button.
   Button uses refraction mode (LiquidGlassButton.icon default), so
   target .lg-button-refraction glass layer — same pattern as
   .platform-primary-action in liquid_glass_buttons.css. */
.cupertino-sheet-topbar__confirm.lg-button-refraction .lg-button-glass {
  background: var(--platform-action-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cupertino-sheet-topbar__confirm.lg-button-refraction .lg-button-shine {
  border-color: rgba(10, 132, 255, 0.4) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.14),
    inset 0 -0.5px 0.5px rgba(10, 132, 255, 0.12);
}

.cupertino-sheet-topbar__confirm.lg-button-refraction .lg-button-content {
  color: var(--platform-action-foreground) !important;
}

.cupertino-sheet-topbar__confirm.lg-button-refraction:hover:not(:active) .lg-button-glass {
  background: var(--platform-action-bg-hover) !important;
}

.cupertino-sheet-topbar__confirm.lg-button-refraction:active .lg-button-glass {
  background: var(--platform-action-bg-active) !important;
}

.cupertino-sheet-topbar__confirm.lg-button-refraction--disabled .lg-button-glass {
  background: rgba(10, 132, 255, 0.25) !important;
}

.cupertino-sheet-topbar__confirm.lg-button-refraction--disabled {
  opacity: 0.4;
}

/* ----------------------------------------------------------
   Action row — standard Cancel + CTA layout.
   macOS pattern: right-aligned, Cancel clear, CTA prominent.
   ---------------------------------------------------------- */

.cupertino-sheet-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

/* iOS: hide bottom action row — replaced by topbar icon buttons. */
.window--ios .cupertino-sheet-actions {
  display: none;
}

/* ----------------------------------------------------------
   systemBlue CTA button modifier.
   Applied to LiquidGlassButton inside sheets for primary action.
   ---------------------------------------------------------- */

.cupertino-sheet-cta.liquid-glass-button {
  background: var(--cupertino-blue) !important;
}

.cupertino-sheet-cta.liquid-glass-button--edge-specular {
  --lg-specular-top-alpha: 0.12;
  --lg-specular-bottom-alpha: 0.06;
  --lg-specular-rim-alpha: 0.08;
}

.cupertino-sheet-cta.liquid-glass-button--edge-specular::before {
  box-shadow:
    inset 0 1.2px 1.2px rgba(10, 132, 255, var(--lg-specular-top-alpha)),
    inset 0 -0.7px 0.7px rgba(10, 132, 255, var(--lg-specular-bottom-alpha)),
    inset 0 0 0 0.5px rgba(10, 132, 255, var(--lg-specular-rim-alpha));
}

.cupertino-sheet-cta.liquid-glass-button:hover:not(:active) {
  background: rgba(10, 132, 255, 0.3) !important;
}

.cupertino-sheet-cta.liquid-glass-button:active {
  background: rgba(10, 132, 255, 0.15) !important;
}

/* Preserve this disabled-CTA rule for future use:
  Keep commented as a reference for a subtle blue-tinted disabled state
  for the sheet primary action (.liquid-glass-button[aria-disabled="true"]). */
 /* .cupertino-sheet-cta.liquid-glass-button[aria-disabled="true"] {
  background: rgba(10, 132, 255, 0.3) !important;
 } */

/* ----------------------------------------------------------
   HIG: Back button disabled during sheet.
   Window controls (close, minimize) remain functional —
   sheets are modal to content, not window chrome.
   CSS :has() detects sheet presence and dims the back action.
   ---------------------------------------------------------- */

/* Stable base transition — active in both directions: dims when the sheet
   opens and fades back in during the sheet's close animation. Without this
   on the base rule, the transition inside :has() disappears the moment the
   selector stops matching, causing the opacity to snap back abruptly. */
.window-back-action {
  transition: opacity 200ms ease;
}

.window:has(.cupertino-sheet-scrim) .window-back-action {
  pointer-events: none !important;
  opacity: 0.3 !important;
}

/* ----------------------------------------------------------
   Inline loading indicator inside CTA — spinner + label.
   ---------------------------------------------------------- */

.cupertino-sheet-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

/* ----------------------------------------------------------
   Inline error banner inside sheet card.
   ---------------------------------------------------------- */

.cupertino-sheet-error {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  font-size: 12px;
  color: var(--cupertino-red);
  background: rgba(255, 69, 58, 0.035);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0 12px;
  line-height: 1.5;
  white-space: pre-line;
  overflow: hidden;
  /* Collapsed / hidden state */
  max-height: 0;
  opacity: 0;
  transform: scaleY(0.7);
  transform-origin: top center;
  pointer-events: none;
  /* Exit transition (slightly faster) */
  transition:
    max-height 180ms ease,
    opacity 160ms ease,
    transform 160ms ease,
    padding 180ms ease,
    border-color 160ms ease;
}

.cupertino-sheet-error--visible {
  max-height: 96px;
  opacity: 1;
  transform: scaleY(1);
  padding: 8px 12px;
  border-color: rgba(255, 69, 58, 0.2);
  pointer-events: auto;
  /* Entry transition (slightly more relaxed) */
  transition:
    max-height 220ms ease,
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1),
    padding 220ms ease,
    border-color 220ms ease;
}

.cupertino-sheet-error__icon {
  mask-image: url('/images/icons/svg/exclamationmark.circle.svg');
  -webkit-mask-image: url('/images/icons/svg/exclamationmark.circle.svg');
  width: 16px;
  height: 16px;
  background-color: var(--cupertino-red);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
}

.cupertino-sheet-error__text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  white-space: pre-line;
}