/* THE dialog design — one stylesheet for every modal in the ecosystem.
 *
 * Linked once from shared/templates/base.html (so every site, SILA, auth/profile,
 * the admin console and the SAMM/SOVA/SICO dashboards get it). It is the old
 * admin `.modal` look (admin-cp.css) made canonical; AdminDialog (admin-dialog.js)
 * builds its confirm box out of the same parts.
 *
 *   <div class="modal-backdrop [modal-backdrop--live]">      scrim, centred
 *     <div class="modal [modal--sm|--lg|--xl]" role="dialog">  the box
 *       <div class="modal__header"><h3 class="modal__title">…</h3>
 *         <button class="modal__close" aria-label="Close">&times;</button></div>
 *       <div class="modal__body">…</div>
 *       <div class="modal__footer"><button class="btn">…</button>…</div>
 *
 * Native <dialog class="modal"> works the same (::backdrop is styled here).
 *
 * Sizes (only these): sm 440 (confirm / one question), md 560 (default form),
 * lg 800 (wide forms, tables, previews), xl 1100. Never set a width in a page.
 * Open states: `.is-open`, `[data-open="1"]`, or `--live` (the page toggles the
 * `hidden` attribute instead). Tokens only, so it follows the host theme.
 */

:root {
  --dlg-w-sm: 440px;
  --dlg-w-md: 560px;
  --dlg-w-lg: 800px;
  --dlg-w-xl: 1100px;
  --dlg-pad: 18px;
  --dlg-radius: 14px;
  --dlg-z: 1000;
  --dlg-scrim: rgba(2, 6, 23, .55);
}

/* ── Backdrop ──────────────────────────────────────────────────────────── */
.modal-backdrop, .adlg {
  position: fixed; inset: 0; z-index: var(--dlg-z);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--dlg-scrim);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  /* Fade instead of snap — visibility+opacity so the transition fires. */
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .22s ease, visibility 0s .22s;
}
.modal-backdrop.is-open, .modal-backdrop[data-open="1"], .modal-backdrop--live, .adlg {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity .22s ease;
}
/* A component that sets display:flex outranks the hidden attribute, so
   element.hidden = true would leave the dialog on screen. */
.modal-backdrop[hidden], .adlg[hidden] { display: none; }
.adlg__scrim { position: absolute; inset: 0; }

/* ── Box ───────────────────────────────────────────────────────────────── */
.modal, .adlg__box {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--dlg-w, var(--dlg-w-md));
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow: auto;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--dlg-radius);
  box-shadow: var(--shadow-lg);
  /* "backwards": until the animation actually starts (the compositor can take a frame or
     ten after showModal) the box sits at its first keyframe, not fully drawn. Without it the
     dialog paints solid, then restarts from transparent: it flicks and shows again. */
  animation: dlg-pop .15s ease-out backwards;
}
.modal--sm { --dlg-w: var(--dlg-w-sm); }
.modal--md { --dlg-w: var(--dlg-w-md); }
.modal--lg { --dlg-w: var(--dlg-w-lg); }
.modal--xl { --dlg-w: var(--dlg-w-xl); }
@keyframes dlg-pop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal, .adlg__box { animation: none; } .modal-backdrop, .adlg { transition: none; } }

/* The box is itself a <form>, or wraps one: header/footer stay put, body scrolls. */
.modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal form[hidden], .modal__body[hidden], .modal__footer[hidden] { display: none; }

/* A wizard step: its own body + footer, one shown at a time. */
.modal__step { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal__step[hidden] { display: none; }

/* Native <dialog class="modal"> */
dialog.modal {
  padding: 0; margin: auto;
  width: calc(100vw - 40px);
}
dialog.modal:not([open]) { display: none; }
dialog.modal::backdrop { background: var(--dlg-scrim); backdrop-filter: blur(2px); }

/* ── Header / body / footer ────────────────────────────────────────────── */
.modal__header {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 14px var(--dlg-pad); border-bottom: 1px solid var(--border);
}
.modal__title { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.modal__sub { margin: 2px 0 0; font-size: 12px; font-weight: 400; color: var(--fg-muted); }
.modal__body {
  flex: 1 1 auto; min-height: 0; padding: var(--dlg-pad);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.modal__body > :first-child { margin-top: 0; }
.modal__body > :last-child { margin-bottom: 0; }
.modal__footer {
  flex: none; display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  padding: 12px var(--dlg-pad); border-top: 1px solid var(--border);
  background: var(--surface-2); border-radius: 0 0 var(--dlg-radius) var(--dlg-radius);
}
/* Same button size in every footer, whatever size class the page once used. */
.modal__footer .btn, .modal__footer .btn--sm {
  padding: 8px 14px; font-size: 13px; border-radius: 8px; min-height: 36px;
}
.modal__footer .btn--ghost { background: var(--surface); border-color: var(--border); }
.modal__footer .btn[disabled] { opacity: .45; cursor: not-allowed; }
.modal__footer--split { justify-content: space-between; }

.modal__close {
  width: 32px; height: 32px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  color: var(--danger); background: transparent; border: none;
  font-size: 22px; line-height: 1; padding: 0;
  transition: background .15s, color .15s;
}
.modal__close svg { width: 16px; height: 16px; }
.modal__close:hover { background: var(--bg-hover); color: var(--fg); }
.modal__close:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ── Phone (390px): nearly full width, buttons share the row ───────────── */
@media (max-width: 640px) {
  .modal-backdrop, .adlg {
    padding: 10px; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .modal, .adlg__box { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  dialog.modal { width: calc(100vw - 20px); }
  .modal__header { padding: 12px 14px; }
  .modal__body { padding: 14px; }
  .modal__footer { padding: 10px 14px; flex-wrap: wrap; }
  .modal__footer .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .modal__close { width: 44px; height: 44px; margin-inline-end: -8px; }
  .modal input:not([type=checkbox]):not([type=radio]), .modal select, .modal textarea { font-size: 16px; }
}

/* ── AdminDialog parts (shared/static/js/admin-dialog.js) ──────────────── */
.adlg__body { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-muted); }

/* `display:flex` outranks the `hidden` attribute, so the type-to-confirm
   field showed on every dialog that does not use it. */
.adlg__typewrap[hidden] { display: none; }
.adlg__typewrap { display: flex; flex-direction: column; gap: 5px; margin-top: 16px; font-size: 12px; color: var(--fg-muted); }
.adlg__body[hidden] + .adlg__typewrap { margin-top: 0; }
.adlg__type {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--fg); font-size: 14px; padding: 8px 10px; min-height: 38px;
}
.adlg__type:focus { outline: none; border-color: var(--primary); }