/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
	/* Font stack per spec */
	--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Type scale – rem-based so user preferences are honoured */
	--text-xs: 0.75rem; /*  12px */
	--text-sm: 0.875rem; /*  14px  ← minimum for badges/labels */
	--text-base: 1rem; /*  16px  ← body/form minimum */
	--text-lg: 1.125rem; /*  18px  ← large text threshold (3:1) */
	--text-xl: 1.25rem; /*  20px */
	--text-2xl: 1.5rem; /*  24px */
	--lh-base: 1.6;

	/* Colour palette – contrast verified */
	--ink: #1a2332; /* 14.5:1 on white */
	--ink-muted: #374151; /*  9.7:1 on white */
	--ink-faint: #4b5563; /*  7.0:1 on white */
	--ink-subtle: #6b7280; /*  4.6:1 on white  ← AA floor */
	--surface: #ffffff;
	--surface-2: #f9fafb;
	--border: #d1d5db; /*  3.1:1 on white  ← AA large */
	--focus-ring: #2563eb; /*  5.9:1 on white */
	--focus-alpha: rgba(37, 99, 235, 0.3);
	--error: #b91c1c; /*  5.4:1 on white */

	/* Credit badge colours – per spec */
	--credit-bg: #2e7d32;
	--credit-fg: #ffffff; /*  9.5:1 on #2e7d32 ✓ */

	/* Touch target */
	--touch: 3rem; /* 48px */

	/* Spacing */
	--gap-1: 0.25rem;
	--gap-2: 0.5rem;
	--gap-3: 0.75rem;
	--gap-4: 1rem;
	--gap-6: 1.5rem;
	--gap-8: 2rem;

	/* Radius */
	--r-sm: 0.5rem;
	--r-md: 0.875rem;
	--r-lg: 1.25rem;
	--r-full: 9999px;
}

/* ── 2. BASE RESET ────────────────────────────────────────────────── */
html {
	font-size: 16px; /* explicit 16px root */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}
/* Prevent all horizontal overflow */
html,
body {
	overflow-x: hidden !important;
	max-width: 100%;
}

body {
	font-family: var(--font) !important;
	font-size: var(--text-base) !important;
	line-height: var(--lh-base) !important;
	color: var(--ink) !important;
}

/* Cascade system font to all interactive elements */
button,
input,
select,
textarea,
label,
a {
	font-family: var(--font) !important;
}

/* ── 3. TYPOGRAPHY SCALE ──────────────────────────────────────────── */
/* Body & form text — 16px */
p,
li,
td,
th,
.summary-item,
.lstep,
.inst-step,
.mpesa-info,
.loading-sub {
	font-size: var(--text-base) !important;
}

/* Labels — 14px min, bold, sufficient contrast */
label,
.field label,
.mfield label {
	font-size: var(--text-sm) !important; /* 14px */
	font-weight: 700 !important;
	color: var(--ink) !important;
	font-family: var(--font) !important;
}

/* Form inputs — must be 16px to stop iOS auto-zoom */
input,
select,
textarea,
.field input,
.field select,
.mfield input,
#adminSearchInput {
	font-size: var(--text-base) !important;
	font-family: var(--font) !important;
	color: var(--ink) !important;
}

/* Buttons — 16px */
.btn,
.mbtn,
.hbtn,
.admin-btn,
.download-all-btn,
.counter-btn {
	font-size: var(--text-base) !important;
	font-family: var(--font) !important;
}

/* Headings — large text threshold → 3:1 contrast needed */
.panel h2,
.output-header h3,
.loading-card h3,
.admin-header h1 {
	font-size: var(--text-xl) !important;
} /* 20px */
.modal-logo h2 {
	font-size: var(--text-lg) !important;
} /* 18px */
.admin-section h3 {
	font-size: var(--text-base) !important;
}

/* Minimum secondary text — 14px */
.upload-hint,
.tab,
.quota-pill,
.user-pill,
.atbl th,
.atbl td,
.counter,
.slabel,
.mlink,
.merr {
	font-size: var(--text-sm) !important;
}

/* ── 4. CONTRAST CORRECTIONS (WCAG AA) ───────────────────────────── */
/* Normal text ≥ 4.5:1 */
.upload-hint {
	color: var(--ink-subtle) !important;
} /* 4.6:1 */
.loading-sub {
	color: var(--ink-faint) !important;
} /* 7.0:1 */
.output-header p,
.modal-logo p {
	color: var(--ink-faint) !important;
}

