/* admin/dialogs.css — dark-theme overrides for SweetAlert2.
   Load AFTER the vendored sweetalert2.min.css so our rules win. */

.swal2-popup {
  background: var(--bg-1) !important;
  color: var(--text-0) !important;
  border: 1px solid var(--bg-2) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.45)) !important;
}

.swal2-title {
  color: var(--text-0) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}

.swal2-html-container,
.swal2-content {
  color: var(--text-1) !important;
  font-family: var(--font-body) !important;
}

.swal2-input,
.swal2-textarea,
.swal2-file,
.swal2-select {
  background: var(--bg-0) !important;
  color: var(--text-0) !important;
  border: 1px solid var(--bg-2) !important;
  border-radius: var(--radius-sm) !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.25) !important;
  outline: none !important;
}

/* Dropdown items inside <select>. Some browsers (Safari) ignore option
   styling — that's acceptable; Chrome and Firefox on Windows honour these. */
.swal2-select option,
.swal2-input option {
  background: var(--bg-0) !important;
  color: var(--text-0) !important;
}

.swal2-validation-message {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #FCA5A5 !important;
}

/* ----- buttons -----
   Universal rule for every two-button popup in the app:
     • Confirm + Cancel always share the same min-width so they're visually balanced.
     • Cancel is always red (matches the user's expectation that "cancel" = "stop").
     • Confirm is the accent green for normal actions, OR red (.swal2-deny) for
       destructive actions like Revoke. Labels distinguish which is which.
*/

.swal2-actions {
  gap: var(--space-3) !important;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
  min-width: 160px !important;
  padding: 10px 18px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.swal2-styled.swal2-confirm {
  background: var(--accent) !important;
  color: var(--bg-0) !important;
}
.swal2-styled.swal2-confirm:hover { background: var(--accent-hover) !important; }
.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(34,197,94,0.4) !important;
}

/* Cancel — red by default (universal rule). */
.swal2-styled.swal2-cancel {
  background: var(--danger) !important;
  color: white !important;
  border: 1px solid var(--danger) !important;
}
.swal2-styled.swal2-cancel:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
}
.swal2-styled.swal2-cancel:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,0.35) !important;
}

/* swal2-deny is used as the CONFIRM button on destructive actions
   (revoke admin, regenerate codes, etc). Same red, slightly darker base
   so two red buttons in a row still have a tiny visual delta. */
.swal2-styled.swal2-deny {
  background: #B91C1C !important;
  color: white !important;
}
.swal2-styled.swal2-deny:hover {
  background: #991B1B !important;
}

/* ----- icon colours ----- */

.swal2-icon.swal2-success {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'],
.swal2-icon.swal2-success .swal2-success-ring {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.swal2-icon.swal2-error {
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--danger) !important;
}
.swal2-icon.swal2-warning {
  color: var(--warning) !important;
  border-color: var(--warning) !important;
}
.swal2-icon.swal2-info {
  color: var(--info) !important;
  border-color: var(--info) !important;
}
.swal2-icon.swal2-question {
  color: var(--text-2) !important;
  border-color: var(--bg-2) !important;
}

/* ----- toast variant ----- */

.swal2-popup.swal2-toast {
  background: var(--bg-1) !important;
  border: 1px solid var(--bg-2) !important;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.35)) !important;
  padding: var(--space-3) var(--space-3) !important;
}
.swal2-popup.swal2-toast .swal2-title {
  font-size: var(--text-small) !important;
  margin: 0 !important;
}
.swal2-popup.swal2-toast .swal2-timer-progress-bar {
  background: rgba(255,255,255,0.08) !important;
}

/* ----- backdrop blur looks crisper on dark UI ----- */

.swal2-backdrop-show {
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.swal2-close {
  color: var(--text-2) !important;
}
.swal2-close:hover {
  color: var(--text-0) !important;
}

/* ----- legacy aliases: the MFA-specific classes are now no-ops because
        the universal rule above already gives every two-button popup the
        same shape and a red cancel. Kept here as harmless overrides so
        existing customClass usages in me.js still resolve cleanly. ----- */

.swal2-styled.mfa-confirm-btn,
.swal2-styled.mfa-cancel-btn {
  min-width: 160px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
}

.swal2-styled.mfa-cancel-btn {
  background: var(--danger) !important;
  color: white !important;
  border: 1px solid var(--danger) !important;
}
.swal2-styled.mfa-cancel-btn:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
}