/* application styles that override the theme, loaded after theme.min.css
   colours are not set here, they come from Admin > Application settings (app-settings.php) */

/* ---------------------------------------------------------------- page layout
   two blocks: a full width top bar over everything, and the sidebar underneath it on the left.
   the top bar's left block is the same width as the sidebar so its divider lines up with the sidebar's edge */
:root {
	--app-sidebar-width: 240px;
	--app-topbar-height: 70px;
	--app-line-colour: #dce0e4;
}

#page-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1006;
	height: var(--app-topbar-height);
	background-color: #fff;
	border-bottom: 1px solid var(--app-line-colour);
}
#page-topbar .navbar-header {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* left: logo | breadcrumb */
.topbar-left {
	display: flex;
	align-items: center;
	height: 100%;
	min-width: 0;
}
.topbar-brand {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 var(--app-sidebar-width);
	width: var(--app-sidebar-width);
	height: 100%;
	padding: 0 20px 0 24px;
}
.topbar-brand img {
	display: block;
	max-height: 40px;
	max-width: 100%;
}
/* the small pipe, half the bar's height, on the sidebar's right edge */
.topbar-brand::after {
	content: "";
	position: absolute;
	right: 0;
	top: 25%;
	height: 50%;
	width: 1px;
	background-color: var(--app-line-colour);
}
/* the same distance from the divider as the page title is from the sidebar:
   .page-content's left padding (calc(24px / 2)) plus the title's own 12px */
.topbar-breadcrumb {
	min-width: 0;
	padding-left: calc(24px / 2 + 12px);
}
.topbar-breadcrumb .breadcrumb {
	margin: 0;
	padding: 0;
	font-size: calc(.825rem + 1px);
	background-color: transparent;
	flex-wrap: nowrap;
	white-space: nowrap;
}

/* right: profile image, first name, logout */
.topbar-right {
	display: flex;
	align-items: center;
	height: 100%;
	padding-right: 24px;
}
.topbar-profile {
	display: flex;
	align-items: center;
	color: #383c40;
}
.topbar-profile:hover {
	color: #383c40;
}
.topbar-avatar {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border: 1px solid var(--app-line-colour);
}
.topbar-avatar-icon {
	display: block;
	font-size: 42px;
	line-height: 40px;
	color: #6c757d;
}
.topbar-name {
	margin-left: 10px;
	font-size: 16px;
	font-weight: 400;
}
.topbar-logout {
	display: flex;
	align-items: center;
	margin-left: 24px;
	color: #6c757d;
	font-size: 15px;
}
.topbar-logout i {
	margin-right: 6px;
	font-size: 1.6em;
}

/* sidebar sits under the top bar, with a light line instead of the theme's shadow */
.vertical-menu {
	top: var(--app-topbar-height);
	border-right: 1px solid var(--app-line-colour);
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* footer: white like the top bar, with the same line above it */
.footer {
	background-color: #fff;
	border-top: 1px solid var(--app-line-colour);
	color: #6c757d;
	text-align: center;
}

/* phones and tablets: the sidebar is hidden, so the logo block shrinks and the breadcrumb and name hide */
@media (max-width: 992px) {
	.topbar-brand {
		flex: 0 1 auto;
		width: auto;
		padding-left: 4px;
	}
	.topbar-brand::after {
		display: none;
	}
	.topbar-right {
		padding-right: 12px;
	}
	.topbar-logout {
		margin-left: 16px;
	}
}

/* ---------------------------------------------------------------- sidebar menu
   no hover movement or animation, a little more room for the hover and active backgrounds */
#sidebar-menu ul li a {
	padding: .8rem 1.5rem;
	-webkit-transition: none;
	transition: none;
}
#sidebar-menu ul li a:hover {
	padding-left: 1.5rem;
}
#sidebar-menu ul li ul.sub-menu li a {
	-webkit-transition: none;
	transition: none;
}
#sidebar-menu ul li ul.sub-menu li a:hover {
	padding-left: 3.25rem;
}
/* icons pick up the full hover and active colour instead of the theme's faded 0.8 */
#sidebar-menu ul li a:hover i,
#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li a.active i {
	opacity: 1;
}