/* application styles that override the theme, loaded after theme.min.css
   colours are not set here, they come from Admin > Global 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;
}
/* no height limit, so the logo shows at the size it was made; it still never gets wider than the space above the menu */
.topbar-brand img {
	display: block;
	max-width: 100%;
}
/* Logo position: Centre in Global settings, the logo in the middle of the space above the sidebar
   (only on larger screens, the phone layout below puts it beside the menu button either way) */
@media (min-width: 993px) {
	.topbar-brand-centre {
		justify-content: center;
		padding: 0 20px;
	}
}
/* 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;
}
/* the globe that opens the website in a new tab */
.topbar-website {
	display: flex;
	align-items: center;
	margin-right: 24px;
	color: #6c757d;
}
.topbar-website svg {
	display: block;
}
.topbar-website:hover {
	color: #383c40;
}
.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);
}
/* someone's first letter in a circle when they have no profile image (accountBadge()), its colours are on Global
   settings > Colours > Account badge */
.account-badge {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	user-select: none;
}
.account-badge-large {
	width: 64px;
	height: 64px;
	border-width: 3px;
	font-size: 26px;
}
.account-badge-xl {
	width: 120px;
	height: 120px;
	border-width: 4px;
	font-size: 52px;
}
.topbar-badge {
	width: 40px;
	height: 40px;
	font-size: 18px;
}
.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;
}
.page-title-action + .page-title-action,
.page-title-action + .page-action-form .page-title-action,
.page-action-form + .page-title-action,
.page-action-form + .page-action-form .page-title-action {
	margin-left: 8px;
}
/* a heading button that POSTs sits in a small form of its own (pageActionHTML()) */
.page-action-form {
	display: inline-flex;
	margin: 0;
}
/* 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,
/* the boxes along the bottom are all the same height, whatever is in them */
.data-table-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}
.data-table-top {
	margin-bottom: 12px;
}
/* never wider than the row, so a box with many filters wraps them inside it rather than running off the edge */
.data-table-box {
	flex: 0 0 auto;
	max-width: 100%;
	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-search .dt-filter {
	width: auto;
	max-width: 100%;
}
/* filters at the bottom right (filtersPosition "bottom"), the add button follows them */
.data-table-filters {
	margin-left: auto;
}
/* the add button, with any links beside it (addLinks), on the right of the bottom row, or on a line of its own
   under the filters when they're at the bottom */
.data-table-add-group {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}
.data-table-add-group .data-table-add {
	margin-left: 0;
}
.data-table-add-link {
	white-space: nowrap;
}
.data-table-add-row {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}
.data-table-filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.data-table-filter-form .dt-filter {
	width: auto;
	max-width: 100%;
}
.data-table-clear {
	white-space: nowrap;
}
.data-table-paging {
	gap: 18px;
}
/* on phones a box that holds more than fits (filters beside the search) takes the whole width and its controls wrap
   inside it, rather than running off the right of the screen */
@media (max-width: 575px) {
	.data-table-top .data-table-box,
	.data-table-filters {
		flex: 1 1 100%;
		min-width: 0;
	}
	.data-table-top .data-table-bulk,
	.data-table-box-search .data-table-search,
	.data-table-filter-form {
		width: 100%;
	}
	.data-table-bulk .custom-select {
		flex: 1 1 0;
		min-width: 0;
	}
	.data-table-search .dt-filter,
	.data-table-filter-form .dt-filter,
	.data-table-search .input-group {
		flex: 1 1 100%;
		width: 100%;
	}
}
/* "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;
	}
	/* the logo at most 40px high here, or a tall logo fills the bar (larger screens show it at its own size) */
	.topbar-brand img {
		max-height: 40px;
	}
	.topbar-brand::after {
		display: none;
	}
	.topbar-right {
		padding-right: 12px;
	}
	.topbar-logout {
		margin-left: 16px;
	}
	.topbar-website {
		margin-right: 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;
}

/* the box round the current logo, favicon and profile image previews */
.preview-box {
	border: 1px solid #e2e2e2;
}

/* the About and Contact pages (front-pages.php) in the logged out layout */
.front-page h1 {
	font-size: 22px;
	margin-bottom: 16px;
}
.front-page h2 {
	font-size: 17px;
	margin: 20px 0 8px;
}
.contact-details {
	list-style: none;
	padding: 0;
	margin: 16px 0 24px;
}
.contact-details li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
}
.contact-details i {
	font-size: 20px;
}
.contact-sent,
.contact-problem {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
}
.contact-sent {
	background: #e3f6e8;
	color: #1e7b34;
}
.contact-problem {
	background: #fdecec;
	color: #b3261e;
}