/* Required asterisk */
.required {
	color: var(--error) !important;
	font-weight: 700 !important;
}

/* Admin table head — dark on light bg */
.atbl th {
	color: #1f2937 !important;

	white-space: nowrap;
} /* 12.6:1 on #f1f5f9 */

/* Badge colours */
.badge-ok {
	color: #14532d !important;
} /* 6.1:1 */
.badge-used {
	color: #7f1d1d !important;
} /* 6.4:1 */
.badge-pend {
	color: #78350f !important;
} /* 6.0:1 */

/* ── 5. SKIP NAVIGATION ──────────────────────────────────────────── */
.ics-skip-link {
	position: fixed;
	top: -8rem;
	left: var(--gap-4);
	z-index: 100000;
	background: var(--focus-ring);
	color: #fff;
	font-family: var(--font);
	font-size: var(--text-base);
	font-weight: 700;
	padding: 0.75rem 1.5rem;
	border-radius: 0 0 var(--r-md) var(--r-md);
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: top 0.15s ease;
	outline: none;
	white-space: nowrap;
}
.ics-skip-link:focus {
	top: 0;
}

/* ── 6. FIXED CREDIT BADGE ───────────────────────────────────────── */
/*
         * Spec: #FFFFFF on #2E7D32 · min 14px bold · fixed top-right
         * Visible 320px+  ·  aria-live updates without page refresh
         */
#ics-credit-badge {
	position: fixed;
	top: 0.75rem;
	right: auto;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9500;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background: var(--credit-bg);
	color: var(--credit-fg);
	font-family: var(--font);
	font-size: var(--text-sm); /* 14px minimum */
	font-weight: 700;
	line-height: 1.1;
	padding: 0.4375rem 0.875rem; /* 7px 14px */
	border-radius: var(--r-full);
	border: 2px solid rgba(255, 255, 255, 0.22);
	box-shadow:
		0 2px 8px rgba(46, 125, 50, 0.4),
		0 1px 3px rgba(0, 0, 0, 0.18);
	white-space: nowrap;
	pointer-events: none; /* informational only */
	user-select: none;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}
#ics-credit-badge .cb-icon {
	font-size: 0.8125rem;
	opacity: 0.85;
}
#ics-credit-badge .cb-count {
	font-size: 0.9375rem; /* 15px */
	font-weight: 800;
	letter-spacing: -0.3px;
}
#ics-credit-badge .cb-label {
	font-size: 0.6875rem; /* 11px — supplementary text, not body */
	font-weight: 600;
	opacity: 0.85;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Pulse animation on update */
@keyframes icsCreditPulse {
	0% {
		transform: scale(1);
	}
	35% {
		transform: scale(1.14);
	}
	70% {
		transform: scale(0.96);
	}
	100% {
		transform: scale(1);
	}
}
#ics-credit-badge.pulsing {
	animation: icsCreditPulse 0.4s ease;
}

/* Hide pre-login (body class toggled by JS below) */
body.ics-pre-login #ics-credit-badge {
	opacity: 0;
	pointer-events: none;
}

/* 320px — badge docks to bottom strip */
@media (max-width: 480px) {
	#ics-credit-badge {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		transform: none;
		border-radius: 0;
		justify-content: center;
		font-size: var(--text-sm);
		padding: 0.5rem 1rem;
		/* Account for Android/iOS system navigation bar */
		padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
		border: none;
		border-top: 2px solid rgba(255, 255, 255, 0.18);
		box-shadow: 0 -2px 12px rgba(46, 125, 50, 0.3);
		min-height: 2.25rem;
		z-index: 9500;
	}
	/* Push page content up so badge doesn't cover last element */
	body.ics-logged-in {
		padding-bottom: calc(2.75rem + env(safe-area-inset-bottom, 0px));
	}
}
@media (min-width: 481px) and (max-width: 768px) {
	#ics-credit-badge {
		top: 0.5rem;
		right: 0.75rem;
	}
}

