/*
 * Massy brand theme, loaded after idl-style.css and bootstrap-reset.css so it overrides the
 * FlatLab colours. The palette comes from the four quadrants of the Massy logo (img/favicon.svg):
 * Navy, Sky, Sun and Ember, plus Green for success and Crimson for error text. Danger buttons and
 * other fills use Ember, warnings use Sun.
 *
 * Contrast rules: Sky #25ABE2 is never behind white text (2.6:1), so fills use Sky 6 #1A7CAD.
 * Ember and Sun fills take navy text. Coloured text on white uses shade 6 or 7. Sun is never
 * text on white.
 */

@font-face {
	font-family: 'Public Sans Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(../../fonts/public-sans/public-sans-latin-wght-normal.woff2) format('woff2-variations');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Public Sans Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(../../fonts/public-sans/public-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
	--navy: #00355f;
	--navy-0: #edf2f7;
	--navy-1: #d3dde8;
	--navy-2: #aebfd2;
	--navy-5: #466686;
	--navy-6: #2a4d70;
	--navy-9: #002444;
	--sky-0: #e6f6fd;
	--sky-5: #25abe2;
	--sky-6: #1a7cad;
	--sky-7: #15668f;
	--sky-8: #0f5073;
	--sun-0: #fffde6;
	--sun-2: #fef18a;
	--sun-5: #fcdf06;
	--sun-6: #e0c500;
	--ember-0: #fef1e6;
	--ember-1: #fddcc2;
	--ember-4: #f5883a;
	--ember-5: #f37920;
	--ember-6: #db6614;
	--ember-7: #b4520c;
	--ember-8: #8c3f09;
	--green-0: #e8f7ed;
	--green-5: #1fa650;
	--green-7: #127036;
	--green-8: #0d582a;
	--crimson-0: #fdecef;
	--crimson-1: #f8d3d9;
	--crimson-6: #c2253f;
	--crimson-8: #83162a;

	--text: #1b2a3a;
	--text-dimmed: var(--navy-5);
	--paper: #f2f6fa;
	--border: var(--navy-1);
	--brand-stripe: linear-gradient(90deg, #25abe2 0 33.3%, #fcdf06 33.3% 66.6%, #f37920 66.6% 100%);
	--font: 'Public Sans Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Base ---- */

body {
	font-family: var(--font);
	font-size: 14px;
	color: var(--text);
	background: var(--paper);
}
/* Headings keep the colour of their surface, so they stay readable on coloured cards */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font);
}
a {
	color: var(--sky-7);
}
a:hover, a:focus {
	color: var(--navy);
}
a:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--sky-6);
	outline-offset: 2px;
}
.text-muted, small, .small {
	color: var(--text-dimmed);
}
.text-primary, .text-info { color: var(--sky-7); }
.text-success { color: var(--green-7); }
.text-warning, .text-required { color: var(--ember-7); }

/* Error text is red (Crimson), the one colour not taken from the logo besides Green */
.text-danger,
.has-error .help-block, .has-error .control-label, .has-error .checkbox, .has-error .radio,
.mv-message, .profile-error {
	color: var(--crimson-6) !important;
}
.has-error .form-control, .profile-field.has-error .form-control {
	border-color: var(--crimson-6);
}
.has-error .form-control:focus {
	border-color: var(--crimson-6);
	box-shadow: 0 0 0 3px rgba(194, 37, 63, 0.2);
}
/* Inline "edit" links (My Profile) are actions, not errors */
[data-iedit]::after, body [data-iedit]:after {
	color: var(--sky-7);
}
a[data-link="email"] {
	color: var(--sky-7) !important;
}
.mono {
	font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
	font-size: 0.92em;
}

/* ---- Header ---- */

.header.white-bg {
	border-bottom: 1px solid var(--border);
}
.sidebar-toggle-box .fa-bars {
	color: var(--navy);
}
/* The menu toggle is a button: no button chrome, and a 40px tap area around the 20px icon */
button#sidebar-toggle {
	width: 40px;
	height: 40px;
	margin: -10px 0 -10px -10px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	line-height: 40px;
	touch-action: manipulation;
}
button#sidebar-toggle:hover {
	background: var(--navy-0);
}
a.logo, a.logo small {
	color: var(--navy-5);
}
a.logo span {
	color: var(--navy-5);
}
/* The country's flag beside its name, as on the sign-in page; it stays when phones hide the name */
a.logo .logo-flag {
	margin: -3px 6px 0 2px;
	vertical-align: middle;
	border-radius: 2px;
	box-shadow: 0 0 0 1px var(--navy-1);
}
/* Large bold text, so Ember 6 is enough (3.6:1) */
.instance-label, a.logo span.instance-label {
	color: var(--ember-6);
	font-weight: bold;
}
.top-nav .username {
	color: var(--text);
}
/* The card number in the header, beside a small Massy Card */
.top-nav .header-card {
	margin-right: 12px;
}
.header-card-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 60px;
}
.header-card-img {
	flex: none;
	width: 48px;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 0 0 1px var(--navy-1), 0 2px 5px rgba(0, 53, 95, 0.15);
}
.header-card-inner small {
	display: block;
	color: var(--text-dimmed);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
}
.header-card-number {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sky-7);
	font-weight: 600;
	cursor: pointer;
}
.header-card-number:focus {
	outline: none;
}
.header-card-number:focus-visible {
	outline: 2px solid var(--sky-6);
}
.top-nav .user-avatar {
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px var(--navy-1);
}
.top-nav ul.top-menu > li > a {
	border-color: var(--border);
	color: var(--text);
}

/* Location switcher (staff with more than one location): the active store, then the list. As tall as
   the user menu beside it (a 35px badge where that has the avatar), a little more prominent than it */
.top-nav .loc-switch > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 49px;
	max-width: 280px;
	margin-right: 10px;
}
.top-nav .loc-switch .loc-switch-badge {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: var(--sky-0);
	box-shadow: 0 0 0 1px var(--navy-1);
	color: var(--sky-6);
	font-size: 17px;
}
.top-nav .loc-switch .loc-switch-name,
.top-nav .loc-switch .loc-switch-code {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}
.top-nav .loc-switch .loc-switch-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.top-nav .loc-switch .loc-switch-code {
	display: none;
}
.top-nav ul.top-menu > li .dropdown-menu.extended.logout.loc-menu {
	width: 300px !important;
	max-width: calc(100vw - 32px);
	max-height: 70vh;
	overflow-x: hidden;
	overflow-y: auto;
}
/* Names are "merchant - location" (up to ~90 characters): they wrap inside the menu instead of
   widening it, which showed a sideways scrollbar (Bootstrap keeps dropdown links on one line) */
.top-nav .loc-menu > li > a {
	white-space: normal;
}
.top-nav .loc-menu > li > a > span {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.top-nav .loc-menu > li > a > i,
.top-nav .loc-menu > li > a small {
	flex: none;
}
.top-nav .loc-menu > li > a small {
	margin-left: auto;
	color: var(--text-dimmed);
}
.top-nav .loc-menu > li > a.is-active {
	font-weight: 600;
	cursor: default;
}

/* User menu: a plain list (FlatLab laid it out as tiles with a green log-out bar) */
.top-nav ul.top-menu > li .dropdown-menu.extended.logout {
	width: 240px !important;
	top: calc(100% + 6px);
	padding: 6px 0;
	border: 1px solid var(--border);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(13, 37, 63, .14);
}
.top-nav .dropdown-menu.extended.logout > li,
.top-nav .dropdown-menu.extended.logout > li:last-child {
	float: none;
	width: auto;
	text-align: left;
	background: none;
	border-radius: 0;
}
.top-nav .dropdown-menu.extended.logout > li.user-menu-head {
	padding: 6px 16px 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--border);
	font-size: 12px;
	color: var(--text-dimmed);
}
.top-nav .dropdown-menu.extended.logout > li.user-menu-head strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}
.top-nav .dropdown-menu.extended.logout > li > a,
.top-nav .dropdown-menu.extended.logout > li:last-child > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	color: var(--text);
	font-size: 13px;
	text-transform: none;
	background: none;
}
.top-nav .dropdown-menu.extended.logout > li > a > i,
.top-nav .dropdown-menu.extended.logout > li > a i {
	display: inline-block;
	width: 16px;
	font-size: 14px;
	text-align: center;
	color: var(--text-dimmed);
}
.top-nav .dropdown-menu.extended.logout > li > a:hover,
.top-nav .dropdown-menu.extended.logout > li > a:focus,
.top-nav .dropdown-menu.extended.logout > li:last-child > a:hover,
.top-nav .dropdown-menu.extended.logout > li:last-child > a:focus {
	background: var(--navy-0) !important;
	color: var(--navy) !important;
}
.top-nav .dropdown-menu.extended.logout > li > a:hover i,
.top-nav .dropdown-menu.extended.logout > li > a:focus i {
	color: var(--sky-7);
}
.top-nav .dropdown-menu.extended.logout > li:last-child > a:hover,
.top-nav .dropdown-menu.extended.logout > li:last-child > a:focus,
.top-nav .dropdown-menu.extended.logout > li:last-child > a:hover i,
.top-nav .dropdown-menu.extended.logout > li:last-child > a:focus i {
	color: var(--crimson-6) !important;
}

/* ---- Sidebar: navy, with the brand stripe on its top edge ---- */

#sidebar {
	background: var(--navy);
}
/* The fixed 60px header covers the top of the sidebar, so the stripe sits just below it */
#sidebar::before {
	content: "";
	display: block;
	height: 3px;
	margin-top: 60px;
	background: var(--brand-stripe);
}
/*
 * Rows are flex boxes with their own padding (no fixed heights or line-heights), so the text sits
 * in the middle of every highlight. Section rows and page rows share one left edge for the icon;
 * pages in an open section are indented on a darker navy panel.
 */
#sidebar ul.sidebar-menu {
	margin: 0;
	padding: 14px 10px;
}
#sidebar ul.sidebar-menu li {
	margin: 0 0 2px;
	padding: 0;
	line-height: normal;
}
#sidebar ul.sidebar-menu li a,
#sidebar ul.sidebar-menu li ul.sub li a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: auto;
	min-height: 40px;
	margin: 0;
	padding: 9px 12px;
	border-radius: 6px;
	color: var(--navy-1);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}
