/*
 * Chiggle Academy — TutorLMS dashboard restyle.
 *
 * Phase 5b-4 scope: full mockup parity for `#page-dashboard`. We do
 * not override the dashboard.php template — TutorLMS's HTML structure
 * stays intact. Instead we:
 *   1. CSS-hide TutorLMS's stock dashboard content (greeting card,
 *      "Dashboard" title, stat cards, "In Progress Courses").
 *   2. Inject our own welcome / progress / dash-grid markup via the
 *      `tutor_before_dashboard_content` action hook (see hooks-tutor.php).
 *   3. Style the injected markup to match the mockup.
 *
 * Reference: mockup/chiggle_academy_mockup.html `#page-dashboard`
 * (lines 1345–1432).
 */

/* ═════════════════════════════════════════════════════════
 * PAGE-LEVEL
 * ═════════════════════════════════════════════════════════ */

.tutor-dashboard-page .entry-header,
.tutor-dashboard-page .page-title,
.tutor-dashboard-page .ast-archive-title {
	display: none !important;
}

.tutor-dashboard-page .ast-container,
.tutor-dashboard-page .entry-content {
	max-width: none !important;
	padding: 0 !important;
}

.tutor-wrap.tutor-dashboard.tutor-frontend-dashboard {
	padding: 32px var(--container-padding) 80px !important;
	background: var(--offwhite) !important;
}

.tutor-wrap.tutor-frontend-dashboard .tutor-container {
	max-width: var(--container-max) !important;
	margin: 0 auto;
	width: 100%;
}

/* Override TutorLMS's Bootstrap-like column grid in the dashboard
 * main content. Stock: sidebar col-md-4 (33%) + content col-md-8 (66%) +
 * row gutters that leave dead space on the right at large viewports.
 * Replace with: sidebar fixed 260px, content fills the rest. */
.tutor-wrap.tutor-frontend-dashboard .tutor-row.tutor-frontend-dashboard-maincontent {
	display: flex !important;
	gap: 28px;
	flex-wrap: nowrap;
}
.tutor-wrap.tutor-frontend-dashboard .tutor-row.tutor-frontend-dashboard-maincontent .tutor-dashboard-left-menu {
	flex: 0 0 260px !important;
	max-width: 260px !important;
	width: 260px !important;
	padding: 0 !important;
}
.tutor-wrap.tutor-frontend-dashboard .tutor-row.tutor-frontend-dashboard-maincontent > .tutor-col-12.tutor-col-md-8,
.tutor-wrap.tutor-frontend-dashboard .tutor-row.tutor-frontend-dashboard-maincontent > .tutor-col-12.tutor-col-lg-9 {
	flex: 1 1 auto !important;
	max-width: none !important;
	width: auto !important;
	padding: 0 !important;
}

/* ═════════════════════════════════════════════════════════
 * HIDE TUTORLMS STOCK DASHBOARD CONTENT — main dashboard ONLY
 *
 * `body.ca-main-dashboard` is added in inc/hooks-content.php on the
 * root /dashboard/ view, so these rules don't fire on sub-pages like
 * /dashboard/enrolled-courses/ that legitimately use
 * .tutor-dashboard-content-inner for their tabs + content.
 *
 * Replaced by injected widgets:
 *   - Greeting card → .ca-dash-welcome
 *   - "Dashboard" title → (gone)
 *   - 3 stat cards → (gone — info is in .ca-dash-progress-card)
 *   - In Progress Courses → (gone — Continue Learning card)
 * ═════════════════════════════════════════════════════════ */

/* Verified against the live dashboard DOM (v0.11.38): TutorLMS renders
 * the stock index ("Dashboard" title + Enrolled/Active/Completed cards
 * + "In Progress Courses") inside `.tutor-dashboard-content-inner`,
 * which is a SIBLING of `.tutor-dashboard-content` (both are children
 * of the `.tutor-frontend-dashboard-maincontent` content column) — NOT
 * a child of it. Our injected dashboard is `main.ca-dash-main` inside
 * `.tutor-dashboard-content`. The prior enumerated list AND the
 * interim `.tutor-dashboard-content > *` rule both assumed the stock
 * block was a child of `.tutor-dashboard-content`, so they never hid
 * it. Correct target: the `.tutor-dashboard-content-inner` sibling,
 * scoped to the main dashboard only (sub-pages are `ca-sub-dashboard`,
 * a different body class, and legitimately use that wrapper). The
 * `> *:not(.ca-dash-main)` line is kept as a harmless belt for any
 * stray child of `.tutor-dashboard-content` itself.
 *
 * v0.11.65–66: `.ca-lapse-banner` (inc/hooks-membership-lapse.php) and
 * `.ca-cert-nudge` (inc/hooks-cert-nudge.php) are both injected at
 * `tutor_before_dashboard_content`, so each is a legitimate sibling of
 * `.ca-dash-main` — exempt both, or the banner lands in the DOM but is
 * hidden by this rule. (Their styles live in global.css so they also
 * work on the standalone learner pages.) */
