.swal2-popup.common-swal-popup {
  width: min(430px, calc(100vw - 30px)) !important;
  padding: 24px !important;
  background: var(--hrms-card) !important;
  border: 1px solid var(--hrms-border) !important;
  border-radius: var(--hrms-radius) !important;
  color: var(--hrms-text) !important;
  box-shadow: var(--hrms-shadow-modal) !important;
}

.swal2-popup.common-swal-popup .swal2-icon.common-swal-icon {
  margin: 8px auto 18px !important;
}

.swal2-popup.common-swal-popup .swal2-icon.common-swal-icon.swal2-warning,
.swal2-popup.common-swal-popup .swal2-icon.common-swal-icon.swal2-info {
  border-color: color-mix(in srgb, var(--hrms-primary) 58%, transparent) !important;
  color: var(--hrms-primary) !important;
}

.swal2-popup.common-swal-popup .swal2-icon.common-swal-icon.swal2-success {
  border-color: color-mix(in srgb, var(--hrms-primary) 58%, transparent) !important;
}

.swal2-popup.common-swal-popup .swal2-icon.common-swal-icon.swal2-success [class^='swal2-success-line'],
.swal2-popup.common-swal-popup .swal2-icon.common-swal-icon.swal2-success .swal2-success-ring {
  border-color: var(--hrms-primary) !important;
}

.common-swal-title {
  color: var(--hrms-text) !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  padding: 0 !important;
}

.common-swal-html {
  color: var(--hrms-muted) !important;
  font-size: .94rem !important;
  line-height: 1.5 !important;
  margin: 12px 0 0 !important;
}

.common-swal-actions {
  gap: 10px !important;
  margin: 22px 0 0 !important;
}

.common-swal-confirm,
.common-swal-cancel {
  border-radius: var(--hrms-radius-sm) !important;
  box-shadow: none !important;
  font-size: .86rem !important;
  font-weight: 800 !important;
  min-height: 38px !important;
  min-width: 112px !important;
  padding: 8px 18px !important;
}

.common-swal-confirm {
  background: var(--hrms-primary) !important;
  border: 1px solid var(--hrms-primary) !important;
  color: var(--hrms-primary-fg) !important;
}

.common-swal-confirm:hover,
.common-swal-confirm:focus {
  background: var(--hrms-primary-strong) !important;
  border-color: var(--hrms-primary-strong) !important;
  color: var(--hrms-primary-fg) !important;
}

.common-swal-cancel {
  background: var(--hrms-card-alt) !important;
  border: 1px solid var(--hrms-border) !important;
  color: var(--hrms-text) !important;
}

.common-swal-cancel:hover,
.common-swal-cancel:focus {
  background: var(--hrms-hover) !important;
  border-color: color-mix(in srgb, var(--hrms-primary) 42%, var(--hrms-border)) !important;
  color: var(--hrms-text) !important;
}

.common-swal-confirm:focus,
.common-swal-cancel:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--hrms-primary-muted) !important;
}

.swal-modal.common-swal-v1 {
  background: var(--hrms-card);
  border: 1px solid var(--hrms-border);
  border-radius: var(--hrms-radius);
  box-shadow: var(--hrms-shadow-modal);
  color: var(--hrms-text);
}

.swal-modal.common-swal-v1 .swal-title,
.swal-modal.common-swal-v1 .swal-text {
  color: var(--hrms-text);
}

.swal-modal.common-swal-v1 .swal-text {
  color: var(--hrms-muted);
  text-align: center;
}

.swal-modal.common-swal-v1 .swal-footer {
  text-align: center;
}

.swal-modal.common-swal-v1 .swal-button {
  border-radius: var(--hrms-radius-sm);
  box-shadow: none !important;
  font-weight: 800;
}

.swal-modal.common-swal-v1 .swal-button--confirm {
  background: var(--hrms-primary);
  color: var(--hrms-primary-fg);
}

.swal-modal.common-swal-v1 .swal-button--confirm:hover {
  background: var(--hrms-primary-strong) !important;
}

.swal-modal.common-swal-v1 .swal-button--cancel {
  background: var(--hrms-card-alt);
  border: 1px solid var(--hrms-border);
  color: var(--hrms-text);
}

.swal-modal.common-swal-v1 .swal-button--cancel:hover {
  background: var(--hrms-hover) !important;
}

/* ── Global light-mode override for ALL SweetAlert2 popups ──
   SweetAlert2 follows prefers-color-scheme, so it shows dark even
   when the HRMS app is in light mode. These rules force the popup
   to match the app theme regardless of OS setting.
   ---------------------------------------------------------- */

