/**
 * chri-portal.css — Tranche F front-end design system.
 * Port of wireframes/v2/wireframes.css (the ratified spec, F-R2) scoped for production:
 *   - tokens carry the chri- prefix and live on :root (values verbatim from the wireframes);
 *   - layout/components are scoped under .chri-app so nothing leaks into the theme;
 *   - the legacy chri-* classes the pre-F renderers already emit are styled at top level
 *     (the chri- prefix is ours alone) so untouched screens improve immediately;
 *   - the full wf-53/54 mobile layer ships here (F-Q4): drawer nav, bottom tab bar,
 *     stacked-card tables, 44px touch targets.
 */

:root {
	--chri-light-blue: #449fd8;
	--chri-dark-blue: #0e113b;
	--chri-green: #64bf75;
	--chri-yellow: #efe65f;
	--chri-red: #dc2626;
	--chri-gray-50: #fafafa;
	--chri-gray-100: #f4f4f5;
	--chri-gray-200: #e4e4e7;
	--chri-gray-300: #d4d4d8;
	--chri-gray-400: #a1a1aa;
	--chri-gray-500: #71717a;
	--chri-gray-600: #52525b;
	--chri-gray-700: #3f3f46;
	--chri-gray-800: #27272a;
	--chri-gray-900: #18181b;
}

/* ===== APP SHELL (wf-81 union shell, in-content per F-Q1) ===== */
.chri-app {
	display: grid;
	grid-template-columns: 240px 1fr;
	min-height: 70vh;
	font-size: 14px;
	line-height: 1.5;
	color: var(--chri-gray-800);
	background: var(--chri-gray-50);
	border: 1px solid var(--chri-gray-200);
	border-radius: 8px;
	/* NO overflow:hidden here — it would become the scroll container and break
	   position:sticky children (.chri-bundle-bar). Corners rounded per-child instead. */
	margin: 0 0 24px;
	text-align: left;
}
.chri-app *, .chri-app *::before, .chri-app *::after { box-sizing: border-box; }
.chri-app a { color: var(--chri-light-blue); }
.chri-app a:focus-visible, .chri-app button:focus-visible, .chri-app input:focus-visible,
.chri-app select:focus-visible, .chri-app textarea:focus-visible, .chri-app [tabindex]:focus-visible {
	outline: 2px solid var(--chri-light-blue);
	outline-offset: 1px;
}

/* Sidebar */
.chri-app .chri-side {
	background: var(--chri-dark-blue);
	color: #fff;
	padding: 16px 0;
	border-radius: 8px 0 0 8px;
}
.chri-app .chri-side .chri-logo {
	padding: 0 20px 16px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin: 0 0 16px;
}
.chri-app .chri-side .chri-logo span { color: var(--chri-light-blue); }
.chri-app .chri-side .chri-role-label {
	padding: 0 20px 12px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--chri-light-blue);
}
.chri-app .chri-side nav a {
	display: block;
	padding: 9px 20px;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	font-size: 13px;
	border-left: 3px solid transparent;
	min-height: 38px;
}
.chri-app .chri-side nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.chri-app .chri-side nav a.chri-active {
	background: rgba(255, 255, 255, 0.1);
	border-left-color: var(--chri-light-blue);
	color: #fff;
	font-weight: 500;
}
.chri-app .chri-side nav .chri-nav-group {
	padding: 16px 20px 4px;
	font-size: 10px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 0.5px;
}
.chri-app .chri-side ul { list-style: none; margin: 0; padding: 0; }
.chri-app .chri-side li { margin: 0; }

/* Main column */
.chri-app .chri-main { display: flex; flex-direction: column; min-width: 0; }
.chri-app .chri-topbar {
	background: #fff;
	border-bottom: 1px solid var(--chri-gray-200);
	border-radius: 0 8px 0 0;
	padding: 12px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.chri-app .chri-topbar .chri-breadcrumb { font-size: 13px; color: var(--chri-gray-500); }
.chri-app .chri-topbar .chri-user-chip {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 13px;
	color: var(--chri-gray-700);
}
.chri-app .chri-topbar .chri-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--chri-gray-100);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--chri-dark-blue);
}
.chri-app .chri-content { padding: 24px; flex: 1; background: var(--chri-gray-50); min-width: 0; }
.chri-app .chri-page-header {
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}
.chri-app .chri-page-header h1 {
	font-size: 22px;
	color: var(--chri-dark-blue);
	margin: 0 0 4px;
	line-height: 1.3;
}
.chri-app .chri-page-header .chri-subtitle { color: var(--chri-gray-500); font-size: 13px; margin: 0; }

