/* ============================================================
   BS25 Dark Sidebar Theme (optional, orthogonal)
   Activated by adding `theme-dark` to `.bb-page` shell.
   Sidebar surfaces become dark; main + cards stay light/clean.
   This file is non-scoped on purpose so it can cross the
   Razor scoped-CSS boundary into MultiLevelMenu and Index.
   Must be linked AFTER BS25.styles.css for equal-specificity
   selectors to override scoped styles.
   ============================================================ */

.bb-page.theme-dark {
    --bg-page: #f3f4f6;
    --sidebar-bg: #111827;
    --sidebar-bg-hover: #1f2937;
    --sidebar-text: #cbd5e1;
    --sidebar-text-strong: #f8fafc;
    --sidebar-muted: #64748b;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --dash-bg: #f3f4f6;
    --dash-card: #ffffff;
    --dash-text: #111827;
    --dash-muted: #6b7280;
    --dash-accent: #2563eb;
    --dash-accent-rgb: 37, 99, 235;
    background: var(--bg-page);
}

/* ---- Sidebar shell ---- */
.bb-page.theme-dark .sidebar-custom {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
}

.bb-page.theme-dark .sidebar-header,
.bb-page.theme-dark .sidebar-user-area {
    border-color: var(--sidebar-border);
}

.bb-page.theme-dark .sidebar-user-area {
    background: var(--sidebar-bg);
}

.bb-page.theme-dark .brand-name {
    color: var(--sidebar-text-strong);
}

.bb-page.theme-dark .brand-name strong {
    color: var(--accent);
}

.bb-page.theme-dark .sidebar-user-copy strong {
    color: var(--sidebar-text-strong);
}

.bb-page.theme-dark .brand-version,
.bb-page.theme-dark .sidebar-user-copy small,
.bb-page.theme-dark .sidebar-user-chevron {
    color: var(--sidebar-muted);
}

.bb-page.theme-dark .sidebar-collapse-button {
    color: var(--sidebar-muted);
}

.bb-page.theme-dark .sidebar-collapse-button:hover {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-text-strong);
}

/* ---- Sidebar search ---- */
.bb-page.theme-dark .sidebar-search {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--sidebar-border);
}

.bb-page.theme-dark .sidebar-search input {
    color: var(--sidebar-text);
}

.bb-page.theme-dark .sidebar-search input::placeholder {
    color: var(--sidebar-muted);
}

.bb-page.theme-dark .sidebar-search .bi {
    color: var(--sidebar-muted);
}

.bb-page.theme-dark .sidebar-search kbd {
    background: var(--sidebar-bg-hover);
    border-color: var(--sidebar-border);
    color: var(--sidebar-muted);
}

/* ---- Mobile auth links inside sidebar ---- */
.bb-page.theme-dark .sidebar-auth-link {
    color: var(--sidebar-text);
}

.bb-page.theme-dark .sidebar-auth-link:hover {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-text-strong);
}

.bb-page.theme-dark .sidebar-auth-divider {
    background: var(--sidebar-border);
}

.bb-page.theme-dark .sidebar-user-link {
    color: var(--sidebar-text);
}

.bb-page.theme-dark .sidebar-user-link:hover {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-text-strong);
}

.bb-page.theme-dark .sidebar-menu-area {
    /* Firefox: light thumb on dark sidebar, transparent track. */
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.bb-page.theme-dark .sidebar-menu-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
}

.bb-page.theme-dark .sidebar-menu-area::-webkit-scrollbar-track {
    background: transparent;
}

/* ---- Multi-level menu items (scoped component reached via shared parent) ---- */
.bb-page.theme-dark .multi-level-menu.menu-root::before {
    color: var(--sidebar-muted);
}

.bb-page.theme-dark .nav-link {
    color: var(--sidebar-text);
    gap: 16px;
}

.bb-page.theme-dark .nav-link .menu-icon,
.bb-page.theme-dark .nav-link .menu-chevron {
    color: var(--sidebar-muted);
}

.bb-page.theme-dark .nav-link:hover {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-text-strong);
}

.bb-page.theme-dark .nav-link:hover .menu-icon,
.bb-page.theme-dark .nav-link:hover .menu-chevron {
    color: var(--sidebar-text-strong);
}

.bb-page.theme-dark .nav-link.active {
    background: rgba(var(--accent-rgb), 0.18);
    color: #ffffff;
}

