/* ============================================================
   cx-nav-layout.css — Navbar position (top / left / right)
   and navbar visual presets.
   Loaded after the app theme CSS so presets win over theme skins.
   ============================================================ */

:root {
    --ce-nav-side-w: 240px;
    --ce-nav-side-w-collapsed: 76px;
}

/* ---------- Navbar style tokens ---------- */
html[data-nav-style="glass"] {
    --ce-nav-bg: rgba(255, 255, 255, .78);
    --ce-nav-fg: #0f172a;
    --ce-nav-muted: #64748b;
    --ce-nav-border: rgba(15, 23, 42, .08);
    --ce-nav-hover: rgba(15, 23, 42, .06);
    --ce-nav-icon-bg: rgba(15, 23, 42, .05);
    --ce-nav-icon-fg: #475569;
}

html[data-nav-style="light"] {
    --ce-nav-bg: #ffffff;
    --ce-nav-fg: #0f172a;
    --ce-nav-muted: #64748b;
    --ce-nav-border: #e2e8f0;
    --ce-nav-hover: rgba(15, 23, 42, .06);
    --ce-nav-icon-bg: rgba(15, 23, 42, .05);
    --ce-nav-icon-fg: #475569;
}

html[data-nav-style="dark"] {
    --ce-nav-bg: #0f172a;
    --ce-nav-fg: #f8fafc;
    --ce-nav-muted: #94a3b8;
    --ce-nav-border: rgba(255, 255, 255, .12);
    --ce-nav-hover: rgba(255, 255, 255, .10);
    --ce-nav-icon-bg: rgba(255, 255, 255, .10);
    --ce-nav-icon-fg: #cbd5e1;
}

html[data-nav-style="gradient"] {
    --ce-nav-bg: linear-gradient(120deg, var(--primary, #2563eb), var(--accent-purple, #06b6d4));
    --ce-nav-fg: #ffffff;
    --ce-nav-muted: rgba(255, 255, 255, .72);
    --ce-nav-border: rgba(255, 255, 255, .18);
    --ce-nav-hover: rgba(255, 255, 255, .16);
    --ce-nav-icon-bg: rgba(255, 255, 255, .14);
    --ce-nav-icon-fg: #ffffff;
}

/* ---------- Top navbar presets ---------- */
html[data-nav-style="glass"] .navbar-modern,
html[data-nav-style="glass"] #mainNav,
html[data-nav-style="light"] .navbar-modern,
html[data-nav-style="light"] #mainNav,
html[data-nav-style="dark"] .navbar-modern,
html[data-nav-style="dark"] #mainNav,
html[data-nav-style="gradient"] .navbar-modern,
html[data-nav-style="gradient"] #mainNav,
html[data-theme="dark"][data-nav-style="glass"] .navbar-modern,
html[data-theme="dark"][data-nav-style="glass"] #mainNav,
html[data-theme="dark"][data-nav-style="light"] .navbar-modern,
html[data-theme="dark"][data-nav-style="light"] #mainNav,
html[data-theme="dark"][data-nav-style="dark"] .navbar-modern,
html[data-theme="dark"][data-nav-style="dark"] #mainNav,
html[data-theme="dark"][data-nav-style="gradient"] .navbar-modern,
html[data-theme="dark"][data-nav-style="gradient"] #mainNav {
    background: var(--ce-nav-bg) !important;
    border-bottom-color: var(--ce-nav-border) !important;
}

html[data-nav-style="glass"] .navbar-modern,
html[data-nav-style="glass"] #mainNav {
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
}

