/* Define color variables for themes */
:root {
    --bg-color: #f4f4f4;
    --text-color: #333;
    --sidebar-bg: #fff;
    --separator-color: #ccc;
    --link-color: #333;
    --line-color: #333;
}

body.theme-dark {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --sidebar-bg: #2c2c2c;
    --separator-color: #444;
    --link-color: #e0e0e0;
    --line-color: #e0e0e0;
}

body.theme-sepia {
    --bg-color: #f4e8d5;
    --text-color: #5b4636;
    --sidebar-bg: #efe2ce;
    --separator-color: #d3c1a5;
    --link-color: #5b4636;
    --line-color: #5b4636;
}

body.theme-oled {
    --bg-color: #000000;
    --text-color: #e0e0e0;
    --sidebar-bg: #111111;
    --separator-color: #333;
    --link-color: #e0e0e0;
    --line-color: #e0e0e0;
}


body { 
    overflow-x: hidden;
    /* Add smooth transition for theme changes */
    transition: background-color 0.3s ease, color 0.3s ease;
} 

.hamburger-menu { 
    position: fixed; 
    top: 20px; 
    left: 20px; 
    cursor: pointer; 
    z-index: 3;
} 

.line { 
    width: 30px; 
    height: 3px; 
    background-color: var(--line-color); /* Use variable */
    margin: 6px 0; 
} 

.sidebar { 
    position: fixed; 
    left: -250px; 
    top: 0; 
    width: 250px; 
    height: 100%; 
    background-color: var(--sidebar-bg); /* Use variable */
    padding-top: 60px; 
    transition: left 0.3s ease, background-color 0.3s ease; /* Add bg transition */
    z-index: 2; 
} 

.sidebar ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

/* --- UPDATED FOR ICON ALIGNMENT --- */
.sidebar ul li a, 
.collapsible-btn { 
    display: flex; /* Changed from 'block' to 'flex' */
    align-items: center; /* Vertically aligns icon and text */
    gap: 15px; /* Creates space between icon and text */
    padding: 15px; 
    color: var(--link-color); /* Use variable */
    text-decoration: none; 
    font-size: 1.2em;
} 

.collapsible-btn { 
    background-color: transparent; 
    border: none; 
    width: 100%; 
    text-align: left; 
    cursor: pointer; 
} 

.collapsible-content { 
    display: none; 
    padding-left: 15px; 
} 

/* --- UPDATED FOR ICON ALIGNMENT --- */
.collapsible-content a { 
    display: flex; /* Add flex properties here as well */
    align-items: center;
    gap: 15px;
    padding: 10px 15px; 
    font-size: 0.9em;
}

/* Styles for the new theme switcher */
.theme-switcher-container {
    padding: 15px;
    font-size: 1.2em;
    color: var(--text-color);
}

#theme-switcher {
    width: calc(100% - 75px);
    padding: 5px;
    border-radius: 5px;
    border: 1px solid var(--separator-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 0.9em;
    margin-left: 10px;
    vertical-align: middle;
}