/* --- SHARED BASE STYLES --- */
.sidebar {
    position: fixed;
    top: 64px; /* Matches Header Height */
    left: 0;
    bottom: 0;
    background-color: var(--bg-sidebar);
    z-index: 1000;
    overflow-y: auto;
    transition: transform 0.3s ease;
    
    /* --- PROFESSIONAL DESKTOP BORDER --- */
    /* Clean, straight line. No curves. No shadow. */
    border-right: 1px solid var(--border); 
}

/* LINK STYLING */
.sidebar-link {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 24px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s;
}
.sidebar-link:hover {
    background-color: var(--hover-bg);
}

/* --- ICONS: RED ACCENT --- */
.sidebar-link .material-icons, 
.sidebar-link .material-icons-outlined {
    margin-right: 24px;
    font-size: 24px;
    min-width: 24px;
    color: var(--primary); /* The Site Red */
}

/* SECTION TITLES */
.sidebar-title {
    padding: 16px 24px 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- DIVIDERS: SUBTLE BRANDING --- */
.sidebar-divider, hr {
    border: 0;
    /* Very light red tint for professional polish */
    border-top: 1px solid rgba(204, 0, 0, 0.1); 
    margin: 8px 0;
}

/* --- MOBILE MODE (Floating Panel) --- */
@media (max-width: 768px) {
    .sidebar {
        width: 240px;
        transform: translateX(-100%); /* HIDDEN */
        top: 56px;
        
        /* Mobile gets the "Pop Out" look (Rounded & Shadow) */
        border-right: 1px solid var(--primary);
        border-radius: 0 24px 24px 0;
        box-shadow: 5px 0 25px rgba(0,0,0,0.2);
    }
    
    .sidebar.mobile-active {
        transform: translateX(0); /* SHOW */
    }
}

/* --- DESKTOP MODE (Fixed Wall) --- */
@media (min-width: 769px) {
    .sidebar {
        width: 240px;
        transform: translateX(0); /* ALWAYS SHOW */
    }
}