/* ============================================================
   SweetAlert2 — InsightsLab theme
   ------------------------------------------------------------
   One central, modern look for every dialog in the app.
   Reuses the design tokens from main.css (:root / .dark-theme-
   variables) so popups match the cards and adapt to dark mode
   automatically. No per-call changes required.

   Each var() carries a fallback so the theme also renders
   correctly on pages that don't load main.css (e.g. login).
   ============================================================ */

/* ---------- Backdrop ---------- */
.swal2-container {
  padding: 1rem;
}

.swal2-container.swal2-backdrop-show {
  background: rgba(17, 30, 64, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ---------- Popup card ---------- */
.swal2-popup {
  font-family: "Poppins", sans-serif;
  background: var(--color-white, #fff);
  color: var(--color-dark, #363949);
  border: 1px solid var(--color-light, rgba(132, 169, 200, 0.18));
  border-radius: 1.5rem;
  padding: 2.25rem 2rem 1.75rem;
  box-shadow:
    0 24px 60px -12px rgba(17, 30, 136, 0.28),
    0 8px 24px -8px rgba(0, 0, 0, 0.18);
}

/* ---------- Title ---------- */
.swal2-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--color-dark, #363949);
  padding: 0.25rem 1rem 0;
}

/* ---------- Body text ---------- */
.swal2-html-container,
.swal2-content {
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-dark-variant, #677483);
  margin-top: 0.5rem;
}

/* Some dialogs (e.g. the push-notification status) drop raw text in a
   <pre>. Turn it into a soft, centered info chip instead of monospace. */
.swal2-html-container pre {
  font-family: "Poppins", "Segoe UI", sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  text-align: center !important;
  color: var(--color-dark-variant, #677483);
  background: var(--color-light, rgba(132, 169, 200, 0.18));
  border-radius: 0.85rem;
  padding: 0.85rem 1rem !important;
  margin: 0.4rem 0 0 !important;
  white-space: pre-wrap !important;
}

/* ---------- Action buttons ---------- */
.swal2-actions {
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.swal2-styled {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 0.8rem;
  padding: 0.7em 1.7em;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.swal2-styled:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -8px rgba(0, 0, 0, 0.4);
  filter: brightness(1.04);
}

.swal2-styled:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* On-brand focus ring (SweetAlert's default is a faded box-shadow). */
.swal2-styled:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(35, 166, 236, 0.35);
}

.swal2-styled.swal2-cancel:focus,
.swal2-styled.swal2-deny:focus {
  box-shadow: 0 0 0 3px rgba(125, 141, 161, 0.35);
}

/* ---------- Inputs ---------- */
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  color: var(--color-dark, #363949);
  background: var(--color-background, #f6f6f9);
  border: 1px solid var(--color-info-light, #dce1eb);
  border-radius: 0.7rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: var(--color-primary, #23A6EC);
  box-shadow: 0 0 0 3px rgba(35, 166, 236, 0.18);
}

.swal2-input::placeholder,
.swal2-textarea::placeholder {
  color: var(--color-placeholder, #777777);
}

.swal2-validation-message {
  font-family: "Poppins", sans-serif;
  background: rgba(248, 63, 63, 0.1);
  color: var(--color-danger, #f83f3f);
  border-radius: 0.6rem;
}

/* ---------- Close button ---------- */
.swal2-close {
  color: var(--color-info-dark, #7d8da1);
  transition: color 0.15s ease, transform 0.15s ease;
}
.swal2-close:hover {
  color: var(--color-danger, #f83f3f);
  transform: scale(1.06);
}

/* ---------- Loader / timer ---------- */
.swal2-loader {
  border-color: var(--color-primary, #23A6EC) transparent var(--color-primary, #23A6EC) transparent;
}
.swal2-timer-progress-bar {
  background: var(--color-primary, #23A6EC);
}

/* ============================================================
   Icons — recoloured to the app palette
   ============================================================ */
.swal2-icon.swal2-success {
  border-color: rgba(65, 241, 182, 0.4);
  color: #19b88a;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(65, 241, 182, 0.4);
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: #19b88a;
}
/* These arcs are coloured to match the popup so the check animates cleanly
   — must follow the surface colour (key for dark mode). */
.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal2-icon.swal2-success .swal2-success-fix {
  background-color: var(--color-white, #fff);
}

.swal2-icon.swal2-error {
  border-color: rgba(248, 63, 63, 0.3);
  color: var(--color-danger, #f83f3f);
}
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--color-danger, #f83f3f);
}

.swal2-icon.swal2-warning {
  border-color: rgba(255, 161, 85, 0.45);
  color: var(--color-warning, #ffa155);
}

.swal2-icon.swal2-info {
  border-color: rgba(35, 166, 236, 0.35);
  color: var(--color-primary, #23A6EC);
}

.swal2-icon.swal2-question {
  border-color: rgba(35, 166, 236, 0.35);
  color: var(--color-primary, #23A6EC);
}

/* ============================================================
   Dark mode tweaks (body.dark-theme-variables)
   Most colours flow from the tokens above; these handle the
   few values that are not dark-aware on their own.
   ============================================================ */
body.dark-theme-variables .swal2-popup {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, 0.6),
    0 8px 24px -8px rgba(0, 0, 0, 0.5);
}

body.dark-theme-variables .swal2-input,
body.dark-theme-variables .swal2-textarea,
body.dark-theme-variables .swal2-select,
body.dark-theme-variables .swal2-file {
  background: var(--color-background, #181a1e);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-theme-variables .swal2-html-container pre {
  background: rgba(255, 255, 255, 0.05);
}