#sidebar ul.sidebar-menu li a i {
	flex: none;
	width: 16px;
	padding: 0;
	font-size: 14px;
	text-align: center;
	color: var(--navy-2);
}

/* An open section's pages: a darker navy panel, indented under the section */
#sidebar ul.sidebar-menu li ul.sub {
	margin: 2px 0 8px;
	padding: 4px;
	background: var(--navy-9);
	border-radius: 6px;
}
#sidebar ul.sidebar-menu li ul.sub li,
#sidebar .sub-menu > .sub li,
#sidebar .sub-menu > .sub li:last-child {
	margin: 0 0 2px;
	padding: 0;
	background: transparent;
}
#sidebar ul.sidebar-menu li ul.sub li:last-child {
	margin-bottom: 0;
}
#sidebar ul.sidebar-menu li ul.sub li a {
	min-height: 36px;
	padding: 8px 10px 8px 14px;
}

/* The open/closed marker: a chevron at the right edge instead of the old +/- sprite */
#sidebar ul.sidebar-menu .dcjq-icon {
	position: static;
	margin-left: auto;
	width: auto;
	height: auto;
	background: none;
	color: var(--navy-2);
}
#sidebar ul.sidebar-menu .dcjq-icon::before {
	content: "\f105";
	font-family: FontAwesome;
	font-size: 14px;
}
#sidebar ul.sidebar-menu .active .dcjq-icon::before,
#sidebar ul.sidebar-menu a.active .dcjq-icon::before {
	content: "\f107";
}

#sidebar ul.sidebar-menu li a:hover, #sidebar ul.sidebar-menu li a:focus,
#sidebar ul.sidebar-menu li ul.sub li a:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}
#sidebar ul.sidebar-menu li a:hover i, #sidebar ul.sidebar-menu li a:focus i,
#sidebar ul.sidebar-menu li a.active i,
#sidebar ul.sidebar-menu li a:hover .dcjq-icon {
	color: #fff;
}
/* An open section */
#sidebar ul.sidebar-menu li a.active {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}
/* The current page: Sky 6 fill with a Sun bar on the left; the padding doesn't change, so
   the text doesn't move */
#sidebar ul.sidebar-menu li a.current,
#sidebar ul.sidebar-menu li ul.sub li a.current,
#sidebar ul.sidebar-menu li ul.sub li.active a.current {
	background: var(--sky-6) !important;
	box-shadow: inset 3px 0 0 var(--sun-5);
	color: #fff;
}
#sidebar ul.sidebar-menu li ul.sub li.active a {
	color: #fff;
}
#sidebar ul.sidebar-menu li a.current i,
#sidebar ul.sidebar-menu li a.current .dcjq-icon {
	color: #fff;
}

/* ---- Content ---- */

.breadcrumb {
	background: #fff;
	border: 1px solid var(--border);
	color: var(--text-dimmed);
}
.breadcrumb > .active {
	color: var(--text);
}
.panel {
	border: 1px solid var(--border);
	box-shadow: none;
}
.panel-heading, .panel-default > .panel-heading {
	color: var(--navy);
	font-weight: 600;
	border-color: var(--border);
}
.panel-footer {
	background: var(--navy-0);
	border-color: var(--border);
	color: var(--text);
}
.list-group-item {
	border-color: var(--border);
}
.list-group-item-heading {
	color: var(--text-dimmed);
	font-size: 13px;
}
.list-group-item-text {
	color: var(--text);
}
.table, .table > thead > tr > th {
	color: var(--text);
}
.table > thead > tr > th {
	color: var(--navy);
	font-weight: 600;
	border-bottom-color: var(--border);
}
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
	border-color: var(--border);
}
.table-striped > tbody > tr:nth-of-type(odd) {
	background: var(--paper);
}
/* The table's own scroll box (sDom in DT_bootstrap.js): a wide table scrolls here, not the page */
/* ---- Customer Care: a customer's page (customer-view.phtml) ---- */

/* Under 1200px the two columns stack; the customer summary comes first, then the balance tiles side by
   side, then options, accounts, profiles and the profile form (the columns' panels join one flex list) */
@media (max-width: 1199px) {
	.cv-layout {
		display: flex;
		flex-wrap: wrap;
		gap: 0 12px;
		margin-left: 0;
		margin-right: 0;
	}
	/* The row's clearfix pseudo-elements would be flex items (and take a gap) */
	.cv-layout::before, .cv-layout::after {
		display: none;
	}
	.cv-layout > [class*="col-lg-"] {
		display: contents;
	}
	.cv-layout > [class*="col-lg-"] > * {
		flex: 1 1 100%;
		min-width: 0;
	}
	.cv-layout .cv-summary {
		order: -1;
	}
	.cv-layout > [class*="col-lg-"] > .state-overview {
		flex: 1 1 calc(50% - 6px);
	}
}
@media (max-width: 767px) {
	/* Balance tiles: a slim colour band and the figure, not a half-width icon block */
	.cv-layout .state-overview {
		display: flex;
		align-items: stretch;
	}
	.cv-layout .state-overview .symbol {
		flex: 0 0 44px;
		width: auto;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cv-layout .state-overview .symbol i {
		font-size: 20px;
	}
	.cv-layout .state-overview .value {
		float: none;
		flex: 1 1 auto;
		width: auto;
		padding: 8px 10px;
		text-align: left;
	}
	.cv-layout .state-overview .value h1 {
		font-size: 22px;
	}
	.cv-layout .state-overview .value p {
		font-size: 12px;
	}
	.cv-layout .state-overview .value p br {
		display: none;
	}
	/* Summary fields one per line */
	.cv-summary .bio-row {
		width: 100%;
	}
}
.cv-break {
	overflow-wrap: anywhere;
}
/* Edit Customer: stays at the top of Profile Info while its form scrolls */
.cv-editbar {
	position: sticky;
	top: 60px;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 15px;
	background: var(--sky-0);
	border-bottom: 1px solid var(--sky-5);
	color: var(--sky-8);
	font-weight: 600;
}
.cv-editbar-actions {
	display: flex;
	gap: 8px;
}
@media (max-width: 767px) {
	/* The header scrolls away on phones, so the bar sticks to the top edge */
	.cv-editbar { top: 0; }
}

/* Dialogs on phones: no panel-in-dialog frame, so forms and tables get the dialog's width */
@media (max-width: 767px) {
	.modal-body .panel {
		border: 0;
		box-shadow: none;
		background: transparent;
	}
	.modal-body .panel > .panel-body {
		padding: 0;
	}
	.modal-body .panel > .panel-heading:not(.tab-bg-dark-navy-blue) {
		padding-left: 0;
		padding-right: 0;
		background: transparent;
	}
	.modal-body .row {
		margin-left: 0;
		margin-right: 0;
	}
	.modal-body .row > [class*="col-"], .modal-body .panel-body > [class*="col-"] {
		padding-left: 0;
		padding-right: 0;
	}
}

.dt-scroll {
	/* Below the floated length and search controls (a scroll box would sit beside them and shrink) */
	clear: both;
	/* Holds positioned bits of the table too (sr-only text), which would otherwise widen the page */
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 8px;
}
.dt-scroll > table.table {
	margin-bottom: 0;
}
/* "Search:" on the same line as its field, which takes the rest of the width (FlatLab floats the
   field right at 78%, so on a phone the label sat above it) */
.dataTables_wrapper .dataTables_filter label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	line-height: normal;
}
.dataTables_wrapper .dataTables_filter label input {
	float: none;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
}
@media (max-width: 767px) {
	/* Phones: tables that aren't DataTables (or aren't set up yet) scroll in their container too */
	.adv-table {
		overflow-x: auto;
	}
	/* Phones: the search box spans the table's width */
	.dataTables_wrapper .dataTables_filter {
		float: none;
		width: 100%;
	}
}
.dataTables_info, .dataTables_length label, .dataTables_filter label {
	color: var(--text-dimmed);
}
.dataTables_paginate.paging_bootstrap.pagination li:hover a,
.dataTables_paginate.paging_bootstrap.pagination li.active a,
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus {
	background: var(--sky-6);
	border-color: var(--sky-6);
	color: #fff;
}
.pagination > li > a {
	color: var(--sky-7);
}
/* bootstrap-reset.css greys every field with #777 !important. The border is Navy 3, dark
   enough to see the field's edge on white. */
.form-control {
	border-color: #869fb9;
	color: var(--text) !important;
}
.form-control::placeholder {
	color: var(--navy-5);
	opacity: 1;
}
/* iOS Safari zooms the page into any field with text under 16px and leaves it zoomed. Fields are
   16px on iOS only (-webkit-touch-callout is iOS-only), so desktop keeps its sizes and pinch zoom stays on. */
@supports (-webkit-touch-callout: none) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
	select, textarea {
		font-size: 16px !important;
	}
	/* Small fields (DataTables search, page size) grow to fit the larger text */
	.input-sm, .form-group-sm .form-control, .dataTables_wrapper input, .dataTables_wrapper select {
		height: auto !important;
	}
}
.form-control:focus {
	border-color: var(--sky-6);
	box-shadow: 0 0 0 3px rgba(37, 171, 226, 0.25);
}
label {
	color: var(--text);
	font-weight: 600;
}

/* Tabs on a navy panel heading */
.tab-bg-dark-navy-blue {
	background: var(--navy);
}
.panel-heading .nav > li > a {
	color: var(--navy-1);
}
/* Bootstrap's tab hover is a pale grey, which hid the white label */
.panel-heading .nav > li > a:hover, .panel-heading .nav > li > a:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: transparent;
	color: #fff;
}
.panel-heading .nav > li.active > a,
.panel-heading .nav > li.active > a:hover,
.panel-heading .nav > li.active > a:focus {
	background: #fff;
	color: var(--navy);
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
	background: var(--sky-6);
}

