/**
 * Vroomly Progress & Tracking Kit — mobile-first styles.
 * Uses Listeo dashboard classes and palette where possible.
 */

/* Fix for a Listeo dashboard-shell layout bug, not a Listeo file edit: Listeo's
   own #dashboard{display:flex} makes .dashboard-content a flex item, and flex
   items default to min-width:auto — meaning .dashboard-content refuses to
   shrink below the min-content width of ANY descendant anywhere on the page,
   however deeply nested. Our v2 marking sheet's intentionally non-shrinking,
   horizontally-scrolling pill row (see .vroomly-category-nav) has a large
   min-content width, which without this rule forces the ENTIRE dashboard wider
   than the viewport on mobile — not just our own tab, since .dashboard-content
   is the shared containing block for every dashboard tab on the page. This is
   the standard, side-effect-free fix: it only changes how far the element is
   ALLOWED to shrink under pressure, never forces a change when nothing demands
   it, so it's safe for every other dashboard page/tab too. */
.dashboard-content {
	min-width: 0;
}

/* Hide Listeo's own Dashboard Page template titlebar (H1 + breadcrumb)
 * site-wide, on every page using that template — Messages, Bookings, Wallet,
 * Calendar, our own two pages, etc. — not a Listeo file edit. That titlebar
 * is rendered unconditionally by template-dashboard.php for every page using
 * the template, independent of Listeo's own Page Top Section setting, so it
 * can't be turned off per-page from the Listeo side.
 *
 * `body.page-template-template-dashboard` is WordPress's own automatic
 * body_class() output for any page assigned this template — no plugin code
 * needed to add it (confirmed: Listeo's own CSS/JS already keys off this
 * same class). This CSS file is also now only enqueued on pages using this
 * template ({@see Vroomly_Dashboard::maybe_enqueue_assets()}), so #titlebar
 * can only ever be reachable on a page where this class is already present —
 * the class prefix here is kept anyway as an explicit, self-contained guard
 * that doesn't depend on cross-referencing the PHP enqueue condition.
 *
 * Listeo's own `#dashboard #titlebar` (2 IDs, specificity 200) already
 * overrides the plain `#titlebar` rule's padding/margin down to
 * `padding: 0; margin-bottom: 40px;` at every breakpoint (that override has
 * no media-query condition of its own, so it wins over Listeo's responsive
 * `#titlebar` variants regardless of width) — confirmed via live computed
 * styles, including at a simulated mobile width. A plain `#titlebar {
 * display: none }` (1 ID, specificity 100) would lose to it and do nothing;
 * this selector (2 IDs + 1 class + 1 type) wins outright, no !important
 * needed. display: none removes the whole box, so its 40px margin-bottom
 * collapses with it automatically — no separate spacing rule required. */
body.page-template-template-dashboard #dashboard #titlebar {
	display: none;
}

/* Trim the vertical gap left below the mobile nav trigger / above the
 * tab-and-content row, site-wide on every Dashboard Page template page.
 * Listeo's `.dashboard-content { padding: 40px 45px; padding-bottom: 0; }`
 * (desktop) and `padding: 40px 5%; padding-bottom: 0;` (@media max-width:
 * 991px) both use the same 40px top value at every breakpoint — confirmed,
 * so one rule with no media query covers all widths. Only padding-top is
 * touched: left/right/bottom are untouched, and this reduces rather than
 * removes the gap — 40px was excessive once the titlebar above it is gone,
 * but zero would read as cramped against the browser chrome / nav bar above.
 * Same specificity approach as the titlebar rule above (1 class + 1 type
 * beats Listeo's plain class selector outright). */
body.page-template-template-dashboard .dashboard-content {
	padding-top: 20px;
}

/* Restyle the "☰ Dashboard Navigation" mobile/tablet nav trigger bar,
 * site-wide on every Dashboard Page template page — replaces Listeo's solid
 * dark background (background-color: #333; color: #fff;) with a light,
 * semi-transparent, brand-matched look. Confirmed this element is only ever
 * visible at this same breakpoint (Listeo's own base rule sets
 * `display: none` unconditionally; the only `display: block` override is
 * inside this exact `@media (max-width: 991px)` block), so no other
 * breakpoint needs separate handling.
 *
 * Colours are built entirely from this plugin's own existing tokens/values —
 * no new colours introduced:
 *  - Background rgba(100, 188, 54, 0.15) is --vroomly-brand's RGB decomposed,
 *    the exact tint already used by .vroomly-edt-chip elsewhere.
 *  - Border rgba(100, 188, 54, 0.35) is the same green at higher intensity,
 *    for a defined edge (matches the ~30-35% intensity convention already
 *    used for the destructive delete-button border elsewhere in this file).
 *  - Text/icon colour is --vroomly-text (#333) rather than --vroomly-brand-
 *    dark (#3d7a22): computed contrast against the composited tint
 *    background (over #dashboard's #f7f7f7) is only 4.36:1 for
 *    --vroomly-brand-dark — under the WCAG AA minimum of 4.5:1 for this
 *    element's normal-weight, non-large text — while --vroomly-text reaches
 *    10.5:1, comfortably clearing AA. Confirmed by computing actual contrast
 *    ratios, not assumed. The icon has no colour rule of its own in Listeo's
 *    CSS, so it inherits this same colour automatically.
 *
 * Specificity (2 types + 2 classes) intentionally exceeds Listeo's
 * `a.dashboard-responsive-nav-trigger` (1 type + 1 class) inside the same
 * media query, so this wins outright regardless of stylesheet load order —
 * no !important needed. Only colour/background/border/margin-top are
 * touched; layout, border-radius and the click-to-toggle behaviour are all
 * untouched.
 *
 * `margin-top` halved (70px → 35px): confirmed this is Listeo's own static,
 * purely decorative breathing room above the trigger — NOT part of the
 * dynamic fixed-header-clearance mechanism. That mechanism (custom.js
 * setting #dashboard's padding-top to the live header height) is neutralised
 * at this exact breakpoint by Listeo's own `#dashboard { padding-top: 0
 * !important; }` (only relevant ≥992px, where the header is actually
 * `position: fixed`; at ≤991px `#header-container.fixed` is forced back to
 * `position: relative`, so there is nothing to clear). Reducing this margin
 * therefore carries no overlap risk at any width and leaves the dynamic
 * mechanism itself completely untouched. */
@media (max-width: 991px) {
	body.page-template-template-dashboard a.dashboard-responsive-nav-trigger {
		background: rgba(100, 188, 54, 0.15);
		border: 1px solid rgba(100, 188, 54, 0.35);
		color: var(--vroomly-text);
		margin-top: 35px;
	}

	/* Restyle the expanded/flyout "Dashboard Navigation" panel (.dashboard-nav)
	 * that opens beneath the trigger bar above, so the two read as one
	 * cohesive component instead of a light trigger sitting on Listeo's solid
	 * near-black panel (background-color: #181818; color: #eee;). Confirmed
	 * this panel is a completely separate component from the site's main
	 * mobile hamburger menu (.mmenu-trigger / .mobile-navigation-wrapper,
	 * defined in header-dashboard.php outside #dashboard entirely, driven by
	 * the bundled mmenu.min.js) — no shared markup, classes, or JS, so this
	 * cannot affect that menu.
	 *
	 * Background is plain white (#ffffff), not the trigger bar's green tint:
	 * the panel sits directly on #dashboard's own #f7f7f7 page background at
	 * this breakpoint, and white reads as a deliberately "elevated" card
	 * against it (helped by .dashboard-nav's existing, untouched
	 * box-shadow: 0 0 12px rgba(0,0,0,0.12) from Listeo's own base rule)
	 * rather than blending into the page. Not a new colour token — #ffffff is
	 * the plain white already implied by "off-white" throughout this file's
	 * design language, just not previously assigned its own variable.
	 * Text/icon colour still reuses --vroomly-text (#333): 12.62:1 against
	 * this background, comfortably clearing AA/AAA (up from the 10.5:1 it had
	 * against the old green tint). Icons have no colour rule of their own in
	 * Listeo's CSS, so they inherit this automatically, same as before. */
	body.page-template-template-dashboard .dashboard-nav {
		background-color: #ffffff;
	}

	body.page-template-template-dashboard .dashboard-nav ul li,
	body.page-template-template-dashboard .dashboard-nav ul li a {
		color: var(--vroomly-text);
	}

	/* Current-page item highlight, matching the desktop sidebar's own
	 * green-left-border + tinted-background pattern (there, Listeo's
	 * Customizer "main colour" theme option; here, this plugin's own
	 * --vroomly-brand-dark token, so no new colour is introduced). Values
	 * unchanged from last round — re-checked against the panel's new white
	 * background (previously composited over the panel's own green tint,
	 * now over plain #ffffff) and both still clear WCAG comfortably, so
	 * nothing here needed to move: --vroomly-text on the 0.25-alpha active
	 * tint over #ffffff is ~10.2:1 (was ~9.7:1); --vroomly-brand-dark's
	 * border against that same tint is ~4.25:1 (was ~4.0:1) — both still
	 * clear their respective AA minimums (4.5:1 text, 3:1 non-text UI).
	 * `.current_page_item` is included alongside `.active` because the
	 * account-menu items rendered via wp_nav_menu() (raw_html items) get
	 * that class from WordPress core, not Listeo's own template markup. */
	body.page-template-template-dashboard .dashboard-nav ul li.current_page_item,
	body.page-template-template-dashboard .dashboard-nav ul li.active,
	body.page-template-template-dashboard .dashboard-nav ul li:hover {
		background-color: rgba(100, 188, 54, 0.25);
		border-left: 3px solid var(--vroomly-brand-dark);
	}

	/* Icon/text vertical alignment fix: Listeo mixes two icon fonts (fa /
	 * sl-icon-*) with different intrinsic glyph metrics on the same inline
	 * line as the label text, with no flex centring of its own — the mismatch
	 * visible in the reference screenshot. flex + align-items: center
	 * vertically centres icon and text regardless of which font drew the
	 * glyph; flex-shrink: 0 on the icon keeps its reserved width from being
	 * squeezed once the link becomes a flex container. Only alignment is
	 * touched — spacing (padding-right/width on the icon) is untouched. */
	body.page-template-template-dashboard .dashboard-nav ul li a {
		display: flex;
		align-items: center;
	}

	body.page-template-template-dashboard .dashboard-nav ul li a i {
		flex-shrink: 0;
	}
}

