/*
	Component layer for the eOrdering web UI.

	This used to be a ~490-line <style> block inline in SiteTailwind.Master. It was moved out so
	it can be cached, diffed and edited without scrolling past it to reach the page markup.

	Everything here is hand-written and consumes the custom properties in css/tokens.css - no
	literal colours below that line. Load order matters: tokens.css, then t16.css (Tailwind),
	then this file. Tailwind is built with `important: true`, so a utility class in the markup
	still beats any rule here; that is deliberate and long-standing.

	Class names are unchanged from the previous stylesheet. Scripts/orm-tables.js binds to
	.data-table, .tab, .pager and .table-search, the code-behind emits .card / .panel-head /
	.panel-body / .btn-row via Static Methods/CssClasses.cs, and every page's .designer.cs is
	tied to control IDs - so this is a reskin in place, not a re-layout.
*/

/* ===================================================================
   atmosphere
   =================================================================== */

body {
	background-color: var(--ground);
	/* The grain is what stops a large flat warm field from reading as an unstyled div.
	   On <body> rather than a fixed overlay so it never becomes a containing block. */
	background-image: var(--grain);
	color: var(--ink);
	font-family: var(--font-body);
}

/* --accent-border rather than a raw iris step: the pale lavender that reads as a highlight on
   white is invisible behind light text, and this role already carries that flip. */
::selection {
	background: var(--accent-border);
	color: var(--stone-9);
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--stone-4) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
	background: var(--stone-4);
	border-radius: var(--radius-pill);
	border: 3px solid transparent;
	background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--stone-5); }

@keyframes portal-fade-up {
	from { opacity: 0; translate: 0 6px; }
	to   { opacity: 1; translate: 0 0; }
}

/* `translate:` rather than `transform:` on purpose - transform would create a containing
   block and detach position:fixed children such as the mobile drawer. */
.portal-enter { animation: portal-fade-up var(--t-med) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
	.portal-enter { animation: none; }
	* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===================================================================
   app shell: 56px frosted header across the top, 240px nav down the left
   =================================================================== */

.app-shell {
	min-height: 100%;
	display: grid;
	grid-template-columns: var(--nav-w) minmax(0, 1fr);
	grid-template-rows: var(--header-h) minmax(0, 1fr);
}

.app-header {
	grid-column: 1 / -1;
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--header-h);
	padding: 0 16px;
	/* Frosted: the page grain and any scrolled content stay faintly visible through it. */
	background-color: color-mix(in srgb, var(--paper) 86%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--hairline);
}

/* color-mix has no fallback path in older engines; a solid header is the right degradation. */
@supports not (background-color: color-mix(in srgb, red 50%, transparent)) {
	.app-header { background-color: var(--paper); }
}

.header-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--ink);
	white-space: nowrap;
	flex-shrink: 0;
}

.header-brand-mark {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--iris-5), var(--iris-7));
	box-shadow: 0 4px 10px -4px rgb(var(--primary-rgb) / 0.55);
}
.header-brand-mark svg { width: 16px; height: 16px; stroke: var(--on-primary); }

.header-brand-text {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.01em;
}

.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.user-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 4px 12px 4px 5px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	background: var(--paper);
	box-shadow: var(--shadow-xs);
}
.avatar {
	width: 28px; height: 28px;
	border-radius: var(--radius-pill);
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--iris-5), var(--iris-7));
	flex-shrink: 0;
}
.avatar svg { width: 16px; height: 16px; color: var(--on-primary); }
.chip-text { display: flex; flex-direction: column; line-height: 1.2; }
.chip-hello { font-size: 11px; color: var(--dimmed); }
.chip-name { font-size: 13px; font-weight: 600; color: var(--ink); }

/* The logout link is an <asp:LoginStatus>, which renders a bare <a> with a generated id -
   hence the attribute selector alongside the class. */
a[id$='HeadLoginStatus'], .login-pill {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none;
	border: 1px solid var(--hairline); border-radius: var(--radius-md);
	padding: 7px 14px; background: var(--paper);
	box-shadow: var(--shadow-xs);
	transition: color var(--t-fast) ease, border-color var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
a[id$='HeadLoginStatus']:hover, .login-pill:hover {
	color: var(--red-ink); border-color: var(--red-edge); background: var(--red-wash);
}

.burger {
	display: none;
	align-items: center; justify-content: center;
	width: 34px; height: 34px; flex-shrink: 0;
	border: 1px solid var(--hairline); border-radius: var(--radius-md);
	background: var(--paper); color: var(--ink-soft); cursor: pointer;
	box-shadow: var(--shadow-xs);
}
.burger svg { width: 18px; height: 18px; }
.burger:hover { background: var(--surface-hover); }

/* ===== colour scheme toggle ===== */

.theme-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; flex-shrink: 0;
	border: 1px solid var(--hairline); border-radius: var(--radius-md);
	background: var(--paper); color: var(--ink-soft); cursor: pointer;
	box-shadow: var(--shadow-xs);
	transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.theme-toggle:hover { background: var(--surface-hover); color: var(--primary-text); }
.theme-toggle svg { width: 17px; height: 17px; }

/*
	Which icon is visible follows the same attribute the palette does, rather than being
	switched from script. The button shows the scheme it will move you TO, so the moon means
	"go dark". A no-attribute document is light, which is what the markup ships.
*/
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ===== left navigation ===== */

.app-nav {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 14px 10px;
	background: var(--ground);
	border-right: 1px solid var(--hairline);
	overflow-y: auto;
}

/* Inside the mobile drawer the nav is the whole panel, so it carries its own paper. */
.mobile-drawer .app-nav {
	grid-row: auto;
	width: 100%;
	background: var(--paper);
	border-right: 0;
}

.nav-section { display: flex; flex-direction: column; gap: 3px; }

.nav-section-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dimmed);
	padding: 0 10px;
	margin-bottom: 4px;
}

.nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-soft);
	transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.nav-link:hover { color: var(--ink); background: var(--surface-active); }
.nav-link .nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--dimmed); transition: color var(--t-fast) ease; }
.nav-link:hover .nav-icon { color: var(--ink-soft); }

.nav-link-active { color: var(--accent-ink); background: var(--accent-wash); font-weight: 600; }
.nav-link-active .nav-icon { color: var(--primary-text); }
.nav-link-active:hover { background: var(--accent-wash-hover); color: var(--accent-ink); }

.nav-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto;
	border-radius: var(--radius-pill);
	background: var(--red); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1;
}
.nav-badge.bump { animation: navBump 0.45s ease; }
@keyframes navBump {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.4); }
	100% { transform: scale(1); }
}

/* ===== main & footer ===== */

.app-content {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.app-main { flex: 1 1 auto; min-height: 0; padding: 20px 20px 24px; }
.app-main-inner { min-width: 0; height: 100%; }

.app-footer {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 8px;
	border-top: 1px solid var(--hairline);
	padding: 14px 20px;
	font-size: 13px; color: var(--dimmed);
}
.app-footer b { color: var(--ink-soft); font-weight: 600; }
.app-footer-links { display: flex; align-items: center; gap: 20px; }
.app-footer-links a { color: var(--dimmed); font-weight: 500; text-decoration: none; transition: color var(--t-fast) ease; }
.app-footer-links a:hover { color: var(--primary-text); }

/* ===== mobile: collapse the nav into the drawer ===== */

/*
	The drawer is always in the DOM but inert until .drawer-open is set. visibility (rather
	than display) is what is animated, so the panel can transition rather than snap, and
	pointer-events guarantees the invisible backdrop never swallows clicks when closed.
*/
.mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 50;
	visibility: hidden;
	pointer-events: none;
}
.mobile-drawer.drawer-open { visibility: visible; pointer-events: auto; }

.drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(38, 36, 33, 0.6);
	opacity: 0;
	transition: opacity var(--t-med) ease;
}
.mobile-drawer.drawer-open .drawer-backdrop { opacity: 1; }

.drawer-panel {
	position: absolute;
	inset: 0 auto 0 0;
	width: 100%;
	max-width: 280px;
	display: flex;
	background: var(--paper);
	box-shadow: var(--shadow-xl);
	transform: translateX(-100%);
	transition: transform var(--t-med) var(--ease-out);
	overflow-y: auto;
}
.mobile-drawer.drawer-open .drawer-panel { transform: translateX(0); }

.drawer-close {
	position: absolute;
	top: 12px;
	left: calc(min(100%, 280px) + 12px);
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border: 0; border-radius: var(--radius-md);
	background: transparent; color: #fff; cursor: pointer;
	opacity: 0;
	transition: opacity var(--t-med) ease;
}
.drawer-close svg { width: 22px; height: 22px; }
.mobile-drawer.drawer-open .drawer-close { opacity: 1; }

@media (max-width: 48em) {
	.app-shell { grid-template-columns: minmax(0, 1fr); }
	.app-header { grid-column: 1; }
	.app-nav { display: none; }
	.app-content { grid-row: 2; }
	.app-main { padding: 16px 14px 20px; }
	.burger { display: inline-flex; }
	.app-footer { padding: 14px; }
}

/* ===================================================================
   cards, panels, buttons
   =================================================================== */

.card {
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
}
.card-head { padding: 16px 20px 0; }
.card-body { padding: 12px 16px 16px; }
.card-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.section-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; color: var(--ink); }
.section-sub { font-size: 13px; color: var(--dimmed); margin-top: 2px; }

.panel-head {
	padding: 14px 20px;
	font-family: var(--font-display); font-weight: var(--display-weight); font-size: 16px;
	color: var(--ink);
	border-bottom: 1px solid var(--hairline);
}
.panel-head-sub { font-family: var(--font-body); font-weight: 500; color: var(--dimmed); font-size: 13px; margin-left: 6px; }
.panel-body { padding: 18px 20px 20px; }