/* Tiles: the numbers and labels must be readable; the icon blocks take brand colours */
.state-overview .value h1 {
	color: var(--navy);
	font-weight: 600;
}
.state-overview .value p {
	color: var(--text-dimmed);
}
.state-overview .terques { background: var(--navy); }
.state-overview .blue { background: var(--sky-6); }
.state-overview .red { background: var(--ember-5); }
.state-overview .yellow { background: var(--sun-5); }
.state-overview .yellow i { color: var(--navy); }

/* Profile card */
.profile-nav .user-heading {
	background: var(--navy);
}
.profile-nav .user-heading h1 {
	color: #fff;
}
.profile-nav .user-heading p {
	color: var(--navy-1);
}
.profile-nav ul > li > a {
	color: var(--text);
}
.profile-nav ul > li > a > i {
	color: var(--navy-5);
}
.profile-nav ul > li > a:hover, .profile-nav ul > li > a:focus, .profile-nav ul li.active a {
	background: var(--navy-0) !important;
	border-left-color: var(--sky-6);
	color: var(--navy) !important;
}

/* ---- Buttons: white text only on fills that reach 4.5:1 ---- */

.btn {
	font-weight: 600;
}
.btn-default {
	background: #fff;
	border-color: var(--navy-1);
	color: var(--navy);
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
	background: var(--navy-0);
	border-color: var(--navy-2);
	color: var(--navy);
}
.btn-primary, .btn-info {
	background: var(--sky-6);
	border-color: var(--sky-6);
	color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
	background: var(--sky-7);
	border-color: var(--sky-7);
	color: #fff;
}
.btn-success {
	background: var(--green-7);
	border-color: var(--green-7);
	color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
	background: var(--green-8);
	border-color: var(--green-8);
	color: #fff;
}
/* Warning: Sun; danger: Ember. Both take navy text (about 11:1 and 4.5:1). */
.btn-warning {
	background: var(--sun-5);
	border-color: var(--sun-5);
	color: var(--navy);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {
	background: var(--sun-6);
	border-color: var(--sun-6);
	color: var(--navy);
}
.btn-danger {
	background: var(--ember-5);
	border-color: var(--ember-5);
	color: var(--navy);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
	background: var(--ember-4);
	border-color: var(--ember-6);
	color: var(--navy);
}

/* ---- Status colours ---- */

.label-default { background: var(--navy-5); }
/* Waiting to run (Report Scheduler, dashboard "Your reports"): pale, so it reads apart from Running */
.label-scheduled { background: var(--sky-0); color: var(--sky-7); box-shadow: inset 0 0 0 1px var(--sky-5); }
.label-primary, .label-info, .badge.bg-primary, .badge.bg-info { background: var(--sky-6); }
.label-success, .badge.bg-success { background: var(--green-7); }
.label-warning, .badge.bg-warning { background: var(--sun-5); color: var(--navy); }
.label-danger, .badge.bg-important { background: var(--ember-5); color: var(--navy); }

.alert-info { background: var(--sky-0); border-color: #c6eaf9; color: var(--sky-8); }
.alert-success { background: var(--green-0); border-color: #c8ecd3; color: var(--green-8); }
.alert-warning { background: var(--sun-0); border-color: var(--sun-2); color: var(--navy); }
.alert-danger { background: var(--crimson-0); border-color: var(--crimson-1); color: var(--crimson-8); }

#toast-container > .toast-info, .toast-info { background-color: var(--sky-6); }
#toast-container > .toast-success, .toast-success { background-color: var(--green-7); }
#toast-container > .toast-warning, .toast-warning { background-color: var(--sun-5); color: var(--navy); }
#toast-container > .toast-error, .toast-error { background-color: var(--ember-5); color: var(--navy); }
#toast-container > .toast-warning .toast-close-button,
#toast-container > .toast-error .toast-close-button { color: var(--navy); }

/* ---- Sign in: a card centred on the page, with the brand stripe on its top edge ---- */

.login-body {
	background: var(--paper);
}
.login-shell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px 16px;
	box-sizing: border-box;
}
.form-signin.login-card {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 380px;
	margin: 0;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
}
.login-card::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--brand-stripe);
}
.login-brand {
	padding: 26px 24px 8px;
	text-align: center;
}
.login-logo {
	display: block;
	width: 115px;
	height: auto;
	margin: 0 auto;
}
.login-country {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--text-dimmed);
	font-size: 13px;
	font-weight: 600;
}
.login-country img {
	border-radius: 2px;
	box-shadow: 0 0 0 1px var(--navy-1);
}
.login-instance {
	margin-top: 6px;
	font-size: 13px;
	letter-spacing: 0.04em;
}
.login-card .login-wrap {
	padding: 12px 24px 20px;
}
.login-title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 650;
	color: var(--navy);
	text-align: center;
}
.login-card label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
}
.form-signin.login-card input[type="text"], .form-signin.login-card input[type="password"] {
	margin-bottom: 14px;
	padding: 10px 12px;
	border: 1px solid var(--navy-1);
	border-radius: 6px;
	font-size: 15px;
}
.form-signin.login-card input:focus {
	border-color: var(--sky-6);
	box-shadow: 0 0 0 3px rgba(37, 171, 226, 0.25);
}
.login-forgot {
	margin: -6px 0 16px;
	text-align: right;
	font-size: 13px;
}
.form-signin.login-card .btn-login {
	margin: 0;
	background: var(--sky-6);
	border-color: var(--sky-6);
	box-shadow: none;
	color: #fff;
	font-family: var(--font);
	font-weight: 650;
	text-transform: none;
	border-radius: 6px;
}
.form-signin.login-card .btn-login:hover, .form-signin.login-card .btn-login:focus {
	background: var(--sky-7);
	border-color: var(--sky-7);
}
.form-signin.login-card a {
	color: var(--sky-7);
	font-weight: 600;
}
.form-signin.login-card a:hover {
	color: var(--navy);
}
.login-more {
	padding: 14px 24px 18px;
	background: var(--navy-0);
	border-top: 1px solid var(--border);
}
.form-signin.login-card .login-more p {
	margin: 4px 0;
	color: var(--text);
	font-size: 13px;
	font-weight: normal;
	text-align: center;
}

/* ---- Public customer pages (signup, activate, password reset, email verify): the sign-in card, wider ---- */

.public-body #massy-content:has(.public-page) {
	margin-top: 0;
}
.public-page {
	max-width: 520px;
	margin: 24px auto 40px;
}
.public-page-narrow {
	max-width: 420px;
}
.public-page-wide {
	max-width: 720px;
}
.public-card {
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
}
.public-card::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--brand-stripe);
}
.public-brand {
	padding: 24px 24px 4px;
	text-align: center;
}
.public-logo {
	display: block;
	width: 115px;
	height: auto;
	margin: 0 auto;
}
.public-brand .login-country {
	margin-top: 14px;
}
.public-body-wrap {
	padding: 12px 28px 24px;
}
.public-title {
	margin: 4px 0 8px;
	font-size: 22px;
	font-weight: 650;
	color: var(--navy);
	text-align: center;
}
.public-lead {
	margin: 0 auto 20px;
	max-width: 34em;
	color: var(--text-dimmed);
	text-align: center;
}
.public-section {
	margin: 0 0 18px;
	padding: 0 0 4px;
	border: 0;
	border-bottom: 1px solid var(--border);
}
.public-section:last-of-type {
	border-bottom: 0;
}
.public-section legend {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-size: 15px;
	font-weight: 650;
	color: var(--navy);
}
.public-section legend .fa {
	width: 18px;
	color: var(--sky-6);
}
.public-card label {
	font-size: 13px;
	font-weight: 600;
}
.public-card .form-control {
	height: 38px;
	border: 1px solid var(--navy-1);
	border-radius: 6px;
	color: var(--text);
	box-shadow: none;
}
.public-card .form-control:focus {
	border-color: var(--sky-6);
	box-shadow: 0 0 0 3px rgba(37, 171, 226, 0.25);
}
/* Date fields are read-only only so the picker supplies the value */
.public-card .form-control.picker-input[readonly] {
	background: #fff;
	cursor: pointer;
}
.public-card .iconic-input.right i {
	margin-top: 11px;
	color: var(--navy-2);
	pointer-events: none;
}
.public-card .checkbox label {
	font-weight: normal;
	line-height: 1.5;
}
.public-card .checkbox input[type="checkbox"] {
	margin-top: 3px;
}
.public-note {
	margin: 0 0 14px;
	padding: 10px 12px;
	background: var(--sun-0);
	border-left: 3px solid var(--sun-5);
	border-radius: 4px;
	font-size: 13px;
}
.public-card .g-recaptcha {
	margin: 12px 0 4px;
}
.public-card .btn-lg {
	font-size: 16px;
	font-weight: 650;
	border-radius: 6px;
}
.public-done {
	margin-bottom: 20px;
	text-align: center;
}
.public-done .fa {
	font-size: 40px;
	color: var(--green-7);
}
.public-done p {
	margin: 8px 0 0;
}
.public-more {
	padding: 14px 24px 16px;
	background: var(--navy-0);
	border-top: 1px solid var(--border);
	text-align: center;
}
.public-more p {
	margin: 4px 0;
	font-size: 13px;
}
.public-more a {
	font-weight: 600;
}
@media (max-width: 480px) {
	.public-page {
		margin-top: 8px;
	}
	.public-body-wrap {
		padding: 8px 16px 20px;
	}
}

/* TTARP Updater: the file format beside the upload, then the uploads list */
.ttarp-upload {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin-bottom: 20px;
}
.ttarp-format {
	flex: 1 1 360px;
}
.ttarp-format p {
	margin: 0 0 6px;
}
.ttarp-format dl {
	margin: 0;
}
.ttarp-format dl div {
	display: flex;
	gap: 12px;
	padding: 3px 0;
	border-bottom: 1px solid var(--navy-0);
}
.ttarp-format dt {
	flex: 0 0 120px;
	font-family: Consolas, 'Courier New', monospace;
	font-weight: 600;
	color: var(--navy);
}
.ttarp-format dd {
	margin: 0;
	color: var(--text-dimmed);
}
#frmTtarpUploader {
	flex: 1 1 320px;
	padding: 14px;
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: 6px;
}
#frmTtarpUploader label {
	font-weight: 600;
}
#frmTtarpUploader input[type="file"] {
	height: auto;
	padding: 6px;
	background: #fff;
}
.ttarp-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
}
.ttarp-status {
	font-size: 13px;
	color: var(--text-dimmed);
}
.ttarp-status.is-busy { color: var(--sky-7); }
.ttarp-status.is-ok { color: var(--green-7); }
.ttarp-status.is-error { color: var(--crimson-6); }
.ttarp-upload-frame {
	position: absolute;
	width: 0;
	height: 0;
	border: 0;
}