body.ca-main-dashboard .tutor-frontend-dashboard-header,
body.ca-main-dashboard .tutor-frontend-dashboard-maincontent .tutor-dashboard-content-inner,
body.ca-main-dashboard .tutor-dashboard-content > *:not(.ca-dash-main):not(.ca-lapse-banner):not(.ca-cert-nudge) {
	display: none !important;
}

/* On sub-pages, hide only the greeting card (we never want it) — the
 * actual sub-page content stays visible. */
body.ca-sub-dashboard .tutor-frontend-dashboard-header {
	display: none !important;
}

/* Sparse-content sub-pages (e.g. My Course with one enrolled course)
 * sit awkwardly in TutorLMS's fixed 3-col grid — two empty columns to
 * the right of a single card. Override with auto-fill minmax so cards
 * stretch to fill the available row. */
body.ca-sub-dashboard .tutor-dashboard-content .tutor-grid,
body.ca-sub-dashboard .tutor-dashboard-content .tutor-grid-3 {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
	gap: 18px !important;
}
body.ca-sub-dashboard .tutor-dashboard-content .tutor-grid > * {
	min-width: 0;
}

/* Settings page: hide cover photo upload (we don't surface cover
 * banners anywhere), collapse the now-empty parent height, hide the
 * size hint line entirely, and reposition profile photo to a clean
 * 96×96 inline upload. */
body.ca-sub-dashboard #tutor_cover_area,
body.ca-sub-dashboard .tutor_cover_deleter {
	display: none !important;
}
/* Hide the entire "Photo Size: ..." info line. We don't need the
 * Profile size hint either; the input dialog handles invalid sizes. */
body.ca-sub-dashboard #tutor_photo_meta_area {
	display: none !important;
}
/* Collapse the cover/profile editor container — TutorLMS reserves a
 * tall height (~280px) here to accommodate the cover banner overlay.
 * With the cover gone, that becomes dead space. Force height: auto. */
body.ca-sub-dashboard #tutor_profile_cover_photo_editor {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 24px 0 !important;
	height: auto !important;
	min-height: 0 !important;
	position: relative !important;
	overflow: visible !important;
}
body.ca-sub-dashboard #tutor_profile_area {
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	margin: 0 0 12px 0 !important;
	width: 96px !important;
	height: 96px !important;
	border: 2px solid var(--gray-200) !important;
	box-shadow: var(--shadow-sm) !important;
	background-size: cover !important;
	background-position: center !important;
	border-radius: 50% !important;
}
/* Profile photo Upload/Delete actions.
 *
 * We inline the popover under the photo instead of rendering it as a
 * floating chip — but `background: transparent` here strips Tutor's
 * stock #353535 backdrop, which left the spans' white text floating
 * over the page background (the v0.11.73 axe-core/playwright scan flagged
 * this as `color-contrast` on .tutor_pp_uploader / .tutor_pp_deleter).
 *
 * Restyle as inline text actions in brand colors. We force navy on the
 * spans (with a danger-tinted hover for Delete) and hide the popover
 * artifacts (the up-arrow indicator + the position-fixed outside-click
 * overlay) that have no meaning in the inlined layout.
 */
body.ca-sub-dashboard #tutor_pp_option {
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	transform: none !important;
	margin: 0 0 16px 0 !important;
	padding: 0 !important;
	width: auto !important;            /* was 157px popover width — let inline buttons size to content */
	background: transparent !important;
	box-shadow: none !important;
	color: var(--navy) !important;     /* overrides stock #fff inheritance */
}
/* The two action spans — Upload Photo, Delete. */
body.ca-sub-dashboard #tutor_pp_option .profile-uploader {
	color: var(--navy) !important;     /* navy on offwhite = ~14:1, passes AAA */
	background: transparent !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	padding: 4px 8px !important;
	border-radius: 4px !important;
	cursor: pointer;
}
body.ca-sub-dashboard #tutor_pp_option .profile-uploader:hover {
	background: var(--gray-100) !important;   /* subtle hover, no underline (icon + text already feel button-y) */
	color: var(--navy) !important;            /* override stock :hover background: #6b6b6b */
}
body.ca-sub-dashboard #tutor_pp_option .tutor_pp_deleter:hover {
	background: var(--gray-100) !important;
	color: #b3261e !important;                 /* danger red on hover — destructive intent */
}
body.ca-sub-dashboard #tutor_pp_option .profile-uploader .profile-upload-icon {
	color: inherit !important;                 /* icon follows the text colour */
	opacity: 0.8;
}
/* Hide popover-only artifacts: the down-pointing arrow that visually
 * tied the popover to its trigger, and the position:fixed full-viewport
 * div that catches outside-clicks to close the popover. Neither belongs
 * in our always-visible inlined layout. */
