/* This element's z-index must be between the sidebarOverlay and the navbar */
#sidebarContainer {
	display: flex;
	transition: all 0.3s ease;
	z-index: 1049;
}

.sidebar {
	display: flex;
	align-items: stretch;
	flex: 0 1 auto;
	min-height: auto;
	width: var(--sidebar-width);
	background: var(--background-color);
}

/* Between the sidebar, menubar, and navbar, this element must have the lowest z-index.
 * By default, remove pointer events until the overlay is active, take the full area of
 * the screen BEHIND everything, and give it an animation so it fades out when it disappears.
*/
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.3);
    transition: all 0.5s ease;
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
}

/* When the sidebar is visible on mobile, show the gray overlay and active pointer events */
.sidebar-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

/* When on mobile, make sure the menu hovers over content and takes full height of screen */
#content.sidebar-mobile #sidebarContainer {
	position: absolute;
	height: 100vh;
	transition: all 0.4s !important;
}

/* Override sidebar width when on mobile */
#content.sidebar-mobile .sidebar {
	width: var(--mobile-sidebar-width);
}

/* Calculate how far to shift the sidebar to the left on larger screens */
#content.sidebar-hidden #sidebarContainer {
  	margin-left: calc(var(--sidebar-width) * -1)
}

/* Calculate how far to shift the sidebar to the left on small screens */
#content.sidebar-mobile.sidebar-hidden #sidebarContainer {
  	margin-left: calc(calc(var(--mobile-sidebar-width) + var(--menubar-width)) * -1)
}

/* Adjust size manually here to taste */
#sidebarToggleSmallScreens {
	transform: scale(0.9);
}

#sidebarToggleLargerScreens:hover,
#sidebarToggleLargerScreensMenu:hover,
#sidebarExitSmallScreens:hover {
  	color: #3f3f3f !important;
}

/* Setup position of sidebar button on larger screens */
#sidebarToggleLargerScreens {
	top: 3px;
	right: 3px;
	width: 50%;
	position: absolute;
	margin: 0px !important;
	transform: scale(1.1);
	transition: var(--transition-longer);
}

/* Hide the opening sidebar button by default */
#sidebarToggleLargerScreensMenu {
	opacity: 0;
	pointer-events: none;
}

/* Set position and shape of the space just above the menubar options.
 * This will render nicely for both pc and mobile screens.
 * For pc the space above the menubar holds the close toggle button.
 * For mobile the space above the menubar holds an X to close the menu.
 */
#sidebarToggleLargerScreensMenu,
#sidebarExitSmallScreens {
	padding: 10px;
	padding-bottom: 8px;
	transform: scale(1.1);
	transition: var(--transition);
}

/* These next two options manage when the open/close toggle buttons appear on pc */
#content.sidebar-hidden #sidebarToggleLargerScreens {
	opacity: 0;
}

#content.sidebar-hidden #sidebarToggleLargerScreensMenu {
	opacity: 1;
	pointer-events: auto;
}
/****************************************************/

.accounts-bar {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	width: var(--sidebar-width);
	gap: 15px;
	padding-top: 10px;
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom: 10px;
	border-right: var(--line-color) 1px solid;
	transition: var(--transition);
	overflow: hidden;
}

#content.sidebar-mobile .accounts-bar {
	width: var(--mobile-sidebar-width);
}

.menuHR {
	margin: 0;
	border: none;
	border-top: 1px solid var(--line-color-darker);
}

/* Main settings for menu bar */
.menubar {
	width: var(--menubar-width);
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	background: var(--background-color);
	padding-top: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom: 24px;
	border-right: var(--line-color) 1px solid;
	transition: var(--transition);
	overflow: hidden;
}

/* Main rules for account buttons */
.accounts-bar .menu ul li a {
	display: flex;
	gap: 10px;
	font-size: 14px;
	font-weight: 425;
	color: #646464;
	text-decoration: none;
	padding: 5px 6px 5px 9px;
	border-radius: 8px;
	transition: var(--transition);
	box-shadow: inset 0 0 0 1.1px var(--border-color);
}

/* Main rules for menu bar buttons */
.menu-item {
	display: flex;
	font-size: 16px;
	font-weight: 425;
	color: var(--menu-item-text-color);
	text-decoration: none;
	padding: 9px 8px;
	border-radius: 8px;
	transition: var(--transition);
}

/* Indentation, line, and animation for submenu items */
.menu .submenu {
	padding-left: 6px !important; /* padding and margin help place the border line to the left of the submenu */
	margin-left: 10px !important;
	border-left: 1px solid var(--line-color);
	max-height: 0;
	overflow: hidden;
	transition: var(--transition-longer);
	opacity: 0;
}
.menu li.open > .submenu {
  	opacity: 1;
}

/* This keeps the Customer/Hauler sections on top and next to each other,
 * keeps the menu options at the bottom on the bottom, allows scrolling
 * so the page doesn't expand if there are too many accounts, and makes
 * the scrollbar pretty. 
 */
.nav {
	display: block;
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin;
}

/* Animation for submenu arrow */
.menu .arrow {
  transition: transform 0.2s;
}
.menu li.open > .menu-item .arrow {
  transform: rotate(90deg);
}
/*******************************/

/* Text rules for titles like "CUSTOMER" and "HAULER" */
.menu .title {
	font-size: 12px;
	font-weight: 500;
	color: var(--menu-section-names-text-color);
	text-transform: uppercase;
	margin-bottom: 7px;
}

