/*
 * HSI Portal — shared shell stylesheet.
 * Loaded on every portal request (including the logged-out login view).
 * Defines every design token as a CSS custom property on
 * body.hsi-portal-template — every other portal stylesheet consumes these
 * tokens instead of hardcoding brand colors. Also owns: page shell/container
 * layout, header, footer-chrome hiding, login card, the cross-cutting form
 * primitives (field/label/button/banner base rules), and the scrollbar.
 *
 * Font files are self-hosted SIL OFL webfonts. If assets/fonts/*.woff2 are
 * not present yet, these @font-face rules simply fail to match and the
 * font-family fallback stack below takes over — drop the woff2 files in
 * later and they'll pick up automatically, no CSS change needed.
 */

/* ---------------------------------------------------------------------- */
/* Fonts (self-hosted — do not load from Google's CDN)                    */
/* ---------------------------------------------------------------------- */

@font-face {
	font-family: 'Lato';
	src: url('../fonts/lato-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url('../fonts/lato-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Domine';
	src: url('../fonts/domine-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Domine';
	src: url('../fonts/domine-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Domine';
	src: url('../fonts/domine-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------- */
/* Design tokens                                                          */
/* ---------------------------------------------------------------------- */

body.hsi-portal-template {
	--hsi-font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hsi-font-head: 'Domine', Georgia, 'Times New Roman', serif;

	/* Brand */
	--hsi-navy: #15188d;
	--hsi-red: #dc0929;
	--hsi-blue: #3480c3;
	--hsi-charcoal: #202020;
	--hsi-white: #ffffff;

	/* Tints */
	--hsi-blue-tint: #eaf2fa;
	--hsi-red-tint: #fdecee;
	--hsi-neutral-tint: #eef1f5;
	--hsi-navy-tint: #e6e7f7;

	/* Calendar stage palette — keys match
	   HSI_Portal_Calendar_Fields::color_key_for_order() / status_colors(). */
	--hsi-stage-deposit_received-bg: #f97316;
	--hsi-stage-deposit_received-fg: #431407;
	--hsi-stage-class_scheduled-bg: #15803d;
	--hsi-stage-class_scheduled-fg: #ffffff;
	--hsi-stage-needs_reschedule-bg: #dc0929;
	--hsi-stage-needs_reschedule-fg: #ffffff;
	--hsi-stage-class_completed-bg: #7c3aed;
	--hsi-stage-class_completed-fg: #ffffff;
	--hsi-stage-balance_paid_in_full-bg: #3480c3;
	--hsi-stage-balance_paid_in_full-fg: #0c2e4e;
	--hsi-stage-certifications_issued-bg: #15188d;
	--hsi-stage-certifications_issued-fg: #ffffff;
	--hsi-stage-cancelled-bg: #e5e7eb;
	--hsi-stage-cancelled-fg: #374151;
	--hsi-stage-new_inquiry-bg: #eef1f5;
	--hsi-stage-new_inquiry-fg: #374151;
	--hsi-stage-quote_provided-bg: #dbe7f3;
	--hsi-stage-quote_provided-fg: #0c2e4e;
	--hsi-stage-lost-bg: #e5e7eb;
	--hsi-stage-lost-fg: #6b7280;

	/* Scale */
	--hsi-shell-max: 1200px;
	--hsi-form-max: 800px;
	--hsi-radius: 6px;
	--hsi-radius-lg: 12px;
	--hsi-space-1: 4px;
	--hsi-space-2: 8px;
	--hsi-space-3: 12px;
	--hsi-space-4: 16px;
	--hsi-space-6: 24px;
	--hsi-space-8: 32px;
	--hsi-header-height: 64px;

	font-family: var(--hsi-font-body);
	color: var(--hsi-charcoal);
}

body.hsi-portal-template h1,
body.hsi-portal-template h2,
body.hsi-portal-template h3,
body.hsi-portal-template .hsi-portal-header__title {
	font-family: var(--hsi-font-head);
	color: var(--hsi-navy);
}

@media (prefers-reduced-motion: reduce) {
	body.hsi-portal-template * {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

/* ---------------------------------------------------------------------- */
/* Scroll fix — no portal wrapper should trap its own scroll region; the   */
/* document body scrolls normally everywhere.                             */
/* ---------------------------------------------------------------------- */

body.hsi-portal-template,
body.hsi-portal-template html {
	height: auto;
	min-height: 100%;
	overflow: visible;
}

body.hsi-portal-template .hsi-portal-wrap,
body.hsi-portal-template .hsi-portal-shell {
	height: auto;
	max-height: none;
	overflow: visible;
}

/* Custom scrollbar — light-blue thumb on a light-gray track, no red. */
body.hsi-portal-template {
	scrollbar-width: thin;
	scrollbar-color: var(--hsi-blue) var(--hsi-neutral-tint);
}

body.hsi-portal-template::-webkit-scrollbar {
	width: 12px;
}

body.hsi-portal-template::-webkit-scrollbar-track {
	background: var(--hsi-neutral-tint);
}

body.hsi-portal-template::-webkit-scrollbar-thumb {
	background-color: var(--hsi-blue);
	border-radius: var(--hsi-radius);
	border: 3px solid var(--hsi-neutral-tint);
}

/* ---------------------------------------------------------------------- */
/* Shell / container                                                      */
/* ---------------------------------------------------------------------- */

/* Keyed to the TEMPLATE body class, not a page ID (go-live fix 2026-10-22):
   the old .page-id-4992 selector was staging's portal page ID — live's page
   got a different ID, so the theme header/menu reappeared there. The
   template class matches wherever the portal renders, any environment. */
body.hsi-portal-template #head_loogo, body.hsi-portal-template .header.header.navbar {display:none;
}

body.hsi-portal-template .hsi-portal-wrap {
	max-width: var(--hsi-shell-max);
	margin: 0 auto;
	padding: 0 var(--hsi-space-6);
	box-sizing: border-box;
	display:flex;
	padding: var(--hsi-space-4)
}

body.hsi-portal-template .hsi-portal-shell {
	display: flex;
	flex-direction: column;
	gap: var(--hsi-space-8);
}

body.hsi-portal-template .hsi-portal-section {
	scroll-margin-top: calc(var(--hsi-header-height) + var(--hsi-space-4));
}

@media (max-width: 720px) {
	body.hsi-portal-template .hsi-portal-wrap {
		padding: 0 var(--hsi-space-4);
	}
}

/* ---------------------------------------------------------------------- */
/* Header — sticky, short, role-aware quick-nav                           */
/* ---------------------------------------------------------------------- */

body.hsi-portal-template .hsi-portal-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hsi-space-4);
	min-height: var(--hsi-header-height);
	padding: var(--hsi-space-2) 0;
	margin: 0 calc(var(--hsi-space-6) * -1) var(--hsi-space-4);
	padding-left: var(--hsi-space-6);
	padding-right: var(--hsi-space-6);
	background: var(--hsi-white);
	border-bottom: 1px solid var(--hsi-neutral-tint);
}

body.hsi-portal-template .hsi-portal-header__brand {
	display: flex;
	align-items: center;
	gap: var(--hsi-space-3);
	margin-right: var(--hsi-space-4);
}

body.hsi-portal-template .hsi-portal-header__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 50%;
	background: var(--hsi-navy);
	color: var(--hsi-white);
	font-family: var(--hsi-font-head);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

body.hsi-portal-template .hsi-portal-header__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.2;
	white-space: nowrap;
}

body.hsi-portal-template .hsi-portal-header__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hsi-space-1) var(--hsi-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
}

body.hsi-portal-template .hsi-portal-header__nav-link {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--hsi-charcoal);
	text-decoration: none;
	padding: var(--hsi-space-1) var(--hsi-space-2);
	border-radius: var(--hsi-radius);
}

body.hsi-portal-template .hsi-portal-header__nav-link:hover {
	color: var(--hsi-navy);
	background: var(--hsi-neutral-tint);
}

body.hsi-portal-template .hsi-portal-header__user {
	display: flex;
	align-items: center;
	gap: var(--hsi-space-3);
	margin-left: auto;
	font-size: 0.9rem;
	white-space: nowrap;
}

body.hsi-portal-template .hsi-portal-header__logout {
	color: var(--hsi-blue);
	font-weight: 600;
	text-decoration: none;
}

body.hsi-portal-template .hsi-portal-header__logout:hover {
	text-decoration: underline;
}

@media (max-width: 720px) {
	body.hsi-portal-template .hsi-portal-header {
		position: static;
		margin-left: calc(var(--hsi-space-4) * -1);
		margin-right: calc(var(--hsi-space-4) * -1);
		padding-left: var(--hsi-space-4);
		padding-right: var(--hsi-space-4);
	}

	body.hsi-portal-template .hsi-portal-header__nav {
		order: 3;
		flex-basis: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: var(--hsi-space-1);
	}

	body.hsi-portal-template .hsi-portal-header__user {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------- */
/* Theme chrome — hide public nav; footer shows only .copyright           */
/* ---------------------------------------------------------------------- */

body.hsi-portal-template .site-header,
body.hsi-portal-template header.site-header,
body.hsi-portal-template #masthead,
body.hsi-portal-template .main-navigation,
body.hsi-portal-template nav.primary-menu,
body.hsi-portal-template #site-navigation {
	display: none !important;
}

body.hsi-portal-template footer :not(.copyright):not(.copyright *) {
	display: none !important;
}

body.hsi-portal-template footer .copyright {
	display: block !important;
	text-align: center;
	padding: var(--hsi-space-4) 0;
	font-size: 0.85rem;
	color: var(--hsi-charcoal);
}

/* ---------------------------------------------------------------------- */
/* Login card                                                             */
/* ---------------------------------------------------------------------- */

body.hsi-portal-template .hsi-portal-wrap .hsi-login-header {
    padding: 39vh 0;
}

body.hsi-portal-template .hsi-portal-wrap > h1 {
	max-width: 420px;
	margin: auto;
	padding: 0 var(--hsi-space-4);
	text-align: center;
	font-size: 2.4rem;
	
}

body.hsi-portal-template .hsi-portal-wrap > h1::before {
	content: 'HSI';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin: 0 auto var(--hsi-space-3);
	border-radius: 50%;
	background: var(--hsi-navy);
	color: var(--hsi-white);
	font-size: 2.25rem;
	font-weight: 700;
}

body.hsi-portal-template .hsi-portal-error {
	max-width: 420px;
	margin: var(--hsi-space-4) auto 0;
	padding: var(--hsi-space-3) var(--hsi-space-4);
	border-radius: var(--hsi-radius);
	background: var(--hsi-red-tint);
	border: 1px solid var(--hsi-red);
	color: var(--hsi-charcoal);
	font-size: 1.25rem;
}

body.hsi-portal-template .hsi-portal-login-form {
	max-width: 420px;
	width:100%;
	margin: auto;
	padding: var(--hsi-space-6);
	background: var(--hsi-white);
	border: 1px solid #d7dadf;
	border-radius: var(--hsi-radius-lg);
	box-shadow: 0 1px 3px rgba(32, 32, 32, 0.08);
}

body.hsi-portal-template .hsi-portal-login-form p {
	margin: 0 0 var(--hsi-space-4);
}

body.hsi-portal-template .hsi-portal-login-form label {
	display: block;
	margin-bottom: var(--hsi-space-1);
	font-weight: 600;
	font-size: 1.35rem;
	text-align:left;
}

body.hsi-portal-template .hsi-portal-login-form input[type='text'],
body.hsi-portal-template .hsi-portal-login-form input[type='password'] {
	width: 100%;
}

body.hsi-portal-template .hsi-portal-login-form button[type='submit'] {
	width: 100%;
	padding: 10px 20px;
	border-radius: var(--hsi-radius);
	border: 1px solid var(--hsi-navy);
	background: var(--hsi-navy);
	color: var(--hsi-white);
	font-weight: 600;
}

/* Portal fixes (Section 2, prior run) — button hover effect, all HSI
   portal buttons in this file. Replaces the prior per-variant background-
   color-swap hovers below with this one shared glossy-inset treatment. */
body.hsi-portal-template .hsi-portal-login-form button[type='submit']:hover {
	box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.8), inset 0 0px 14px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}

body.hsi-portal-template .hsi-portal-login-form > p:nth-child(6) > label > input[type='checkbox'] {
	text-align: left;
	font-size: 1.5rem;
	margin-right: 4px;
}

/* ---------------------------------------------------------------------- */
/* Shared form primitives — base rules every section's own fields inherit */
/* ---------------------------------------------------------------------- */

body.hsi-portal-template input[type='text'],
body.hsi-portal-template input[type='email'],
body.hsi-portal-template input[type='tel'],
body.hsi-portal-template input[type='number'],
body.hsi-portal-template input[type='password'],
body.hsi-portal-template input[type='date'],
body.hsi-portal-template input[type='time'],
body.hsi-portal-template input[type='url'],
body.hsi-portal-template select,
body.hsi-portal-template textarea {
	font-family: var(--hsi-font-body);
	/* Client-specified (2026-08-06): ALL field text uniform at 1em — this
	   replaces both the old 0.95rem base and the 1.15em text/email/date/
	   select bump that used to follow this rule (that override block is
	   deleted; one size for every input type now). */
	font-size: 1em;
	color: var(--hsi-charcoal);
	background: var(--hsi-white);
	border: 1px solid var(--hsi-charcoal);
	border-radius: var(--hsi-radius);
	padding: 10px 12px;
	box-sizing: border-box;
}

body.hsi-portal-template input[type='date'] {
	line-height: unset;
}

body.hsi-portal-template input[readonly],
body.hsi-portal-template textarea[readonly] {
	background: var(--hsi-neutral-tint);
	border-color: #c9ccd1;
}

body.hsi-portal-template input:focus-visible,
body.hsi-portal-template select:focus-visible,
body.hsi-portal-template textarea:focus-visible,
body.hsi-portal-template button:focus-visible,
body.hsi-portal-template a:focus-visible,
body.hsi-portal-template [tabindex]:focus-visible {
	outline: 2px solid var(--hsi-blue);
	outline-offset: 2px;
}

body.hsi-portal-template label {
	font-family: var(--hsi-font-body);
	font-weight: 600;
	color: var(--hsi-charcoal);
}

body.hsi-portal-template button {
	font-family: var(--hsi-font-body);
	cursor: pointer;
}

/* Catch-all for any plain <button> that isn't a .hsi-btn variant (e.g. the
   calendar filter form's Filter button) — same hover treatment as every
   other portal button, per "ALL HSI portal buttons" below. */
body.hsi-portal-template button:hover {
	box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.8), inset 0 0px 14px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}

