/* SweetAlert2 ships a light theme and this site has only a dark one, so an unstyled
   dialog arrives as a white box over a near-black page.

   Written as var(--x, #hex) on purpose: style.css defines these custom properties for the
   public pages, admin.css uses the same palette as literal hex and defines none, so the
   fallback is what makes one file serve both. dialogs.js turns buttonsStyling off, which
   is what lets the button rules below apply at all. */

.swal2-popup.app-dialog {
  background: var(--bg-card, #1c1c1f);
  border: 1px solid var(--border-color, #27272a);
  border-radius: 12px;
  color: var(--text-primary, #fafafa);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.swal2-popup.app-dialog .swal2-title {
  color: var(--text-primary, #fafafa);
  font-size: 1.25rem;
}

.swal2-popup.app-dialog .swal2-html-container {
  color: var(--text-secondary, #a1a1aa);
  font-size: 0.95rem;
  /* The message is the only part that can be long, and a domain or an error from a
     resolver has no spaces to break on. */
  overflow-wrap: anywhere;
}

.swal2-popup.app-dialog .swal2-actions {
  gap: 8px;
}

/* Matches .btn-primary in style.css and admin.css, which is what every other confirming
   button on the site looks like. */
.app-dialog-confirm {
  padding: 10px 20px;
  background: var(--accent, #3b82f6);
  border: 1px solid transparent;
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.app-dialog-confirm:hover {
  background: var(--accent-hover, #2563eb);
}

/* Every askConfirm() guards a delete or a revoke, so its confirming button must not look
   like the ordinary primary action. */
.app-dialog-confirm.app-dialog-danger {
  background: var(--error, #ef4444);
}

.app-dialog-confirm.app-dialog-danger:hover {
  background: #dc2626;
}

.app-dialog-cancel {
  padding: 10px 20px;
  background: var(--bg-tertiary, #18181b);
  border: 1px solid var(--border-color, #27272a);
  border-radius: 6px;
  color: var(--text-primary, #fafafa);
  font-size: 0.9rem;
  cursor: pointer;
}

.app-dialog-cancel:hover {
  background: var(--bg-hover, #232326);
}

/* Focus is set on the cancel button of a destructive dialog, so the ring has to be
   visible against the dark surface rather than SweetAlert2's default pale halo. */
.app-dialog-confirm:focus-visible,
.app-dialog-cancel:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}

.swal2-popup.app-dialog .swal2-confirm:focus,
.swal2-popup.app-dialog .swal2-cancel:focus {
  box-shadow: none;
}

.swal2-popup.app-dialog .swal2-icon.swal2-error {
  border-color: var(--error, #ef4444);
  color: var(--error, #ef4444);
}

.swal2-popup.app-dialog .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--error, #ef4444);
}

.swal2-popup.app-dialog .swal2-icon.swal2-success {
  border-color: var(--success, #22c55e);
  color: var(--success, #22c55e);
}

.swal2-popup.app-dialog .swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--success, #22c55e);
}

.swal2-popup.app-dialog .swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--success, #22c55e);
}

/* The success icon draws two arcs in the popup's own background colour to mask the ring.
   They are hard-coded white in the library, which leaves two pale wedges on a dark
   dialog. */
.swal2-popup.app-dialog .swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-popup.app-dialog .swal2-icon.swal2-success .swal2-success-fix {
  background-color: var(--bg-card, #1c1c1f);
}

.swal2-popup.app-dialog .swal2-icon.swal2-warning {
  border-color: #f59e0b;
  color: #f59e0b;
}

.swal2-container.swal2-backdrop-show {
  background: rgba(0, 0, 0, 0.75);
}