/* Modal theme + global modal behavior */

/* Prevent background scroll when Bootstrap modals are open */
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/*
 * Modal scrim: use the shared backdrop token (neutral dark, slight green tint in
 * light theme). Avoid painting the backdrop with --bg-secondary (nav chrome) —
 * that made open modals look dark green instead of dimmed.
 * Force opacity:1 because --backdrop-scrim already includes alpha (same as sidebar).
 *
 * Stack above the fixed top navbar (z-index 1100). Bootstrap defaults (1050/1055)
 * leave the nav on top of the scrim, which forced a nav-height top pad and made
 * centered dialogs sit too low. Covering chrome is the normal overlay pattern.
 */
.modal-backdrop {
  --bs-backdrop-bg: var(--backdrop-scrim);
  --bs-backdrop-opacity: 1;
  --bs-backdrop-zindex: 1110;
  z-index: var(--bs-backdrop-zindex);
  background-color: var(--backdrop-scrim);
}

/*
 * Inset for notches / home indicator only — not the app navbar (covered by
 * the raised modal stack). Keeps dialogs optically centered in the viewport.
 */
.modal {
  --bs-modal-zindex: 1120;
  --modal-viewport-inset-top: max(var(--bs-modal-margin, 0.5rem), env(safe-area-inset-top, 0px));
  --modal-viewport-inset-bottom: max(var(--bs-modal-margin, 0.5rem), env(safe-area-inset-bottom, 0px));
  z-index: var(--bs-modal-zindex);
  padding-top: var(--modal-viewport-inset-top);
  padding-bottom: var(--modal-viewport-inset-bottom);
}

.modal-dialog-centered {
  min-height: calc(100% - var(--modal-viewport-inset-top) - var(--modal-viewport-inset-bottom));
}

/* Baseline modal theme — neutral surface + chrome (brand stays in buttons/links).
 * Keep Bootstrap's --bs-modal-* radius tokens in sync so header/footer corners match.
 * Fullscreen variants (e.g. modal-fullscreen-sm-down) zero radius inside their own
 * max-width media queries — do not override that here without a matching breakpoint. */
.modal-content {
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-inner-border-radius: calc(var(--radius-lg) - 1px);
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--bs-modal-border-radius);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl);
}

.modal-header,
.modal-footer {
  background: var(--card-chrome-bg);
  border-color: var(--border-primary);
}

.modal-body {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/*
 * Bootstrap modal-dialog-scrollable only constrains a .modal-body that is a direct
 * flex child of .modal-content. Several screens wrap body (and sometimes footer)
 * in <form> so the sticky footer can use form="…". Without this, the form grows
 * with its content and the dialog never scrolls (add-bulava invite, kurin/hurtok
 * add/edit, proba warning resolve, …).
 *
 * Preferred markup still keeps .modal-body as a direct child of .modal-content
 * (see shared/modal + roster camper). This rule makes the form-wrapper pattern safe.
 */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
  overflow-y: auto;
}

.trophy-modal-dialog {
  width: calc(100% - var(--space-4) * 2);
  max-width: min(26rem, calc(100vw - 1.5rem));
  margin-left: auto;
  margin-right: auto;
}

.modal .btn-close {
  filter: none;
  opacity: 0.55;
}

.modal .btn-close:hover {
  opacity: 1;
}

/*
 * Global mobile rule forces .btn { width: 100% }. Modal chrome (footer actions,
 * approve/close, dismiss) should stay intrinsic so pairs don't stack full-bleed.
 */
@media (max-width: 768px) {
  .modal .btn {
    width: auto;
    max-width: 100%;
  }
}

/* Permission / org-access review with a permission matrix: usable width, content-sized height. */
.org-access-request-review-modal.modal-dialog,
.permission-request-review-modal.modal-dialog {
  width: calc(100% - 1.5rem);
  max-width: min(42rem, calc(100vw - 1.5rem));
  margin-left: auto;
  margin-right: auto;
}