/*!
 * ZIC modals — the two variants the shell does not ship
 * ============================================================================
 * The modal *chrome* is Materio's. `.modal`, `.modal-dialog` and its sizes,
 * `.modal-content`, `.modal-header` / `.modal-body` / `.modal-footer`,
 * `.modal-title`, `.btn-close`, the backdrop and the entrance animation all
 * render from `vendor/css/core.css`, and the reference's markup is used verbatim
 * in the templates.
 *
 * This file used to restate all of it — a black blurred backdrop in place of the
 * shell's grey scrim, a 640px default width against the shell's 560px, a 16px
 * radius against 6px, a 24px section padding, a scale-from-0.95 entrance in
 * place of the shell's own, an opaque footer, a `max-height: 60vh` scrolling
 * body, and a mobile full-screen sheet. The Materio restoration removed that
 * (docs/MATERIO_DRIFT_AUDIT.md §7.7, Prompt 5 of
 * docs/prompts/MATERIO_RESTORE_BULK_PROMPTS.md), along with the stacked-dialog
 * offsets — Bootstrap already orders the stack by z-index and the reference adds
 * nothing on top.
 *
 * Two ZIC variants have no counterpart in the shell and stay:
 *   - `.modal-icon*` / `.modal-detail-list`, used by the confirm, alert and
 *     detail bodies;
 *   - `.modal-loading*`, driven by `js/modals.js`.
 *
 * The focus trap and Escape-to-close are Bootstrap's; see js/modals.js.
 */

/* ===========================================================================
 * 1. Variants
 *
 * `confirm` and `alert` lead with an icon so the intent is legible before a word
 * is read; `detail` is a read-only key/value list; `form` needs nothing beyond
 * the shell's own body.
 * ======================================================================== */
.modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--zic-radius-md);
  font-size: 1.5rem;
  flex: 0 0 auto;
}

.modal-icon--info {
  color: var(--zic-status-info-text);
  background-color: var(--zic-status-info-bg-subtle);
}

.modal-icon--warning {
  color: var(--zic-status-warning-text);
  background-color: var(--zic-status-warning-bg-subtle);
}

.modal-icon--danger {
  color: var(--zic-status-danger-text);
  background-color: var(--zic-status-danger-bg-subtle);
}

.modal-icon--success {
  color: var(--zic-status-success-text);
  background-color: var(--zic-status-success-bg-subtle);
}

/* Detail: label above value, read-only. */
.modal-detail-list {
  display: grid;
  grid-template-columns: minmax(9rem, 34%) 1fr;
  gap: var(--zic-space-3) var(--zic-space-4);
  margin: 0;
}

.modal-detail-list dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zic-text-secondary);
  align-self: start;
}

.modal-detail-list dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--zic-text-primary);
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .modal-detail-list {
    grid-template-columns: 1fr;
    gap: var(--zic-space-1);
  }

  .modal-detail-list dd {
    margin-bottom: var(--zic-space-3);
  }
}

/* ===========================================================================
 * 2. Loading state
 *
 * `.modal-loading` is set by the script. The body keeps its height so the dialog
 * does not jump when the spinner replaces the content, and the footer is
 * disabled rather than hidden so the layout stays put.
 * ======================================================================== */
.modal-loading .modal-body > :not(.modal-loading-veil) {
  visibility: hidden;
}

.modal-loading-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--zic-surface-primary) 72%, transparent);
  border-radius: inherit;
}

.modal-loading .modal-footer .btn {
  pointer-events: none;
  opacity: var(--zic-control-disabled-opacity);
}