/* ==================== NAVIGATION POSITIONING ==================== */
body.nav-pos-right .sidebar {
    left: auto !important;
    right: 0 !important;
    border-right: none !important;
    border-left: 1px solid var(--border-color);
}
body.nav-pos-right:not(.sidebar-collapsed) .main-content {
    margin-left: 0 !important;
    margin-right: 260px !important;
}
body.nav-pos-right.sidebar-collapsed .main-content {
    margin-left: 0 !important;
    margin-right: 68px !important;
}
body.nav-pos-right:not(.sidebar-collapsed) .topbar,
body.nav-pos-right:not(.sidebar-collapsed) .admin-footer {
    left: 0 !important;
    right: 260px !important;
}
body.nav-pos-right.sidebar-collapsed .topbar,
body.nav-pos-right.sidebar-collapsed .admin-footer {
    left: 0 !important;
    right: 68px !important;
}
body.nav-pos-right .sidebar-header {
    flex-direction: row-reverse;
}

/* ==================== NAVIGATION STYLES ==================== */

/* 1. Neon Cyber */
body.nav-style-neon-cyber .sidebar {
    background: rgba(10, 15, 30, 0.85) !important;
    border-right: 1px solid #0ff !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}
body.nav-style-neon-cyber .nav-item:hover, body.nav-style-neon-cyber .nav-item.active {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: inset 4px 0 0 #0ff;
    color: #0ff;
}

/* 2. Clear Glass */
body.nav-style-clear-glass .sidebar {
    background: transparent !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 3. Frosted Minimal */
body.nav-style-frosted-minimal .sidebar {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(15px) !important;
    border-right: none !important;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5);
}

/* 4. Holographic Grid */
body.nav-style-holographic-grid .sidebar {
    background: linear-gradient(135deg, rgba(255,0,255,0.1), rgba(0,255,255,0.1)) !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}

/* 5. Tactical HUD */
body.nav-style-tactical-hud .sidebar {
    background: rgba(0, 20, 0, 0.9) !important;
    border-right: 2px solid #0f0 !important;
    font-family: monospace;
}
body.nav-style-tactical-hud .nav-item:hover, body.nav-style-tactical-hud .nav-item.active {
    background: rgba(0, 255, 0, 0.2);
    color: #0f0;
}

/* 6. Crimson Protocol */
body.nav-style-crimson-protocol .sidebar {
    background: rgba(20, 0, 0, 0.9) !important;
    border-right: 1px solid #f00 !important;
}
body.nav-style-crimson-protocol .nav-item:hover, body.nav-style-crimson-protocol .nav-item.active {
    box-shadow: inset 4px 0 0 #f00;
    color: #f00;
}

/* 7. Retro Terminal */
body.nav-style-retro-terminal .sidebar {
    background: #000 !important;
    border-right: 2px solid #33ff00 !important;
}

/* 8. Ghost Wireframe */
body.nav-style-ghost-wireframe .sidebar {
    background: transparent !important;
    border-right: 1px dashed rgba(255, 255, 255, 0.3) !important;
}
body.nav-style-ghost-wireframe .nav-item {
    border: 1px solid transparent;
}
body.nav-style-ghost-wireframe .nav-item:hover, body.nav-style-ghost-wireframe .nav-item.active {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
}

/* 9. Outrun Synthwave */
body.nav-style-outrun-synthwave .sidebar {
    background: linear-gradient(to bottom, #2a0845, #6441A5) !important;
    border-right: 2px solid #ff00ff !important;
}

/* 10. Neon Tokyo */
body.nav-style-neon-tokyo .sidebar {
    background: rgba(5, 5, 10, 0.9) !important;
    border-right: 1px solid #ff0055 !important;
    box-shadow: 5px 0 15px rgba(255, 0, 85, 0.2);
}

/* 11. Obsidian Stealth */
body.nav-style-obsidian-stealth .sidebar {
    background: #050505 !important;
    border-right: 1px solid #111 !important;
}
body.nav-style-obsidian-stealth .nav-item:hover {
    background: #111;
}

/* 12. Void Edge */
body.nav-style-void-edge .sidebar {
    background: radial-gradient(circle at top left, rgba(40,0,60,0.9), #000) !important;
    border-right: none !important;
}

/* 13. Corporate Light */
body.nav-style-corporate-light .sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e0e0e0 !important;
    color: #333 !important;
}
body.nav-style-corporate-light .nav-item {
    color: #555 !important;
}
body.nav-style-corporate-light .nav-item:hover, body.nav-style-corporate-light .nav-item.active {
    background: #f0f4f8;
    color: #0066cc !important;
}
body.nav-style-corporate-light .sidebar-brand { color: #333 !important; }

/* 14. Midnight Velvet */
body.nav-style-midnight-velvet .sidebar {
    background: linear-gradient(180deg, #1a1a2e, #16213e) !important;
    border-right: 1px solid rgba(255,255,255,0.05) !important;
}

/* 15. Aurora Glow */
@keyframes aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
body.nav-style-aurora-glow .sidebar {
    background: linear-gradient(270deg, rgba(0, 255, 128, 0.2), rgba(0, 128, 255, 0.2), rgba(128, 0, 255, 0.2)) !important;
    background-size: 400% 400% !important;
    animation: aurora 15s ease infinite !important;
    backdrop-filter: blur(20px) !important;
}

/* 16. Chrome Plated */
body.nav-style-chrome-plated .sidebar {
    background: linear-gradient(to bottom, #d7d9db, #9a9b9c) !important;
    border-right: 2px solid #fff !important;
    color: #222 !important;
}
body.nav-style-chrome-plated .nav-item { color: #333 !important; }
body.nav-style-chrome-plated .sidebar-brand { color: #222 !important; }

/* 17. Neumorphic Pressed */
body.nav-style-neumorphic-pressed .sidebar {
    background: #1e1e24 !important;
    box-shadow: 5px 5px 10px #131317, -5px -5px 10px #292931 !important;
    border-right: none !important;
}

/* 18. Brutalism Block */
body.nav-style-brutalism-block .sidebar {
    background: #ffd700 !important;
    border-right: 4px solid #000 !important;
    color: #000 !important;
}
body.nav-style-brutalism-block .nav-item { color: #000 !important; font-weight: bold; border-bottom: 2px solid #000; }
body.nav-style-brutalism-block .sidebar-brand { color: #000 !important; font-weight: 900; text-transform: uppercase; }

/* 19. Glassmorphic Bubble */
body.nav-style-glassmorphic-bubble .sidebar {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 0 30px 30px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 20. Diamond Cut */
body.nav-style-diamond-cut .sidebar {
    background: #111 !important;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
}

/* ==================== 5 NEW NAVIGATION STYLES ==================== */

/* 1. Floating Island (Rounded, detached items) */
body.nav-style-floating-island .sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 12px;
}
body.nav-style-floating-island .nav-item {
    border-radius: 12px;
    margin-bottom: 8px;
    background: rgba(var(--primary-color-rgb), 0.05);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.nav-style-floating-island .nav-item:hover {
    transform: translateY(-2px) scale(1.02);
    background: rgba(var(--primary-color-rgb), 0.15);
    box-shadow: 0 8px 15px rgba(var(--primary-color-rgb), 0.2);
}
body.nav-style-floating-island .nav-item.active {
    background: var(--primary-gradient);
    border-color: transparent;
    color: #fff !important;
    transform: scale(1.04);
    box-shadow: 0 10px 20px rgba(var(--primary-color-rgb), 0.4);
}

/* 2. Cyber Matrix (Tech corners, green glow) */
body.nav-style-cyber-matrix .sidebar {
    background: rgba(0, 10, 0, 0.8) !important;
    border-right: 2px solid #0f0 !important;
}
body.nav-style-cyber-matrix .nav-item {
    border-radius: 0;
    border-bottom: 1px dashed rgba(0, 255, 0, 0.3);
    color: #0f0 !important;
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
}
body.nav-style-cyber-matrix .nav-item:hover {
    background: rgba(0, 255, 0, 0.1);
    padding-left: 20px;
    border-left: 3px solid #0f0;
}
body.nav-style-cyber-matrix .nav-item.active {
    background: rgba(0, 255, 0, 0.2);
    border-left: 5px solid #0f0;
    color: #fff !important;
    box-shadow: inset 10px 0 20px rgba(0,255,0,0.3);
    text-shadow: 0 0 5px #0f0;
}

/* 3. Neon Tube (Glowing rounded borders) */
body.nav-style-neon-tube .nav-item {
    border-radius: 30px;
    margin: 6px 12px;
    border: 2px solid rgba(var(--primary-color-rgb), 0.2);
    background: transparent;
}
body.nav-style-neon-tube .nav-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5), inset 0 0 10px rgba(var(--primary-color-rgb), 0.3);
}
body.nav-style-neon-tube .nav-item.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color), inset 0 0 15px rgba(var(--primary-color-rgb), 0.6);
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color) !important;
    text-shadow: 0 0 5px var(--primary-color);
}

/* 4. Elegant Gold (Thin lines, corporate luxury) */
body.nav-style-elegant-gold .sidebar {
    background: rgba(15, 15, 15, 0.95) !important;
    border-right: 1px solid #d4af37 !important;
}
body.nav-style-elegant-gold .nav-item {
    border-radius: 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    color: #a0a0a0 !important;
    font-weight: 300;
    letter-spacing: 1px;
}
body.nav-style-elegant-gold .nav-item:hover {
    color: #d4af37 !important;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
}
body.nav-style-elegant-gold .nav-item.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.3) 0%, transparent 100%);
    border-left: 3px solid #d4af37;
    text-shadow: 0 0 1px #d4af37;
}

/* 5. Steampunk Brass (Industrial, riveted look) */
body.nav-style-steampunk-brass .sidebar {
    background: #2b1f1a !important;
    border-right: 3px solid #b5a642 !important;
    box-shadow: inset -2px 0 5px rgba(0,0,0,0.5) !important;
}
body.nav-style-steampunk-brass .nav-item {
    border-radius: 0;
    border: 1px solid #5a4224;
    margin-bottom: 4px;
    background: linear-gradient(180deg, #3d2b22 0%, #2b1f1a 100%);
    color: #d4c49a !important;
}
body.nav-style-steampunk-brass .nav-item:hover {
    background: linear-gradient(180deg, #4d3629 0%, #3d2b22 100%);
    border-color: #b5a642;
}
body.nav-style-steampunk-brass .nav-item.active {
    background: linear-gradient(180deg, #b5a642 0%, #8a7a24 100%);
    color: #2b1f1a !important;
    border: 1px solid #ffebb5;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.5);
    font-weight: bold;
}