body.ca-sub-dashboard #tutor_pp_option .up-arrow,
body.ca-sub-dashboard #tutor_pp_option > div:last-child {
	display: none !important;
}

/* Hide Billing tab in Settings — primary path is the filter in
 * inc/hooks-tutor.php; this CSS is the safety net for if the slug
 * doesn't match. */
body.ca-sub-dashboard .tutor-nav .tutor-nav-link[href*="billing" i] {
	display: none !important;
}

/* Branded empty state for "No Data Found" (Quiz Results, etc.). */
body.ca-sub-dashboard .tutor-empty-state {
	background: white !important;
	border: 1px solid var(--gray-200) !important;
	border-radius: var(--radius-lg) !important;
	padding: 64px 32px !important;
	text-align: center;
	box-shadow: var(--shadow-sm) !important;
}
body.ca-sub-dashboard .tutor-empty-state img,
body.ca-sub-dashboard .tutor-empty-state svg {
	opacity: 0.5 !important;
	max-width: 80px !important;
	margin: 0 auto 18px !important;
}
body.ca-sub-dashboard .tutor-empty-state .tutor-fs-5,
body.ca-sub-dashboard .tutor-empty-state strong {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: 1.1rem !important;
	color: var(--navy) !important;
	margin-bottom: 8px !important;
	display: block;
}
body.ca-sub-dashboard .tutor-empty-state p {
	color: var(--gray-500) !important;
	font-size: 0.9rem !important;
}

/* My Course card: brand the placeholder so it doesn't look generic. */
body.ca-sub-dashboard .tutor-course-card,
body.ca-sub-dashboard .enrolled-courses .tutor-card {
	background: white !important;
	border: 1px solid var(--gray-200) !important;
	border-radius: var(--radius-lg) !important;
	overflow: hidden;
	box-shadow: var(--shadow-sm) !important;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
body.ca-sub-dashboard .tutor-course-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md) !important;
	border-color: var(--gold) !important;
}
body.ca-sub-dashboard .tutor-course-card .tutor-course-name,
body.ca-sub-dashboard .tutor-course-card h3 {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	color: var(--navy) !important;
}

/* Forms inside Settings — adopt brand input styling. */
body.ca-sub-dashboard .tutor-form-control,
body.ca-sub-dashboard input.tutor-form-control,
body.ca-sub-dashboard select.tutor-form-select {
	border: 1.5px solid var(--gray-200) !important;
	border-radius: var(--radius-sm) !important;
	padding: 11px 14px !important;
	font-family: var(--font-body) !important;
	font-size: 0.92rem !important;
	background: white !important;
	transition: border-color 0.2s, box-shadow 0.2s;
}
body.ca-sub-dashboard .tutor-form-control:focus,
body.ca-sub-dashboard input.tutor-form-control:focus {
	outline: 0 !important;
	border-color: var(--navy) !important;
	box-shadow: 0 0 0 3px rgba(18, 43, 105, 0.08) !important;
}
body.ca-sub-dashboard .tutor-form-label {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	color: var(--charcoal) !important;
	font-size: 0.82rem !important;
}

/* Hint text under read-only fields (e.g. Email Address). */
body.ca-sub-dashboard .ca-form-hint {
	margin-top: 6px;
	font-size: 0.78rem;
	color: var(--gray-500);
	line-height: 1.5;
}
body.ca-sub-dashboard .tutor-form-control[readonly],
body.ca-sub-dashboard input.tutor-form-control[disabled] {
	background: var(--gray-100) !important;
	color: var(--gray-500) !important;
	cursor: not-allowed;
}

/* ═════════════════════════════════════════════════════════
 * SIDEBAR (left menu) — navy with gold-accented active
 * ═════════════════════════════════════════════════════════ */

.tutor-dashboard-left-menu {
	padding: 0 !important;
	margin: 0 !important;
	background: var(--navy) !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--shadow-md) !important;
	overflow: hidden;
}