/* Brand tokens (Listeo palette) */
:root {
	--vroomly-brand: #64bc36;
	--vroomly-brand-dark: #3d7a22;
	--vroomly-pass: #64bc36;
	--vroomly-fail: #ee3535;
	--vroomly-text: #333;
	--vroomly-muted: #66676b;
	--vroomly-border: #eaeaea;
	--vroomly-bg: #f9f9f9;
	--vroomly-radius: 4px;
}

/* Guarantee the native `hidden` attribute always wins inside this plugin's UI.
   Listeo's a.button/button.button rule (element+class, specificity 0,0,1,1)
   and our own .vroomly-print-link (tied 0,0,1,0 with [hidden] but loads
   later) both set `display` explicitly, which silently overrides the
   browser's default `[hidden] { display: none; }` (a UA-stylesheet rule with
   no special priority once any author rule matches) — so JS setting
   `el.hidden = true` was doing nothing visually. Scoped to .vroomly-wrap only. */
.vroomly-wrap [hidden] {
	display: none !important;
}

/* Base layout — 360px first */
.vroomly-wrap {
	padding: 0;
	margin: 0 0 24px;
}

.vroomly-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px;
	border-bottom: 1px solid var(--vroomly-border);
	background: var(--vroomly-bg);
}

.vroomly-tab {
	flex: 1 1 auto;
	min-height: 44px;
	min-width: 44px;
	padding: 10px 14px;
	border: 1px solid #e0e0e0;
	border-radius: var(--vroomly-radius);
	background: #fff;
	color: var(--vroomly-muted);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.vroomly-tab:hover,
.vroomly-tab:focus {
	border-color: var(--vroomly-muted);
	outline: none;
}

.vroomly-tab.active {
	background: var(--vroomly-brand);
	border-color: var(--vroomly-brand-dark);
	color: #fff;
}

.vroomly-tab-panels {
	padding: 16px;
}

.vroomly-tab-panel[hidden] {
	display: none !important;
}

.vroomly-loading,
.vroomly-placeholder {
	color: #888;
	font-size: 14px;
	padding: 12px 0;
}

.vroomly-field {
	margin-bottom: 16px;
}

.vroomly-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--vroomly-text);
	font-size: 14px;
}

.vroomly-select,
.vroomly-textarea,
.vroomly-edt-input {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid #e0e0e0;
	border-radius: var(--vroomly-radius);
	font-size: 16px;
	box-sizing: border-box;
}

.vroomly-textarea {
	min-height: 88px;
	resize: vertical;
}

/* Shared PASS/FAIL badges */
.vroomly-badge,
.vroomly-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #fff;
	white-space: nowrap;
}

.vroomly-badge-pass,
.vroomly-pill-pass,
.vroomly-pill.pass {
	background: var(--vroomly-pass);
	color: #fff;
}

.vroomly-badge-fail,
.vroomly-pill-fail,
.vroomly-pill.fail {
	background: var(--vroomly-fail);
	color: #fff;
}

.vroomly-badge-draft {
	background: #888;
	color: #fff;
}

.vroomly-badge-none,
.vroomly-pill-none {
	background: #e8e8e8;
	color: #666;
}

/* Single-brand progress bars - Consolidated and specificity boosted */
.vroomly-wrap .vroomly-progress-bar {
	height: 12px;
	background: #eee;
	border-radius: 6px;
	margin: 10px 0;
	overflow: hidden;
}

.vroomly-wrap .vroomly-progress-bar span,
.vroomly-wrap .vroomly-progress-bar .vroomly-edt-progress-fill {
	display: block;
	height: 100%;
	background: var(--vroomly-brand);
	border-radius: 6px;
	transition: width 0.3s ease;
}

/* Autosave status (mock test) */
.vroomly-autosave-status {
	font-size: 12px;
	color: var(--vroomly-muted);
	margin: 0 0 8px;
	min-height: 18px;
}

/* Student cards (instructor Students tab) */
.vroomly-student-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Listeo's own `.dashboard-list-box` sets `margin: 30px 0 0 0`, which landed on
   every card here (they carry that class for Listeo's visual language) and was
   silently added to the 14px flex gap above — 44px of real spacing where 14px
   was intended. Reset so .vroomly-student-cards' gap is the single source of
   card spacing. No Listeo file touched. */
.vroomly-wrap .vroomly-student-card {
	margin: 0;
	padding: 16px;
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	background: #fff;
}

.vroomly-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.vroomly-avatar {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vroomly-brand);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
}

.vroomly-card-title {
	flex: 1;
	min-width: 0;
}

/* Listeo's `.dashboard-list-box h4` (0,1,1) applies `padding: 25px 30px` and a
   `border-bottom` to ANY h4 inside a .dashboard-list-box — including this
   student name, which sits inside a card that carries that class. That padding
   was the large empty gap above the name, and the border a stray rule line.
   The rule below only ever set `margin`, so Listeo's padding went unopposed;
   the `.vroomly-wrap` prefix raises this to (0,3,0) so the reset wins outright.
   No Listeo file touched. */
.vroomly-wrap .vroomly-card-title .vroomly-student-name {
	margin: 0 0 4px;
	padding: 0;
	border-bottom: 0;
	background: transparent;
	font-size: 16px;
	font-weight: 600;
	color: var(--vroomly-text);
	word-break: break-word;
}

.vroomly-edt-chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 50px;
	background: rgba(100, 188, 54, 0.15);
	color: var(--vroomly-brand-dark);
	font-size: 12px;
	font-weight: 600;
}

.vroomly-mock-chips-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 14px;
	/* Badge labels are nowrap; without this the row's min-content width would
	   propagate up and force the dashboard wider than a mobile viewport — the
	   same overflow bug fixed in earlier rounds. */
	min-width: 0;
}