.btn-primary {
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--primary); cursor: pointer;
	font: inherit; font-size: 14px; font-weight: 500; color: var(--on-primary);
	background: var(--primary);
	border-radius: var(--radius-md);
	padding: 9px 18px;
	box-shadow: var(--shadow-xs);
	transition: background var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) ease;
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

.btn-row {
	border: 1px solid var(--hairline); background: var(--paper); color: var(--ink-soft);
	font: inherit; font-size: 13px; font-weight: 500;
	border-radius: var(--radius-md); padding: 6px 12px; cursor: pointer;
	transition: background var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) ease;
}
.btn-row:hover { background: var(--surface-hover); border-color: var(--border); box-shadow: var(--shadow-xs); transform: translateY(-1px); }
.btn-row:active { transform: translateY(0); box-shadow: none; }
.btn-row-sm { padding: 4px 10px; font-size: 12.5px; }

/* The facilities filter submit is an <asp:Button>, so it renders as <input type=submit>
   with a generated id and cannot take a class from markup. */
input[id$='FacilitiesFilter_FilterButton'] {
	font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-soft); cursor: pointer;
	background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-md);
	padding: 7px 16px; flex-shrink: 0; align-self: center; margin-top: 0;
	box-shadow: var(--shadow-xs);
	transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
input[id$='FacilitiesFilter_FilterButton']:hover { background: var(--surface-hover); border-color: var(--border); }

.action-card {
	display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; text-decoration: none;
	background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
	transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) ease;
}
.action-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.action-card:active { transform: translateY(0); }
.action-card-icon {
	width: 40px; height: 40px; border-radius: var(--radius-md);
	background: var(--accent-wash); color: var(--primary-text);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.action-card-icon svg { width: 20px; height: 20px; }
.action-card-title { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.action-card-sub { display: block; font-size: 13px; color: var(--dimmed); margin-top: 2px; }

/* ===================================================================
   forms
   =================================================================== */

.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-bottom: 6px; }

.form-input {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--ink);
	background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: 9px 12px;
	transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.form-input::placeholder { color: var(--placeholder); }
.form-input:hover { border-color: var(--stone-5); }
.form-input:focus {
	outline: none; border-color: var(--primary-text);
	box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.25);
}

