/**
 * sweetalert2-theme.css
 * Self-contained SweetAlert2 theme with standardized --swal- prefixed CSS variables
 */

/* ========== SWEETALERT2 THEME VARIABLES ========== */
:root {
    /* Primary colours - Navy blue for universal primary actions */
    --swal-primary: #1e3a5f;
    --swal-primary-100: #2d5a8a;
    --swal-primary-200: #8ba7c9;
    --swal-primary-inverse: #ffffff;
    /* Primary rgba variants (using RGB channels for transparency control) */
    --swal-primary-rgb: 30, 58, 95;
    --swal-primary-rgba-20: rgba(var(--swal-primary-rgb), 0.2);
    --swal-primary-rgba-30: rgba(var(--swal-primary-rgb), 0.3);
    --swal-primary-rgba-40: rgba(var(--swal-primary-rgb), 0.4);
    --swal-primary-rgba-50: rgba(var(--swal-primary-rgb), 0.5);
    /* Semantic colours for status modals */
    --swal-success: #28c76f;
    --swal-success-rgb: 40, 199, 111;
    --swal-success-100: #5ddb97;
    --swal-success-200: #a3ecc3;
    --swal-success-inverse: #ffffff;
    --swal-success-rgba-30: rgba(var(--swal-success-rgb), 0.3);
    --swal-success-rgba-40: rgba(var(--swal-success-rgb), 0.4);
    --swal-error: #ea5455;
    --swal-error-rgb: 234, 84, 85;
    --swal-error-100: #f07c7d;
    --swal-error-200: #f5b8b8;
    --swal-error-inverse: #ffffff;
    --swal-error-rgba-30: rgba(var(--swal-error-rgb), 0.3);
    --swal-warning: #ff9f43;
    --swal-warning-rgb: 255, 159, 67;
    --swal-warning-100: #ffbd7a;
    --swal-warning-200: #ffdbb8;
    --swal-warning-inverse: #ffffff;
    --swal-warning-rgba-30: rgba(var(--swal-warning-rgb), 0.3);
    --swal-info: #00cfe8;
    --swal-info-rgb: 0, 207, 232;
    --swal-info-100: #4ddfef;
    --swal-info-200: #a3eff7;
    --swal-info-inverse: #ffffff;
    --swal-info-rgba-30: rgba(var(--swal-info-rgb), 0.3);
    /* Dark colours */
    --swal-dark: #5e5873;
    --swal-dark-rgb: 94, 88, 115;
    --swal-dark-rgba-10: rgba(var(--swal-dark-rgb), 0.1);
    --swal-dark-rgba-20: rgba(var(--swal-dark-rgb), 0.2);
    --swal-dark-rgba-50: rgba(var(--swal-dark-rgb), 0.5);
    /* Default text colour */
    --swal-default: #6e6b7b;
    /* Grey scale */
    --swal-grey-100: #f5f5f5;
    --swal-grey-200: #e9e9e9;
    --swal-grey-300: #d8d6de;
    --swal-grey-400: #c5c3ca;
    --swal-grey-800: #423f50;
    /* Border radius */
    --swal-border-radius: 0.375rem;
    --swal-border-radius2x: 0.75rem;
}

/* ========== BACKDROP ========== */
.swal2-backdrop-show {
    background-color: var(--swal-dark-rgba-50) !important;
}

/* ========== POPUP CONTAINER ========== */
.swal2-popup {
    border-radius: var(--swal-border-radius2x) !important;
    background: #fff !important;
    box-shadow:
        0 0.25rem 0.5rem var(--swal-dark-rgba-10),
        0 0.75rem 1.5rem var(--swal-dark-rgba-20) !important;
    font-family: "Poppins", Arial, sans-serif !important;
    padding: 1.5rem !important;
    border: 1px solid var(--swal-grey-300) !important;
    max-width: 416px !important;
}

/* ========== TITLE ========== */
.swal2-title {
    color: var(--swal-dark) !important;
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.4 !important;
}

/* ========== CONTENT TEXT ========== */
.swal2-html-container,
.swal2-content {
    color: var(--swal-default) !important;
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 0 !important;
    margin-top: 0.25rem !important;
}

/* ========== ICON ========== */
.swal2-icon {
    border-color: transparent !important;
    margin: 0.5rem auto 1rem auto !important;
}

/* Success icon colors */
.swal2-success-line-tip,
.swal2-success-line-long {
    background-color: var(--swal-success) !important;
}

.swal2-success-ring {
    border-color: var(--swal-success-200) !important;
}

/* ========== ACTIONS (BUTTON CONTAINER) ========== */
.swal2-actions {
    margin-top: 1.25rem !important;
    gap: 0.75rem !important;
}

/* ========== CONFIRM BUTTON ========== */
.swal2-confirm {
    background-color: var(--swal-primary) !important;
    color: var(--swal-primary-inverse) !important;
    border-radius: var(--swal-border-radius) !important;
    padding: 0.5rem 1.5rem !important;
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    box-shadow: 0 1px 3px var(--swal-primary-rgba-30) !important;
    transition: all 0.2s ease-in-out !important;
    min-width: 100px !important;
}

.swal2-confirm:hover {
    background-color: var(--swal-primary-100) !important;
    color: var(--swal-primary-inverse) !important;
    box-shadow: 0 2px 6px var(--swal-primary-rgba-40) !important;
    transform: translateY(-1px) !important;
}