/* Generic button variants, applied directly via class="hsi-btn hsi-btn--*"
   where markup already supports it (the calendar modal's "Update this
   order" link, the Reports "Open" links) — see hsi-portal-calendar.css and
   class-hsi-portal-reports-render.php. Other sections' own submit/utility
   buttons are styled in their own CSS files (hsi-portal-order-form.css /
   hsi-portal-lookup-form.css / hsi-portal-user-management.css) using the
   same var(--hsi-*) tokens instead of hardcoded hex, without needing the
   markup itself to carry these classes. */
body.hsi-portal-template .hsi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hsi-space-2);
	padding: 10px 20px;
	/* Client-specified (2026-08-06, revised from 1.5rem). NOTE: a stray
	   second font-size: 0.9rem further down this same block was silently
	   overriding the 2026-08-05 client-specified 1.5rem the whole time —
	   removed with this revision, one declaration only now. */
	font-size: 1.4rem;
	border-radius: var(--hsi-radius);
	border: 1px solid transparent;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
}

body.hsi-portal-template .hsi-btn--primary {
	background: var(--hsi-navy);
	color: var(--hsi-white);
	border-color: var(--hsi-navy);
}

body.hsi-portal-template .hsi-btn--primary:hover {
	box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.8), inset 0 0px 14px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}