/* Points Balance: a card lookup, then the balance, the customer and the statement */
.balance-lookup {
	max-width: 560px;
	margin-bottom: 20px;
}
.balance-lookup label {
	font-weight: 600;
}
.balance-lookup-row {
	display: flex;
	gap: 8px;
}
.balance-result[hidden] {
	display: none;
}
.balance-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 32px;
	padding: 16px;
	margin-bottom: 18px;
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: 6px;
}
.balance-card {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
}
.balance-cust {
	margin: 0;
}
.balance-cust div {
	display: flex;
	gap: 8px;
	padding: 2px 0;
}
.balance-cust dt {
	flex: 0 0 60px;
	color: var(--text-dimmed);
	font-weight: normal;
}
.balance-cust dd {
	margin: 0;
	font-weight: 600;
}
.balance-figure {
	min-width: 220px;
	padding: 12px 18px;
	background: var(--navy);
	border-radius: 6px;
	color: #fff;
	text-align: right;
}
.balance-figure span {
	display: block;
	color: var(--navy-1);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.balance-figure strong {
	display: block;
	font-size: 30px;
	line-height: 1.2;
}
.balance-figure small {
	color: var(--navy-1);
}
.balance-figure small span {
	display: inline;
	font-size: inherit;
	text-transform: none;
	letter-spacing: 0;
}
.balance-stmt {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px 16px;
}
.balance-stmt .form-group {
	min-width: 280px;
	margin: 0;
}
.balance-range {
	cursor: pointer;
}
.balance-stmt-actions {
	display: flex;
	gap: 8px;
}

/* A filter row above a list: segmented choices with counts, and a note */
.list-filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0 0 12px;
}
.list-filter .btn.active {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
	box-shadow: none;
}
.list-filter .btn .badge {
	margin-left: 4px;
	background: var(--navy-1);
	color: var(--navy);
}
.list-filter .btn.active .badge {
	background: #fff;
}
.list-filter-note {
	color: var(--text-dimmed);
	font-size: 12px;
}
.list-intro {
	display: block;
	margin: 0 0 12px;
}
/* Lists with details under the main value in a cell (Replacement Cards, Online Applications) */
.cell-stack td small {
	display: block;
	margin-top: 2px;
	color: var(--text-dimmed);
	font-size: 12px;
}
.cell-stack td .label {
	margin-right: 4px;
}
.cell-stack td small a {
	color: var(--sky-7);
}

/* Partner Locations: what each terminal may do, and the terminal users dialog */
.pl-modes {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2px 12px;
	margin: 0;
	font-size: 12px;
}
.pl-modes div {
	display: contents;
}
.pl-modes dt {
	font-weight: 400;
	color: var(--text-dimmed);
}
.pl-modes dd {
	margin: 0;
	color: var(--text);
}
.pl-modes .is-off dd {
	color: var(--crimson-6);
}
.tu-filter {
	margin-bottom: 14px;
}
.tu-lists {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.tu-lists section {
	border: 1px solid var(--border);
	border-radius: 6px;
	min-width: 0;
}
.tu-lists h3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	background: var(--navy-0);
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
}
.tu-lists h3 .badge {
	background: var(--navy);
}
.tu-lists ul {
	max-height: 360px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tu-lists li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--border);
}
.tu-lists li:last-child {
	border-bottom: 0;
}
.tu-lists li[hidden] {
	display: none;
}
.tu-lists li div {
	min-width: 0;
}
.tu-lists li strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}
.tu-lists li small {
	color: var(--text-dimmed);
}
.tu-lists li .btn {
	flex: none;
}
.tu-lists [data-list='assigned'] li .btn:hover {
	color: var(--crimson-6);
	border-color: var(--crimson-6);
}
.tu-empty {
	margin: 0;
	padding: 14px 12px;
	color: var(--text-dimmed);
	font-size: 12px;
}
@media (max-width: 767px) {
	.tu-lists {
		grid-template-columns: 1fr;
	}
}

/* Report Scheduler: the "Schedule a report" panel above the list */
.rpt-schedule {
	margin: 0 0 20px;
	border: 1px solid var(--border);
	border-top: 3px solid var(--sky-6);
	border-radius: 6px;
	background: #fff;
}
.rpt-schedule[hidden] {
	display: none;
}
.rpt-schedule-body {
	display: flex;
	gap: 24px;
	padding: 16px;
}
.rpt-schedule-pick {
	flex: 0 0 300px;
}
.rpt-schedule-pick label {
	font-weight: 600;
}
.rpt-schedule-note {
	margin: 10px 0 0;
	color: var(--text-dimmed);
	font-size: 12px;
}
.rpt-schedule-options {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 24px;
	border-left: 1px solid var(--border);
}
/* Date fields are read-only only so the picker fills them */
#rpt-options input[readonly] {
	background: #fff;
	cursor: pointer;
}
.rpt-options-empty {
	margin: 26px 0 0;
}
.rpt-schedule-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 10px 16px;
	background: var(--navy-0);
	border-top: 1px solid var(--border);
}
@media (max-width: 767px) {
	.rpt-schedule-body {
		flex-direction: column;
	}
	.rpt-schedule-pick {
		flex-basis: auto;
	}
	.rpt-schedule-options {
		padding-left: 0;
		border-left: 0;
	}
}

/* Report Scheduler: the parameters under a report's name */
.rpt-params {
	display: block;
	max-width: 420px;
	margin-top: 2px;
	color: var(--text-dimmed);
	font-size: 12px;
	line-height: 1.35;
}

/* ---- Printed documents: receipts and the printed statement (massy/print/doc-head.phtml).
   Shown in the public layout and printed straight away; colours are kept when printing. ---- */

.public-body #massy-content:has(.print-doc) {
	margin-top: 16px;
}
.print-doc {
	max-width: 800px;
	margin: 0 auto 24px;
	background: #fff;
	color: var(--text);
	font-size: 13px;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.print-doc-slip {
	max-width: 380px;
}
.doc-stripe {
	height: 5px;
	background: var(--brand-stripe);
}
.doc-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0 14px;
	border-bottom: 1px solid var(--border);
}
.doc-head img {
	width: 120px;
	height: auto;
}
.doc-title {
	text-align: right;
}
.doc-title h1 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--navy);
}
.doc-title p {
	margin: 2px 0 0;
	color: var(--text-dimmed);
	font-size: 12px;
}
.print-doc-slip .doc-head {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.print-doc-slip .doc-title {
	text-align: center;
}
.doc-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 24px;
	margin: 14px 0;
}
.print-doc-slip .doc-meta {
	grid-template-columns: 1fr;
}
.doc-meta div {
	display: flex;
	gap: 8px;
	padding: 3px 0;
	border-bottom: 1px solid var(--navy-0);
}
.doc-meta dt {
	flex: 0 0 110px;
	color: var(--text-dimmed);
	font-weight: normal;
}
.doc-meta dd {
	margin: 0;
	font-weight: 600;
	word-break: break-word;
}
.doc-section {
	margin: 18px 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--navy);
}
.doc-table {
	width: 100%;
	margin: 6px 0 12px;
	border-collapse: collapse;
}
.doc-table th {
	padding: 7px 8px;
	background: var(--navy);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: left;
}
.doc-table td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
.doc-table tbody tr:nth-child(even) td {
	background: var(--paper);
}
.doc-table .num {
	text-align: right;
	white-space: nowrap;
}
.doc-table .neg {
	color: var(--ember-8);
}
.doc-table small {
	display: block;
	color: var(--text-dimmed);
}
.doc-table tr.doc-subhead td {
	padding-top: 12px;
	background: #fff;
	color: var(--navy);
	font-weight: 700;
}
.doc-balance {
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
	margin: 4px 0 8px;
	padding: 10px 14px;
	background: var(--navy);
	color: #fff;
}
.doc-balance span {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--navy-1);
}
.doc-balance strong {
	font-size: 18px;
}
.doc-note {
	margin: 8px 0;
	padding: 8px 10px;
	background: var(--paper);
	border-left: 3px solid var(--sky-6);
}
.doc-signs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 36px;
}
.print-doc-slip .doc-signs {
	grid-template-columns: 1fr;
	gap: 28px;
}
.doc-signs div {
	padding-top: 4px;
	border-top: 1px solid var(--text);
	font-size: 11px;
	color: var(--text-dimmed);
}
.doc-foot {
	margin-top: 22px;
	padding-top: 8px;
	border-top: 1px solid var(--border);
	color: var(--text-dimmed);
	font-size: 11px;
	text-align: center;
}
@media print {
	.public-body {
		background: #fff;
	}
	.public-body #massy-content {
		margin: 0;
		padding: 0;
	}
	.print-doc {
		max-width: none;
		margin: 0;
	}
	.print-doc-slip {
		max-width: 80mm;
	}
	.doc-table tr {
		page-break-inside: avoid;
	}
	.public-body #massy-content:has(.print-doc) {
		margin-top: 0;
	}
	/* Bootstrap's print rules turn every colour black and every background off (with !important);
	   put the document's back */
	.print-doc * {
		color: inherit !important;
	}
	.print-doc, .print-doc .doc-meta dd, .print-doc .doc-table td {
		color: var(--text) !important;
	}
	.print-doc .doc-stripe {
		background: var(--brand-stripe) !important;
	}
	.print-doc .doc-title h1, .print-doc .doc-section, .print-doc .doc-table tr.doc-subhead td {
		color: var(--navy) !important;
	}
	.print-doc .doc-title p, .print-doc .doc-meta dt, .print-doc .doc-table small,
	.print-doc .doc-signs div, .print-doc .doc-foot {
		color: var(--text-dimmed) !important;
	}
	.print-doc .doc-table th {
		background: var(--navy) !important;
		color: #fff !important;
	}
	.print-doc .doc-table tbody tr:nth-child(even) td {
		background: var(--paper) !important;
	}
	.print-doc .doc-table tr.doc-subhead td {
		background: #fff !important;
	}
	.print-doc .doc-table .neg, .print-doc .doc-table .neg strong {
		color: var(--ember-8) !important;
	}
	.print-doc .doc-balance {
		background: var(--navy) !important;
	}
	.print-doc .doc-balance strong {
		color: #fff !important;
	}
	.print-doc .doc-balance span {
		color: var(--navy-1) !important;
	}
	.print-doc .doc-note {
		background: var(--paper) !important;
	}
	.print-doc *, .print-doc *::before, .print-doc *::after {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
}

