@charset "UTF-8";
/*
 * MagFaces Blue - eMoney USA brand theme for Bootstrap 5.3.8
 *
 * Load order (declared via @ResourceDependency): bootstrap-5.3.8.css -> this -> the shared MagFaces sheet
 * Because this sheet loads AFTER stock Bootstrap, plain source-order specificity
 * wins; no !important is required.
 *
 * This file contains ONLY theme decisions (color, typography, shape).
 * Structural rhythm and UX fixes shared by all editions live in
 * the shared MagFaces sheet; that sheet consumes the --em-* contract tokens which
 * every edition must define (see "Shared component tokens" below).
 *
 * Palette sourced from the eMoney USA Figma design tokens (Loan-portal-design/
 * design_handoff_emoney_jsf/tokens.css). Brand primary is eMoney cyan #39BBD8.
 *
 * Scope: light theme only. Dark mode ([data-bs-theme=dark]) is not themed here.
 * Typography: sets Inter as the brand body font family.
 *
 * 3.1.0 - one type scale and one control height for every component:
 *   12/700 caps eyebrows and table heads, 14/500 labels and choice text,
 *   14/400 control values, 14/600 buttons, 15/700 card headers, 13/400 meta.
 *   Every control and button is 32px (5px + a whole-pixel 20px line box + 5px
 *   + 2px border); fractional line heights rounded per component and left
 *   fields, selects and buttons a pixel apart.
 */

/* Inter — self-hosted (SIL OFL 1.1, see fonts/inter/LICENSE.txt) */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url("/javax.faces.resource/inter/Inter-Regular.ttf.jsf?ln=fonts") format('truetype');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url("/javax.faces.resource/inter/Inter-Medium.ttf.jsf?ln=fonts") format('truetype');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url("/javax.faces.resource/inter/Inter-SemiBold.ttf.jsf?ln=fonts") format('truetype');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url("/javax.faces.resource/inter/Inter-Bold.ttf.jsf?ln=fonts") format('truetype');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	src: url("/javax.faces.resource/inter/Inter-ExtraBold.ttf.jsf?ln=fonts") format('truetype');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 900;
	src: url("/javax.faces.resource/inter/Inter-Black.ttf.jsf?ln=fonts") format('truetype');
}

