/* Mobile TOC Styles and Theme Overrides */

/* Default (Light) - Explicitly set background and text colors */
#mobileTocPanel {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: #e2e8f0; /* slate-200 */
    color: #0f172a; /* slate-900 */
}

#mobileTocPanel .toc a {
    color: #334155; /* slate-700 */
}

#mobileTocPanel .toc a:hover,
#mobileTocPanel .toc a.active {
    color: var(--highlight-color, #e22d30);
    background-color: rgba(226, 45, 48, 0.05);
}

/* Force Light Theme overrides (Fixes "Night Mode System + Light Mode Site" issue) */
[data-theme='light'] #mobileTocPanel {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Fix sticky header background in light mode */
[data-theme='light'] #mobileTocPanel > .sticky {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e2e8f0 !important;
}

[data-theme='light'] #mobileTocPanel h4 {
    color: #0f172a !important;
}

[data-theme='light'] #mobileTocCloseBtn {
    color: #64748b !important; /* slate-500 */
}

[data-theme='light'] #mobileTocCloseBtn:hover {
    color: #0f172a !important;
}

[data-theme='light'] #mobileTocPanel .toc a {
    color: #334155 !important;
}

[data-theme='light'] #mobileTocPanel .toc a:hover,
[data-theme='light'] #mobileTocPanel .toc a.active {
    color: var(--highlight-color, #e22d30) !important;
    background-color: rgba(226, 45, 48, 0.05) !important;
}

/* Force Light Theme Toggle Button */
[data-theme='light'] #mobileTocToggleBtn {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme='light'] #mobileTocToggleBtn svg {
    color: #0f172a !important;
}

/* Fix the icon circle background */
[data-theme='light'] #mobileTocToggleBtn .bg-slate-100 {
    background-color: #f1f5f9 !important; /* slate-100 */
}

[data-theme='light'] #mobileTocCurrentHeading {
    color: #0f172a !important;
}

/* Dark Theme overrides */
[data-theme='dark'] #mobileTocPanel {
    background-color: rgba(15, 23, 42, 0.95) !important; /* slate-900 */
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important; /* slate-50 */
}

[data-theme='dark'] #mobileTocPanel > .sticky {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme='dark'] #mobileTocPanel .toc a {
    color: #cbd5e1 !important; /* slate-300 */
}

[data-theme='dark'] #mobileTocPanel .toc a:hover,
[data-theme='dark'] #mobileTocPanel .toc a.active {
    color: #fca5a5 !important; /* Light Red */
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Header inside panel */
[data-theme='dark'] #mobileTocPanel h4 {
    color: #f8fafc !important;
}

[data-theme='dark'] #mobileTocCloseBtn {
    color: #94a3b8 !important; /* slate-400 */
}

[data-theme='dark'] #mobileTocCloseBtn:hover {
    color: #f8fafc !important;
}

/* Toggle Button Dark Mode */
[data-theme='dark'] #mobileTocToggleBtn {
    background-color: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

[data-theme='dark'] #mobileTocToggleBtn .bg-slate-100 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme='dark'] #mobileTocToggleBtn svg {
    color: #f8fafc !important;
}

[data-theme='dark'] #mobileTocCurrentHeading {
    color: #f1f5f9 !important; /* slate-100 */
}