/* ---- Customer pages ---- */

.customer-page {
	max-width: 1100px;
}
.customer-page-narrow {
	max-width: 640px;
}
.customer-page-head {
	margin: 4px 0 18px;
}
.customer-page-head h1 {
	margin: 0;
	font-size: 26px;
	font-weight: 650;
	color: var(--navy);
}
.customer-page-head p {
	margin: 4px 0 0;
	color: var(--text-dimmed);
}
.customer-page-note {
	color: var(--text-dimmed);
}

.points-card .panel-body {
	padding: 22px 24px;
}
.points-card-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}
.points-card-main {
	flex: 1 1 160px;
}
/*
 * A Massy Card keytag: the card image at the keytag's height on the left, the tag running on to
 * the right in white with a punched hole at the end. The card's white area starts about 65% across
 * the image (99px at this size), so the number sits there, under the logo.
 */
.massy-keytag {
	position: relative;
	flex: none;
	width: 224px;
	height: 96px;
	margin: 0;
	overflow: hidden;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 0 0 1px var(--navy-1), 0 6px 16px rgba(0, 53, 95, 0.14);
}
.massy-keytag img {
	display: block;
	width: auto;
	height: 100%;
}
.massy-keytag::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 11px;
	height: 11px;
	margin-top: -5.5px;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: inset 0 1px 2px rgba(0, 53, 95, 0.35);
}
.massy-keytag-number {
	position: absolute;
	left: 102px;
	bottom: 13px;
	color: var(--navy);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.points-card-label {
	color: var(--text-dimmed);
	font-weight: 600;
}
.points-card-balance {
	font-size: clamp(40px, 6vw, 56px);
	font-weight: 750;
	line-height: 1.1;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
}
.points-card-asof {
	color: var(--text-dimmed);
	font-size: 13px;
}
.points-card-expiry {
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin-top: 16px;
	padding: 10px 14px;
	background: var(--ember-0);
	border-left: 4px solid var(--ember-5);
	border-radius: 4px;
	color: var(--ember-8);
}
.points-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}
.points-card-actions .btn {
	margin-bottom: 0;
}

.panel-heading-link {
	float: right;
	font-weight: 600;
	font-size: 13px;
}
/* A heading that wraps on a phone keeps its floated link inside, off the first row below */
.panel-heading:has(> .panel-heading-link) {
	display: flow-root;
}
.quick-links {
	margin-bottom: 0;
}
.quick-links .list-group-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	border-left: 0;
	border-right: 0;
	color: var(--text);
	font-weight: 600;
}
.quick-links .list-group-item:first-child {
	border-top: 0;
}
.quick-links .list-group-item:hover, .quick-links .list-group-item:focus {
	background: var(--navy-0);
	color: var(--navy);
}
.quick-links .list-group-item > .fa:first-child {
	color: var(--sky-6);
}
.quick-links-go {
	margin-left: auto;
	color: var(--navy-2);
}

.activity-list {
	margin: 0;
	padding: 0;
}
.activity-list li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 12px 16px;
	border-top: 1px solid var(--border);
}
.activity-list li:first-child {
	border-top: 0;
}
.activity-when {
	flex: none;
	width: 96px;
	color: var(--text-dimmed);
	font-size: 13px;
}
.activity-what {
	flex: 1;
	min-width: 0;
}
.activity-what small {
	display: block;
	color: var(--text-dimmed);
}
.activity-points {
	flex: none;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.points-pos { color: var(--green-7); }
.points-neg { color: var(--ember-7); }

@media (max-width: 480px) {
	.activity-list li {
		flex-wrap: wrap;
		gap: 2px 12px;
	}
	.activity-when {
		width: 100%;
	}
}

.customer-page-head-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}
.panel-heading-action {
	float: right;
	margin-top: -4px;
}

/* My Profile: each section shows its values, and Edit turns it into a form */
.profile-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
}
.profile-avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	box-shadow: inset 0 -4px 0 var(--sun-5);
}
.profile-head-text {
	flex: 1;
	min-width: 200px;
}
.profile-head-text h1 {
	margin: 0;
	font-size: 22px;
	font-weight: 650;
	color: var(--navy);
}
.profile-head-text p {
	margin: 2px 0 0;
	color: var(--text-dimmed);
	overflow-wrap: anywhere;
}
.profile-fields {
	margin: 0;
}
.profile-field {
	margin: 0;
	padding: 10px 16px;
	border-top: 1px solid var(--border);
}
.profile-field:first-child {
	border-top: 0;
}
.profile-field dt {
	color: var(--text-dimmed);
	font-size: 13px;
	font-weight: 600;
}
.profile-field dt label {
	margin: 0;
	color: inherit;
	font-size: inherit;
}
.profile-field dd {
	margin: 2px 0 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.profile-empty {
	color: var(--text-dimmed);
	font-weight: normal;
	font-style: italic;
}
.profile-input, .profile-form-actions {
	display: none;
}
.profile-section.is-editing .profile-field:not(.is-readonly) .profile-value {
	display: none;
}
.profile-section.is-editing .profile-input {
	display: block;
}
.profile-section.is-editing .profile-input .form-control {
	font-weight: normal;
}
.profile-section.is-editing .profile-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--border);
	background: var(--navy-0);
}
.profile-section.is-editing [data-edit] {
	display: none;
}
.profile-section.is-editing .profile-field.is-readonly {
	opacity: 0.7;
}
.profile-error:empty {
	display: none;
}
.profile-inline-action {
	padding: 0 4px;
	font-weight: 600;
	color: var(--sky-7);
}

/* My Transactions */
.trx-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin-bottom: 12px;
}
.trx-filter-field label {
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
}
.trx-filter-field .form-control {
	width: 170px;
}
.trx-search .dataTables_filter {
	float: none;
	text-align: left;
	margin-bottom: 8px;
}
.trx-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.trx-table td small {
	color: var(--text-dimmed);
}
/* Customer Care transactions dialog: the detail under each value */
.trxn-dialog .trx-table td small {
	display: block;
	font-size: 12px;
}
.trx-comment {
	color: var(--sky-6);
	cursor: help;
}
.trx-date {
	white-space: nowrap;
}
.trx-points {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
body .massy-server-table .massy-loading {
	color: var(--text);
}
body .massy-server-table .massy-loading .fa {
	color: var(--sky-6);
}

/* My Linked Accounts */
.empty-state .panel-body {
	padding: 36px 24px;
	text-align: center;
}
.empty-state-icon {
	font-size: 40px;
	color: var(--sky-6);
}
.empty-state h2 {
	margin: 12px 0 6px;
	font-size: 20px;
	font-weight: 650;
	color: var(--navy);
}
.empty-state p {
	max-width: 420px;
	margin: 0 auto 18px;
	color: var(--text-dimmed);
}
.linked-card h2 {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 650;
	color: var(--navy);
}
.linked-card .label {
	margin-left: 6px;
}
.linked-card-fields {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 16px;
	margin: 0;
}
.linked-card-fields dt {
	color: var(--text-dimmed);
	font-weight: 600;
}
.linked-card-fields dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* My Donations */
.donate-balance {
	margin-bottom: 16px;
}
.donate-amount {
	max-width: 180px;
}

/* ---- Staff dashboard ---- */

/*
 * Full width. The head pairs the greeting with the customer lookup (the task staff open the page for).
 * Below it, the programme column (health, figures, work) and the desk rail (quick actions, your
 * reports, customers, your day): one column under 992px; 992-1399px health and programme span the
 * page above the split; from 1400px the rail runs beside everything. Past 2400px the page centres.
 */
.staff-dash {
	max-width: 2400px;
	margin: 0 auto;
}
.dash-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
}
.dash-head .dash-lookup {
	flex: 0 1 420px;
}
.dash-head .dash-lookup-row {
	max-width: none;
}
/* The lookup lines up with the desk rail under it */
@media (min-width: 1400px) {
	.dash-head .dash-lookup { flex-basis: 360px; }
}
@media (min-width: 2100px) {
	.dash-head .dash-lookup { flex-basis: 400px; }
}
.dash-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 20px;
}
.dash-main, .dash-rail {
	min-width: 0;
}
@media (min-width: 992px) {
	.dash-layout {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		grid-template-areas: "health health" "prog prog" "main rail";
	}
	.dash-health { grid-area: health; }
	.dash-programme { grid-area: prog; }
	.dash-main { grid-area: main; }
	.dash-rail { grid-area: rail; align-self: start; }
}
@media (min-width: 1400px) {
	.dash-layout {
		grid-template-columns: minmax(0, 1fr) 360px;
		grid-template-areas: "health rail" "prog rail" "main rail";
		/* Spare rail height goes below the last panel of the main column, not between panels */
		grid-template-rows: auto auto 1fr;
	}
	.dash-main { align-self: start; }
}
@media (min-width: 1800px) {
	/* Work panels side by side once each keeps its tiles readable */
	.dash-main {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
		column-gap: 20px;
		align-items: start;
	}
}
@media (min-width: 2100px) {
	.dash-layout { grid-template-columns: minmax(0, 1fr) 400px; }
}
.panel-heading-note {
	margin-left: 6px;
	color: var(--text-dimmed);
	font-size: 13px;
	font-weight: normal;
}
/* Counter (partner CSRs): check a card, then their entries today with receipts */
.dash-check label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 650;
	color: var(--navy);
}
.dash-check-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.dash-check-row .form-control {
	flex: 1 1 260px;
	max-width: 420px;
	height: 42px;
	font-size: 18px;
	letter-spacing: 0.04em;
}
.dash-check-row .btn {
	height: 42px;
}
.dash-check-search {
	display: inline-block;
	margin-top: 10px;
	font-weight: 600;
	font-size: 13px;
}
.dash-recent-customers .dash-entries-table a:not(.btn) {
	font-weight: 600;
}
/* Partner admins: their team and locations */
.dash-stat.is-attention {
	box-shadow: inset 3px 0 0 #e0a106;
}
.dash-team .dash-myday-head small {
	display: block;
	margin-top: 2px;
	color: var(--text-dimmed);
	font-size: 12px;
	font-weight: normal;
}
.dash-entries-table {
	margin-bottom: 0;
	font-variant-numeric: tabular-nums;
}
.dash-entries-table > thead > tr > th {
	padding: 8px 15px;
	border-bottom: 1px solid var(--border);
	color: var(--text-dimmed);
	font-size: 12px;
	font-weight: 600;
}
.dash-entries-table > tbody > tr > td {
	padding: 8px 15px;
	vertical-align: middle;
}
.dash-entries-table td small {
	display: block;
	color: var(--text-dimmed);
	font-size: 12px;
}
.dash-entry-points {
	font-weight: 650;
}
.dash-entries .dash-note {
	padding-top: 8px;
	padding-bottom: 8px;
	border-top: 1px solid var(--border);
}
/* Your entries today: five columns in the desk rail, about 610px at full size. Inner cells are tighter
   than the panel's 15px edge and the receipt column takes only its button. Narrower panels show the
   button's icon alone, then drop the invoice (the receipt has it); below about 380px the table scrolls. */