/* User-info profile card at top — DOM-injected via JS (see hooks-tutor.php). */
.ca-dash-profile {
	padding: 24px 22px 18px;
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ca-dash-profile-avatar {
	width: 56px;
	height: 56px;
	margin: 0 auto 12px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--gold), var(--gold-light));
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(255, 155, 3, 0.3);
	overflow: hidden;
}
/* When the user has uploaded a real photo, render it instead of the gold
 * initials block. The img sits inside the same 56×56 rounded square. */
.ca-dash-profile-avatar-img {
	background: var(--navy-deep);
	object-fit: cover;
	display: block;
}
.ca-dash-profile-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: white;
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}
.ca-dash-profile-joined {
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.75);  /* a11y: 0.4 → 0.75 on navy (3.43 → 7.0) */
	margin: 0;
}

.tutor-dashboard-left-menu .tutor-dashboard-permalinks,
.tutor-wrap .tutor-dashboard-left-menu .tutor-dashboard-permalinks {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 14px 0 !important;
	margin: 0 !important;
	list-style: none !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.tutor-dashboard-menu-item {
	border: 0 !important;
	margin: 0 !important;
}

.tutor-dashboard-menu-item-link {
	color: rgba(255, 255, 255, 0.75) !important;  /* a11y: 0.62 → 0.75 for safer AA margin */
	padding: 11px 22px !important;
	display: flex !important;
	align-items: center;
	gap: 12px;
	text-decoration: none !important;
	font-family: var(--font-body) !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	transition: background-color 0.2s, color 0.2s;
	border-left: 3px solid transparent;
}
.tutor-dashboard-menu-item-link:hover,
.tutor-dashboard-menu-item-link:focus-visible {
	color: white !important;
	background: rgba(255, 255, 255, 0.06) !important;
}
.tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link {
	background: rgba(255, 155, 3, 0.16) !important;
	color: var(--gold) !important;
	border-left-color: var(--gold);
}

.tutor-dashboard-menu-item-icon {
	color: inherit !important;
	font-size: 1.05rem !important;
	width: 20px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.tutor-dashboard-menu-item-text {
	margin-left: 0 !important;
}

.tutor-dashboard-menu-divider {
	height: 1px !important;
	background: rgba(255, 255, 255, 0.08) !important;
	margin: 10px 16px !important;
	border: 0 !important;
}
.tutor-dashboard-menu-divider-header {
	font-size: 0.66rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65) !important;  /* a11y: 0.3 → 0.65 on navy (2.46 → 5.95) */
	padding: 8px 22px 4px !important;
}

/* ═════════════════════════════════════════════════════════
 * INJECTED CONTENT — main column
 * ═════════════════════════════════════════════════════════ */

.tutor-dashboard-content {
	padding: 0;
}

/* ─── Welcome ─── */
.ca-dash-welcome {
	margin-bottom: 28px;
}
.ca-dash-welcome h1 {
	font-family: var(--font-heading); /* Brand §04: page title = Nunito */
	font-weight: 800;
	font-size: clamp(1.5rem, 2.2vw, 1.75rem);
	color: var(--navy);
	margin: 0 0 6px;
	letter-spacing: -0.025em;
}
.ca-dash-welcome p {
	font-size: 0.9rem;
	color: var(--gray-500);
	margin: 0;
}

/* ─── Founder Journey Progress card ─── */
.ca-dash-progress-card {
	background: white;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 28px;
	margin-bottom: 20px;
	box-shadow: var(--shadow-sm);
}
.ca-dash-progress-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 22px;
}
.ca-dash-progress-head h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--navy);
	margin: 0;
	letter-spacing: -0.01em;
}
.ca-dash-progress-pct {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.6rem;
	color: var(--gold-dark);  /* AA on white (was --gold = 2.11:1 fail) */
	letter-spacing: -0.02em;
}

/* Phase bars — 7 horizontal pills, widths PROPORTIONAL to lesson
 * counts per phase (set via inline `style="flex: N 1 0"` on each bar
 * in hooks-tutor.php). Default flex of `1 1 0` is the fallback when
 * lessons count is missing — never relied on in production data. */
