/* =====================================================================
   ABS Vendor — SweetAlert2 theming (fintech-grade)
   Shared by login (auth.css) + dashboard (dashboard.css).
   Design system: Plus Jakarta Sans, 16/20px radii, layered shadows,
   #1D4ED8 primary, #10B981 success, #EF4444 error, #F59E0B warning.
   Class hooks stay identical — no JS changes required.
   ===================================================================== */

:root {
  --abs-font:
    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  --abs-ink: #0f172a;
  --abs-ink-2: #334155;
  --abs-muted: #64748b;
  --abs-line: #e2e8f0;
  --abs-line-soft: #f1f5f9;
  --abs-primary: #1d4ed8;
  --abs-primary-ink: #1e40af;
  --abs-success: #10b981;
  --abs-success-ink: #059669;
  --abs-danger: #ef4444;
  --abs-danger-ink: #dc2626;
  --abs-warn: #f59e0b;
  --abs-warn-ink: #d97706;
}

/* -- Backdrop ---------------------------------------------------------- */
.swal2-backdrop-show {
  background: rgba(2, 6, 23, 0.62) !important;
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
}

/* Toasts must never dim/blur the page behind them. */
.swal2-container:has(> .swal2-popup.swal2-toast),
.swal2-container.swal2-backdrop-show:has(> .swal2-popup.swal2-toast) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
  z-index: 99999 !important; /* sit above sticky navs / headers */
}
.swal2-container:has(> .swal2-popup.swal2-toast) > .swal2-popup.swal2-toast {
  pointer-events: auto !important;
}

/* =====================================================================
   Modal popup (center dialog)
   ===================================================================== */

.swal2-popup {
  font-family: var(--abs-font) !important;
  border-radius: 20px !important;
  padding: 32px 28px 24px !important;
  border: 1px solid var(--abs-line-soft) !important;
  background: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 56px -16px rgba(2, 6, 23, 0.28),
    0 6px 16px -4px rgba(2, 6, 23, 0.08) !important;
  animation: abs-pop-in 0.32s cubic-bezier(0.18, 1.2, 0.4, 1) !important;
}

@keyframes abs-pop-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* -- Title & content --------------------------------------------------- */
.swal2-title {
  font-family: var(--abs-font) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--abs-ink) !important;
  letter-spacing: -0.015em !important;
  padding: 6px 0 4px !important;
  line-height: 1.3 !important;
}

.swal2-html-container {
  font-family: var(--abs-font) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--abs-muted) !important;
  line-height: 1.55 !important;
  margin-top: 6px !important;
}

/* -- Icons: 3-layer halo (outer ring + tinted disc + mark) ------------ */
.swal2-icon {
  width: 72px !important;
  height: 72px !important;
  margin: 6px auto 18px !important;
  border: 0 !important;
  position: relative;
  overflow: visible !important;
}
/* Outer soft gradient halo */
.swal2-icon::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    currentColor 0%,
    transparent 65%
  );
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
}
/* Inner tinted disc */
.swal2-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.12;
  z-index: 0;
}
.swal2-icon .swal2-icon-content,
.swal2-icon [class^="swal2-"] {
  position: relative;
  z-index: 1;
}

.swal2-icon.swal2-success {
  color: var(--abs-success) !important;
  border-color: transparent !important;
  animation: abs-icon-pulse 1.8s ease-in-out 0.2s 1;
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--abs-success) !important;
  height: 4px !important;
  border-radius: 2px !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: transparent !important;
}
.swal2-icon.swal2-success [class^="swal2-success-circular-line"] {
  background: transparent !important;
}

.swal2-icon.swal2-error {
  color: var(--abs-danger) !important;
  border-color: transparent !important;
}
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--abs-danger) !important;
  height: 4px !important;
  border-radius: 2px !important;
}

.swal2-icon.swal2-warning {
  color: var(--abs-warn) !important;
  border-color: transparent !important;
}
.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
  color: var(--abs-primary) !important;
  border-color: transparent !important;
}