.accounts-bar .menu ul,
.menubar .menu ul {
	padding: 0px;
	margin-bottom: 0px;
}

/* Adds space between all the accounts buttons and the menu buttons */
.accounts-bar .menu ul li,
.menubar .menu ul li {
	list-style: none;
	padding-bottom: 5px;
}

/* This keeps the account name UNDER the account number */
.account {
	width: 100%;
}

/* Make sure the 'X' button for internal users is on the right of the button */
.account-number {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Make sure the text doesn't go too far to the right */
.account-description {
	font-size: 0.9em;
	color: var(--account-description-text-color);
	padding-right: 2px;
}

/* Increase text size of account description on mobile */
#content.sidebar-mobile .account-description {
	font-size: 1em;
}

/* Add color to account status whenever it is present */
.account-status {
	color: var(--account-status-color);
}

/* Hover color for approved accounts */
.accounts-bar .menu ul li:not(.notApproved):not(.active) > a:hover {
	background-color: var(--account-hover-bg-color);
}

/* Keeps the hatch pattern only on the not approved account and within the rounded edge */
.accounts-bar .menu ul li.notApproved > a {
	position: relative;
	overflow: hidden;
}

/* Create a hatch pattern on non approved accounts */
.accounts-bar .menu ul li.notApproved > a::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
	background-size: 10px 10px;
	opacity: 0;
	transition: var(--transition-longer);
	pointer-events: none;
}

/* Show the hatch pattern on accounts without approved status when hovered over */
.accounts-bar .menu ul li.notApproved > a:hover::before {
	opacity: 0.7;
}

/* Background color for active account or selected menu item */
.accounts-bar .menu ul li.active > a {
	background-color: var(--account-active-bg-color);
}

/* Hover color for menu items */
.menu-item:hover {
	background-color: var(--account-hover-bg-color);
	color: black;
}

.menu-item-selected,
.menu-item-selected:hover {
	background-color: var(--account-active-bg-color);
	color: black;
}

/* Manually show cursor when hovering over menu buttons since there's no href */
.menubar li a {
	cursor: pointer;
}

.empty-menu ul li div span {
	font-size: 14px;
	font-style: italic;
	color: var(--empty-menu-color);
	padding: 10px 6px;
	transition: var(--transition);
}

/* This changes the size of the Account options on the bottom left */
.menu ul li .icon {
	font-size: 20px;
}

/* Properties of account number text when not active/current (mobile) */
#content.sidebar-mobile .menu ul li .account-number-text {
	transition: var(--transition);
	font-size: 20px;
	color: var(--inactive-text-color);
}

/* Set position and shape of x button for internal users' X button */
.menu ul li .account-close-btn {
	transition: var(--transition);
    right: 18px;
    padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
	border-radius: 5px;
	font-size: medium;
    z-index: 2;
}

/* Hover effect for account close button */
.menu ul li .account-close-btn:hover {
    color: red;
    background: var(--account-active-bg-color);
}

/* Slightly widen the clickable area of the star so users don't accidentally click on the account button instead */
.account-favorite-btn {
	padding-left: 5px;
}

/* Setup favorite star shape, size, position, and color */
.account-favorite-btn .star-icon {
	position: relative;
	top: -3;
	transition: var(--transition);
	stroke: #d1d1d1;
	fill: transparent; /* This must be transparent, not 'none' or else the transition won't animate */
}

/* Move star a little to the left on mobile to avoid accidentally hitting the 'x'.
   Disable transitions and intermediate hover colors for mobile since tapping leaves the cursor over the star
   which leaves the star in a 'hover' state until you tap somewhere else. This gives the sense that the star
   isn't working.
*/
@media (max-width: 768px) {
	.account-favorite-btn .star-icon {
		transition: none;
	}
	.account-favorite-btn:hover .star-icon {
		stroke: #d1d1d1 !important;
		fill: transparent !important;
	}
	.account-favorite-btn:hover .star-icon.favorited {
		fill: #919191 !important;
		stroke: #919191 !important;
	}
	.account-favorite-btn {
		padding-left: 6px;
		padding-right: 2px;
		padding-bottom: 2px;
	}
}

/* Make favorite account stars darker */
.account-favorite-btn .star-icon.favorited {
	fill: #919191;
	stroke: #919191;
}
	
/* Hover effect for account favorite star icon */
.account-favorite-btn:hover .star-icon {
	fill: #bbbbbb;
	stroke: #bbbbbb;
}

/* Make favorite account stars that are already favorited even darker when hovered over */
.account-favorite-btn:hover .star-icon.favorited {
	fill: #7e7e7e;
	stroke: #7e7e7e;
}

/* Properties of account number text when not active/current */
.menu ul li .account-number-text {
	transition: var(--transition);
	font-size: 17.5px;
	color: var(--inactive-text-color);
}

/* Properties of account number and desc text when it is active/current */
.menu ul li.active > a .account-number-text,
.menu ul li.active > a .account-description {
	color: var(--active-text-color);
}

.accounts-bar .menu:last-child {
	width: 100%;
}

/* Adds space between the Customer and Hauler accounts sections */
.accounts-bar .menu:not(:last-child) {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--line-color);
}

.home-menu:not(:last-child) {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid var(--line-color);
}