.ca-dash-phase-bars {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
}
.ca-dash-p-bar {
	flex: 1 1 0;
	height: 10px;
	border-radius: 100px;
	background: var(--gray-100);
	overflow: hidden;
}
.ca-dash-p-bar-fill {
	height: 100%;
	border-radius: 100px;
	transition: width 0.4s ease;
}
.ca-dash-p-bar-done {
	background: var(--green);
	width: 100% !important;
}
.ca-dash-p-bar-active {
	background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.ca-dash-p-bar-locked {
	width: 0 !important;
}

/* Phase labels under the bars */
.ca-dash-phase-labels {
	display: flex;
	gap: 6px;
}
.ca-dash-p-label {
	flex: 1;
	text-align: center;
	font-family: var(--font-body);
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--gray-400);
	letter-spacing: 0.04em;
}
.ca-dash-p-label-done {
	color: var(--green);
}
.ca-dash-p-label-active {
	color: var(--gold-dark);            /* AA-passing gold for text on light bg (~5.6:1 on offwhite); */
	                                    /* --gold itself is ~2:1 here. See variables.css note on --gold-dark. */
	font-weight: 700;
}

/* ─── Dash grid (Continue + Badges side-by-side, Activity full-width below) ─── */
.ca-dash-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.ca-dash-activity {
	grid-column: 1 / -1;
}

/* Continue Learning (navy card) */
.ca-dash-continue {
	background: linear-gradient(135deg, var(--navy), var(--navy-deep));
	color: white;
	border-radius: var(--radius-lg);
	padding: 24px 26px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-md);
}
.ca-dash-continue::after {
	content: '';
	position: absolute;
	top: -100px;
	right: -100px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(255, 155, 3, 0.10) 0%, transparent 70%);
	pointer-events: none;
}
.ca-dash-continue > * {
	position: relative;
	z-index: 1;
}
.ca-dash-continue h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: white;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}
.ca-dash-continue-lesson {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.ca-dash-continue-thumb {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(255, 155, 3, 0.15);
	border: 1px solid rgba(255, 155, 3, 0.3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--gold);
}
.ca-dash-continue-text h4 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: white;
	margin: 0 0 4px;
	line-height: 1.3;
}
.ca-dash-continue-text span {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.75);  /* a11y: 0.55 → 0.75 on navy (4.30 borderline → 7.0) */
}
.ca-dash-continue-progress {
	height: 8px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 18px;
}
.ca-dash-continue-progress .ca-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--gold), var(--gold-light));
	border-radius: 999px;
	transition: width 0.4s ease;
}
.ca-dash-continue .ca-btn {
	text-decoration: none !important;
}
/* Side-by-side CTAs in the all-lessons-complete empty state.
 * v0.11.85: paired View Certificate (gold) + Review the course (outline-
 * white) so a completed learner has a path back to revisit lessons.
 * Wraps on narrow widths so the buttons stack cleanly. */
.ca-dash-continue-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.ca-dash-continue-actions .ca-btn {
	flex: 0 1 auto;
}
.ca-dash-continue-empty {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.92rem;
	margin: 0 0 18px;
}

/* Badges (white card) */
.ca-dash-badges {
	background: white;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 22px;
	box-shadow: var(--shadow-sm);
}
.ca-dash-badges h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--navy);
	margin: 0 0 16px;
}
.ca-dash-badges-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.ca-dash-bdg {
	text-align: center;
	padding: 14px 6px;
	border-radius: 12px;
	background: var(--gray-100);
	transition: transform 0.2s, box-shadow 0.2s;
}
.ca-dash-bdg-earned {
	background: var(--gold-pale);
}
.ca-dash-bdg-earned:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}
/* v0.11.26: NO blanket cell opacity. A cell-wide opacity:0.35 crushed
   the readable .ca-dash-bdg-name label to ~1.55:1 on the light cell
   (axe serious, WCAG 1.4.3 — it's an informative label, not décor).
   The "locked/muted" look is now applied to the medallion only
   (grayscale + opacity on the img, below) while the name stays AA. */
.ca-dash-bdg-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	margin: 0 auto 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ca-dash-bdg-earned .ca-dash-bdg-icon {
	background: linear-gradient(135deg, var(--gold), var(--gold-light));
	color: var(--navy);
	box-shadow: 0 2px 8px rgba(255, 155, 3, 0.3);
}
.ca-dash-bdg-locked .ca-dash-bdg-icon {
	background: var(--gray-200);
	color: var(--gray-400);
}
.ca-dash-bdg-name {
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--charcoal);
	line-height: 1.3;
}
.ca-dash-bdg-locked .ca-dash-bdg-name {
	color: var(--gray-500); /* #595959 — AA on the gray-100 locked cell now that the cell opacity is gone */
}
/* v0.11.23: art variant — the badge SVG is a self-contained crest, so
   drop the circular chip bg/shadow and show the medallion itself.
   Earned = full colour; locked = grayscale + opacity on the img only
   (v0.11.26 — see the locked-name a11y note above).
   v0.11.82: switched from `display: block; margin: 0 auto` to
   `display: flex; justify-content: center`. With `display: block` +
   `width: auto`, the wrapper filled the full parent width and
   `margin: 0 auto` no-op'd horizontally — the inner img sat left-aligned
   inside the wrapper. Flex centers the img child reliably. */
