/* Modal Component Styles — shared/_modal.html.erb
 *
 * Presentation follows the BestPath design system (Direction A — Quiet
 * Editorial). The surface mirrors the Component Library `.bp-modal-surface`
 * recipe: paper surface, rule border, large radius, a single soft scrim
 * shadow, Lora display title, ink-2 body, and `.bp-btn` actions.
 *
 * Tokens only — every colour, radius, space, and motion value references a
 * `--bp-*` variable (see app/assets/stylesheets/application.css). The local
 * `--modal-*` custom properties below are thin forwards onto those tokens so
 * per-modal overrides stay possible without reintroducing raw values.
 *
 * Inner-element rules are scoped under `.modal` so this editorial styling stays
 * confined to the shared modal and does not leak into the separate turbo-frame
 * modal that reuses the same `.modal-*` class names from components.css. The
 * `.modal-content` surface is scoped via a zero-specificity `:where(.modal)`
 * ancestor so per-modal overrides (e.g. the capabilities manage modal) still win.
 */

/* Base modal structure — the fixed scrim container, hidden by default */
.modal {
  --modal-scrim: color-mix(in srgb, var(--bp-ink) 38%, transparent);
  --modal-surface-bg: var(--bp-paper);
  --modal-radius: var(--bp-r-lg);
  --modal-shadow: 0 8px 40px color-mix(in srgb, var(--bp-ink) 10%, transparent),
                  0 1px 3px color-mix(in srgb, var(--bp-ink) 6%, transparent);

  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: visibility var(--bp-dur-med) var(--bp-easing),
              opacity var(--bp-dur-med) var(--bp-easing);
}

/* Visible state — show modal */
.modal.modal-visible {
  visibility: visible;
  opacity: 1;
}

/* Scrim/backdrop */
.modal .modal-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--modal-scrim);
  cursor: default;
  z-index: 0;
}

/* Dismissible scrim — pointer cursor only when clicking it does something */
.modal[data-modal-dismissible-value='true'] .modal-overlay {
  cursor: pointer;
}

/* Modal surface container. Scoped to the shared modal via a zero-specificity
   `:where(.modal)` ancestor so it does not restyle the turbo-frame modal that
   reuses `.modal-content`, while keeping the selector at a single class so
   per-modal overrides like `.capabilities-dashboard__manage-modal .modal-content`
   still win. */
:where(.modal) .modal-content {
  position: relative;
  z-index: 1;
  background-color: var(--modal-surface-bg);
  border: 1px solid var(--bp-rule);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  max-width: 520px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn var(--bp-dur-med) var(--bp-easing);
}

/* Animation: rise + fade */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header — flat surface, no rule. Contrast comes from type + whitespace. */
.modal .modal-header {
  padding: var(--bp-s-6) var(--bp-s-6) 0;
}

.modal .modal-title {
  margin: 0;
  font-family: var(--bp-display-family);
  font-weight: var(--bp-display-weight);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--bp-ink);
  line-height: 1.25;
}

/* Body/message */
.modal .modal-body {
  padding: var(--bp-s-3) var(--bp-s-6) var(--bp-s-5);
  color: var(--bp-ink-2);
}

.modal .modal-message {
  margin: 0;
  font-size: 14.5px;
  color: var(--bp-ink-2);
  line-height: 1.6;
}

/* Footer — actions row, right-aligned, primary last (destructive-second) */
.modal .modal-footer {
  padding: 0 var(--bp-s-6) var(--bp-s-6);
  display: flex;
  gap: var(--bp-s-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.modal .modal-footer .bp-btn--secondary {
  order: 1; /* Secondary on the left */
}

.modal .modal-footer .bp-btn--primary,
.modal .modal-footer .bp-btn--danger {
  order: 2; /* Primary/destructive on the right */
}

/* Responsive — stack actions full width on narrow screens */
@media (max-width: 600px) {
  :where(.modal) .modal-content {
    width: 95%;
    max-height: 85vh;
  }

  .modal .modal-header {
    padding: var(--bp-s-5) var(--bp-s-5) 0;
  }

  .modal .modal-body {
    padding: var(--bp-s-3) var(--bp-s-5) var(--bp-s-4);
  }

  .modal .modal-footer {
    padding: 0 var(--bp-s-5) var(--bp-s-5);
    flex-direction: column;
  }

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

  /* Primary on top, secondary below when stacked */
  .modal .modal-footer .bp-btn--primary,
  .modal .modal-footer .bp-btn--danger {
    order: 1;
  }

  .modal .modal-footer .bp-btn--secondary {
    order: 2;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .modal {
    transition: none;
  }

  :where(.modal) .modal-content {
    animation: none;
  }
}