/*
 * ohana-modal.css — shared modal component for yourohana.org
 *
 * Single canonical modal pattern, replacing the 8+ drift-prone class systems
 * that motivated BUG-058. Seeded from `.event-modal` in events.html (the only
 * modal in the codebase that got max-width + max-height + overflow-y + mobile
 * media query all correct).
 *
 * MARKUP CONTRACT
 * ---------------
 *   <div class="ohana-modal-v2-overlay" id="myModal"
 *        role="dialog" aria-modal="true" aria-labelledby="myModalTitle"
 *        aria-hidden="true">
 *     <div class="ohana-modal-v2">
 *       <div class="ohana-modal-v2-header">
 *         <h2 class="ohana-modal-v2-title" id="myModalTitle">Title</h2>
 *         <button class="ohana-modal-v2-close" data-modal-close
 *                 aria-label="Close">&#x2715;</button>
 *       </div>
 *       <div class="ohana-modal-v2-body">… content …</div>
 *       <div class="ohana-modal-v2-footer">… buttons …</div>
 *     </div>
 *   </div>
 *
 * Two ways to fill a createAndOpen() modal:
 *   1. Build regions: append .ohana-modal-v2-header / -body / -footer for full
 *      control (full-bleed header, sticky footer, scoped form styling).
 *   2. Just append content to the box — the "Auto-pad safety net" below gives it
 *      proper padding + standard control styling automatically. Do NOT also set
 *      padding on the box; the safety net handles it.
 *
 * BEHAVIOR (provided by ohana-modal.js)
 * --------------------------------------
 * - Open: `window.ohanaModal.open('myModal')` or click an element with
 *   `data-modal-target="myModal"`.
 * - Close: `window.ohanaModal.close('myModal')`, click `[data-modal-close]`
 *   inside the modal, click the overlay outside the modal, or press ESC.
 * - Body scroll is locked while any modal is open and restored on the last
 *   close.
 * - Focus is trapped inside the modal while open and restored to the opener
 *   when closed.
 * - aria-hidden flips between "true" (closed) and "false" (open).
 * - Top-level non-modal body children get `inert` while any modal is open,
 *   so screen-reader users can't Tab past the focus trap into background.
 * - `aria-busy` and footer-button disable controlled via
 *   `window.ohanaModal.setBusy(id, true|false)` for async submits.
 * - Honors `prefers-reduced-motion: reduce` (drops slide-in animation).
 *
 * WHEN TO USE WHICH MODAL PATTERN
 * -------------------------------
 * Use `.ohana-modal-v2-*` for: forms, dialogs, confirmations, picker/selector
 * UIs, any modal with a close button or footer actions, any modal that opens
 * over staff or family content.
 *
 * Use native `<dialog>` only for: fullscreen lightboxes (photo viewer in
 * `nhvw.html`, flyer lightbox in `office-hours.html`). These are exceptions
 * to the v2 contract and must be marked `<!-- check17: by_design — ... -->`.
 *
 * Do NOT author new `.al-modal`, `.cqi-modal`, `.perf-modal`, `.st-modal`,
 * `.admin-modal`, `.mr-modal`, `.story-modal-*`, or `.modal-box` classes.
 * Those names belong to legacy systems that are being migrated to v2.
 *
 * SIZING
 * ------
 * Desktop:  max-width 580px, max-height 85vh, scrollable body via overflow-y.
 * Mobile:   pinned to the bottom of the viewport as a bottom-sheet, with
 *           rounded top corners and max-height 92vh.
 *
 * Both layers respect the three load-bearing properties from BUG-058:
 *   max-width, max-height, overflow-y: auto.
 */

/* ── Overlay (full-viewport backdrop) ──────────────────────────────────── */
.ohana-modal-v2-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  animation: ohanaModalBgIn 0.2s ease-out;
}
.ohana-modal-v2-overlay.is-open {
  display: flex;
}

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