body.hsi-portal-template .hsi-btn--secondary {
	/* Unified button style (client decision 2026-09-11): ALL buttons share
	   the navy/white primary look — the old blue-tint secondary became
	   indistinguishable from the new display-only field style. Only
	   .hsi-btn--danger (Cancel Order) differs, below. */
	background: var(--hsi-navy);
	color: var(--hsi-white);
	border-color: var(--hsi-navy);
}

body.hsi-portal-template .hsi-btn--secondary:hover {
	box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.8), inset 0 0px 14px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}

body.hsi-portal-template .hsi-btn--danger {
	/* Client-specified (2026-09-11, supersedes the 2026-09-09 white
	   version): solid red with white text — red reads as danger/stop, and
	   this is deliberately the ONE button that differs from the unified
	   navy style. */
	background: var(--hsi-red);
	color: var(--hsi-white);
	border-color: var(--hsi-red);
}

body.hsi-portal-template .hsi-btn--danger:hover {
	box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.8), inset 0 0px 14px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}

/* Shared row/note primitives — used by order-form.css and lookup-form.css
   to lay out specific field groupings (email+note, name pairs, address
   compacts, date/time/size triples) as explicit rows instead of relying on
   generic auto-flow pairing. */
body.hsi-portal-template .hsi-form-row {
	display: grid;
	gap: 0 var(--hsi-space-4);
	/* No-op inside a flex parent (e.g. the Order Completed form); spans the
	   full width when nested inside a 2-col CSS grid parent (e.g. the
	   Lookup/Update form's accordion section body) instead of squeezing into
	   a single half-width grid cell. */
	grid-column: 1 / -1;
}

