/*
 * EZPZ Texting — shared pop-up / modal visual system.
 *
 * Goal (per PRD "Standardize pop-up UI design across the application"
 *   and follow-up PRD "Standardize pop-up features across the application"):
 *   - Visual design consistency across every pop-up on every page.
 *   - The "new feature" pop-ups (Feature intake) match the design language
 *     of the "open issue" pop-ups (support conversation transcript, vendor
 *     order fulfill, campaign diag, etc.).
 *   - Responsive, safe-area aware on all devices (mobile → desktop).
 *   - NO functional changes. No HTML class renames. No JS changes.
 *
 * How it works:
 *   Each page has historically grown its own modal class family:
 *     • campaign.html    → .modal / .modal-content / .modal-close
 *     • administration.* → .modal-backdrop / .modal-panel / .modal-close
 *       (open-issue / support-transcript / vendor-order pop-ups)
 *     • administration.* → #fiDetailSheet / #fiNewSheet / .fi-sheet-close
 *       (Feature intake new-feature pop-ups — slide-in sheet layout)
 *     • inbox.html       → .ai-test-modal-overlay / .ai-test-modal
 *   Instead of renaming (which would break tutorial selectors + event
 *   wiring), this stylesheet is loaded AFTER each page's inline <style>
 *   and normalizes the shared visual language across those families:
 *   backdrop color + blur, card surface, border radius, shadow, title
 *   typography, close-button pill, and responsive gutters.
 *
 *   Per-modal tweaks inside each page (e.g. #scheduleModal compact,
 *   #fiDetailSheet slide-in transform) keep higher specificity, so
 *   tuned variants still win for layout/size/animation.
 */

/* ------------------------------------------------------------------
 * Design tokens — safe fallbacks per page colour palette.
 * ------------------------------------------------------------------ */