/* ── Modal inner container ─────────────────────────────────────────────── */
.ohana-modal-v2 {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 2px 12px rgba(0, 0, 0, 0.08);
  max-width: 580px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;     /* clip children to border-radius (stripe, sticky header/footer) */
  overflow-y: auto;
  position: relative;
  animation: ohanaModalSlideIn 0.25s ease-out;
  font-family: var(--font, 'Poppins', system-ui, sans-serif);
  color: #000;
}

@keyframes ohanaModalSlideIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Optional rainbow stripe decoration (preserved from legacy admin-modal) */
.ohana-modal-v2-stripe {
  height: 4px;
  background: linear-gradient(90deg, #ED1B67, #F47940, #EBCF00, #94C93D, #00BAC6);
  border-radius: 14px 14px 0 0;
}

/* ── Modal header (title + close) ──────────────────────────────────────── */
.ohana-modal-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #edf2f7;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  border-radius: 14px 14px 0 0;
}

.ohana-modal-v2-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
  margin: 0;
  line-height: 1.3;
}

.ohana-modal-v2-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  color: #000;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
  flex-shrink: 0;
  font-family: inherit;
  padding: 0;
}
.ohana-modal-v2-close:hover {
  background: #f0f0f0;
  color: #000;
}
.ohana-modal-v2-close:focus-visible {
  outline: 2px solid #00BAC6;
  outline-offset: 2px;
}

/* ── Optional tabbed-body variant (replaces .cqi-modal-tabs / .cqi-modal-tab) ─ */
.ohana-modal-v2-tabs {
  display: flex;
  border-bottom: 1px solid #edf2f7;
  padding: 0 1.5rem;
  background: #fff;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.ohana-modal-v2-tab {
  border: none;
  background: none;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: #000;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.ohana-modal-v2-tab.is-active,
.ohana-modal-v2-tab[aria-selected="true"] {
  color: #00BAC6;
  border-bottom-color: #00BAC6;
  font-weight: 600;
}
.ohana-modal-v2-tab:focus-visible {
  outline: 2px solid #00BAC6;
  outline-offset: -2px;
}

/* ── Modal body (scrollable when content exceeds max-height) ───────────── */
.ohana-modal-v2-body {
  padding: 1.5rem 1.75rem;
}
.ohana-modal-v2-body p { margin: 0 0 0.75rem; line-height: 1.55; }
.ohana-modal-v2-body p:last-child { margin-bottom: 0; }

/* Baseline form styling so callers don't need to re-invent labels +
   inputs in every modal. Scoped to the body so it can't bleed elsewhere. */
.ohana-modal-v2-body label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 0.35rem;
}
.ohana-modal-v2-body input[type="text"],
.ohana-modal-v2-body input[type="email"],
.ohana-modal-v2-body input[type="url"],
.ohana-modal-v2-body input[type="number"],
.ohana-modal-v2-body input[type="date"],
.ohana-modal-v2-body input[type="time"],
.ohana-modal-v2-body input[type="datetime-local"],
.ohana-modal-v2-body input[type="search"],
.ohana-modal-v2-body select,
.ohana-modal-v2-body textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid #d6dde5;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.93rem;
  color: #000;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.ohana-modal-v2-body input:focus,
.ohana-modal-v2-body select:focus,
.ohana-modal-v2-body textarea:focus {
  outline: none;
  border-color: #00BAC6;
  box-shadow: 0 0 0 3px rgba(0,186,198,0.14);
}
.ohana-modal-v2-body textarea { min-height: 84px; resize: vertical; }

/* Form-section + form-row helpers — opt-in vertical rhythm + 2-col rows. */
.ohana-modal-v2-body .ohana-form-section + .ohana-form-section { margin-top: 1.1rem; }
.ohana-modal-v2-body .ohana-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.ohana-modal-v2-body .ohana-form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 540px) {
  .ohana-modal-v2-body .ohana-form-row,
  .ohana-modal-v2-body .ohana-form-row.cols-3 { grid-template-columns: 1fr; }
}

/* Grouped fieldset card inside a v2 body — a titled section of related
   fields (Edit series "Defaults" / "Schedule"; reusable by any modal). */
