/*
 * Account system shell: layout for adinc/themes/pixelation/accountstyle.html.
 * Loaded last on account pages (see stylesheet() in adinc/style.php); it
 * replaces pixelation.css there. Content styles stay in admin.css.
 */

:root {
	--ad-blue: #3063AF;
	--ad-header: #a4b3cf;
	--ad-ink: #1a2740;
	--ad-rule: #d7dfea;
}

body.ad-account {
	background-color: #f3f5f9;
	color: #212529;
}

/* ---- navigation bar ---- */
.ad-navbar {
	background-color: var(--ad-header);
	border-bottom: 3px solid #222;
	padding: .25rem 1rem;
}
.ad-navbar .navbar-brand {
	padding: 0;
	margin-right: 1.5rem;
}
.ad-navbar .navbar-brand img {
	display: block;
	height: 40px;
	width: auto;
}
.ad-navbar .nav-link,
.ad-navbar .navbar-text {
	color: var(--ad-ink);
}
.ad-navbar .nav-link {
	font-weight: 500;
	border-radius: .25rem;
}
.ad-navbar .nav-link:hover,
.ad-navbar .nav-link:focus,
.ad-navbar .nav-item.active > .nav-link {
	color: #000;
	background-color: rgba(255, 255, 255, .4);
}
.ad-navbar .dropdown-menu {
	margin-top: 0;
	border-radius: .25rem;
}
.ad-navbar .dropdown-item.active,
.ad-navbar .dropdown-item:active {
	color: #fff;
	background-color: var(--ad-blue);
}
.ad-navbar .ad-search {
	flex-wrap: nowrap;
	margin: .25rem 0;
}
.ad-navbar .ad-search input[type="search"] {
	width: 13rem;
	min-width: 0;
}

/* Dropdowns open on hover/keyboard focus: the Bootstrap JS loaded here is
 * the non-bundled build, which has no Popper.js for .dropdown-toggle. */
@media (min-width: 992px) {
	.ad-navbar .dropdown:hover > .dropdown-menu,
	.ad-navbar .dropdown:focus-within > .dropdown-menu {
		display: block;
	}
}
@media (max-width: 991.98px) {
	.ad-navbar .dropdown-menu {
		display: block;
		position: static;
		float: none;
		background: transparent;
		border: 0;
		padding: 0 0 0 1rem;
	}
	.ad-navbar .dropdown-item {
		color: var(--ad-ink);
	}
}

/* ---- page ---- */
.ad-main {
	max-width: 1400px;
	margin: 1rem auto;
	padding: 0 1rem;
}
.ad-main .content {
	padding: 0;
}
/* pages wrap themselves in col-md-10 / col-md-12 blocks; line them up */
.ad-main .content > .col-md-10,
.ad-main .content > .col-md-12 {
	flex: 0 0 100%;
	max-width: 100%;
}
.ad-pagetitle {
	font-size: 1.75rem;
	font-weight: 400;
	color: var(--ad-blue);
	margin: .5rem 0 1rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid var(--ad-rule);
}
#contentcontainer h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--ad-blue);
	margin: .5rem 0 1rem;
}
#contentcontainer h3 {
	color: var(--ad-blue);
	font-weight: 400;
}

.ad-footer {
	max-width: 1400px;
	margin: 0 auto;
	padding: 1rem;
	border-top: 1px solid var(--ad-rule);
	color: #6c757d;
	font-size: .8rem;
}
.ad-footer-time {
	float: right;
}

/* action buttons written side by side with no whitespace between them */
.ad-main td .btn + .btn {
	margin-left: .25rem;
}

/* ---- components (see lib/View/Components.php) ---- */
.ad-card {
	margin-bottom: 1rem;
}
.ad-card > .card-header {
	font-weight: 500;
}

/* customer profile card (templates/dashboard/*customerdash.html) */
.ad-profilecard {
	margin-bottom: 1rem;
	border-color: var(--ad-header);
}
.ad-profilecard .ad-adminbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: .25rem 1rem;
	font-size: .8rem;
	color: #fff;
	background-color: #5b6b86;
}
.ad-profilecard .ad-adminbar a {
	color: #fff;
	text-decoration: underline;
}
.ad-profilecard .card-body {
	padding: .75rem 1rem;
	background-color: #eef1f7;
}
.ad-profilecard .card-title {
	margin-bottom: .25rem;
}
.ad-profilecard .card-text {
	margin-bottom: 0;
}
.ad-profilecard .ad-subtle {
	margin-left: .5rem;
}

/* tab strip under the customer card (see lib/View/CustomerTabs.php) */
.ad-tabs {
	margin-bottom: 1rem;
}
.ad-tabs .nav-link {
	font-size: .9rem;
	color: var(--ad-ink);
}
.ad-tabs .nav-link.active {
	color: var(--ad-blue);
	font-weight: 500;
}