:root {
  --ezpz-popup-backdrop: rgba(15, 23, 42, 0.55);
  --ezpz-popup-backdrop-filter: saturate(140%) blur(3px);
  --ezpz-popup-card-bg: linear-gradient(165deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
  --ezpz-popup-card-border-color: rgba(99, 102, 241, 0.28);
  --ezpz-popup-card-border: 1px solid var(--ezpz-popup-card-border-color);
  --ezpz-popup-card-radius: 16px;
  --ezpz-popup-card-shadow:
    0 24px 48px -12px rgba(15, 23, 42, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  --ezpz-popup-card-padding: 18px 20px 20px;
  --ezpz-popup-card-padding-top: 48px; /* room for the close button */
  --ezpz-popup-close-size: 36px;
  --ezpz-popup-close-bg: linear-gradient(180deg, #ef4444, #b91c1c);
  --ezpz-popup-close-shadow: 0 2px 8px rgba(185, 28, 28, 0.35);
  --ezpz-popup-title-color: #0f2368;
  --ezpz-popup-title-size: 18px;
  --ezpz-popup-title-weight: 800;
  --ezpz-popup-gutter: 16px;
  /* z-index stays high enough to clear the sticky app header + toasts */
  --ezpz-popup-z: 230;
}

/* ------------------------------------------------------------------
 * Shared overlay (backdrop) — same colour + blur on every page.
 * ------------------------------------------------------------------ */
.modal,
.modal-backdrop,
.ai-test-modal-overlay {
  background: var(--ezpz-popup-backdrop);
  -webkit-backdrop-filter: var(--ezpz-popup-backdrop-filter);
  backdrop-filter: var(--ezpz-popup-backdrop-filter);
  z-index: var(--ezpz-popup-z);
  box-sizing: border-box;
  padding:
    max(var(--ezpz-popup-gutter), env(safe-area-inset-top, 0px))
    max(var(--ezpz-popup-gutter), env(safe-area-inset-right, 0px))
    max(var(--ezpz-popup-gutter), env(safe-area-inset-bottom, 0px))
    max(var(--ezpz-popup-gutter), env(safe-area-inset-left, 0px));
}

/* Feature intake sheets (new-feature pop-ups) — align the backdrop tint
   + blur with the shared open-issue pop-ups. The inline per-page CSS
   defines `display:none` and toggles visibility via `.show`, plus sets
   its own high z-index (360/370); we only normalize colour + blur so
   the slide-in layout / positioning above it keep winning.

   The inline <style> for #fiDetailBackdrop / #fiNewBackdrop lives INSIDE
   the Feature-intake tab partial (#featureintakeTab) which the browser
   parses AFTER <link rel="stylesheet" href="/css/popups.css"> at the
   document head. To win the cascade on equal specificity we prefix with
   `html` — raising specificity by one element without changing markup. */
html #fiDetailBackdrop,
html #fiNewBackdrop {
  background: var(--ezpz-popup-backdrop);
  -webkit-backdrop-filter: var(--ezpz-popup-backdrop-filter);
  backdrop-filter: var(--ezpz-popup-backdrop-filter);
}

/* Open-state keywords differ per page (show / open). Handle both. */
.modal.show,
.modal-backdrop.open,
.ai-test-modal-overlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ezpzPopupFade 160ms ease-out;
}

/* Admin overlay historically aligned to top so long forms scroll from the
   top of the viewport — preserve that behaviour but keep the new look. */
.modal-backdrop.open {
  align-items: flex-start;
}

@keyframes ezpzPopupFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------------
 * Shared card surface.
 * Each page's per-modal overrides (e.g. #scheduleModal .modal-content
 * .schedule-modal-compact, #campaignAiAgentModal .modal-content …)
 * keep higher specificity and still win for sizing.
 *
 * The Feature intake sheets (#fiDetailSheet, #fiNewSheet) also share the
 * card surface so they match the open-issue pop-ups visually, BUT we
 * deliberately do NOT set `animation:` on them here — they have their
 * own slide-in transform transitions driven by `.is-open`, which we
 * must not fight.
 * ------------------------------------------------------------------ */
.modal-content,
.modal-panel,
.ai-test-modal {
  background: var(--ezpz-popup-card-bg);
  border: var(--ezpz-popup-card-border);
  border-radius: var(--ezpz-popup-card-radius);
  box-shadow: var(--ezpz-popup-card-shadow);
  animation: ezpzPopupPop 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

html #fiDetailSheet,
html #fiNewSheet {
  background: var(--ezpz-popup-card-bg);
  border-color: var(--ezpz-popup-card-border-color, rgba(99, 102, 241, 0.28));
  box-shadow: var(--ezpz-popup-card-shadow);
}

/* Border-radius unification (PRD: "new feature pop-ups match the design of
   campaigns pop-ups"). Campaigns `.modal-content` uses --ezpz-popup-card-radius
   (16px). Feature-intake sheets historically used 22px. Bring them onto the
   same shared token so every pop-up card in the app reads as the same family.

   On mobile the Feature-intake sheet is a bottom-sheet: keep the bottom
   corners flush against the viewport edge (`0`) but unify the top corners to
   the shared radius. On desktop it's a centered / side drawer — all four
   corners use the shared radius. */
html #fiDetailSheet,
html #fiNewSheet {
  border-radius:
    var(--ezpz-popup-card-radius) var(--ezpz-popup-card-radius) 0 0;
}
@media (min-width: 900px) {
  html #fiDetailSheet,
  html #fiNewSheet {
    border-radius: var(--ezpz-popup-card-radius);
  }
}