body.hsi-portal-template .hsi-form-row--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.hsi-portal-template .hsi-form-row--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Street/city/state/zip compact row — city gets more room, state/zip stay
   narrow since they never need much horizontal space. */
body.hsi-portal-template .hsi-form-row--address {
	grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 720px) {
	body.hsi-portal-template .hsi-form-row--2,
	body.hsi-portal-template .hsi-form-row--3,
	body.hsi-portal-template .hsi-form-row--address {
		grid-template-columns: 1fr;
	}
}

/* Attention-getting note/reminder callout, paired next to a field in a
   .hsi-form-row (e.g. "check for an existing contact", "ask how they heard
   about us") — a prompt for the HSI rep, not a field. */
body.hsi-portal-template .hsi-form-note {
	display: flex;
	align-items: center;
	background: var(--hsi-blue-tint);
	border-left: 3px solid var(--hsi-blue);
	border-radius: 0 var(--hsi-radius) var(--hsi-radius) 0;
	padding: var(--hsi-space-3) var(--hsi-space-4);
	font-size: 1em;
	font-style: italic;
	font-weight: 600;
	color: #0c2e4e;
}

/* Required-field asterisk — any element ending in __required across every
   section's BEM classes. */
body.hsi-portal-template [class$='__required'],
body.hsi-portal-template [class*='__required '] {
	color: var(--hsi-red);
	font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* Order summary — shared partial (items 2 + 5, styling pass), used by     */
/* both the Lookup/Update form's status pill and the calendar entry modal. */
/* Lives here (not hsi-portal-calendar.css or hsi-portal-lookup-form.css)  */
/* since both of those depend on this file and it's the one place common  */
/* to both without duplicating the rules. Reuses --hsi-stage-{key}-bg/-fg  */
/* (same tokens as the calendar entries/legend and the existing status     */
/* pill) and the .hsi-calendar__icon is-on/is-off treatment already        */
/* defined in hsi-portal-calendar.css — no new tokens or icons.            */
/* ---------------------------------------------------------------------- */

body.hsi-portal-template .hsi-order-summary__pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: var(--hsi-space-3);
}

