/**
 * Dashboard light/dark theme tokens — Light Mode Hurra (professional dashboard)
 * Apply via html[data-chat-theme="light"|"dark"] on dashboard canvas pages.
 * Aliases shared CI primitives from chat-themes.css; BB V2 maps --bb-* to --dash-*.
 *
 * Surface stack (light):
 *   L0 page  — sand #f8f7f6
 *   L1 shell — white + panel shadow
 *   L2 card  — white + card shadow
 *   L3 inset — tab/sand #f3f2f1
 */

:root,
[data-chat-theme="dark"] {
    --dash-bg-page: #0b0b0b;
    --dash-bg-shell: #1a171a;
    --dash-bg-card: rgba(255, 255, 255, 0.078);
    --dash-bg-inset: rgba(0, 0, 0, 0.18);
    --dash-bg-tab: rgba(255, 255, 255, 0.04);
    --dash-bg-input: #0d0b0d;

    --dash-fg: rgba(255, 255, 255, 0.90);
    --dash-fg-muted: rgba(255, 255, 255, 0.50);
    --dash-fg-secondary: #767478;

    --dash-border: rgba(255, 255, 255, 0.09);
    --dash-border-strong: rgba(255, 255, 255, 0.15);

    --dash-shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --dash-shadow-card: none;
    --dash-shadow-elevated: 0 24px 64px rgba(0, 0, 0, 0.65);

    --dash-brand-wash: rgba(228, 0, 43, 0.06);
    --dash-brand-wash-strong: rgba(228, 0, 43, 0.10);
    --dash-surface-hover: rgba(255, 255, 255, 0.055);
}

