/* ============================================
   CRITICAL CSS: Prevent FOUC for BOTH themes
   This must load FIRST to prevent flash of unstyled content
   ============================================ */

/* Dark theme backgrounds */
html[data-theme="dark"] {
    background-color: #1a1a1a !important;
}
html[data-theme="dark"] body {
    background-color: #1a1a1a !important;
    color: #e8e8e8 !important;
}

/* Light theme nav (for when page loads without data-theme set yet) */
html:not([data-theme="dark"]) .nav-item {
    color: var(--text-secondary, #6b6b6b) !important;
    font-weight: 500 !important;
    font-size: var(--sidebar-item-font-size, 0.9375rem) !important;
    line-height: var(--sidebar-item-line-height, 1.4) !important;
    border-radius: var(--sidebar-item-radius, var(--radius-sm, 12px)) !important;
    background: transparent !important;
}
html:not([data-theme="dark"]) .nav-item:hover:not(.active) {
    background: var(--sidebar-active-bg, var(--sidebar-hover-bg, rgba(0, 0, 0, 0.04))) !important;
}
html:not([data-theme="dark"]) .nav-item.active {
    background: var(--sidebar-active-bg, var(--sidebar-hover-bg, rgba(0, 0, 0, 0.04))) !important;
    color: var(--text-primary, #1a1a1a) !important;
    font-weight: 600 !important;
}
html:not([data-theme="dark"]) .nav-item.active span {
    color: var(--text-primary, #1a1a1a) !important;
}
html:not([data-theme="dark"]) .nav-item span {
    color: var(--text-secondary, #6b6b6b) !important;
}
html:not([data-theme="dark"]) .lock-icon {
    display: none !important;
}

/* Critical: Sidebar and navigation tabs to prevent flash */
html[data-theme="dark"] .sidebar {
    background: var(--bg-sidebar, #0f0f0f) !important;
    border-right: 1px solid var(--border, #2a2a2a) !important;
}
html[data-theme="dark"] .nav-item {
    color: var(--text-secondary, #a0a0a0) !important;
    font-weight: 500 !important;
    font-size: var(--sidebar-item-font-size, 0.9375rem) !important;
    line-height: var(--sidebar-item-line-height, 1.4) !important;
    border-radius: var(--sidebar-item-radius, var(--radius-sm, 12px)) !important;
    background: transparent !important;
}
html[data-theme="dark"] .nav-item:hover:not(.active) {
    background: var(--sidebar-active-bg, var(--sidebar-hover-bg, rgba(255, 255, 255, 0.05))) !important;
}
html[data-theme="dark"] .nav-item span {
    color: var(--text-secondary, #a0a0a0) !important;
}
html[data-theme="dark"] .nav-item.active {
    background: var(--sidebar-active-bg, var(--sidebar-hover-bg, rgba(255, 255, 255, 0.05))) !important;
    color: var(--text-primary, #e8e8e8) !important;
    font-weight: 600 !important;
}
html[data-theme="dark"] .nav-item.active span {
    color: var(--text-primary, #e8e8e8) !important;
}
html[data-theme="dark"] .nav-item.locked {
    opacity: 0.7 !important;
}
html[data-theme="dark"] .nav-item svg {
    stroke: currentColor !important;
}
html[data-theme="dark"] .nav-icon {
    opacity: 0.7 !important;
}
html[data-theme="dark"] .lock-icon {
    color: #a0a0a0 !important;
    opacity: 0.5 !important;
    display: none !important;
}
html[data-theme="dark"] .nav-item.locked .lock-icon {
    display: block !important;
}