.swal2-confirm:active {
    transform: translateY(0) !important;
    background-color: var(--swal-primary-200) !important;
    color: var(--swal-primary-inverse) !important;
    box-shadow: 0 1px 2px var(--swal-primary-rgba-20) !important;
}

/* Success variant button (for info/success modals) */
.btn-success.swal2-confirm {
    background-color: var(--swal-success) !important;
    color: var(--swal-success-inverse) !important;
    box-shadow: 0 1px 3px var(--swal-success-rgba-30) !important;
}

.btn-success.swal2-confirm:hover {
    background-color: var(--swal-success-100) !important;
    color: var(--swal-success-inverse) !important;
    box-shadow: 0 2px 6px var(--swal-success-rgba-40) !important;
    transform: translateY(-1px) !important;
}

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

/* ========== CANCEL BUTTON ========== */
.swal2-cancel {
    background-color: var(--swal-grey-100) !important;
    color: var(--swal-dark) !important;
    border-radius: var(--swal-border-radius) !important;
    padding: 0.5rem 1.5rem !important;
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border: 1px solid var(--swal-grey-300) !important;
    box-shadow: 0 1px 2px var(--swal-dark-rgba-10) !important;
    transition: all 0.2s ease-in-out !important;
    min-width: 100px !important;
}

.swal2-cancel:hover {
    background-color: var(--swal-grey-200) !important;
    border-color: var(--swal-grey-400) !important;
    box-shadow: 0 2px 4px var(--swal-dark-rgba-20) !important;
    transform: translateY(-1px) !important;
}

.swal2-cancel:active {
    background-color: var(--swal-grey-300) !important;
    color: var(--swal-dark) !important;
    transform: translateY(0) !important;
}

/* Light variant (for secondary actions) */
.btn-light.swal2-cancel {
    background-color: var(--swal-grey-100) !important;
    color: var(--swal-dark) !important;
    border: 1px solid var(--swal-grey-300) !important;
}

.btn-light.swal2-cancel:hover {
    background-color: var(--swal-grey-200) !important;
    color: var(--swal-dark) !important;
    border-color: var(--swal-grey-400) !important;
    box-shadow: 0 2px 4px var(--swal-dark-rgba-20) !important;
    transform: translateY(-1px) !important;
}

.btn-light.swal2-cancel:active {
    background-color: var(--swal-grey-300) !important;
    color: var(--swal-dark) !important;
    transform: translateY(0) !important;
}

/* Danger outline variant */
.btn-outline-danger.swal2-cancel {
    background-color: transparent !important;
    color: var(--swal-error) !important;
    border: 1px solid var(--swal-error) !important;
    box-shadow: none !important;
}

.btn-outline-danger.swal2-cancel:hover {
    background-color: var(--swal-error) !important;
    color: var(--swal-error-inverse) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px var(--swal-error-rgba-30) !important;
}

.btn-outline-danger.swal2-cancel:active {
    background-color: var(--swal-error-200) !important;
    color: var(--swal-error-inverse) !important;
    transform: translateY(0) !important;
}

/* ========== INPUT FIELDS ========== */
.swal2-input,
.swal2-textarea,
.swal2-select {
    border-radius: var(--swal-border-radius) !important;
    border: 1px solid var(--swal-grey-300) !important;
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 14px !important;
    padding: 0.5rem 0.75rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    background-color: #fff !important;
    color: var(--swal-dark) !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--swal-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--swal-primary-rgba-20) !important;
    outline: none !important;
}

/* Text-center utility for verification inputs */
.swal2-input.text-center {
    text-align: center !important;
    letter-spacing: 0.25rem !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    padding: 0.75rem !important;
}

/* ========== TIMER PROGRESS BAR ========== */
.swal2-timer-progress-bar {
    background: linear-gradient(90deg, var(--swal-primary-rgba-30), var(--swal-primary-rgba-50)) !important;
    height: 3px !important;
}

/* ========== CLOSE BUTTON ========== */
.swal2-close {
    color: var(--swal-grey-800) !important;
    font-size: 1.5rem !important;
    transition: color 0.15s ease-in-out !important;
    opacity: 0.6 !important;
}

.swal2-close:hover {
    color: var(--swal-dark) !important;
    opacity: 1 !important;
}

/* ========== MODAL VARIANTS (Color-coded top border) ========== */

/* Success modal - success colour top accent */
.swal2-popup:has(.swal2-success) {
    border-top: 3px solid var(--swal-success) !important;
}

/* Error modal - error colour top accent */
.swal2-popup:has(.swal2-error) {
    border-top: 3px solid var(--swal-error) !important;
}

/* Warning modal - warning colour top accent */
.swal2-popup:has(.swal2-warning) {
    border-top: 3px solid var(--swal-warning) !important;
}

/* Info modal - info colour top accent */
.swal2-popup:has(.swal2-info) {
    border-top: 3px solid var(--swal-info) !important;
}

/* ========== FOOTER ========== */
.swal2-footer {
    border-top: 1px solid var(--swal-grey-200) !important;
    color: var(--swal-grey-800) !important;
    font-size: 12px !important;
    padding-top: 0.75rem !important;
    margin-top: 1rem !important;
}

/* ========== HIDE BUTTONS (for loading modals) ========== */
.swal2-hide-btn {
    display: none !important;
}