/* SweetAlert2 Custom Styling - matches theme variables */

:root {
    /* SweetAlert container styling for light mode */
    --swal-background: var(--color-gray-0);
    --swal-border: var(--color-gray-200);
    --swal-text: var(--color-gray-700);
    --swal-title: var(--color-gray-900);
    --swal-box-shadow: var(--shadow-medium);

    /* Buttons */
    --swal-btn-confirm-bg: var(--color-primary-600);
    --swal-btn-confirm-hover-bg: var(--color-primary-700);
    --swal-btn-confirm-active-bg: var(--color-primary-800);
    --swal-btn-confirm-color: var(--color-gray-0);

    --swal-btn-cancel-bg: var(--color-gray-200);
    --swal-btn-cancel-hover-bg: var(--color-gray-300);
    --swal-btn-cancel-active-bg: var(--color-gray-400);
    --swal-btn-cancel-color: var(--color-gray-800);

    --swal-btn-deny-bg: var(--color-red-600);
    --swal-btn-deny-hover-bg: var(--color-red-700);
    --swal-btn-deny-active-bg: var(--color-red-800);
    --swal-btn-deny-color: var(--color-gray-0);

    /* Icon Colors */
    --swal-success-color: var(--color-primary-600);
    --swal-error-color: var(--color-red-600);
    --swal-warning-color: #f59e0b; /* Amber-500 */
    --swal-info-color: var(--color-secondary-600);
    --swal-question-color: var(--color-secondary-600);

    /* Timer Progress Bar */
    --swal-timer-bar-bg: var(--color-primary-500);

    /* Focus */
    --swal-focus-outline: rgba(var(--color-primary-600-rgb), 0.4);

    /* Backdrop */
    --swal-backdrop: rgba(var(--black-color-rgb), 0.4);
}

html.dark {
    /* SweetAlert container styling for dark mode */
    --swal-background: var(--color-gray-800);
    --swal-border: var(--color-gray-700);
    --swal-text: var(--color-gray-300);
    --swal-title: var(--color-gray-100);
    --swal-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    /* Buttons */
    --swal-btn-confirm-bg: var(--color-primary-600);
    --swal-btn-confirm-hover-bg: var(--color-primary-700);
    --swal-btn-confirm-active-bg: var(--color-primary-500);
    --swal-btn-confirm-color: var(--color-gray-100);

    --swal-btn-cancel-bg: var(--color-gray-700);
    --swal-btn-cancel-hover-bg: var(--color-gray-600);
    --swal-btn-cancel-active-bg: var(--color-gray-500);
    --swal-btn-cancel-color: var(--color-gray-200);

    --swal-btn-deny-bg: var(--color-red-700);
    --swal-btn-deny-hover-bg: var(--color-red-600);
    --swal-btn-deny-active-bg: var(--color-red-500);
    --swal-btn-deny-color: var(--color-gray-100);

    /* Icon Colors */
    --swal-success-color: var(--color-primary-500);
    --swal-error-color: var(--color-red-500);
    --swal-warning-color: #fbbf24; /* Amber-400 */
    --swal-info-color: var(--color-secondary-500);
    --swal-question-color: var(--color-secondary-500);

    /* Timer Progress Bar */
    --swal-timer-bar-bg: var(--color-primary-600);

    /* Focus */
    --swal-focus-outline: rgba(var(--color-primary-500-rgb), 0.4);

    /* Backdrop */
    --swal-backdrop: rgba(0, 0, 0, 0.6);
}

/* Backdrop */
.swal2-backdrop-show {
    background: var(--swal-backdrop) !important;
}

/* Container */
.swal2-popup {
    background-color: var(--swal-background) !important;
    color: var(--swal-text) !important;
    border: 1px solid var(--swal-border) !important;
    box-shadow: var(--swal-box-shadow) !important;
    border-radius: var(--card-border-radius) !important;
    transition: var(--transition-smooth) !important;
}

/* Title */
.swal2-title {
    color: var(--swal-title) !important;
    font-weight: 600 !important;
    /* FIXME: delete below line after fix the icon */
    margin-top: 1.5rem !important;
}
/* Content */
.swal2-html-container {
    color: var(--swal-text) !important;
}

/* Close button */
.swal2-close {
    color: var(--swal-text) !important;
    transition: var(--transition-smooth) !important;
}

.swal2-close:hover {
    color: var(--swal-title) !important;
    transform: scale(1.1);
}