.vroomly-mock-chip {
	padding: 4px 8px;
	border-radius: var(--vroomly-radius);
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

.vroomly-mock-chip-pass {
	background: var(--vroomly-pass);
}

.vroomly-mock-chip-fail {
	background: var(--vroomly-fail);
}

/* Link affordance applies ONLY to .vroomly-mock-chip-link — the class the
   template adds exclusively to v2 badges that have a results token. A v1
   badge is a plain <span> that never matches these rules, so it keeps the
   default cursor, no hover state, and no focus ring, exactly as before. */
.vroomly-mock-chip-link {
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.vroomly-mock-chip-link:hover,
.vroomly-mock-chip-link:focus-visible {
	color: #fff;
	filter: brightness(0.9);
	text-decoration: underline;
}

.vroomly-mock-chip-link:focus-visible {
	outline: 2px solid var(--vroomly-brand-dark);
	outline-offset: 2px;
}

.vroomly-mock-chip-none {
	padding: 4px 8px;
	font-size: 11px;
	color: #888;
	background: #f0f0f0;
	border-radius: var(--vroomly-radius);
}

/* "+N more" is a real <button> (inline expand/collapse), styled to match the
   muted chip look it replaces. */
.vroomly-mock-chip-more {
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 600;
	color: #666;
	background: #f0f0f0;
	border: 1px solid transparent;
	border-radius: var(--vroomly-radius);
	cursor: pointer;
	white-space: nowrap;
}

.vroomly-mock-chip-more:hover {
	background: #e6e6e6;
	color: var(--vroomly-text);
}

.vroomly-mock-chip-more:focus-visible {
	outline: 2px solid var(--vroomly-brand-dark);
	outline-offset: 2px;
}

/* Destructive action, deliberately recessive: a rarely-used delete must not
   out-weigh the result badges, which are the card's everyday content.
   Compact, auto-width, and lightly tinted rather than full-width solid.
   Listeo's own `button.button` (0,1,1) sets background #66676b, padding,
   border:none and border-radius:50px on any <button class="button">, and
   `.dashboard-list-box .button` (0,2,0) overrides the padding again — which
   is why the previous outline styling never took effect and this rendered as
   a tall solid dark bar. `.vroomly-wrap button.…` is (0,2,1), beating both.
   Colours are derived from the existing --vroomly-fail token via color-mix
   against the card's white surface; the rgba() line above each is the
   identical fallback for browsers without color-mix() support, matching the
   tint convention already used by .vroomly-fault-count.g3 in this file. */
.vroomly-wrap button.vroomly-delete-records-btn {
	width: auto;
	min-height: 34px;
	padding: 7px 12px;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--vroomly-radius);
	background: rgba(238, 53, 53, 0.08);
	background: color-mix(in srgb, var(--vroomly-fail) 8%, #fff);
	color: var(--vroomly-fail);
	border: 1px solid rgba(238, 53, 53, 0.3);
	border: 1px solid color-mix(in srgb, var(--vroomly-fail) 30%, #fff);
}

/* Listeo paints a white overlay pseudo-element on hover for its own buttons;
   suppressed here so our own hover state below is what actually shows. */
.vroomly-wrap button.vroomly-delete-records-btn:before {
	content: none;
	display: none;
}

/* Intent is confirmed on hover/focus: the action commits to full strength. */
.vroomly-wrap button.vroomly-delete-records-btn:hover,
.vroomly-wrap button.vroomly-delete-records-btn:focus-visible {
	background: var(--vroomly-fail);
	border-color: var(--vroomly-fail);
	color: #fff;
}

.vroomly-wrap button.vroomly-delete-records-btn:focus-visible {
	outline: 2px solid var(--vroomly-fail);
	outline-offset: 2px;
}

.vroomly-wrap button.vroomly-delete-records-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Confirmation modal (client-rendered only — see DeleteRecordsDialog) */
.vroomly-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 99999;
}

.vroomly-modal {
	background: #fff;
	border-radius: var(--vroomly-radius);
	padding: 20px;
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
}

/* The dialog is a focused confirmation, not a page of text: title carries the
   student's name, one tinted block carries the counts, and the "kept" and
   warning lines are single dense sentences rather than separate bulleted
   sections. */
.vroomly-modal-title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--vroomly-text);
	padding: 0;
	line-height: 1.35;
}

.vroomly-modal-lead {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--vroomly-muted);
}

/* Counts are the user's main safety check, so they get the one tinted panel
   in the dialog — derived from --vroomly-bg, no new colour. */
.vroomly-modal .vroomly-modal-list {
	margin: 0;
	padding: 8px 12px 8px 28px;
	background: var(--vroomly-bg);
	border-radius: var(--vroomly-radius);
	font-size: 13px;
	color: var(--vroomly-text);
	list-style: disc;
}

.vroomly-wrap .vroomly-modal-list li,
.vroomly-modal-list li {
	padding: 1px 0;
	border-bottom: 0;
	background: transparent;
	font-size: 13px;
	line-height: 1.45;
}

.vroomly-modal-none,
.vroomly-modal-note {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--vroomly-muted);
	line-height: 1.45;
}

.vroomly-modal-warning {
	margin: 10px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--vroomly-fail);
	line-height: 1.45;
}

.vroomly-modal-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

/* Cancel and the destructive action must never read as interchangeable.
   Listeo's `button.button` (0,1,1) would paint both the same solid #66676b
   pill; `.vroomly-modal button.…` is (0,2,1) and wins. The modal is appended
   to <body>, outside .vroomly-wrap, so it is scoped on .vroomly-modal here. */
.vroomly-modal button.vroomly-modal-cancel,
.vroomly-modal button.vroomly-modal-confirm {
	flex: 0 0 auto;
	min-height: 40px;
	padding: 9px 16px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--vroomly-radius);
}

.vroomly-modal button.vroomly-modal-cancel:before,
.vroomly-modal button.vroomly-modal-confirm:before {
	content: none;
	display: none;
}

/* Quiet, plain option. */
.vroomly-modal button.vroomly-modal-cancel {
	background: transparent;
	color: var(--vroomly-muted);
	border: 1px solid var(--vroomly-border);
}

.vroomly-modal button.vroomly-modal-cancel:hover,
.vroomly-modal button.vroomly-modal-cancel:focus-visible {
	background: var(--vroomly-bg);
	color: var(--vroomly-text);
}

/* The single most important action in this context — the only solid,
   saturated colour in the dialog. */
.vroomly-modal button.vroomly-modal-confirm {
	background: var(--vroomly-fail);
	color: #fff;
	border: 1px solid var(--vroomly-fail);
}

.vroomly-modal button.vroomly-modal-confirm:hover,
.vroomly-modal button.vroomly-modal-confirm:focus-visible {
	filter: brightness(0.92);
}

.vroomly-modal button.vroomly-modal-cancel:focus-visible {
	outline: 2px solid var(--vroomly-muted);
	outline-offset: 2px;
}

.vroomly-modal button.vroomly-modal-confirm:focus-visible {
	outline: 2px solid var(--vroomly-fail);
	outline-offset: 2px;
}

.vroomly-modal button.vroomly-modal-confirm[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* .vroomly-profile-* below are shared with the student's EDT tab
   (templates/tabs/student-edt.php) and the instructor EDT logbook — they are
   NOT specific to the removed Students-tab profile panel. */
.vroomly-profile-lessons {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vroomly-profile-lesson {
	padding: 10px 0 10px 8px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	border-left: 3px solid transparent;
}

.vroomly-profile-lesson.is-done {
	border-left-color: var(--vroomly-pass);
}

.vroomly-profile-lesson.is-done .vroomly-lesson-name {
	font-weight: 600;
}

/* T1: lesson number badge globally.
 * Margin and vertical-align are for non-flex contexts (like student profile).
 * In flex contexts, they are overridden.
 */
.vroomly-lesson-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--vroomly-muted);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
	margin-right: 8px;
	vertical-align: middle;
}

.vroomly-lesson-date {
	display: block;
	font-size: 12px;
	color: #888;
	margin-top: 4px;
	margin-left: 32px;
}

/* Accordion (history, student results) */
.vroomly-history-accordion {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vroomly-accordion-item {
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	margin-bottom: 8px;
	background: #fff;
	overflow: hidden;
}

.vroomly-accordion-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 12px 14px;
	border: none;
	background: #fff;
	cursor: pointer;
	min-height: 44px;
	text-align: left;
	font-size: 14px;
	color: var(--vroomly-text);
}

.vroomly-accordion-header:hover,
.vroomly-accordion-header:focus {
	background: #fafafa;
	outline: none;
}

.vroomly-accordion-item.is-open .vroomly-accordion-header {
	border-bottom: 1px solid #f0f0f0;
}

.vroomly-history-date {
	font-weight: 600;
	flex: 1 1 auto;
	min-width: 80px;
}

.vroomly-history-visibility {
	font-size: 11px;
	color: #888;
	flex: 1 1 100%;
}

/* T8: Delete test button — sits after visibility label in accordion header */
.vroomly-delete-test-btn {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
	color: #bbb;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	min-width: 32px;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--vroomly-radius);
	transition: color 0.15s ease, background 0.15s ease;
	flex-shrink: 0;
	margin-left: auto;
}

.vroomly-delete-test-btn:hover,
.vroomly-delete-test-btn:focus {
	color: var(--vroomly-fail);
	background: rgba(238, 53, 53, 0.08);
	outline: none;
}

