/**
 * Theme-Aware Toast Alert Styles
 * Uses CSS variables from variables.css — works across all themes automatically.
 * Type-specific classes (.toast-success, .toast-error, etc.) override SweetAlert
 * inline styles via !important so CSS variables drive the colors.
 */

/* ===== Base Toast ===== */
.swal2-popup.swal2-toast {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: none !important;
    padding: var(--space-3) var(--space-4) !important;
}

/* Toast title */
.swal2-popup.swal2-toast .toast-title {
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--font-size-sm) !important;
    line-height: 1.5 !important;
}

/* Progress bar */
.swal2-popup.swal2-toast .toast-progress-bar {
    background: rgba(255, 255, 255, 0.35) !important;
    height: 3px !important;
}

/* Close button */
.swal2-popup.swal2-toast .swal2-close {
    color: inherit !important;
    opacity: 0.7 !important;
    transition: var(--transition-opacity) !important;
}

.swal2-popup.swal2-toast .swal2-close:hover {
    opacity: 1 !important;
}

/* ===== Type-specific Toasts (override SweetAlert inline styles) ===== */

/* Success */
.swal2-popup.swal2-toast.toast-success {
    background: linear-gradient(135deg, var(--color-success-500), var(--color-success-600)) !important;
    color: #fff !important;
}

.swal2-popup.swal2-toast.toast-success .swal2-icon {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Error */
.swal2-popup.swal2-toast.toast-error {
    background: linear-gradient(135deg, var(--color-danger-500), var(--color-danger-600)) !important;
    color: #fff !important;
}

.swal2-popup.swal2-toast.toast-error .swal2-icon {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Warning */
.swal2-popup.swal2-toast.toast-warning {
    background: linear-gradient(135deg, var(--color-warning-500), var(--color-warning-600)) !important;
    color: #fff !important;
}

.swal2-popup.swal2-toast.toast-warning .swal2-icon {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Info */
.swal2-popup.swal2-toast.toast-info {
    background: linear-gradient(135deg, var(--color-info-500), var(--color-info-600)) !important;
    color: #fff !important;
}

.swal2-popup.swal2-toast.toast-info .swal2-icon {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Primary */
.swal2-popup.swal2-toast.toast-primary {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600)) !important;
    color: #fff !important;
}

.swal2-popup.swal2-toast.toast-primary .swal2-icon {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ===== Animation ===== */
.swal2-popup.swal2-toast.swal2-show {
    animation: swal2-toast-show 0.3s ease-out !important;
}

.swal2-popup.swal2-toast.swal2-hide {
    animation: swal2-toast-hide 0.2s ease-in !important;
}

@keyframes swal2-toast-show {
    0% {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes swal2-toast-hide {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }
}

/* ===== Dialog Styles (Confirm & Alert) ===== */
.swal2-popup:not(.swal2-toast) {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-title {
    color: var(--color-text-primary) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-html-container {
    color: var(--color-text-secondary) !important;
}

.btn-confirm-theme {
    background: var(--color-danger-500) !important;
    border-color: var(--color-danger-500) !important;
    color: #fff !important;
}

.btn-cancel-theme {
    background: var(--color-gray-500) !important;
    border-color: var(--color-gray-500) !important;
    color: #fff !important;
}

.btn-alert-theme {
    background: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
    color: #fff !important;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .swal2-popup.swal2-toast {
        width: calc(100vw - 2rem) !important;
        max-width: 350px !important;
        margin: 0 1rem !important;
    }

    .swal2-popup:not(.swal2-toast) {
        width: calc(100vw - 2rem) !important;
        margin: 0 1rem !important;
    }
}