:root {
	/* ---- eMoney brand palette (from Figma tokens) ---- */
	--em-primary: rgb(57, 187, 216);
	--em-primary-rgb: 57, 187, 216;
	--em-primary-50: rgb(235, 247, 251);
	--em-primary-100: rgb(221, 242, 248);
	--em-primary-200: rgb(193, 231, 242);
	--em-primary-400: rgb(114, 202, 225);
	--em-primary-600: rgb(47, 157, 182);
	--em-primary-700: rgb(36, 126, 147);
	--em-primary-800: rgb(23, 92, 107);
	--em-primary-900: rgb(12, 60, 71);
	--em-on-primary: rgb(16, 36, 40);
	/* dark text for use on cyan fills */
	--em-success: rgb(12, 200, 99);
	--em-success-rgb: 12, 200, 99;
	/* Figma theme defines success-500 as #61C500 / rgb(97,197,0) — a yellow-green.
	   Using the semantic --color-success #0CC863 instead. Swap this variable to revert. */
	--em-success-600: rgb(9, 159, 79);
	--em-success-800: rgb(6, 96, 48);
	--em-success-50: rgb(230, 248, 238);
	--em-success-200: rgb(182, 228, 203);
	--em-info: rgb(76, 158, 255);
	--em-info-rgb: 76, 158, 255;
	--em-info-600: rgb(61, 132, 217);
	--em-info-800: rgb(31, 77, 131);
	--em-info-50: rgb(235, 244, 255);
	--em-info-200: rgb(194, 221, 255);
	--em-warning: rgb(248, 146, 19);
	--em-warning-rgb: 248, 146, 19;
	--em-warning-600: rgb(209, 123, 14);
	--em-warning-800: rgb(124, 70, 3);
	--em-warning-50: rgb(255, 243, 232);
	--em-warning-200: rgb(255, 217, 187);
	--em-danger: rgb(254, 100, 84);
	--em-danger-rgb: 254, 100, 84;
	--em-danger-600: rgb(217, 81, 68);
	--em-danger-700: rgb(176, 63, 53);
	--em-danger-800: rgb(130, 43, 36);
	--em-danger-50: rgb(255, 239, 237);
	--em-danger-200: rgb(255, 205, 197);
	--em-body-bg: #E9EDF0;
	--em-body-color: rgb(36, 46, 51);
	--em-body-color-rgb: 36, 46, 51;
	--em-heading: rgb(27, 60, 67);
	--em-border: var(--em-gray-300);
	--em-link: rgb(47, 157, 182);
	/* primary-600, AA on white */
	--em-link-hover: rgb(36, 126, 147);
	/* primary-700 */

	/* ---- Neutral ramp (every grey in this sheet resolves to one of these) ---- */
	--em-gray-25: #FAFBFC;
	/* enabled field fill */
	--em-gray-50: #F1F3F5;
	/* table head, hover */
	--em-gray-100: #E7EAEE;
	/* disabled field fill */
	--em-gray-200: #E1E5EA;
	/* hairline */
	--em-gray-300: #D6DBE1;
	/* disabled hairline */
	--em-gray-400: #B4BCC4;
	/* check borders */
	--em-gray-500: #6B7280;
	/* muted / disabled text */
	--em-gray-700: #334049;
	/* control values */
	--em-gray-800: #1B2A33;
	/* labels */

	/* ---- Spacing grid (4/6/8/12/16/20/24) ---- */
	--em-space-1: 0.25rem;
	--em-space-2: 0.375rem;
	--em-space-3: 0.5rem;
	--em-space-4: 0.75rem;
	--em-space-5: 1rem;
	--em-space-6: 1.25rem;
	--em-space-7: 1.5rem;

	/* ---- Type scale ---- */
	--em-font-eyebrow: 0.75rem;
	/* in-card h5/h6, table heads */
	--em-font-meta: 0.8125rem;
	/* validation text, table chrome */
	--em-font-value: 0.875rem;
	/* control values, buttons, choice text */
	--em-font-label: 0.875rem;
	/* labels: same size as the value, separated by weight and colour */
	--em-font-header: 0.9375rem;
	/* card headers, modal titles */

	/* ---- Shared component tokens (the --em-* contract; every edition defines these) ---- */
	--em-surface: #fff;
	--em-hairline: var(--em-gray-200);
	--em-field-bg: var(--em-gray-25);
	--em-field-border: var(--em-gray-200);
	--em-field-border-width: 1px;
	--em-control-radius: 0.5rem;
	/* 8px - buttons, inputs, formControlLink */
	--em-check-radius: 0.25rem;
	/* a 17px box cannot take the control radius */
	/* One step below the label that names it, so size joins colour and weight in
	   separating the two. Control height is unaffected: it comes from the line
	   height and padding, not the font size. */
	--em-control-font-size: var(--em-font-value);
	--em-control-line-height: 1.25rem;
	/* whole pixels: 13px x 1.35 rounded per component */
	/* Control height = 2 x padding-y + line-height + 2 x border-width.
	   7 + 20 + 7 + 2 = 36px, all whole pixels at a 16px root. */
	--em-field-padding-y: 0.4375rem;
	/* Chrome controls: DataTables length and filter, pagination. 5 + 20 + 5 + 2 = 32px. */
	--em-field-padding-y-sm: 0.3125rem;
	/* Action buttons carry more interior space than a field: 1px more on each
	   edge, so 38px against 36px. The shared sheet adds this to the field
	   padding, so one number moves every button and a segmented control opts
	   out by zeroing it. Keep the result under the 48px navbar brand height,
	   or the navbar grows. */
	--em-btn-padding-y-delta: 1px;
	--em-field-padding-x: 0.5625rem;
	--em-focus-ring: 0 0 0 3px rgba(var(--em-primary-rgb), 0.22);
	--em-field-focus-border: var(--em-primary);
	--em-card-body-padding: var(--em-space-4) var(--em-space-5) var(--em-space-5);
	--em-card-body-padding-after-header: var(--em-space-4);
	--em-card-header-padding: var(--em-space-4) var(--em-space-5);
	--em-form-label-gap: var(--em-space-2);
	/* Two lines of text in a control: derived so it tracks the control tokens */
	--em-textarea-min-height: calc(2 * var(--em-control-line-height) + 2 * var(--em-field-padding-y) + 2 * var(--em-field-border-width));
	--em-check-size: 1.0625rem;
	--em-check-disabled-opacity: 1;
	/* disabled checks are filled, not faded */
	--em-switch-width: 2.25rem;
	--em-switch-height: 1.25rem;
	/* Disabled fields keep the enabled geometry and darken two steps */
	--em-field-disabled-bg: var(--em-gray-100);
	--em-field-disabled-border: var(--em-gray-300);
	--em-field-disabled-border-width: var(--em-field-border-width);
	--em-field-disabled-padding-y: var(--em-field-padding-y);
	--em-field-disabled-color: var(--em-gray-500);
	/* Labels: one size everywhere; disabled shifts weight and colour only */
	--em-form-label-font-size: var(--em-font-label);
	--em-form-label-font-weight: 500;
	--em-form-label-color: var(--em-gray-800);
	--em-form-label-disabled-font-size: var(--em-font-label);
	--em-form-label-disabled-font-weight: 500;
	--em-form-label-disabled-color: var(--em-gray-500);
	/* Headings that sit beside form labels share the label weight */
	--em-card-header-font-weight: var(--em-form-label-font-weight);
	/* selectOneButtons checked state */
	--em-checked-color: #fff;
	--em-checked-bg: var(--em-primary);
	--em-checked-border: var(--em-primary);

	/* ---- Map Bootstrap theme variables onto the eMoney palette ---- */
	--bs-primary: var(--em-primary);
	--bs-primary-rgb: var(--em-primary-rgb);
	--bs-success: var(--em-success);
	--bs-success-rgb: var(--em-success-rgb);
	--bs-info: var(--em-info);
	--bs-info-rgb: var(--em-info-rgb);
	--bs-warning: var(--em-warning);
	--bs-warning-rgb: var(--em-warning-rgb);
	--bs-danger: var(--em-danger);
	--bs-danger-rgb: var(--em-danger-rgb);
	/* Subtle / emphasis trios (drive .alert-*, .list-group-item-*, .bg-*-subtle, .text-*-emphasis) */
	--bs-primary-text-emphasis: var(--em-primary-800);
	--bs-primary-bg-subtle: var(--em-primary-50);
	--bs-primary-border-subtle: var(--em-primary-200);
	--bs-success-text-emphasis: var(--em-success-800);
	--bs-success-bg-subtle: var(--em-success-50);
	--bs-success-border-subtle: var(--em-success-200);
	--bs-info-text-emphasis: var(--em-info-800);
	--bs-info-bg-subtle: var(--em-info-50);
	--bs-info-border-subtle: var(--em-info-200);
	--bs-warning-text-emphasis: var(--em-warning-800);
	--bs-warning-bg-subtle: var(--em-warning-50);
	--bs-warning-border-subtle: var(--em-warning-200);
	--bs-danger-text-emphasis: var(--em-danger-800);
	--bs-danger-bg-subtle: var(--em-danger-50);
	--bs-danger-border-subtle: var(--em-danger-200);
	/* Body, headings, borders */
	--bs-body-bg: var(--em-body-bg);
	--bs-body-color: var(--em-body-color);
	--bs-body-color-rgb: var(--em-body-color-rgb);
	--bs-heading-color: var(--em-heading);
	--bs-border-color: var(--em-border);
	/* Text on a card surface. Consumed by the shared MagFaces sheet `.card`; Bootstrap's
	   own --bs-card-color is an empty placeholder and cannot be relied on. */
	--em-card-color: var(--em-body-color);
	/* Secondary text (subtitles, captions, muted labels) */
	--em-secondary-color: #5E666A;
	--bs-secondary-color: var(--em-secondary-color);
	--bs-secondary-color-rgb: 94, 102, 106;
	/* Typography - eMoney brand font (Inter) */
	--bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bs-body-line-height: 1.4;
	/* Links (rgb triplets must be literal; keep in sync with --em-link / --em-link-hover) */
	--bs-link-color: var(--em-link);
	--bs-link-color-rgb: 47, 157, 182;
	--bs-link-hover-color: var(--em-link-hover);
	--bs-link-hover-color-rgb: 36, 126, 147;
	--bs-form-invalid-color: var(--em-danger);
	--bs-form-invalid-border-color: var(--em-danger);
	/* Focus ring (utility + form-check/focus-visible) */
	--bs-focus-ring-color: rgba(var(--em-primary-rgb), 0.25);
	/* Corner radii aligned to eMoney radius tokens (6/8/12 px) */
	--bs-border-radius: 0.5rem;
	--bs-border-radius-sm: 0.375rem;
	--bs-border-radius-lg: 0.75rem;
}