[data-chat-theme="light"] {
    --dash-bg-page: var(--ci-sand, #f8f7f6);
    --dash-bg-shell: var(--ci-white, #ffffff);
    --dash-bg-card: var(--ci-white, #ffffff);
    --dash-bg-inset: var(--chat-bg-tab, #f3f2f1);
    --dash-bg-tab: var(--chat-bg-tab, #f3f2f1);
    --dash-bg-input: var(--ci-white, #ffffff);

    --dash-fg: var(--ci-dark-grey, #363131);
    --dash-fg-muted: var(--ci-grey, #767478);
    --dash-fg-secondary: var(--ci-grey, #767478);

    --dash-border: var(--ci-light-grey, #e0dfde);
    --dash-border-strong: var(--chat-border-strong, #d5d4d3);

    --dash-shadow-panel: var(
        --chat-shadow-card,
        0 1px 2px rgba(54, 49, 49, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.95)
    );
    --dash-shadow-card: var(
        --chat-shadow-card,
        0 1px 2px rgba(54, 49, 49, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.95)
    );
    --dash-shadow-elevated: var(
        --chat-shadow-prompt,
        0 8px 24px -8px rgba(54, 49, 49, 0.1),
        0 2px 6px -2px rgba(54, 49, 49, 0.06)
    );

    --dash-brand-wash: var(--chat-brand-wash, rgba(228, 0, 43, 0.05));
    --dash-brand-wash-strong: rgba(228, 0, 43, 0.08);
    --dash-surface-hover: rgba(54, 49, 49, 0.04);
}

/* Dashboard canvas uses L0 page background from tokens */
[data-chat-theme="light"] .dashboard-canvas-shell {
    background-color: var(--dash-bg-page);
}

[data-chat-theme="light"] .dashboard-canvas-shell main {
    color: var(--dash-fg);
}

/* Legacy Tailwind surface utilities → dash stack (canvas content only) */
[data-chat-theme="light"] .dashboard-canvas-shell main :is(
    [class~="bg-surface-black"],
    [class*="bg-surface-black/"]
) {
    background-color: var(--dash-bg-inset) !important;
}

[data-chat-theme="light"] .dashboard-canvas-shell main :is(
    [class*="border-surface-light"],
    [class*="border-white/"]
) {
    border-color: var(--dash-border) !important;
}

[data-chat-theme="light"] .dashboard-canvas-shell main .text-text-primary {
    color: var(--dash-fg) !important;
}

[data-chat-theme="light"] .dashboard-canvas-shell main .text-text-secondary,
[data-chat-theme="light"] .dashboard-canvas-shell main [class*="text-text-secondary"] {
    color: var(--dash-fg-muted) !important;
}

[data-chat-theme="light"] .dashboard-canvas-shell main :is(
    [class~="bg-surface-dark"],
    [class*="bg-surface-dark/"]
) {
    background-color: var(--dash-bg-card) !important;
}

/* Teleported modals (outside main) — subscription checkout */
[data-chat-theme="light"] #sidebar-plan-checkout-modal .bg-black\/60 {
    background-color: rgba(54, 49, 49, 0.32) !important;
}

[data-chat-theme="light"] #sidebar-plan-checkout-modal .bg-surface-dark {
    background-color: var(--dash-bg-card, #ffffff) !important;
    border-color: var(--dash-border, #e0dfde) !important;
    color: var(--dash-fg, #363131);
    box-shadow: var(--dash-shadow-elevated);
}

[data-chat-theme="light"] #sidebar-plan-checkout-modal :is(
    [class*="bg-surface-black"],
    [class*="bg-surface-light"]
) {
    background-color: var(--dash-bg-inset, #f3f2f1) !important;
    border-color: var(--dash-border, #e0dfde) !important;
}

[data-chat-theme="light"] #sidebar-plan-checkout-modal .text-text-primary {
    color: var(--dash-fg, #363131) !important;
}

[data-chat-theme="light"] #sidebar-plan-checkout-modal .text-text-secondary,
[data-chat-theme="light"] #sidebar-plan-checkout-modal [class*="text-text-secondary"] {
    color: var(--dash-fg-muted, #767478) !important;
}

/* BB V2 shell surfaces — theme transition on major panels */
[data-chat-theme="light"] .bb-v2-main-panel.chat-theme-surface,
[data-chat-theme="light"] .bb-v2-shell .bb-card.chat-theme-surface {
    transition:
        background-color var(--chat-theme-surface-transition-duration, 0.85s)
            var(--chat-theme-surface-transition-ease, ease-in-out),
        border-color var(--chat-theme-surface-transition-duration, 0.85s)
            var(--chat-theme-surface-ease, ease-in-out),
        box-shadow var(--chat-theme-surface-transition-duration, 0.85s)
            var(--chat-theme-surface-transition-ease, ease-in-out);
}

/* Canvas chrome — header + mobile menu toggle */
.dashboard-canvas-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: rgba(26, 23, 26, 0.95);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

[data-chat-theme="light"] .dashboard-canvas-header {
    border-bottom-color: var(--dash-border, #e0dfde);
    background: color-mix(in srgb, var(--dash-bg-shell, #ffffff) 90%, transparent);
    box-shadow: var(--dash-shadow-card);
    color: var(--dash-fg, #363131);
}

[data-chat-theme="light"] .dashboard-canvas-header .dashboard-canvas-header-pattern {
    opacity: 0.4;
    background:
        radial-gradient(circle at 8% 0%, rgba(228, 0, 43, 0.1), transparent 28%),
        linear-gradient(90deg, rgba(54, 49, 49, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(54, 49, 49, 0.035) 1px, transparent 1px);
    background-size: auto, 24px 24px, 24px 24px;
}

[data-chat-theme="light"] .dashboard-canvas-header button {
    color: var(--dash-fg-muted, #767478);
}

[data-chat-theme="light"] .dashboard-canvas-header button:hover {
    background: var(--dash-surface-hover, rgba(54, 49, 49, 0.04));
    color: var(--dash-fg, #363131);
}

[data-chat-theme="light"] .dashboard-canvas-header .inline-flex.h-9.w-9 {
    border-color: var(--dash-border, #e0dfde);
    background: var(--dash-bg-inset, #f3f2f1);
    color: var(--dash-fg-muted, #767478);
}

[data-chat-theme="light"] .dashboard-canvas-header .inline-flex.h-9.w-9:hover {
    border-color: color-mix(in srgb, var(--ci-red) 35%, transparent);
    background: var(--dash-brand-wash, rgba(228, 0, 43, 0.05));
    color: var(--ci-red, #e4002b);
}

.dashboard-sidebar-toggle-btn {
    border: 1px solid rgba(255, 255, 255, 0.075);
    background: #171417;
    color: rgba(255, 255, 255, 0.6);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.dashboard-sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;
}

[data-chat-theme="light"] .dashboard-sidebar-toggle-btn {
    border-color: var(--dash-border, #e0dfde);
    background: var(--dash-bg-shell, #ffffff);
    color: rgba(54, 49, 49, 0.62);
    box-shadow: var(--dash-shadow-card);
}

[data-chat-theme="light"] .dashboard-sidebar-toggle-btn:hover {
    background: var(--dash-bg-inset, #f3f2f1);
    color: var(--dash-fg, #363131);
}