.ui-modal {
  background: var(--ui-surface-modal);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-modal);
  box-shadow: var(--ui-shadow-panel);
  color: var(--ui-text-primary);
}

.modal-backdrop {
  --bs-backdrop-bg: var(--ui-modal-backdrop-bg);
  --bs-backdrop-opacity: 1;
}

.modal-content {
  background: var(--ui-surface-modal);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-modal);
  box-shadow: var(--ui-shadow-panel);
  color: var(--ui-text-primary);
}

.modal-header {
  border-bottom-color: var(--ui-border-subtle);
}

.modal-footer {
  border-top-color: var(--ui-border-subtle);
}

.modal-title {
  color: var(--ui-text-primary);
}

.btn-close {
  filter: var(--ui-btn-close-filter);
  opacity: var(--ui-btn-close-opacity);
}

.btn-close:hover {
  filter: var(--ui-btn-close-filter);
  opacity: var(--ui-btn-close-hover-opacity);
}

/* On accent/inverse surfaces keep Bootstrap's white inversion; --ui-btn-close-filter must not blank it. */
.btn-close-white,
.btn-close-white:hover {
  filter: var(--bs-btn-close-white-filter, invert(1) grayscale(100%) brightness(200%));
  opacity: var(--ui-btn-close-hover-opacity);
}

.btn-close:focus-visible {
  box-shadow: var(--ui-focus-ring);
  outline: 0;
}

.document-preview-modal-dialog {
  max-width: 70vw;
  width: 70%;
}

.ui-modal__header,
.ui-modal__body,
.ui-modal__footer {
  padding: var(--ui-space-5);
}

.ui-modal__header {
  align-items: center;
  border-bottom: 1px solid var(--ui-border-subtle);
  display: flex;
  gap: var(--ui-space-3);
  justify-content: space-between;
}

.ui-modal__footer {
  border-top: 1px solid var(--ui-border-subtle);
  display: flex;
  gap: var(--ui-space-3);
  justify-content: flex-end;
}

.ui-modal__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}

.ui-modal__heading {
  display: grid;
  gap: var(--ui-space-1);
  min-width: 0;
}

.ui-modal__subtitle {
  color: var(--ui-text-secondary);
  font-size: var(--ui-font-size-sm);
}

.ui-modal__header-actions {
  align-items: center;
  display: inline-flex;
  gap: var(--ui-space-2);
  margin-left: auto;
}

/* plan_mobile_9_9 Wave 3 (MD/ADR-010): phone modal contract under
   MOBILE_NATIVE_SCALE. Every Bootstrap modal becomes a full-screen sheet:
   header/footer stay pinned, only the body scrolls, so action buttons remain
   reachable when the on-screen keyboard shrinks the visual viewport. The
   !important width/height pairs intentionally outrank per-modal sizing helpers
   (e.g. cabinet clerical/modals.css ID selectors with 100vh-based heights) —
   those describe desktop layouts, meaningless on phones. */
@media (max-width: 576px) {
  html[data-mobile-native-scale="1"] .modal .modal-dialog {
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    width: 100% !important;
  }

  html[data-mobile-native-scale="1"] .modal .modal-content {
    border: 0;
    border-radius: var(--ui-radius-none);
    /* --ui-keyboard-inset is owned by js/mobile_viewport_env.js (Wave 3.3):
       shrink the sheet by the software-keyboard height so the pinned footer
       (submit) stays visible while an input is focused. */
    height: calc(100% - var(--ui-keyboard-inset, 0px)) !important;
    max-height: none !important;
  }

  /* Nested/all sheets slide up from the bottom instead of Bootstrap's desktop
     translate(0,-50px); the transition itself (and its reduced-motion kill
     switch) stays owned by Bootstrap. */
  html[data-mobile-native-scale="1"] .modal.fade .modal-dialog {
    transform: translateY(2rem);
  }

  html[data-mobile-native-scale="1"] .modal.show .modal-dialog {
    transform: none;
  }

  html[data-mobile-native-scale="1"] .modal .modal-body {
    flex: 1 1 auto;
    /* Neutralize desktop per-modal 100vh-based caps; the sheet's flex column
       is the only height owner on phones. */
    max-height: none !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  html[data-mobile-native-scale="1"] .modal .modal-footer {
    flex-shrink: 0;
    padding-bottom: calc(var(--ui-space-3) + env(safe-area-inset-bottom, 0px));
  }

  html[data-mobile-native-scale="1"] .modal .modal-header {
    flex-shrink: 0;
  }

  html[data-mobile-native-scale="1"] .modal .btn-close {
    /* 44px effective close target (icon stays visually small). */
    margin: -0.5rem;
    padding: 1rem;
  }
}