/* ===========================================================================
 * Cards
 * Hairline plus a two-stop shadow: a single 24px blur lost its edge at zoom.
 * ======================================================================== */

.card {
	--bs-card-bg: var(--em-surface);
	border: 1px solid var(--em-hairline);
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
}

.card-header {
	background-color: var(--em-surface);
	border-bottom: 1px solid var(--em-hairline);
	font-size: var(--em-font-header);
	line-height: var(--em-control-line-height);
	color: var(--em-gray-800);
}

.card-header .magfaces-awesomeIcon {
	color: var(--em-primary);
	margin-right: 0.125rem;
}

/* In-card headings were 1.25rem, louder than the card header above them */
.card-body :is(h5, h6) {
	font-size: var(--em-font-eyebrow);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--em-gray-500);
	margin-bottom: var(--em-space-3);
}

.card-body :is(h5, h6).mt-3 {
	margin-top: var(--em-space-6) !important;
}

.card-body {
	font-size: var(--em-control-font-size);
	color: var(--em-gray-700);
}

.card-body p {
	margin-bottom: var(--em-space-4);
}

.card-body hr {
	margin: var(--em-space-5) 0;
	border-top-color: var(--em-gray-200);
	opacity: 1;
}

/* ===========================================================================
 * Buttons
 * Bootstrap compiles button colors from Sass, so remapping :root variables is
 * not enough - each variant below re-points its per-component variables.
 * ======================================================================== */

