/*
 * LaunchCompass
 * Copyright (c) 2026 Robert Morgan / RMC Software Solutions, LLC
 * All rights reserved.
 * 
 * This software is proprietary and confidential.
 * Unauthorized copying, modification, distribution, or use is strictly prohibited.
 * 
 * File: wwwroot\css\bottom-nav.css
 * Author: Robert Morgan
 * Version: 1.0.0
 * Created: 01/28/2026
 * Modified: 01/28/2026
 * Released: 00/00/0000
 * 
 * Description:
 *     Mobile bottom navigation bar styles with fixed positioning.
 *     Includes active state highlighting and safe-area-inset handling for iOS.
 * 
 * MVVM Role: Styling
 * Architecture: Component Styles | Safe Area Insets
*/

/* wwwroot/css/bottom-nav.css */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 16px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 100;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 20px;
    text-decoration: none;
    color: var(--text-muted);
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

    .nav-item:hover {
        color: var(--text-secondary);
    }

    .nav-item.active {
        color: var(--accent-orange);
    }

.nav-icon {
    width: 24px;
    height: 24px;
}

.nav-item span {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Ensure content doesn't hide behind nav */
.compass-app {
    padding-bottom: 80px;
}

/* Subtle glow on active item */
.nav-item.active .nav-icon {
    filter: drop-shadow(0 0 4px var(--accent-orange));
}