/* Icons */
.swal2-icon.swal2-success {
    border-color: var(--swal-success-color) !important;
    color: var(--swal-success-color) !important;
}

.swal2-icon.swal2-error {
    border-color: var(--swal-error-color) !important;
    color: var(--swal-error-color) !important;
}

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

.swal2-icon.swal2-info {
    border-color: var(--swal-info-color) !important;
    color: var(--swal-info-color) !important;
}

.swal2-icon.swal2-question {
    border-color: var(--swal-question-color) !important;
    color: var(--swal-question-color) !important;
}

/* Success icon lines */
.swal2-success-line-tip,
.swal2-success-line-long {
    background-color: var(--swal-success-color) !important;
}
.swal2-success-ring {
    border-color: rgba(var(--color-primary-500-rgb), 0.3) !important;
}

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

/* Buttons */
.swal2-confirm.swal2-styled {
    background-color: var(--swal-btn-confirm-bg) !important;
    color: var(--swal-btn-confirm-color) !important;
    border-radius: var(--card-border-radius) !important;
    transition: var(--transition-smooth) !important;
    border: none !important;
    box-shadow: none !important;
}

.swal2-confirm.swal2-styled:hover {
    background-color: var(--swal-btn-confirm-hover-bg) !important;
    transform: translateY(-1px);
}

.swal2-confirm.swal2-styled:active {
    background-color: var(--swal-btn-confirm-active-bg) !important;
    transform: translateY(0);
}

.swal2-cancel.swal2-styled {
    background-color: var(--swal-btn-cancel-bg) !important;
    color: var(--swal-btn-cancel-color) !important;
    border-radius: var(--card-border-radius) !important;
    transition: var(--transition-smooth) !important;
    border: none !important;
    box-shadow: none !important;
}

.swal2-cancel.swal2-styled:hover {
    background-color: var(--swal-btn-cancel-hover-bg) !important;
    transform: translateY(-1px);
}

.swal2-cancel.swal2-styled:active {
    background-color: var(--swal-btn-cancel-active-bg) !important;
    transform: translateY(0);
}

.swal2-deny.swal2-styled {
    background-color: var(--swal-btn-deny-bg) !important;
    color: var(--swal-btn-deny-color) !important;
    border-radius: var(--card-border-radius) !important;
    transition: var(--transition-smooth) !important;
    border: none !important;
    box-shadow: none !important;
}

.swal2-deny.swal2-styled:hover {
    background-color: var(--swal-btn-deny-hover-bg) !important;
    transform: translateY(-1px);
}

.swal2-deny.swal2-styled:active {
    background-color: var(--swal-btn-deny-active-bg) !important;
    transform: translateY(0);
}

/* Timer Progress Bar */
.swal2-timer-progress-bar {
    background-color: var(--swal-timer-bar-bg) !important;
}

/* Focus outline */
.swal2-styled:focus,
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    box-shadow: 0 0 0 3px var(--swal-focus-outline) !important;
    outline: none !important;
}

/* Input fields */
.swal2-input,
.swal2-textarea,
.swal2-select {
    border: 1px solid var(--swal-border) !important;
    color: var(--swal-text) !important;
    background-color: var(--input-bg) !important;
    border-radius: var(--card-border-radius) !important;
    transition: var(--transition-smooth) !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--color-primary-500) !important;
    background-color: var(--input-focus-bg) !important;
}

/* Radio & Checkbox */
.swal2-radio,
.swal2-checkbox {
    color: var(--swal-text) !important;
}

/* Animations */
.swal2-show {
    animation: swal2-show 0.3s ease-out !important;
}

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

/* RTL support */
[dir="rtl"] .swal2-popup {
    text-align: right !important;
}

[dir="rtl"] .swal2-actions {
    flex-direction: row-reverse !important;
}

/* Loading animation */
.swal2-loader {
    border-color: var(--color-primary-500) transparent var(--color-primary-500)
        transparent !important;
}

/* Validation message */
.swal2-validation-message {
    background-color: rgba(var(--color-red-100-rgb), 0.5) !important;
    color: var(--color-red-700) !important;
}

html.dark .swal2-validation-message {
    background-color: rgba(var(--color-red-900-rgb), 0.7) !important;
    color: var(--color-red-400) !important;
}

/* Footer */
.swal2-footer {
    border-top: 1px solid var(--swal-border) !important;
    color: var(--swal-text) !important;
}