/* Brand button typography; sizing derives from the shared control tokens */
.btn {
	font-size: var(--em-control-font-size);
	font-weight: 600;
	line-height: var(--em-control-line-height);
	--bs-btn-padding-x: var(--em-space-5);
}

/* White text on cyan per design comp. ~2.1:1 contrast — does not meet WCAG AA. */
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--em-primary);
	--bs-btn-border-color: var(--em-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--em-primary-600);
	--bs-btn-hover-border-color: var(--em-primary-600);
	--bs-btn-focus-shadow-rgb: var(--em-primary-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--em-primary-700);
	--bs-btn-active-border-color: var(--em-primary-700);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--em-primary);
	--bs-btn-disabled-border-color: var(--em-primary);
	border-color: transparent;
}

.btn-outline-primary {
	--bs-btn-color: var(--em-primary-700);
	--bs-btn-border-color: var(--em-primary);
	--bs-btn-hover-color: var(--em-on-primary);
	--bs-btn-hover-bg: var(--em-primary);
	--bs-btn-hover-border-color: var(--em-primary);
	--bs-btn-focus-shadow-rgb: var(--em-primary-rgb);
	--bs-btn-active-color: var(--em-on-primary);
	--bs-btn-active-bg: var(--em-primary);
	--bs-btn-active-border-color: var(--em-primary);
	--bs-btn-disabled-color: var(--em-primary-700);
	--bs-btn-disabled-border-color: var(--em-primary);
}

.btn-success {
	--bs-btn-bg: var(--em-success);
	--bs-btn-border-color: var(--em-success);
	--bs-btn-hover-bg: var(--em-success-600);
	--bs-btn-hover-border-color: var(--em-success-600);
	--bs-btn-active-bg: var(--em-success-800);
	--bs-btn-active-border-color: var(--em-success-800);
	--bs-btn-disabled-bg: var(--em-success);
	--bs-btn-disabled-border-color: var(--em-success);
	--bs-btn-focus-shadow-rgb: var(--em-success-rgb);
}