/* the icon in front of a field (textField(), FORMS.md) */
.form-group .input-group-text {
	min-width: 48px;
	justify-content: center;
}
.form-group .input-group-text i {
	font-size: 18px;
}

/* the page text editor (TinyMCE), editorField(): the same corners as the other fields */
.editor-field .tox-tinymce {
	border-radius: .25rem;
}

/* the box for many files (multiUploadField()): a dashed drop zone, big enough to tap on a phone. Without JavaScript the
   plain file input shows under it; with it (multi-upload-ready) the input is hidden but still takes the keyboard, and
   the zone shows its focus. Held over with files, the zone's border takes the link colour (border-primary, js/app.js) */
.multi-upload-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	min-height: 140px;
	margin: 0;
	padding: 20px 16px;
	text-align: center;
	cursor: pointer;
	border: 2px dashed #ced4da;
	border-radius: .25rem;
	background-color: #fafbfc;
	transition: border-color .15s, background-color .15s;
}
.multi-upload-zone > * {
	pointer-events: none;
}
.multi-upload-zone i {
	font-size: 40px;
	line-height: 1;
}
.multi-upload-text {
	font-weight: 500;
}
.multi-upload-zone:hover,
.multi-upload-box.is-dragover .multi-upload-zone {
	background-color: #f1f3f5;
}
.multi-upload-input {
	display: block;
	margin-top: 8px;
}
.multi-upload-ready .multi-upload-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	overflow: hidden;
}
.multi-upload-ready:focus-within .multi-upload-zone {
	outline: 2px solid #5b626b;
	outline-offset: 2px;
}
.multi-upload-box {
	position: relative;
}
.multi-upload-status {
	margin-top: 12px;
}
.multi-upload-status .progress {
	height: 8px;
}
.multi-upload-count {
	margin: 8px 0 4px;
}
.multi-upload-problems {
	margin: 0;
	padding-left: 18px;
	color: #b3261e;
}
.multi-upload-problems:empty {
	display: none;
}

/* the contact page (front-pages.php renderContactPage()): the app's figures as a square of four beside the form,
   the form first on phones */
.contact-layout.has-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}
.contact-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.contact-stats .front-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 14px;
	border-radius: 10px;
	color: #fff;
}
.contact-stats .front-stat-figure {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}
.contact-stats .front-stat-text {
	margin: 4px 0;
	font-size: 13px;
	font-weight: 600;
}
.contact-stats .front-stat-note {
	font-size: 11px;
	opacity: .75;
}
@media (max-width: 767px) {
	.contact-layout.has-stats {
		grid-template-columns: 1fr;
	}
	.contact-layout.has-stats .contact-main {
		order: -1;
	}
}
.auth-footer a {
	color: inherit;
}
.auth-footer p:last-child {
	margin-bottom: 0;
}

/* Admin > Email (mail-*.php): an email's preview in a frame, as it will arrive. The live one beside the editor fills
   the screen's height and stays in view with the test box while the text on the left scrolls */
.mail-preview {
	display: block;
	width: 100%;
	border: 1px solid #e2e7ec;
	border-radius: 10px;
	background: #f4f7f9;
}
.mail-preview-live {
	height: calc(100vh - 460px);
	min-height: 420px;
}
.mail-sticky {
	position: sticky;
	top: 90px;
}

/* the bar across the top of every page while a Super Admin is signed in as someone else (impersonationBar()) */
/* its colours are in appColourCSS(), so dark mode doesn't turn its text light on the amber */
.impersonation-bar {
	font-weight: 600;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
}
.impersonation-bar .bx {
	vertical-align: -2px;
}
.impersonation-bar strong {
	color: inherit;
}