.input-join { display: flex; align-items: stretch; }
.input-join .input-prefix {
	display: flex; align-items: center; padding: 0 12px;
	font-size: 14px; font-weight: 500; color: var(--dimmed);
	background: var(--surface-sunken); border: 1px solid var(--border); border-right: 0;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.input-join .form-input { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* ===================================================================
   facilities filter bar
   =================================================================== */

.filter-toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	background: transparent; border: 0; cursor: pointer; font: inherit; text-align: left; padding: 14px 20px;
}
.filter-toggle:hover .filter-label { color: var(--ink); }
.filter-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.filter-label svg { width: 16px; height: 16px; color: var(--dimmed); }
.filter-summary { font-weight: 400; color: var(--dimmed); font-size: 13px; }
.filter-chevron { width: 18px; height: 18px; color: var(--dimmed); flex-shrink: 0; transition: transform 0.2s ease; }
.filter-card.filter-collapsed .filter-chevron { transform: rotate(-90deg); }

.filter-body { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 16px; }
.filter-card.filter-collapsed .filter-body { display: none; }
.filter-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.facility-chip {
	display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
	border: 1px solid var(--hairline); border-radius: var(--radius-pill);
	padding: 5px 13px 5px 9px; background: var(--paper);
	font-size: 13px; font-weight: 500; color: var(--ink-soft); user-select: none;
	transition: border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.facility-chip:hover { border-color: var(--border); }
.facility-chip input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; margin: 0; }
.facility-chip:has(input:checked) { border-color: var(--accent-border); background: var(--accent-wash); color: var(--accent-ink); }

/* ===================================================================
   data table
   =================================================================== */

.table-search {
	display: flex; align-items: center; gap: 8px;
	background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: 7px 12px; min-width: 240px;
	transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.table-search svg { width: 16px; height: 16px; color: var(--dimmed); flex-shrink: 0; }
.table-search input { border: 0; outline: none; font: inherit; font-size: 14px; color: var(--ink); background: transparent; width: 100%; }
.table-search input::placeholder { color: var(--placeholder); }
.table-search:focus-within { border-color: var(--primary-text); box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.25); }

.table-scroll { overflow-x: auto; }

/* Patient directory search: the box grows, the button does not. */
.patient-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.patient-search .table-search { flex: 1 1 320px; min-width: 0; }
.patient-search .btn-primary { flex-shrink: 0; }

/*
	Dashboard: stretch the referrals card to fill the height between header and footer, so the
	table area consumes available space and the pager pins to the card bottom. Scoped via
	:has(.dash-fill) so other pages are unaffected.
*/
.app-main:has(.dash-fill) { min-height: 0; display: flex; flex-direction: column; }
.app-main > div:has(.dash-fill) { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.app-main > div:has(.dash-fill) > .flex.flex-col.gap-y-6 { flex: 1 1 auto; min-height: 0; }
.app-main > div:has(.dash-fill) > .flex.flex-col.gap-y-6 > div { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dash-fill { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dash-fill > .tab-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dash-fill > .tab-panel > .table-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dash-fill > .tab-panel > .pager { margin-top: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }

/*
	Below this the table stops shrinking and .table-scroll scrolls instead. Without it a narrow
	window squeezes the columns until content escapes its cell: at 760px the users table gave the
	email column 50px for 242px of address, which then ran straight across the role dropdown.
	Scrolling a wide table is a worse-but-honest outcome than overlapping text.
*/
.data-table { min-width: 720px; }

/*
	The fixed column plan below belongs to the inbox, and used to apply to every .data-table -
	all eight of them, including tables with five columns and a completely different meaning for
	each one. The patient directory was giving 72px to a patient's name because that is what the
	inbox allots to its "Show" link.

	Only the inbox needs fixed layout: its columns must not resize as rows page in and out.
	Everything else sizes to content, which is what a list of email addresses wants.
*/
#newTable, #prevTable {
	table-layout: fixed;
	min-width: 1180px;
}

/* Show | Patient | Time | Ordering | Receiving | Requested Tests | Comments | Processed | Status */
#newTable th:nth-child(1), #prevTable th:nth-child(1) { width: 72px; }
#newTable th:nth-child(2), #prevTable th:nth-child(2) { width: 150px; }
#newTable th:nth-child(3), #prevTable th:nth-child(3) { width: 116px; }
#newTable th:nth-child(4), #prevTable th:nth-child(4) { width: 150px; }
#newTable th:nth-child(5), #prevTable th:nth-child(5) { width: 150px; }
#newTable th:nth-child(6), #prevTable th:nth-child(6) { width: 140px; }
#newTable th:nth-child(7), #prevTable th:nth-child(7) { width: 240px; }
#newTable th:nth-child(8), #prevTable th:nth-child(8) { width: 150px; }
#newTable th:nth-child(9), #prevTable th:nth-child(9) { width: 80px; }

#newTable td:first-child, #prevTable td:first-child { white-space: nowrap; }
.data-table td.col-status { white-space: nowrap; }

.data-table thead th {
	text-align: left; color: var(--dimmed);
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
	padding: 10px; border-bottom: 1px solid var(--hairline); user-select: none;
	background: var(--surface-sunken); overflow: hidden; text-overflow: ellipsis;
}
.data-table thead th:first-child { border-top-left-radius: var(--radius-md); }
.data-table thead th:last-child { border-top-right-radius: var(--radius-md); }
.data-table th.sortable { cursor: pointer; white-space: nowrap; }
.data-table th.sortable::after { content: '\2195'; margin-left: 5px; color: var(--stone-4); font-size: 11px; }
.data-table th.sorted-asc::after { content: '\2191'; color: var(--primary-text); }
.data-table th.sorted-desc::after { content: '\2193'; color: var(--primary-text); }
.data-table th.sortable:hover { color: var(--primary-text); }
.data-table th.center, .data-table td.center { text-align: center; }

.data-table tbody td {
	padding: 10px; border-bottom: 1px solid var(--hairline); color: var(--ink-soft);
	vertical-align: middle; overflow-wrap: break-word;
}
/* Striped, matching the portal's table defaults. */
.data-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-sunken) 55%, transparent); }
.data-table tbody tr { transition: background-color var(--t-fast) ease; }
.data-table tbody tr:hover td { background: var(--surface-hover); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }

.cell-date { display: block; color: var(--ink-soft); }
.cell-time { display: block; color: var(--dimmed); font-size: 12.5px; }
.cell-tests { display: block; color: var(--ink-soft); }
.cell-plain { display: block; color: var(--ink-soft); overflow-wrap: anywhere; }

.row-link { color: var(--primary-text); font-weight: 600; text-decoration: none; }
.row-link:hover { text-decoration: underline; }

.row-status { font-size: 12px; font-weight: 600; white-space: nowrap; }
.row-status.status-saving { color: var(--dimmed); }
.row-status.status-saved { color: var(--green-ink); }
.row-status.status-error { color: var(--red-ink); }

/* read / unread indicator */
.col-actions { white-space: nowrap; }
.read-dot {
	display: inline-block; width: 9px; height: 9px; border-radius: 50%;
	margin-right: 7px; vertical-align: middle;
	background: transparent; border: 1.5px solid var(--stone-4); box-sizing: border-box;
}
.read-dot.unread {
	background: var(--primary-text); border-color: var(--primary-text);
	box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.16);
}
.data-table tbody tr.row-unread td { background: var(--accent-wash); }
.data-table tbody tr.row-unread:hover td { background: var(--accent-wash-hover); }
.data-table tbody tr.row-unread .patient-name,
.data-table tbody tr.row-unread .cell-tests { font-weight: 700; color: var(--ink); }

