/*
 * SweetAlert2 — themed to match the LochStudios panels, in dark AND light.
 *
 * Colours come from the site CSS variables (public/assets/css/site.css), so the
 * dialog automatically follows the active [data-theme] (dark is the default;
 * light is opt-in via the lochstudios_theme cookie). Fallback values keep it
 * dark-correct if a variable is ever missing (e.g. a surface without site.css).
 *
 * Targets the base .swal2-* classes so EVERY SweetAlert2 dialog on a site.css
 * surface is themed — no per-call customClass required. Paired with
 * /assets/js/confirm-dialog.js. Loaded globally from views/layout.php.
 */

.swal2-container { backdrop-filter: blur(2px); }
.swal2-backdrop-show { background: rgba(3, 6, 10, 0.66); }

.swal2-popup {
    background: var(--ink-2, #070B11);
    color: var(--paper, #FFFFFF);
    border: 1px solid var(--line-2, #2A3848);
    border-radius: 10px;
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.swal2-title {
    color: var(--paper, #FFFFFF);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: .01em;
}

.swal2-html-container,
.swal2-content {
    color: var(--paper-2, #CFD8E2);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Buttons mirror the site .btn vocabulary. */
.swal2-actions { gap: 8px; }

.swal2-styled {
    border-radius: 6px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: none;
    transition: filter .15s, background .15s, border-color .15s, color .15s;
}
.swal2-styled:focus {
    box-shadow: none;
    outline: 2px solid var(--cyan-2, #5DD3FF);
    outline-offset: 1px;
}

/* Cancel = ghost button. */
.swal2-styled.swal2-cancel {
    background: transparent;
    border: 1px solid var(--line-2, #2A3848);
    color: var(--paper, #FFFFFF);
}
.swal2-styled.swal2-cancel:hover {
    border-color: var(--paper-2, #CFD8E2);
    background: rgba(207, 216, 226, 0.06);
}

/* Confirm = danger (red) by default. */
.swal2-styled.swal2-confirm {
    background: var(--red, #FF6B6B);
    border: 1px solid var(--red, #FF6B6B);
    color: #0A0E14;
}
.swal2-styled.swal2-confirm:hover { filter: brightness(1.08); }

/* Non-destructive "proceed" variant recolours the confirm button to the accent.
 * Applied via customClass:{popup:'swal-proceed'} from confirm-dialog.js. */
.swal2-popup.swal-proceed .swal2-styled.swal2-confirm {
    background: var(--cyan-2, #5DD3FF);
    border-color: var(--cyan-2, #5DD3FF);
    color: #06222E;
}

/* Inputs (prompt / confirm-with-input). */
.swal2-input,
.swal2-textarea,
.swal2-select {
    background: var(--ink-3, #0E141C);
    border: 1px solid var(--line, #1B2530);
    color: var(--paper, #FFFFFF);
    border-radius: 6px;
    box-shadow: none;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--cyan-2, #5DD3FF);
    box-shadow: none;
}
.swal2-input::placeholder,
.swal2-textarea::placeholder { color: var(--muted, #6F7B89); }
.swal2-input-label,
.swal2-label { color: var(--paper-2, #CFD8E2); }
.swal2-validation-message {
    background: transparent;
    color: var(--red, #FF6B6B);
}

.swal2-close { color: var(--muted, #6F7B89); box-shadow: none; }
.swal2-close:hover { color: var(--paper, #FFFFFF); background: transparent; }
.swal2-close:focus { box-shadow: none; outline: 2px solid var(--cyan-2, #5DD3FF); }

/* Tone the default bright SA2 icons toward our palette. */
.swal2-icon.swal2-warning { border-color: var(--red, #FF6B6B); color: var(--red, #FF6B6B); }
.swal2-icon.swal2-question { border-color: var(--cyan-2, #5DD3FF); color: var(--cyan-2, #5DD3FF); }
.swal2-icon.swal2-info { border-color: var(--cyan-2, #5DD3FF); color: var(--cyan-2, #5DD3FF); }
.swal2-icon.swal2-error { border-color: var(--red, #FF6B6B); color: var(--red, #FF6B6B); }
.swal2-icon.swal2-success { border-color: #4CAF7D; color: #4CAF7D; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #4CAF7D; }

/* Light mode: the colour variables already flip via :root[data-theme="light"];
 * only a couple of on-accent text colours + the backdrop need a nudge for
 * contrast on the lighter button fills. */
:root[data-theme="light"] .swal2-styled.swal2-confirm { color: #FFFFFF; }
:root[data-theme="light"] .swal2-popup.swal-proceed .swal2-styled.swal2-confirm { color: #FFFFFF; }
:root[data-theme="light"] .swal2-backdrop-show { background: rgba(20, 28, 38, 0.45); }