.bb-page.theme-dark .nav-link.active .menu-icon,
.bb-page.theme-dark .nav-link.active .menu-chevron {
    color: #ffffff;
}

.bb-page.theme-dark .nav-link.active-parent {
    color: var(--sidebar-text-strong);
}

.bb-page.theme-dark .nav-link.nested {
    color: var(--sidebar-text);
}

.bb-page.theme-dark .nav-link.nested.active {
    color: #ffffff;
    background: rgba(var(--accent-rgb), 0.14);
}

/* Nested items show their database icon (IconClass) — colored, never as a dot. */
.bb-page.theme-dark .nav-link.nested .menu-icon {
    color: var(--sidebar-muted);
    background: transparent;
}

.bb-page.theme-dark .nav-link.nested.active .menu-icon {
    color: #ffffff;
    background: transparent;
}

/* All menu icons read clearly on the dark sidebar. */
.bb-page.theme-dark .nav-link > .menu-icon {
    color: var(--sidebar-muted);
}

.bb-page.theme-dark .nav-link:hover > .menu-icon {
    color: var(--sidebar-text-strong);
}

/* ---- Mobile backdrop a bit darker ---- */
.bb-page.theme-dark .mobile-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Dashboard: stays light, but uses cool palette + blue accent
   to feel cohesive with the dark sidebar.
   ============================================================ */

.bb-page.theme-dark .dashboard-page {
    background: var(--dash-bg);
    color: var(--dash-text);
}

.bb-page.theme-dark .dashboard-header h1,
.bb-page.theme-dark .kpi-card strong,
.bb-page.theme-dark .metric-card strong,
.bb-page.theme-dark .activity-card strong,
.bb-page.theme-dark .dashboard-header strong {
    color: var(--dash-text);
}

.bb-page.theme-dark .dashboard-header nav,
.bb-page.theme-dark .kpi-card p,
.bb-page.theme-dark .metric-card p,
.bb-page.theme-dark .panel-title p,
.bb-page.theme-dark .list-card p,
.bb-page.theme-dark .summary-row small,
.bb-page.theme-dark .kpi-card small,
.bb-page.theme-dark .product-list small,
.bb-page.theme-dark .activity-card small,
.bb-page.theme-dark .activity-card li,
.bb-page.theme-dark .overview-legend label,
.bb-page.theme-dark .mini-legend span,
.bb-page.theme-dark .days-row,
.bb-page.theme-dark .stack-day {
    color: var(--dash-muted);
}

.bb-page.theme-dark .kpi-card,
.bb-page.theme-dark .overview-card,
.bb-page.theme-dark .metric-card,
.bb-page.theme-dark .revenue-card,
.bb-page.theme-dark .list-card {
    background: var(--dash-card);
    border-color: rgba(17, 24, 39, 0.06);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
}

/* Neutralize the amber+purple radial gradient on the Total Overview card
   so it doesn't clash with the dark sidebar / blue accent. */
.bb-page.theme-dark .overview-copy {
    background:
        radial-gradient(circle at 80% 28%, rgba(37, 99, 235, 0.08), transparent 32%),
        radial-gradient(circle at 95% 0%, rgba(37, 99, 235, 0.10), transparent 28%),
        var(--dash-card);
}

/* Article wrapper inherits the clean neutral bg, not the gradient. */
.bb-page.theme-dark > main,
.bb-page.theme-dark .content {
    background: transparent;
}

.bb-page.theme-dark .dashboard-header a,
.bb-page.theme-dark .activity-card a {
    color: var(--dash-accent);
}

.bb-page.theme-dark .icon-action span {
    background: var(--dash-accent);
}

.bb-page.theme-dark .export-action {
    background: var(--dash-accent);
    border-color: var(--dash-accent);
}

.bb-page.theme-dark .kpi-card polyline {
    stroke: var(--dash-accent);
}

.bb-page.theme-dark .mini-bars span {
    background: rgba(var(--dash-accent-rgb), 0.18);
}

.bb-page.theme-dark .mini-bars .active {
    background: var(--dash-accent);
}

.bb-page.theme-dark .product-list i {
    background: var(--dash-accent);
}

.bb-page.theme-dark .revenue-line,
.bb-page.theme-dark .revenue-chart circle {
    stroke: var(--dash-accent);
}

.bb-page.theme-dark .revenue-fill {
    fill: rgba(var(--dash-accent-rgb), 0.12);
}