/* urgent */
.data-table tbody tr.row-urgent td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.urgent-badge {
	display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill);
	background: var(--red-wash); color: var(--red-ink);
	font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
	vertical-align: middle;
}

/* patient cell */
.cell-patient { display: inline-block; vertical-align: middle; }
.patient-name { display: block; color: var(--ink); font-weight: 600; }
.patient-contact { display: block; color: var(--dimmed); font-size: 12.5px; }
.reader-chip {
	float: right; margin-left: 10px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--accent-wash-hover); color: var(--accent-ink);
	font-size: 11px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}

.cell-comment {
	width: 100%; min-height: 40px; resize: vertical; box-sizing: border-box; display: block;
	border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 9px;
	font: inherit; font-size: 13px; color: var(--ink-soft); background: var(--paper);
	transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.cell-comment:focus { outline: none; border-color: var(--primary-text); box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.25); }

/* ===== referral status dropdown =====
   These carry status meaning, so they use the semantic ramps rather than the primary.
   "Left Voicemail" was violet; violet is now the primary, so it moves to teal to keep the
   rule that the brand colour never encodes a status. */
.col-status-cell { white-space: nowrap; }
.status-select {
	font: inherit; font-size: 12.5px; font-weight: 600; border-radius: var(--radius-pill);
	padding: 5px 26px 5px 12px; border: 1px solid var(--border);
	background-color: var(--paper); color: var(--ink-soft); cursor: pointer;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239c968a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat; background-position: right 9px center; background-size: 11px;
}
.status-select:focus { outline: none; box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.25); }
.status-select[data-v="New"]            { color: var(--blue-ink);   border-color: var(--blue-edge);   background-color: var(--blue-wash); }
.status-select[data-v="AP Created"]     { color: var(--green-ink);  border-color: var(--green-edge);  background-color: var(--green-wash); }
.status-select[data-v="Follow-up"]      { color: var(--yellow-ink); border-color: var(--yellow-edge); background-color: var(--yellow-wash); }
.status-select[data-v="Left Voicemail"] { color: var(--teal-ink);   border-color: var(--teal-edge);   background-color: var(--teal-wash); }
.status-select[data-v="Hold"]           { color: var(--dimmed);     border-color: var(--hairline);    background-color: var(--surface-sunken); }

/* ===================================================================
   status pills
   =================================================================== */

.status-pill {
	display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--radius-pill);
	font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.status-pill.status-new              { background: var(--blue-wash);   color: var(--blue-ink); }
.status-pill.status-mid              { background: var(--yellow-wash); color: var(--yellow-ink); }
.status-pill.status-done             { background: var(--green-wash);  color: var(--green-ink); }
.status-pill.status-urgent           { background: var(--red-wash);    color: var(--red-ink); }
.status-pill.status-v-new            { background: var(--blue-wash);   color: var(--blue-ink); }
.status-pill.status-v-ap-created     { background: var(--green-wash);  color: var(--green-ink); }
.status-pill.status-v-follow-up      { background: var(--yellow-wash); color: var(--yellow-ink); }
.status-pill.status-v-left-voicemail { background: var(--teal-wash);   color: var(--teal-ink); }
.status-pill.status-v-hold           { background: var(--surface-sunken);     color: var(--dimmed); }

.count-badge {
	display: inline-flex; align-items: center; justify-content: center; vertical-align: 2px;
	min-width: 22px; height: 20px; padding: 0 7px; margin-left: 8px;
	border-radius: var(--radius-pill);
	background: var(--surface-hover); color: var(--ink-soft);
	font-size: 12px; font-weight: 600;
}

.empty-state { padding: 36px 12px; text-align: center; color: var(--dimmed); font-size: 14px; }

/* ===================================================================
   tabs
   =================================================================== */

