/* 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;
}

/* ---------------------------------------------------------------- phone menu
   full screen, opens over the top bar so its close cross isn't hidden behind it.
   one full width row per item, all the same height. colours come from the menu and link colour settings */
.mobilemenubg {
	z-index: 1010;
	overflow-y: auto;
}
.mobile-menu-top {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: var(--app-topbar-height);
	padding: 0 16px;
}
.mobile-menu-top .mobcross {
	font-size: 1.8em;
	cursor: pointer;
}
.mobile-menu-list {
	padding: 0 16px 24px 16px;
}
.mobile-menu-title {
	margin: 18px 4px 8px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: .8;
}
.mobile-menu-title:first-child {
	margin-top: 0;
}
.mobile-menu-item {
	display: flex;
	align-items: center;
	height: 52px;
	margin-bottom: 8px;
	padding: 0 16px;
	background-color: #fff;
	border-radius: .35rem;
	border-left: 4px solid transparent;
	font-size: 15px;
}
.mobile-menu-item i {
	width: 28px;
	margin-right: 10px;
	font-size: 1.5em;
}
.mobile-menu-item.active {
	font-weight: 600;
}

/* ---------------------------------------------------------------- data tables (data-table.php)
   small white boxes around the table: bulk actions and search above, paging and the add button below */
.page-title-action {
	margin-left: 24px;
	font-size: 15px;
}
/* each control sits in its own small white box, sized to its contents, never full width:
   bulk actions left and search right above the table, paging left and the add button right below it */
.data-table-top,
.data-table-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.data-table-top {
	margin-bottom: 12px;
}
.data-table-box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background-color: #fff;
	border-radius: .25rem;
	-webkit-box-shadow: 0 0 17px 0 rgba(130,122,122,0.1);
	box-shadow: 0 0 17px 0 rgba(130,122,122,0.1);
}
/* whatever is second in the row is pushed to the right */
.data-table-box-search,
.data-table-add {
	margin-left: auto;
}
.data-table-box-spacer {
	flex: 0 0 0;
}
.data-table-bulk,
.data-table-search,
.data-table-per-page,
.data-table-paging {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.data-table-bulk .custom-select,
.data-table-per-page .custom-select {
	width: auto;
}
/* the "Per page" label matches the 15px controls and table */
.data-table-per-page label {
	font-size: 15px;
}
/* taller controls in the boxes so they don't look thin next to the table */
.data-table-box .custom-select,
.data-table-box .form-control,
.data-table-box .btn,
.data-table-box .page-link {
	height: auto;
	padding-top: .6rem;
	padding-bottom: .6rem;
	font-size: 15px;
}
/* wide enough for placeholders like "Search name, email or role" at 15px */
.data-table-search .input-group {
	width: 360px;
	max-width: 100%;
}
.data-table-clear {
	white-space: nowrap;
}
.data-table-paging {
	gap: 18px;
}
/* "Showing 1-25 of 140" sits under the table, inside the table's own box */
.data-table-count {
	margin-top: 12px;
	color: #6c757d;
}
.data-table-card {
	margin-bottom: 12px;
}
.data-table {
	font-size: 15px;
}
.data-table th {
	white-space: nowrap;
	border-top: 0;
}
.data-table .data-table-row-actions {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}
.data-table td {
	vertical-align: middle;
}
.data-table .data-table-check {
	width: 36px;
}
.data-table-sort {
	color: inherit;
}
.data-table-sort i {
	vertical-align: middle;
	opacity: .5;
}
.data-table-sort.active i {
	opacity: 1;
}
.data-table-add {
	white-space: nowrap;
}

/* 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;
}