/* Admin > Email > New sending, one person: the contacts matching what's typed, in a list under the search box */
.mail-person-search {
	position: relative;
}
.mail-person-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	max-height: 320px;
	overflow-y: auto;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.11);
}

/* Admin > Statistics (stats.php): the period buttons and dates side by side, under each other on phones */
.stats-periods {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
}
.stats-period-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.stats-period-dates {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
}
.stats-period-dates .form-group {
	width: 190px;
}
.stats-period-dates label {
	font-size: 13px;
	margin-bottom: 2px;
}
.stats-showing {
	margin: -8px 0 16px;
}
/* the figures in rows of four, two on tablets, one on phones, each with its days drawn faintly behind it */
.stats-figures {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}
.stats-figure {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 132px;
	padding: 16px 18px;
	background: #ffffff;
	border-radius: 10px;
	border: 1px solid #e9ecef;
	color: #343a40;
	overflow: hidden;
}
.stats-figure > span {
	position: relative;
	z-index: 1;
}
.stats-spark {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 45% !important;
	opacity: .55;
}
.stats-figure-icon {
	position: absolute !important;
	top: 14px;
	right: 16px;
	font-size: 26px;
}
.stats-figure-label {
	font-size: 13px;
	color: #74788d;
	padding-right: 32px;
}
.stats-figure-number {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
}
.stats-figure-change {
	font-size: 12px;
}
.stats-change {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
}
.stats-change i {
	font-size: 15px;
}
.stats-change-good {
	color: #16a34a;
}
.stats-change-bad {
	color: #dc2626;
}
.stats-change-same {
	color: #74788d;
}
/* the framework's figures' icons, in the same colours as their small charts (statsFigureList()) */
.stats-colour-visitors { color: #6d61ea; }
.stats-colour-views { color: #3b82f6; }
.stats-colour-pages_per_visit { color: #0ea5e9; }
.stats-colour-bounce_rate { color: #94a3b8; }
.stats-colour-average_visit { color: #14b8a6; }
.stats-colour-signup_clicks { color: #eab308; }
.stats-colour-signups { color: #22c55e; }
.stats-colour-conversion { color: #f97316; }
.stats-colour-orders { color: #ec4899; }
.stats-colour-revenue { color: #22c55e; }
.stats-colour-messages { color: #8b5cf6; }
.stats-colour-documents { color: #0891b2; }
.stats-colour-bots { color: #64748b; }
.stats-chart {
	position: relative;
	height: 320px;
}
.stats-chart-small {
	height: 260px;
}
/* the lists: a long address breaks rather than widening the page, with a thin bar under it for its share (bg-primary,
   so it follows the link colour) */
.stats-list .stats-label {
	word-break: break-word;
	min-width: 160px;
}
.stats-bar {
	display: block;
	height: 3px;
	margin-top: 4px;
	border-radius: 2px;
	background-color: #eef0f3;
}
.stats-bar > span {
	display: block;
	height: 100%;
	border-radius: 2px;
	opacity: .5;
}
.stats-flag {
	margin-right: 6px;
}
@media (max-width: 1199px) {
	.stats-figures {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* two to a row on phones, smaller, so the page isn't one long column */
@media (max-width: 575px) {
	.stats-figures {
		gap: 10px;
	}
	.stats-figure {
		min-height: 112px;
		padding: 12px;
	}
	.stats-figure-number {
		font-size: 22px;
	}
	.stats-figure-icon {
		top: 10px;
		right: 10px;
		font-size: 20px;
	}
	.stats-figure-label {
		padding-right: 22px;
	}
	/* the dates each take the width, they don't fit side by side */
	.stats-period-dates .form-group {
		width: 100%;
	}
}

/* Admin > Documents: the link boxes in the list, and the link card just after an upload */
.doc-link {
	min-width: 260px;
}
.doc-link .form-control[readonly] {
	background-color: transparent;
}
.doc-link-new {
	border-width: 2px !important;
}