.ca-dash-bdg-icon.ca-dash-bdg-icon-art,
.ca-dash-bdg-earned .ca-dash-bdg-icon.ca-dash-bdg-icon-art,
.ca-dash-bdg-locked .ca-dash-bdg-icon.ca-dash-bdg-icon-art {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	box-shadow: none;
	display: flex;
	justify-content: center;
	margin: 0 0 8px;
}
.ca-dash-bdg-icon-art img {
	display: block;
	width: 56px;
	height: 56px;
}
.ca-dash-bdg-locked .ca-dash-bdg-icon-art img {
	filter: grayscale(1) opacity(0.45); /* dim is on the medallion only (was the removed cell opacity) */
}

/* Recent Activity (white card, full width below) */
.ca-dash-activity {
	background: white;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 22px 26px;
	margin-top: 18px;
	box-shadow: var(--shadow-sm);
}
.ca-dash-activity h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--navy);
	margin: 0 0 16px;
}
.ca-dash-act-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ca-dash-act-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	background: var(--offwhite);
	border-radius: var(--radius-md);
}
.ca-dash-act-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.ca-dash-act-dot-green { background: var(--green); }
.ca-dash-act-dot-gold  { background: var(--gold); }
.ca-dash-act-dot-sky   { background: var(--sky); }
.ca-dash-act-text {
	flex: 1;
	font-size: 0.85rem;
	color: var(--charcoal);
}
.ca-dash-act-text strong {
	font-weight: 600;
	color: var(--navy);
}
.ca-dash-act-time {
	font-size: 0.74rem;
	color: var(--gray-400);
	white-space: nowrap;
}
.ca-dash-act-empty {
	text-align: center;
	padding: 24px;
	color: var(--gray-500);
	font-size: 0.88rem;
}

/* ═════════════════════════════════════════════════════════
 * BUTTONS inside the dashboard — adopt our brand
 * ═════════════════════════════════════════════════════════ */

.tutor-dashboard-content .tutor-btn-primary,
.tutor-dashboard-content .tutor-btn.tutor-btn-primary {
	background: var(--gold) !important;
	color: var(--navy) !important;
	border-color: var(--gold) !important;
	font-weight: 600;
	border-radius: var(--radius-sm);
	padding: 10px 20px;
}
.tutor-dashboard-content .tutor-btn-primary:hover {
	background: var(--gold-hover) !important;
}
.tutor-dashboard-content .tutor-btn-outline-primary {
	background: transparent !important;
	color: var(--navy) !important;
	border: 1.5px solid var(--gray-200) !important;
	border-radius: var(--radius-sm) !important;
}

/* ═════════════════════════════════════════════════════════
 * MOBILE FOOTER BAR
 * ═════════════════════════════════════════════════════════ */

/* Tutor scopes ALL its footer rules to `.tutor-dashboard #tutor-
 * dashboard-footer-mobile` — including `position:fixed;bottom:0`.
 * In our rendered markup this bar is emitted at `.ast-container`,
 * OUTSIDE the `.tutor-wrap.tutor-dashboard` wrapper (verified via
 * the live parent chain), so NONE of Tutor's scoped footer rules
 * match — the bar fell back to `position:static` and rendered in
 * normal flow ("not a footer"). Re-assert Tutor's intended fixed
 * positioning UNSCOPED (same fix pattern as the desktop-hide
 * below). The `.tutor-screen-frontend-dashboard{padding-bottom:94px}`
 * body-class rule (Tutor, ≤767) already reserves space for it. */
#tutor-dashboard-footer-mobile {
	position: fixed !important;
	inset: auto 0 0 0;
	z-index: 9999999;
	background: var(--navy) !important;
	box-shadow: var(--shadow-lg);
}
#tutor-dashboard-footer-mobile a {
	color: rgba(255, 255, 255, 0.75) !important;  /* a11y: 0.6 → 0.75 on navy (5.57 → 7.0) */
}
#tutor-dashboard-footer-mobile a.active {
	color: var(--gold) !important;
}

