/* ============================================================================
   Confirm dialog — the design-system modal (components/modal) used app-wide by
   confirm_dialog.js (Turbo.setConfirmMethod) to replace the browser's native
   confirm() for every data-turbo-confirm action.

   Classes are namespaced `.sef-confirm-*` rather than the canonical `.modal-*`
   so this never collides with other modals that use those generic names (e.g.
   screening's "New run" modal). Composes from canonical tokens (linked app-wide
   in the application layout).
   ============================================================================ */

.sef-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: rgba(15, 23, 42, 0.45);
}

.sef-confirm {
  width: 100%;
  max-width: 480px;
  background: var(--paper);
  border-radius: var(--r-modal);
  box-shadow: var(--sh-modal, 0 10px 38px rgba(15, 23, 42, 0.28));
  padding: var(--s-6);
  font-family: var(--font-sans);
  color: var(--fg);
}

.sef-confirm-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg);
}

.sef-confirm-body {
  margin-top: var(--s-2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
}

.sef-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-6);
}

.sef-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-input);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 100ms ease-out, border-color 100ms ease-out, color 100ms ease-out;
}
.sef-confirm-btn--secondary { background: var(--paper); color: var(--fg); border-color: var(--border-strong); }
.sef-confirm-btn--secondary:hover { background: var(--surface-2); }
.sef-confirm-btn--primary { background: var(--color-slate-900); color: #fff; border-color: var(--color-slate-900); }
.sef-confirm-btn--primary:hover { background: var(--color-slate-800); border-color: var(--color-slate-800); }
/* Solid-red destructive — the at-commitment treatment. */
.sef-confirm-btn--danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.sef-confirm-btn--danger:hover { background: var(--color-danger-text); border-color: var(--color-danger-text); }
.sef-confirm-btn:focus-visible { outline: 2px solid var(--color-blue-600); outline-offset: 2px; }