.nav-pills .nav-link.active {
    background-color: #e7f1ff !important;
    color: #084298 !important;
}

/* ── Product page app navbar ─────────────────────────────────────── */
.app-navbar-inner {
    transition: background 0.3s ease;
}

/* Dark mode: deep dark base with subtle orange right-side glow */
:root[data-mantine-color-scheme="dark"] .app-navbar-inner {
    background: linear-gradient(90deg,
            rgba(10, 10, 10, 0.97) 0%,
            rgba(15, 10, 5, 0.97) 55%,
            rgba(255, 102, 0, 0.12) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35), inset 0 0 40px rgba(255, 102, 0, 0.04);
}

/* Light mode: clean white glass */
:root[data-mantine-color-scheme="light"] .app-navbar-inner {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(12px);
}

/* ── Nav links: adapt text color to theme ────────────────────────── */
/* dmc.Anchor / dmc.Button inside navbar */
:root[data-mantine-color-scheme="light"] .app-navbar-inner a,
:root[data-mantine-color-scheme="light"] .app-navbar-inner .mantine-Anchor-root {
    color: #2d2a26 !important;
}

:root[data-mantine-color-scheme="dark"] .app-navbar-inner a,
:root[data-mantine-color-scheme="dark"] .app-navbar-inner .mantine-Anchor-root {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Tools / Admin menu buttons inside navbar */
:root[data-mantine-color-scheme="light"] .app-navbar-inner button {
    color: #2d2a26 !important;
}

:root[data-mantine-color-scheme="dark"] .app-navbar-inner button {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ── Chart legend buttons ─────────────────────────────────────────── */
/* Light mode: legend button text and background */
:root[data-mantine-color-scheme="light"] .legend-item {
    color: #2d2a26 !important;
}

:root[data-mantine-color-scheme="light"] .legend-item.inactive {
    color: #7a756e !important;
}

:root[data-mantine-color-scheme="dark"] .legend-item {
    color: rgba(255, 255, 255, 0.9) !important;
}

:root[data-mantine-color-scheme="dark"] .legend-item.inactive {
    color: rgba(255, 255, 255, 0.35) !important;
}