/* SweetAlert2 — Zyla neutral monochrome theme
   Loaded globally from layouts/admin.blade.php so all modals across the
   dashboard inherit the design system. Swal renders at document.body level,
   so selectors are unscoped (not under .dashboard-shell). */

/* ---------- Container & popup ---------- */
.swal2-container { z-index: 10000 !important; }

.swal2-popup {
    background: var(--bg, #ffffff) !important;
    color: var(--fg, #000000) !important;
    border: 1px solid var(--border, #e5e5e5) !important;
    border-radius: var(--radius-xl, 16px) !important;
    box-shadow: var(--shadow-xl, 0 24px 48px rgba(0,0,0,0.10)) !important;
    padding: 28px 28px 22px !important;
    font-family: var(--font-sans, 'Manrope', sans-serif) !important;
}

.swal2-title {
    color: var(--fg, #000000) !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.01em;
}

.swal2-html-container,
.swal2-content {
    color: var(--fg-secondary, #525252) !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
}

.swal2-close { color: var(--fg-tertiary, #a3a3a3) !important; }
.swal2-close:hover { color: var(--fg, #000000) !important; }

/* ---------- Icons ---------- */
.swal2-icon { border-color: var(--border-strong, #d4d4d4) !important; color: var(--fg-tertiary, #a3a3a3) !important; }
.swal2-icon.swal2-question { border-color: var(--border-strong, #d4d4d4) !important; color: var(--fg-secondary, #525252) !important; }
.swal2-icon.swal2-info     { border-color: var(--border-strong, #d4d4d4) !important; color: var(--fg-secondary, #525252) !important; }
.swal2-icon.swal2-warning  { border-color: var(--border-strong, #d4d4d4) !important; color: var(--fg-secondary, #525252) !important; }
.swal2-icon.swal2-error    { border-color: var(--danger-border, #fecaca) !important; color: var(--danger-fg, #991b1b) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--danger-fg, #991b1b) !important; }

/* Success icon stays semantic-green (matches the Live indicator philosophy) */
.swal2-icon.swal2-success { border-color: rgba(34,197,94,0.35) !important; color: #16a34a !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #22c55e !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(34,197,94,0.35) !important; }

/* ---------- Buttons ---------- */
.swal2-actions { gap: 8px !important; margin-top: 18px !important; }

.swal2-confirm,
.swal2-cancel,
.swal2-deny {
    border-radius: var(--radius-md, 8px) !important;
    height: 40px !important;
    padding: 0 18px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.swal2-confirm:focus,
.swal2-cancel:focus,
.swal2-deny:focus { box-shadow: 0 0 0 3px rgba(10,10,10,0.12) !important; }

.swal2-confirm {
    background: var(--btn-primary-bg, #000000) !important;
    background-color: var(--btn-primary-bg, #000000) !important;
    color: var(--btn-primary-fg, #ffffff) !important;
    border-color: var(--btn-primary-bg, #000000) !important;
}
.swal2-confirm:hover {
    background: var(--btn-primary-hover-bg, #262626) !important;
    background-color: var(--btn-primary-hover-bg, #262626) !important;
    border-color: var(--btn-primary-hover-bg, #262626) !important;
}

.swal2-cancel {
    background: var(--btn-secondary-bg, #ffffff) !important;
    background-color: var(--btn-secondary-bg, #ffffff) !important;
    color: var(--btn-secondary-fg, #000000) !important;
    border-color: var(--btn-secondary-border, #e5e5e5) !important;
}
.swal2-cancel:hover {
    background: var(--btn-secondary-hover-bg, #fafafa) !important;
    background-color: var(--btn-secondary-hover-bg, #fafafa) !important;
    border-color: var(--border-strong, #d4d4d4) !important;
}

.swal2-deny {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--danger-fg, #991b1b) !important;
    border-color: var(--danger-border, #fecaca) !important;
}
.swal2-deny:hover {
    background: var(--danger-bg, #fef2f2) !important;
    background-color: var(--danger-bg, #fef2f2) !important;
}

/* ---------- Inputs ---------- */
.swal2-input,
.swal2-textarea,
.swal2-select {
    background: var(--input-bg, #ffffff) !important;
    color: var(--input-fg, #000000) !important;
    border: 1px solid var(--input-border, #e5e5e5) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: none !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 0.9rem !important;
    font-family: var(--font-sans, 'Manrope', sans-serif) !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--input-focus-border, #000000) !important;
    box-shadow: 0 0 0 3px rgba(10,10,10,0.06) !important;
    outline: none !important;
}

.swal2-validation-message {
    background: var(--danger-bg, #fef2f2) !important;
    color: var(--danger-fg, #991b1b) !important;
    border-radius: var(--radius-md, 8px) !important;
}

/* ---------- Lead text inside swal body ---------- */
.swal2-html-container .swal-lead {
    margin: 0 0 14px 0 !important;
    color: var(--fg-secondary, #525252) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* ---------- Caution / impact callout (replaces orange <b>) ---------- */
.swal2-html-container .swal-caution-text {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    margin: 6px auto 2px !important;
    padding: 12px 14px !important;
    background: var(--danger-bg, #fef2f2) !important;
    color: var(--danger-fg, #991b1b) !important;
    border: 1px solid var(--danger-border, #fecaca) !important;
    border-radius: var(--radius-md, 10px) !important;
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}
.swal2-html-container .swal-caution-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--danger-fg, #991b1b);
    box-shadow: 0 0 0 4px var(--danger-bg, #fef2f2);
}

/* ---------- Danger-flavored confirm (e.g. delete account) ---------- */
.swal2-confirm.swal-danger-confirm {
    background: var(--danger-fg, #991b1b) !important;
    background-color: var(--danger-fg, #991b1b) !important;
    border-color: var(--danger-fg, #991b1b) !important;
    color: #ffffff !important;
}
.swal2-confirm.swal-danger-confirm:hover {
    background: #7f1d1d !important;
    background-color: #7f1d1d !important;
    border-color: #7f1d1d !important;
}
.swal2-confirm.swal-danger-confirm:focus {
    box-shadow: 0 0 0 3px rgba(153, 27, 27, 0.18) !important;
}

/* ---------- Dark mode adjustments ---------- */
[data-theme="dark"] .swal2-container { background: rgba(0,0,0,0.6) !important; }

/* ---------- Login link popup (legacy compatibility) ---------- */
.swal-login-popup {
    border-radius: var(--radius-xl, 16px) !important;
    padding: 28px 24px 20px !important;
    max-width: 420px !important;
    background: var(--bg, #fff) !important;
}
.swal-login-title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--fg, #000000) !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.01em;
}
.swal-login-html { padding: 0 !important; margin: 0 !important; text-align: left !important; }
.swal-login-description {
    color: var(--fg-secondary, #525252);
    font-size: 0.9rem;
    margin: 0 0 20px 0;
    text-align: center;
}
.swal-login-field { text-align: left; margin-bottom: 4px; }
.swal-login-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fg, #000000);
    margin-bottom: 6px;
}
.swal-login-input {
    display: block;
    width: 100%;
    border: 1px solid var(--input-border, #e5e5e5) !important;
    border-radius: var(--radius-md, 8px) !important;
    padding: 11px 14px !important;
    font-size: 0.9rem !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--input-bg, #fff);
    color: var(--input-fg, #000000);
    box-sizing: border-box;
    margin: 0 !important;
    max-width: 100% !important;
}
.swal-login-input:focus {
    border-color: var(--input-focus-border, #000000) !important;
    box-shadow: 0 0 0 3px rgba(10,10,10,0.08) !important;
    outline: none;
}
.swal-login-actions { margin-top: 20px !important; gap: 10px; }
.swal-login-confirm,
.swal-login-cancel {
    border-radius: var(--radius-md, 8px) !important;
    padding: 11px 28px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

/* ============================================================
   Zyla Modal — Bootstrap-style alert/error dialog on-brand.
   Used by Livewire components that can't easily render a Swal
   (e.g. ai-api-create error modal). Matches the swal2 styling.
   ============================================================ */

.zyla-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10, 10, 10, 0.45) !important;
    backdrop-filter: blur(2px);
    opacity: 1 !important;
    z-index: 1050 !important;
}

.zyla-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1055 !important;
    overflow-y: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.zyla-modal .modal-dialog {
    max-width: 480px;
    width: 100%;
    margin: 0;
}

.zyla-modal__content {
    position: relative;
    background: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e5e5);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-xl, 0 24px 48px rgba(0, 0, 0, 0.12));
    padding: 28px 28px 22px;
    font-family: var(--font-sans, 'Manrope', sans-serif);
    text-align: center;
    color: var(--fg, #000000);
}

.zyla-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--fg-tertiary, #a3a3a3);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
    padding: 0;
    line-height: 0;
}
.zyla-modal__close:hover {
    color: var(--fg, #000000);
    background: var(--btn-secondary-hover-bg, #fafafa);
    border-color: var(--border, #e5e5e5);
}
.zyla-modal__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

.zyla-modal__icon {
    width: 56px;
    height: 56px;
    margin: 4px auto 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--danger-bg, #fef2f2);
    color: var(--danger-fg, #991b1b);
    border: 1px solid var(--danger-border, #fecaca);
}

.zyla-modal__title {
    margin: 0 0 8px;
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--fg, #000000);
    letter-spacing: -0.01em;
}

.zyla-modal__body {
    color: var(--fg-secondary, #525252);
    font-size: 0.92rem;
    line-height: 1.55;
    max-height: 360px;
    overflow-y: auto;
    text-align: left;
    margin-top: 6px;
}
.zyla-modal__body strong { color: var(--fg, #000000); font-weight: 600; }
.zyla-modal__list {
    margin: 8px 0 12px;
    padding-left: 18px;
}
.zyla-modal__list li { margin-bottom: 4px; }
.zyla-modal__hint { color: var(--fg-secondary, #525252); font-style: italic; }

.zyla-modal__actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

.zyla-btn {
    border-radius: var(--radius-md, 8px);
    height: 40px;
    padding: 0 18px;
    font-size: 0.88rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.zyla-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}
.zyla-btn--primary {
    background: var(--btn-primary-bg, #000000);
    color: var(--btn-primary-fg, #ffffff);
    border-color: var(--btn-primary-bg, #000000);
}
.zyla-btn--primary:hover {
    background: var(--btn-primary-hover-bg, #262626);
    border-color: var(--btn-primary-hover-bg, #262626);
}
.zyla-btn--secondary {
    background: var(--btn-secondary-bg, #ffffff);
    color: var(--btn-secondary-fg, #000000);
    border-color: var(--btn-secondary-border, #e5e5e5);
}
.zyla-btn--secondary:hover {
    background: var(--btn-secondary-hover-bg, #fafafa);
    border-color: var(--border-strong, #d4d4d4);
}

@media (max-width: 540px) {
    .zyla-modal { padding: 16px; }
    .zyla-modal__content { padding: 24px 20px 18px; }
}