.dash-entries {
	container-type: inline-size;
}
.dash-entries .dash-entries-table > thead > tr > th,
.dash-entries .dash-entries-table > tbody > tr > td {
	padding-left: 8px;
	padding-right: 8px;
}
.dash-entries .dash-entries-table > thead > tr > th:first-child,
.dash-entries .dash-entries-table > tbody > tr > td:first-child {
	padding-left: 15px;
}
.dash-entries .dash-entries-table > thead > tr > th:last-child,
.dash-entries .dash-entries-table > tbody > tr > td:last-child {
	padding-right: 15px;
}
.dash-entries .dash-entry-receipt {
	width: 1%;
	white-space: nowrap;
}
.dash-entries-scroll {
	overflow-x: auto;
}
@container (max-width: 640px) {
	.dash-entries .dash-receipt-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	.dash-entries .dash-entries-table > thead > tr > th,
	.dash-entries .dash-entries-table > tbody > tr > td {
		padding-left: 6px;
		padding-right: 6px;
	}
}
@container (max-width: 580px) {
	.dash-entries .dash-entries-table th:nth-child(4),
	.dash-entries .dash-entries-table td:nth-child(4) {
		display: none;
	}
}

.dash-lookup label {
	display: block;
	margin-bottom: 6px;
}
.dash-lookup-row {
	display: flex;
	gap: 8px;
	max-width: 420px;
	margin-bottom: 6px;
}
.dash-lookup a {
	font-weight: 600;
	font-size: 13px;
}
.dash-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.dash-stat {
	padding: 12px 14px;
	background: var(--paper);
	border-radius: 8px;
}
.dash-stat-value {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
}
/* Programme (management) */
/* 135px keeps five figures (points, outstanding, active cards, registrations) on one row beside the rail */
.dash-kpis {
	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}
/* Big figures shrink with their tile rather than run into its edge (122,548,416 in a 180px tile) */
.dash-kpis .dash-stat {
	container-type: inline-size;
}
.dash-kpis .dash-stat-value {
	font-size: min(26px, 12.5cqi);
}
.dash-stat-delta {
	margin-top: 4px;
	color: var(--text-dimmed);
	font-size: 12px;
}
/* Each chart beside its ranking; from 2100px both pairs share a row so the charts keep their size */
.dash-programme-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px 24px;
	margin-top: 20px;
}
@media (min-width: 768px) {
	.dash-programme-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
	.dash-programme-grid.is-unranked { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 2100px) {
	.dash-programme-grid { grid-template-columns: minmax(0, 5fr) minmax(240px, 3fr) minmax(0, 5fr) minmax(240px, 3fr); }
	.dash-programme-grid.is-unranked { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* A hairline between the two pairs */
	.dash-programme-grid > :nth-child(3),
	.dash-programme-grid.is-unranked > :nth-child(2) { padding-left: 24px; border-left: 1px solid var(--border); }
	.dash-programme-grid.is-unranked > :nth-child(3) { padding-left: 0; border-left: 0; }
}
.dash-subhead {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 650;
	color: var(--navy);
}
.dash-chart {
	margin: 0;
}
.dash-chart svg {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 599px) {
	/* Phones: a chart squeezed to the screen has 5px labels, so it keeps 600px and scrolls sideways,
	   opening on the latest months (row-reverse starts the scroll at the right) */
	.dash-chart-plot {
		display: flex;
		flex-direction: row-reverse;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.dash-chart-plot svg {
		flex: 0 0 600px;
	}
}
.dash-chart-grid {
	stroke: var(--navy-1);
	stroke-width: 1;
}
.dash-chart-base {
	stroke: var(--navy-2);
}
.dash-chart-tick {
	fill: var(--text-dimmed);
	font-size: 11px;
	font-family: var(--font);
}
.dash-chart-hit {
	fill: transparent;
}
.dash-chart g:hover .dash-chart-hit {
	fill: var(--navy-0);
}
.dash-chart-legend {
	display: flex;
	gap: 16px;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--text);
}
.dash-chart-legend i {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-radius: 2px;
}
.dash-chart-table summary {
	margin-top: 6px;
	color: var(--sky-7);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.dash-chart-table table {
	margin-top: 6px;
	font-size: 13px;
}
.dash-ranking {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rank;
}
.dash-ranking li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 6px 0;
	border-top: 1px solid var(--border);
	font-size: 13px;
}
.dash-ranking li:first-child {
	border-top: 0;
}
.dash-ranking-value {
	font-weight: 700;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
}
.dash-ranking-bar {
	grid-column: 1 / -1;
	height: 4px;
	background: var(--navy-0);
	border-radius: 2px;
}
.dash-ranking-bar i {
	display: block;
	height: 100%;
	background: var(--sky-6);
	border-radius: 2px;
}

/* Work queues: two linked tiles */
.dash-queues {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
a.dash-stat {
	display: block;
	color: inherit;
	border: 1px solid transparent;
}
a.dash-stat:hover, a.dash-stat:focus {
	border-color: var(--sky-6);
	text-decoration: none;
}
.dash-stat-flag {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--ember-0);
	color: var(--ember-8);
	font-size: 12px;
	font-weight: 600;
}
.dash-stat-flag-muted {
	background: var(--navy-0);
	color: var(--text-dimmed);
}
.dash-customer small {
	display: block;
	color: var(--text-dimmed);
	font-weight: normal;
}
.dash-stat-label {
	color: var(--text-dimmed);
	font-size: 13px;
}
.dash-note {
	margin: 12px 0 0;
	color: var(--text-dimmed);
	font-size: 13px;
}
.dash-count {
	margin-left: 6px;
	background: var(--sky-6);
	vertical-align: middle;
}
.dash-myday {
	margin: 0;
}
.dash-myday > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 10px 16px;
	border-top: 1px solid var(--border);
}
.dash-myday > div:first-child {
	border-top: 0;
}
.dash-myday dt {
	color: var(--text-dimmed);
	font-weight: 600;
}
.dash-myday dd {
	margin: 0;
	color: var(--navy);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.dash-recent li {
	padding: 10px 16px;
}
/* "5 times" after an action repeated in a row */
.activity-repeat {
	margin-left: 4px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--navy-0);
	color: var(--text-dimmed);
	font-size: 11px;
	font-weight: 600;
}
@media (max-width: 600px) {
	.dash-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Phones: the header fits one row ---- */

@media (max-width: 767px) {
	a.logo .logo-sep, a.logo .logo-region small,
	.top-nav .header-card, .top-nav .username {
		display: none;
	}
	a.logo .instance-label {
		font-size: 13px;
		margin-left: 6px;
	}
	/* The switcher shows the store code instead of its name */
	.top-nav .loc-switch .loc-switch-name {
		display: none;
	}
	.top-nav .loc-switch .loc-switch-code {
		display: inline;
	}
	.top-nav .loc-switch > a {
		margin-right: 4px;
	}
	.top-nav ul.top-menu > li > a {
		padding: 6px;
	}
	.customer-page-head h1 {
		font-size: 22px;
	}
}

/* ---- Staff pages: the FlatLab colours that are left ---- */

/* Dialog headers were teal (bootstrap-reset.css) */
.modal-header {
	background: #fff;
	border-bottom: 1px solid var(--border);
	border-radius: 6px 6px 0 0;
	color: var(--navy);
}
.modal-header .modal-title {
	color: var(--navy);
	font-weight: 650;
}
.modal-header .close {
	color: var(--navy);
	opacity: 0.6;
}
.modal-content {
	border: 0;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 36, 68, 0.25);
}
.modal-footer {
	border-top-color: var(--border);
}

/* Section headers coloured for decoration: cream (bg-warning) becomes a light navy band, blue
   (bg-primary) navy */
.panel-heading.bg-warning {
	background: var(--navy-0);
	border-bottom: 1px solid var(--border);
	color: var(--navy);
}
.panel-heading.bg-primary, .panel-heading.panel-primary {
	background: var(--navy);
	color: #fff;
}
.panel-heading.bg-primary a, .panel-heading.panel-primary a {
	color: #fff;
}

/* A wider sidebar (232px, the style guide's width), so labels such as "Points Management" fit */
@media (min-width: 769px) {
	#sidebar {
		width: 232px;
	}
	#main-content {
		margin-left: 232px;
	}
	.sidebar-closed #sidebar {
		margin-left: -232px;
	}
	.sidebar-closed #main-content {
		margin-left: 0;
	}
}

/* Report pages: a compact filter column (kept in view while scrolling on desktop), and a
   message in the results area until a chart or table is drawn there */