/* Light mode */
html:not(.hrms-dark) .swal2-popup {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 36px rgba(0,0,0,.10) !important;
}

html:not(.hrms-dark) .swal2-title {
  color: #111111 !important;
}

html:not(.hrms-dark) .swal2-html-container,
html:not(.hrms-dark) .swal2-content {
  color: #6b7280 !important;
}

html:not(.hrms-dark) .swal2-input,
html:not(.hrms-dark) .swal2-textarea,
html:not(.hrms-dark) .swal2-select,
html:not(.hrms-dark) .swal2-file {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #111111 !important;
  color-scheme: light;
}

html:not(.hrms-dark) .swal2-input::placeholder,
html:not(.hrms-dark) .swal2-textarea::placeholder {
  color: #9ca3af !important;
}

html:not(.hrms-dark) .swal2-input:focus,
html:not(.hrms-dark) .swal2-textarea:focus {
  border-color: rgba(34,197,94,.65) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.13) !important;
}

html:not(.hrms-dark) .swal2-validation-message {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

html:not(.hrms-dark) .swal2-confirm {
  background: var(--hrms-primary, #22c55e) !important;
  border-color: var(--hrms-primary, #22c55e) !important;
  color: var(--hrms-primary-fg, #ffffff) !important;
}

html:not(.hrms-dark) .swal2-confirm:hover,
html:not(.hrms-dark) .swal2-confirm:focus {
  background: var(--hrms-primary-strong, #16a34a) !important;
  border-color: var(--hrms-primary-strong, #16a34a) !important;
}

html:not(.hrms-dark) .swal2-cancel {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
}

html:not(.hrms-dark) .swal2-cancel:hover,
html:not(.hrms-dark) .swal2-cancel:focus {
  background: #e5e7eb !important;
  border-color: rgba(34,197,94,.4) !important;
}

html:not(.hrms-dark) .swal2-deny {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

html:not(.hrms-dark) .swal2-close {
  color: #6b7280 !important;
}

html:not(.hrms-dark) .swal2-close:hover {
  color: #111111 !important;
}

/* SweetAlert v1 (sweetalert.min.js) light mode */
html:not(.hrms-dark) .swal-modal {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

html:not(.hrms-dark) .swal-title,
html:not(.hrms-dark) .swal-text {
  color: #111111 !important;
}

html:not(.hrms-dark) .swal-text {
  color: #6b7280 !important;
}

html:not(.hrms-dark) .swal-button--confirm {
  background: var(--hrms-primary, #22c55e) !important;
  color: var(--hrms-primary-fg, #ffffff) !important;
}

html:not(.hrms-dark) .swal-button--cancel {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

/* ── Dark mode — lock in the correct dark values ── */
html.hrms-dark .swal2-popup {
  background: #0d1117 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(49,59,72,.95) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.42) !important;
}

html.hrms-dark .swal2-title {
  color: #f8fafc !important;
}

html.hrms-dark .swal2-html-container,
html.hrms-dark .swal2-content {
  color: #8aa0b8 !important;
}

html.hrms-dark .swal2-input,
html.hrms-dark .swal2-textarea,
html.hrms-dark .swal2-select,
html.hrms-dark .swal2-file {
  background: rgba(13,18,26,.92) !important;
  border: 1px solid rgba(49,59,72,.95) !important;
  color: #f8fafc !important;
  color-scheme: dark;
}

html.hrms-dark .swal2-input::placeholder,
html.hrms-dark .swal2-textarea::placeholder {
  color: #4b5563 !important;
}

html.hrms-dark .swal2-input:focus,
html.hrms-dark .swal2-textarea:focus {
  border-color: rgba(34,197,94,.6) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15) !important;
}

html.hrms-dark .swal2-validation-message {
  background: rgba(13,18,26,.92) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,.35) !important;
}

html.hrms-dark .swal2-close {
  color: #8aa0b8 !important;
}

html.hrms-dark .swal2-close:hover {
  color: #f8fafc !important;
}

/* SweetAlert v1 dark mode */
html.hrms-dark .swal-modal {
  background: #0d1117 !important;
  border: 1px solid rgba(49,59,72,.95) !important;
}

html.hrms-dark .swal-title,
html.hrms-dark .swal-text {
  color: #f8fafc !important;
}

html.hrms-dark .swal-text {
  color: #8aa0b8 !important;
}