/* ── 7. FOCUS STATES — WCAG 2.1 SC 2.4.7 + 1.4.11 ──────────────── */
/* Remove all suppressed outlines, enforce visible ring */
*:focus {
	outline: 3px solid var(--focus-ring) !important;
	outline-offset: 2px !important;
}
*:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}
*:focus-visible {
	outline: 3px solid var(--focus-ring) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px var(--focus-alpha) !important;
}
/* Form inputs — inline offset */
.field input:focus-visible,
.field select:focus-visible,
.mfield input:focus-visible {
	outline-offset: 0 !important;
	border-color: var(--focus-ring) !important;
}
/* Interactive elements */
.step:focus-visible,
.tab:focus-visible,
.plan-option:focus-visible,
.counter-btn:focus-visible {
	outline: 3px solid var(--focus-ring) !important;
	outline-offset: 3px !important;
}

/* ── 8. MINIMUM TOUCH TARGETS — 48×48px ─────────────────────────── */
.btn,
.mbtn,
.download-all-btn {
	min-height: var(--touch) !important; /* 48px */
	min-width: var(--touch) !important;
}
.hbtn {
	min-height: var(--touch) !important;
	min-width: var(--touch) !important;
}
.step {
	min-height: 2.75rem !important; /* 44px — inline nav */
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}
.modal-tab {
	min-height: var(--touch) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.counter-btn {
	min-height: 3rem !important;
}
/* Password eye — reachable thumb target */
.pw-eye {
	min-width: 2.75rem !important;
	min-height: var(--touch) !important;
	right: 0 !important;
	padding: 0 0.75rem !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
/* Plan option cards */
.plan-option {
	min-height: 5.5rem !important;
}

/* My Docs/Assess buttons — ensure they hit 44px */
#myDocsBtn,
#myAssessBtn {
	min-height: 2.75rem !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	display: inline-flex !important;
	align-items: center !important;
}

/* ── 9. MOBILE-FIRST RESPONSIVE GRID ────────────────────────────── */

/* 320px — single column, absolute minimum width */
@media (max-width: 320px) {
	.container {
		padding: 0 0.5rem !important;
	}
	.panel {
		padding: 0.875rem 0.75rem !important;
		border-radius: var(--r-sm) !important;
	}
	#panel1 {
		max-width: 100% !important;
	}
	.form-grid {
		grid-template-columns: 1fr !important;
		gap: 0.75rem !important;
	}
	.btn-group {
		flex-direction: column !important;
	}
	.btn {
		width: 100% !important;
	}
	.steps {
		gap: 0.125rem !important;
	}
	.step span:last-child {
		display: none !important;
	} /* icon + number only */
	.tabs {
		overflow-x: auto !important;
		flex-wrap: nowrap !important;
	}
	.tab {
		white-space: nowrap !important;
		flex-shrink: 0 !important;
	}
	.upload-panel-grid {
		grid-template-columns: 1fr !important;
	}
	.modal-box {
		padding: 1rem !important;
		border-radius: var(--r-sm) !important;
	}
	.atbl {
	}
	.counters {
		flex-direction: column !important;
	}
	.counter {
		width: 100% !important;
	}
}

/* 480px — single column, comfortable */
@media (min-width: 321px) and (max-width: 480px) {
	.container {
		padding: 0 0.875rem !important;
	}
	.panel {
		padding: 1.125rem 1rem !important;
	}
	#panel1 {
		max-width: 100% !important;
	}
	.form-grid {
		grid-template-columns: 1fr !important;
		gap: 0.875rem !important;
	}
	.upload-panel-grid {
		grid-template-columns: 1fr !important;
	}
	.steps {
		gap: 0.25rem !important;
	}
	.step span:last-child {
		font-size: 0.75rem !important;
	}
	.tabs {
		overflow-x: auto !important;
	}
	.counters {
		flex-direction: column !important;
	}
}

/* 768px — 2-column forms */
@media (min-width: 481px) and (max-width: 768px) {
	.container {
		padding: 0 1rem !important;
	}
	.panel {
		padding: 1.25rem 1rem !important;
	}
	#panel1 {
		max-width: 100% !important;
	}
	.form-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1rem !important;
	}
	.header {
		padding: 0.625rem 1rem !important;
	}
	.progress {
		padding: 0.625rem 1rem !important;
	}
	.tabs {
		overflow-x: auto !important;
	}
}

/* 1024px+ — 3-column forms, full layout */
@media (min-width: 1024px) {
	.container {
		max-width: 80rem !important;
		padding: 0 1.5rem !important;
	}
	.form-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	#panel1 {
		max-width: 53.75rem !important;
	} /* 860px */
}