.rpt-filters .panel {
	margin-bottom: 10px;
}
.rpt-filters .panel-heading {
	padding: 8px 12px;
	font-size: 13px;
}
.rpt-filters .panel-body {
	padding: 10px 12px;
}
.rpt-filters .btn-block {
	margin-top: 6px;
	text-align: left;
}
.rpt-filters .btn-block .fa {
	width: 18px;
}
.rpt-filters .btn-default .fa {
	color: var(--sky-6);
}
@media (min-width: 1200px) {
	.rpt-filters {
		position: sticky;
		top: 76px;
	}
}
.rpt-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 320px;
	padding: 24px;
	border: 2px dashed var(--navy-1);
	border-radius: 10px;
	color: var(--text-dimmed);
	text-align: center;
}
.rpt-empty .fa {
	font-size: 36px;
	color: var(--navy-2);
}
.rpt-empty p {
	margin: 0;
	max-width: 360px;
}
.rpt-results:has(.highcharts-container, table, svg) .rpt-empty {
	display: none;
}

/* Card Registration: the two kinds of card side by side */
.reg-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
.reg-choice {
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 8px;
}
.reg-choice h4 {
	margin: 0 0 6px;
	color: var(--navy);
	font-weight: 650;
}
.reg-choice h4 .fa {
	color: var(--sky-6);
	margin-right: 4px;
}
.reg-choice p {
	min-height: 40px;
	color: var(--text-dimmed);
}

/* .panel-body's clearfix pseudo-elements would take the first grid cells and stagger the cards */
.reg-choices::before, .reg-choices::after {
	display: none;
}

/* Card Registration: the choice, then the primary card form (grid, not Bootstrap columns) */
.reg-page {
	max-width: 760px;
	margin: 0 auto;
}
.reg-form {
	max-width: 1120px;
	margin: 0 auto;
}
.reg-form-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
}
@media (min-width: 992px) {
	.reg-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Preferences spans both columns, its fields side by side */
	.reg-form-grid > .panel:last-child {
		grid-column: 1 / -1;
	}
	.reg-form-grid > .panel:last-child .reg-fields {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		column-gap: 20px;
		align-items: end;
	}
}
.reg-check label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	margin: 0;
	font-weight: 400;
}
.reg-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
}
/* The date picker fills Date of Birth: read-only, but it's the field to click, not a disabled one */
.reg-form .dobpicker input[readonly] {
	background-color: #fff;
	cursor: pointer;
}
.reg-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 20px;
}

/* Merchant Locations: terminal settings as a short list */
.loc-caps {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2px 10px;
	margin: 0;
	font-size: 13px;
}
.loc-caps dt {
	color: var(--text-dimmed);
	font-weight: 600;
}
.loc-caps dd {
	margin: 0;
}
.loc-cap-off {
	color: var(--text-dimmed);
	font-style: italic;
}
.loc-id {
	display: block;
	white-space: nowrap;
}

/* Customer record: the Options panel's groups; a group with nothing for this user is hidden */
.opt-group + .opt-group {
	margin-top: 14px;
}
.opt-group-title {
	margin: 0 0 6px;
	color: var(--text-dimmed);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.opt-group:not(:has(.btn)) {
	display: none;
}
#cOpts .btn-block {
	margin-bottom: 6px;
	text-align: left;
}
#cOpts .btn-block .fa {
	width: 18px;
	color: var(--sky-6);
}
#cOpts .btn-primary .fa {
	color: #fff;
}

/* ---- Admin dashboard: system health ---- */

.dash-health .panel-heading .label {
	margin-left: 8px;
	vertical-align: middle;
}
.dash-switches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.dash-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 14px;
	background: var(--paper);
	font-size: 13px;
	color: var(--text);
}
.dash-switch i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green-5);
}
.dash-switch.is-warn {
	background: var(--ember-0);
}
.dash-switch.is-warn i {
	background: var(--ember-5);
}
.dash-jobs {
	margin-bottom: 0;
	font-size: 13px;
}
.dash-jobs td small {
	display: block;
	color: var(--text-dimmed);
	font-size: 12px;
}
.dash-jobs td {
	vertical-align: middle !important;
}
.dash-health .dash-subhead {
	margin-top: 4px;
}
.dash-health .dash-kpis {
	margin-bottom: 0;
}
/* The heading: title, status and time, with the "Scheduled jobs" launcher on the right */
.dash-health .panel-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.dash-health .panel-heading .status-launch {
	margin-left: auto;
}
/*
 * Status launcher: a button that opens a set of checks in a dialog, with a flag saying whether
 * anything in the set needs looking at (is-ok, is-warn, is-bad)
 */
.status-launch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
}
.status-launch-flag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
}
.status-launch-flag.is-ok {
	background: var(--green-0);
	color: var(--green-7);
}
.status-launch-flag.is-warn {
	background: var(--ember-1);
	color: var(--ember-8);
}
.status-launch-flag.is-bad {
	background: var(--crimson-6);
	color: #fff;
}
/* Backlogs: one row of figures divided by hairlines */
/* Every figure has a divider on its left and a line on top: the first row's lines separate the figures
   from the switches above, and a wrapped row's lines separate it from the row before. The grid sits
   15px to the left and clips that strip, so whichever figure starts a row lines up with the panel,
   shows no divider, and its line starts at the panel's edge */
.dash-backlogs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	/* Wrapped rows as tall as the tallest, so the dividers line up row to row */
	grid-auto-rows: 1fr;
	margin: 16px 0 0 -15px;
	clip-path: inset(0 0 0 15px);
	/* The row lines run past the right edge; clip them there without widening the page */
	overflow: clip;
}
/* The same padding all round, so a highlighted figure is exactly as tall as the dividers beside it */
.dash-backlogs > div {
	position: relative;
	padding: 12px 14px;
	border-left: 1px solid var(--border);
}
/* The line on top runs on to the grid's edge (the clip stops it), so a short wrapped row still gets
   a full-width line */
.dash-backlogs > div::before {
	content: "";
	position: absolute;
	top: 0;
	left: -1px;
	width: 100vw;
	height: 1px;
	background: var(--border);
}
.dash-backlogs dt {
	font-size: 12px;
	font-weight: 400;
	color: var(--text-dimmed);
}
.dash-backlogs dd {
	margin: 2px 0 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
}
.dash-backlogs dd.dash-backlog-note {
	font-size: 12px;
	font-weight: 400;
	color: var(--text-dimmed);
}
.dash-backlogs > div.is-warn,
.dash-backlogs > div.is-bad {
	border-left-color: transparent;
}
.dash-backlogs > div.is-warn {
	background: var(--ember-0);
}
.dash-backlogs > div.is-bad {
	background: var(--crimson-0);
}
.dash-backlogs > div.is-warn + div,
.dash-backlogs > div.is-bad + div {
	border-left-color: transparent;
}
.dash-backlogs .is-warn dd:not(.dash-backlog-note) {
	color: var(--ember-7);
}
.dash-backlogs .is-bad dd:not(.dash-backlog-note) {
	color: var(--crimson-6);
}
/* The jobs dialog: both tables side by side, rows to check tinted */
.dash-jobs-dialog {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.dash-jobs tr.is-warn td {
	background: var(--ember-0);
}
.dash-jobs tr.is-bad td {
	background: var(--crimson-0);
}
.dash-jobs-dialog + .dash-note {
	margin: 12px 0 0;
}
@media (max-width: 767px) {
	.dash-jobs-dialog {
		grid-template-columns: 1fr;
	}
	/* Clipped at the panel's edges for the row lines; a highlighted figure's tint reaches 8px left */
	.dash-backlogs {
		margin-left: 0;
		clip-path: inset(0 0 0 -8px);
	}
	.dash-backlogs > div {
		padding-left: 0;
		border-left: 0;
	}
	/* The tint reaches past the text, which stays in line with its column */
	.dash-backlogs > div.is-warn,
	.dash-backlogs > div.is-bad {
		margin-left: -8px;
		padding-left: 8px;
	}
}
/* "Your day" counts, then the recent activity under them */
.dash-myday-head {
	margin: 0;
	padding: 12px 16px 4px;
	border-top: 1px solid var(--border);
	font-size: 14px;
	font-weight: 650;
	color: var(--navy);
}

/* ---- Error pages (401 in the page layout, 404 and errors in the bare error layout) ---- */

.error-body {
	background: var(--paper);
}
.error-body > .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	padding: 32px 16px;
	box-sizing: border-box;
}
.error-body > .container {
	justify-content: center;
}
.error-brand {
	margin-bottom: 4px;
}
/* On the bare error layout the logo and card sit together in the middle of the page */
.error-body .error-page {
	flex: none;
	min-height: 0;
	padding-top: 16px;
}
.error-page {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	width: 100%;
	padding: 24px 0;
	min-height: 60vh;
}
.error-card {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 520px;
	padding: 36px 32px 28px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	text-align: center;
}
.error-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--brand-stripe);
}
.error-code {
	font-size: 72px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--navy-1);
	font-variant-numeric: tabular-nums;
}
/* The general error page shows an icon in Ember instead of a number */
.error-code-icon {
	font-size: 56px;
	color: var(--ember-5);
}
.error-time {
	margin-top: 10px !important;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.error-card h1 {
	margin: 12px 0 8px;
	font-size: 22px;
	font-weight: 650;
	color: var(--navy);
}
.error-card p {
	margin: 0 auto;
	max-width: 400px;
	color: var(--text-dimmed);
}
.error-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}
.error-actions .btn {
	margin: 0;
}
.error-details {
	margin-top: 24px;
	text-align: left;
	font-size: 13px;
}
.error-details summary {
	color: var(--sky-7);
	font-weight: 600;
	cursor: pointer;
	text-align: center;
}
.error-details p {
	max-width: none;
	margin: 12px 0;
}
.error-details dt {
	margin-top: 10px;
	color: var(--navy);
}
.error-details pre {
	max-height: 260px;
	overflow: auto;
	font-size: 12px;
	white-space: pre-wrap;
	word-break: break-word;
}

/* ---- Footer ---- */

.site-footer {
	background: var(--navy);
	color: var(--navy-1);
}

