/* static/css/sidebar.css */
#sidebar {
    width: 100%; /* Agora ele herda os 220px do container pai */
    background-color: var(--bg-sidebar);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    border-bottom: 1px solid #1f2937;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.sidebar-nav {
    padding: var(--spacing-md) 0;
    flex: 1;
    overflow-y: auto;
}

.sidebar-group-title {
    font-size: 12px; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    color: #9ca3af; /* Clareado um pouco para dar contraste */
    margin-top: var(--spacing-md);
}

.nav-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background-color: #1f2937;
    color: #ffffff;
}

.nav-item.active {
    background-color: #1f2937;
    color: #ffffff;
    border-left-color: var(--accent-color);
}

.nav-icon {
    width: 16px;
    margin-right: 10px;
    text-align: center;
}