/**
 * App shell — sidebar nav variants, shared chrome helpers.
 */

/* Featured nav items (SOC, Cybermap) — theme-aligned, no inline styles */
.nav-item.nav-item--featured {
    font-weight: 600;
    border: 1px solid transparent;
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.08),
        rgba(0, 245, 212, 0.08)
    );
    border-color: rgba(0, 212, 255, 0.28);
}

.nav-item.nav-item--featured:hover {
    background: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.14),
        rgba(0, 245, 212, 0.12)
    );
    border-color: rgba(0, 245, 212, 0.35);
}

.nav-item.nav-item--featured i.nav-item__icon--cyber {
    color: #00d4ff;
}

.nav-item.nav-item--featured--soc {
    background: linear-gradient(
        135deg,
        rgba(247, 37, 133, 0.1),
        rgba(123, 97, 255, 0.1)
    );
    border-color: rgba(247, 37, 133, 0.32);
}

.nav-item.nav-item--featured--soc:hover {
    background: linear-gradient(
        135deg,
        rgba(247, 37, 133, 0.16),
        rgba(123, 97, 255, 0.14)
    );
    border-color: rgba(247, 37, 133, 0.45);
}

.nav-item.nav-item--featured--soc i.nav-item__icon--soc {
    color: #f72585;
}

.nav-item.nav-item--featured.active {
    color: var(--accent-primary);
    border-color: var(--border-glow);
}

/* ---- Focus (keyboard) ---- */
.app-container .nav-item:focus-visible,
.app-container .header-btn:focus-visible,
.app-container .mobile-menu-toggle:focus-visible,
.app-container .sidebar-close:focus-visible,
.app-container .user-menu:focus-visible,
.topology-page .zoom-btn:focus-visible,
.topology-page .btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ---- Reduce motion (app shell + topology chrome; canvas libs unaffected) ---- */
@media (prefers-reduced-motion: reduce) {
    .app-container .nav-item,
    .app-container .header-btn,
    .app-container .sidebar,
    .app-container .main-content,
    .mobile-menu-toggle,
    .sidebar-close,
    .user-menu,
    .user-dropdown,
    .topology-page .zoom-btn,
    .topology-page .device-type-item,
    .topology-page .topology-toolbar,
    .topology-page .save-indicator {
        transition-duration: 0.01ms !important;
    }
    .app-container .slide-up,
    .app-container .slide-in-left,
    .app-container .float,
    .user-dropdown.show {
        animation: none !important;
    }
}