/*
 * ═══════════════════════════════════════════════════════════════════
 *  NhaBex App v3 — SweetAlert2 Material Design 3 Theme
 *  app/assets/css/swal2-md3.css
 *
 *  Overrides SweetAlert2 defaults to match the app's MD3 design
 *  system: tokens, shape, elevation, typography, motion, colors.
 *  Full dark-mode support via CSS variables.
 *
 *  Works with buttonsStyling: true (SweetAlert2 default).
 *  The .swal2-styled class must be present on buttons for
 *  these selectors to apply. No custom button colors are
 *  passed, so SweetAlert2 does not inject inline styles.
 *
 *  Loaded AFTER SweetAlert2's default CSS.
 * ═══════════════════════════════════════════════════════════════════
 */

/* ── Backdrop / Scrim ── */
.swal2-container {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: var(--md-sys-color-scrim) !important;
}

/* ── Popup Container (Dialog surface) ── */
.swal2-popup {
  font-family: var(--md-sys-typescale-font) !important;
  background: var(--md-sys-color-surface-container-lowest) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-radius: var(--md-sys-shape-extra-large) !important;
  box-shadow: var(--md-sys-elevation-3) !important;
  padding: 28px 24px 20px !important;
  max-width: 380px;
  width: calc(100vw - 48px);
  border: none !important;
  animation: swalMd3In var(--md-sys-motion-duration-medium-2) var(--md-sys-motion-easing-emphasized-decel) both;
}

/* ── Entry animation ── */
@keyframes swalMd3In {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Exit animation ── */
@keyframes swalMd3Out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
}
.swal-md3-hide {
  animation: swalMd3Out var(--md-sys-motion-duration-short-4, 200ms) var(--md-sys-motion-easing-emphasized-accel, cubic-bezier(0.3, 0, 0.8, 0.15)) both !important;
}

/* ── Title ── */
.swal2-popup .swal2-title {
  font-family: var(--md-sys-typescale-font) !important;
  font-size: var(--md-sys-typescale-title-large-size) !important;
  font-weight: 400 !important;
  line-height: var(--md-sys-typescale-title-large-height) !important;
  color: var(--md-sys-color-on-surface) !important;
  padding: 0 0 4px !important;
  margin: 0 !important;
}

/* ── Body text ── */
.swal2-popup .swal2-html-container {
  font-family: var(--md-sys-typescale-font) !important;
  font-size: var(--md-sys-typescale-body-medium-size) !important;
  font-weight: var(--md-sys-typescale-body-medium-weight) !important;
  line-height: var(--md-sys-typescale-body-medium-height) !important;
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant) !important;
  padding: 4px 0 0 !important;
  margin: 0 !important;
}

/* ── Icons ─────────────────────────────────────────────── */
.swal2-popup .swal2-icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 16px !important;
  border-width: 3px !important;
}
.swal2-popup .swal2-icon .swal2-icon-content {
  font-size: 2rem !important;
}

/* Success */
.swal2-popup .swal2-icon.swal2-success {
  border-color: var(--md-sys-color-success) !important;
  color: var(--md-sys-color-success) !important;
}
.swal2-popup .swal2-icon.swal2-success [class^=swal2-success-line] {
  background-color: var(--md-sys-color-success) !important;
}
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--md-sys-color-success-container) !important;
}

/* Error */
.swal2-popup .swal2-icon.swal2-error {
  border-color: var(--md-sys-color-error) !important;
  color: var(--md-sys-color-error) !important;
}
.swal2-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  background-color: var(--md-sys-color-error) !important;
}

/* Warning */
.swal2-popup .swal2-icon.swal2-warning {
  border-color: var(--md-sys-color-warning) !important;
  color: var(--md-sys-color-warning) !important;
}

/* Info */
.swal2-popup .swal2-icon.swal2-info {
  border-color: var(--md-sys-color-tertiary) !important;
  color: var(--md-sys-color-tertiary) !important;
}

/* Question */
.swal2-popup .swal2-icon.swal2-question {
  border-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-primary) !important;
}

/* ── Buttons ── Actions container ── */
.swal2-popup .swal2-actions {
  gap: 12px !important;
  padding: 8px 0 0 !important;
  margin: 16px 0 0 !important;
}

/* ── Shared button base (MD3 pill) ──
 *  buttonsStyling: false means Swal does NOT inject inline colors.
 *  We provide ALL button styling via CSS. */
.swal2-popup .swal2-styled {
  font-family: var(--md-sys-typescale-font) !important;
  font-size: var(--md-sys-typescale-label-large-size) !important;
  font-weight: var(--md-sys-typescale-label-large-weight) !important;
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-height);
  height: 40px;
  min-width: 100px;
  padding: 0 24px !important;
  border-radius: var(--md-sys-shape-full) !important;
  border: none !important;
  cursor: pointer;
  transition:
    background-color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard),
    opacity var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}
.swal2-popup .swal2-styled:focus {
  box-shadow: none !important;
  outline: 2px solid var(--md-sys-color-primary) !important;
  outline-offset: 2px;
}
.swal2-popup .swal2-styled:active {
  transform: scale(0.97);
}

/* ── Confirm button (Filled — primary) ── */
.swal2-popup .swal2-styled.swal2-confirm {
  background-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
}
.swal2-popup .swal2-styled.swal2-confirm:hover {
  box-shadow: var(--md-sys-elevation-1) !important;
  filter: brightness(0.92);
}

