:root {
    --wa-green: #25d366;
    --wa-green-dark: #128c7e;
    --wa-green-light: #dcfce7;
    --app-charcoal: #111827;
    --app-muted: #6b7280;
    --app-bg: #f3f4f6;
    --app-border: #e5e7eb;
    --app-card: #ffffff;
    --app-warning: #f59e0b;
    --app-danger: #dc2626;
    --app-info: #3b82f6;
    --app-purple: #8b5cf6;
    --app-radius: 18px;
    --app-transition: .2s cubic-bezier(.4, 0, .2, 1);
}

/* ── Global transitions ── */
*, *::before, *::after {
    transition-property: background-color, border-color, color, box-shadow, opacity, transform;
    transition-duration: 0s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

a, button, .btn, .sidebar-link, .conversation-item, .app-card,
.form-control, .form-select, .status-badge, .nav-link, .table td {
    transition-duration: var(--app-transition);
}

body {
    background: var(--app-bg);
    color: var(--app-charcoal);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── App shell ── */
.app-shell {
    min-height: 100vh;
    display: flex;
}

/* ── Sidebar ── */
.app-sidebar {
    width: 270px;
    min-height: 100vh;
    padding: 22px 18px;
    color: #fff;
    position: sticky;
    top: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}

.app-sidebar.platform {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #1a2332 100%);
}

.app-sidebar.inbox {
    background: linear-gradient(180deg, #064e3b 0%, #065f46 40%, #047857 100%);
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .15);
    font-weight: 800;
    font-size: 1.1rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.sidebar-section-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .4);
    padding: 8px 12px 4px;
    margin-top: 8px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, .72);
    border-radius: 10px;
    text-decoration: none;
    margin-bottom: 2px;
    font-size: .9rem;
    font-weight: 500;
    position: relative;
}

.sidebar-link i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    opacity: .8;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    transform: translateX(3px);
}

.sidebar-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 3px 0 0 var(--wa-green);
    font-weight: 600;
}

.sidebar-link.active i {
    opacity: 1;
    color: var(--wa-green);
}

.sidebar-link .badge {
    font-size: .6rem;
    padding: 2px 6px;
    margin-left: auto;
}

/* ── Top bar ── */
.app-main {
    flex: 1;
    min-width: 0;
}

.app-topbar {
    min-height: 72px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--app-border);
    padding: 16px 28px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-content {
    padding: 28px;
}

/* ── Cards ── */
.app-card {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .04);
}

.app-card:hover {
    box-shadow: 0 4px 12px rgba(17, 24, 39, .06), 0 16px 40px rgba(17, 24, 39, .06);
}

/* ── Metric cards with colored accent ── */
.metric-card {
    padding: 22px;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--metric-accent, var(--wa-green));
    border-radius: var(--app-radius) var(--app-radius) 0 0;
}