/* Prevent overflow on all viewports */
img,
video,
table,
iframe,
svg {
	max-width: 100% !important;
}
.container,
.panel,
.modal-box {
	overflow-x: hidden !important;
}
/* Document output panels can scroll horizontally */
#tabPlan,
#tabOutline,
#tabSessions {
	overflow-x: auto !important;
}

/* ── 10. SEMANTIC ELEMENT ROLES ─────────────────────────────────── */
[role="main"] {
	display: block;
}
[role="banner"] {
	display: block;
}
[role="navigation"] {
	display: block;
}

/* Step current state */
.step[aria-current="step"] .step-number {
	background: #fbbf24 !important;
	color: #0f172a !important;
}

/* ── 11. REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.spinner {
		animation: none !important;
		opacity: 0.7;
	}
	#ics-credit-badge {
		transition: none !important;
	}
}

/* ── 12. HIGH CONTRAST MODE ─────────────────────────────────────── */
@media (forced-colors: active) {
	.btn-primary,
	.btn-gold,
	.mbtn {
		forced-color-adjust: none;
	}
	#ics-credit-badge {
		border: 2px solid ButtonText;
		forced-color-adjust: none;
	}
	*:focus-visible {
		outline: 3px solid Highlight !important;
	}
}

/* ── 13. PRINT ──────────────────────────────────────────────────── */
@media print {
	.header,
	.progress,
	#ics-credit-badge,
	.ics-skip-link,
	.toast,
	.modal-overlay,
	#myDocsBtn,
	#myAssessBtn {
		display: none !important;
	}
	.panel {
		box-shadow: none !important;
		border: 1px solid #000 !important;
	}
	body {
		background: none !important;
	}
}

/* ╔═══════════════════════════════════════════════════════════════════╗
           ║   MOBILE ADMIN FIXES  v4  —  based on device screenshot review   ║
           ║   Targets: table overflow · stat card sizing · button labels      ║
           ║   · search visibility · fluid typography                          ║
           ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── A. FLUID STAT CARD VALUES ──────────────────────────────────── */
/*
         * Problem: "KSh 500" wraps to two lines on narrow cards.
         * Fix: fluid clamp() that scales between 18px (320px screen)
         *      and 32px (desktop) without ever overflowing the card.
         */
.stat-card .sval {
	font-size: clamp(1.125rem, 4.5vw, 2rem) !important;
	line-height: 1.15 !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	hyphens: auto !important;
}
.stat-card .slabel {
	font-size: clamp(0.6875rem, 2.2vw, 0.8125rem) !important;
	line-height: 1.4 !important;
	white-space: normal !important; /* allow wrapping but on word boundaries */
	display: flex !important;
	align-items: flex-start !important;
	gap: 5px !important;
	flex-wrap: wrap !important;
}
.stat-card .slabel i {
	flex-shrink: 0 !important;
	margin-top: 2px !important;
}
/* Ensure cards themselves never overflow */
.stat-card {
	overflow: hidden !important;
	min-width: 0 !important; /* critical for grid children */
}

/* ── B. ADMIN TABLE — RESPONSIVE WITH FULL TEXT VISIBILITY ─────── */
/*
             * Fix: headers use nowrap to prevent char-by-char wrapping.
             * Data cells use word-break + overflow-wrap so long emails/names
             * wrap naturally instead of being truncated or causing overflow.
             */
.admin-section {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
}
.atbl {
	width: 100% !important;
	table-layout: auto !important;
}
.atbl th {
	white-space: nowrap !important;
	font-size: clamp(0.6875rem, 1.8vw, 0.8125rem) !important;
	padding: 10px 10px !important;
}
.atbl td {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 200px !important;
	font-size: clamp(0.6875rem, 1.8vw, 0.8125rem) !important;
	padding: 9px 10px !important;
	vertical-align: middle !important;
}
.atbl td small {
	display: block;
	color: #64748b;
	font-size: 0.72rem;
	margin-top: 2px;
}

/* ── C. ADMIN SEARCH BAR — VISIBILITY FIX ───────────────────────── */
/*
         * Problem: in screenshot the placeholder text is barely visible;
         *          the input text colour needs to be brighter against the dark bg.
         */