.btn-danger {
	--bs-btn-bg: var(--em-danger);
	--bs-btn-border-color: var(--em-danger);
	--bs-btn-hover-bg: var(--em-danger-600);
	--bs-btn-hover-border-color: var(--em-danger-600);
	--bs-btn-active-bg: var(--em-danger-700);
	--bs-btn-active-border-color: var(--em-danger-700);
	--bs-btn-disabled-bg: var(--em-danger);
	--bs-btn-disabled-border-color: var(--em-danger);
	--bs-btn-focus-shadow-rgb: var(--em-danger-rgb);
}

/* Bootstrap defaults warning/info to dark text; the eMoney comp uses white. */
.btn-warning {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--em-warning);
	--bs-btn-border-color: var(--em-warning);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--em-warning-600);
	--bs-btn-hover-border-color: var(--em-warning-600);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--em-warning-800);
	--bs-btn-active-border-color: var(--em-warning-800);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--em-warning);
	--bs-btn-disabled-border-color: var(--em-warning);
	--bs-btn-focus-shadow-rgb: var(--em-warning-rgb);
}

.btn-info {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--em-info);
	--bs-btn-border-color: var(--em-info);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--em-info-600);
	--bs-btn-hover-border-color: var(--em-info-600);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--em-info-800);
	--bs-btn-active-border-color: var(--em-info-800);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--em-info);
	--bs-btn-disabled-border-color: var(--em-info);
	--bs-btn-focus-shadow-rgb: var(--em-info-rgb);
}

/* btn-light is nearly white; give it a visible border so it reads on white
   cards.  Text is a mid-dark slate — softer than the body color (#242E33)
   which reads harsh on the pale background, but darker than secondary
   (#5E666A) which reads disabled. */
.btn-light {
	--bs-btn-color: #3D4E56;
	--bs-btn-hover-color: var(--em-body-color);
	--bs-btn-active-color: var(--em-body-color);
	--bs-btn-disabled-color: var(--bs-secondary-color);
	--bs-btn-border-color: var(--em-hairline);
	--bs-btn-hover-border-color: #cdd3da;
	--bs-btn-active-border-color: #bfc5cc;
}

.btn-link {
	--bs-btn-color: var(--em-link);
	--bs-btn-hover-color: var(--em-link-hover);
	--bs-btn-active-color: var(--em-link-hover);
}

/* ===========================================================================
 * Forms
 * ======================================================================== */

/* Field colors; chrome (border/radius/padding/font) comes from the shared tokens */
.form-label {
	line-height: 1.3;
	margin-bottom: var(--em-space-2);
}

/* The label names the value, so the label is the darker of the two. The value
   sits one step lighter: at 400 against a 500 label, colour carries the
   hierarchy alongside weight, and Inter's large x-height stops reading as
   heavy at the same near-black as its label. */
.form-control,
.form-select,
.magfaces-input-textarea,
.magfaces-form-control-link {
	font-weight: 400;
	letter-spacing: 0;
	color: var(--em-gray-700);
}

.form-control::placeholder {
	color: var(--em-gray-500);
}

.form-control:focus,
.form-select:focus {
	background-color: #fff;
}

/* formControlLink reads as a value in a field, not as body copy */
.magfaces-form-control-link a {
	font-size: var(--em-control-font-size);
	text-decoration: none;
}

.magfaces-form-control-link a:hover {
	text-decoration: underline;
}

/* The renderer emits a <span>, not an <a>, when disabled */
.magfaces-form-control-link-disabled span {
	color: var(--em-field-disabled-color);
}

/* Checks: hairline border, brand fill when selected. The unchecked rule is
   scoped :not(:checked) so it cannot outrank the shared sheet's checked rule */
.form-check-input:not(:checked) {
	background-color: var(--em-field-bg);
	border-color: var(--em-gray-400);
}

.form-check-input:disabled:not(:checked) {
	opacity: 1;
	background-color: var(--em-field-disabled-bg);
	border-color: var(--em-gray-300);
}

.form-check-input:checked:disabled {
	background-color: var(--em-gray-400);
	border-color: var(--em-gray-400);
}

.form-switch>.form-check-input:disabled {
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23B4BCC4'/%3e%3c/svg%3e");
}