/* ── Danger confirm (destructive actions) ── */
.swal2-popup .swal2-styled.swal2-btn-danger {
  background-color: var(--md-sys-color-error) !important;
  color: var(--md-sys-color-on-error) !important;
}
.swal2-popup .swal2-styled.swal2-btn-danger:hover {
  box-shadow: var(--md-sys-elevation-1) !important;
  filter: brightness(0.92);
}
.swal2-popup .swal2-styled.swal2-btn-danger:focus {
  outline-color: var(--md-sys-color-error) !important;
}

/* ── Cancel button (Outlined) ── */
.swal2-popup .swal2-styled.swal2-cancel {
  background-color: transparent !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
}
.swal2-popup .swal2-styled.swal2-cancel:hover {
  background-color: var(--md-sys-color-surface-container-high) !important;
}
.swal2-popup .swal2-styled.swal2-cancel:focus {
  outline-color: var(--md-sys-color-on-surface-variant) !important;
}

/* ── Deny button ── */
.swal2-popup .swal2-styled.swal2-deny {
  background-color: var(--md-sys-color-error-container) !important;
  color: var(--md-sys-color-on-error-container) !important;
}
.swal2-popup .swal2-styled.swal2-deny:hover {
  box-shadow: var(--md-sys-elevation-1) !important;
}

/* ── Close button ── */
.swal2-popup .swal2-close {
  color: var(--md-sys-color-on-surface-variant) !important;
  font-size: 1.25rem;
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-full);
  transition: background-color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
  top: 12px;
  right: 12px;
}
.swal2-popup .swal2-close:hover {
  color: var(--md-sys-color-on-surface) !important;
  background-color: var(--md-sys-color-surface-container-high);
}

/* ── Input fields ── */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
  font-family: var(--md-sys-typescale-font) !important;
  font-size: var(--md-sys-typescale-body-large-size) !important;
  color: var(--md-sys-color-on-surface) !important;
  background-color: transparent !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  border-radius: var(--md-sys-shape-small) !important;
  padding: 12px 16px !important;
  margin: 12px 0 4px !important;
  transition:
    border-color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
  box-shadow: none !important;
}
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup .swal2-select:focus {
  border-color: var(--md-sys-color-primary) !important;
  box-shadow: 0 0 0 1px var(--md-sys-color-primary) !important;
  outline: none !important;
}
.swal2-popup .swal2-input::placeholder,
.swal2-popup .swal2-textarea::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.7;
}

/* ── Input label ── */
.swal2-popup .swal2-input-label {
  font-size: var(--md-sys-typescale-body-small-size) !important;
  font-weight: var(--md-sys-typescale-label-medium-weight);
  color: var(--md-sys-color-on-surface-variant) !important;
  margin: 8px 0 0;
}

/* ── Textarea ── */
.swal2-popup .swal2-textarea {
  min-height: 80px;
  resize: vertical;
}

/* ── Validation message ── */
.swal2-popup .swal2-validation-message {
  background-color: var(--md-sys-color-error-container) !important;
  color: var(--md-sys-color-on-error-container) !important;
  border-radius: var(--md-sys-shape-small);
  font-size: var(--md-sys-typescale-body-small-size) !important;
  padding: 8px 16px !important;
  margin: 4px 0 0 !important;
  border: none !important;
}
.swal2-popup .swal2-validation-message::before {
  color: var(--md-sys-color-error) !important;
}

/* ── Footer ── */
.swal2-popup .swal2-footer {
  border-top: 1px solid var(--md-sys-color-outline-variant) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  font-size: var(--md-sys-typescale-body-small-size);
  padding: 12px 0 0;
  margin: 16px 0 0;
}

/* ── Toast variant ── */
.swal2-popup.swal2-toast {
  background: var(--md-sys-color-inverse-surface) !important;
  color: var(--md-sys-color-inverse-on-surface) !important;
  border-radius: var(--md-sys-shape-medium) !important;
  padding: 12px 16px !important;
  box-shadow: var(--md-sys-elevation-2) !important;
  max-width: 420px;
}
.swal2-popup.swal2-toast .swal2-title {
  color: var(--md-sys-color-inverse-on-surface) !important;
  font-size: var(--md-sys-typescale-body-medium-size) !important;
  font-weight: var(--md-sys-typescale-body-medium-weight) !important;
}

/* ── Timer progress bar ── */
.swal2-popup .swal2-timer-progress-bar {
  background: var(--md-sys-color-primary) !important;
  height: 3px;
  border-radius: 0 0 var(--md-sys-shape-extra-large) var(--md-sys-shape-extra-large);
}

/* ── Loading spinner ── */
.swal2-popup.swal2-loading .swal2-styled.swal2-confirm {
  border-color: var(--md-sys-color-primary) transparent transparent transparent !important;
}

/* ── Image ── */
.swal2-popup .swal2-image {
  border-radius: var(--md-sys-shape-medium);
  margin: 0 auto 16px;
}

/* ── Custom star rating inside Swal ── */
.swal2-popup #swal-stars {
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.swal2-popup #swal-stars span {
  color: var(--md-sys-color-outline-variant);
  transition: color var(--md-sys-motion-duration-short-3) var(--md-sys-motion-easing-standard),
              transform var(--md-sys-motion-duration-short-3) var(--md-sys-motion-easing-standard);
}
.swal2-popup #swal-stars span:hover {
  transform: scale(1.2);
}
.swal2-popup #swal-stars span.active {
  color: var(--md-sys-color-warning) !important;
}

/* ── Responsive: full-width buttons on small screens ── */
@media (max-width: 400px) {
  .swal2-popup .swal2-actions {
    flex-direction: column-reverse !important;
    width: 100% !important;
  }
  .swal2-popup .swal2-styled {
    width: 100% !important;
    margin: 0 !important;
  }
}