/*
 * User manual pages: stabilize dark/light appearance switching.
 * Preserves per-app accent hue while fixing partial class-based color flips.
 */

body.manual-theme-page {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light mode normalization for pages that start from dark visual tokens. */
html.light-mode body.manual-theme-page nav {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

html.light-mode body.manual-theme-page footer {
    background: rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}

html.light-mode body.manual-theme-page .glass-panel {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.86) !important;
}

html.light-mode body.manual-theme-page .manual-main-link {
    background: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid transparent !important;
}

html.light-mode body.manual-theme-page .manual-main-link:hover {
    background: var(--manual-accent, #38bdf8) !important;
    color: #020617 !important;
}

/* Dark mode semantic layers. */
html:not(.light-mode) body.manual-theme-page {
    background: var(--manual-bg-dark, var(--bg-body, #0f172a));
    color: var(--manual-text-dark, var(--text-main, #f1f5f9));
}

html:not(.light-mode) body.manual-theme-page nav {
    background: var(--manual-nav-dark, rgba(15, 23, 42, 0.84)) !important;
    border-color: var(--manual-border-dark, rgba(148, 163, 184, 0.28)) !important;
}

html:not(.light-mode) body.manual-theme-page footer {
    background: var(--manual-footer-dark, rgba(2, 6, 23, 0.74)) !important;
    border-color: var(--manual-border-dark, rgba(148, 163, 184, 0.25)) !important;
}

html:not(.light-mode) body.manual-theme-page .glass-panel {
    background: var(--manual-surface-dark, rgba(30, 41, 59, 0.74)) !important;
    border-color: var(--manual-border-dark, rgba(148, 163, 184, 0.25)) !important;
    box-shadow: 0 20px 36px -24px rgba(2, 6, 23, 0.85) !important;
}

/* Foreground hierarchy */
html:not(.light-mode) body.manual-theme-page .text-slate-900,
html:not(.light-mode) body.manual-theme-page .text-stone-900,
html:not(.light-mode) body.manual-theme-page .text-violet-900,
html:not(.light-mode) body.manual-theme-page .text-indigo-800 {
    color: var(--manual-text-dark, var(--text-main, #f1f5f9)) !important;
}

html:not(.light-mode) body.manual-theme-page .text-slate-800,
html:not(.light-mode) body.manual-theme-page .text-slate-700,
html:not(.light-mode) body.manual-theme-page .text-slate-600,
html:not(.light-mode) body.manual-theme-page .text-slate-500,
html:not(.light-mode) body.manual-theme-page .text-stone-600,
html:not(.light-mode) body.manual-theme-page .text-stone-500,
html:not(.light-mode) body.manual-theme-page .text-indigo-600 {
    color: var(--manual-text-secondary-dark, #cbd5e1) !important;
}

html:not(.light-mode) body.manual-theme-page .text-slate-400,
html:not(.light-mode) body.manual-theme-page .text-stone-400 {
    color: var(--manual-text-tertiary-dark, #94a3b8) !important;
}

/* Secondary panels and dividers */
html:not(.light-mode) body.manual-theme-page .bg-white\/40,
html:not(.light-mode) body.manual-theme-page .bg-white\/50,
html:not(.light-mode) body.manual-theme-page .bg-white\/70,
html:not(.light-mode) body.manual-theme-page .bg-white\/80,
html:not(.light-mode) body.manual-theme-page .bg-white {
    background: var(--manual-surface-dark, rgba(30, 41, 59, 0.74)) !important;
}

html:not(.light-mode) body.manual-theme-page .bg-slate-100,
html:not(.light-mode) body.manual-theme-page .bg-blue-100,
html:not(.light-mode) body.manual-theme-page .bg-violet-100,
html:not(.light-mode) body.manual-theme-page .bg-sky-100,
html:not(.light-mode) body.manual-theme-page .bg-sky-50,
html:not(.light-mode) body.manual-theme-page .bg-indigo-50\/50,
html:not(.light-mode) body.manual-theme-page .bg-violet-50\/30,
html:not(.light-mode) body.manual-theme-page .bg-indigo-50\/50 {
    background: var(--manual-surface-subtle-dark, rgba(51, 65, 85, 0.7)) !important;
}

html:not(.light-mode) body.manual-theme-page .border-slate-200,
html:not(.light-mode) body.manual-theme-page .border-slate-200\/60,
html:not(.light-mode) body.manual-theme-page .border-slate-100,
html:not(.light-mode) body.manual-theme-page .border-sky-100,
html:not(.light-mode) body.manual-theme-page .border-blue-100\/50,
html:not(.light-mode) body.manual-theme-page .border-indigo-100,
html:not(.light-mode) body.manual-theme-page .border-violet-100,
html:not(.light-mode) body.manual-theme-page .border-stone-100\/50,
html:not(.light-mode) body.manual-theme-page .border-white\/10 {
    border-color: var(--manual-border-dark, rgba(148, 163, 184, 0.25)) !important;
}

html:not(.light-mode) body.manual-theme-page .h-px.bg-slate-200,
html:not(.light-mode) body.manual-theme-page .h-px.bg-stone-200 {
    background-color: var(--manual-border-dark, rgba(148, 163, 184, 0.25)) !important;
}

/* Main site CTA in nav */
html:not(.light-mode) body.manual-theme-page .manual-main-link {
    background: rgba(241, 245, 249, 0.12) !important;
    color: var(--manual-text-dark, #f8fafc) !important;
    border: 1px solid var(--manual-border-dark, rgba(148, 163, 184, 0.25)) !important;
}

html:not(.light-mode) body.manual-theme-page .manual-main-link:hover {
    background: var(--manual-accent, #38bdf8) !important;
    color: #020617 !important;
    border-color: transparent !important;
}