/* ---- Staff list pages: an action toolbar, then a titled history table ---- */

.page-actions {
	margin: 0 0 18px;
}
.section-title {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
	font-size: 16px;
	font-weight: 650;
	color: var(--navy);
}
th.col-actions, td.col-actions {
	width: 48px;
}
.text-nowrap {
	white-space: nowrap;
}

/* ---- Two-list pickers (Edit User Groups, Locations Access; js/ms-picker.js), scoped so the plugin's own
   stylesheet, loaded later with the dialog, doesn't win ---- */

.group-picker-intro {
	margin: 0 0 14px;
	color: var(--text-dimmed);
}
.group-picker-intro strong {
	color: var(--navy);
}
.group-picker .ms-container {
	width: 100%;
	background: none;
	display: flex;
	gap: 16px;
}
.group-picker .ms-container .ms-selectable,
.group-picker .ms-container .ms-selection {
	float: none;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	background: transparent;
}
.group-picker-head {
	margin-bottom: 6px;
}
.group-picker-title {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 650;
	color: var(--navy);
}
.group-picker-title .badge {
	margin-left: 4px;
	background: var(--navy-1);
	color: var(--navy);
	font-weight: 600;
}
.group-picker .ms-selection .group-picker-title .badge {
	background: var(--sky-6);
	color: #fff;
}
.group-picker .ms-container .ms-list {
	height: 280px;
	overflow-x: hidden;
	background: #fff;
	border: 1px solid var(--navy-1);
	border-radius: 6px;
	box-shadow: none;
}
.group-picker .ms-container .ms-list.ms-focus {
	border-color: var(--sky-6);
	box-shadow: 0 0 0 3px rgba(37, 171, 226, 0.2);
}
.group-picker .ms-container .ms-selectable li.ms-elem-selectable,
.group-picker .ms-container .ms-selection li.ms-elem-selection {
	position: relative;
	padding: 7px 30px 7px 12px;
	border-bottom: 1px solid var(--navy-0);
	color: var(--text);
	font-size: 13px;
	line-height: 1.35;
}
/* Edit User Groups: a group that overlaps a current membership can't be added; one that's already
   included through another membership is flagged */
.group-picker .ms-container li .ms-reason {
	display: block;
	font-size: 11px;
	white-space: normal;
}
.group-picker .ms-container .ms-selectable li.ms-elem-selectable.disabled,
.group-picker .ms-container .ms-selectable li.ms-elem-selectable.disabled.ms-hover {
	background: var(--navy-0);
	color: var(--text-dimmed);
	cursor: not-allowed;
}
.group-picker .ms-container li.disabled.ms-hover::after {
	content: none;
}
.group-picker .ms-container .ms-selection li.ms-overlap {
	background: var(--sun-0);
}
.group-picker .ms-container .ms-selection li.ms-overlap .ms-reason {
	color: var(--ember-7);
}

/* The shared dialog is 600px wide; a two-list picker gets more room for long names */
@media (min-width: 900px) {
	#MassyModal .modal-dialog:has(.group-picker-form) {
		width: 820px;
	}
}
/* An arrow on hover shows which way a click moves the group */
.group-picker .ms-container li.ms-hover::after {
	position: absolute;
	right: 12px;
	font-family: FontAwesome;
	content: "\f061";
}
.group-picker .ms-container .ms-selection li.ms-hover::after {
	content: "\f00d";
}
.group-picker .ms-container .ms-selectable li.ms-hover,
.group-picker .ms-container .ms-selection li.ms-hover {
	background: var(--sky-0);
	color: var(--navy);
}
.group-picker-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 16px -15px -15px;
	padding: 12px 15px;
	border-top: 1px solid var(--border);
}
@media (max-width: 520px) {
	.group-picker .ms-container {
		flex-direction: column;
	}
	.group-picker .ms-container .ms-list {
		height: 180px;
	}
}

.group-picker-note {
	margin: -6px 0 14px;
	padding: 8px 10px;
	background: var(--sky-0);
	border-radius: 4px;
	color: var(--navy);
	font-size: 13px;
}

/* ---- Group Access / User Access (access-matrix.phtml, js/access-matrix.js) ---- */

@media (min-width: 1100px) {
	#MassyModal .modal-dialog:has(.acm) {
		width: 1040px;
	}
}
.acm-intro {
	margin: 0 0 14px;
	color: var(--text-dimmed);
}
.acm-intro strong {
	color: var(--navy);
}
.acm-readonly {
	color: var(--ember-7);
	font-weight: 600;
}
.acm-body {
	display: flex;
	gap: 16px;
	min-height: 420px;
}
.acm-nav {
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.acm-only {
	margin: 8px 0;
	font-size: 12px;
	font-weight: normal;
	color: var(--text-dimmed);
}
.acm-only input {
	margin-right: 4px;
}
.acm-mods {
	flex: 1 1 auto;
	max-height: 460px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--navy-1);
	border-radius: 6px;
}
.acm-mods li[hidden] {
	display: none;
}
.acm-mods a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-bottom: 1px solid var(--navy-0);
	color: var(--text);
	font-size: 13px;
	text-decoration: none;
}
.acm-mods a:hover, .acm-mods a:focus {
	background: var(--sky-0);
	color: var(--navy);
}
.acm-mods a.active {
	background: var(--navy);
	color: #fff;
}
.acm-mod-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.acm-own {
	background: var(--sky-6);
}
.acm-own[hidden] {
	display: none;
}
.acm-mods a.active .acm-own {
	background: #fff;
	color: var(--navy);
}
/* A module with unsaved changes */
.acm-mods a.acm-mod-changed .acm-mod-name::after {
	content: " \2022";
	color: var(--ember-5);
	font-weight: 700;
}
.acm-detail {
	flex: 1 1 auto;
	min-width: 0;
	max-height: 520px;
	overflow-y: auto;
}
.acm-empty {
	margin: 40px 0;
	color: var(--text-dimmed);
	text-align: center;
}
.acm-module h3 {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 650;
	color: var(--navy);
}
.acm-module h3 small {
	margin-left: 6px;
	font-size: 12px;
	font-weight: normal;
}
.acm-mod-desc {
	margin: 0 0 8px;
	color: var(--text-dimmed);
	font-size: 13px;
}
.acm-table {
	margin-bottom: 0;
}
.acm-table > thead > tr > th {
	font-size: 12px;
	color: var(--text-dimmed);
	font-weight: 600;
	border-bottom-width: 1px;
}
.acm-table > tbody > tr > td {
	vertical-align: middle;
	font-size: 13px;
}
.acm-table td small {
	display: block;
	color: var(--text-dimmed);
	font-size: 12px;
}
.acm-table tr.acm-changed > td {
	background: var(--sun-0);
}
.acm-chip {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.4;
}
.acm-chip-allow { background: var(--green-0); color: var(--green-8); }
.acm-chip-deny { background: var(--crimson-0); color: var(--crimson-8); }
.acm-chip-mixed { background: var(--ember-0); color: var(--ember-8); }
.acm-chip-none { background: var(--navy-0); color: var(--text-dimmed); }
/* Not set | Allow | Deny */
.acm-seg {
	display: inline-flex;
	border: 1px solid var(--navy-1);
	border-radius: 6px;
	overflow: hidden;
	white-space: nowrap;
}
.acm-seg label {
	margin: 0;
	font-weight: normal;
	cursor: pointer;
}
.acm-seg label + label {
	border-left: 1px solid var(--navy-1);
}
.acm-seg input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.acm-seg span {
	display: block;
	padding: 4px 10px;
	font-size: 12px;
	color: var(--text);
}
.acm-seg label:hover span {
	background: var(--sky-0);
}
.acm-seg input:focus-visible + span {
	outline: 2px solid var(--sky-6);
	outline-offset: -2px;
}
.acm-seg-none input:checked + span { background: var(--navy-1); color: var(--navy); font-weight: 600; }
.acm-seg-allow input:checked + span { background: var(--green-7); color: #fff; font-weight: 600; }
.acm-seg-deny input:checked + span { background: var(--crimson-6); color: #fff; font-weight: 600; }
.acm-seg input:disabled + span {
	cursor: default;
	opacity: 0.75;
}
.acm-res {
	font-weight: 600;
	white-space: nowrap;
}
.acm-res-allow { color: var(--green-7); }
.acm-res-deny { color: var(--crimson-6); }
.acm-res-mixed { color: var(--ember-7); }
.acm-res-none { color: var(--text-dimmed); }
.acm-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 16px -15px -15px;
	padding: 12px 15px;
	border-top: 1px solid var(--border);
}
.acm-status {
	margin-right: auto;
	color: var(--text-dimmed);
	font-size: 13px;
}
.acm-status.acm-warn {
	color: var(--ember-7);
	font-weight: 600;
}
@media (max-width: 760px) {
	.acm-body {
		flex-direction: column;
	}
	.acm-nav {
		flex-basis: auto;
	}
	.acm-mods {
		max-height: 200px;
	}
}

/* ---- FlatLab leftovers (idl-style.css, bootstrap-reset.css, plugin defaults) ---- */

::selection { background: var(--sky-6); color: #fff; }
::-moz-selection { background: var(--sky-6); color: #fff; }

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
	background-color: var(--sky-6);
	border-color: var(--sky-6);
}

.ui-sortable li.list-primary { border-left-color: var(--sky-6); }

.go-top i { color: var(--navy); }

/* Date pickers: selected days and preset ranges */
.daterangepicker td.in-range { background: var(--sky-0); }
.daterangepicker td.active, .daterangepicker td.active:hover,
.datepicker td.active, .datepicker td.active:hover, .datepicker td.active.active, .datepicker td.active.active:hover,
.datepicker td span.active, .datepicker td span.active:hover, .datepicker td span.active.active,
.datetimepicker table tr td.active, .datetimepicker table tr td.active:hover, .datetimepicker table tr td.active.active {
	background: var(--sky-6);
	border-color: var(--sky-6);
	color: #fff;
}
.daterangepicker .input-mini.active { border-color: var(--sky-6); }
.daterangepicker .ranges li { color: var(--sky-7); }
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
	background: var(--sky-6);
	border-color: var(--sky-6);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
}