/* ============================================================
   EazyStock — SweetAlert2 brand theme (light / dark / system)

   SweetAlert2 renders the bigger confirm / dangerous-action /
   alert dialogs. It is wired in behind the existing EZ.confirm()
   API (static/js/ez-notify.js), so every call-site keeps working
   and simply renders through SweetAlert2 instead. The small
   auto-dismiss corner toasts stay on ez-notify (EZ.showToast),
   and Django messages keep rendering as toasts.

   Styling is built on the semantic --ez-* / --ink-* tokens from
   ez-theme.css, which auto-flip for dark mode, so light and dark
   come from the same rules. Buttons match the ez-notify brand
   gradients. buttonsStyling:false is set in JS, so the button
   look is fully owned here.
   ============================================================ */

/* --- backdrop / container --- */
.swal2-container { z-index: 100000; padding: 1rem; }
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-backdrop-show.swal2-backdrop-show {
    background: var(--ez-overlay, rgba(15, 23, 42, 0.45));
    backdrop-filter: blur(2px);
}

/* --- popup card --- */
.swal2-popup.ez-swal {
    width: min(92vw, 30rem);
    max-width: 92vw;
    border-radius: 18px;
    background: var(--ez-card, #ffffff);
    color: var(--ez-text, #0f172a);
    border: 1px solid var(--ez-border, #e2e8f0);
    box-shadow: var(--ez-shadow, 0 24px 64px rgba(15, 23, 42, 0.22));
    padding: 1.75rem 1.5rem 1.4rem;
    font-family: inherit;
}

.ez-swal .swal2-title {
    color: var(--ez-heading, #0f172a);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    padding: 0;
    margin: 0.35rem 0 0.4rem;
}

.ez-swal .swal2-html-container {
    color: var(--ez-text-muted, #475569);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
}

/* --- icons (recolour to brand-consistent hues) --- */
.ez-swal .swal2-icon { margin: 0.4rem auto 0.9rem; }
.ez-swal .swal2-icon.swal2-question { border-color: rgba(99, 102, 241, 0.4); color: #6366f1; }
.ez-swal .swal2-icon.swal2-warning  { border-color: rgba(245, 158, 11, 0.4); color: #f59e0b; }
.ez-swal .swal2-icon.swal2-info     { border-color: rgba(14, 165, 233, 0.4); color: #0ea5e9; }
.ez-swal .swal2-icon.swal2-success  { border-color: rgba(16, 185, 129, 0.35); }
.ez-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(16, 185, 129, 0.3); }
.ez-swal .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #10b981; }
.ez-swal .swal2-icon.swal2-error    { border-color: rgba(239, 68, 68, 0.4); }
.ez-swal .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: #ef4444; }

/* --- input / textarea (typed-confirm prompts) --- */
.ez-swal .swal2-input,
.ez-swal .swal2-textarea {
    background: var(--ez-input-bg, #ffffff);
    color: var(--ez-text, #0f172a);
    border: 1px solid var(--ez-input-border, #d7deea);
    border-radius: 12px;
    box-shadow: none;
    font-size: 0.95rem;
    margin: 0.85rem auto 0;
}
.ez-swal .swal2-input:focus,
.ez-swal .swal2-textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
}
.ez-swal .swal2-input-label { color: var(--ez-text-muted, #475569); }
.ez-swal .swal2-validation-message {
    background: transparent;
    color: var(--ez-danger, #ef4444);
}

/* --- actions / buttons (buttonsStyling:false → fully owned here) --- */
.ez-swal .swal2-actions {
    gap: 10px;
    margin: 1.4rem 0 0;
    flex-wrap: wrap;
}
.ez-swal .swal2-actions .ez-swal-confirm,
.ez-swal .swal2-actions .ez-swal-cancel {
    margin: 0;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1;
    padding: 0.72rem 1.3rem;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ez-swal .swal2-actions .ez-swal-confirm {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.32);
}
.ez-swal .swal2-actions .ez-swal-confirm:hover { transform: translateY(-1px); }
.ez-swal .swal2-actions .ez-swal-confirm.ez-swal-danger {
    background: linear-gradient(135deg, #ef4444, #f87171);
    box-shadow: 0 10px 24px rgba(239, 68, 68, 0.3);
}
.ez-swal .swal2-actions .ez-swal-cancel {
    background: var(--ink-50, #f1f5f9);
    color: var(--ink-800, #334155);
}
.ez-swal .swal2-actions .ez-swal-cancel:hover { background: var(--ink-100, #e2e8f0); }
.ez-swal .swal2-actions .swal2-styled:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.32);
}
.ez-swal .swal2-loader { border-color: #6366f1 transparent #6366f1 transparent; }

/* --- close button --- */
.ez-swal .swal2-close { color: var(--ez-text-muted, #64748b); box-shadow: none; }
.ez-swal .swal2-close:hover { color: var(--ez-danger, #ef4444); }
.ez-swal .swal2-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* --- dark-mode safety for the neutral cancel button (tokens may
       not expose the full --ink scale in light root) --- */
html[data-theme="dark"] .ez-swal .swal2-actions .ez-swal-cancel {
    background: var(--ink-100, #262d49);
    color: var(--ink-800, #d3dae9);
}
html[data-theme="dark"] .ez-swal .swal2-actions .ez-swal-cancel:hover {
    background: var(--ink-200, #313a5c);
}

/* --- mobile: full-width stacked buttons, no horizontal overflow --- */
@media (max-width: 480px) {
    .swal2-popup.ez-swal { width: 94vw; padding: 1.4rem 1.15rem 1.2rem; }
    .ez-swal .swal2-actions { flex-direction: column-reverse; gap: 8px; }
    .ez-swal .swal2-actions .ez-swal-confirm,
    .ez-swal .swal2-actions .ez-swal-cancel { width: 100%; }
}

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .swal2-show,
    .swal2-hide,
    .swal2-popup.ez-swal,
    .ez-swal .swal2-icon,
    .ez-swal .swal2-icon [class^="swal2-"] {
        animation: none !important;
        transition: none !important;
    }
}