.tabs { display: flex; align-items: stretch; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.tab {
	border: 0; background: transparent; cursor: pointer; font: inherit;
	font-size: 14px; font-weight: 500; color: var(--dimmed);
	padding: 12px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent;
	display: inline-flex; align-items: center;
	transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.tab:hover { color: var(--ink); }
.tab-active { color: var(--primary-text); border-bottom-color: var(--primary-text); font-weight: 600; }
.tab .count-badge { margin-left: 8px; }
.tab-active .count-badge { background: var(--accent-wash-hover); color: var(--accent-ink); }

.tab-panel { padding: 0; }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; flex-wrap: wrap; }
.panel-toolbar .section-sub { margin: 0; }

/* ===================================================================
   pager
   =================================================================== */

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 14px; flex-wrap: wrap; }
.pager:empty { display: none; }
.pager-info { font-size: 13px; color: var(--dimmed); }
.pager-btns { display: flex; align-items: center; gap: 4px; }
.pager-btn {
	min-width: 32px; height: 32px; padding: 0 9px;
	border: 1px solid var(--hairline); background: var(--paper); color: var(--ink-soft);
	border-radius: var(--radius-md); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
	transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.pager-btn:hover:not(:disabled):not(.pager-current) { background: var(--surface-hover); border-color: var(--border); }
.pager-btn:disabled { opacity: 0.45; cursor: default; }
.pager-current { background: var(--primary); border-color: var(--primary); color: var(--on-primary); cursor: default; }
.pager-ellipsis { padding: 0 2px; color: var(--dimmed); }

/* ===================================================================
   facilities & branding config
   =================================================================== */

.fac-baseurl-block { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.fac-inline { display: flex; gap: 8px; align-items: center; }
.fac-inline .form-input { max-width: 460px; }
.fac-hint { font-size: 12.5px; color: var(--dimmed); }
.fac-saved { display: inline-block; margin-bottom: 12px; color: var(--green-ink); font-size: 13px; font-weight: 600; }
.fac-list { display: flex; flex-direction: column; gap: 14px; }
.fac-row { display: flex; gap: 16px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--paper); }
.fac-logo {
	width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 700; font-size: 18px;
	box-shadow: inset 0 0 0 1px rgba(29, 26, 18, 0.05);
}
.fac-logo img { width: 100%; height: 100%; object-fit: contain; background: var(--paper); }
.fac-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fac-facname { font-size: 15px; font-weight: 600; color: var(--ink); }
.fac-fieldrow { display: flex; flex-wrap: wrap; gap: 12px; }
.fac-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; }
.fac-field-slug { flex: 0 1 200px; }
.fac-field-color { flex: 0 0 120px; }
.fac-field-logo { flex: 1 1 100%; }
.fac-color { padding: 3px; height: 38px; width: 64px; cursor: pointer; }
.fac-file { font-size: 13px; color: var(--dimmed); }
.fac-linkrow { display: flex; flex-direction: column; gap: 4px; }
.fac-link { display: flex; gap: 8px; align-items: center; }
/* Generated links are reference data, not prose - the mono face makes them scannable. */
.fac-linkinput { background: var(--surface-sunken); color: var(--ink-soft); font-family: var(--font-mono); font-size: 12.5px; }
.fac-save { align-self: flex-start; }
@media (max-width: 720px) { .fac-row { flex-direction: column; } }

/* ===================================================================
   settings
   =================================================================== */

.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } }

.settings-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 900px) { .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; } }
.settings-nav-item {
	display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
	background: transparent; border: 0; border-radius: var(--radius-sm); padding: 9px 12px;
	font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-soft); cursor: pointer;
	transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.settings-nav-item:hover { background: var(--surface-hover); color: var(--ink); }
.settings-nav-item.active { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.settings-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.settings-content { min-width: 0; }
.settings-section-head { margin-bottom: 18px; }
.settings-section-head h1 { font-family: var(--font-display); font-size: 21px; font-weight: var(--display-weight); color: var(--ink); letter-spacing: -0.01em; }
.settings-section-head p { font-size: 13.5px; color: var(--dimmed); margin-top: 3px; }
.settings-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
/*
	A grid item's min-width is auto, so it grows to fit its content rather than its track - which
	means the .table-scroll inside can never scroll, and a table too wide for the page pushes the
	whole page sideways instead. This is what turned a squeezed users table into 16px of
	horizontal page scroll once the table stopped collapsing.
*/
.settings-cards > * { min-width: 0; }
.settings-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .settings-cards.two { grid-template-columns: 1fr; } }

.settings-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1160px; }
@media (min-width: 1100px) {
	.settings-grid { grid-template-columns: 1fr 1fr; align-items: start; }
	.settings-grid .span-2 { grid-column: span 2; }
}

/* ===================================================================
   embedded user management
   =================================================================== */

.user-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 12px; }
.user-add-error { display: block; margin-bottom: 10px; color: var(--red-ink); font-size: 13px; font-weight: 600; }
/* Email addresses are long and unbreakable; 880px is what the four columns need before the
   address starts wrapping mid-word. Narrower than that, .table-scroll scrolls. */
.users-table { min-width: 880px; }
.sessions-table { min-width: 760px; }