@media (min-width: 480px) {
	.vroomly-history-visibility {
		flex: 0 1 auto;
		margin-left: auto;
	}
}

.vroomly-accordion-body {
	padding: 14px;
	border-top: 1px solid #f5f5f5;
}

.vroomly-accordion-body[hidden] {
	display: none !important;
}

/* Round 9, item (b), corrected in round 10: the shared v2 result-tabs
 * content, embedded here on My Progress, needs to sit at the SAME outer
 * horizontal budget as the Instructor Panel's embedding (a bare div with no
 * padding of its own beyond .vroomly-tab-panels). What narrows it here that
 * doesn't exist there: .vroomly-accordion-item (the <li> itself) matches
 * Listeo's `.dashboard-list-box ul li { padding: 23px 30px }` (the same rule
 * the earlier Common Reasons fix dealt with, one nesting level up from that
 * one), unopposed, adding 30px per side around the item's entire content —
 * header included.
 *
 * That header row (badge/date) is a SIBLING of this body, shared by every
 * row in this list, v1 and v2 alike, and by the Instructor Panel's own
 * separate v1 Test History accordion — all of which still have that same
 * 30px Listeo inset today. That's a real, separate, pre-existing bug, not
 * part of this fix; resetting .vroomly-accordion-item's own padding here
 * would fix it only for v2 rows and make this list visually inconsistent
 * against its own v1 rows and every accordion elsewhere in the plugin. Left
 * untouched.
 *
 * Only this body — scoped via the modifier class the v2 branch of the
 * template adds to its own <li>, never to a v1 row's — bleeds out past the
 * item's excess 30px with a matching negative margin. Round 9 then ALSO
 * zeroed this body's own padding-left/right, on the theory that the
 * Instructor Panel has literally zero padding of its own around this
 * content — true, but only because nothing there is boxed: the Instructor
 * Panel has no card/border to sit flush against, so its "comfortable"
 * spacing is entirely .vroomly-tab-panels' padding, full stop. My Progress
 * DOES have a visible card (the accordion item's border), and a boxed
 * element with zero internal padding always reads as flush/cramped
 * regardless of how much space exists outside the box — that was the
 * over-correction reported in round 10. Restored: only the excess 30px is
 * cancelled; the body's own 14px left/right padding (from the base
 * .vroomly-accordion-body rule above, untouched) is left to apply
 * naturally, giving this content the same breathing room from its own card
 * edge that v1 rows in this same list already have. No Listeo file
 * touched. */
.vroomly-wrap .vroomly-accordion-item--result-tabs > .vroomly-accordion-body {
	margin-left: -30px;
	margin-right: -30px;
}

/* Breakdown component */
.vroomly-breakdown-summary {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--vroomly-muted);
}

.vroomly-breakdown-reason {
	font-size: 13px;
	color: var(--vroomly-fail);
	margin: 0 0 10px;
	font-weight: 600;
}

.vroomly-breakdown-section {
	margin-bottom: 12px;
}

.vroomly-breakdown-section h5 {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--vroomly-text);
}

.vroomly-breakdown-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vroomly-breakdown-categories li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 13px;
	border-bottom: 1px solid #f5f5f5;
}

.vroomly-breakdown-cat-name {
	flex: 1 1 140px;
	font-weight: 500;
}

.vroomly-breakdown-counts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* v2 breakdown rows (instructor Test History + student results) carry an
   automatic feedback block, so they stack instead of staying single-line. */
.vroomly-breakdown-categories--v2 li {
	flex-direction: column;
	align-items: flex-start;
	padding: 10px 0;
}

.vroomly-breakdown-feedback {
	margin-top: 6px;
	font-size: 12px;
	color: var(--vroomly-muted);
	line-height: 1.5;
}

.vroomly-breakdown-feedback strong {
	display: block;
	color: var(--vroomly-text);
	font-size: 12px;
	margin-bottom: 2px;
}

.vroomly-breakdown-feedback ol {
	margin: 4px 0 0;
	padding-left: 18px;
}

.vroomly-breakdown-feedback p {
	margin: 4px 0 0;
}

/* Round 5, item 1 (confirmed as a second instance of the same bug): identical
 * fix to .vroomly-result-fault-feedback ol li below — this "Common reasons"
 * <ol><li> (rendered by BreakdownComponent.feedbackHtmlV2 in vroomly.js) sits
 * inside li > ul.vroomly-breakdown-categories--v2 > ul.vroomly-history-accordion,
 * which has a .dashboard-list-box ancestor in both the instructor's expanded
 * Student summary panel and the student's My Progress accordion. The rule
 * above only ever reset the <ol> container, never the <li>, so Listeo's
 * `.dashboard-list-box ul li { padding: 23px 30px }` still reached through.
 * Same `.vroomly-wrap` specificity-boost approach, no Listeo file touched. */
.vroomly-wrap .vroomly-breakdown-feedback ol li {
	padding: 0;
	border-bottom: 0;
}

.vroomly-wrap .vroomly-breakdown-feedback ol li:hover {
	background-color: transparent;
}

.vroomly-fault-count {
	padding: 2px 8px;
	border-radius: var(--vroomly-radius);
	font-size: 11px;
	font-weight: 700;
}

.vroomly-fault-count.g1 {
	background: rgba(100, 188, 54, 0.15);
	color: var(--vroomly-brand-dark);
}

.vroomly-fault-count.g2 {
	background: rgba(185, 190, 28, 0.2);
	color: #6d7112;
}

.vroomly-fault-count.g3 {
	background: rgba(238, 53, 53, 0.12);
	color: #b51f1f;
}

/* T4: Feedback quote — left-border card style.
 * Explicitly suppress any quote glyphs from Listeo theme's blockquote rules.
 */
.vroomly-feedback-quote {
	quotes: none;
	background: #f7f9fb;
	border-left: 3px solid #61b2db;
	border-radius: var(--vroomly-radius);
	padding: 12px 14px;
	margin: 12px 0 0;
	font-size: 14px;
	color: #444;
	line-height: 1.5;
	width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
}

.vroomly-feedback-quote::before,
.vroomly-feedback-quote::after {
	content: none;
	display: none;
}

.vroomly-feedback-quote cite {
	display: block;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	color: var(--vroomly-muted);
	margin-bottom: 6px;
}

.vroomly-feedback-quote p {
	margin: 0;
}

/* EDT logbook (instructor) */
.vroomly-edt-lesson {
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	padding: 14px;
	margin-bottom: 10px;
	background: #fff;
}

.vroomly-edt-lesson-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

/* T1: The h4 itself is a flex row; gap:10px replaces the old margin-right on the badge.
 * Boosted specificity to override theme rules (like .dashboard-list-box h4) that 
 * force display: block or add padding-left.
 */
.vroomly-wrap .vroomly-edt-lesson-header h4 {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	text-indent: 0;
	font-size: 15px;
	flex: 1 1 200px;
	min-width: 0;
}

/* T1: badge is already a flex child — flex-shrink:0 prevents it deforming;
 * margin-right is explicitly removed here, gap handles the spacing.
 */
.vroomly-wrap .vroomly-edt-lesson-header h4 .vroomly-lesson-num {
	flex-shrink: 0;
	margin-right: 0;
}

.vroomly-lesson-title-text {
	flex: 1;
	min-width: 0;
	line-height: 1.4;
	overflow-wrap: break-word;
	word-break: break-word;
}

.vroomly-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
}

.vroomly-toggle input {
	width: 20px;
	height: 20px;
	margin: 0;
}

.vroomly-save-status {
	font-size: 13px;
	color: var(--vroomly-muted);
	margin: 8px 0 0;
}

.vroomly-edt-portal {
	margin-top: 20px;
}

/* Student EDT hero + lesson cards */
.vroomly-edt-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px 16px;
	margin-bottom: 20px;
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	background: #fff;
}

.vroomly-edt-encourage {
	margin: 12px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--vroomly-text);
}

.vroomly-progress-ring {
	position: relative;
	width: 120px;
	height: 120px;
}

.vroomly-progress-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.vroomly-ring-track {
	fill: none;
	stroke: #eee;
	stroke-width: 10;
}

.vroomly-ring-fill {
	fill: none;
	stroke: var(--vroomly-brand);
	stroke-width: 10;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.4s ease;
}

.vroomly-ring-label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	line-height: 1.2;
}

.vroomly-ring-fraction {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: var(--vroomly-text);
}

.vroomly-ring-percent {
	display: block;
	font-size: 12px;
	color: #888;
}