body.hsi-portal-template .hsi-order-summary__pill--deposit_received { background: var(--hsi-stage-deposit_received-bg); color: var(--hsi-stage-deposit_received-fg); }
body.hsi-portal-template .hsi-order-summary__pill--class_scheduled { background: var(--hsi-stage-class_scheduled-bg); color: var(--hsi-stage-class_scheduled-fg); }
body.hsi-portal-template .hsi-order-summary__pill--needs_reschedule { background: var(--hsi-stage-needs_reschedule-bg); color: var(--hsi-stage-needs_reschedule-fg); }
body.hsi-portal-template .hsi-order-summary__pill--class_completed { background: var(--hsi-stage-class_completed-bg); color: var(--hsi-stage-class_completed-fg); }
body.hsi-portal-template .hsi-order-summary__pill--balance_paid_in_full { background: var(--hsi-stage-balance_paid_in_full-bg); color: var(--hsi-stage-balance_paid_in_full-fg); }
body.hsi-portal-template .hsi-order-summary__pill--certifications_issued { background: var(--hsi-stage-certifications_issued-bg); color: var(--hsi-stage-certifications_issued-fg); }
body.hsi-portal-template .hsi-order-summary__pill--cancelled { background: var(--hsi-stage-cancelled-bg); color: var(--hsi-stage-cancelled-fg); }
body.hsi-portal-template .hsi-order-summary__pill--new_inquiry { background: var(--hsi-stage-new_inquiry-bg); color: var(--hsi-stage-new_inquiry-fg); }
body.hsi-portal-template .hsi-order-summary__pill--quote_provided { background: var(--hsi-stage-quote_provided-bg); color: var(--hsi-stage-quote_provided-fg); }
body.hsi-portal-template .hsi-order-summary__pill--lost { background: var(--hsi-stage-lost-bg); color: var(--hsi-stage-lost-fg); }