/* Choice text is content you pick, so it takes the value weight */
.form-check-label {
	font-size: var(--em-form-label-font-size);
	font-weight: 400;
	color: var(--em-gray-800);
	line-height: var(--em-control-line-height);
}

/* Validation text sits below the value on the meta scale */
.invalid-feedback,
.magfaces-invalid-feedback {
	font-size: var(--em-font-meta);
	line-height: 1rem;
	margin-top: var(--em-space-1);
}

/* Labels of disabled fields recede: same size, one weight down, muted */
.magfaces-pad:has(> .form-control:disabled)>.magfaces-form-label,
.magfaces-pad:has(> .form-select:disabled)>.magfaces-form-label,
.magfaces-pad:has(> .magfaces-form-control-link-disabled)>.magfaces-form-label,
.magfaces-pad:has(.magfaces-selectOneRadio .form-check-input:disabled)>.magfaces-form-label,
.magfaces-pad:has(.magfaces-selectOneButtons .btn-check:disabled)>.magfaces-form-label {
	font-size: var(--em-form-label-disabled-font-size);
	font-weight: var(--em-form-label-disabled-font-weight);
	color: var(--em-form-label-disabled-color);
}

/* Disabled choice text: colour carries the state, weight never increases */
.form-check-input:disabled~.form-check-label,
.form-check-input:disabled~.magfaces-form-label {
	font-weight: 400;
	color: var(--em-field-disabled-color);
}

/* selectOneButtons is a segmented control: one hairline rect, cyan selection.
   Bootstrap's .btn-check:checked + .btn paints from the ACTIVE channel, so the
   selection has to be set there or --bs-btn-bg keeps winning. */
.magfaces-selectOneButtons>.magfaces-btn-label {
	--bs-btn-bg: var(--em-field-bg);
	--bs-btn-color: var(--em-gray-800);
	--bs-btn-hover-bg: var(--em-gray-50);
	--bs-btn-hover-color: var(--em-gray-800);
	--bs-btn-border-color: var(--em-gray-200);
	--bs-btn-hover-border-color: var(--em-gray-200);
	--bs-btn-active-bg: var(--em-checked-bg);
	--bs-btn-active-color: var(--em-checked-color);
	--bs-btn-active-border-color: var(--em-checked-border);
	--bs-btn-disabled-bg: var(--em-field-disabled-bg);
	--bs-btn-disabled-color: var(--em-gray-500);
	--bs-btn-disabled-border-color: var(--em-gray-300);
	font-weight: 400;
}

/* ===========================================================================
 * Navigation
 * ======================================================================== */

.nav {
	--bs-nav-link-color: var(--em-link);
	--bs-nav-link-hover-color: var(--em-link-hover);
}

.nav-pills {
	--bs-nav-pills-link-active-color: var(--em-on-primary);
	--bs-nav-pills-link-active-bg: var(--em-primary);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	color: var(--em-primary-700);
}

.nav-underline {
	--bs-nav-underline-link-active-color: var(--em-primary-700);
}

.navbar.bg-white {
	border-bottom: 1px solid var(--em-hairline);
	/* 8 + 48 brand link + 8 + 1 border = 65px. Any taller item in the bar
	   raises the content box and the navbar with it. */
	--bs-navbar-padding-y: var(--em-space-3);
	--bs-navbar-active-color: var(--em-primary-700);
	--bs-navbar-hover-color: var(--em-primary-600);
}

.magfaces.navbar .nav-link {
	font-size: var(--em-control-font-size);
	font-weight: 500;
	padding-left: var(--em-space-4);
	padding-right: var(--em-space-4);
}

.navbar-brand {
	color: var(--em-primary);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	margin-right: var(--em-space-6);
}

.navbar-brand:hover,
.navbar-brand:focus {
	color: var(--em-primary-700);
}

/* ===========================================================================
 * Other Bootstrap components
 * ======================================================================== */

.pagination {
	--bs-pagination-padding-y: var(--em-field-padding-y-sm);
	--bs-pagination-padding-x: var(--em-space-4);
	--bs-pagination-font-size: var(--em-font-meta);
	line-height: var(--em-control-line-height);
	--bs-pagination-color: var(--em-link);
	--bs-pagination-hover-color: var(--em-link-hover);
	--bs-pagination-focus-color: var(--em-link-hover);
	--bs-pagination-focus-box-shadow: var(--em-focus-ring);
	--bs-pagination-active-color: #fff;
	--bs-pagination-active-bg: var(--em-primary);
	--bs-pagination-active-border-color: var(--em-primary);
}

