/* ============================================================================
 * Almasa shared dialog primitive.
 *
 * Load AFTER tokens.css and palette.css. Plain CSS — same contract as the rest
 * of almasa-design, so it works in Next.js, Vite and the no-build vanilla app.
 *
 * ── WHY ─────────────────────────────────────────────────────────────────
 * The four apps between them had 32 backdrop layers and 46 panel cards, using
 * 22 distinct z-index values (0, 1, 2, 4, 20, 30, 40, 45, 60, 80, 90, 100,
 * 550, 620, 900, 1000, 1200, 1240, 1250, 1400, 100000, 100002), 8 different
 * scrim colours between 0.42 and 0.72 opacity, and ~30 radius/padding
 * combinations. AMC alone had both `2` and `100002` — which dialog stacked on
 * top was luck rather than design.
 *
 * ── STRUCTURE ───────────────────────────────────────────────────────────
 *   .a-modal                 the scrim; fixed, covers the viewport, centres
 *     .a-modal-panel         the card (.is-sm 420 / default 640 / .is-lg 920)
 *       .a-modal-head        title + close
 *       .a-modal-body        the ONLY thing that scrolls
 *       .a-modal-foot        actions, right-aligned
 *
 *   .a-modal.is-top          a dialog opened FROM a dialog (date picker,
 *                            nested confirm). Raises one layer, nothing else.
 *   .a-modal.is-drawer       slides in from the right, full height
 *   .a-modal.is-bare         scrim + stacking only, no card — for lightboxes
 *                            and map popovers that own their own body
 *
 * ── WHAT IT DOES NOT DO ─────────────────────────────────────────────────
 * No open/close state, no focus trap, no Escape handling, no scroll lock —
 * those are behaviour, and each app already owns them in its own framework.
 * This file is presentation only. `.a-modal` is expected to be rendered
 * conditionally, not toggled with a class.
 * ========================================================================= */

.a-modal {
  position: fixed;
  inset: 0;
  z-index: var(--almasa-z-modal);
  display: grid;
  place-items: center;
  padding: var(--almasa-sp-11);
  background: var(--almasa-c-scrim, rgba(8, 14, 12, 0.6));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overscroll-behavior: contain;
}

.a-modal.is-top {
  z-index: var(--almasa-z-modal-top);
}

/* Scrim and stacking only. The child owns its own size and chrome — used by
 * the media lightboxes, which would be worse forced into a card. They still
 * get the one z-index, which is the point.
 *
 * `center`, NOT `stretch`: stretch only stretches an auto-sized item, so a
 * lightbox panel with a definite width/height falls back to `start` and jumps
 * to the top-left corner. Same trap as the mobile block below. */
:where(.a-modal.is-bare) {
  padding: 0;
  place-items: center;
}

/* Layer without curtain — a click-catcher under an anchored calendar needs the
 * stacking order but not a blurred scrim over the page. */
:where(.a-modal.is-clear) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* --- the card ----------------------------------------------------------- */

.a-modal-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* A custom property, not a modifier class. `.a-modal-panel.is-sm` is two
   * classes, so a plain app rule like `.ef-dialog { max-width: 380px }` loses
   * silently — that bit HR twice. Apps set --a-modal-w instead and win without
   * doubling up selectors.
   *
   * Values are HR's real dialog widths (380 confirm, 560 drill and changelog,
   * 920 directory picker), not invented steps. */
  max-width: var(--a-modal-w, 560px);
  /* The panel never scrolls; .a-modal-body does. Without min-height:0 the
   * flex child refuses to shrink and the footer is pushed off-screen. */
  max-height: min(86vh, 760px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--almasa-c-border);
  border-radius: var(--almasa-r-8);
  background: var(--almasa-c-surface);
  box-shadow: var(--almasa-shadow-3);
}

/* Convenience aliases; they only set the property, so an app override still wins. */
.a-modal-panel.is-sm { --a-modal-w: 380px; }   /* confirms, prompts */
.a-modal-panel.is-lg { --a-modal-w: 920px; }   /* editors, two-pane pickers */

/* A <form> wrapping head/body/foot is common and would otherwise break the
 * panel's flex chain, letting the footer fall off the card. display:contents
 * makes the form transparent to layout while staying a real form for submit. */
.a-modal-panel > form {
  display: contents;
}

/* --- head --------------------------------------------------------------- */

.a-modal-head {
  display: flex;
  align-items: center;
  gap: var(--almasa-sp-6);
  flex: none;
  padding: var(--almasa-sp-9) var(--almasa-sp-11);
  border-bottom: 1px solid var(--almasa-c-border);
}

.a-modal-title {
  margin: 0;
  min-width: 0;
  color: var(--almasa-c-text);
  font-size: var(--almasa-fs-11);
  font-weight: var(--almasa-fw-extrabold);
  line-height: var(--almasa-lh-snug);
}