.users-table td { vertical-align: middle; }
.users-table th:nth-child(1) { width: auto; }
.users-table th:nth-child(2) { width: 180px; }
.users-table th:nth-child(3) { width: 110px; }
.users-table th:nth-child(4) { width: 350px; }
.user-email { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.role-select { max-width: 160px; }
.user-actions { display: flex; gap: 8px; white-space: nowrap; align-items: center; }
.user-reset-result {
	display: block; margin-top: 14px; padding: 10px 12px;
	background: var(--green-wash); border: 1px solid var(--green-edge); border-radius: var(--radius-md);
	color: var(--green-ink); font-size: 13px; font-weight: 600; word-break: break-word;
	font-family: var(--font-mono);
}
.sessions-table th:nth-child(1) { width: auto; }
.sessions-table th:nth-child(2) { width: 190px; }
.sessions-table th:nth-child(3) { width: 160px; }
.sessions-table th:nth-child(4) { width: 150px; }
.user-you { font-size: 12px; font-weight: 600; color: var(--primary-text); margin-left: 6px; }

/* ===================================================================
   MFA setup prompt banner
   =================================================================== */

.mfa-banner {
	display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px;
	background: var(--yellow-wash); border: 1px solid var(--yellow-edge);
	border-radius: var(--radius-md); color: var(--yellow-ink);
}
.mfa-banner svg { width: 22px; height: 22px; color: var(--yellow-ink); flex-shrink: 0; margin-top: 1px; }
.mfa-banner strong { display: block; font-size: 14px; color: var(--yellow-ink); }
.mfa-banner span { display: block; font-size: 13px; color: var(--yellow-ink); margin-top: 2px; }

/* ===================================================================
   referral detail page
   =================================================================== */

.referral-detail { display: flex; flex-direction: column; gap: 18px; }
.detail-topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.detail-topbar .btn-row { flex-shrink: 0; }
.detail-status { display: inline-flex; gap: 8px; }
.detail-patient { margin-left: auto; text-align: right; line-height: 1.25; }
.detail-patient-name { display: block; font-family: var(--font-display); font-size: 17px; font-weight: var(--display-weight); color: var(--ink); }
.detail-patient-sub { display: block; font-size: 13px; color: var(--dimmed); }

.detail-section { padding-bottom: 16px; }
.detail-section + .detail-section { border-top: 1px solid var(--hairline); padding-top: 16px; }
.detail-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dimmed); margin-bottom: 12px; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 22px; }
.field label { display: block; font-size: 11px; color: var(--dimmed); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.field .val { font-size: 14px; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.detail-freetext { font-size: 14px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.status-dd { max-width: 220px; }

.detail-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1024px) { .detail-grid { grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr); } }
.detail-side { display: flex; flex-direction: column; gap: 18px; }

.detail-doc-body { display: flex; align-items: flex-start; justify-content: center; }
.detail-image { max-width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.image-placeholder {
	width: 100%; min-height: 340px; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 8px; text-align: center;
	color: var(--dimmed); border: 1.5px dashed var(--border); border-radius: var(--radius-md);
	background: var(--surface-sunken); padding: 28px;
}
.image-placeholder svg { width: 44px; height: 44px; color: var(--stone-4); }
.image-placeholder-title { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.image-placeholder p { font-size: 13px; color: var(--dimmed); margin: 0; max-width: 320px; }

.info-grid { display: flex; flex-direction: column; }
.info-row { display: grid; grid-template-columns: 132px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.info-row:last-child { border-bottom: 0; }
.info-label { font-size: 11px; color: var(--dimmed); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.info-value { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }

.processed-block { display: flex; flex-direction: column; gap: 8px; }
.processed-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.processed-toggle input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.processed-label { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.processed-hint { font-size: 12.5px; color: var(--dimmed); }

/*
	Stage timeline (the "Progress" card at the top of the detail sidebars). Markup comes from
	ReferralTimelineHtml.cs. A stage is done, pending, or - the last done one - current; the rail
	line below a stage fills green only once the NEXT stage is done, so the colour always stops
	at the frontier of what has actually happened.

	--green is used directly for the dot fill rather than --green-ink: the ink shades are tuned
	to carry text on a wash and go pale in dark mode, while the fill needs to hold its ground in
	both schemes with a white check on top - the same reasoning as --primary vs --primary-text.
*/
.stage-flow { list-style: none; margin: 0; padding: 2px 0 0; display: flex; flex-direction: column; }
.stage { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 0 12px; padding-bottom: 18px; }
.stage:last-child { padding-bottom: 2px; }
.stage::before {
	content: ""; position: absolute; left: 9px; top: 22px; bottom: 0; width: 2px;
	background: var(--hairline); border-radius: 1px;
}
.stage:last-child::before { display: none; }
.stage-reached::before { background: var(--green-edge); }
.stage-rail { display: flex; align-items: flex-start; justify-content: center; }
.stage-dot {
	position: relative; z-index: 1; box-sizing: border-box; width: 20px; height: 20px;
	display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
	background: var(--paper); border: 2px solid var(--stone-3);
}
.stage-dot svg { width: 11px; height: 11px; }
.stage-done .stage-dot { background: var(--green); border-color: var(--green); color: #fff; }
.stage-current .stage-dot { box-shadow: 0 0 0 4px var(--green-wash); }
.stage-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.stage-label { font-size: 14px; font-weight: 600; color: var(--dimmed); }
.stage-done .stage-label { color: var(--ink); }
.stage-meta { font-size: 12.5px; color: var(--dimmed); overflow-wrap: anywhere; }

/* ===================================================================
   patient SMS thread
   =================================================================== */

.sms-number { float: right; font-weight: 400; color: var(--dimmed); font-size: 13px; font-family: var(--font-mono); }
.sms-thread { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.sms-bubble { max-width: 85%; padding: 8px 12px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.45; }
.sms-bubble .sms-body { white-space: pre-wrap; word-break: break-word; }
.sms-bubble .sms-meta { margin-top: 4px; font-size: 11px; color: var(--dimmed); }
.sms-out { align-self: flex-end; background: var(--accent-wash); border: 1px solid var(--accent-wash-hover); border-bottom-right-radius: var(--radius-xs); }
.sms-in { align-self: flex-start; background: var(--surface-sunken); border: 1px solid var(--hairline); border-bottom-left-radius: var(--radius-xs); }
.sms-empty { color: var(--dimmed); font-size: 13px; padding: 6px 0; }
.sms-warning {
	margin: 12px 0 8px; padding: 8px 10px; border-radius: var(--radius-sm);
	background: var(--yellow-wash); border: 1px solid var(--yellow-edge); color: var(--yellow-ink);
	font-size: 12px; line-height: 1.45;
}
.sms-input { width: 100%; }
.sms-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sms-status { font-size: 13px; }
.sms-status.sms-ok { color: var(--green-ink); }
.sms-status.sms-error { color: var(--red-ink); }

/* ===================================================================
   simple table
   =================================================================== */

.simple-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.simple-table thead th {
	text-align: left; color: var(--dimmed);
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
	padding: 9px 10px; border-bottom: 1px solid var(--hairline); background: var(--surface-sunken);
}
.simple-table tbody td { padding: 10px; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); }
.simple-table tbody tr:last-child td { border-bottom: 0; }

/* ===================================================================
   centred card pages (login, account disabled, register tenant)
   =================================================================== */

.auth-page {
	min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	padding: 32px 20px;
	background-color: var(--ground);
	background-image: radial-gradient(600px circle at 50% 30%, rgb(var(--primary-rgb) / 0.06), transparent 70%), var(--grain);
}
.auth-stack { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 440px; }
.auth-card {
	width: 100%;
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 32px;
}
.auth-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; text-align: center; }
.auth-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 21px; color: var(--ink); }
.auth-sub { font-size: 14px; color: var(--dimmed); }
.auth-field { margin-bottom: 16px; }
.auth-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.auth-actions .btn-primary { width: 100%; padding: 11px 18px; }
.auth-error {
	display: block; margin-bottom: 16px; padding: 10px 12px;
	background: var(--red-wash); border: 1px solid var(--red-edge); border-radius: var(--radius-md);
	color: var(--red-ink); font-size: 13px; font-weight: 500;
}
.auth-note {
	display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
	background: var(--yellow-wash); border: 1px solid var(--yellow-edge); border-radius: var(--radius-md);
	color: var(--yellow-ink); font-size: 13px; line-height: 1.5;
}
.auth-links { display: flex; gap: 16px; font-size: 13px; }
.auth-links a { color: var(--dimmed); text-decoration: none; }
.auth-links a:hover { color: var(--primary-text); }

/* ===================================================================
   Telerik RadGrid
   Two grids remain (User Controls/UserAccounts.ascx, UserSessions.ascx). The control ships
   its own skin CSS; these rules pull it back to the tokens rather than replacing the grid.
   =================================================================== */

.RadGrid, .RadGrid_Default {
	font-family: var(--font-body) !important;
	font-size: 14px !important;
	border: 1px solid var(--hairline) !important;
	border-radius: var(--radius-md) !important;
	background: var(--paper) !important;
	overflow: hidden;
}
.RadGrid_Default .rgHeader, .RadGrid .rgHeader {
	background: var(--surface-sunken) !important;
	color: var(--dimmed) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--hairline) !important;
}
.RadGrid_Default .rgRow td, .RadGrid_Default .rgAltRow td,
.RadGrid .rgRow td, .RadGrid .rgAltRow td {
	background: var(--paper) !important;
	color: var(--ink-soft) !important;
	border-bottom: 1px solid var(--hairline) !important;
}
.RadGrid_Default .rgAltRow td, .RadGrid .rgAltRow td {
	background: color-mix(in srgb, var(--surface-sunken) 55%, transparent) !important;
}
.RadGrid_Default .rgRow:hover td, .RadGrid_Default .rgAltRow:hover td,
.RadGrid .rgRow:hover td, .RadGrid .rgAltRow:hover td {
	background: var(--surface-hover) !important;
}
.RadGrid_Default .rgPager, .RadGrid .rgPager {
	background: var(--surface-sunken) !important;
	border-top: 1px solid var(--hairline) !important;
}

/* ===================================================================
   print
   =================================================================== */

@media print {
	body { background: #fff; background-image: none; }
	.app-shell { display: block; }
	.app-nav, .app-header, .app-footer, .mobile-drawer { display: none !important; }
	.app-main { padding: 0; }
	.card { border: 1px solid var(--hairline); box-shadow: none; }
}
