/* Basic Reset & Layout */
body { margin: 0; font-family: sans-serif; }
.page-container { display: flex; }
.main-content { flex-grow: 1; padding: 20px; transition: margin-left 0.4s; }

/* Sidebar Styling */
.sidebar {
    width: 500px; /* Expanded width */
    background-color: #f4f4f4;
    height: 100vh;
    padding: 10px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    transition: width 1s;
    /* overflow: hidden;*/ 
}

/* Collapsed State */
.sidebar.collapsed {
    width: 80px; /* Collapsed width */
}

/* Navigation Content Styling (links) */
.nav-content ul {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}
.nav-content a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
    white-space: nowrap; /* Prevents wrapping in collapsed state */
    opacity: 1;
    transition: opacity 1s;
    font-size: 40px;
}

.sidebar.collapsed .nav-content a {
    opacity: 0; /* Hide text when collapsed */
    pointer-events: none; /* Disable interaction with hidden text */
}

/* Toggle Button Styling */
.toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 80px;
    margin-left: 5px;
    /* Use vertical dots character for clarity in a left nav */
}