/* label: value pairs (invoice details) */
dl.ad-dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .25rem 1rem;
	margin: 0;
}
dl.ad-dl dt {
	font-weight: 600;
}
dl.ad-dl dd {
	margin: 0;
}

/* form rows: inputs fill their column */
.ad-main .form-group select {
	display: block;
	width: 100%;
	max-width: 30rem;
	padding: .375rem .75rem;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: .25rem;
}
.ad-main .form-group .form-inline .form-control {
	max-width: 12rem;
}

/* the highlighted blank "add" row of the domain editor */
tr.ad-newrow td {
	border-top: 1px solid #000;
	background-color: #dde;
}

/* collapsible card headers get a chevron (service and server lists) */
.card-header .mb-0 > a[data-toggle="collapse"] {
	display: block;
	position: relative;
}
.card-header .mb-0 > a[data-toggle="collapse"]:after {
	content: "\f078"; /* fa-chevron-down */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	right: 0;
}
.card-header .mb-0 > a[data-toggle="collapse"][aria-expanded="true"]:after {
	content: "\f077"; /* fa-chevron-up */
}

/* ---- admin dashboard: activity list and counters ---- */
table.tasks tr td:first-child { border-left: 4px solid black; }
table.tasks tr { margin-bottom: 1px; }
table.tasks tbody > tr.danger:nth-child(2n+1) > td { background-color: #ecb3b3; }
table.tasks tbody > tr.danger:nth-child(2n) > td { background-color: #e0a7a7; }
table.tasks tbody > tr.warning:nth-child(2n+1) > td { background-color: #ffd5b0; }
table.tasks tbody > tr.warning:nth-child(2n) > td { background-color: #f3c9a4; }
table.tasks tbody > tr.success:nth-child(2n+1) > td { background-color: #c4f5be; }
table.tasks tbody > tr.success:nth-child(2n) > td { background-color: #b9e9b2; }
table.tasks tbody > tr.info:nth-child(2n+1) > td { background-color: #b0c4ff; }
table.tasks tbody > tr.info:nth-child(2n) > td { background-color: #a4b8f3; }

/* filter chips with counts (activity list, see adChips()) */
.ad-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem;
}
.ad-chip {
	display: inline-flex;
	align-items: center;
	padding: .25rem .5rem .25rem .75rem;
	color: var(--ad-ink);
	background-color: #fff;
	border: 1px solid var(--ad-rule);
	border-radius: 1rem;
	font-size: .9rem;
}
.ad-chip:hover,
.ad-chip:focus {
	color: var(--ad-ink);
	text-decoration: none;
	background-color: #e4e9f2;
}
.ad-chip.active {
	color: #fff;
	background-color: var(--ad-ink);
	border-color: var(--ad-ink);
}
.ad-chip .badge {
	margin-left: .5rem;
	color: #fff;
	background-color: #6c757d;
}
.ad-chip-danger .badge { background-color: #dc3545; }
.ad-chip-warning .badge { color: #212529; background-color: #ffc107; }
.ad-chip-info .badge { background-color: #17a2b8; }

/* ---- invoice payment lookup (pay.php) ---- */
.loginform {
	width: 400px;
	max-width: 100%;
	margin: 0 auto 30px;
	padding: 10px;
	position: relative;
	background-color: #fff;
	border: 1px solid var(--ad-rule);
	border-radius: 5px;
}
.loginform h2 {
	text-decoration: none;
	border-bottom: 0;
	margin-bottom: 10px;
}

/* login page */
.ad-login {
	min-height: 55vh;
}

/* ---- helpers used by shared markup ---- */

/* .control-label is the Bootstrap 3 name written by the shared form helpers
 * in adinc/displayutil.php; give it Bootstrap 4's .col-form-label metrics. */
.control-label {
	margin-bottom: 0;
	padding-top: calc(.375rem + 1px);
	padding-bottom: calc(.375rem + 1px);
}

/* a text input and its button on one line (the add-comment form) */
.inline-form form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.inline-form input[type="text"] {
	flex: 1 1 12rem;
	margin-right: .5rem;
	padding: .375rem .75rem;
	border: 1px solid #ced4da;
	border-radius: .25rem;
}

@media print {
	.ad-navbar,
	.ad-footer {
		display: none !important;
	}
	body.ad-account {
		background-color: #fff;
	}
	.ad-main {
		max-width: none;
		margin: 0;
	}
}

/* CMS editor: keep the save panel in view while scrolling long content */
@media (min-width: 992px) {
	.ad-sticky {
		position: sticky;
		top: 1rem;
	}
}
.ad-main .richText {
	width: 100%;
}