/* Desktop-hide (v0.11.38, breakpoint widened v0.11.38). Tutor's own
 * hide is scoped `.tutor-dashboard #tutor-dashboard-footer-mobile` —
 * our markup emits the bar outside a `.tutor-dashboard` ancestor
 * (parent `.ast-container`) so Tutor's scoped rule never matches.
 * Re-assert unscoped. Breakpoint is ≥993 (NOT 768): the off-canvas
 * drawer + this footer "Menu" toggle is now the pattern for ALL
 * tablet+mobile (≤992) — the desktop side-column only exists ≥993
 * (the only width the 260px sidebar + content fit comfortably). So
 * the footer must stay VISIBLE through the whole tablet range and
 * hide only on true desktop. */
@media (min-width: 993px) {
	#tutor-dashboard-footer-mobile {
		display: none !important;
	}
}

/* Force the footer VISIBLE across 768–992 (v0.11.38). Subtle:
 * the v0.11.38 close-tag fix correctly restored the footer INSIDE
 * `.tutor-dashboard`, which re-activated Tutor's own
 *   @media(min-width:768px){.tutor-dashboard #tutor-dashboard-footer-mobile{display:none!important}}
 * (specificity 0,1,1). An unscoped `#tutor-dashboard-footer-mobile`
 * (0,1,0) can't beat it, so Tutor hid the footer across the entire
 * tablet range — no "Menu" toggle on iPad Mini/Air (operator-
 * reported). Override with a higher-specificity selector
 * (`.tutor-dashboard.tutor-frontend-dashboard #…` = 0,2,1 > 0,1,1)
 * + !important, scoped to exactly 768–992. ≤767 Tutor never hides
 * it; ≥993 our own hide above wins. Net: footer ≤992, gone ≥993. */
@media (min-width: 768px) and (max-width: 992px) {
	.tutor-dashboard.tutor-frontend-dashboard #tutor-dashboard-footer-mobile {
		display: block !important;
	}
}

/* ═════════════════════════════════════════════════════════
 * MY PROFILE / SETTINGS sub-page consistency
 * ═════════════════════════════════════════════════════════ */

.tutor-dashboard-content h1,
.tutor-dashboard-content h2,
.tutor-dashboard-content h3,
.tutor-dashboard-content h4 {
	font-family: var(--font-display);
	color: var(--navy);
	letter-spacing: -0.015em;
}

.tutor-dashboard-content .tutor-form-control,
.tutor-dashboard-content input[type="text"],
.tutor-dashboard-content input[type="email"],
.tutor-dashboard-content input[type="password"] {
	border: 1.5px solid var(--gray-200);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 0.92rem;
}
.tutor-dashboard-content input:focus {
	outline: 0;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(18, 43, 105, 0.08);
}

/* ═════════════════════════════════════════════════════════
 * RESPONSIVE
 * ═════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
	.tutor-wrap.tutor-dashboard.tutor-frontend-dashboard {
		/* 94px bottom clears the now-always-visible fixed mobile footer
		 * across the whole ≤992 range (matches Tutor's own ≤767 reserve). */
		padding: 24px 16px 94px !important;
	}
	.tutor-wrap.tutor-frontend-dashboard .tutor-row.tutor-frontend-dashboard-maincontent {
		flex-direction: column;
		gap: 24px;
	}
	.ca-dash-grid {
		grid-template-columns: 1fr;
	}
	.ca-dash-progress-card {
		padding: 22px;
	}
}

/* v0.11.38: the old "tablet-only (768-992) sidebar stacks as a
 * full-width block" rule was REMOVED. It dumped the entire menu as a
 * giant navy panel above the content on every tablet (operator-
 * reported). The off-canvas drawer below now covers the whole
 * ≤992 range, so tablets get the same clean slide-in panel + footer
 * "Menu" toggle as phones. The desktop side-column is ≥993 only. */