.a-modal-kicker {
  margin: 0 0 var(--almasa-sp-1);
  color: var(--almasa-c-text-muted);
  font-size: var(--almasa-fs-4);
  font-weight: var(--almasa-fw-heavy);
  letter-spacing: var(--almasa-ls-caps);
  text-transform: uppercase;
}

/* A trailing cluster when the head needs more than a close button. The close
 * button's own margin-left:auto is cancelled inside it. */
.a-modal-head-actions {
  display: flex;
  align-items: center;
  gap: var(--almasa-sp-4);
  margin-left: auto;
}

.a-modal-head-actions .a-modal-close {
  margin-left: 0;
}

/* Sub-line BELOW the title, as opposed to .a-modal-kicker which sits above it. */
.a-modal-subtitle {
  margin: var(--almasa-sp-1) 0 0;
  color: var(--almasa-c-text-muted);
  font-size: var(--almasa-fs-6);
  font-weight: var(--almasa-fw-medium);
  line-height: var(--almasa-lh-snug);
}

.a-modal-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 1px solid var(--almasa-c-border);
  border-radius: var(--almasa-r-3);
  background: transparent;
  color: var(--almasa-c-text-muted);
  cursor: pointer;
}

.a-modal-close:hover {
  border-color: var(--almasa-c-danger);
  color: var(--almasa-c-danger);
}

/* --- body --------------------------------------------------------------- */

.a-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--almasa-sp-11);
  color: var(--almasa-c-text-soft);
  font-size: var(--almasa-fs-8);
  line-height: var(--almasa-lh-normal);
}

/* A two-pane body — HR's directory picker is a fixed rail beside a scrolling
 * panel, so the single-column padding and scroller have to stand down. */
.a-modal-body.is-split {
  display: flex;
  padding: 0;
  overflow: hidden;
}

/* --- foot --------------------------------------------------------------- */

/* For a footer that is not a button row — AMC's ticket composer IS the footer. */
.a-modal-foot.is-block {
  display: block;
}

.a-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--almasa-sp-4);
  flex: none;
  flex-wrap: wrap;
  padding: var(--almasa-sp-9) var(--almasa-sp-11);
  border-top: 1px solid var(--almasa-c-border);
  background: var(--almasa-c-surface-2);
}

/* --- drawer variant ------------------------------------------------------ */

.a-modal.is-drawer {
  padding: 0;
  place-items: stretch;
  justify-items: end;
}

.a-modal.is-drawer .a-modal-panel {
  width: min(460px, 100vw);
  max-width: none;
  height: 100%;
  max-height: none;
  border-radius: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
}

/* --- motion --------------------------------------------------------------
 * Deliberately restrained: a fast fade on the scrim and a short rise on the
 * panel. Anything longer reads as sluggish on a dialog you open dozens of
 * times a day. */

/* Wrapped in :where() so it carries zero specificity. Apps that own their own
 * motion (AMC and Control Center drive dialogs with framer-motion, which also
 * owns the exit) override with a plain class instead of a counter-rule — a CSS
 * animation otherwise outranks framer's inline transform for its whole run and
 * the two write to the same properties at once. */
@media (prefers-reduced-motion: no-preference) {
  :where(.a-modal) {
    animation: a-modal-in var(--almasa-dur-fast) var(--almasa-ease);
  }
  :where(.a-modal-panel) {
    animation: a-modal-rise var(--almasa-dur-normal) var(--almasa-ease);
  }
  :where(.a-modal.is-drawer .a-modal-panel) {
    animation: a-modal-slide var(--almasa-dur-normal) var(--almasa-ease);
  }
}

@keyframes a-modal-in { from { opacity: 0; } }
@keyframes a-modal-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes a-modal-slide { from { transform: translateX(24px); } }

/* --- small screens -------------------------------------------------------
 * Below 640px a centred card wastes space and the scrim padding eats the
 * viewport. Dock to the bottom instead, which is also where thumbs are. */

@media (max-width: 640px) {
  .a-modal {
    padding: 0;
    place-items: end stretch;
  }
  .a-modal-panel {
    --a-modal-w: none;
    max-width: none;
    max-height: 92vh;
    border-radius: var(--almasa-r-7) var(--almasa-r-7) 0 0;
    border-bottom: 0;
    /* `stretch` only stretches an item that is auto-sized in that axis. A panel
     * with a definite width (Media Gallery's detail view sizes itself from the
     * media aspect ratio) falls back to `start` and lands hard against the left
     * edge. Centring explicitly covers both cases. */
    justify-self: center;
  }
  .a-modal.is-drawer .a-modal-panel {
    width: 100%;
    border-radius: 0;
  }
  .a-modal-head,
  .a-modal-foot {
    padding: var(--almasa-sp-7) var(--almasa-sp-8);
  }
  .a-modal-body {
    padding: var(--almasa-sp-8);
  }
}