/* =============================================================================
   BUAMS AI new-ui — MODALS
   Spec: /frontend_design.md §F.4 — ONE pattern, no exceptions.

   Wraps genuine Bootstrap 5 modal markup (.modal / .modal-dialog /
   .modal-content) and restyles it via a `.bui-modal` class on the root, so
   Bootstrap's JS keeps handling focus trapping, backdrop and Escape while
   new-ui owns the visuals.

   Scoping every rule under .bui-modal means these styles cannot leak onto any
   other modal in the application.
   ============================================================================= */

.bui-modal .modal-content {
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-xl);
  box-shadow: var(--bui-shadow-lg);
}

.bui-modal .modal-header {
  align-items: flex-start;
  gap: var(--bui-space-3);
  padding: var(--bui-space-5) var(--bui-space-6);
  border-bottom: 1px solid var(--bui-line);
}

.bui-modal .modal-title {
  font-size: var(--bui-text-h3);
  font-weight: var(--bui-fw-bold);
  line-height: var(--bui-lh-snug);
  color: var(--bui-ink-900);
}

.bui-modal .modal-body {
  padding: var(--bui-space-6);
  font-size: var(--bui-text-body);
  color: var(--bui-ink-700);
}

.bui-modal .modal-footer {
  gap: var(--bui-space-3);
  padding: var(--bui-space-4) var(--bui-space-6);
  background: var(--bui-surface-2);
  border-top: 1px solid var(--bui-line);
  border-radius: 0 0 var(--bui-radius-xl) var(--bui-radius-xl);
}

/* Bootstrap's .modal-footer adds .5rem margins to every child; the flex `gap`
   above already spaces them, so reset it or buttons drift apart. */
.bui-modal .modal-footer > * {
  margin: 0;
}

.bui-modal .btn-close {
  flex-shrink: 0;
  margin: 0;
  padding: var(--bui-space-2);
  border-radius: var(--bui-radius-sm);
  opacity: .55;
  transition: opacity var(--bui-transition);
}

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

.bui-modal .btn-close:focus-visible {
  outline: 2px solid var(--bui-primary-700);
  outline-offset: 2px;
  box-shadow: none;
  opacity: 1;
}

.bui-modal-backdrop.modal-backdrop.show {
  background: var(--bui-primary-900);
  opacity: .42;
}

/* Any form modal with more than three fields goes fullscreen below sm
   (spec §H / EHR2 §1a). Simple confirms stay centred at all sizes. */
@media (max-width: 575.98px) {
  .bui-modal .modal-header,
  .bui-modal .modal-body,
  .bui-modal .modal-footer {
    padding: var(--bui-space-4);
  }

  .bui-modal .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .bui-modal .modal-footer .bui-btn {
    width: 100%;
  }
}