/* BoreReady trainer-portal mobile overrides — Slice 2.5 PR 14.
 *
 * Loaded via `web_include_css` in hooks.py. Every trainer page uses
 * `.tr-*` scoped classes (sign-off, exam, certify, trainees, etc.),
 * so one stylesheet can tighten mobile ergonomics across the whole
 * surface without touching 11 templates.
 *
 * Priority (per Jordan's field-use call + codex UX: mobile-first on
 * sign-offs): 44px+ tap targets, no iOS zoom-on-focus, nav that
 * wraps instead of overflowing, forms that don't truncate on 375px
 * viewports.
 */

/* Prevent iOS Safari from auto-zooming when focusing any input
 * smaller than 16px. Scoped to trainer form inputs so the LMS-side
 * inputs keep their upstream styling. */
@media (max-width: 640px) {
	.tr-field input,
	.tr-field textarea,
	.tr-field select,
	.tr-trainee-row input {
		font-size: 16px !important;
	}
}

/* Trainer nav wraps instead of overflowing on narrow screens.
 * Several pages duplicate this inline; this rule catches all of them. */
.tr-nav,
nav.tr-nav {
	flex-wrap: wrap;
}

/* On phones, tighter nav gap + touch-friendly tap targets. */
@media (max-width: 480px) {
	.tr-nav,
	nav.tr-nav {
		gap: 10px 14px !important;
		font-size: 0.9rem !important;
	}
	.tr-nav a,
	nav.tr-nav a {
		padding: 6px 2px;
		min-height: 32px;
		display: inline-flex;
		align-items: center;
	}
}

/* Enforce min tap-target across every trainer button/CTA. The
 * existing sign-off page hits this; some certify/exam buttons don't.
 * !important covers per-page overrides that set smaller padding. */
@media (max-width: 640px) {
	.tr-cta,
	.tr-cta-ghost,
	.tr-signoff-btn,
	.tr-open-btn,
	.tr-add-btn,
	button.tr-cta,
	a.tr-cta,
	a.tr-cta-ghost {
		min-height: 44px !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
}

/* Ghost-CTA chains (e.g. "Back to home" next to a primary button)
 * stack vertically on phones so neither gets cut off and both are
 * full-width tappable. */
@media (max-width: 480px) {
	.tr-actions {
		flex-direction: column;
	}
	.tr-actions .tr-cta,
	.tr-actions .tr-cta-ghost,
	.tr-actions .tr-signoff-btn,
	.tr-actions .tr-open-btn {
		width: 100% !important;
		margin-left: 0 !important;
	}
}

/* Ensure the start-training CSV two-column grid collapses cleanly
 * below the existing 720px breakpoint; the trainee header row had
 * a stale 5-column template that overflowed on 375px. The remove
 * column also widens to 44px so the X meets the tap-target floor. */
@media (max-width: 420px) {
	.tr-trainee-header,
	.tr-trainee-row {
		grid-template-columns: 1fr 44px !important;
	}
	.tr-trainee-header > span:not(:first-child):not(:last-child) {
		display: none;
	}
	.tr-trainee-row input {
		grid-column: 1;
	}
	.tr-trainee-row .tr-trainee-remove {
		grid-column: 2;
		grid-row: 1;
		min-width: 44px !important;
		min-height: 44px !important;
		font-size: 1.4rem !important;
	}
}

/* Toast centering tweak — on phones, the fixed 90% max-width can
 * still collide with the soft keyboard; bump the bottom offset so
 * it clears. */
@media (max-width: 480px) {
	.tr-toast {
		bottom: 16px;
		padding: 12px 18px;
		font-size: 0.9rem;
	}
}

/* Dashboard tile grid: single column at <480px so counts don't
 * wrap awkwardly under the number. */
@media (max-width: 480px) {
	.tr-dash-tiles {
		grid-template-columns: 1fr !important;
	}
}