html[data-nav-style="light"] .navbar-modern,
html[data-nav-style="dark"] .navbar-modern,
html[data-nav-style="gradient"] .navbar-modern {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html[data-nav-style="glass"] .navbar-modern .nav-link,
html[data-nav-style="light"] .navbar-modern .nav-link,
html[data-nav-style="dark"] .navbar-modern .nav-link,
html[data-nav-style="gradient"] .navbar-modern .nav-link,
html[data-nav-style="glass"] .navbar-modern .nav-action-btn:not(.quick-add),
html[data-nav-style="light"] .navbar-modern .nav-action-btn:not(.quick-add),
html[data-nav-style="dark"] .navbar-modern .nav-action-btn:not(.quick-add),
html[data-nav-style="gradient"] .navbar-modern .nav-action-btn:not(.quick-add) {
    color: var(--ce-nav-fg) !important;
}

html[data-nav-style="glass"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add),
html[data-nav-style="light"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add) {
    background: #ffffff !important;
    border-color: var(--ce-nav-border) !important;
}

html[data-nav-style="glass"] .navbar-modern .nav-link:hover,
html[data-nav-style="light"] .navbar-modern .nav-link:hover,
html[data-nav-style="dark"] .navbar-modern .nav-link:hover,
html[data-nav-style="gradient"] .navbar-modern .nav-link:hover,
html[data-nav-style="glass"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add):hover,
html[data-nav-style="light"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add):hover,
html[data-nav-style="dark"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add):hover,
html[data-nav-style="gradient"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add):hover {
    background: var(--ce-nav-hover) !important;
    color: var(--ce-nav-fg) !important;
}

html[data-nav-style="glass"] .navbar-modern .nav-link-icon,
html[data-nav-style="light"] .navbar-modern .nav-link-icon,
html[data-nav-style="dark"] .navbar-modern .nav-link-icon,
html[data-nav-style="gradient"] .navbar-modern .nav-link-icon {
    background: var(--ce-nav-icon-bg) !important;
    color: var(--ce-nav-icon-fg) !important;
}

html[data-nav-style="dark"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add),
html[data-nav-style="gradient"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add) {
    background: var(--ce-nav-icon-bg) !important;
    border-color: var(--ce-nav-border) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-arrow,
html[data-nav-style="light"] .navbar-modern .dropdown-arrow,
html[data-nav-style="dark"] .navbar-modern .dropdown-arrow,
html[data-nav-style="gradient"] .navbar-modern .dropdown-arrow {
    color: var(--ce-nav-muted) !important;
}

html[data-nav-style="glass"] .navbar-modern .brand-name,
html[data-nav-style="light"] .navbar-modern .brand-name,
html[data-nav-style="dark"] .navbar-modern .brand-name,
html[data-nav-style="gradient"] .navbar-modern .brand-name {
    color: var(--ce-nav-fg) !important;
}

html[data-nav-style="glass"] .navbar-modern .brand-tagline,
html[data-nav-style="light"] .navbar-modern .brand-tagline,
html[data-nav-style="dark"] .navbar-modern .brand-tagline,
html[data-nav-style="gradient"] .navbar-modern .brand-tagline {
    color: var(--ce-nav-muted) !important;
}

html[data-nav-style="glass"] .navbar-modern .mobile-toggle .hamburger span,
html[data-nav-style="light"] .navbar-modern .mobile-toggle .hamburger span,
html[data-nav-style="dark"] .navbar-modern .mobile-toggle .hamburger span,
html[data-nav-style="gradient"] .navbar-modern .mobile-toggle .hamburger span {
    background: var(--ce-nav-fg) !important;
}

/* ---------- Side navbar tokens ---------- */
html[data-nav-pos="left"],
html[data-nav-pos="right"] {
    --ce-nav-side-text: var(--ce-nav-fg, var(--th-nav-text, #e2e8f0));
    --ce-nav-side-muted: var(--ce-nav-muted, var(--th-nav-icon, #94a3b8));
    --ce-nav-side-hover: var(--ce-nav-hover, var(--th-nav-hover-bg, rgba(255, 255, 255, .10)));
    --ce-nav-side-line: var(--ce-nav-border, rgba(255, 255, 255, .12));
    --ce-nav-side-icon-bg: var(--ce-nav-icon-bg, var(--th-nav-icon-bg, rgba(255, 255, 255, .10)));
    --ce-nav-side-icon-fg: var(--ce-nav-icon-fg, var(--th-nav-icon, #94a3b8));
    --ce-nav-side-bg: var(--ce-nav-bg, linear-gradient(180deg, var(--th-nav-a, #0f172a), var(--th-nav-b, #1e293b)));
}

html[data-nav-pos="left"][data-nav-style="gradient"],
html[data-nav-pos="right"][data-nav-style="gradient"] {
    --ce-nav-side-bg: linear-gradient(180deg, var(--primary, #2563eb), var(--accent-purple, #06b6d4));
}

/* ---------- Side navbar layout ---------- */
@media (min-width: 1025px) and (max-width: 1200px) {
    html[data-nav-pos="left"],
    html[data-nav-pos="right"] {
        --ce-nav-side-w: 220px;
    }

    html[data-nav-pos] .navbar-modern .brand-name {
        font-size: .84rem;
        white-space: nowrap;
    }

    html[data-nav-pos] .navbar-modern .brand-tagline {
        font-size: .58rem;
        white-space: nowrap;
    }
}

@media (min-width: 1025px) {
    html[data-nav-pos="left"].nav-collapsed,
    html[data-nav-pos="right"].nav-collapsed {
        --ce-nav-side-w: var(--ce-nav-side-w-collapsed);
    }

    html[data-nav-pos="left"] body {
        padding-top: 0 !important;
        padding-left: var(--ce-nav-side-w) !important;
        transition: padding .25s ease;
    }

    html[data-nav-pos="right"] body {
        padding-top: 0 !important;
        padding-right: var(--ce-nav-side-w) !important;
        transition: padding .25s ease;
    }

    html[data-nav-pos="left"] #demoFloat {
        left: calc(var(--ce-nav-side-w) + 18px);
    }

    html[data-nav-pos="left"] body.cx .settings-nav-tabs,
    html[data-nav-pos="right"] body.cx .settings-nav-tabs,
    html[data-nav-pos="left"] body.cx .dm-tabs,
    html[data-nav-pos="right"] body.cx .dm-tabs {
        top: 10px;
    }

    html[data-nav-pos="left"] .navbar-modern,
    html[data-nav-pos="left"] #mainNav,
    html[data-nav-pos="right"] .navbar-modern,
    html[data-nav-pos="right"] #mainNav {
        position: fixed;
        top: 0;
        bottom: 0;
        height: 100vh;
        width: var(--ce-nav-side-w);
        padding: 0;
        background: var(--ce-nav-side-bg) !important;
        border: 0 !important;
        border-radius: 0;
        box-shadow: 0 0 40px -20px rgba(15, 23, 42, .45);
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        z-index: 1200;
    }

    html[data-nav-pos="left"] .navbar-modern,
    html[data-nav-pos="left"] #mainNav {
        left: 0;
        right: auto;
        border-right: 1px solid var(--ce-nav-side-line) !important;
    }

    html[data-nav-pos="right"] .navbar-modern,
    html[data-nav-pos="right"] #mainNav {
        right: 0;
        left: auto;
        border-left: 1px solid var(--ce-nav-side-line) !important;
    }

    html[data-theme="dark"][data-nav-pos="left"] .navbar-modern,
    html[data-theme="dark"][data-nav-pos="left"] #mainNav,
    html[data-theme="dark"][data-nav-pos="right"] .navbar-modern,
    html[data-theme="dark"][data-nav-pos="right"] #mainNav {
        background: var(--ce-nav-side-bg) !important;
    }

    html[data-nav-pos="left"][data-nav-style="glass"] .navbar-modern,
    html[data-nav-pos="right"][data-nav-style="glass"] .navbar-modern {
        -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
        backdrop-filter: blur(18px) saturate(160%) !important;
    }

    html[data-nav-pos="left"] .navbar-modern.scrolled,
    html[data-nav-pos="right"] .navbar-modern.scrolled {
        background: var(--ce-nav-side-bg) !important;
        box-shadow: 0 0 40px -20px rgba(15, 23, 42, .45);
    }

    html[data-nav-pos="left"] .navbar-modern .nav-container,
    html[data-nav-pos="right"] .navbar-modern .nav-container {
        max-width: none;
        width: 100%;
        height: 100%;
        padding: 14px 10px 12px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-brand,
    html[data-nav-pos="right"] .navbar-modern .nav-brand {
        width: 100%;
        padding: 2px 6px 10px;
        border-bottom: 1px solid var(--ce-nav-side-line);
    }

    html[data-nav-pos="left"] .navbar-modern .brand-logo,
    html[data-nav-pos="right"] .navbar-modern .brand-logo,
    html[data-nav-pos="left"] .navbar-modern .brand-logo-inner,
    html[data-nav-pos="right"] .navbar-modern .brand-logo-inner,
    html[data-nav-pos="left"] .navbar-modern .brand-logo-pulse,
    html[data-nav-pos="right"] .navbar-modern .brand-logo-pulse {
        width: 38px;
        height: 38px;
    }

    html[data-nav-pos="left"] .navbar-modern .brand-name,
    html[data-nav-pos="right"] .navbar-modern .brand-name {
        color: var(--ce-nav-side-text) !important;
        font-size: .98rem;
    }

    html[data-nav-pos="left"] .navbar-modern .brand-tagline,
    html[data-nav-pos="right"] .navbar-modern .brand-tagline {
        color: var(--ce-nav-side-muted) !important;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-center,
    html[data-nav-pos="right"] .navbar-modern .nav-center {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 2px;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-links,
    html[data-nav-pos="right"] .navbar-modern .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 100%;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-item,
    html[data-nav-pos="right"] .navbar-modern .nav-item {
        width: 100%;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-link,
    html[data-nav-pos="right"] .navbar-modern .nav-link {
        width: 100%;
        min-height: 36px;
        justify-content: flex-start;
        gap: 8px;
        padding: 7px 9px;
        border-radius: 10px;
        white-space: normal;
        font-size: .84rem;
        color: var(--ce-nav-side-text) !important;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-link span,
    html[data-nav-pos="right"] .navbar-modern .nav-link span {
        display: inline;
    }

    html[data-nav-pos="left"] .navbar-modern .dropdown-arrow,
    html[data-nav-pos="right"] .navbar-modern .dropdown-arrow {
        display: inline-block;
    }

    html[data-nav-pos="left"] .navbar-modern .brand-tagline,
    html[data-nav-pos="right"] .navbar-modern .brand-tagline {
        display: block;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-link-icon,
    html[data-nav-pos="right"] .navbar-modern .nav-link-icon {
        width: 26px;
        height: 26px;
        border-radius: 7px;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-link:hover,
    html[data-nav-pos="right"] .navbar-modern .nav-link:hover {
        background: var(--ce-nav-side-hover) !important;
        color: var(--ce-nav-side-text) !important;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-link-icon,
    html[data-nav-pos="right"] .navbar-modern .nav-link-icon {
        background: var(--ce-nav-side-icon-bg) !important;
        color: var(--ce-nav-side-icon-fg) !important;
        flex: none;
    }

    html[data-nav-pos="left"] .navbar-modern .dropdown-arrow,
    html[data-nav-pos="right"] .navbar-modern .dropdown-arrow {
        margin-left: auto;
        color: var(--ce-nav-side-muted) !important;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-actions,
    html[data-nav-pos="right"] .navbar-modern .nav-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 10px;
        border-top: 1px solid var(--ce-nav-side-line);
    }

    html[data-nav-pos="left"] .navbar-modern .nav-action-btn:not(.quick-add),
    html[data-nav-pos="right"] .navbar-modern .nav-action-btn:not(.quick-add) {
        color: var(--ce-nav-side-text) !important;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add),
    html[data-nav-pos="right"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add) {
        background: var(--ce-nav-side-icon-bg);
        border-color: var(--ce-nav-side-line);
    }

    html[data-nav-pos="left"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add):hover,
    html[data-nav-pos="right"] .navbar-modern .nav-action-btn:not(.profile-wrap):not(.quick-add):hover {
        background: var(--ce-nav-side-hover);
        color: var(--ce-nav-side-text) !important;
    }

    /* Sidebar dropdowns become inline accordions */
    html[data-nav-pos="left"] .navbar-modern .nav-item.has-dropdown .mega-dropdown,
    html[data-nav-pos="right"] .navbar-modern .nav-item.has-dropdown .mega-dropdown {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        padding: 4px 0 6px;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-item.has-dropdown:hover .mega-dropdown,
    html[data-nav-pos="left"] .navbar-modern .nav-item.has-dropdown:focus-within .mega-dropdown,
    html[data-nav-pos="right"] .navbar-modern .nav-item.has-dropdown:hover .mega-dropdown,
    html[data-nav-pos="right"] .navbar-modern .nav-item.has-dropdown:focus-within .mega-dropdown {
        display: block;
    }

    html[data-nav-pos="left"] .navbar-modern .mega-dropdown::before,
    html[data-nav-pos="right"] .navbar-modern .mega-dropdown::before {
        display: none;
    }

    html[data-nav-pos="left"] .navbar-modern .dropdown-inner,
    html[data-nav-pos="right"] .navbar-modern .dropdown-inner {
        min-width: 0;
        width: 100%;
        flex-direction: column;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0;
    }

    html[data-nav-pos="left"] .navbar-modern .dropdown-section,
    html[data-nav-pos="right"] .navbar-modern .dropdown-section {
        padding: 4px 0;
    }

    html[data-nav-pos="left"] .navbar-modern .dropdown-section-title,
    html[data-nav-pos="right"] .navbar-modern .dropdown-section-title {
        padding: 6px 10px;
        color: var(--ce-nav-side-muted);
    }

    html[data-nav-pos="left"] .navbar-modern .dropdown-divider-v,
    html[data-nav-pos="right"] .navbar-modern .dropdown-divider-v {
        width: auto;
        height: 1px;
        margin: 6px 10px;
        background: var(--ce-nav-side-line);
    }

    html[data-nav-pos="left"] .navbar-modern .dropdown-link,
    html[data-nav-pos="right"] .navbar-modern .dropdown-link {
        padding: 8px 10px;
        color: var(--ce-nav-side-text);
    }

    html[data-nav-pos="left"] .navbar-modern .dropdown-link:hover,
    html[data-nav-pos="right"] .navbar-modern .dropdown-link:hover {
        background: var(--ce-nav-side-hover);
        transform: none;
    }

    html[data-nav-pos="left"] .navbar-modern .dropdown-link-title,
    html[data-nav-pos="right"] .navbar-modern .dropdown-link-title {
        color: var(--ce-nav-side-text);
    }

    html[data-nav-pos="left"] .navbar-modern .dropdown-link-desc,
    html[data-nav-pos="right"] .navbar-modern .dropdown-link-desc {
        color: var(--ce-nav-side-muted);
    }

    /* Panels open upward from the bottom action row */
    html[data-nav-pos="left"] .navbar-modern .notif-panel,
    html[data-nav-pos="right"] .navbar-modern .notif-panel {
        top: auto;
        bottom: calc(100% + 12px);
        left: 0;
        right: auto;
        width: min(340px, calc(100vw - 32px));
    }

    html[data-nav-pos="left"] .navbar-modern .profile-panel,
    html[data-nav-pos="right"] .navbar-modern .profile-panel {
        top: auto;
        bottom: calc(100% + 12px);
        left: 0;
        right: auto;
    }

    html[data-nav-pos="right"] .navbar-modern .notif-panel,
    html[data-nav-pos="right"] .navbar-modern .profile-panel {
        left: auto;
        right: 0;
    }

    html[data-nav-pos="left"].nav-collapsed .navbar-modern .nav-brand,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .nav-brand {
        justify-content: center;
        padding-inline: 0;
    }

    html[data-nav-pos="left"].nav-collapsed .navbar-modern .brand-text-group,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .brand-text-group,
    html[data-nav-pos="left"].nav-collapsed .navbar-modern .nav-link span,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .nav-link span,
    html[data-nav-pos="left"].nav-collapsed .navbar-modern .dropdown-arrow,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .dropdown-arrow,
    html[data-nav-pos="left"].nav-collapsed .navbar-modern .nav-action-group--quick,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .nav-action-group--quick {
        display: none !important;
    }

    html[data-nav-pos="left"].nav-collapsed .navbar-modern .nav-link,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .nav-link {
        justify-content: center;
        padding: 8px;
    }

    html[data-nav-pos="left"].nav-collapsed .navbar-modern .nav-item.has-dropdown .mega-dropdown,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .nav-item.has-dropdown .mega-dropdown {
        display: none !important;
    }

    html[data-nav-pos="left"].nav-collapsed .navbar-modern .nav-link-icon,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .nav-link-icon {
        width: 30px;
        height: 30px;
    }

    html[data-nav-pos="left"].nav-collapsed .navbar-modern .nav-link.active::after,
    html[data-nav-pos="left"].nav-collapsed .navbar-modern .nav-item.is-active-section > .nav-link::after,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .nav-link.active::after,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .nav-item.is-active-section > .nav-link::after {
        right: 3px;
        left: 3px;
        top: auto;
        bottom: 4px;
        width: auto;
        height: 3px;
    }

    html[data-nav-pos="left"].nav-collapsed .navbar-modern .nav-actions,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .nav-actions {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 6px;
    }

    html[data-nav-pos="left"].nav-collapsed .navbar-modern .nav-action-group,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .nav-action-group {
        flex-direction: column;
        width: auto;
    }

    html[data-nav-pos="left"].nav-collapsed .navbar-modern .nav-action-btn,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .nav-action-btn {
        width: 38px;
        height: 38px;
    }

    html[data-nav-pos="left"].nav-collapsed .navbar-modern .notif-panel,
    html[data-nav-pos="left"].nav-collapsed .navbar-modern .profile-panel {
        left: calc(100% + 8px);
        right: auto;
        bottom: 8px;
    }

    html[data-nav-pos="right"].nav-collapsed .navbar-modern .notif-panel,
    html[data-nav-pos="right"].nav-collapsed .navbar-modern .profile-panel {
        left: auto;
        right: calc(100% + 8px);
        bottom: 8px;
    }
}

/* ============================================================
   Navbar v2 — grouped actions, active states, bottom position,
   and readable menus for every navbar style.
   ============================================================ */

:root {
    --ce-nav-group-radius: 14px;
    --ce-nav-menu-radius: 18px;
    --ce-nav-menu-bg: var(--bg-white, #ffffff);
    --ce-nav-menu-fg: var(--text-primary, #0f172a);
    --ce-nav-menu-muted: var(--text-secondary, #475569);
    --ce-nav-menu-border: var(--border-color, #e2e8f0);
    --ce-nav-menu-hover: var(--bg-hover, #f1f5f9);
    --ce-nav-menu-active-bg: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent);
    --ce-nav-menu-active-fg: var(--primary, #2563eb);
    --ce-nav-menu-shadow: 0 22px 60px -28px rgba(15, 23, 42, .42);
}

html[data-theme="dark"] {
    --ce-nav-menu-bg: var(--th-dark-surface, #0f1930);
    --ce-nav-menu-fg: #e2e8f0;
    --ce-nav-menu-muted: #94a3b8;
    --ce-nav-menu-border: rgba(255, 255, 255, .10);
    --ce-nav-menu-hover: rgba(255, 255, 255, .08);
    --ce-nav-menu-active-bg: rgba(96, 165, 250, .16);
    --ce-nav-menu-active-fg: #bfdbfe;
    --ce-nav-menu-shadow: 0 22px 60px -28px rgba(0, 0, 0, .70);
}

/* ---------- Style tokens: theme-aware defaults ---------- */
html[data-nav-style="theme"],
html:not([data-nav-style]) {
    --ce-nav-bg: linear-gradient(120deg, var(--th-nav-a, #ffffff), var(--th-nav-b, #f8fafc));
    --ce-nav-fg: var(--th-nav-text, #0f172a);
    --ce-nav-muted: var(--th-nav-icon, #64748b);
    --ce-nav-border: var(--th-nav-border, rgba(15, 23, 42, .08));
    --ce-nav-hover: var(--th-nav-hover-bg, rgba(15, 23, 42, .06));
    --ce-nav-icon-bg: var(--th-nav-icon-bg, rgba(15, 23, 42, .05));
    --ce-nav-icon-fg: var(--th-nav-icon, #475569);
    --ce-nav-accent: var(--th-accent-2, var(--primary, #2563eb));
    --ce-nav-accent-2: var(--th-accent, var(--accent-purple, #06b6d4));
    --ce-nav-active-bg: color-mix(in srgb, var(--ce-nav-accent) 14%, transparent);
    --ce-nav-active-fg: var(--th-nav-text-hover, var(--ce-nav-accent));
    --ce-nav-active-icon-bg: color-mix(in srgb, var(--ce-nav-accent) 20%, transparent);
    --ce-nav-group-bg: color-mix(in srgb, var(--ce-nav-fg) 6%, transparent);
    --ce-nav-group-border: color-mix(in srgb, var(--ce-nav-fg) 12%, transparent);
    --ce-nav-quick-bg: linear-gradient(135deg, var(--ce-nav-accent), var(--ce-nav-accent-2));
    --ce-nav-quick-fg: #ffffff;
}

html[data-theme="dark"][data-nav-style="theme"],
html[data-theme="dark"]:not([data-nav-style]) {
    --ce-nav-bg: linear-gradient(120deg, var(--th-dark-nav-a, #0f172a), var(--th-dark-nav-b, #1e293b));
    --ce-nav-fg: var(--th-dark-nav-text, #e2e8f0);
    --ce-nav-muted: var(--th-dark-nav-icon, #94a3b8);
    --ce-nav-border: rgba(255, 255, 255, .12);
    --ce-nav-hover: var(--th-dark-nav-hover-bg, rgba(255, 255, 255, .10));
    --ce-nav-icon-bg: var(--th-dark-nav-icon-bg, rgba(255, 255, 255, .10));
    --ce-nav-icon-fg: var(--th-dark-nav-icon, #cbd5e1);
    --ce-nav-accent: var(--th-dark-nav-icon, #60a5fa);
    --ce-nav-accent-2: var(--th-dark-nav-text-hover, #93c5fd);
    --ce-nav-active-bg: rgba(96, 165, 250, .18);
    --ce-nav-active-fg: #ffffff;
    --ce-nav-active-icon-bg: rgba(96, 165, 250, .24);
    --ce-nav-group-bg: rgba(255, 255, 255, .06);
    --ce-nav-group-border: rgba(255, 255, 255, .12);
    --ce-nav-quick-bg: linear-gradient(135deg, #60a5fa, #22d3ee);
    --ce-nav-quick-fg: #0f172a;
}

html[data-nav-style="glass"] {
    --ce-nav-bg: rgba(255, 255, 255, .82);
    --ce-nav-fg: #0f172a;
    --ce-nav-muted: #64748b;
    --ce-nav-border: rgba(15, 23, 42, .08);
    --ce-nav-hover: rgba(15, 23, 42, .06);
    --ce-nav-icon-bg: rgba(15, 23, 42, .05);
    --ce-nav-icon-fg: #475569;
    --ce-nav-accent: var(--primary, #2563eb);
    --ce-nav-accent-2: var(--accent-purple, #06b6d4);
    --ce-nav-active-bg: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent);
    --ce-nav-active-fg: var(--primary, #2563eb);
    --ce-nav-active-icon-bg: color-mix(in srgb, var(--primary, #2563eb) 18%, transparent);
    --ce-nav-group-bg: rgba(15, 23, 42, .05);
    --ce-nav-group-border: rgba(15, 23, 42, .10);
    --ce-nav-quick-bg: linear-gradient(135deg, var(--primary, #2563eb), var(--accent-purple, #06b6d4));
    --ce-nav-quick-fg: #ffffff;
}

html[data-theme="dark"][data-nav-style="glass"] {
    --ce-nav-bg: rgba(15, 23, 42, .80);
    --ce-nav-fg: #f8fafc;
    --ce-nav-muted: #94a3b8;
    --ce-nav-border: rgba(255, 255, 255, .12);
    --ce-nav-hover: rgba(255, 255, 255, .10);
    --ce-nav-icon-bg: rgba(255, 255, 255, .10);
    --ce-nav-icon-fg: #cbd5e1;
    --ce-nav-accent: #60a5fa;
    --ce-nav-accent-2: #93c5fd;
    --ce-nav-active-bg: rgba(96, 165, 250, .18);
    --ce-nav-active-fg: #ffffff;
    --ce-nav-active-icon-bg: rgba(96, 165, 250, .24);
    --ce-nav-group-bg: rgba(255, 255, 255, .06);
    --ce-nav-group-border: rgba(255, 255, 255, .12);
    --ce-nav-quick-bg: linear-gradient(135deg, #60a5fa, #22d3ee);
    --ce-nav-quick-fg: #0f172a;
}

html[data-nav-style="light"] {
    --ce-nav-bg: #ffffff;
    --ce-nav-fg: #0f172a;
    --ce-nav-muted: #64748b;
    --ce-nav-border: #e2e8f0;
    --ce-nav-hover: rgba(15, 23, 42, .06);
    --ce-nav-icon-bg: rgba(15, 23, 42, .05);
    --ce-nav-icon-fg: #475569;
    --ce-nav-accent: var(--primary, #2563eb);
    --ce-nav-accent-2: var(--accent-purple, #06b6d4);
    --ce-nav-active-bg: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent);
    --ce-nav-active-fg: var(--primary, #2563eb);
    --ce-nav-active-icon-bg: color-mix(in srgb, var(--primary, #2563eb) 18%, transparent);
    --ce-nav-group-bg: rgba(15, 23, 42, .05);
    --ce-nav-group-border: rgba(15, 23, 42, .10);
    --ce-nav-quick-bg: linear-gradient(135deg, var(--primary, #2563eb), var(--accent-purple, #06b6d4));
    --ce-nav-quick-fg: #ffffff;
}

html[data-nav-style="dark"] {
    --ce-nav-bg: #0f172a;
    --ce-nav-fg: #f8fafc;
    --ce-nav-muted: #94a3b8;
    --ce-nav-border: rgba(255, 255, 255, .12);
    --ce-nav-hover: rgba(255, 255, 255, .10);
    --ce-nav-icon-bg: rgba(255, 255, 255, .10);
    --ce-nav-icon-fg: #cbd5e1;
    --ce-nav-accent: #60a5fa;
    --ce-nav-accent-2: #22d3ee;
    --ce-nav-active-bg: rgba(96, 165, 250, .18);
    --ce-nav-active-fg: #ffffff;
    --ce-nav-active-icon-bg: rgba(96, 165, 250, .24);
    --ce-nav-group-bg: rgba(255, 255, 255, .06);
    --ce-nav-group-border: rgba(255, 255, 255, .12);
    --ce-nav-quick-bg: linear-gradient(135deg, #60a5fa, #22d3ee);
    --ce-nav-quick-fg: #0f172a;
}

html[data-nav-style="gradient"] {
    --ce-nav-bg: linear-gradient(120deg, var(--primary, #2563eb), var(--accent-purple, #06b6d4));
    --ce-nav-fg: #ffffff;
    --ce-nav-muted: rgba(255, 255, 255, .72);
    --ce-nav-border: rgba(255, 255, 255, .18);
    --ce-nav-hover: rgba(255, 255, 255, .16);
    --ce-nav-icon-bg: rgba(255, 255, 255, .14);
    --ce-nav-icon-fg: #ffffff;
    --ce-nav-accent: #ffffff;
    --ce-nav-accent-2: rgba(255, 255, 255, .85);
    --ce-nav-active-bg: rgba(15, 23, 42, .28);
    --ce-nav-active-fg: #ffffff;
    --ce-nav-active-icon-bg: rgba(15, 23, 42, .34);
    --ce-nav-group-bg: rgba(255, 255, 255, .14);
    --ce-nav-group-border: rgba(255, 255, 255, .22);
    --ce-nav-quick-bg: rgba(255, 255, 255, .92);
    --ce-nav-quick-fg: var(--primary, #2563eb);
}

html[data-nav-style="theme"],
html:not([data-nav-style]) {
    --ce-nav-profile-bg: var(--ce-nav-quick-bg);
    --ce-nav-profile-fg: var(--ce-nav-quick-fg);
}

html[data-nav-style="glass"],
html[data-nav-style="light"] {
    --ce-nav-profile-bg: linear-gradient(135deg, var(--primary, #2563eb), var(--accent-purple, #06b6d4));
    --ce-nav-profile-fg: #ffffff;
}

html[data-nav-style="dark"] {
    --ce-nav-profile-bg: linear-gradient(135deg, #60a5fa, #22d3ee);
    --ce-nav-profile-fg: #0f172a;
}

html[data-nav-style="gradient"] {
    --ce-nav-profile-bg: rgba(255, 255, 255, .94);
    --ce-nav-profile-fg: var(--primary, #2563eb);
}

html[data-theme="dark"][data-nav-style="glass"],
html[data-theme="dark"][data-nav-style="dark"] {
    --ce-nav-profile-bg: linear-gradient(135deg, #60a5fa, #22d3ee);
    --ce-nav-profile-fg: #0f172a;
}

html[data-nav-pos] .navbar-modern .nav-action-group .nav-action-btn.profile-wrap {
    background: var(--ce-nav-profile-bg) !important;
    color: var(--ce-nav-profile-fg) !important;
    border-color: transparent !important;
}

html[data-nav-pos] .navbar-modern .nav-action-group .nav-action-btn.profile-wrap:hover {
    background: var(--ce-nav-profile-bg) !important;
    color: var(--ce-nav-profile-fg) !important;
    filter: brightness(1.06);
}

html[data-nav-pos] .navbar-modern .profile-wrap .profile-avatar {
    color: inherit;
}

/* ---------- Top / bottom shared surface and contrast ---------- */
html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern,
html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) #mainNav {
    background: var(--ce-nav-bg) !important;
    color: var(--ce-nav-fg) !important;
    border-color: var(--ce-nav-border) !important;
    box-shadow: 0 12px 30px -24px rgba(15, 23, 42, .40);
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-link,
html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-action-btn,
html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-login-link,
html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .brand-name {
    color: var(--ce-nav-fg) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .brand-tagline {
    color: var(--ce-nav-muted) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .brand-accent {
    background: none !important;
    color: var(--ce-nav-accent) !important;
    -webkit-text-fill-color: var(--ce-nav-accent) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .dropdown-arrow {
    color: var(--ce-nav-muted) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-link-icon {
    background: var(--ce-nav-icon-bg) !important;
    color: var(--ce-nav-icon-fg) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-link:hover {
    background: var(--ce-nav-hover) !important;
    color: var(--ce-nav-fg) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-login-link {
    background: var(--ce-nav-hover) !important;
    border-color: var(--ce-nav-border) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-login-link:hover {
    background: var(--ce-nav-active-bg) !important;
    color: var(--ce-nav-active-fg) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .mobile-toggle .hamburger span {
    background: var(--ce-nav-fg) !important;
}

/* ---------- Grouped actions ---------- */
.navbar-modern .nav-link {
    position: relative;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-actions {
    gap: 8px;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-action-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--ce-nav-group-radius);
    background: var(--ce-nav-group-bg);
    border: 1px solid var(--ce-nav-group-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-action-group .nav-action-btn {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border-radius: 11px;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--ce-nav-fg) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-action-group .nav-action-btn:hover {
    background: var(--ce-nav-hover) !important;
    color: var(--ce-nav-fg) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-action-group .nav-action-btn.quick-add {
    background: var(--ce-nav-quick-bg) !important;
    color: var(--ce-nav-quick-fg) !important;
    border-color: transparent !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-action-group .nav-action-btn.quick-add:hover {
    background: var(--ce-nav-quick-bg) !important;
    color: var(--ce-nav-quick-fg) !important;
    filter: brightness(1.06);
}

html[data-nav-pos] #mainNav .nav-action-group .nav-action-btn.profile-wrap {
    background: var(--ce-nav-profile-bg) !important;
    color: var(--ce-nav-profile-fg) !important;
    border-color: transparent !important;
}

html[data-nav-pos] #mainNav .nav-action-group .nav-action-btn.profile-wrap:hover {
    background: var(--ce-nav-profile-bg) !important;
    color: var(--ce-nav-profile-fg) !important;
    filter: brightness(1.06);
}

html[data-nav-pos] #mainNav .nav-action-group--account {
    gap: 10px;
}

/* ---------- Active page indicators ---------- */
html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-link.active,
html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-item.is-active-section > .nav-link {
    color: var(--ce-nav-active-fg) !important;
    background: var(--ce-nav-active-bg) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-link.active .nav-link-icon,
html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-item.is-active-section > .nav-link .nav-link-icon {
    background: var(--ce-nav-active-icon-bg) !important;
    color: var(--ce-nav-active-fg) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-link.active::after,
html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-item.is-active-section > .nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 999px;
    background: var(--ce-nav-accent);
    opacity: .95;
    pointer-events: none;
}

html[data-nav-pos="bottom"] .navbar-modern .nav-link.active::after,
html[data-nav-pos="bottom"] .navbar-modern .nav-item.is-active-section > .nav-link::after {
    top: 3px !important;
    bottom: auto !important;
}

/* ---------- Readable menu surfaces (independent of navbar style) ---------- */
html[data-nav-pos] .navbar-modern .dropdown-inner,
html[data-nav-pos] .navbar-modern .notif-panel,
html[data-nav-pos] .navbar-modern .profile-panel {
    background: var(--ce-nav-menu-bg) !important;
    color: var(--ce-nav-menu-fg) !important;
    border-color: var(--ce-nav-menu-border) !important;
    box-shadow: var(--ce-nav-menu-shadow) !important;
}

html[data-nav-pos] .navbar-modern .dropdown-link,
html[data-nav-pos] .navbar-modern .dropdown-link-title,
html[data-nav-pos] .navbar-modern .profile-menu-item,
html[data-nav-pos] .navbar-modern .profile-panel-name strong,
html[data-nav-pos] .navbar-modern .notif-title {
    color: var(--ce-nav-menu-fg) !important;
}

html[data-nav-pos] .navbar-modern .dropdown-section-title,
html[data-nav-pos] .navbar-modern .dropdown-link-desc,
html[data-nav-pos] .navbar-modern .profile-role,
html[data-nav-pos] .navbar-modern .notif-msg,
html[data-nav-pos] .navbar-modern .notif-empty {
    color: var(--ce-nav-menu-muted) !important;
}

html[data-nav-pos] .navbar-modern .dropdown-link:hover,
html[data-nav-pos] .navbar-modern .profile-menu-item:hover,
html[data-nav-pos] .navbar-modern .notif-item:hover {
    background: var(--ce-nav-menu-hover) !important;
}

html[data-nav-pos] .navbar-modern .notif-panel-header {
    background: var(--ce-nav-menu-hover) !important;
    color: var(--ce-nav-menu-fg) !important;
    border-bottom-color: var(--ce-nav-menu-border) !important;
}

html[data-nav-pos] .navbar-modern .notif-item {
    color: var(--ce-nav-menu-fg) !important;
    border-bottom-color: var(--ce-nav-menu-border) !important;
}

html[data-nav-pos] .navbar-modern .dropdown-link.active,
html[data-nav-pos] .navbar-modern .profile-menu-item.active {
    background: var(--ce-nav-menu-active-bg) !important;
    color: var(--ce-nav-menu-active-fg) !important;
}

html[data-nav-style="glass"] {
    --ce-nav-menu-bg: rgba(255, 255, 255, .86);
    --ce-nav-menu-fg: #0f172a;
    --ce-nav-menu-muted: #52647a;
    --ce-nav-menu-border: rgba(15, 23, 42, .10);
    --ce-nav-menu-hover: rgba(15, 23, 42, .06);
    --ce-nav-menu-active-bg: color-mix(in srgb, var(--primary, #2563eb) 14%, transparent);
    --ce-nav-menu-active-fg: var(--primary, #2563eb);
    --ce-nav-menu-shadow: 0 24px 60px -30px rgba(15, 23, 42, .45);
    --ce-nav-menu-danger: #dc2626;
    --ce-nav-menu-icon-blue: var(--color-blue, #0ea5e9);
    --ce-nav-menu-icon-green: var(--color-green, #059669);
    --ce-nav-menu-icon-orange: var(--color-orange, #d97706);
    --ce-nav-menu-icon-purple: var(--color-purple, #7c3aed);
    --ce-nav-menu-icon-teal: var(--color-teal, #0d9488);
    --ce-nav-menu-icon-red: var(--color-red, #dc2626);
    --ce-nav-menu-icon-ai: var(--accent-purple, #7c3aed);
}

html[data-theme="dark"][data-nav-style="glass"] {
    --ce-nav-menu-bg: rgba(15, 23, 42, .86);
    --ce-nav-menu-fg: #e8f4ff;
    --ce-nav-menu-muted: #a7c1d8;
    --ce-nav-menu-border: rgba(125, 211, 252, .18);
    --ce-nav-menu-hover: rgba(125, 211, 252, .12);
    --ce-nav-menu-active-bg: rgba(96, 165, 250, .20);
    --ce-nav-menu-active-fg: #ffffff;
    --ce-nav-menu-shadow: 0 24px 60px -30px rgba(0, 0, 0, .72);
    --ce-nav-menu-danger: #fca5a5;
    --ce-nav-menu-icon-blue: #7dd3fc;
    --ce-nav-menu-icon-green: #6ee7b7;
    --ce-nav-menu-icon-orange: #fdba74;
    --ce-nav-menu-icon-purple: #c4b5fd;
    --ce-nav-menu-icon-teal: #5eead4;
    --ce-nav-menu-icon-red: #fca5a5;
    --ce-nav-menu-icon-ai: #c4b5fd;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-inner,
html[data-nav-style="glass"] .navbar-modern .notif-panel,
html[data-nav-style="glass"] .navbar-modern .profile-panel {
    background: var(--ce-nav-menu-bg) !important;
    color: var(--ce-nav-menu-fg) !important;
    border-color: var(--ce-nav-menu-border) !important;
    box-shadow: var(--ce-nav-menu-shadow) !important;
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    backdrop-filter: blur(22px) saturate(165%);
}

html[data-nav-style="glass"] .navbar-modern .dropdown-link,
html[data-nav-style="glass"] .navbar-modern .dropdown-link-title,
html[data-nav-style="glass"] .navbar-modern .profile-menu-item,
html[data-nav-style="glass"] .navbar-modern .profile-panel-name strong,
html[data-nav-style="glass"] .navbar-modern .notif-title {
    color: var(--ce-nav-menu-fg) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-section-title,
html[data-nav-style="glass"] .navbar-modern .dropdown-link-desc,
html[data-nav-style="glass"] .navbar-modern .profile-role,
html[data-nav-style="glass"] .navbar-modern .notif-msg,
html[data-nav-style="glass"] .navbar-modern .notif-empty,
html[data-nav-style="glass"] .navbar-modern .external-icon,
html[data-nav-style="glass"] .navbar-modern .profile-menu-item i {
    color: var(--ce-nav-menu-muted) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-divider-v,
html[data-nav-style="glass"] .navbar-modern .profile-divider {
    background: var(--ce-nav-menu-border) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-link:hover,
html[data-nav-style="glass"] .navbar-modern .profile-menu-item:hover,
html[data-nav-style="glass"] .navbar-modern .notif-item:hover {
    background: var(--ce-nav-menu-hover) !important;
    color: var(--ce-nav-menu-fg) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-link:hover .external-icon,
html[data-nav-style="glass"] .navbar-modern .dropdown-link.active .dropdown-link-title,
html[data-nav-style="glass"] .navbar-modern .dropdown-link.active .external-icon,
html[data-nav-style="glass"] .navbar-modern .profile-menu-item.active i {
    color: var(--ce-nav-menu-active-fg) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-link.active,
html[data-nav-style="glass"] .navbar-modern .profile-menu-item.active {
    background: var(--ce-nav-menu-active-bg) !important;
    color: var(--ce-nav-menu-active-fg) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-link-icon {
    background: var(--ce-nav-icon-bg) !important;
    color: var(--ce-nav-icon-fg) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-link-icon.blue {
    background: color-mix(in srgb, var(--ce-nav-menu-icon-blue) 16%, transparent) !important;
    color: var(--ce-nav-menu-icon-blue) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-link-icon.green {
    background: color-mix(in srgb, var(--ce-nav-menu-icon-green) 16%, transparent) !important;
    color: var(--ce-nav-menu-icon-green) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-link-icon.orange {
    background: color-mix(in srgb, var(--ce-nav-menu-icon-orange) 16%, transparent) !important;
    color: var(--ce-nav-menu-icon-orange) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-link-icon.purple {
    background: color-mix(in srgb, var(--ce-nav-menu-icon-purple) 16%, transparent) !important;
    color: var(--ce-nav-menu-icon-purple) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-link-icon.teal {
    background: color-mix(in srgb, var(--ce-nav-menu-icon-teal) 16%, transparent) !important;
    color: var(--ce-nav-menu-icon-teal) !important;
}

html[data-nav-style="glass"] .navbar-modern .dropdown-link-icon.ai {
    background: color-mix(in srgb, var(--ce-nav-menu-icon-ai) 16%, transparent) !important;
    color: var(--ce-nav-menu-icon-ai) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-panel-header {
    background: var(--ce-nav-menu-hover) !important;
    color: var(--ce-nav-menu-fg) !important;
    border-bottom-color: var(--ce-nav-menu-border) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-mark-all {
    background: var(--ce-nav-menu-active-bg) !important;
    color: var(--ce-nav-menu-active-fg) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-mark-all:hover {
    background: color-mix(in srgb, var(--ce-nav-menu-active-fg) 22%, transparent) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-item {
    color: var(--ce-nav-menu-fg) !important;
    border-bottom-color: var(--ce-nav-menu-border) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-item.unread {
    background: var(--ce-nav-menu-active-bg) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-item.unread:hover {
    background: var(--ce-nav-menu-hover) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-dot.info {
    background: color-mix(in srgb, var(--ce-nav-menu-icon-blue) 16%, transparent) !important;
    color: var(--ce-nav-menu-icon-blue) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-dot.success {
    background: color-mix(in srgb, var(--ce-nav-menu-icon-green) 16%, transparent) !important;
    color: var(--ce-nav-menu-icon-green) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-dot.warning {
    background: color-mix(in srgb, var(--ce-nav-menu-icon-orange) 16%, transparent) !important;
    color: var(--ce-nav-menu-icon-orange) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-dot.danger {
    background: color-mix(in srgb, var(--ce-nav-menu-icon-red) 16%, transparent) !important;
    color: var(--ce-nav-menu-icon-red) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-dot.ai {
    background: color-mix(in srgb, var(--ce-nav-menu-icon-ai) 16%, transparent) !important;
    color: var(--ce-nav-menu-icon-ai) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-dot.default {
    background: var(--ce-nav-menu-hover) !important;
    color: var(--ce-nav-menu-muted) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-panel-footer {
    background: var(--ce-nav-menu-hover) !important;
    color: var(--ce-nav-menu-active-fg) !important;
    border-top-color: var(--ce-nav-menu-border) !important;
}

html[data-nav-style="glass"] .navbar-modern .notif-panel-footer:hover {
    background: var(--ce-nav-menu-active-bg) !important;
}

html[data-nav-style="glass"] .navbar-modern .profile-panel-head {
    background: var(--ce-nav-menu-hover) !important;
    color: var(--ce-nav-menu-fg) !important;
    border-bottom-color: var(--ce-nav-menu-border) !important;
}

html[data-nav-style="glass"] .navbar-modern .profile-panel-footer {
    background: var(--ce-nav-menu-hover) !important;
    color: var(--ce-nav-menu-fg) !important;
    border-top-color: var(--ce-nav-menu-border) !important;
}

html[data-nav-style="glass"] .navbar-modern .profile-menu-item.danger,
html[data-nav-style="glass"] .navbar-modern .profile-menu-item.danger i {
    color: var(--ce-nav-menu-danger) !important;
}

html[data-nav-style="glass"] .navbar-modern .profile-menu-item.danger:hover {
    background: color-mix(in srgb, var(--ce-nav-menu-danger) 14%, transparent) !important;
}

html:not([data-nav-pos="left"]):not([data-nav-pos="right"]):not([data-nav-pos="bottom"]) .navbar-modern .notif-panel,
html:not([data-nav-pos="left"]):not([data-nav-pos="right"]):not([data-nav-pos="bottom"]) .navbar-modern .profile-panel {
    top: calc(100% + 18px);
}

/* ---------- Bottom navbar ---------- */
html[data-nav-pos="bottom"] body {
    padding-top: 0 !important;
    padding-bottom: var(--nav-height, 72px) !important;
    transition: padding .25s ease;
}

html[data-nav-pos="bottom"] .navbar-modern,
html[data-nav-pos="bottom"] #mainNav {
    top: auto !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    border-top: 1px solid var(--ce-nav-border) !important;
    border-bottom: 0 !important;
    border-radius: 0;
    box-shadow: 0 -18px 40px -28px rgba(15, 23, 42, .45) !important;
}

html[data-nav-pos="bottom"] .navbar-modern .mega-dropdown {
    top: auto;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(-8px);
}

html[data-nav-pos="bottom"] .navbar-modern .nav-item.has-dropdown:hover .mega-dropdown,
html[data-nav-pos="bottom"] .navbar-modern .nav-item.has-dropdown:focus-within .mega-dropdown {
    transform: translateX(-50%) translateY(0);
}

html[data-nav-pos="bottom"] .navbar-modern .mega-dropdown::before {
    top: auto;
    bottom: -12px;
}

html[data-nav-pos="bottom"] .navbar-modern .notif-panel,
html[data-nav-pos="bottom"] .navbar-modern .profile-panel {
    top: auto;
    bottom: calc(100% + 28px);
    transform: translateY(-8px);
}

html[data-nav-pos="bottom"] .navbar-modern .notif-wrap.open .notif-panel,
html[data-nav-pos="bottom"] .navbar-modern .profile-wrap.open .profile-panel {
    transform: translateY(0);
}

/* ---------- Side navbar: grouped actions and active state ---------- */
@media (min-width: 1025px) {
    html[data-nav-pos="left"] .navbar-modern .nav-action-group,
    html[data-nav-pos="right"] .navbar-modern .nav-action-group {
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 3px;
        border-radius: var(--ce-nav-group-radius);
        background: var(--ce-nav-side-icon-bg);
        border: 1px solid var(--ce-nav-side-line);
        box-shadow: none;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-action-group .nav-action-btn,
    html[data-nav-pos="right"] .navbar-modern .nav-action-group .nav-action-btn {
        padding: 0 !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: var(--ce-nav-side-text) !important;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-action-group .nav-action-btn:hover,
    html[data-nav-pos="right"] .navbar-modern .nav-action-group .nav-action-btn:hover {
        background: var(--ce-nav-side-hover) !important;
        color: var(--ce-nav-side-text) !important;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-action-group .nav-action-btn.quick-add,
    html[data-nav-pos="right"] .navbar-modern .nav-action-group .nav-action-btn.quick-add {
        background: var(--ce-nav-quick-bg) !important;
        color: var(--ce-nav-quick-fg) !important;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-action-group .nav-action-btn.quick-add:hover,
    html[data-nav-pos="right"] .navbar-modern .nav-action-group .nav-action-btn.quick-add:hover {
        background: var(--ce-nav-quick-bg) !important;
        color: var(--ce-nav-quick-fg) !important;
        filter: brightness(1.06);
    }

    html[data-nav-pos="left"] .navbar-modern .nav-login-link,
    html[data-nav-pos="right"] .navbar-modern .nav-login-link {
        color: var(--ce-nav-side-text) !important;
        background: var(--ce-nav-side-icon-bg) !important;
        border-color: var(--ce-nav-side-line) !important;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-link.active,
    html[data-nav-pos="left"] .navbar-modern .nav-item.is-active-section > .nav-link,
    html[data-nav-pos="right"] .navbar-modern .nav-link.active,
    html[data-nav-pos="right"] .navbar-modern .nav-item.is-active-section > .nav-link {
        background: var(--ce-nav-active-bg) !important;
        color: var(--ce-nav-active-fg) !important;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-link.active .nav-link-icon,
    html[data-nav-pos="left"] .navbar-modern .nav-item.is-active-section > .nav-link .nav-link-icon,
    html[data-nav-pos="right"] .navbar-modern .nav-link.active .nav-link-icon,
    html[data-nav-pos="right"] .navbar-modern .nav-item.is-active-section > .nav-link .nav-link-icon {
        background: var(--ce-nav-active-icon-bg) !important;
        color: var(--ce-nav-active-fg) !important;
    }

    html[data-nav-pos="left"] .navbar-modern .nav-link.active::after,
    html[data-nav-pos="left"] .navbar-modern .nav-item.is-active-section > .nav-link::after {
        content: '';
        position: absolute;
        top: 10px;
        bottom: 10px;
        right: 4px;
        left: auto;
        width: 3px;
        height: auto;
        border-radius: 999px;
        background: var(--ce-nav-accent);
        opacity: .95;
        pointer-events: none;
    }

    html[data-nav-pos="right"] .navbar-modern .nav-link.active::after,
    html[data-nav-pos="right"] .navbar-modern .nav-item.is-active-section > .nav-link::after {
        content: '';
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 4px;
        right: auto;
        width: 3px;
        height: auto;
        border-radius: 999px;
        background: var(--ce-nav-accent);
        opacity: .95;
        pointer-events: none;
    }
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 768px) {
    html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-action-group--quick {
        display: none;
    }

    html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-action-group {
        gap: 0;
        padding: 2px;
    }

    html:not([data-nav-pos="left"]):not([data-nav-pos="right"]) .navbar-modern .nav-action-group .nav-action-btn {
        width: 34px;
        height: 34px;
    }
}

.mobile-nav-link.active,
.mobile-nav-link[aria-current="page"] {
    background: var(--th-nav-hover-bg, var(--ce-nav-menu-active-bg)) !important;
    color: var(--th-nav-text-hover, var(--th-nav-text, var(--ce-nav-menu-active-fg))) !important;
    font-weight: 600;
}

html[data-theme="dark"] .mobile-nav-link.active,
html[data-theme="dark"] .mobile-nav-link[aria-current="page"] {
    background: var(--th-dark-nav-hover-bg, rgba(255, 255, 255, .10)) !important;
    color: var(--th-dark-nav-text-hover, #ffffff) !important;
}