.bb-page.theme-dark .line-a {
    stroke: var(--dash-accent);
}

.bb-page.theme-dark .customer-dots .bar {
    background: rgba(var(--dash-accent-rgb), 0.32);
}

.bb-page.theme-dark .product-list li > span {
    background: #eef2ff;
    color: #1e3a8a;
}

/* ============================================================
   Auth pages (Register / Login) — light cards on neutral
   surface stay consistent in dark sidebar mode.
   ============================================================ */

.bb-page.theme-dark .auth-page {
    background:
        radial-gradient(720px 320px at 8% 0%, rgba(37, 99, 235, 0.10), transparent 60%),
        radial-gradient(620px 280px at 96% 18%, rgba(37, 99, 235, 0.08), transparent 60%),
        #f3f4f6;
}

.bb-page.theme-dark .auth-submit {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.32);
}

.bb-page.theme-dark .auth-submit:hover {
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.42);
}

.bb-page.theme-dark .auth-eyebrow {
    background: rgba(37, 99, 235, 0.14);
    color: #2563eb;
}

.bb-page.theme-dark .auth-head a {
    color: #2563eb;
}

/* ============================================================
   Topbar: matches the dark sidebar for a cohesive dark shell.
   Buttons, search, breadcrumb, and date adopt dark surfaces.
   ============================================================ */

.bb-page.theme-dark {
    --topbar-bg: #1e293b;
    --topbar-border: rgba(255, 255, 255, 0.06);
    --topbar-surface: rgba(255, 255, 255, 0.06);
    --topbar-surface-hover: rgba(255, 255, 255, 0.12);
    --topbar-text: #e5e7eb;
    --topbar-muted: #94a3b8;
}

.bb-page.theme-dark .bb-top-row {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
}

.bb-page.theme-dark .layout-page-title {
    color: var(--topbar-text);
}

.bb-page.theme-dark .breadcrumb-root,
.bb-page.theme-dark .breadcrumb-separator,
.bb-page.theme-dark .topbar-date {
    color: var(--topbar-muted);
}

.bb-page.theme-dark .topbar-search {
    background: var(--topbar-surface);
    border-color: var(--topbar-border);
}

.bb-page.theme-dark .topbar-search input {
    color: var(--topbar-text);
}

.bb-page.theme-dark .topbar-search input::placeholder {
    color: var(--topbar-muted);
}

.bb-page.theme-dark .topbar-search .bi {
    color: var(--topbar-muted);
}

.bb-page.theme-dark .topbar-search kbd {
    background: rgba(255, 255, 255, 0.08);
    color: var(--topbar-muted);
}

.bb-page.theme-dark .topbar-search:focus-within {
    border-color: rgba(var(--accent-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.bb-page.theme-dark .topbar-icon-button,
.bb-page.theme-dark .topbar-text-link,
.bb-page.theme-dark .topbar-avatar-link {
    background: var(--topbar-surface);
    border-color: var(--topbar-border);
    color: var(--topbar-text);
}

.bb-page.theme-dark .topbar-icon-button:hover,
.bb-page.theme-dark .topbar-text-link:hover,
.bb-page.theme-dark .topbar-avatar-link:hover {
    background: var(--topbar-surface-hover);
    color: #ffffff;
}

.bb-page.theme-dark .tweaks-topbar-button {
    color: #ffffff;
    background: rgba(var(--accent-rgb), 0.22);
    border-color: rgba(var(--accent-rgb), 0.45);
}

.bb-page.theme-dark .notification-badge {
    border-color: var(--topbar-bg);
}

/* ============================================================
   Tweaks FAB + panel: dark surfaces so they match the shell.
   ============================================================ */

.bb-page.theme-dark .tweaks-trigger {
    background: var(--sidebar-bg);
    border-color: var(--sidebar-border);
    color: #ffffff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

.bb-page.theme-dark .tweaks-panel {
    background: var(--topbar-bg);
    border-color: var(--topbar-border);
    color: var(--topbar-text);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

.bb-page.theme-dark .tweaks-panel h4 {
    color: #ffffff;
}

.bb-page.theme-dark .tw-row {
    color: var(--topbar-muted);
}

.bb-page.theme-dark .tw-toggle {
    background: rgba(255, 255, 255, 0.14);
}

.bb-page.theme-dark .tw-toggle.on {
    background: var(--accent);
}

.bb-page.theme-dark .tw-swatch.active {
    border-color: #ffffff;
}