/*
 * SweetAlert2 in AppyMenu's look: every popup, alert, confirmation, loader
 * and toast. Loaded after nothing in particular: the selectors out-rank
 * SweetAlert's own (:where()-wrapped) rules.
 *
 * A popup's own button colour (confirmButtonColor, set inline) still wins:
 * red for destructive actions, green for restoring ones. Without one, the
 * primary button is the brand red. Cancel is always the outlined secondary
 * button, whatever colour a caller passed, so every dialog pairs the same way.
 */

/* ── The popup ─────────────────────────────────────────────────────────── */

/* SweetAlert's own defaults live on :root (purple); these are nearer to the
   buttons, and a caller's colour, set on the button itself, is nearer still. */
.swal2-container {
  --swal2-confirm-button-background-color: #E7000B;
  --swal2-outline: 0 0 0 3px rgba(231, 0, 11, 0.3);
}

.swal2-container.swal2-backdrop-show {
  background: rgba(17, 24, 39, 0.45);
}

.swal2-container .swal2-popup:not(.swal2-toast) {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.75rem 1.5rem 1.5rem;
  font-family: inherit;
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 20px 45px -12px rgba(17, 24, 39, 0.25);
}

.swal2-container .swal2-popup .swal2-title {
  padding: 0.25rem 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: #111827;
}

.swal2-container .swal2-popup .swal2-html-container {
  margin: 0.5rem 0.5rem 0;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.375rem;
  color: #4b5563;
}

.swal2-container .swal2-popup .swal2-close {
  color: #9ca3af;
  border-radius: 10px;
  transition: color 150ms, background-color 150ms;
}

.swal2-container .swal2-popup .swal2-close:hover {
  color: #E7000B;
  background: rgba(231, 0, 11, 0.06);
}

.swal2-container .swal2-popup .swal2-close:focus-visible {
  box-shadow: 0 0 0 3px rgba(231, 0, 11, 0.3);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.swal2-container .swal2-popup .swal2-actions {
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.swal2-container .swal2-popup .swal2-styled {
  min-width: 6rem;
  margin: 0;
  padding: 0.625rem 1.25rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  border-radius: 12px;
  box-shadow: none;
  transition: background-color 150ms, border-color 150ms, filter 150ms, box-shadow 150ms;
}

/* A caller's confirmButtonColor arrives as this variable on the button. */
.swal2-container .swal2-popup .swal2-styled.swal2-confirm {
  color: #ffffff;
  background-color: var(--swal2-confirm-button-background-color, #E7000B);
  border: 1px solid transparent;
}

.swal2-container .swal2-popup .swal2-styled.swal2-confirm:hover {
  background-image: none;
  filter: brightness(0.92);
}

.swal2-container .swal2-popup .swal2-styled.swal2-deny {
  color: #E7000B !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(231, 0, 11, 0.35) !important;
}

.swal2-container .swal2-popup .swal2-styled.swal2-deny:hover {
  background-image: none;
  background-color: rgba(231, 0, 11, 0.06) !important;
}

.swal2-container .swal2-popup .swal2-styled.swal2-cancel {
  color: #111827 !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
}

.swal2-container .swal2-popup .swal2-styled.swal2-cancel:hover {
  background-image: none;
  background-color: #f9fafb !important;
}

/* Focus: on a white button a red border and ring; on a red (coloured)
   button a white ring, edged in the button's colour so it shows on white. */
.swal2-container .swal2-popup .swal2-styled:focus,
.swal2-container .swal2-popup .swal2-styled:focus-visible {
  outline: none;
}

.swal2-container .swal2-popup .swal2-styled.swal2-confirm:focus,
.swal2-container .swal2-popup .swal2-styled.swal2-confirm:focus-visible {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--swal2-confirm-button-background-color, #E7000B);
}

.swal2-container .swal2-popup .swal2-styled.swal2-cancel:focus,
.swal2-container .swal2-popup .swal2-styled.swal2-cancel:focus-visible,
.swal2-container .swal2-popup .swal2-styled.swal2-deny:focus,
.swal2-container .swal2-popup .swal2-styled.swal2-deny:focus-visible {
  border-color: #E7000B !important;
  box-shadow: 0 0 0 3px rgba(231, 0, 11, 0.25);
}

.swal2-container .swal2-popup .swal2-styled:disabled {
  opacity: 0.5;
}

.swal2-container .swal2-popup .swal2-loader {
  width: 1.75rem;
  height: 1.75rem;
  border-color: #E7000B transparent #E7000B transparent;
}

.swal2-container .swal2-popup .swal2-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  font-size: 0.8125rem;
  color: #6b7280;
  border-top-color: #f0f0f0;
}

/* ── Icons: the brand red for errors, softer amber for warnings ────────── */

.swal2-container .swal2-popup .swal2-icon {
  margin: 0.25rem auto 1rem;
  border-width: 0.2em;
}

.swal2-container .swal2-popup .swal2-icon.swal2-warning {
  color: #f59e0b;
  border-color: #fcd34d;
}

.swal2-container .swal2-popup .swal2-icon.swal2-error {
  border-color: rgba(231, 0, 11, 0.45);
}

.swal2-container .swal2-popup .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: #E7000B;
}

.swal2-container .swal2-popup .swal2-icon.swal2-success {
  border-color: #16a34a;
  color: #16a34a;
}

.swal2-container .swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(22, 163, 74, 0.25);
}