.dropdown-menu {
	--bs-dropdown-link-active-color: var(--em-on-primary);
	--bs-dropdown-link-active-bg: var(--em-primary);
}

.list-group {
	--bs-list-group-active-color: var(--em-on-primary);
	--bs-list-group-active-bg: var(--em-primary);
	--bs-list-group-active-border-color: var(--em-primary);
}

.accordion {
	--bs-accordion-active-color: var(--em-primary-800);
	--bs-accordion-active-bg: var(--em-primary-50);
	--bs-accordion-btn-focus-box-shadow: var(--em-focus-ring);
	/* Chevron icon tinted to eMoney primary when expanded */
	--bs-accordion-btn-active-icon:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23247e93'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.progress {
	--bs-progress-bar-bg: var(--em-primary);
}

/* Contrast text on cyan fill (badges/utility) */
.text-bg-primary {
	color: var(--em-on-primary) !important;
}

/* ===========================================================================
 * Tables
 * Bootstrap derives --bs-table-bg from --bs-body-bg and defaults its text to
 * black, so cells painted page grey inside a card and swallowed the stripe.
 * ======================================================================== */

.table {
	--bs-table-bg: var(--em-surface);
	--bs-table-color: var(--em-body-color);
	--bs-table-border-color: var(--em-gray-200);
	--bs-table-striped-bg: var(--em-gray-25);
	--bs-table-striped-color: var(--em-body-color);
}

.table>thead {
	border-bottom: 1px solid var(--em-gray-200);
}

.table>thead>tr>th {
	padding: var(--em-space-3) var(--em-space-4);
	background-color: var(--em-gray-50);
	font-size: var(--em-font-eyebrow);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--em-gray-500);
}

.table>tbody>tr>td {
	padding: var(--em-space-3) var(--em-space-4);
	font-size: var(--em-control-font-size);
	vertical-align: middle;
}

/* DataTables chrome on the label scale */
div.dataTables_wrapper.dt-bootstrap5 :is(.dataTables_length, .dataTables_filter, .dataTables_info) {
	font-size: var(--em-font-meta);
	color: var(--em-gray-500);
}

/* ===========================================================================
 * Modals and messages
 * ======================================================================== */

.modal-content {
	border: 1px solid var(--em-hairline);
	border-radius: 0.75rem;
}

.modal-header {
	padding: var(--em-space-4) var(--em-space-5);
	border-bottom: 1px solid var(--em-hairline);
}

.modal-title {
	font-size: var(--em-font-header);
	font-weight: var(--em-card-header-font-weight);
}

.modal-body {
	padding: var(--em-space-5);
	font-size: var(--em-control-font-size);
}

.magfaces.alert,
.magfaces.toast {
	padding: var(--em-space-3) var(--em-space-4);
	border-radius: var(--em-control-radius);
	font-size: var(--em-control-font-size);
}

/* mf:iconicBullet renders its heading as <strong>; keep it on the card-header
 * weight so the customer-facing components match the form controls */
.magfaces-iconicBullet strong {
	font-weight: var(--em-card-header-font-weight);
}

/* ===========================================================================
 * Footer (mf:footer)
 * ======================================================================== */

.magfaces-footer {
	background-color: var(--em-primary);
	color: var(--em-on-primary);
}

.magfaces-footer a {
	color: var(--em-on-primary);
	text-decoration: underline;
}

.magfaces-footer a:hover {
	color: var(--em-primary-800);
}

.magfaces-footer :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.magfaces-hero-wordmark {
	color: var(--em-primary);
}

.magfaces-nav-list-title {
	color: var(--em-primary);
}

.magfaces-nav-list .nav-link {
	color: var(--em-body-color);
}

.magfaces-nav-list .nav-link:hover {
	color: var(--em-primary);
}

.magfaces-hero-card {
	border-radius: 3rem;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.magfaces-hero-heading {
	color: #fff;
}