.metric-card.metric-green::before { background: linear-gradient(90deg, #25d366, #34d399); }
.metric-card.metric-blue::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.metric-card.metric-purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.metric-card.metric-orange::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.metric-card.metric-red::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.metric-card.metric-teal::before { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.metric-icon.icon-green { background: #dcfce7; color: #16a34a; }
.metric-icon.icon-blue { background: #dbeafe; color: #2563eb; }
.metric-icon.icon-purple { background: #ede9fe; color: #7c3aed; }
.metric-icon.icon-orange { background: #fef3c7; color: #d97706; }
.metric-icon.icon-red { background: #fee2e2; color: #dc2626; }
.metric-icon.icon-teal { background: #ccfbf1; color: #0d9488; }

.metric-label {
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.metric-value {
    font-size: 2rem;
    font-weight: 800;
    margin: 4px 0 0;
    line-height: 1.1;
}

.metric-trend {
    font-size: .78rem;
    font-weight: 600;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.metric-trend.up { color: #16a34a; }
.metric-trend.down { color: #dc2626; }

/* ── Buttons ── */
.btn {
    font-weight: 600;
    border-radius: 10px;
    letter-spacing: .01em;
}

.btn-brand {
    --bs-btn-bg: var(--wa-green);
    --bs-btn-border-color: var(--wa-green);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #20bd5b;
    --bs-btn-hover-border-color: #20bd5b;
    --bs-btn-hover-color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(37, 211, 102, .3);
}

.btn-brand:hover {
    box-shadow: 0 4px 16px rgba(37, 211, 102, .4);
    transform: translateY(-1px);
}

.btn-brand:active {
    transform: translateY(0);
}

/* ── Badges ── */
.status-badge {
    border-radius: 999px;
    padding: .35rem .7rem;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-soft-success {
    color: #047857;
    background: #d1fae5;
}

.badge-soft-warning {
    color: #92400e;
    background: #fef3c7;
}

.badge-soft-danger {
    color: #991b1b;
    background: #fee2e2;
}

.badge-soft-info {
    color: #075985;
    background: #e0f2fe;
}

.badge-soft-secondary {
    color: #4b5563;
    background: #f3f4f6;
}

.badge-soft-purple {
    color: #6d28d9;
    background: #ede9fe;
}

/* Tenant settings — assigned AI model (read-only) */
.settings-assigned-model {
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 55%, #ede9fe 100%);
    border: 1px solid #93c5fd;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    color: #0f172a;
}

.settings-assigned-model__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .72);
    border: 1px solid #bfdbfe;
    color: #2563eb;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.settings-assigned-model__lead {
    color: #475569 !important;
}

.settings-assigned-model__value {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid #93c5fd;
}

.settings-assigned-model__label {
    font-weight: 600;
    color: #0c4a6e;
    font-size: .875rem;
}

.settings-assigned-model__code {
    font-size: .8rem;
    color: #0369a1;
    background: rgba(14, 116, 144, .12);
    padding: .2rem .45rem;
    border-radius: 6px;
}

/* Animated pulse for live badges */
.badge-pulse {
    position: relative;
}

.badge-pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
    animation: pulse-dot 2s ease-in-out infinite;
}

.badge-pulse { padding-left: 20px; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50% { opacity: .4; transform: translateY(-50%) scale(.8); }
}

/* ── Empty states ── */
.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--app-muted);
}

.empty-state i.bi {
    font-size: 3rem;
    opacity: .3;
    display: block;
    margin-bottom: 12px;
}

/* ── Guest / Login page ── */
.guest-bg {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(37, 211, 102, .15), transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, .1), transparent 50%),
        linear-gradient(135deg, #0f172a 0%, #111827 46%, #064e3b 100%);
    animation: guest-bg-shift 20s ease-in-out infinite alternate;
}

@keyframes guest-bg-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.guest-card {
    max-width: 460px;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .3);
    animation: card-enter .5s ease-out;
}

@keyframes card-enter {
    from { opacity: 0; transform: translateY(20px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Tables ── */
.table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-card table {
    margin: 0;
    min-width: 640px;
}

.table-card th {
    color: var(--app-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

.table tbody tr {
    transition: background-color var(--app-transition);
}

.table-hover tbody tr:hover {
    background-color: rgba(37, 211, 102, .04) !important;
}

/* ── Chat ── */
.chat-shell {
    height: calc(100vh - 128px);
    min-height: 680px;
}

.conversation-list {
    height: 100%;
    overflow: auto;
}

.conversation-item {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--app-border);
    background: #fff;
    text-align: left;
    padding: 14px 16px;
    cursor: pointer;
}

.conversation-item:hover {
    background: #f0fdf4;
}

.conversation-item.active {
    background: #ecfdf5;
    border-left: 3px solid var(--wa-green);
}

.chat-thread {
    background: #efeae2;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d1d5db' fill-opacity='.08'%3E%3Cpath d='M0 40L40 0H20L0 20zM40 40V20L20 40z'/%3E%3C/g%3E%3C/svg%3E");
}

.message-bubble {
    max-width: 72%;
    padding: 10px 13px;
    border-radius: 16px;
    display: inline-block;
    box-shadow: 0 1px 4px rgba(17, 24, 39, .08);
    animation: msg-appear .25s ease-out;
}

@keyframes msg-appear {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.message-in {
    background: #fff;
    border-top-left-radius: 4px;
}

.message-out {
    background: #d9fdd3;
    border-top-right-radius: 4px;
}

.context-panel {
    background: #fff;
    border-left: 1px solid var(--app-border);
}

/* ── Flash alerts with animation ── */
.alert {
    animation: alert-slide .3s ease-out;
    border-radius: 12px;
    border-left-width: 4px;
}

@keyframes alert-slide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Form polish ── */
.form-control, .form-select {
    border-radius: 10px;
    padding: .55rem .85rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--wa-green);
    box-shadow: 0 0 0 .2rem rgba(37, 211, 102, .15);
}

/* ── Notification bell ── */
.notification-bell {
    position: relative;
    display: inline-block;
}

.notification-bell .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: .55rem;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    animation: bell-bounce .5s ease;
}

@keyframes bell-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* ── Spinner / loading ── */
.wire-loading {
    display: none;
}

[wire\:loading] .wire-loading {
    display: inline-block;
}

.skeleton {
    background: linear-gradient(90deg, var(--app-border) 25%, #f0f0f0 50%, var(--app-border) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 6px;
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.btn[wire\:loading][wire\:loading\.attr="disabled"] {
    opacity: 0.65;
    cursor: not-allowed;
}

.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* ── Page enter animation ── */
.app-content {
    animation: page-fade .3s ease-out;
}

@keyframes page-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Utility: count-up animation for metric values ── */
.metric-value {
    animation: count-pop .4s ease-out;
}

@keyframes count-pop {
    from { opacity: 0; transform: scale(.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ── Tooltip style ── */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--app-charcoal);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .72rem;
    white-space: nowrap;
    z-index: 1000;
    animation: tooltip-pop .15s ease-out;
}

@keyframes tooltip-pop {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --app-bg: #111827;
        --app-charcoal: #f9fafb;
        --app-muted: #9ca3af;
        --app-border: #374151;
        --app-card: #1f2937;
    }

    :root:not([data-theme="light"]) body {
        background: var(--app-bg);
        color: var(--app-charcoal);
    }

    :root:not([data-theme="light"]) .app-topbar {
        background: rgba(31, 41, 55, .82);
        border-color: var(--app-border);
    }

    :root:not([data-theme="light"]) .conversation-item {
        background: var(--app-card);
        border-color: var(--app-border);
    }

    :root:not([data-theme="light"]) .conversation-item.active,
    :root:not([data-theme="light"]) .conversation-item:hover {
        background: #1a3a2f;
    }

    :root:not([data-theme="light"]) .chat-thread {
        background: #1a202c;
    }

    :root:not([data-theme="light"]) .message-in {
        background: #374151;
        color: #f9fafb;
    }

    :root:not([data-theme="light"]) .message-out {
        background: #1e4620;
        color: #f9fafb;
    }

    :root:not([data-theme="light"]) .context-panel {
        background: var(--app-card);
        border-color: var(--app-border);
    }

    :root:not([data-theme="light"]) .table {
        --bs-table-bg: var(--app-card);
        --bs-table-color: var(--app-charcoal);
        --bs-table-border-color: var(--app-border);
        --bs-table-hover-bg: rgba(255, 255, 255, .05);
    }

    :root:not([data-theme="light"]) .form-control,
    :root:not([data-theme="light"]) .form-select {
        background-color: #374151;
        border-color: var(--app-border);
        color: var(--app-charcoal);
    }

    :root:not([data-theme="light"]) .guest-card {
        background: #1f2937;
    }
}

[data-theme="dark"] {
    --app-bg: #111827;
    --app-charcoal: #f9fafb;
    --app-muted: #9ca3af;
    --app-border: #374151;
    --app-card: #1f2937;
}

[data-theme="dark"] .app-topbar {
    background: rgba(31, 41, 55, .82);
    border-color: var(--app-border);
}

[data-theme="dark"] .conversation-item {
    background: var(--app-card);
    border-color: var(--app-border);
}

[data-theme="dark"] .conversation-item.active,
[data-theme="dark"] .conversation-item:hover {
    background: #1a3a2f;
}

[data-theme="dark"] .chat-thread {
    background: #1a202c;
}

[data-theme="dark"] .message-in {
    background: #374151;
    color: #f9fafb;
}

[data-theme="dark"] .message-out {
    background: #1e4620;
    color: #f9fafb;
}

[data-theme="dark"] .context-panel {
    background: var(--app-card);
    border-color: var(--app-border);
}

[data-theme="dark"] .table {
    --bs-table-bg: var(--app-card);
    --bs-table-color: var(--app-charcoal);
    --bs-table-border-color: var(--app-border);
    --bs-table-hover-bg: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #374151;
    border-color: var(--app-border);
    color: var(--app-charcoal);
}

/* ── Dark mode: shared overrides (used by both [data-theme] and @media) ── */
[data-theme="dark"] body,
[data-theme="dark"] .app-content {
    background: var(--app-bg);
    color: var(--app-charcoal);
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3,
[data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6 {
    color: var(--app-charcoal);
}

[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label,
[data-theme="dark"] label {
    color: var(--app-charcoal);
}

[data-theme="dark"] .form-control::placeholder {
    color: #6b7280;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--wa-green);
    box-shadow: 0 0 0 .25rem rgba(37, 211, 102, .15);
}

[data-theme="dark"] .form-text,
[data-theme="dark"] .text-muted {
    color: var(--app-muted) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--app-charcoal) !important;
}

[data-theme="dark"] dt {
    color: var(--app-muted);
}

[data-theme="dark"] dd {
    color: var(--app-charcoal);
}

[data-theme="dark"] code {
    color: #a5f3fc;
    background: rgba(255, 255, 255, .06);
    padding: 2px 5px;
    border-radius: 4px;
}

[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #d1d5db;
    --bs-btn-border-color: #4b5563;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4b5563;
    --bs-btn-hover-border-color: #6b7280;
}

[data-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #fca5a5;
    --bs-btn-border-color: #7f1d1d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #991b1b;
}

[data-theme="dark"] .btn-outline-warning {
    --bs-btn-color: #fcd34d;
    --bs-btn-border-color: #92400e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #a16207;
}

[data-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #93c5fd;
    --bs-btn-border-color: #1e40af;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1e40af;
    --bs-btn-hover-border-color: #2563eb;
}

[data-theme="dark"] .btn-outline-success {
    --bs-btn-color: #6ee7b7;
    --bs-btn-border-color: #065f46;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #047857;
    --bs-btn-hover-border-color: #059669;
}

[data-theme="dark"] .btn-outline-info {
    --bs-btn-color: #67e8f9;
    --bs-btn-border-color: #0e7490;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0891b2;
}

[data-theme="dark"] .btn-outline-light {
    --bs-btn-color: #e5e7eb;
    --bs-btn-border-color: #4b5563;
}

[data-theme="dark"] .bg-light {
    background-color: #374151 !important;
    color: var(--app-charcoal);
}

[data-theme="dark"] .bg-white {
    background-color: var(--app-card) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: var(--app-border) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .popover,
[data-theme="dark"] .offcanvas {
    background-color: var(--app-card);
    color: var(--app-charcoal);
    border-color: var(--app-border);
}

[data-theme="dark"] .alert-success {
    background-color: #064e3b;
    border-color: #065f46;
    color: #a7f3d0;
}

[data-theme="dark"] .alert-danger {
    background-color: #7f1d1d;
    border-color: #991b1b;
    color: #fecaca;
}

[data-theme="dark"] .alert-warning {
    background-color: #78350f;
    border-color: #92400e;
    color: #fde68a;
}

[data-theme="dark"] .alert-info {
    background-color: #1e3a5f;
    border-color: #1e40af;
    color: #bfdbfe;
}

[data-theme="dark"] .nav-tabs {
    border-color: var(--app-border);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--app-muted);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: #4b5563 #4b5563 var(--app-border);
    color: var(--app-charcoal);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--app-card);
    border-color: var(--app-border) var(--app-border) var(--app-card);
    color: var(--app-charcoal);
}

[data-theme="dark"] .page-link {
    background-color: var(--app-card);
    border-color: var(--app-border);
    color: var(--app-charcoal);
}

[data-theme="dark"] .page-link:hover {
    background-color: #374151;
    border-color: #4b5563;
    color: #fff;
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--wa-green);
    border-color: var(--wa-green);
    color: #fff;
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: #1f2937;
    border-color: var(--app-border);
    color: #4b5563;
}

[data-theme="dark"] .table thead th {
    color: var(--app-muted);
    border-color: var(--app-border);
}

[data-theme="dark"] .table td {
    color: var(--app-charcoal);
    border-color: var(--app-border);
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: #4b5563 !important;
    color: #e5e7eb;
}

[data-theme="dark"] .badge.bg-success {
    background-color: #065f46 !important;
    color: #a7f3d0;
}

[data-theme="dark"] .badge.bg-warning {
    background-color: #92400e !important;
    color: #fde68a;
}

[data-theme="dark"] .badge.bg-danger {
    background-color: #991b1b !important;
    color: #fecaca;
}

[data-theme="dark"] .badge.bg-primary {
    background-color: #1e40af !important;
    color: #bfdbfe;
}

[data-theme="dark"] .badge.bg-info {
    background-color: #0e7490 !important;
    color: #a5f3fc;
}

[data-theme="dark"] .badge-soft-success {
    color: #6ee7b7;
    background: rgba(6, 95, 70, .5);
}

[data-theme="dark"] .badge-soft-warning {
    color: #fcd34d;
    background: rgba(146, 64, 14, .5);
}

[data-theme="dark"] .badge-soft-danger {
    color: #fca5a5;
    background: rgba(153, 27, 27, .5);
}

[data-theme="dark"] .badge-soft-info {
    color: #7dd3fc;
    background: rgba(14, 116, 144, .5);
}

[data-theme="dark"] .settings-assigned-model {
    background: linear-gradient(135deg, rgba(12, 74, 110, .55) 0%, rgba(49, 46, 129, .45) 100%);
    border-color: #155e75;
    color: #f1f5f9;
}

[data-theme="dark"] .settings-assigned-model__icon {
    background: rgba(15, 23, 42, .72);
    border-color: #0e7490;
    color: #7dd3fc;
}

[data-theme="dark"] .settings-assigned-model__lead {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .settings-assigned-model__value {
    background: rgba(15, 23, 42, .72);
    border-color: #0e7490;
}

[data-theme="dark"] .settings-assigned-model__label {
    color: #e0f2fe;
}

[data-theme="dark"] .settings-assigned-model__code {
    color: #a5f3fc;
    background: rgba(8, 47, 73, .65);
}

[data-theme="dark"] .badge-soft-secondary {
    color: #d1d5db;
    background: rgba(75, 85, 99, .5);
}

[data-theme="dark"] .progress {
    background-color: #374151;
}

[data-theme="dark"] .form-check-input {
    background-color: #374151;
    border-color: #4b5563;
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--wa-green);
    border-color: var(--wa-green);
}

[data-theme="dark"] hr {
    border-color: var(--app-border);
    opacity: .5;
}

[data-theme="dark"] a:not(.sidebar-link):not(.btn):not(.nav-link):not(.page-link) {
    color: #6ee7b7;
}

[data-theme="dark"] a:not(.sidebar-link):not(.btn):not(.nav-link):not(.page-link):hover {
    color: #a7f3d0;
}

[data-theme="dark"] .text-primary {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-success {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .text-danger {
    color: #fca5a5 !important;
}

[data-theme="dark"] .text-warning {
    color: #fcd34d !important;
}

[data-theme="dark"] .text-info {
    color: #67e8f9 !important;
}

[data-theme="dark"] .guest-card {
    background: #1f2937;
    color: var(--app-charcoal);
}

[data-theme="dark"] .guest-card .form-label,
[data-theme="dark"] .guest-card label {
    color: #d1d5db;
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

[data-theme="dark"] .text-decoration-line-through {
    color: #6b7280 !important;
}

[data-theme="dark"] .border-primary {
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .text-body {
    color: var(--app-charcoal) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] div {
    color: inherit;
}

[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: var(--app-muted);
}

[data-theme="dark"] .fw-semibold,
[data-theme="dark"] .fw-bold {
    color: inherit;
}

[data-theme="dark"] pre {
    background-color: #374151;
    color: #e5e7eb;
    border-color: var(--app-border);
}

[data-theme="dark"] .form-select::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] input::placeholder {
    color: #6b7280 !important;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled {
    background-color: #1f2937;
    color: #6b7280;
    border-color: var(--app-border);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] select option {
    background-color: #374151;
    color: var(--app-charcoal);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(255, 255, 255, .03);
    color: var(--app-charcoal);
}

[data-theme="dark"] .list-group-item {
    background-color: var(--app-card);
    color: var(--app-charcoal);
    border-color: var(--app-border);
}

[data-theme="dark"] .input-group-text {
    background-color: #374151;
    color: var(--app-charcoal);
    border-color: var(--app-border);
}

[data-theme="dark"] .metric-label {
    color: var(--app-muted);
}

[data-theme="dark"] .metric-value {
    color: var(--app-charcoal);
}

[data-theme="dark"] .empty-state {
    color: var(--app-muted);
}

[data-theme="dark"] .form-floating > label {
    color: #6b7280;
}

[data-theme="dark"] .tooltip-inner {
    background-color: #374151;
    color: #f9fafb;
}

[data-theme="dark"] ::selection {
    background: rgba(37, 211, 102, .3);
    color: #fff;
}

/* ── Duplicate for @media prefers-color-scheme ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2,
    :root:not([data-theme="light"]) h3, :root:not([data-theme="light"]) h4,
    :root:not([data-theme="light"]) h5, :root:not([data-theme="light"]) h6 {
        color: #f9fafb;
    }
    :root:not([data-theme="light"]) .form-label,
    :root:not([data-theme="light"]) .form-check-label,
    :root:not([data-theme="light"]) label {
        color: #f9fafb;
    }
    :root:not([data-theme="light"]) .text-muted {
        color: #9ca3af !important;
    }
    :root:not([data-theme="light"]) dt { color: #9ca3af; }
    :root:not([data-theme="light"]) dd { color: #f9fafb; }
    :root:not([data-theme="light"]) code {
        color: #a5f3fc;
        background: rgba(255, 255, 255, .06);
        padding: 2px 5px;
        border-radius: 4px;
    }
    :root:not([data-theme="light"]) .btn-outline-secondary {
        --bs-btn-color: #d1d5db;
        --bs-btn-border-color: #4b5563;
    }
    :root:not([data-theme="light"]) .bg-light {
        background-color: #374151 !important;
        color: #f9fafb;
    }
    :root:not([data-theme="light"]) .bg-white {
        background-color: #1f2937 !important;
    }
    :root:not([data-theme="light"]) .border,
    :root:not([data-theme="light"]) .border-bottom {
        border-color: #374151 !important;
    }
    :root:not([data-theme="light"]) .alert-success {
        background-color: #064e3b; border-color: #065f46; color: #a7f3d0;
    }
    :root:not([data-theme="light"]) .alert-danger {
        background-color: #7f1d1d; border-color: #991b1b; color: #fecaca;
    }
    :root:not([data-theme="light"]) .nav-tabs { border-color: #374151; }
    :root:not([data-theme="light"]) .nav-tabs .nav-link { color: #9ca3af; }
    :root:not([data-theme="light"]) .nav-tabs .nav-link.active {
        background-color: #1f2937; border-color: #374151 #374151 #1f2937; color: #f9fafb;
    }
    :root:not([data-theme="light"]) .page-link {
        background-color: #1f2937; border-color: #374151; color: #f9fafb;
    }
    :root:not([data-theme="light"]) .table thead th {
        color: #9ca3af; border-color: #374151;
    }
    :root:not([data-theme="light"]) .table td {
        color: #f9fafb; border-color: #374151;
    }
    :root:not([data-theme="light"]) .badge-soft-success { color: #6ee7b7; background: rgba(6,95,70,.5); }
    :root:not([data-theme="light"]) .badge-soft-warning { color: #fcd34d; background: rgba(146,64,14,.5); }
    :root:not([data-theme="light"]) .badge-soft-danger  { color: #fca5a5; background: rgba(153,27,27,.5); }
    :root:not([data-theme="light"]) .form-check-input {
        background-color: #374151; border-color: #4b5563;
    }
    :root:not([data-theme="light"]) .progress { background-color: #374151; }
    :root:not([data-theme="light"]) hr { border-color: #374151; }
    :root:not([data-theme="light"]) a:not(.sidebar-link):not(.btn):not(.nav-link):not(.page-link) { color: #6ee7b7; }
    :root:not([data-theme="light"]) .text-primary { color: #60a5fa !important; }
    :root:not([data-theme="light"]) .text-success { color: #6ee7b7 !important; }
    :root:not([data-theme="light"]) .text-danger  { color: #fca5a5 !important; }
    :root:not([data-theme="light"]) .badge.bg-secondary { background-color: #4b5563 !important; color: #e5e7eb; }
    :root:not([data-theme="light"]) .badge.bg-success { background-color: #065f46 !important; color: #a7f3d0; }
    :root:not([data-theme="light"]) .badge.bg-warning { background-color: #92400e !important; color: #fde68a; }
    :root:not([data-theme="light"]) .badge.bg-danger { background-color: #991b1b !important; color: #fecaca; }
    :root:not([data-theme="light"]) .badge.bg-primary { background-color: #1e40af !important; color: #bfdbfe; }
    :root:not([data-theme="light"]) .badge.bg-info { background-color: #0e7490 !important; color: #a5f3fc; }
    :root:not([data-theme="light"]) .badge-soft-info { color: #7dd3fc; background: rgba(14,116,144,.5); }
    :root:not([data-theme="light"]) .settings-assigned-model {
        background: linear-gradient(135deg, rgba(12, 74, 110, .55) 0%, rgba(49, 46, 129, .45) 100%);
        border-color: #155e75;
        color: #f1f5f9;
    }
    :root:not([data-theme="light"]) .settings-assigned-model__icon {
        background: rgba(15, 23, 42, .72);
        border-color: #0e7490;
        color: #7dd3fc;
    }
    :root:not([data-theme="light"]) .settings-assigned-model__lead { color: #cbd5e1 !important; }
    :root:not([data-theme="light"]) .settings-assigned-model__value {
        background: rgba(15, 23, 42, .72);
        border-color: #0e7490;
    }
    :root:not([data-theme="light"]) .settings-assigned-model__label { color: #e0f2fe; }
    :root:not([data-theme="light"]) .settings-assigned-model__code {
        color: #a5f3fc;
        background: rgba(8, 47, 73, .65);
    }
    :root:not([data-theme="light"]) .badge-soft-secondary { color: #d1d5db; background: rgba(75,85,99,.5); }
    :root:not([data-theme="light"]) .text-body { color: #f9fafb !important; }
    :root:not([data-theme="light"]) small,
    :root:not([data-theme="light"]) .small { color: #9ca3af; }
    :root:not([data-theme="light"]) pre { background-color: #374151; color: #e5e7eb; border-color: #374151; }
    :root:not([data-theme="light"]) .form-select::placeholder,
    :root:not([data-theme="light"]) textarea::placeholder,
    :root:not([data-theme="light"]) input::placeholder { color: #6b7280 !important; }
    :root:not([data-theme="light"]) .form-control::placeholder { color: #6b7280; }
    :root:not([data-theme="light"]) .form-control:disabled,
    :root:not([data-theme="light"]) .form-control[readonly],
    :root:not([data-theme="light"]) .form-select:disabled { background-color: #1f2937; color: #6b7280; }
    :root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
    :root:not([data-theme="light"]) select option { background-color: #374151; color: #f9fafb; }
    :root:not([data-theme="light"]) .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: rgba(255,255,255,.03); color: #f9fafb; }
    :root:not([data-theme="light"]) .list-group-item { background-color: #1f2937; color: #f9fafb; border-color: #374151; }
    :root:not([data-theme="light"]) .input-group-text { background-color: #374151; color: #f9fafb; border-color: #374151; }
    :root:not([data-theme="light"]) .text-warning { color: #fcd34d !important; }
    :root:not([data-theme="light"]) .text-info { color: #67e8f9 !important; }
    :root:not([data-theme="light"]) .text-dark { color: #f9fafb !important; }
    :root:not([data-theme="light"]) .alert-warning { background-color: #78350f; border-color: #92400e; color: #fde68a; }
    :root:not([data-theme="light"]) .alert-info { background-color: #1e3a5f; border-color: #1e40af; color: #bfdbfe; }
    :root:not([data-theme="light"]) .card,
    :root:not([data-theme="light"]) .dropdown-menu,
    :root:not([data-theme="light"]) .modal-content { background-color: #1f2937; color: #f9fafb; border-color: #374151; }
    :root:not([data-theme="light"]) .btn-outline-secondary { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4b5563; --bs-btn-hover-border-color: #6b7280; }
    :root:not([data-theme="light"]) .btn-outline-danger { --bs-btn-color: #fca5a5; --bs-btn-border-color: #7f1d1d; }
    :root:not([data-theme="light"]) .guest-card { background: #1f2937; color: #f9fafb; }
    :root:not([data-theme="light"]) .guest-card .form-label,
    :root:not([data-theme="light"]) .guest-card label { color: #d1d5db; }
    :root:not([data-theme="light"]) .metric-label { color: #9ca3af; }
    :root:not([data-theme="light"]) .metric-value { color: #f9fafb; }
    :root:not([data-theme="light"]) .empty-state { color: #9ca3af; }
    :root:not([data-theme="light"]) .page-item.active .page-link { background-color: #25d366; border-color: #25d366; color: #fff; }
    :root:not([data-theme="light"]) .page-item.disabled .page-link { background-color: #1f2937; border-color: #374151; color: #4b5563; }
    :root:not([data-theme="light"]) .page-link:hover { background-color: #374151; border-color: #4b5563; color: #fff; }
    :root:not([data-theme="light"]) .skeleton { background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%); background-size: 200% 100%; }
    :root:not([data-theme="light"]) .theme-toggle:hover { background: rgba(255,255,255,.1); }
}

/* Dark mode toggle button */
.theme-toggle {
    background: none;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--app-charcoal);
    font-size: 1.1rem;
}

.theme-toggle:hover {
    background: rgba(0, 0, 0, .05);
}

/* Locale switcher (topbar + guest login) */
.locale-switcher__menu {
    --bs-dropdown-link-color: var(--app-charcoal);
    --bs-dropdown-link-hover-color: var(--app-charcoal);
    --bs-dropdown-link-hover-bg: rgba(17, 24, 39, .06);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--wa-green-dark);
    min-width: 10rem;
}

.locale-switcher__menu .dropdown-item,
.locale-switcher__menu .locale-switcher__option {
    width: 100%;
    text-align: left;
    color: var(--app-charcoal) !important;
    background-color: transparent;
    border: 0;
    font-weight: 500;
}

.locale-switcher__menu .dropdown-item:hover,
.locale-switcher__menu .dropdown-item:focus,
.locale-switcher__menu .locale-switcher__option:hover,
.locale-switcher__menu .locale-switcher__option:focus {
    color: var(--app-charcoal) !important;
    background-color: rgba(17, 24, 39, .06);
}

.locale-switcher__menu .dropdown-item.active,
.locale-switcher__menu .locale-switcher__option.active {
    color: #fff !important;
    background-color: var(--wa-green-dark);
}

.app-topbar .locale-switcher .theme-toggle,
.locale-switcher .theme-toggle {
    color: var(--app-charcoal);
}

.app-topbar .locale-switcher .locale-switcher__label,
.locale-switcher .locale-switcher__label {
    color: inherit;
}

[data-theme="dark"] .locale-switcher__menu {
    --bs-dropdown-link-color: #f9fafb;
    --bs-dropdown-link-hover-color: #f9fafb;
    --bs-dropdown-link-hover-bg: #374151;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #128c7e;
}

[data-theme="dark"] .locale-switcher__menu .dropdown-item,
[data-theme="dark"] .locale-switcher__menu .locale-switcher__option {
    color: #f9fafb !important;
}

[data-theme="dark"] .locale-switcher__menu .dropdown-item:hover,
[data-theme="dark"] .locale-switcher__menu .dropdown-item:focus,
[data-theme="dark"] .locale-switcher__menu .locale-switcher__option:hover,
[data-theme="dark"] .locale-switcher__menu .locale-switcher__option:focus {
    color: #f9fafb !important;
    background-color: #374151 !important;
}

[data-theme="dark"] .locale-switcher__menu .dropdown-item.active,
[data-theme="dark"] .locale-switcher__menu .locale-switcher__option.active {
    color: #fff !important;
    background-color: #128c7e !important;
}

[data-theme="dark"] .app-topbar .locale-switcher .theme-toggle,
[data-theme="dark"] .locale-switcher .theme-toggle {
    color: #f9fafb;
    border-color: var(--app-border);
}

[data-theme="dark"] .app-topbar .locale-switcher .theme-toggle:hover,
[data-theme="dark"] .locale-switcher .theme-toggle:hover {
    background: rgba(255, 255, 255, .1);
    color: #f9fafb;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .locale-switcher__menu {
        --bs-dropdown-link-color: #f9fafb;
        --bs-dropdown-link-hover-color: #f9fafb;
        --bs-dropdown-link-hover-bg: #374151;
        --bs-dropdown-link-active-color: #fff;
        --bs-dropdown-link-active-bg: #128c7e;
    }

    :root:not([data-theme="light"]) .locale-switcher__menu .dropdown-item,
    :root:not([data-theme="light"]) .locale-switcher__menu .locale-switcher__option {
        color: #f9fafb !important;
    }

    :root:not([data-theme="light"]) .locale-switcher__menu .dropdown-item:hover,
    :root:not([data-theme="light"]) .locale-switcher__menu .dropdown-item:focus,
    :root:not([data-theme="light"]) .locale-switcher__menu .locale-switcher__option:hover,
    :root:not([data-theme="light"]) .locale-switcher__menu .locale-switcher__option:focus {
        color: #f9fafb !important;
        background-color: #374151 !important;
    }

    :root:not([data-theme="light"]) .locale-switcher__menu .dropdown-item.active,
    :root:not([data-theme="light"]) .locale-switcher__menu .locale-switcher__option.active {
        color: #fff !important;
        background-color: #128c7e !important;
    }

    :root:not([data-theme="light"]) .app-topbar .locale-switcher .theme-toggle,
    :root:not([data-theme="light"]) .locale-switcher .theme-toggle {
        color: #f9fafb;
        border-color: #374151;
    }
}

/* Notification bell */
.notification-bell {
    position: relative;
    display: inline-block;
}

.notification-bell .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: .6rem;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
}

/* ── Mobile shell & inbox ── */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1040;
}

body.app-sidebar-open {
    overflow: hidden;
}

body.app-sidebar-open .sidebar-backdrop {
    display: block;
}

.inbox-filter-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: .35rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
    margin-bottom: .25rem;
}

.inbox-filter-scroll .btn {
    flex-shrink: 0;
}

.inbox-workspace.app-content {
    padding-top: .75rem;
}

.message-bubble {
    max-width: min(72%, calc(100vw - 3rem));
}

@media (max-width: 991.98px) {
    .app-shell {
        display: block;
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: min(290px, 88vw);
        min-height: 100vh;
        min-height: 100dvh;
        transform: translateX(-105%);
        transition: transform .25s ease;
        box-shadow: 8px 0 32px rgba(0, 0, 0, .18);
    }

    body.app-sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .app-topbar {
        padding: 12px 16px;
        min-height: 60px;
    }

    .app-content {
        padding: 16px;
    }

    .app-content > .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: .75rem;
    }

    .chat-shell {
        height: calc(100dvh - 118px);
        min-height: 420px;
    }

    .inbox-workspace.app-content {
        padding: .5rem .75rem 1rem;
    }

    .inbox-pane-list,
    .inbox-pane-thread,
    .inbox-pane-details {
        max-height: calc(100dvh - 130px);
    }

    .conversation-list {
        max-height: none;
        flex: 1 1 auto;
        min-height: 200px;
    }

    .metric-card {
        padding: 16px;
    }

    .guest-bg .container {
        max-width: 100%;
    }

    .guest-bg .app-card,
    .guest-bg .card {
        margin: 0 .25rem;
    }
}

@media (min-width: 992px) {
    .app-sidebar {
        flex-shrink: 0;
    }

    .inbox-pane-list,
    .inbox-pane-thread,
    .inbox-pane-details {
        max-height: none;
    }
}

/* SweetAlert2 — centered modals (follow app light/dark theme) */
.swal2-container {
    z-index: 20000 !important;
}

.app-swal-popup {
    border-radius: var(--app-radius);
    padding: 1.5rem 1.25rem 1.25rem;
    border: 1px solid var(--app-border, #e5e7eb);
    background: var(--app-card, #ffffff);
    color: var(--app-charcoal, #111827);
}

.app-swal-popup--light {
    background: #ffffff;
    color: #111827;
    border-color: #e5e7eb;
}

.app-swal-popup.app-swal-popup--dark,
[data-theme="dark"] .app-swal-popup,
[data-theme="dark"] .swal2-popup.app-swal-popup {
    background: var(--app-card, #1f2937) !important;
    color: var(--app-charcoal, #f9fafb) !important;
    border-color: var(--app-border, #374151) !important;
}

.app-swal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: inherit;
}

.app-swal-body {
    font-size: .95rem;
    color: var(--app-muted, #6b7280);
}

.app-swal-popup--dark .app-swal-body,
[data-theme="dark"] .app-swal-popup .app-swal-body {
    color: var(--app-muted, #9ca3af);
}

.app-swal-popup--dark .app-swal-body ul,
[data-theme="dark"] .app-swal-popup .app-swal-body ul {
    color: var(--app-charcoal, #f9fafb);
}

.app-swal-actions {
    gap: .5rem;
    margin-top: 1rem !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .app-swal-popup.app-swal-popup--dark,
    :root:not([data-theme="light"]) .app-swal-popup,
    :root:not([data-theme="light"]) .swal2-popup.app-swal-popup {
        background: var(--app-card, #1f2937) !important;
        color: var(--app-charcoal, #f9fafb) !important;
        border-color: var(--app-border, #374151) !important;
    }

    :root:not([data-theme="light"]) .app-swal-popup .app-swal-body {
        color: var(--app-muted, #9ca3af);
    }

    :root:not([data-theme="light"]) .app-swal-popup .app-swal-body ul {
        color: var(--app-charcoal, #f9fafb);
    }
}