.swal2-container .swal2-popup .swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: #16a34a;
}

.swal2-container .swal2-popup .swal2-icon.swal2-info,
.swal2-container .swal2-popup .swal2-icon.swal2-question {
  color: #6b7280;
  border-color: #d1d5db;
}

/* ── Inputs inside a popup ─────────────────────────────────────────────── */

.swal2-container .swal2-popup .swal2-input,
.swal2-container .swal2-popup .swal2-textarea,
.swal2-container .swal2-popup .swal2-select,
.swal2-container .swal2-popup .swal2-file {
  margin: 1rem auto 0;
  font-family: inherit;
  font-size: 0.875rem;
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: none;
}

.swal2-container .swal2-popup .swal2-input {
  height: 2.75rem;
  padding: 0 0.875rem;
}

.swal2-container .swal2-popup .swal2-input:focus,
.swal2-container .swal2-popup .swal2-textarea:focus,
.swal2-container .swal2-popup .swal2-select:focus {
  border-color: #E7000B;
  box-shadow: 0 0 0 3px rgba(231, 0, 11, 0.15);
  outline: none;
}

.swal2-container .swal2-popup .swal2-input-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
}

.swal2-container .swal2-popup .swal2-validation-message {
  margin: 1rem 0 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  color: #b91c1c;
  background: rgba(231, 0, 11, 0.06);
  border-radius: 10px;
}

.swal2-container .swal2-popup .swal2-validation-message::before {
  background-color: #E7000B;
}

.swal2-container .swal2-popup .swal2-checkbox input,
.swal2-container .swal2-popup .swal2-radio input {
  accent-color: #E7000B;
}

.swal2-container .swal2-popup .swal2-timer-progress-bar {
  background: rgba(231, 0, 11, 0.45);
}

/* ── Toasts ────────────────────────────────────────────────────────────── */

.swal2-container .swal2-popup.swal2-toast {
  padding: 0.75rem 1rem;
  font-family: inherit;
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 30px -10px rgba(17, 24, 39, 0.3);
}

.swal2-container .swal2-popup.swal2-toast .swal2-title {
  margin: 0 0.5rem;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.swal2-container .swal2-popup.swal2-toast .swal2-html-container {
  margin: 0.25rem 0.5rem 0;
  font-size: 0.8125rem;
}

.swal2-container .swal2-popup.swal2-toast .swal2-icon {
  margin: 0 0.25rem 0 0;
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */

.dark .swal2-container .swal2-popup:not(.swal2-toast),
.dark .swal2-container .swal2-popup.swal2-toast {
  color: #f3f4f6;
  background: #1f2937;
  border-color: #374151;
}

.dark .swal2-container .swal2-popup .swal2-title {
  color: #f9fafb;
}

.dark .swal2-container .swal2-popup .swal2-html-container,
.dark .swal2-container .swal2-popup .swal2-footer {
  color: #d1d5db;
  border-top-color: #374151;
}

.dark .swal2-container .swal2-popup .swal2-styled.swal2-cancel {
  color: #f3f4f6 !important;
  background-color: rgb(255 255 255 / 6%) !important;
  border-color: #4b5563 !important;
}

.dark .swal2-container .swal2-popup .swal2-styled.swal2-cancel:hover {
  background-color: rgb(255 255 255 / 10%) !important;
}

.dark .swal2-container .swal2-popup .swal2-styled.swal2-confirm:focus,
.dark .swal2-container .swal2-popup .swal2-styled.swal2-confirm:focus-visible {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--swal2-confirm-button-background-color, #E7000B);
}

.dark .swal2-container .swal2-popup .swal2-styled.swal2-deny {
  color: #fca5a5 !important;
  background-color: rgb(255 255 255 / 6%) !important;
}

.dark .swal2-container .swal2-popup .swal2-input,
.dark .swal2-container .swal2-popup .swal2-textarea,
.dark .swal2-container .swal2-popup .swal2-select {
  color: #f3f4f6;
  background: rgb(255 255 255 / 6%);
  border-color: #4b5563;
}

.dark .swal2-container .swal2-popup .swal2-input-label {
  color: #d1d5db;
}

.dark .swal2-container .swal2-popup .swal2-validation-message {
  color: #fca5a5;
  background: rgb(220 38 38 / 15%);
}

.dark .swal2-container .swal2-popup .swal2-icon.swal2-success .swal2-success-circular-line-left,
.dark .swal2-container .swal2-popup .swal2-icon.swal2-success .swal2-success-circular-line-right,
.dark .swal2-container .swal2-popup .swal2-icon.swal2-success .swal2-success-fix {
  background-color: #1f2937 !important;
}