/* General layout */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* Sidebar */
#sidebar {
    width: 180px;
    height: 100%;
    transition: width 0.3s;
    position: relative;
    white-space: nowrap;
    background: white;
    border-right: 1px solid #dee2e6;
}
#sidebar.collapsed {
    width: 60px;
}

/* Menu buttons */
#sidebar button {
    color: #212529;
    background: white;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem; /* Decreased row height */
    margin: 2px 0;
    border-radius: 0.375rem; /* Slight rounding */
}
#sidebar button:hover {
    background: #f1f1f1;
    border-radius: 0.375rem; /* Rounded corners on hover */
}

/* Icon and titles */
#sidebar button i {
    font-size: 1.2rem;
    margin-right: 0.75rem;
}
#sidebar button span {
    opacity: 0;
    transition: opacity 0.2s ease 0.3s;
}
#sidebar:not(.collapsed) button span {
    opacity: 1;
}
#sidebar.collapsed button span {
    opacity: 0;
    transition: none;
}

/* Header */
header {
    background: white;
    border-bottom: 1px solid #dee2e6;
}

/* Toggle button */
#toggleSidebar {
    color: #212529;
}

/* User dropdown */
#userDropdownButton {
    color: #212529;
    background: white;
    border: 1px solid #dee2e6;
}
#userDropdownButton:hover {
    background: #f1f1f1;
}

/* Toggle button */
#toggleSidebar {
    color: #212529;
    background: white;
    border: none;
    padding: 0.5rem 0.75rem;
    margin: 2px 0;
    border-radius: 0.375rem;
}
#toggleSidebar:hover {
    background: #f1f1f1;
    border-radius: 0.375rem;
}

/* Remove click effect */
#toggleSidebar:focus,
#toggleSidebar:active {
    box-shadow: none;
}

/* Menu buttons */
#sidebar button {
    font-size: 0.9rem; /* Smaller font size */
}
#sidebar button i {
    font-size: 1rem; /* Adjust icon size */
    margin-right: 0.5rem;
}