/* ==========================================================================
   SweetAlert — .swal-* and .swal2-* dialog chrome.

   Consolidated out of theme.css / theme-override.css. Loads immediately after
   theme-override.css, before components/, so every rule keeps the relative
   cascade position it had before the move.
   ========================================================================== */

/* ----- from theme-override.css ----- */
div:where(.swal2-container) .swal2-html-container {
    margin: 0;
}

/* ============================================
   SWEETALERT2 - Dark theme styling
   ============================================ */

/* Main popup container */
.swal2-popup {
    background: linear-gradient(
        135deg,
        rgba(26, 28, 34, 0.98),
        rgba(22, 24, 30, 0.98)
    ) !important;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    color: var(--text-secondary) !important;
    padding: 0 !important;
}

/* Title */
.swal2-title {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    padding: 1.25rem 1.5rem 0 !important;
}

/* Content/HTML container. margin:0 kills swal2's lopsided default
   (1em top / .3em bottom) so the message sits evenly inside the popup. */
.swal2-html-container {
    color: var(--text-secondary) !important;
    padding: 1rem !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Actions container */
.swal2-actions {
    background: rgba(18, 20, 26, 0.5) !important;
    border-top: 1px solid rgba(var(--bs-primary-rgb), 0.15) !important;
    border-bottom: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 1rem 1.5rem !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Tighten spacing on small screens so modal isn't mostly whitespace */
@media (max-width: 576px) {
    .swal2-title {
        padding: 0.75rem 0.75rem 0.25rem !important;
        font-size: 1rem !important;
    }
    .swal2-html-container {
        padding: 0.75rem !important;
        margin: 0 !important;
    }
    .swal2-actions {
        padding: 0.5rem 0.75rem !important;
    }
}

.swal2-actions:not(.swal2-loading) .swal2-styled {
    margin: 0.25rem !important;
}

/* SweetAlert2 Buttons */
.swal2-styled {
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    border: 1px solid !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.swal2-styled:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.swal2-styled:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Confirm button (Primary/Blue) */
.swal2-confirm {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-primary-rgb), 0.15),
        rgba(var(--bs-primary-rgb), 0.08)
    ) !important;
    color: var(--bs-primary) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.4) !important;
}

.swal2-confirm:hover:not(:disabled) {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-primary-rgb), 0.25),
        rgba(var(--bs-primary-rgb), 0.15)
    ) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
    color: var(--bs-primary) !important;
}

.swal2-confirm:active {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-primary-rgb), 0.35),
        rgba(var(--bs-primary-rgb), 0.25)
    ) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.7) !important;
}

/* Deny button (Danger/Red) */
.swal2-deny {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-danger-rgb), 0.15),
        rgba(var(--bs-danger-rgb), 0.08)
    ) !important;
    color: var(--bs-danger) !important;
    border-color: rgba(var(--bs-danger-rgb), 0.4) !important;
}

.swal2-deny:hover:not(:disabled) {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-danger-rgb), 0.25),
        rgba(var(--bs-danger-rgb), 0.15)
    ) !important;
    border-color: rgba(var(--bs-danger-rgb), 0.6) !important;
    color: var(--bs-danger) !important;
}

.swal2-deny:active {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-danger-rgb), 0.35),
        rgba(var(--bs-danger-rgb), 0.25)
    ) !important;
    border-color: rgba(var(--bs-danger-rgb), 0.7) !important;
}

/* Cancel button (Secondary/Gray) */
.swal2-cancel {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-secondary-rgb), 0.15),
        rgba(var(--bs-secondary-rgb), 0.08)
    ) !important;
    color: var(--bs-secondary) !important;
    border-color: rgba(var(--bs-secondary-rgb), 0.4) !important;
}

.swal2-cancel:hover:not(:disabled) {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-secondary-rgb), 0.25),
        rgba(var(--bs-secondary-rgb), 0.15)
    ) !important;
    border-color: rgba(var(--bs-secondary-rgb), 0.6) !important;
    color: var(--text-primary) !important;
}

.swal2-cancel:active {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-secondary-rgb), 0.35),
        rgba(var(--bs-secondary-rgb), 0.25)
    ) !important;
    border-color: rgba(var(--bs-secondary-rgb), 0.7) !important;
}

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

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    background: var(--input-bg-focus) !important;
    border-color: var(--input-border-focus) !important;
    box-shadow: var(--input-focus-ring) !important;
    outline: none !important;
}

.swal2-input::placeholder,
.swal2-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Validation message */
.swal2-validation-message {
    background: rgba(var(--bs-danger-rgb), 0.15) !important;
    color: var(--bs-danger) !important;
    border-color: rgba(var(--bs-danger-rgb), 0.3) !important;
}

/* Close button */
.swal2-close {
    color: var(--text-secondary) !important;
    opacity: 0.8 !important;
}

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