/* Hamburger + bottom tab bar + drawer scrim: hidden until the mobile layer shows them */
.chri-app .chri-menu-toggle { display: none; }
.chri-app .chri-tabbar { display: none; }
.chri-app .chri-drawer-scrim { display: none; }

/* ===== CARDS + KPI GRID ===== */
.chri-app .chri-card {
	background: #fff;
	border: 1px solid var(--chri-gray-200);
	border-radius: 6px;
	padding: 18px 20px;
	margin-bottom: 16px;
}
.chri-app .chri-card--compact { padding: 12px 16px; }
.chri-app .chri-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--chri-gray-100);
	gap: 10px;
}
.chri-app .chri-card-header h2 {
	font-size: 14px;
	color: var(--chri-gray-800);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin: 0;
}
.chri-app .chri-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}
.chri-app .chri-stat-card {
	background: #fff;
	border: 1px solid var(--chri-gray-200);
	border-radius: 6px;
	padding: 14px 16px;
}
.chri-app .chri-stat-card .chri-stat-label {
	font-size: 11px;
	color: var(--chri-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.chri-app .chri-stat-card .chri-stat-value {
	font-size: 26px;
	font-weight: 600;
	color: var(--chri-dark-blue);
	margin-top: 4px;
}
.chri-app .chri-stat-card .chri-stat-trend { font-size: 12px; color: var(--chri-gray-500); margin-top: 4px; }
.chri-app .chri-stat-card .chri-stat-trend.chri-up { color: var(--chri-green); }
.chri-app .chri-stat-card .chri-stat-trend.chri-warn { color: #b45309; }

/* ===== BUTTONS (classes only; renderers keep their own <button>/<a> elements) ===== */
.chri-app .chri-btn,
.chri-app button.chri-btn,
.chri-app input.chri-btn {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	background: var(--chri-gray-100);
	color: var(--chri-gray-800);
	line-height: 1.4;
	min-height: 34px;
}
.chri-app .chri-btn--primary { background: var(--chri-light-blue); color: #fff; border-color: var(--chri-light-blue); }
.chri-app .chri-btn--secondary { background: #fff; color: var(--chri-gray-700); border-color: var(--chri-gray-300); }
.chri-app .chri-btn--success { background: var(--chri-green); color: #fff; border-color: var(--chri-green); }
.chri-app .chri-btn--danger { background: var(--chri-red); color: #fff; border-color: var(--chri-red); }
.chri-app .chri-btn--ghost { background: transparent; color: var(--chri-light-blue); border-color: transparent; }
.chri-app .chri-btn--sm { padding: 5px 10px; font-size: 12px; min-height: 28px; }
.chri-app .chri-btn:hover { filter: brightness(1.05); }

/* ===== STATUS CHIPS ===== */
.chri-app .chri-chip,
.chri-chip {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
}
.chri-chip--blue { background: #dbeafe; color: #1e40af; }
.chri-chip--green { background: #dcfce7; color: #166534; }
.chri-chip--yellow { background: #fef3c7; color: #854d0e; }
.chri-chip--red { background: #fee2e2; color: #991b1b; }
.chri-chip--gray { background: var(--chri-gray-200); color: var(--chri-gray-700); }
.chri-chip--purple { background: #f3e8ff; color: #6b21a8; }

/* ===== TABLES ===== */
.chri-app .chri-table,
.chri-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-size: 13px;
}
.chri-app .chri-table th,
.chri-table th {
	text-align: left;
	padding: 10px 12px;
	background: var(--chri-gray-50);
	border-bottom: 2px solid var(--chri-gray-200);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--chri-gray-600);
}
.chri-app .chri-table td,
.chri-table td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--chri-gray-100);
	vertical-align: middle;
}
.chri-app .chri-table tbody tr:hover td,
.chri-table tbody tr:hover td { background: var(--chri-gray-50); }
.chri-table-wrap { overflow-x: auto; }

/* ===== FORMS ===== */
.chri-app .chri-field,
.chri-field { margin-bottom: 16px; }
.chri-app .chri-field label,
.chri-field label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--chri-gray-700);
	margin-bottom: 4px;
}
.chri-field label .chri-req { color: var(--chri-red); }
.chri-app .chri-field input:not([type="checkbox"]):not([type="radio"]),
.chri-app .chri-field textarea,
.chri-app .chri-field select,
.chri-field input:not([type="checkbox"]):not([type="radio"]),
.chri-field textarea,
.chri-field select {
	width: 100%;
	max-width: 480px;
	padding: 8px 12px;
	border: 1px solid var(--chri-gray-300);
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	min-height: 38px;
}
.chri-field textarea { min-height: 80px; resize: vertical; }
.chri-field .chri-help { font-size: 12px; color: var(--chri-gray-500); margin-top: 4px; }
.chri-app .chri-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chri-app .chri-form-section,
.chri-form-section {
	background: #fff;
	border: 1px solid var(--chri-gray-200);
	border-radius: 6px;
	padding: 20px;
	margin-bottom: 16px;
}
.chri-app .chri-form-section h3,
.chri-form-section h3 {
	font-size: 14px;
	color: var(--chri-dark-blue);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--chri-gray-100);
}

/* ===== FILTER BAR ===== */
.chri-app .chri-filter-bar {
	display: flex;
	gap: 10px;
	align-items: center;
	background: #fff;
	padding: 10px 14px;
	border: 1px solid var(--chri-gray-200);
	border-radius: 6px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.chri-app .chri-filter-bar select,
.chri-app .chri-filter-bar input {
	padding: 6px 10px;
	border: 1px solid var(--chri-gray-300);
	border-radius: 4px;
	font-size: 13px;
	min-height: 34px;
	width: auto;
}
.chri-app .chri-filter-bar .chri-filter-label { font-size: 12px; color: var(--chri-gray-600); margin-right: 4px; }

/* ===== DETAIL LAYOUT + PROGRESS + MISC ===== */
.chri-app .chri-two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: flex-start; }
.chri-app .chri-progress {
	background: var(--chri-gray-200);
	border-radius: 8px;
	height: 8px;
	overflow: hidden;
	min-width: 80px;
}
.chri-app .chri-progress > span {
	display: block;
	height: 100%;
	background: var(--chri-light-blue);
	border-radius: 8px;
}
.chri-app .chri-empty {
	background: #fff;
	border: 1px dashed var(--chri-gray-300);
	border-radius: 6px;
	padding: 28px 20px;
	text-align: center;
	color: var(--chri-gray-500);
	font-size: 13px;
	margin-bottom: 16px;
}
.chri-app .chri-bundle-bar {
	position: sticky;
	bottom: 0;
	background: var(--chri-dark-blue);
	color: #fff;
	padding: 12px 20px;
	border-radius: 6px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	flex-wrap: wrap;
}
.chri-app .chri-callout {
	background: #fffbeb;
	border-left: 3px solid var(--chri-yellow);
	padding: 8px 12px;
	font-size: 12px;
	color: var(--chri-gray-700);
	margin: 12px 0;
	border-radius: 0 4px 4px 0;
}
.chri-app .chri-callout--danger { background: #fef2f2; border-left-color: var(--chri-red); color: #991b1b; }

/* Modal (cheat sheet + confirms) */
.chri-modal-shadow {
	position: fixed;
	inset: 0;
	background: rgba(14, 17, 59, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
}
.chri-modal {
	background: #fff;
	border-radius: 8px;
	max-width: 600px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 24px;
}
.chri-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--chri-gray-200);
}
.chri-modal-header h2 { font-size: 18px; color: var(--chri-dark-blue); margin: 0; }

/* ===== LEGACY ALIASES (pre-F renderer classes; improve untouched screens now) ===== */
/* Standalone [repository_sidebar] (repository landing page, outside the shell) */
nav.chri-sidebar { background: var(--chri-dark-blue); border-radius: 8px; padding: 12px 0; max-width: 320px; }
nav.chri-sidebar ul.chri-nav { list-style: none; margin: 0; padding: 0; }
nav.chri-sidebar li { margin: 0; list-style: none; }
nav.chri-sidebar li::marker { content: none; }
nav.chri-sidebar li.chri-nav-group {
	padding: 16px 20px 4px;
	font-size: 10px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 0.5px;
}
nav.chri-sidebar li.chri-nav-item a {
	display: block;
	padding: 9px 20px;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	font-size: 13px;
	border-left: 3px solid transparent;
}
nav.chri-sidebar li.chri-nav-item a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
nav.chri-sidebar li.chri-nav-item.chri-active a {
	background: rgba(255, 255, 255, 0.1);
	border-left-color: var(--chri-light-blue);
	color: #fff;
	font-weight: 500;
}
nav.chri-sidebar p.chri-notice { margin: 0 12px; }

.chri-repository-notice, .chri-notice {
	display: block;
	background: #fff;
	border: 1px solid var(--chri-gray-200);
	border-left: 3px solid var(--chri-light-blue);
	border-radius: 0 4px 4px 0;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--chri-gray-700);
	margin: 12px 0;
}
.chri-flash {
	display: block;
	background: #dcfce7;
	border: 1px solid #bbe7c6;
	border-radius: 4px;
	padding: 10px 14px;
	font-size: 13px;
	color: #166534;
	margin: 12px 0;
}
.chri-flash--error { background: #fee2e2; border-color: #fac5c5; color: #991b1b; }

/* ===== MOBILE LAYER (wf-53/54, full per F-Q4) ===== */
@media (max-width: 899px) {
	.chri-app { grid-template-columns: 1fr; border-radius: 0; border-left: 0; border-right: 0; }

	/* Sidebar becomes an off-canvas drawer (visibility toggles too, so hidden
	   links leave the tab order while the slide transition still animates) */
	.chri-app .chri-side {
		position: fixed;
		inset: 0 25% 0 0;
		max-width: 300px;
		z-index: 100001;
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform 0.2s ease, visibility 0.2s;
		overflow-y: auto;
		padding-top: 12px;
		border-radius: 0;
	}
	.chri-app.chri-drawer-open .chri-side {
		transform: translateX(0);
		visibility: visible;
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
	}
	.chri-app .chri-side nav a { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }

	.chri-app .chri-menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: none;
		border: 1px solid var(--chri-gray-300);
		border-radius: 4px;
		padding: 8px 12px;
		font-size: 14px;
		cursor: pointer;
		color: var(--chri-gray-800);
		min-height: 44px;
	}

	.chri-app .chri-topbar { padding: 10px 14px; }
	.chri-app .chri-content { padding: 16px 14px 84px; }
	.chri-app .chri-two-col, .chri-app .chri-form-row { grid-template-columns: 1fr; }
	/* Touch targets: selectors must match (or beat) the desktop rules' specificity */
	.chri-app .chri-btn,
	.chri-app button.chri-btn,
	.chri-app input.chri-btn { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
	.chri-app .chri-btn--sm,
	.chri-app button.chri-btn--sm,
	.chri-app input.chri-btn--sm { min-height: 44px; }
	.chri-field input:not([type="checkbox"]):not([type="radio"]),
	.chri-field textarea,
	.chri-field select,
	.chri-app .chri-field input:not([type="checkbox"]):not([type="radio"]),
	.chri-app .chri-field textarea,
	.chri-app .chri-field select { max-width: none; min-height: 44px; }
	/* Sticky bundle bar clears the fixed tab bar */
	.chri-app .chri-bundle-bar { bottom: 68px; }

	/* Sticky bottom tab bar: the four most-used destinations */
	.chri-app .chri-tabbar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: var(--chri-dark-blue);
		z-index: 100000;
		padding: 4px 0 max(4px, env(safe-area-inset-bottom));
	}
	.chri-app .chri-tabbar a {
		flex: 1;
		text-align: center;
		color: rgba(255, 255, 255, 0.85);
		text-decoration: none;
		font-size: 11px;
		padding: 8px 4px;
		min-height: 44px;
	}
	.chri-app .chri-tabbar a.chri-active { color: #fff; font-weight: 600; border-top: 2px solid var(--chri-light-blue); }
	.chri-app .chri-tabbar .chri-tab-ico { display: block; font-size: 17px; line-height: 1.2; }

	/* Tables stack into cards (renderers add data-label per cell) */
	.chri-app .chri-table--stack thead { display: none; }
	.chri-app .chri-table--stack, .chri-app .chri-table--stack tbody,
	.chri-app .chri-table--stack tr, .chri-app .chri-table--stack td { display: block; width: 100%; }
	.chri-app .chri-table--stack tr {
		border: 1px solid var(--chri-gray-200);
		border-radius: 6px;
		margin-bottom: 10px;
		background: #fff;
		padding: 6px 0;
	}
	.chri-app .chri-table--stack td {
		border-bottom: 0;
		padding: 6px 12px;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		text-align: right;
	}
	.chri-app .chri-table--stack td::before {
		content: attr(data-label);
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.3px;
		color: var(--chri-gray-500);
		font-weight: 600;
		text-align: left;
	}
	.chri-app .chri-table--stack td:first-child { font-weight: 600; }
}

@media (max-width: 899px) {
	.chri-app.chri-drawer-open .chri-drawer-scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(14, 17, 59, 0.45);
		z-index: 100000;
		border: 0;
		padding: 0;
	}
}

/* Inline field note (empty-state guidance inside a fieldset) — added 2026-07-12. */
.chri-app .chri-field-note{color:#6b7280;font-size:13px;margin:6px 0 0;}

/* Tame raw heading tags inside portal cards (request-flow screens use bare h2/h3 that the
   theme renders at display size) — added 2026-07-12. Matches the design-system scale. */
.chri-app .chri-card h2{font-size:20px;line-height:1.3;margin:0 0 8px;font-weight:700;}
.chri-app .chri-card h3{font-size:15px;line-height:1.3;margin:16px 0 8px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#374151;}
.chri-app .chri-card fieldset{border:1px solid #e5e7eb;border-radius:8px;padding:12px 14px;margin:12px 0;}
.chri-app .chri-card legend{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#374151;padding:0 6px;}

/* Generic layout primitives — added 2026-07-12 for the My Account landing (theme page that
   reuses the .chri-app shell). Reusable, not account-specific. */
/* Two-column split that stacks on narrow screens (e.g. profile | quick actions). */
.chri-app .chri-split{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start;}
@media (max-width:720px){.chri-app .chri-split{grid-template-columns:1fr;}}
/* Definition list for key/value detail (profile fields). */
.chri-app .chri-dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:4px 0 0;}
.chri-app .chri-dl dt{color:var(--chri-gray-500);font-size:13px;font-weight:600;}
.chri-app .chri-dl dd{margin:0;font-size:14px;color:var(--chri-gray-800);word-break:break-word;}
/* Vertical stack of full-width, left-aligned action buttons. */
.chri-app .chri-actions-list{display:flex;flex-direction:column;gap:8px;}
.chri-app .chri-actions-list .chri-btn{width:100%;justify-content:flex-start;text-align:left;}

/* Search Results (wf-71) — added 2026-07-26. */
.chri-app .chri-search-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.chri-app .chri-facet-list{list-style:none;margin:0;padding:0;font-size:13px;}
.chri-app .chri-facet-list li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--chri-gray-100);}
.chri-app .chri-facet-list li:last-child{border-bottom:0;}
.chri-app .chri-facet-list .chri-facet-count{color:var(--chri-gray-400);}
.chri-app .chri-facet-list li.chri-facet-active a{font-weight:700;color:var(--chri-gray-900);}
.chri-app .chri-search-results{list-style:none;margin:0;padding:0;}
.chri-app .chri-search-results li{padding:10px 0;border-bottom:1px solid var(--chri-gray-100);font-size:13px;}
.chri-app .chri-search-results li:last-child{border-bottom:0;}
.chri-app mark{background:#fff3b0;padding:0 1px;border-radius:2px;}