/*
 * ═══════════════════════════════════════════════════════════════
 *  sweetalert2-theme.k.css — NhaBex SweetAlert2 Theme Override
 *
 *  Alinha o SweetAlert2 (v11) ao design system da plataforma:
 *   · Tamanho compacto (360px vs 500px padrão)
 *   · Tokens --nb-* para cores, fonte, raios e sombras
 *   · Ícones reduzidos (52px vs 80px padrão)
 *   · Botões no estilo .btn da plataforma
 *   · Animação subtil (slide-down leve vs scale padrão)
 *   · Dark mode via [data-bs-theme="dark"]
 *
 *  Carregado em head.php APÓS sweetalert2.min.css.
 * ═══════════════════════════════════════════════════════════════
 */

/* ── 1. BACKDROP ──────────────────────────────────────────────── */

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}


/* ── 2. POPUP CONTAINER ───────────────────────────────────────── */

.swal2-popup {
  width: 360px !important;
  padding: 28px 24px 20px !important;
  border-radius: var(--nb-radius-lg) !important;
  border: 1px solid var(--nb-border) !important;
  box-shadow: var(--nb-shadow-md) !important;
  font-family: var(--nb-font) !important;
  background: var(--nb-bg-card) !important;
}

/* Animação de entrada: slide-down subtil */
@keyframes nb-swal-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes nb-swal-out {
  from { opacity: 1; transform: translateY(0)     scale(1); }
  to   { opacity: 0; transform: translateY(-6px)  scale(0.98); }
}

.swal2-show  { animation: nb-swal-in  0.22s cubic-bezier(0.22,1,0.36,1) both !important; }
.swal2-hide  { animation: nb-swal-out 0.16s ease-in both !important; }


/* ── 3. ÍCONE ─────────────────────────────────────────────────── */

.swal2-icon {
  width:  52px !important;
  height: 52px !important;
  margin: 0 auto 18px !important;
  border-width: 3px !important;
  font-size: 1.4rem !important;
}

.swal2-icon .swal2-icon-content {
  font-size: 1.6rem !important;
  line-height: 1 !important;
}

/* Success */
.swal2-icon.swal2-success {
  border-color: var(--nb-green) !important;
  color: var(--nb-green) !important;
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--nb-green) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--nb-green-10) !important;
}
.swal2-icon.swal2-success .swal2-success-fix {
  background-color: var(--nb-bg-card) !important;
}

/* Warning */
.swal2-icon.swal2-warning {
  border-color: var(--nb-orange) !important;
  color: var(--nb-orange) !important;
}

/* Error */
.swal2-icon.swal2-error {
  border-color: var(--nb-red) !important;
  color: var(--nb-red) !important;
}
.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
  background-color: var(--nb-red) !important;
}

/* Info */
.swal2-icon.swal2-info {
  border-color: var(--nb-blue) !important;
  color: var(--nb-blue) !important;
}

/* Question */
.swal2-icon.swal2-question {
  border-color: var(--nb-text-muted) !important;
  color: var(--nb-text-muted) !important;
}


/* ── 4. TÍTULO ────────────────────────────────────────────────── */

.swal2-title {
  font-size: var(--nb-fs-lg) !important;
  font-weight: var(--nb-fw-semibold) !important;
  color: var(--nb-dark) !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}


/* ── 5. CORPO / HTML CONTAINER ────────────────────────────────── */

.swal2-html-container {
  font-size: var(--nb-fs-base) !important;
  color: var(--nb-text-muted) !important;
  font-weight: var(--nb-fw-regular) !important;
  line-height: 1.5 !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  text-align: center !important;
}

.swal2-popup:not(.swal2-icon-shown) .swal2-title {
  margin-top: 0 !important;
}


/* ── 6. ACTIONS (área dos botões) ─────────────────────────────── */

.swal2-actions {
  margin: 20px 0 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
}

.swal2-actions:not(.swal2-loading) .swal2-styled:focus {
  box-shadow: 0 0 0 3px var(--nb-green-10) !important;
}


/* ── 7. BOTÕES ────────────────────────────────────────────────── */