.vroomly-edt-lessons-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vroomly-edt-card {
	display: flex;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	background: #fff;
}

.vroomly-edt-card.is-completed {
	border-left: 4px solid var(--vroomly-pass);
}

.vroomly-edt-card.is-pending {
	opacity: 0.85;
	background: #fafafa;
}

.vroomly-edt-badge {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--vroomly-muted);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
}

.vroomly-edt-card.is-completed .vroomly-edt-badge {
	background: var(--vroomly-pass);
}

.vroomly-edt-card-body {
	flex: 1;
	min-width: 0;
	position: relative;
}

.vroomly-edt-card-body h4 {
	margin: 0 0 6px;
	font-size: 15px;
	word-break: break-word;
}

.vroomly-edt-check {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--vroomly-pass);
	font-size: 18px;
	font-weight: 700;
}

.vroomly-edt-date {
	font-size: 13px;
	color: #888;
	margin: 0 0 8px;
}

.vroomly-edt-upcoming {
	font-size: 12px;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-weight: 600;
}

/* Mock test marking sheet */
.vroomly-mock-status {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	border-radius: var(--vroomly-radius);
	margin-bottom: 14px;
	font-weight: 600;
}

.vroomly-status-pass {
	background: rgba(100, 188, 54, 0.15);
	border: 1px solid var(--vroomly-pass);
	color: var(--vroomly-brand-dark);
}

.vroomly-status-fail {
	background: rgba(238, 53, 53, 0.12);
	border: 1px solid var(--vroomly-fail);
	color: #b51f1f;
}

.vroomly-status-label {
	font-size: 18px;
	letter-spacing: 0.5px;
}

.vroomly-status-detail {
	font-size: 13px;
	font-weight: 500;
}

/* T5: Reason list inside the PASS/FAIL banner */
.vroomly-status-reasons {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
}

.vroomly-status-reasons li {
	padding: 2px 0;
}

.vroomly-mock-section {
	margin-bottom: 18px;
}

.vroomly-mock-section h4 {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--vroomly-text);
	border-bottom: 1px solid #eee;
	padding-bottom: 6px;
}

.vroomly-fault-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.vroomly-fault-item {
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	padding: 10px;
	background: #fff;
}

.vroomly-fault-label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
	color: #444;
}

.vroomly-grade-row {
	display: flex;
	gap: 8px;
}

.vroomly-grade-btn {
	flex: 1;
	min-height: 48px;
	min-width: 44px;
	border: 2px solid transparent;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transition: transform 0.1s ease;
	position: relative;
	padding-bottom: 28px;
}

.vroomly-grade-btn:active {
	transform: scale(0.97);
}

.vroomly-grade-btn.grade-1 {
	background: rgba(100, 188, 54, 0.12);
	border-color: var(--vroomly-pass);
	color: var(--vroomly-brand-dark);
}

.vroomly-grade-btn.grade-2 {
	background: rgba(185, 190, 28, 0.15);
	border-color: #b9be1c;
	color: #6d7112;
}

.vroomly-grade-btn.grade-3 {
	background: rgba(238, 53, 53, 0.12);
	border-color: var(--vroomly-fail);
	color: #b51f1f;
}

.vroomly-grade-btn .vroomly-grade-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.vroomly-grade-btn .vroomly-grade-count {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
}

