/* backend/static/css/modules/navigation.css */

/* --- Navigation Items (Sidebar) --- */
.nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.25rem; /* Increased padding for better touch/click area */
    border-radius: 16px; /* Slightly less rounded than pill for list items - looks more modern */
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 1rem; /* Increased font size for readability */
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    margin-bottom: 0.25rem;
}

.nav-item:hover { 
    background-color: var(--color-background); 
    color: var(--color-text);
    transform: translateX(4px); 
}

.nav-item.active { 
    background-color: var(--color-surface); /* Card-like active state */
    color: var(--color-primary-dark); 
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* Subtle lift */
    border-color: var(--color-border);
}

.nav-icon { 
    width: 24px; /* Slightly larger icons */
    height: 24px; 
    flex-shrink: 0; 
    stroke-width: 2;
    color: inherit;
}

/* --- Tab Bar (Mobile) - Ultra Subtle (Focus on Content) --- */
.tab-bar {
    display: flex;
    justify-content: space-around; /* Distribute evenly */
    align-items: center;
    padding: 0.5rem 1rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    
    /* Subtle Translucency (Frosted Glass) */
    background: rgba(var(--color-surface-rgb), 0.9); /* Slightly more opaque to hide scroll behind */
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid rgba(var(--color-border-rgb), 0.4);
    
    order: 1;
    flex-shrink: 0; 
    flex-grow: 0;
    z-index: 100;
    /* Removed Shadow to make it sit flat/recede */
    /* box-shadow: ... */
    height: calc(3.5rem + env(safe-area-inset-bottom)); /* Compact height */
    box-sizing: border-box;
}

@media (min-width: 769px) {
    .tab-bar { display: none; }
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted); /* Muted by default */
    text-decoration: none;
    min-width: 50px; 
    min-height: 44px; /* Touch target */
    transition: all 0.2s ease;
    position: relative;
    opacity: 0.5; /* Fade out inactive items */
    flex: 0 1 auto;
    background: transparent; /* No background pill */
}

/* Hide Text Labels on Mobile */
.tab-item span {
    display: none;
}

.tab-item:active {
    transform: scale(0.92);
    opacity: 0.8;
}

.tab-item.active { 
    color: var(--color-primary); 
    opacity: 1; /* Full visibility for active */
}

/* Optional: Very subtle dot indicator */
/*
.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 50%;
}
*/

.tab-item svg { 
    width: 26px; 
    height: 26px; 
    stroke-width: 1.8px; /* Thinner by default for elegance */
    transition: all 0.3s ease;
}

.tab-item.active svg {
    transform: translateY(-2px); /* Slight lift */
    stroke-width: 2.5px; /* Bolder when active */
    /* filter: drop-shadow(0 4px 12px rgba(var(--color-primary-rgb), 0.4));  <- Removed glow for subtlety */
}

/* Theme Toggle Icons Visibility */
[data-theme="light"] #theme-icon-sun { display: none; }
[data-theme="dark"] #theme-icon-moon { display: none; }