.ohana-modal-v2-body .ohana-modal-fieldset {
  border: 1px solid #e0e7ea;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 16px;
  background: #fff;
}
.ohana-modal-v2-body .ohana-modal-fieldset:last-child { margin-bottom: 0; }
.ohana-modal-v2-body .ohana-modal-fieldset-head {
  margin: 0 0 12px;
  font-size: 1.02rem;
  font-weight: 700;
  color: #00838F;
  padding-bottom: 8px;
  border-bottom: 2px solid #E0F2F1;
}
/* An input beside its action button, aligned to the control's baseline. */
.ohana-modal-v2-body .ohana-form-action-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.ohana-modal-v2-body .ohana-form-action-row > div:first-child { flex: 1 1 220px; }
.ohana-modal-v2-body .ohana-form-action-row .ohana-btn { margin-bottom: 2px; }

/* ── Auto-pad safety net ───────────────────────────────────────────────
   A modal whose caller appended content straight to the box (no -header/
   -body/-footer/-tabs region) would sit flush to the edges. Pad the box.
   The WHOLE selector is wrapped in :where() → ZERO specificity, so any
   explicit padding (inline modalStyle, a bespoke class, a -body rule) always
   wins. A browser without :has() ignores it → falls back to today's flush
   behavior (never worse). Bespoke modal systems that manage their own layout
   are excluded by class; a future one should add its class here. */
:where(.ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash):not(
    :has(> .ohana-modal-v2-header)):not(:has(> .ohana-modal-v2-body)):not(
    :has(> .ohana-modal-v2-footer)):not(:has(> .ohana-modal-v2-tabs))) {
  padding: 1.5rem 1.75rem;
}

/* Standard control styling for those auto-padded modals, mirroring the
   .ohana-modal-v2-body control rules. Also zero-specificity (:where-wrapped),
   so a modal's own control class or the -body rules always win; this only
   fills in unstyled controls. Bespoke systems excluded. */
:where(
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) input[type="text"],
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) input[type="email"],
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) input[type="url"],
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) input[type="number"],
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) input[type="date"],
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) input[type="time"],
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) input[type="datetime-local"],
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) input[type="search"],
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) select,
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) textarea
) {
  width: 100%; padding: 0.55rem 0.75rem; border: 1.5px solid #d6dde5; border-radius: 8px;
  font-family: inherit; font-size: 0.93rem; color: #000; background: #fff;
  box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s;
}
:where(
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) input:focus,
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) select:focus,
  .ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) textarea:focus
) {
  outline: none; border-color: #00BAC6; box-shadow: 0 0 0 3px rgba(0,186,198,0.14);
}
:where(.ohana-modal-v2:not(.wgm-modal):not(.oe-raw-modal):not(.cfsp-splash) label) {
  display: block; font-size: 0.85rem; font-weight: 600; color: #000; margin-bottom: 0.35rem;
}

/* ── Modal footer (action row) ─────────────────────────────────────────── */
.ohana-modal-v2-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid #edf2f7;
  background: #fff;
  border-radius: 0 0 14px 14px;
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex-wrap: wrap;
}

/* ── Mobile: bottom-sheet shape ────────────────────────────────────────── */
@media (max-width: 600px) {
  .ohana-modal-v2-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .ohana-modal-v2 {
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
    margin-top: auto;
    width: 100%;
  }
  .ohana-modal-v2-header,
  .ohana-modal-v2-footer {
    border-radius: 14px 14px 0 0;
  }
  .ohana-modal-v2-footer {
    border-radius: 0;
  }
  .ohana-modal-v2-body {
    padding: 1.25rem 1.25rem;
  }
}

/* ── Body scroll lock (added by ohana-modal.js when any modal is open) ─── */
body.ohana-modal-v2-open {
  overflow: hidden;
}

/* ── Respect prefers-reduced-motion (R11) ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ohana-modal-v2-overlay,
  .ohana-modal-v2 {
    animation: none;
  }
}