/* ============================================================
   NAV PROGRESS BAR — erp-nav.js companion styles
   Thin accent bar at the very top of the viewport.
   ============================================================ */

#erp-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #5156be, #7c73e6, #a78bfa);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
    /* box-shadow gives the bar a subtle glow */
    box-shadow: 0 0 8px rgba(81, 86, 190, .55);
}

/* Dark sidebar: bar stays the same accent color — matches sidebar */
body[data-layout-mode=dark] #erp-nav-bar {
    background: linear-gradient(90deg, #7c73e6, #a78bfa, #c4b5fd);
    box-shadow: 0 0 10px rgba(167, 139, 250, .5);
}

/* Pre-highlight: sidebar item lights up instantly on click,
   before the new page loads and PHP sets the real active class */
#sidebar-menu a._nav-pre-active {
    background-color: rgba(81, 86, 190, .13) !important;
    color: #5156be !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 #5156be !important;
    transform: translateX(4px) !important;
}
body[data-layout-mode=dark] #sidebar-menu a._nav-pre-active {
    background-color: rgba(255, 255, 255, .09) !important;
    color: #a5b4fc !important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, .55) !important;
}

/* Main content fade-out during navigation.
   We set this via JS, but transition must be defined in CSS. */
.main-content {
    transition: opacity 100ms ease;
    will-change: opacity;
}