/**
 * Toast Styling - SweetAlert2 Integration
 * ========================================
 * Gebruikt CSS variabelen uit style.css voor consistentie
 */

/* Basis toast styling - gebruikt variabelen uit hoofdstyle */
.swal2-popup.swal2-toast {
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.15)) !important;
  border-radius: var(--border-radius-md, 12px) !important;
  padding: 1rem 1.5rem !important;
  min-width: 300px !important;
  backdrop-filter: blur(var(--glass-blur, 14px)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur, 14px)) !important;
}

/* Light mode achtergrond - gebruikt variabelen */
.swal2-popup {
  background: var(--glass-bg, rgba(255, 255, 255, 0.65)) !important;
  color: var(--body-color, #212529) !important;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.25)) !important;
  backdrop-filter: blur(var(--glass-blur, 14px)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur, 14px)) !important;
}

.swal2-title {
  color: var(--body-color, #212529) !important;
}

.swal2-html-container {
  color: var(--body-color, #212529) !important;
}

/* Dark mode achtergrond - gebruikt variabelen */
[data-bs-theme="dark"] .swal2-popup {
  background: var(--card-bg, rgba(28, 28, 30, 0.65)) !important;
  color: var(--body-color, #f8f9fa) !important;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06)) !important;
}

[data-bs-theme="dark"] .swal2-title {
  color: var(--body-color, #f8f9fa) !important;
}

[data-bs-theme="dark"] .swal2-html-container {
  color: var(--text-secondary, #dee2e6) !important;
}

/* Timer progress bar - gebruikt variabelen */
.swal2-timer-progress-bar {
  height: 4px !important;
  background: var(--primary-color, #0d6efd) !important;
}

/* Success styling - gebruikt variabelen */
.swal2-popup.swal2-toast .swal2-success {
  border-color: var(--success-color, #28a745) !important;
}

.swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'] {
  background-color: var(--success-color, #28a745) !important;
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
  border-color: var(--success-color, #28a745) !important;
}

/* ============================================
   SUCCESS ICON VOOR NORMALE POPUPS - FIX CENTRERING
   ============================================ */

/* Success icon cirkel border */
.swal2-icon.swal2-success {
  border-color: var(--success-color, #28a745) !important;
  color: var(--success-color, #28a745) !important;
}

/* Success vinkje lijnen */
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
  background-color: var(--success-color, #28a745) !important;
}

/* Success ring */
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(40, 167, 69, 0.3) !important;
}

/* KRITISCH: Fix element en circular lines veroorzaken centrerings probleem
   Deze moeten verborgen worden of transparant zijn */
.swal2-icon.swal2-success .swal2-success-fix {
  background-color: transparent !important;
  display: none !important;
}

.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right {
  background-color: transparent !important;
  display: none !important;
}

/* Verwijder pseudo-elementen achtergrond */
.swal2-icon.swal2-success::before,
.swal2-icon.swal2-success::after {
  background-color: transparent !important;
}

/* Error styling - gebruikt variabelen */
.swal2-popup.swal2-toast .swal2-error {
  border-color: var(--danger-color, #dc3545) !important;
}

.swal2-popup.swal2-toast .swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--danger-color, #dc3545) !important;
}

/* ============================================
   ERROR ICON VOOR NORMALE POPUPS
   ============================================ */

.swal2-icon.swal2-error {
  border-color: var(--danger-color, #dc3545) !important;
}

.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
  background-color: var(--danger-color, #dc3545) !important;
}

/* Warning styling - gebruikt variabelen */
.swal2-popup.swal2-toast .swal2-warning {
  border-color: var(--warning-color, #ffc107) !important;
  color: #856404 !important;
}

[data-bs-theme="dark"] .swal2-popup.swal2-toast .swal2-warning {
  color: var(--warning-color, #ffc107) !important;
}

.swal2-popup.swal2-toast .swal2-warning .swal2-icon-content {
  color: var(--warning-color, #ffc107) !important;
}

/* ============================================
   WARNING ICON VOOR NORMALE POPUPS
   ============================================ */

.swal2-icon.swal2-warning {
  border-color: var(--warning-color, #ffc107) !important;
  color: var(--warning-color, #ffc107) !important;
}

.swal2-icon.swal2-warning .swal2-icon-content {
  color: var(--warning-color, #ffc107) !important;
}

/* Info styling - gebruikt variabelen */
.swal2-popup.swal2-toast .swal2-info {
  border-color: var(--info-color, #0dcaf0) !important;
  color: #055160 !important;
}

[data-bs-theme="dark"] .swal2-popup.swal2-toast .swal2-info {
  color: var(--info-color, #0dcaf0) !important;
}

.swal2-popup.swal2-toast .swal2-info .swal2-icon-content {
  color: var(--info-color, #0dcaf0) !important;
}

/* ============================================
   INFO ICON VOOR NORMALE POPUPS
   ============================================ */

.swal2-icon.swal2-info {
  border-color: var(--info-color, #0dcaf0) !important;
  color: var(--info-color, #0dcaf0) !important;
}

.swal2-icon.swal2-info .swal2-icon-content {
  color: var(--info-color, #0dcaf0) !important;
}

/* Confirm button - gebruikt primary color */
.swal2-confirm {
  background-color: var(--primary-color, #0d6efd) !important;
  border-radius: var(--btn-border-radius, 12px) !important;
  padding: var(--btn-padding-y, 0.75rem) var(--btn-padding-x, 1.5rem) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08)) !important;
  transition: all 0.3s ease !important;
}

.swal2-confirm:hover {
  background-color: #0b5ed7 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12)) !important;
}

/* Cancel button - gebruikt secondary color */
.swal2-cancel {
  background-color: var(--secondary-color, #6c757d) !important;
  border-radius: var(--btn-border-radius, 12px) !important;
  padding: var(--btn-padding-y, 0.75rem) var(--btn-padding-x, 1.5rem) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08)) !important;
  transition: all 0.3s ease !important;
}

.swal2-cancel:hover {
  background-color: #5a6268 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12)) !important;
}

/* Hover effect voor toast */
.swal2-popup.swal2-toast:hover {
  box-shadow: var(--glass-shadow-hover, 0 12px 40px rgba(0, 0, 0, 0.2)) !important;
  transform: translateY(-2px) !important;
}

/* Loading spinner - gebruikt primary color */
.swal2-loader {
  border-color: var(--primary-color, #0d6efd) transparent var(--primary-color, #0d6efd) transparent !important;
}

/* Input fields in SweetAlert - gebruikt form styling */
.swal2-input,
.swal2-textarea {
  background: var(--input-bg, rgba(255, 255, 255, 0.5)) !important;
  border: 1.5px solid var(--input-border, rgba(0, 0, 0, 0.1)) !important;
  border-radius: var(--border-radius-md, 12px) !important;
  color: var(--body-color, #212529) !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
  border-color: var(--input-focus-border, var(--primary-color, #0d6efd)) !important;
  box-shadow: 0 0 0 4px var(--input-focus-shadow, rgba(13, 110, 253, 0.25)) !important;
  outline: none !important;
}

[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea {
  background: var(--input-bg, rgba(255, 255, 255, 0.05)) !important;
  border-color: var(--input-border, rgba(255, 255, 255, 0.12)) !important;
  color: var(--body-color, #f8f9fa) !important;
}

/* Close button */
.swal2-close {
  color: var(--text-muted, #6c757d) !important;
  font-size: 2em !important;
  transition: all 0.2s ease !important;
}

.swal2-close:hover {
  color: var(--body-color, #212529) !important;
  transform: scale(1.1) !important;
}

[data-bs-theme="dark"] .swal2-close {
  color: var(--text-muted, #a1a1a6) !important;
}

[data-bs-theme="dark"] .swal2-close:hover {
  color: var(--body-color, #f8f9fa) !important;
}

/* Mobile responsive */
@media (max-width: 576px) {
  .swal2-popup.swal2-toast {
    min-width: auto !important;
    width: calc(100vw - 2rem) !important;
    margin: 1rem !important;
  }
  
  .swal2-popup {
    padding: 1.25rem !important;
  }
  
  .swal2-confirm,
  .swal2-cancel {
    font-size: 0.95rem !important;
    padding: 0.65rem 1.25rem !important;
  }
}

/* Accessibility - reduced motion */
@media (prefers-reduced-motion: reduce) {
  .swal2-popup.swal2-toast,
  .swal2-confirm,
  .swal2-cancel,
  .swal2-close {
    transition: none !important;
    transform: none !important;
  }
}