/* Shared confirmation-modal component (extracted from donor_invoicing.css once
   the cashbook delete became its second consumer). A <dialog> opened by a
   confirm-style Stimulus controller (transition_confirm_controller and friends):
   .confirm-modal shell + .confirm-modal-inner body, a .confirm-lead paragraph,
   and a right-aligned .confirm-actions row. Feature files add variants on top
   (e.g. donor_invoicing.css's .donor-gate-modal, .donor-confirm-figures). */

/* The explicit inset/margin re-asserts the UA's top-layer centering, which the
   app's global `margin: 0` reset would otherwise break (same fix as
   travel-modal and lerf-confirm-modal). */
.confirm-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  border-radius: 10px;
  padding: 0;
  width: min(32rem, 92vw);
  height: fit-content;
  max-height: 90vh;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.confirm-modal::backdrop {
  background: rgba(17, 24, 39, 0.45);
}

.confirm-modal-inner {
  padding: 1.5rem 1.75rem;
  white-space: normal;
  /* The dialog node may live inside a right-aligned actions cell and inherit
     its text-align — re-assert normal reading direction. */
  text-align: left;
}

.confirm-modal-inner h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

.confirm-lead {
  margin: 0 0 0.75rem;
  color: var(--gray-dark);
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.confirm-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* A state-tinted confirm button keeps its colour but drops the action-bar
   uppercase, so it reads like the plain buttons beside it in the modal. */
.confirm-actions .btn-state {
  text-transform: none;
  letter-spacing: normal;
}

/* The trigger's button_to form and its <dialog> live in one inline-block
   wrapper, so the fixed-position dialog never disturbs the actions row. */
.transition-gate { display: inline-block; }