@keyframes abs-icon-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

/* -- Buttons ----------------------------------------------------------- */
.swal2-actions {
  gap: 10px !important;
  margin-top: 22px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}
.swal2-styled {
  border-radius: 12px !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  font-family: inherit !important;
  box-shadow: none !important;
  letter-spacing: -0.005em !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    filter 0.18s ease !important;
}
.swal2-styled:focus {
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.2) !important;
  outline: none !important;
}
.swal2-styled:active {
  transform: translateY(0) scale(0.98) !important;
}

.swal2-confirm {
  background: linear-gradient(
    180deg,
    #2563eb 0%,
    var(--abs-primary) 100%
  ) !important;
  color: #fff !important;
}
.swal2-confirm:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(29, 78, 216, 0.45) !important;
}

.swal2-deny {
  background: linear-gradient(
    180deg,
    #f87171 0%,
    var(--abs-danger) 100%
  ) !important;
  color: #fff !important;
}
.swal2-deny:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(239, 68, 68, 0.42) !important;
}

.swal2-cancel {
  background: var(--abs-line-soft) !important;
  color: var(--abs-ink-2) !important;
}
.swal2-cancel:hover {
  background: var(--abs-line) !important;
  color: var(--abs-ink) !important;
  transform: translateY(-1px);
}

/* Full-width stacked CTAs on mobile — fintech bottom-sheet feel */
@media (max-width: 520px) {
  /* Container: dock near bottom, bottom-sheet aesthetic */
  .swal2-container.swal2-center:not(:has(> .swal2-popup.swal2-toast)) {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .swal2-popup:not(.swal2-toast) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: 0 !important;
    animation: abs-sheet-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  .swal2-title {
    font-size: 18px !important;
    padding: 4px 0 2px !important;
  }
  .swal2-html-container {
    font-size: 14px !important;
  }
  .swal2-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 2px auto 14px !important;
  }
  .swal2-actions {
    flex-direction: column-reverse !important;
    margin-top: 18px !important;
  }
  .swal2-styled {
    width: 100% !important;
    margin: 0 !important;
    min-height: 48px !important; /* iOS/Android min tap target */
    padding: 13px 22px !important;
    font-size: 15px !important;
  }
  .swal2-input,
  .swal2-textarea,
  .swal2-select {
    min-height: 48px !important;
    font-size: 15px !important;
  }
  .swal2-close {
    width: 40px !important;
    height: 40px !important;
    top: 8px !important;
    right: 8px !important;
  }
}
@keyframes abs-sheet-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -- Inputs (prompt dialogs) ------------------------------------------ */
.swal2-input,
.swal2-textarea,
.swal2-select {
  border: 1.5px solid var(--abs-line) !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  color: var(--abs-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: var(--abs-primary) !important;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.14) !important;
}

.swal2-validation-message {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
}

/* -- Close button ------------------------------------------------------ */
.swal2-close {
  color: #94a3b8 !important;
  font-size: 26px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  top: 10px !important;
  right: 10px !important;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}
.swal2-close:hover {
  background: var(--abs-line-soft) !important;
  color: var(--abs-ink) !important;
  transform: rotate(90deg);
}

/* -- Loader ------------------------------------------------------------ */
.swal2-loader {
  border-color: var(--abs-primary) transparent var(--abs-primary) transparent !important;
  border-width: 3px !important;
}

/* =====================================================================
   Toast variant (Swal.fire({ toast: true, position: 'top-end', ... }))
   ===================================================================== */

/* Center toasts horizontally regardless of requested position. */
.swal2-container.swal2-top-end > .swal2-popup.swal2-toast,
.swal2-container.swal2-top > .swal2-popup.swal2-toast,
.swal2-container.swal2-top-start > .swal2-popup.swal2-toast {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: start !important;
}