.admin-search-wrap input {
	background: #1e2d45 !important; /* slightly lighter than #0f172a */
	color: #f8fafc !important; /* near-white — 14.5:1 on #1e2d45 */
	border: 1.5px solid #475569 !important;
	font-size: 0.9375rem !important; /* 15px */
	padding: 0.625rem 2.5rem 0.625rem 0.875rem !important;
	border-radius: 0.625rem !important; /* pill → rounded rect for readability */
	height: 2.75rem !important; /* 44px touch target */
	transition:
		border-color 0.18s ease,
		background 0.18s ease !important;
}
.admin-search-wrap input::placeholder {
	color: #94a3b8 !important; /* 4.6:1 on #1e2d45 — AA pass */
	font-style: normal !important;
}
.admin-search-wrap input:focus {
	background: #243550 !important;
	border-color: #fbbf24 !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18) !important;
}
.admin-search-icon {
	color: #94a3b8 !important;
	right: 0.75rem !important;
	font-size: 0.9375rem !important;
}

/* ── D. ADMIN BUTTONS — LABELS ALWAYS VISIBLE ON MOBILE ─────────── */
/*
         * Problem: at <768px buttons show as wide pill-shapes with icon only;
         *          labels (.abtn-label) are display:none in some breakpoints.
         * Fix: keep label visible at all sizes, use 2×2 grid on very narrow screens.
         */
.admin-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.375rem !important;
	white-space: nowrap !important;
	border-radius: 0.5rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition:
		opacity 0.15s ease,
		transform 0.15s ease !important;
}
.admin-btn:hover {
	opacity: 0.88 !important;
	transform: translateY(-1px) !important;
}
.admin-btn:active {
	transform: translateY(0) !important;
}
.admin-btn i {
	flex-shrink: 0 !important;
}

/* Always show labels */
.abtn-label {
	display: inline !important;
}

@media (max-width: 768px) {
	.admin-btn {
		font-size: 0.8125rem !important; /* 13px */
		padding: 0.5625rem 0.875rem !important;
		min-height: 2.75rem !important; /* 44px touch target */
		border-radius: 0.5rem !important;
		width: 100% !important; /* fill grid column */
	}
	.abtn-label {
		display: inline !important;
		font-size: 0.8125rem !important;
	}
	.admin-btn-row {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0.5rem !important;
		width: 100% !important;
	}
	/* Search full-width */
	.admin-search-wrap {
		max-width: 100% !important;
		width: 100% !important;
	}
	/* Header controls stack */
	.admin-header-controls {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.625rem !important;
		width: 100% !important;
	}
	/* Stats in 2 columns */
	.stat-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 0.625rem !important;
	}
	.stat-card {
		padding: 0.875rem 0.75rem !important;
	}
}

@media (max-width: 480px) {
	.admin-btn {
		font-size: 0.75rem !important; /* 12px */
		padding: 0.5rem 0.75rem !important;
		gap: 0.25rem !important;
	}
	.admin-btn i {
		font-size: 0.75rem !important;
	}
	.abtn-label {
		font-size: 0.75rem !important;
	}
}

@media (max-width: 360px) {
	.admin-btn {
		font-size: 0.6875rem !important;
	}
	.abtn-label {
		font-size: 0.6875rem !important;
	}
	/* Stack all 4 buttons in a 2×2 grid */
	.admin-btn-row {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* ── E. ADMIN HEADER — RESPONSIVE LAYOUT ────────────────────────── */
.admin-header {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.75rem !important;
}
.admin-header h1 {
	font-size: clamp(0.875rem, 3vw, 1.125rem) !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	white-space: nowrap !important;
}

/* ── F. FLUID BODY TYPOGRAPHY ────────────────────────────────────── */
/* Ensure all admin prose scales between 13px–16px */
.admin-section p,
.admin-section td,
.admin-section th,
.admin-section label {
	font-size: clamp(0.8125rem, 1.6vw, 0.9375rem) !important;
}

/* ── G. SCROLL INDICATOR — subtle hint that table is scrollable ─── */
.admin-section {
	position: relative !important;
}
/* Fade-edge on right side to hint at horizontal scroll */
.admin-section::after {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 2rem !important;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.85)) !important;
	pointer-events: none !important;
	border-radius: 0 1rem 1rem 0 !important;
	display: none !important;
}
@media (max-width: 768px) {
	.admin-section::after {
		display: block !important;
	}
}