body.hsi-portal-template .hsi-order-summary__groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hsi-space-2) var(--hsi-space-6);
	margin-bottom: var(--hsi-space-3);
}

@media (max-width: 480px) {
	body.hsi-portal-template .hsi-order-summary__groups {
		grid-template-columns: 1fr;
	}
}

/* Overlap fix (Section 2): .hsi-order-summary__group is a grid item inside
   .hsi-order-summary__groups' 2-column grid, but grid items default to
   min-width:auto — with no explicit override, a long dt/dd pair (e.g. the
   Deal group's "Training Location"/"Payment Status" rows) sized the dl to
   its own max-content width instead of respecting the 1fr track, blowing
   the Deal column out past its half and overlapping/overflowing the
   .hsi-calendar__notes-modal-content's fixed max-width — the reported
   "overlaps the modal and is right-aligned" symptom. Same root cause
   already diagnosed and fixed for .hsi-calendar__day-entries earlier in
   this project; same fix here. min-width:0 lets the grid item honor its
   track; width:100% (explicitly requested) then makes the dl itself fill
   that track instead of sizing to its own content, so Customer and Deal
   lay out side by side without colliding. */
body.hsi-portal-template .hsi-order-summary__group {
	min-width: 0;
}

body.hsi-portal-template .hsi-order-summary__group h5 {
	margin: 0 0 var(--hsi-space-1);
	font-size: 1.75rem;
	font-weight:bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #666;
}

body.hsi-portal-template .hsi-order-summary__group dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.3em 0.75em;
	margin: 0;
	width: 100%;
}

body.hsi-portal-template .hsi-order-summary__group dt {
	font-weight: 600;
	color: #555;
	text-align: right;
}

body.hsi-portal-template .hsi-order-summary__group dt::after {
	content: ':';
}

body.hsi-portal-template .hsi-order-summary__group dd {
	margin: 0;
	text-align: left;
}

/* Full-order-info pass, item 1 — Notes spans both grid columns (order_notes
   can be long/multi-line) instead of squeezing into a single 1fr track like
   every other group. */
body.hsi-portal-template .hsi-order-summary__group--notes {
	grid-column: 1 / -1;
}

body.hsi-portal-template .hsi-order-summary__notes-value {
	word-break: break-word;
}

body.hsi-portal-template .hsi-order-summary__status-icons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hsi-space-4);
	padding-top: var(--hsi-space-2);
	border-top: 1px solid var(--hsi-neutral-tint);
}

body.hsi-portal-template .hsi-order-summary__status-icon {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	/* Client-specified (2026-08-05): was 0.85rem, no bottom margin. */
	font-size: 1.25rem;
	margin-bottom: 16px;
	font-weight: 600;
	color: var(--hsi-charcoal);
}

/* ---------------------------------------------------------------------- */
/* Tables — horizontal scroll wrapper so they never overflow the shell    */
/* ---------------------------------------------------------------------- */

body.hsi-portal-template table {
	width: 100%;
	border-collapse: collapse;
	background: var(--hsi-white);
	border: 1px solid var(--hsi-neutral-tint);
	border-radius: var(--hsi-radius);
	overflow: hidden;
}

body.hsi-portal-template table thead {
	background: var(--hsi-neutral-tint);
}

body.hsi-portal-template table tbody tr:nth-child(even) {
	background: #f7f9fb;
}

body.hsi-portal-template table tbody tr:hover {
	background: var(--hsi-blue-tint);
}

body.hsi-portal-template [class$='__table-wrap'] {
	overflow-x: auto;
}

/* ---------------------------------------------------------------------- */
/* Cross-form field/layout overrides (portal fixes, Section 2)            */
/* ---------------------------------------------------------------------- */

body.hsi-portal-template .hsi-order-form__field #hsi_order_training_time {
	padding: 12px 12px;
}

body.hsi-portal-template .hsi-order-form__field #hsi_order_state {
	padding: 17px 12px;
}

body.hsi-portal-template .hsi-lookup-form__search button {
	margin-bottom: 0;
}

/* Calendar filter form's Apply/Clear row — one row, button ~60%, the
   clear-filters link ~40%, with spacing between them. */