.swal2-styled {
  font-family: var(--nb-font) !important;
  font-size: 0.8125rem !important;
  font-weight: var(--nb-fw-semibold) !important;
  padding: 7px 20px !important;
  border-radius: var(--nb-radius) !important;
  border: none !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease,
              transform 0.12s ease !important;
  min-width: 88px !important;
  cursor: pointer !important;
}

.swal2-styled:active {
  transform: scale(0.97) !important;
}

/* Confirm */
.swal2-confirm {
  background-color: var(--nb-green) !important;
  color: #fff !important;
}
.swal2-confirm:hover {
  background-color: var(--nb-green-dark) !important;
  box-shadow: 0 0 0 3px var(--nb-green-10) !important;
}

/* Cancel */
.swal2-cancel {
  background-color: var(--nb-bg-card) !important;
  color: var(--nb-text) !important;
  border: 1px solid var(--nb-border) !important;
  box-shadow: none !important;
}
.swal2-cancel:hover {
  background-color: var(--nb-bg-hover) !important;
  border-color: var(--nb-text-light) !important;
  color: var(--nb-dark) !important;
}

/* Deny */
.swal2-deny {
  background-color: var(--nb-red) !important;
  color: #fff !important;
}
.swal2-deny:hover {
  background-color: var(--nb-red-dark) !important;
}


/* ── 8. LOADING SPINNER ───────────────────────────────────────── */

.swal2-loader {
  width: 28px !important;
  height: 28px !important;
  border-color: var(--nb-green) transparent var(--nb-green) transparent !important;
  border-width: 3px !important;
}


/* ── 9. CLOSE BUTTON ──────────────────────────────────────────── */

.swal2-close {
  width: 28px !important;
  height: 28px !important;
  font-size: 1.1rem !important;
  color: var(--nb-text-light) !important;
  top: 12px !important;
  right: 12px !important;
  border-radius: 6px !important;
  transition: background 0.15s, color 0.15s !important;
}
.swal2-close:hover {
  background: var(--nb-bg-hover) !important;
  color: var(--nb-text) !important;
}


/* ── 10. TOAST MODE ───────────────────────────────────────────── */

.swal2-toast {
  padding: 10px 16px !important;
  box-shadow: var(--nb-shadow) !important;
  border-radius: var(--nb-radius) !important;
  gap: 10px !important;
}
.swal2-toast .swal2-title {
  font-size: var(--nb-fs-base) !important;
  margin: 0 !important;
  text-align: left !important;
}
.swal2-toast .swal2-icon {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border-width: 2px !important;
  font-size: 0.7rem !important;
}
.swal2-toast .swal2-icon .swal2-icon-content {
  font-size: 0.9rem !important;
}


/* ── 11. TIMER PROGRESS BAR ───────────────────────────────────── */

.swal2-timer-progress-bar {
  background: var(--nb-green-10) !important;
  height: 3px !important;
}


/* ── 12. INPUT INSIDE SWAL ────────────────────────────────────── */

.swal2-input,
.swal2-textarea,
.swal2-select {
  font-size: var(--nb-fs-base) !important;
  color: var(--nb-text) !important;
  border: 1px solid var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  background-color: var(--nb-bg-card) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: var(--nb-green) !important;
  box-shadow: 0 0 0 3px var(--nb-green-10) !important;
  outline: none !important;
}


/* ── 13. FOOTER ───────────────────────────────────────────────── */

.swal2-footer {
  font-size: var(--nb-fs-sm) !important;
  color: var(--nb-text-light) !important;
  border-top-color: var(--nb-border) !important;
  margin: 12px 0 0 !important;
  padding: 12px 0 0 !important;
}


/* ── 14. RESPONSIVO ───────────────────────────────────────────── */

@media (max-width: 420px) {
  .swal2-popup {
    width: calc(100vw - 32px) !important;
    padding: 20px 16px 16px !important;
  }
  .swal2-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .swal2-styled {
    width: 100% !important;
    min-width: unset !important;
  }
}


/* ── 15. DARK MODE ────────────────────────────────────────────── */

[data-bs-theme="dark"] .swal2-container.swal2-backdrop-show,
[data-bs-theme="dark"] .swal2-container.swal2-noanimation {
  background: rgba(0, 0, 0, 0.6);
}

[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select {
  background-color: var(--nb-bg) !important;
}