.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.logo {
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease;
}

#sidebar {
	background-color: $off-white;
	min-height: 100vh;
	transition: all 0.3s;
	width: 250px;
	position: fixed;
	z-index: 1000;
	padding: 20px;
}

#sidebar.collapsed {
	width: 70px;
	padding: 20px 10px;
}
/* Logo style when sidebar is collapsed */
#sidebar.collapsed .logo-container {
  width: 100%;
}

#sidebar.collapsed .logo-img {
  max-width: 40px; /* smaller size for collapsed state */
}
#content {
	transition: all 0.3s;
	margin-left: 250px;
	padding: 10px;
	width: calc(100% - 250px);
}

#content.expanded {
	margin-left: 70px;
	width: calc(100% - 70px);
}

.sidebar-header {
	padding-bottom: 20px;
	border-bottom: 1px solid $off-black;
	margin-bottom: 20px;
	overflow: hidden;
	white-space: nowrap;
        display: flex;
        justify-content: center; /* Center for the logo */
}

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

.sidebar-menu li {
	padding: 10px 0;
}

.sidebar-menu li a {
	text-decoration: none;
	color: $off-black;
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
}

.sidebar-menu li a:hover {
	color: $primary;
}

.sidebar-menu .menu-icon {
	font-size: 1.2rem;
	min-width: 30px;
	display: flex;
	justify-content: center;
}
.sidebar-menu .menu-icon svg {
	width: 1em;
	height: 1em;
}
.sidebar-menu .menu-text {
	transition: opacity 0.3s;
}

#sidebar.collapsed .menu-text {
	opacity: 0;
	visibility: hidden;
	width: 0;
}

#sidebar.collapsed .sidebar-header h4 {
	opacity: 0;
	visibility: hidden;
}

#sidebar.collapsed .sidebar-menu .menu-icon {
	min-width: 100%;
	font-size: 1.5rem;
}

#sidebarToggle {
	position: absolute;
	left: calc(250px - 15px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 1050;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #dee2e6;
	display: flex;
	align-items: center;
	transition: left 0.3s;
	padding: 0;
}
#sidebarToggle i {
	transition: transform 0.3s;
}

#sidebar.collapsed > #sidebarToggle {
    left: calc(70px - 15px);
}

#sidebar > #sidebarToggle i {
	position: relative;
	left: 5px;
}

#sidebar.collapsed > #sidebarToggle i {
	transform: rotate(180deg);
}