body.hsi-portal-template #hsi-portal-calendar > div > form {
	display: flex;
	align-items: center;
	gap: var(--hsi-space-3);
}

body.hsi-portal-template #hsi-portal-calendar > div > form > button {
	flex: 0 0 60%;
}

body.hsi-portal-template #hsi-portal-calendar > div > form > a {
	flex: 0 0 calc(38% - var(--hsi-space-3));
	text-align: center;
}

body.hsi-portal-template .hsi-calendar__legend-list {
	width: 100%;
	flex-wrap: nowrap;
}

body.hsi-portal-template .hsi-user-mgmt__form {
	width: 100%;
	max-width: 100%;
}

/* Client-approved 2026-09-09 — the theme's style.css:3619 paints generic
   li a white with !important, which made the header quick-menu invisible
   (white on white). Equal weapon, higher specificity, scoped to exactly
   these links. */
body.hsi-portal-template .hsi-portal-header__nav li a.hsi-portal-header__nav-link {
	color: var(--hsi-charcoal) !important;
}

body.hsi-portal-template .hsi-portal-header__nav li a.hsi-portal-header__nav-link:hover {
	color: var(--hsi-navy) !important;
}

/* Client-approved 2026-09-09 — anchored jumps (quick-menu links, the
   #group-order-lookup-form return after submits, Brevo task deep links)
   used to land underneath the sticky header; this clears it. */
body.hsi-portal-template [id] {
	scroll-margin-top: calc(var(--hsi-header-height) + 12px);
}

/* Relocated stage-education note at the bottom of the Booking Details card
   (client decision 2026-09-09, option A). */
body.hsi-portal-template .hsi-order-summary__stage-note {
	margin: var(--hsi-space-2) 0 0;
	font-size: 0.8em;
	color: #6b7280;
	/* Client convention 2026-09-09: all notes left-aligned. */
	text-align: left;
}

/* Client-specified (2026-09-11): pull the gap under the Notes textarea in —
   it sat too far above the note-only checkbox. Deliberately scoped by ID to
   the Notes section's textarea ONLY (client clarification, same day): not
   the cancellation note (which shares name="new_note"), not any other
   textarea. */
body.hsi-portal-template textarea#hsi_lookup_new_note {
	margin-bottom: -8px;
}

/* Session-expired notice (client request 2026-09-17) — shown at the top of
   the portal after an expired-session submission was bounced (see the
   handle_logged_out_submit() fallbacks): that submission was NOT saved and
   must be redone. Same red treatment as the lookup form's error banner. */
body.hsi-portal-template .hsi-portal-session-banner {
	padding: var(--hsi-space-3) var(--hsi-space-4);
	margin-bottom: var(--hsi-space-4);
	border-radius: var(--hsi-radius);
	background: var(--hsi-red-tint);
	border: 1px solid var(--hsi-red);
	color: #611a15;
	font-weight: 600;
	text-align: left;
}

/* Bug fix (client report 2026-09-18): the display: grid on .hsi-form-row
   above out-ranks the browser's own [hidden] { display: none }, so a row
   carrying the hidden attribute — the New Order form's empty
   "Convert an Existing Inquiry" picker on page load, and the Amount Paid /
   Payment Method row in Inquiry mode — rendered anyway. */
body.hsi-portal-template .hsi-form-row[hidden] {
	display: none;
}

/* Error-field highlight (client request 2026-09-18): every field the error
   banner names also gets a red border + red label, so what needs fixing is
   visible on the fields themselves, not just in the list up top. Applied by
   initErrorHighlights() in both form JS files. Selector shape mirrors the
   base input rule above so it out-ranks it without !important. */
body.hsi-portal-template .hsi-field-error input[type='text'],
body.hsi-portal-template .hsi-field-error input[type='email'],
body.hsi-portal-template .hsi-field-error input[type='tel'],
body.hsi-portal-template .hsi-field-error input[type='number'],
body.hsi-portal-template .hsi-field-error input[type='date'],
body.hsi-portal-template .hsi-field-error input[type='time'],
body.hsi-portal-template .hsi-field-error input[type='url'],
body.hsi-portal-template .hsi-field-error select,
body.hsi-portal-template .hsi-field-error textarea {
	border: 2px solid var(--hsi-red);
}

body.hsi-portal-template .hsi-field-error > label,
body.hsi-portal-template .hsi-field-error legend {
	color: var(--hsi-red);
}