.vroomly-grade-decrement {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	min-width: 44px;
	min-height: 44px;
	width: 44px;
	height: 44px;
	border: 1px solid #ddd;
	border-radius: var(--vroomly-radius);
	background: #f5f5f5;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.vroomly-mock-actions {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

/* Container for the Print button — shown only on finalized tests, below the action row */
.vroomly-print-action {
	margin-top: 12px;
}

.vroomly-action-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.vroomly-action-row--two .button {
	min-height: 44px;
	flex: 1 1 calc(50% - 5px);
}

.vroomly-action-row .button {
	min-height: 44px;
}

.vroomly-mock-history {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

.vroomly-mock-history h4 {
	margin: 0 0 12px;
	font-size: 15px;
}

/* Student mock results */
.vroomly-student-results {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vroomly-result-card {
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	background: #fff;
	overflow: hidden;
}

.vroomly-result-header {
	flex-direction: column;
	align-items: flex-start !important;
}

.vroomly-result-badge-lg .vroomly-badge {
	font-size: 14px;
	padding: 6px 16px;
}

.vroomly-result-date {
	font-size: 15px;
	font-weight: 600;
}

.vroomly-result-instructor,
.vroomly-result-faults {
	font-size: 13px;
	color: #888;
}

.vroomly-print-link {
	display: inline-block;
	margin-top: 12px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid #e0e0e0;
	border-radius: var(--vroomly-radius);
	background: #f5f5f5;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	color: var(--vroomly-muted);
}

.vroomly-print-link:hover {
	background: #eee;
}

.vroomly-disclaimer {
	font-size: 12px;
	color: #888;
	margin-top: 16px;
	line-height: 1.5;
}

.vroomly-disclaimer-inline {
	margin-top: 12px;
	margin-bottom: 0;
}

/* T7: Stepper row — ensure counters never overflow on narrow screens */
.vroomly-stepper-row {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.vroomly-stepper {
	flex: 1;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	overflow: hidden;
}

.vroomly-stepper-label {
	background: #f5f5f5;
	color: #555;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	padding: 4px;
	border-bottom: 1px solid var(--vroomly-border);
}

.vroomly-stepper-controls {
	display: flex;
	align-items: stretch;
	height: 36px;
}

.vroomly-stepper-btn {
	background: #fff;
	border: none;
	width: 28px;
	color: var(--vroomly-brand-dark);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.vroomly-stepper-btn:hover {
	background: #eef8ea;
}

.vroomly-grade-count {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--vroomly-text);
	border-left: 1px solid var(--vroomly-border);
	border-right: 1px solid var(--vroomly-border);
	background: #fff;
}

/* Color coding for grades */
.vroomly-stepper.grade-3 .vroomly-stepper-label { background: #ffebee; color: #c62828; }
.vroomly-stepper.grade-3 .vroomly-stepper-btn { color: #c62828; }
.vroomly-stepper.grade-3 .vroomly-stepper-btn:hover { background: #ffeaec; }

.vroomly-stepper.grade-2 .vroomly-stepper-label { background: #fff3e0; color: #ef6c00; }
.vroomly-stepper.grade-2 .vroomly-stepper-btn { color: #ef6c00; }
.vroomly-stepper.grade-2 .vroomly-stepper-btn:hover { background: #fff3e0; }

/* v2 only (item 9, round 3): single row — grade label on the left,
   minus/value/plus grouped on the right — instead of two stacked rows.
   Scoped to v2's own layout wrapper so v1's stepper (same shared classes)
   is completely unaffected, matching the standing "don't touch v1
   rendering" constraint. Pure CSS restructure — renderStepperV2() in JS
   already emits this exact markup; only how it displays changes, and
   values are stored/read/calculated identically either way. Applies at
   every breakpoint (no media query) — also shortens each subcategory's
   height on mobile, helping the item 1 overflow fix. */
.vroomly-mock-v2-layout .vroomly-stepper {
	flex-direction: row;
	align-items: stretch;
}

.vroomly-mock-v2-layout .vroomly-stepper-label {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 10px;
	border-bottom: none;
	border-right: 1px solid var(--vroomly-border);
}

.vroomly-mock-v2-layout .vroomly-stepper-controls {
	flex: 1;
}

/* v2 marking sheet: category sections stay vertically stacked (same pattern
   as v1's .vroomly-mock-section), each subcategory row is a collapsed-by-
   default tap-to-expand item — two levels only, no third tier. */
.vroomly-subcat-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vroomly-subcat-item {
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	background: #fff;
	overflow: hidden;
}

.vroomly-subcat-header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	min-height: 44px;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.vroomly-subcat-label {
	flex: 1 1 auto;
	font-size: 13px;
	font-weight: 600;
	color: #444;
}

.vroomly-subcat-counts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vroomly-subcat-caret {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--vroomly-muted);
	border-bottom: 2px solid var(--vroomly-muted);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	flex: 0 0 auto;
}

.vroomly-subcat-item.is-open .vroomly-subcat-caret {
	transform: rotate(-135deg);
}

.vroomly-subcat-body {
	padding: 0 12px 12px;
	border-top: 1px solid var(--vroomly-border);
	padding-top: 12px;
}

/* Per-subcategory feedback field (v2, replaces the old whole-test textarea).
   Read-only variant shown instead once a test is finalized. */
.vroomly-subcat-note-field {
	margin-top: 10px;
}

.vroomly-subcat-note-input {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	padding: 8px 10px;
	font: inherit;
	font-size: 13px;
	resize: vertical;
}

.vroomly-subcat-note-readonly {
	margin-top: 10px;
	padding: 10px;
	background: #f7f7f5;
	border-radius: var(--vroomly-radius);
	font-size: 12px;
	line-height: 1.5;
	color: var(--vroomly-text);
}

.vroomly-subcat-note-readonly strong {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--vroomly-muted);
	margin-bottom: 4px;
}

.vroomly-subcat-note-readonly p {
	margin: 0;
}

/* Legacy whole-test feedback, read-only (v2 tests that had it before
   per-subcategory notes existed — never written to by the new UI). */
.vroomly-legacy-feedback {
	margin-bottom: 16px;
	padding: 12px;
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	background: #f7f7f5;
}

.vroomly-legacy-feedback h4 {
	margin: 0 0 6px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--vroomly-muted);
}

.vroomly-legacy-feedback p {
	margin: 0;
	font-size: 13px;
}

/* Round 5, item 2 (layout updated round 6, item 1): Student and Test History
   are each a single full-width boxed <select> — the field's own first option
   doubles as its label (e.g. a disabled "Select Student" placeholder shown
   until a real student is chosen, at which point their name takes its
   place), with aria-label carrying the same text for screen readers once
   the visible option text is replaced. No separate <label> element. This
   box/tint/placeholder styling is identical at every width; only the row
   layout (stacked vs side by side) varies, via .vroomly-field-row below and
   its 768px+ override further down. min-width: 0 is still required here for
   the same reason as before: a flex/grid or block box refuses to shrink
   below a descendant's min-content width otherwise, and a <select> showing
   a long student name has significant min-content width — this is what
   prevents the mobile horizontal-overflow regression from earlier rounds. */
.vroomly-field-row {
	/* No layout rules at the base (mobile) width — .vroomly-field-box
	   children stack via their own margin-bottom below, unchanged from
	   before this row wrapper existed. Row layout is added only at 768px+,
	   the same breakpoint already used for .vroomly-mock-v2-layout's
	   two-pane category/subcategory split, for consistency. */
}

.vroomly-field-box {
	margin-bottom: 8px;
}

/* Extends the base .vroomly-select (width:100%, padding, border, radius,
   box-sizing already come from there) with the light background tint and
   ellipsis truncation this pattern needs. */
.vroomly-select-boxed {
	background: var(--vroomly-bg);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* v2 single-category-focus navigation: a row of pills on narrow viewports.
   Tapping one shows only that category's subcategories — every other
   category is fully removed from the DOM until selected again, not just
   scrolled past (renderSheetV2() re-renders the whole layout per tap). */
.vroomly-mock-v2-layout {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Root cause of the mobile overflow bug: this is a flex item of Listeo's
	   own .dashboard-content (itself flex:1 inside #dashboard{display:flex}).
	   Flex items default to min-width:auto, i.e. they refuse to shrink below
	   their content's min-content width. The pill nav below is intentionally
	   nowrap/non-shrinking (so it can scroll), which made that min-content
	   width huge and forced the whole dashboard wider than the viewport on
	   mobile. min-width:0 breaks that propagation right here, after which
	   .vroomly-category-nav's own overflow-x:auto correctly contains and
	   scrolls the pill row within the viewport, as intended. No Listeo file
	   touched — this is the correct place to stop the propagation, at our
	   own component's boundary. */
	min-width: 0;
}

.vroomly-category-nav {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	min-width: 0;
}

.vroomly-category-pill {
	flex: 0 0 auto;
	white-space: nowrap;
	border: 1px solid var(--vroomly-border);
	border-radius: 999px;
	background: #fff;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vroomly-muted);
	cursor: pointer;
	min-height: 36px;
}

.vroomly-category-pill.is-active {
	background: var(--vroomly-brand-dark, #4a7c1f);
	border-color: var(--vroomly-brand-dark, #4a7c1f);
	color: #fff;
}

.vroomly-category-content h4 {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--vroomly-text);
	border-bottom: 1px solid #eee;
	padding-bottom: 6px;
}

/* Status area repurposed for v2: running Total during marking, or the
   shareable results link once finalized — never a PASS/FAIL banner. */
.vroomly-status-total .vroomly-status-label,
.vroomly-status-link .vroomly-status-label {
	color: var(--vroomly-text);
}

/* "Total" row: its own independent compact label-left/value-right pattern
   (unrelated to and untouched by the Student/Test History redesign above —
   this rule is intentionally self-contained), row-always at every width —
   not gated behind the min-width:768px block below, which still (correctly,
   unchanged) only
   flips v1's PASS/FAIL banner and the results-link state to a row on
   tablet+ (a long reasons list or a full URL needs the mobile column
   layout; only Total, per this round's request, goes row-always). The
   compound selector (.vroomly-mock-status.vroomly-status-total) outranks
   both the plain .vroomly-mock-status base rule and that tablet override. */
.vroomly-mock-status.vroomly-status-total {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	margin-bottom: 10px;
	background: var(--vroomly-bg);
}

.vroomly-status-total .vroomly-status-label {
	flex: 0 0 auto;
}

.vroomly-status-total .vroomly-status-detail {
	min-width: 0;
}

.vroomly-status-link .vroomly-status-detail a {
	word-break: break-all;
	color: var(--vroomly-brand-dark, #4a7c1f);
}

.vroomly-status-link .vroomly-copy-link-btn {
	margin-left: 8px;
	min-height: 32px;
	padding: 4px 10px;
	font-size: 12px;
}

/* Tablet */
@media (min-width: 768px) {
	.vroomly-tabs {
		padding: 20px 24px;
	}

	.vroomly-tab-panels {
		padding: 24px;
	}

	.vroomly-fault-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* v2 sheet: two-pane layout — category list on the left (the same pill
	   markup as mobile, just reflowed into a vertical column), the active
	   category's subcategory content on the right. Same single-category-focus
	   interaction as narrow viewports, different presentation. */
	.vroomly-mock-v2-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	/* Round 6, item 1: Student and Test History side by side (50/50) at this
	   same breakpoint, instead of stacked. min-width: 0 on the flex children
	   is required — same reasoning as .vroomly-mock-v2-layout above, a flex
	   item otherwise refuses to shrink below its <select>'s min-content
	   width, which is exactly the class of bug that caused the mobile
	   overflow fixed in earlier rounds. When Test History's wrap is
	   [hidden] (v1 tests, or no student picked yet), it's removed from flex
	   layout entirely and Student alone fills the row — no gap or blank
	   column left behind. */
	.vroomly-field-row {
		display: flex;
		gap: 10px;
	}

	.vroomly-field-row .vroomly-field-box {
		flex: 1 1 0;
		min-width: 0;
		margin-bottom: 0;
	}

	.vroomly-category-nav {
		flex-direction: column;
		flex: 0 0 200px;
		overflow-x: visible;
		position: sticky;
		top: 12px;
	}

	.vroomly-category-pill {
		text-align: left;
		border-radius: var(--vroomly-radius);
	}

	.vroomly-category-content {
		flex: 1;
		min-width: 0;
	}

	.vroomly-mock-status {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.vroomly-edt-hero {
		flex-direction: row;
		justify-content: center;
		gap: 24px;
		text-align: left;
	}

	.vroomly-edt-encourage {
		margin: 0;
		max-width: 280px;
	}

	.vroomly-student-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop */
@media (min-width: 1200px) {
	.vroomly-fault-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.vroomly-tab {
		flex: 0 1 auto;
	}
}

/* Hide print root on screen completely */
#vroomly-print-root {
	display: none;
}

/* T3: Same-page print approach.
 * Strategy: hide everything on the page, then selectively restore only the
 * print root and its ancestors. This survives theme updates without needing
 * to enumerate theme class names.
 */
@media print {
	@page {
		margin: 12mm;
	}

	body > * {
		display: none !important;
	}

	/* Restore only the print root - normal flow allows pagination */
	#vroomly-print-root {
		display: block !important;
		width: 100%;
		margin: 0;
		padding: 0;
		background: #fff;
		color: #000;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Keep colour on PASS/FAIL pills */
	.vroomly-pill-pass {
		background: #64bc36 !important;
		color: #fff !important;
	}

	.vroomly-pill-fail {
		background: #ee3535 !important;
		color: #fff !important;
	}

	/* Prevent awkward page-breaks mid-row or mid-section */
	.vroomly-print-table tr,
	.vroomly-print-sheet > * {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.vroomly-print-sheet {
		padding: 0;
		font-size: 12px;
		color: #000;
	}

	.vroomly-print-footer {
		margin-top: 16px;
		padding-top: 12px;
		border-top: 1px solid #ccc;
		font-size: 10px;
	}

	.vroomly-print-table {
		width: 100%;
		border-collapse: collapse;
		margin: 16px 0;
	}

	.vroomly-print-table th,
	.vroomly-print-table td {
		border: 1px solid #ccc;
		padding: 6px 8px;
		text-align: left;
	}

	/* v2 print report: faulted-subcategories-only layout (print-mock-test-v2.php) */
	.vroomly-print-v2-category {
		margin: 14px 0;
	}

	.vroomly-print-v2-category h3 {
		font-size: 13px;
		margin: 0 0 8px;
		padding-bottom: 4px;
		border-bottom: 1px solid #ccc;
	}

	.vroomly-print-v2-subcategory {
		margin-bottom: 10px;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.vroomly-print-v2-subcategory-head {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 8px;
		font-size: 12px;
		font-weight: 700;
	}

	.vroomly-print-v2-feedback {
		margin-top: 4px;
		font-size: 11px;
		color: #333;
	}

	.vroomly-print-v2-feedback h4 {
		margin: 0 0 2px;
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: #666;
	}

	.vroomly-print-v2-feedback ol {
		margin: 0;
		padding-left: 16px;
	}

	.vroomly-print-v2-feedback p {
		margin: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Result/Faults tabs (templates/partials/result-faults-tabs.php)      */
/* Shared by the standalone results page AND the embedded fragment     */
/* injected into the Instructor Panel (round 3, items 5-8) — lives here */
/* rather than an inline <style> specifically so both contexts match.  */
/* ------------------------------------------------------------------ */

.vroomly-result-card {
	background: #fff;
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	padding: 24px;
}

.vroomly-result-header h1 {
	font-size: 21px;
	margin: 0 0 8px;
}

.vroomly-result-header p {
	margin: 3px 0;
	font-size: 14px;
	color: var(--vroomly-muted);
}

.vroomly-result-back-link {
	max-width: 720px;
	margin: 0 auto 12px;
	font-size: 14px;
}

.vroomly-result-back-link a {
	color: var(--vroomly-brand-dark);
	text-decoration: none;
	font-weight: 600;
}

.vroomly-result-back-link a:hover {
	text-decoration: underline;
}

/* Item 8: a real segmented tab control — pill-group background, active tab
   raised on a white pill — instead of two plain underline buttons. */
.vroomly-result-tabs {
	display: flex;
	gap: 4px;
	margin: 22px 0 20px;
	padding: 4px;
	background: #f0f0ec;
	border-radius: 10px;
}

.vroomly-result-tab-btn {
	flex: 1;
	border: none;
	background: none;
	padding: 11px 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--vroomly-muted);
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.vroomly-result-tab-btn.is-active {
	background: #fff;
	color: var(--vroomly-text);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vroomly-result-tab-panel {
	display: none;
}

.vroomly-result-tab-panel.is-active {
	display: block;
}

/* Item 6: Result tab — same content (PASS/FAIL, margins, reasons,
   disclaimer), larger/more legible sizing and a more polished card. */
.vroomly-result-banner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	padding: 26px 22px;
	border-radius: 12px;
	background: rgba(102, 103, 107, 0.06);
}

.vroomly-result-banner-pass {
	background: rgba(100, 188, 54, 0.1);
}

.vroomly-result-banner-fail {
	background: rgba(238, 53, 53, 0.08);
}

.vroomly-result-pill {
	font-size: 20px;
	padding: 10px 28px;
	letter-spacing: 0.02em;
}

.vroomly-result-margins {
	font-size: 15px;
	color: var(--vroomly-text);
}

.vroomly-result-reasons {
	font-size: 14px;
}

.vroomly-result-disclaimer {
	margin: 20px 0 0;
	font-size: 12px;
	color: var(--vroomly-muted);
	line-height: 1.5;
}

.vroomly-general-note {
	margin-bottom: 18px;
	padding: 14px;
	background: #f7f7f5;
	border-radius: var(--vroomly-radius);
	border: 1px solid var(--vroomly-border);
}

.vroomly-general-note h4 {
	margin: 0 0 6px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--vroomly-muted);
}

.vroomly-general-note p {
	margin: 0;
	font-size: 14px;
}

/* Item 7: Faults tab — its own dedicated classes (not the shared
   .vroomly-breakdown-* used by the student dashboard / instructor profile
   panel, which round 3 doesn't touch) so this list can be tightened and
   enlarged independently. Thin one-line dividers instead of wide spaced
   blocks — a noticeably denser, more scannable list. */
.vroomly-result-fault-category {
	margin-bottom: 20px;
}

.vroomly-result-fault-category:last-child {
	margin-bottom: 0;
}

.vroomly-result-fault-category h5 {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--vroomly-text);
}

.vroomly-result-fault-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vroomly-result-fault-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0ec;
	font-size: 14px;
}

/* Round 9, items (a)/(c): Listeo's own `.dashboard-list-box ul ul li` matches
 * ANY li nested two <ul> levels deep inside .dashboard-list-box, and sets
 * display: inline-block (plus padding/border/background resets). This item
 * sits at exactly that depth on My Progress — ul.vroomly-history-accordion >
 * li.vroomly-accordion-item > ... > ul.vroomly-result-fault-list >
 * li.vroomly-result-fault-item — but only ONE <ul> deep on the Instructor
 * Panel's embedded view (renderResultTabsEmbedded() in vroomly.js replaces
 * #vroomly-mock-sheet's content directly, no accordion wrapper there), so
 * Listeo's rule never matches there. inline-block silently breaks our own
 * display:flex above: items shrink to their own content width and flow side
 * by side instead of stacking (a), and each item's title+badge children —
 * no longer flex children — wrap onto their own line inside that narrow box
 * (c), same root cause. Confirmed via live computed styles: the Instructor
 * Panel reports display:flex as intended; My Progress reports
 * display:inline-block, sourced from this exact Listeo rule. Same
 * `.vroomly-wrap` specificity-boost pattern as the earlier Common Reasons
 * fix — (0,2,0) beats Listeo's (0,1,3) outright regardless of stylesheet
 * order or nesting depth, so this is correct everywhere the shared partial
 * is used, not just where the container happens to be narrow enough by
 * coincidence. Placed before the :last-child rule below so that rule (same
 * specificity) still wins its tie via source order. No Listeo file touched. */
.vroomly-wrap .vroomly-result-fault-item {
	display: flex;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0ec;
}

.vroomly-result-fault-item:last-child {
	border-bottom: none;
}

.vroomly-result-fault-name {
	flex: 1 1 160px;
	font-weight: 600;
	color: var(--vroomly-text);
}

.vroomly-result-fault-counts {
	display: flex;
	gap: 6px;
}

.vroomly-result-fault-feedback {
	flex: 1 1 100%;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--vroomly-muted);
}

.vroomly-result-fault-feedback strong {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--vroomly-muted);
	margin-bottom: 2px;
}

.vroomly-result-fault-feedback ol {
	margin: 0;
	padding-left: 18px;
}

/* Round 6, item 3: confirmed via computed styles that this <p> — not the
 * numbered <ol><li> below — was the mismatched one. Listeo's own `body p {
 * font-size: 16px }` directly matches this element, and a directly-matching
 * declaration always wins over an inherited value regardless of specificity
 * (inheritance is only a fallback when nothing matches directly). So this
 * <p> was rendering at Listeo's 16px instead of inheriting the 13px set on
 * the .vroomly-result-fault-feedback container above, while the <ol><li>
 * case had no competing direct match and correctly inherited 13px already —
 * the single-reason case was the one that looked "too big", not the
 * multi-reason case that looked "too small". Setting font-size explicitly
 * here (specificity (0,1,1) vs Listeo's (0,0,2)) fixes it without touching
 * any Listeo file. */
.vroomly-result-fault-feedback p {
	margin: 0;
	font-size: 13px;
}

/* Round 5, item 1: Listeo's own `.dashboard-list-box ul li { padding: 23px 30px }`
 * is a descendant selector — it matches ANY li nested anywhere inside a ul that's
 * nested anywhere inside .dashboard-list-box, no matter the depth. This numbered
 * "Common reasons" <li> sits inside <ol> > .vroomly-result-fault-feedback >
 * li.vroomly-result-fault-item > ul.vroomly-result-fault-list, and that ul has a
 * .dashboard-list-box ancestor whenever this shared partial (result-faults-tabs.php)
 * is reopened via the Instructor Panel's Test History dropdown — hence the wide
 * side padding there, while the standalone results page (no dashboard chrome, no
 * such ancestor) never showed it. The `.vroomly-result-fault-feedback ol` rule
 * above only ever reset the <ol> container, never the <li> itself, which is the
 * gap Listeo's rule was reaching through. The `.vroomly-wrap` prefix here isn't
 * chasing Listeo's selector chain — it's our own ancestor class, added purely to
 * push our specificity (0,2,2) above Listeo's (0,1,2) so this wins outright
 * regardless of stylesheet order or how deep this component ends up nested. No
 * Listeo file touched. */
.vroomly-wrap .vroomly-result-fault-feedback ol li {
	padding: 0;
	border-bottom: 0;
}

.vroomly-wrap .vroomly-result-fault-feedback ol li:hover {
	background-color: transparent;
}

/* ------------------------------------------------------------------ */
/* New Booking page (Round A: lesson-type picker + student list)       */
/* Div-based tappable rows throughout — no <ul><li>, no Listeo card    */
/* classes reused. Both option groups share the same visual language   */
/* as .vroomly-grade-btn/.vroomly-category-pill elsewhere: a plain     */
/* bordered row that fills brand-tinted + bordered when selected.      */
/* ------------------------------------------------------------------ */

.vroomly-nb-section {
	margin-bottom: 24px;
}

.vroomly-nb-section:last-child {
	margin-bottom: 0;
}

.vroomly-nb-heading {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--vroomly-text);
	border-bottom: 1px solid #eee;
	padding-bottom: 6px;
}

.vroomly-nb-service-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vroomly-nb-service-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	background: #fff;
	cursor: pointer;
	touch-action: manipulation;
}

.vroomly-nb-service-row:hover,
.vroomly-nb-service-row:focus-visible {
	border-color: var(--vroomly-muted);
	outline: none;
}

.vroomly-nb-service-row:focus-visible {
	outline: 2px solid var(--vroomly-brand-dark);
	outline-offset: 2px;
}

.vroomly-nb-service-row.is-selected {
	background: rgba(100, 188, 54, 0.12);
	border-color: var(--vroomly-brand-dark);
}

.vroomly-nb-service-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--vroomly-text);
}

.vroomly-nb-service-price {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--vroomly-muted);
}

.vroomly-nb-service-row.is-selected .vroomly-nb-service-price {
	color: var(--vroomly-brand-dark);
}

/* Search input reuses the base .vroomly-select box styling (width,
   min-height, border, radius, font-size, padding, border, box-sizing — all
   from the shared rule earlier in this file, identical to the Phone/Date
   fields it must align with). It is a plain type="text" input (see
   templates/new-booking.php) — not type="search" — specifically because
   browser default styles for input[type="search"] (element+attribute
   selector, specificity 0-1-1) outrank this single-class selector
   (0-1-0), which is what made the previous -webkit-appearance/box-sizing
   overrides and ::-webkit-search-* pseudo-element resets an incomplete
   fight against native styling rather than a real fix. type="search"
   offered no benefit here anyway — filtering is entirely our own JS
   ('input' event), with no native submit-on-Enter or native suggestions
   intended. Only margin is needed here now; width/box-sizing/padding/
   border all come from the shared .vroomly-select rule with nothing left
   to override. */
.vroomly-nb-student-search {
	margin-bottom: 10px;
}

.vroomly-nb-student-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* min-width: 0 guards the same class of mobile-overflow bug fixed
	   elsewhere in this file: a flex/block ancestor otherwise refuses to
	   shrink below a long student name's min-content width. */
	min-width: 0;
}

.vroomly-nb-student-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 10px 14px;
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	background: #fff;
	cursor: pointer;
	touch-action: manipulation;
}

.vroomly-nb-student-row:hover,
.vroomly-nb-student-row:focus-visible {
	border-color: var(--vroomly-muted);
	outline: none;
}

.vroomly-nb-student-row:focus-visible {
	outline: 2px solid var(--vroomly-brand-dark);
	outline-offset: 2px;
}

.vroomly-nb-student-row.is-selected {
	background: rgba(100, 188, 54, 0.12);
	border-color: var(--vroomly-brand-dark);
}

.vroomly-nb-student-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vroomly-nb-student-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--vroomly-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vroomly-nb-student-email {
	font-size: 12px;
	color: var(--vroomly-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vroomly-nb-no-matches {
	padding: 12px 0 0;
}

/* Round B additions below: mode toggle, show-all, new-student fields,
   date/time row, live preview banner, submit/confirmation states. */

.vroomly-nb-mode-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.vroomly-wrap button.vroomly-nb-mode-btn {
	flex: 1;
	min-height: 44px;
	padding: 10px 12px;
	margin: 0;
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	background: #fff;
	color: var(--vroomly-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.vroomly-wrap button.vroomly-nb-mode-btn:before {
	content: none;
	display: none;
}

.vroomly-wrap button.vroomly-nb-mode-btn.active {
	background: var(--vroomly-brand);
	border-color: var(--vroomly-brand-dark);
	color: #fff;
}

.vroomly-nb-show-all-btn {
	display: block;
	width: 100%;
	min-height: 40px;
	margin-top: 8px;
	padding: 8px 12px;
	border: 1px solid var(--vroomly-border);
	border-radius: var(--vroomly-radius);
	background: #f5f5f5;
	color: var(--vroomly-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.vroomly-nb-show-all-btn:hover {
	background: #eee;
	color: var(--vroomly-text);
}

/* Simple two-column row (name fields, from/to time) — deliberately its own
   class rather than reusing .vroomly-field-row/.vroomly-field-box, which
   is specifically for the boxed-select-with-no-separate-label pattern used
   elsewhere; these are plain labeled .vroomly-field inputs instead. */
.vroomly-nb-name-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (min-width: 480px) {
	.vroomly-nb-name-row {
		flex-direction: row;
	}

	.vroomly-nb-name-row .vroomly-field {
		flex: 1 1 0;
		min-width: 0;
	}
}

.vroomly-nb-field-error {
	margin: 6px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--vroomly-fail);
}

/* REVERSIBILITY TOGGLE: delete this rule to drop the styling of the
   "pre-filled from your calendar selection" note (the note itself is added by
   templates/new-booking.php + vroomly.js and stays hidden unless the page was
   opened from a Diary click). */
.vroomly-nb-prefill-note {
	margin: 0 0 16px;
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--vroomly-muted, #6b7280);
	background: rgba(0, 0, 0, 0.04);
	border-radius: 6px;
}

.vroomly-nb-prefill-note[hidden] {
	display: none;
}

.vroomly-nb-field-hint {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--vroomly-muted, #6b7280);
}

.vroomly-nb-preview {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: var(--vroomly-radius);
	background: rgba(100, 188, 54, 0.1);
	font-size: 13px;
	font-weight: 600;
	color: var(--vroomly-brand-dark);
}

.vroomly-nb-preview.is-unavailable {
	background: rgba(238, 53, 53, 0.1);
	color: #b51f1f;
}

.vroomly-nb-preview-price {
	flex-shrink: 0;
}

.vroomly-nb-actions {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

.vroomly-wrap button#vroomly-nb-submit-btn {
	width: 100%;
	min-height: 48px;
}

.vroomly-wrap button#vroomly-nb-submit-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.vroomly-nb-submit-error {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vroomly-fail);
}

/* Confirmation screen */
.vroomly-nb-confirmation #vroomly-nb-confirmation-detail {
	font-size: 15px;
	font-weight: 600;
	color: var(--vroomly-text);
	margin: 0 0 6px;
}

.vroomly-nb-confirmation #vroomly-nb-confirmation-account {
	font-size: 14px;
	color: var(--vroomly-muted);
	margin: 0;
}

.vroomly-nb-confirmation-warning {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: var(--vroomly-radius);
	background: rgba(238, 53, 53, 0.1);
	color: #b51f1f;
	font-size: 13px;
	font-weight: 600;
}

.vroomly-nb-confirmation-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.vroomly-wrap .vroomly-nb-confirmation-actions .button {
	width: 100%;
	min-height: 44px;
	text-align: center;
}

@media (min-width: 768px) {
	.vroomly-nb-service-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.vroomly-nb-confirmation-actions {
		flex-direction: row;
	}

	.vroomly-wrap .vroomly-nb-confirmation-actions .button {
		width: auto;
		flex: 1;
	}
}