@media (max-width: 640px) {
  .swal2-container.swal2-top-end > .swal2-popup.swal2-toast,
  .swal2-container.swal2-top-start > .swal2-popup.swal2-toast,
  .swal2-container.swal2-top > .swal2-popup.swal2-toast,
  .swal2-container.swal2-bottom-end > .swal2-popup.swal2-toast,
  .swal2-container.swal2-bottom-start > .swal2-popup.swal2-toast,
  .swal2-container.swal2-bottom > .swal2-popup.swal2-toast {
    width: auto !important;
    min-width: 220px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 14px 16px 14px 20px !important;
    gap: 12px;
    border-radius: 14px !important;
  }
  /* Slightly smaller icon on mobile so short messages don't look hollow */
  .swal2-popup.swal2-toast .swal2-icon {
    width: 2em !important;
    height: 2em !important;
    min-width: 2em !important;
    border-radius: 10px !important;
  }
  .swal2-popup.swal2-toast .swal2-icon::before,
  .swal2-popup.swal2-toast .swal2-icon::after {
    border-radius: 10px !important;
  }
  .swal2-popup.swal2-toast::before {
    width: 5px;
    border-radius: 14px 0 0 14px;
  }
  .swal2-popup.swal2-toast .swal2-title {
    font-size: 14.5px !important;
  }
}

.swal2-container.swal2-top > .swal2-popup.swal2-toast,
.swal2-container.swal2-top-start > .swal2-popup.swal2-toast,
.swal2-container.swal2-top-end > .swal2-popup.swal2-toast {
  margin-top: max(calc(16px + env(safe-area-inset-top, 0px)), 16px) !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
  margin-bottom: 16px !important;
}
.swal2-container.swal2-bottom > .swal2-popup.swal2-toast,
.swal2-container.swal2-bottom-start > .swal2-popup.swal2-toast,
.swal2-container.swal2-bottom-end > .swal2-popup.swal2-toast {
  margin: 16px 16px max(calc(16px + env(safe-area-inset-bottom, 0px)), 16px) !important;
}

@media (max-width: 640px) {
  .swal2-container.swal2-top > .swal2-popup.swal2-toast,
  .swal2-container.swal2-top-start > .swal2-popup.swal2-toast,
  .swal2-container.swal2-top-end > .swal2-popup.swal2-toast {
    margin-top: max(
      calc(20px + env(safe-area-inset-top, 0px)),
      64px
    ) !important;
  }
  .swal2-container.swal2-bottom > .swal2-popup.swal2-toast,
  .swal2-container.swal2-bottom-start > .swal2-popup.swal2-toast,
  .swal2-container.swal2-bottom-end > .swal2-popup.swal2-toast {
    margin-bottom: max(
      calc(20px + env(safe-area-inset-bottom, 0px)),
      64px
    ) !important;
  }
}