/* Icons */
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(var(--bs-success-rgb), 0.3) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--bs-success) !important;
}

.swal2-icon.swal2-error {
    border-color: rgba(var(--bs-danger-rgb), 0.3) !important;
    color: var(--bs-danger) !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--bs-danger) !important;
}

.swal2-icon.swal2-warning {
    border-color: rgba(var(--bs-warning-rgb), 0.3) !important;
    color: var(--bs-warning) !important;
}

.swal2-icon.swal2-info {
    border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
    color: var(--bs-primary) !important;
}

.swal2-icon.swal2-question {
    border-color: rgba(var(--bs-info-rgb), 0.3) !important;
    color: var(--bs-info) !important;
}

/* Progress steps */
.swal2-progress-steps .swal2-progress-step {
    background: var(--bs-primary) !important;
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
    background: var(--color-blue-hover) !important;
}

.swal2-progress-steps .swal2-progress-step-line {
    background: var(--border-normal) !important;
}

/* Timer progress bar */
.swal2-timer-progress-bar {
    background: var(--bs-primary) !important;
}

/* Footer */
.swal2-footer {
    border-top: 1px solid rgba(var(--bs-primary-rgb), 0.15) !important;
    color: var(--text-tertiary) !important;
    padding: 1rem 1.5rem !important;
    background: rgba(18, 20, 26, 0.5) !important;
    border-radius: 0 0 12px 12px;
}

/* Backdrop */
.swal2-container.swal2-backdrop-show {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Background scroll while a popup is open is frozen in JS (main.js), which
   clamps the body and keeps the page scrollbar painted — the same treatment
   body.modal-open gets in components/modals.css. Swal2's own handling takes
   the bar away (overflow: hidden) and pays the width back as an inline
   padding-right measured off a temp inner scroller, so it hands back 10px
   where the page bar is 14 — the chrome widens and every fixed element in it
   shifts. Undo both. Selector matches swal2's own so source order carries it
   (this file loads after the style swal2 injects); !important is for the
   inline padding. */
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow-y: auto;
    padding-right: 0 !important;
}

/* Confirm dialog — used by hx-confirm (htmx/confirm.js) and by .swa-confirm
   form submits (main.js). Compact card that mirrors the anchored-popover
   confirm (.anchor-pop-confirm): a danger icon tile over the question, then
   an equal-width cancel/confirm row. .swal-confirm--titled is the .swa-confirm
   flavor that also carries a heading, which demotes the body to sub-text. */
.swal-confirm .swal2-icon {
    width: 44px !important;
    height: 44px !important;
    margin: 1.5rem auto 0 !important;
    border: none !important;
    border-radius: 12px !important;
    background: rgba(var(--bs-danger-rgb), 0.14) !important;
    color: var(--bs-danger) !important;
    animation: none !important;
}

.swal-confirm .swal2-icon .swal2-icon-content {
    font-size: 1.1rem !important;
    animation: none !important;
}

.swal-confirm .swal2-html-container {
    color: var(--text-primary) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    padding: 0.9rem 1.5rem 0 !important;
    text-wrap: pretty;
}

.swal-confirm .swal2-title {
    color: var(--text-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    padding: 0.9rem 1.5rem 0 !important;
    text-wrap: pretty;
}

.swal-confirm--titled .swal2-html-container {
    color: var(--text-secondary) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    padding-top: 0.35rem !important;
}

/* buttons sit inside the card — no footer bar */
.swal-confirm .swal2-actions {
    background: transparent !important;
    border-top: none !important;
    gap: 9px !important;
    padding: 1.25rem 1.25rem 1.35rem !important;
}

.swal-confirm .swal2-actions:not(.swal2-loading) .swal2-styled {
    flex: 1 1 0 !important;
    margin: 0 !important;
}

/* confirms guard destructive actions — danger flavor, like the popover */
.swal-confirm .swal2-confirm {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-danger-rgb), 0.15),
        rgba(var(--bs-danger-rgb), 0.08)
    ) !important;
    color: var(--bs-danger) !important;
    border-color: rgba(var(--bs-danger-rgb), 0.4) !important;
}

.swal-confirm .swal2-confirm:hover:not(:disabled) {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-danger-rgb), 0.25),
        rgba(var(--bs-danger-rgb), 0.15)
    ) !important;
    border-color: rgba(var(--bs-danger-rgb), 0.6) !important;
    color: var(--bs-danger) !important;
}

.swal-confirm .swal2-confirm:active {
    background: linear-gradient(
        135deg,
        rgba(var(--bs-danger-rgb), 0.35),
        rgba(var(--bs-danger-rgb), 0.25)
    ) !important;
    border-color: rgba(var(--bs-danger-rgb), 0.7) !important;
}