@keyframes ezpzPopupPop {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

/* ------------------------------------------------------------------
 * Shared title typography.
 * Covers: campaign "placeholders-title", admin modal-head h3, inbox
 * ".ai-test-modal-title". Title color inherits each page's --blue when
 * available (sidesteps the different palette across pages).
 * ------------------------------------------------------------------ */
.modal-panel .modal-head h3,
.ai-test-modal-title,
.modal-content .placeholders-title,
.modal-content .campaign-ai-modal-title,
.modal-content .schedule-modal-title,
#fiDetailSheet > .fi-sheet-scroll > h3,
#fiNewSheet > .fi-sheet-scroll > h3 {
  color: var(--blue, var(--ezpz-popup-title-color));
  font-weight: var(--ezpz-popup-title-weight);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ------------------------------------------------------------------
 * Shared close button pill.
 * Campaign + Administration both use ".modal-close" already. Inbox's
 * close controls are <button class="btn btn-secondary" id="…Close"> —
 * left untouched here because restyling action buttons is out of scope.
 *
 * Feature intake sheets use `.fi-sheet-close`; we alias it to the same
 * pill so the new-feature pop-ups match open-issue pop-ups. The per-
 * page CSS positions the button absolutely inside `.fi-sheet-grab`,
 * which we leave alone — we only restyle colour / shape / shadow.
 * ------------------------------------------------------------------ */
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: var(--ezpz-popup-close-size);
  height: var(--ezpz-popup-close-size);
  border: none;
  border-radius: 10px;
  background: var(--ezpz-popup-close-bg);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ezpz-popup-close-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 120ms ease, transform 120ms ease;
}
.modal-close:hover  { filter: brightness(1.06); }
.modal-close:active { transform: scale(0.97); }
.modal-close:focus-visible {
  outline: 2px solid #fde047;
  outline-offset: 2px;
}

/* Feature intake close — keep inline per-page positioning (top:4px,
   right:0, inside .fi-sheet-grab) but restyle the surface to match the
   unified .modal-close pill (red gradient, white glyph, soft shadow,
   same focus ring). `html` prefix bumps specificity so our rule wins
   against the Feature-intake tab's later-in-the-document inline <style>. */
html #fiDetailSheet .fi-sheet-close,
html #fiNewSheet .fi-sheet-close {
  background: var(--ezpz-popup-close-bg);
  color: #fff;
  width: var(--ezpz-popup-close-size);
  height: var(--ezpz-popup-close-size);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ezpz-popup-close-shadow);
  transition: filter 120ms ease, transform 120ms ease;
}
html #fiDetailSheet .fi-sheet-close:hover,
html #fiNewSheet .fi-sheet-close:hover { filter: brightness(1.06); }
html #fiDetailSheet .fi-sheet-close:active,
html #fiNewSheet .fi-sheet-close:active { transform: scale(0.97); }
html #fiDetailSheet .fi-sheet-close:focus-visible,
html #fiNewSheet .fi-sheet-close:focus-visible {
  outline: 2px solid #fde047;
  outline-offset: 2px;
}

/* Ensure admin + campaign cards reserve room for the unified close
   button so it never overlaps the title. Per-modal overrides keep their
   higher-specificity paddings. */
.modal-panel {
  position: relative;
}

/* ------------------------------------------------------------------
 * Responsive gutters — consistent safe-area on every device.
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  :root {
    --ezpz-popup-gutter: 12px;
  }
  .modal-content,
  .modal-panel,
  .ai-test-modal {
    max-width: min(720px, 100%);
  }
}

@media (max-width: 520px) {
  :root {
    --ezpz-popup-gutter: 8px;
    --ezpz-popup-card-radius: 14px;
    --ezpz-popup-close-size: 40px; /* easier tap target on phones */
  }
  .modal-close {
    top: 8px;
    right: 8px;
  }
}

/* ------------------------------------------------------------------
 * Honour reduced-motion preference (matches mobile.css policy).
 * The Feature intake sheets animate via `transform` on .is-open; when
 * the user has reduced-motion set, we collapse the transition so the
 * panel still appears (just without the slide).
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .modal.show,
  .modal-backdrop.open,
  .ai-test-modal-overlay.open,
  .modal-content,
  .modal-panel,
  .ai-test-modal {
    animation: none !important;
  }
  #fiDetailSheet,
  #fiNewSheet {
    transition: none !important;
  }
}