/* Toast surface — crisp card with bold colored accent bar (fintech hallmark). */
.swal2-popup.swal2-toast {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 16px 18px 16px 22px !important;
  gap: 14px;
  border: 1px solid var(--abs-line) !important;
  border-radius: 16px !important;
  box-shadow:
    0 20px 40px -12px rgba(2, 6, 23, 0.22),
    0 4px 12px -2px rgba(2, 6, 23, 0.08),
    0 0 0 1px rgba(15, 23, 42, 0.03) !important;
  -webkit-box-shadow:
    0 20px 40px -12px rgba(2, 6, 23, 0.22),
    0 4px 12px -2px rgba(2, 6, 23, 0.08),
    0 0 0 1px rgba(15, 23, 42, 0.03) !important;
  min-width: 300px;
  max-width: 460px;
  background: #ffffff !important;
  animation: abs-toast-in 0.34s cubic-bezier(0.22, 1.2, 0.36, 1);
  overflow: hidden !important;
}
/* Left accent bar — bold gradient colored by semantic type */
.swal2-popup.swal2-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--abs-muted), #94a3b8);
  border-radius: 16px 0 0 16px;
}
.swal2-popup.swal2-toast.swal2-icon-success::before {
  background: linear-gradient(180deg, #34d399 0%, var(--abs-success) 100%);
}
.swal2-popup.swal2-toast.swal2-icon-error::before {
  background: linear-gradient(180deg, #fb7185 0%, var(--abs-danger) 100%);
}
.swal2-popup.swal2-toast.swal2-icon-warning::before {
  background: linear-gradient(180deg, #fbbf24 0%, var(--abs-warn) 100%);
}
.swal2-popup.swal2-toast.swal2-icon-info::before {
  background: linear-gradient(180deg, #60a5fa 0%, var(--abs-primary) 100%);
}
.swal2-popup.swal2-toast.swal2-icon-question::before {
  background: linear-gradient(180deg, #60a5fa 0%, var(--abs-primary) 100%);
}

@keyframes abs-toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.swal2-popup.swal2-toast .swal2-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--abs-ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

.swal2-popup.swal2-toast .swal2-html-container {
  font-size: 13px !important;
  margin: 3px 0 0 !important;
  color: var(--abs-muted) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

/* Toast icon — rounded square badge with bold semantic gradient fill.
   Must stay in `em` (SwAl2 positions tick/x-mark lines in em).
   No color-mix() — hardcoded gradients for broad mobile browser support. */
.swal2-popup.swal2-toast .swal2-icon {
  width: 2.3em !important;
  height: 2.3em !important;
  min-width: 2.3em !important;
  margin: 0 !important;
  border-radius: 12px !important;
  flex-shrink: 0;
}
.swal2-popup.swal2-toast .swal2-icon::before {
  inset: 0 !important;
  border-radius: 12px !important;
  background: currentColor !important;
  opacity: 0.14 !important;
}
.swal2-popup.swal2-toast .swal2-icon::after {
  border-radius: 12px !important;
  opacity: 1 !important;
}
/* Per-semantic gradient fills — bold, on-brand */
.swal2-popup.swal2-toast .swal2-icon.swal2-success::after {
  background: linear-gradient(135deg, #6ee7b7 0%, var(--abs-success) 100%) !important;
  opacity: 0.22 !important;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error::after {
  background: linear-gradient(135deg, #fda4af 0%, var(--abs-danger) 100%) !important;
  opacity: 0.22 !important;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-warning::after {
  background: linear-gradient(135deg, #fcd34d 0%, var(--abs-warn) 100%) !important;
  opacity: 0.22 !important;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-info::after,
.swal2-popup.swal2-toast .swal2-icon.swal2-question::after {
  background: linear-gradient(135deg, #93c5fd 0%, var(--abs-primary) 100%) !important;
  opacity: 0.22 !important;
}
/* Bold, crisp tick / x-mark */
.swal2-popup.swal2-toast
  .swal2-icon.swal2-success
  [class^="swal2-success-line"] {
  background-color: var(--abs-success) !important;
  height: 0.22em !important;
  border-radius: 0.11em !important;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--abs-danger) !important;
  height: 0.22em !important;
  border-radius: 0.11em !important;
}

.swal2-popup.swal2-toast .swal2-close {
  font-size: 20px !important;
  width: 26px !important;
  height: 26px !important;
  color: #94a3b8 !important;
}
.swal2-popup.swal2-toast .swal2-close:hover {
  color: var(--abs-ink) !important;
  transform: none;
}

/* Timer progress bar — thin colored thread matching toast accent. */
.swal2-timer-progress-bar-container {
  height: 3px !important;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  background: var(--abs-line-soft) !important;
}
.swal2-timer-progress-bar {
  background: linear-gradient(90deg, var(--abs-primary), #60a5fa) !important;
}
.swal2-popup.swal2-toast.swal2-icon-success .swal2-timer-progress-bar {
  background: linear-gradient(90deg, var(--abs-success), #34d399) !important;
}
.swal2-popup.swal2-toast.swal2-icon-error .swal2-timer-progress-bar {
  background: linear-gradient(90deg, var(--abs-danger), #fb7185) !important;
}
.swal2-popup.swal2-toast.swal2-icon-warning .swal2-timer-progress-bar {
  background: linear-gradient(90deg, var(--abs-warn), #fbbf24) !important;
}