/* ═════════════════════════════════════════════════════════
 * MOBILE + TABLET SIDEBAR — LEFT-SIDE DRAWER (v0.9.71;
 * range widened to ≤992 in v0.11.38)
 *
 * Applies to the WHOLE non-desktop range (≤992) so tablets use the
 * same slide-in drawer as phones (the prior 768-992 full-width
 * stacked-block rule was removed above). The footer "Menu" button
 * (kept visible ≤992) toggles `.is-sidebar-expanded` on
 * `.tutor-dashboard`. Desktop side-column is ≥993 only.
 *
 * v0.9.70 promoted it to a full-width fixed overlay. v0.9.71
 * narrows it to a left-side drawer (85vw, max 360px) with a
 * tappable scrim on the right — matches the conventional mobile
 * navigation pattern (Material Design / iOS HIG / Slack / Linear).
 *
 * Animation trick: we override TutorLMS's `display: none` (for
 * the closed state) to keep the element rendered, then use
 * transform + visibility to control the slide. Delaying visibility
 * by 0.3s on close lets the slide-out animation play before the
 * element becomes truly hidden.
 * ═════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
	/* Always render the sidebar in DOM so we can transform-animate.
	 * Overrides TutorLMS rule:
	 *   .tutor-dashboard:not(.is-sidebar-expanded) .tutor-dashboard-left-menu { display: none }
	 *
	 * Note on specificity (v0.9.72): the desktop styling at line 53
	 * uses `.tutor-wrap.tutor-frontend-dashboard .tutor-row...left-menu`
	 * with max-width / width: 260px !important. That selector has
	 * specificity 0,4,0 and applies at all viewports. To override it,
	 * we mirror the same selector chain here so we're at 0,4,0 too —
	 * source-order then favours us (this block is later in the file). */
	.tutor-wrap.tutor-frontend-dashboard .tutor-row.tutor-frontend-dashboard-maincontent .tutor-dashboard-left-menu {
		display: block !important;
		position: fixed !important;
		top: 68px;                /* under the chiggle header */
		bottom: 64px;             /* above the TutorLMS bottom-nav */
		left: 0;
		right: auto !important;
		flex: none !important;
		width: 85vw !important;
		max-width: 360px !important;
		z-index: 9999998;         /* one under #tutor-dashboard-footer-mobile (9999999) */
		overflow-y: auto;
		background: var(--navy);
		margin: 0 !important;
		padding: 0 !important;
		box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
		-webkit-overflow-scrolling: touch;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
		            visibility 0s linear 0.3s;
	}
	.tutor-wrap.tutor-frontend-dashboard.is-sidebar-expanded .tutor-row.tutor-frontend-dashboard-maincontent .tutor-dashboard-left-menu {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
		            visibility 0s linear 0s;
	}
	/* Scrim — covers the visible 15% on the right of the drawer. Click
	 * passes through to the outside-click handler in hooks-tutor.php. */
	.tutor-dashboard.is-sidebar-expanded::before {
		content: '';
		position: fixed;
		top: 68px;
		bottom: 64px;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 9999997;
		pointer-events: none;
		animation: ca-dash-scrim-fade 0.3s ease;
	}
	@keyframes ca-dash-scrim-fade {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	/* Lock body scroll while the drawer is open so the underlying
	 * content doesn't scroll under the user's finger when they swipe. */
	body.ca-dash-sidebar-open {
		overflow: hidden;
	}
}

@media (max-width: 640px) {
	.ca-dash-welcome h1 { font-size: 1.3rem; }
	.ca-dash-progress-pct { font-size: 1.3rem; }
	.ca-dash-phase-labels { display: none; } /* tight on mobile */
	.ca-dash-continue { padding: 20px 22px; }
	.ca-dash-badges-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═════════════════════════════════════════════════════════
 * v0.9.31 dashboard-continue text-color fix.
 *
 * The previous .ca-dash-continue h3 / h4 colour: white rules
 * were losing the cascade fight to a TutorLMS dashboard rule
 * (`.tutor-frontend-dashboard h3` etc. in tutor-frontend-
 * dashboard.min.css) which set h3/h4 colour to dark navy. On a
 * navy-gradient card that meant "Continue Learning" and the
 * lesson title rendered invisible.
 *
 * Fix: bump specificity with the body class and !important so
 * the override beats whatever Tutor or theme rule wins on h3.
 * ═════════════════════════════════════════════════════════ */

body.ca-main-dashboard .ca-dash-continue h3,
body.ca-sub-dashboard .ca-dash-continue h3,
body .ca-dash-continue h3 {
	color: #FFFFFF !important;
}

body.ca-main-dashboard .ca-dash-continue h4,
body.ca-sub-dashboard .ca-dash-continue h4,
body .ca-dash-continue-text h4 {
	color: #FFFFFF !important;
}

body.ca-main-dashboard .ca-dash-continue-text span,
body .ca-dash-continue-text span {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* ═════════════════════════════════════════════════════════
 * LEARNER NOTICE BANNERS — styles moved to global.css (v0.11.66)
 *
 * `.ca-lapse-banner` and `.ca-cert-nudge` styling now lives in
 * global.css so the banners also render correctly on the standalone
 * learner pages (/templates/, /llm-prompts/) where dashboard.css is
 * not enqueued. Only the dashboard hide-rule exemptions remain here.
 * ═════════════════════════════════════════════════════════ */

/* (styles relocated to global.css — see the comment above) */