/* ==========================================================================
   Haulity LMS — Frontend Design System
   Uses the same CSS variable names as hledu-admin.css so the design
   stays visually consistent across admin and frontend.
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (mirrors admin tokens)
   -------------------------------------------------------------------------- */
:root {
	--hledu-primary: #2563eb;
	--hledu-primary-hover: #1d4ed8;
	--hledu-primary-light: #eff6ff;
	--hledu-secondary: #7c3aed;
	--hledu-secondary-light: #f5f3ff;
	--hledu-success: #16a34a;
	--hledu-success-light: #f0fdf4;
	--hledu-warning: #d97706;
	--hledu-warning-light: #fffbeb;
	--hledu-danger: #dc2626;
	--hledu-danger-light: #fef2f2;
	--hledu-info: #0891b2;
	--hledu-info-light: #ecfeff;
	--hledu-text: #1f2937;
	--hledu-text-muted: #6b7280;
	--hledu-text-light: #9ca3af;
	--hledu-bg: #f9fafb;
	--hledu-bg-card: #ffffff;
	--hledu-border: #e5e7eb;
	--hledu-border-light: #f3f4f6;
	--hledu-radius-sm: 4px;
	--hledu-radius: 8px;
	--hledu-radius-lg: 12px;
	--hledu-radius-xl: 20px;
	--hledu-radius-full: 9999px;
	--hledu-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
	--hledu-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
	--hledu-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
	--hledu-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
	--hledu-transition: 150ms ease;
	--hledu-transition-slow: 300ms ease;
	--hledu-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--hledu-container: 1200px;

	/* Bento/Glass — surfaces */
	--hledu-surface: #ffffff;
	--hledu-surface-glass: rgb(255 255 255 / 0.6);
	--hledu-blur: 16px;

	/* Bento/Glass — gradient + glow */
	--hledu-gradient-primary: linear-gradient(135deg, #2563eb, #7c3aed, #2563eb);
	--hledu-glow-primary: 0 0 0 3px rgb(37 99 235 / 0.18), 0 0 18px rgb(37 99 235 / 0.22);

	/* Bento/Glass — elevation */
	--hledu-shadow-glass: 0 8px 32px rgb(15 23 42 / 0.10);
}

/* --------------------------------------------------------------------------
   1b. Dark theme — same variable names, new values. Components never need
   a dark-mode-specific class; only these tokens change.
   -------------------------------------------------------------------------- */
[data-hledu-theme="dark"] {
	--hledu-primary: #3b82f6;
	--hledu-primary-hover: #60a5fa;
	--hledu-primary-light: rgb(59 130 246 / 0.16);
	--hledu-secondary: #a78bfa;
	--hledu-secondary-light: rgb(167 139 250 / 0.16);

	--hledu-success: #22c55e;
	--hledu-success-light: rgb(34 197 94 / 0.16);
	--hledu-warning: #f59e0b;
	--hledu-warning-light: rgb(245 158 11 / 0.16);
	--hledu-danger: #f87171;
	--hledu-danger-light: rgb(248 113 113 / 0.16);
	--hledu-info: #22d3ee;
	--hledu-info-light: rgb(34 211 238 / 0.16);

	--hledu-text: #e5e7eb;
	--hledu-text-muted: #9ca3af;
	--hledu-text-light: #6b7280;
	--hledu-bg: #0f1420;
	--hledu-bg-card: #171d2e;
	--hledu-border: #2a3348;
	--hledu-border-light: #212840;

	--hledu-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
	--hledu-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.45);
	--hledu-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.45);
	--hledu-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);

	--hledu-surface: #171d2e;
	--hledu-surface-glass: rgb(30 38 58 / 0.55);
	--hledu-gradient-primary: linear-gradient(135deg, #3b82f6, #a78bfa, #3b82f6);
	--hledu-glow-primary: 0 0 0 3px rgb(59 130 246 / 0.28), 0 0 18px rgb(59 130 246 / 0.3);
	--hledu-shadow-glass: 0 8px 32px rgb(0 0 0 / 0.45);
}

/* When the user has never chosen a theme, follow the OS preference. */
@media (prefers-color-scheme: dark) {
	:root:not([data-hledu-theme="light"]):not([data-hledu-theme="dark"]) {
		--hledu-primary: #3b82f6;
		--hledu-primary-hover: #60a5fa;
		--hledu-primary-light: rgb(59 130 246 / 0.16);
		--hledu-secondary: #a78bfa;
		--hledu-secondary-light: rgb(167 139 250 / 0.16);
		--hledu-success: #22c55e;
		--hledu-success-light: rgb(34 197 94 / 0.16);
		--hledu-warning: #f59e0b;
		--hledu-warning-light: rgb(245 158 11 / 0.16);
		--hledu-danger: #f87171;
		--hledu-danger-light: rgb(248 113 113 / 0.16);
		--hledu-info: #22d3ee;
		--hledu-info-light: rgb(34 211 238 / 0.16);
		--hledu-text: #e5e7eb;
		--hledu-text-muted: #9ca3af;
		--hledu-text-light: #6b7280;
		--hledu-bg: #0f1420;
		--hledu-bg-card: #171d2e;
		--hledu-border: #2a3348;
		--hledu-border-light: #212840;
		--hledu-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
		--hledu-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.45);
		--hledu-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.45);
		--hledu-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
		--hledu-surface: #171d2e;
		--hledu-surface-glass: rgb(30 38 58 / 0.55);
		--hledu-gradient-primary: linear-gradient(135deg, #3b82f6, #a78bfa, #3b82f6);
		--hledu-glow-primary: 0 0 0 3px rgb(59 130 246 / 0.28), 0 0 18px rgb(59 130 246 / 0.3);
		--hledu-shadow-glass: 0 8px 32px rgb(0 0 0 / 0.45);
	}
}

html {
	transition: background-color var(--hledu-transition-slow), color var(--hledu-transition-slow) !important;
}

/* --------------------------------------------------------------------------
   2. Scope wrapper — all frontend output is inside .hledu-frontend
   -------------------------------------------------------------------------- */
.hledu-frontend {
	font-family: inherit;
	color: var(--hledu-text) !important;
	line-height: 1.6 !important;
}

.hledu-frontend *,
.hledu-frontend *::before,
.hledu-frontend *::after {
	box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   3. Button (.hledu-btn)
   -------------------------------------------------------------------------- */
.hledu-frontend .hledu-btn {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	padding: 11px 24px !important;
	background: var(--hledu-primary) !important;
	background-image: var(--hledu-gradient-primary) !important;
	background-size: 200% 100% !important;
	background-position: 0 0 !important;
	color: #fff !important;
	border: 1px solid transparent !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	font-family: inherit;
	cursor: pointer !important;
	text-decoration: none !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	transition: background-position var(--hledu-transition-slow), box-shadow var(--hledu-transition), transform var(--hledu-transition) !important;
	line-height: 1.4 !important;
}

.hledu-frontend .hledu-btn:hover {
	background-position: 100% 0 !important;
	box-shadow: var(--hledu-shadow-md) !important;
	transform: translateY(-1px) !important;
}

.hledu-frontend .hledu-btn:active {
	transform: translateY(0) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
}

.hledu-frontend .hledu-btn:focus-visible {
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-frontend .hledu-btn--full {
	width: 100% !important;
}

.hledu-frontend .hledu-btn--sm {
	padding: 7px 14px !important;
	font-size: 13px !important;
}

.hledu-frontend .hledu-btn--lg {
	padding: 13px 28px !important;
	font-size: 15px !important;
}

.hledu-frontend .hledu-btn--secondary {
	background: var(--hledu-bg-card) !important;
	color: var(--hledu-text) !important;
	border-color: var(--hledu-border) !important;
}

.hledu-frontend .hledu-btn--secondary:hover {
	background: var(--hledu-bg) !important;
}

.hledu-frontend .hledu-btn--success {
	background: var(--hledu-success) !important;
}

.hledu-frontend .hledu-btn--success:hover {
	background: #15803d !important;
}

.hledu-frontend .hledu-btn--danger {
	background: var(--hledu-danger) !important;
}

.hledu-frontend .hledu-btn--danger:hover {
	background: #b91c1c !important;
}

/* --------------------------------------------------------------------------
   4. Badge (.hledu-badge)
   -------------------------------------------------------------------------- */
.hledu-frontend .hledu-badge {
	display: inline-flex;
	align-items: center !important;
	padding: 2px 10px !important;
	border-radius: var(--hledu-radius-full) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
	text-transform: capitalize !important;
}

.hledu-frontend .hledu-badge--primary {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-frontend .hledu-badge--success {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-frontend .hledu-badge--warning {
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
}

.hledu-frontend .hledu-badge--danger {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
}

.hledu-frontend .hledu-badge--free {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

/* --------------------------------------------------------------------------
   5. Alert / notice (.hledu-alert)
   -------------------------------------------------------------------------- */
.hledu-frontend .hledu-alert {
	padding: 13px 16px !important;
	border-radius: var(--hledu-radius-sm) !important;
	border-left: 4px solid !important;
	margin-bottom: 16px !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

.hledu-alert--autodismiss {
	transition: opacity 400ms ease !important;
}

.hledu-alert--autodismiss.hledu-alert--dismissing {
	opacity: 0;
}

.hledu-frontend .hledu-alert--success {
	background: var(--hledu-success-light) !important;
	border-color: var(--hledu-success) !important;
	color: var(--hledu-success) !important;
}

.hledu-frontend .hledu-alert--error {
	background: var(--hledu-danger-light) !important;
	border-color: var(--hledu-danger) !important;
	color: var(--hledu-danger) !important;
}

.hledu-frontend .hledu-alert--warning {
	background: var(--hledu-warning-light) !important;
	border-color: var(--hledu-warning) !important;
	color: var(--hledu-warning) !important;
}

.hledu-frontend .hledu-alert--info {
	background: var(--hledu-info-light) !important;
	border-color: var(--hledu-info) !important;
	color: var(--hledu-info) !important;
}

.hledu-frontend .hledu-fe-notice--flush {
	margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   6. Course grid
   -------------------------------------------------------------------------- */
.hledu-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: 24px !important;
	margin: 24px 0 !important;
}

/* --------------------------------------------------------------------------
   7. Course card
   -------------------------------------------------------------------------- */
.hledu-course-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	overflow: hidden !important;
	display: flex;
	flex-direction: column !important;
	transition: box-shadow var(--hledu-transition), transform var(--hledu-transition) !important;
}

.hledu-course-card:hover {
	box-shadow: var(--hledu-shadow-md) !important;
	transform: translateY(-2px) !important;
}

.hledu-course-card__thumb {
	position: relative !important;
	aspect-ratio: 16 / 9 !important;
	overflow: hidden !important;
	background: var(--hledu-border-light) !important;
}

.hledu-course-card__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.hledu-course-card__badge {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	padding: 3px 10px !important;
	background: var(--hledu-primary) !important;
	color: #fff !important;
	border-radius: var(--hledu-radius-full) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.hledu-course-card__badge--free {
	background: var(--hledu-success) !important;
}

.hledu-course-card__badge--level {
	background: var(--hledu-secondary) !important;
}

.hledu-course-card__body {
	padding: 16px !important;
	flex: 1 !important;
	display: flex;
	flex-direction: column !important;
	gap: 6px !important;
}

.hledu-course-card__category {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--hledu-primary) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
}

.hledu-course-card__title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}

.hledu-course-card__title a {
	color: inherit !important;
	text-decoration: none !important;
}

.hledu-course-card__title a:hover {
	color: var(--hledu-primary) !important;
}

.hledu-course-card__instructor {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-course-card__meta {
	display: flex;
	gap: 12px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	flex-wrap: wrap !important;
	margin-top: 4px !important;
}

.hledu-course-card__meta-item {
	display: flex;
	align-items: center !important;
	gap: 4px !important;
}

.hledu-course-card__footer {
	padding: 12px 16px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
}

.hledu-course-card__price {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
}

.hledu-course-card__price--free {
	color: var(--hledu-success) !important;
	font-size: 15px !important;
}

/* Employee dashboard's "My Courses"/"Top Courses" grid (Module 15) — the
   progress bar sits above a full-width Continue/Start button instead of
   the public catalog's price row, so the footer stacks instead of the
   base rule's single space-between row. */
.hledu-course-card__footer--stacked {
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 10px !important;
}

.hledu-course-card__progress-row {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

/* ── Company card (Platform Staff's Companies list, Card layout) ─────────── */
.hledu-company-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: 20px !important;
}

.hledu-company-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	padding: 20px !important;
	display: flex;
	flex-direction: column !important;
	gap: 16px !important;
	transition: box-shadow var(--hledu-transition), transform var(--hledu-transition) !important;
}

.hledu-company-card:hover {
	box-shadow: var(--hledu-shadow-md) !important;
	transform: translateY(-2px) !important;
}

.hledu-company-card__header {
	display: flex;
	align-items: flex-start !important;
	gap: 12px !important;
}

.hledu-company-card__avatar {
	width: 44px !important;
	height: 44px !important;
	font-size: 16px !important;
}

.hledu-company-card__title-wrap {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex;
	flex-direction: column !important;
	gap: 2px !important;
}

.hledu-company-card__name {
	font-size: 15px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

.hledu-company-card__name a {
	color: var(--hledu-text) !important;
	text-decoration: none !important;
}

.hledu-company-card__name a:hover {
	color: var(--hledu-primary) !important;
}

.hledu-company-card__email {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.hledu-company-card__stats {
	display: flex;
	gap: 20px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-company-card__stats strong {
	color: var(--hledu-text) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	margin-right: 4px !important;
}

.hledu-company-card__footer {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
}

.hledu-company-card__phone {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
}

/* --------------------------------------------------------------------------
   7b. Certificate card — Learner dashboard's Certificates page
   -------------------------------------------------------------------------- */
.hledu-certificate-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
	gap: 20px !important;
}

.hledu-certificate-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	display: flex;
	flex-direction: column !important;
	padding: 14px !important;
	transition: box-shadow var(--hledu-transition), transform var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-certificate-card:hover {
	box-shadow: var(--hledu-shadow-lg) !important;
	transform: translateY(-3px) !important;
	border-color: var(--hledu-warning) !important;
}

.hledu-certificate-card__thumb {
	position: relative !important;
	aspect-ratio: 4 / 3 !important;
	overflow: hidden !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-bg) !important;
}

.hledu-certificate-card__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
	transition: transform var(--hledu-transition-slow) !important;
}

.hledu-certificate-card:hover .hledu-certificate-card__thumb img {
	transform: scale(1.05) !important;
}

.hledu-certificate-card__badge {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	padding: 4px 10px 4px 8px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: rgb(15 23 42 / 0.72) !important;
	color: #fbbf24 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.6 !important;
}

.hledu-certificate-card__badge .dashicons {
	font-size: 13px !important;
	width: 13px !important;
	height: 13px !important;
}

.hledu-certificate-card__body {
	padding: 14px 2px 10px !important;
	flex: 1 !important;
	display: flex;
	flex-direction: column !important;
	gap: 8px !important;
}

.hledu-certificate-card__title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}

.hledu-certificate-card__meta-row {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
}

.hledu-certificate-card__meta {
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-certificate-card__meta .dashicons {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
	color: var(--hledu-text-light) !important;
}

.hledu-certificate-card__id {
	flex-shrink: 0 !important;
	font-size: 10.5px !important;
	font-family: monospace;
	color: var(--hledu-text-light) !important;
	background: var(--hledu-bg) !important;
	border: 1px solid var(--hledu-border-light) !important;
	padding: 2px 8px !important;
	border-radius: var(--hledu-radius-full) !important;
	white-space: nowrap !important;
}

.hledu-certificate-card__footer {
	display: flex;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 6px !important;
	padding: 10px 2px 0 !important;
	margin-top: 2px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
}

.hledu-certificate-card__footer .hledu-btn:not(.hledu-icon-btn) {
	white-space: nowrap !important;
	padding: 7px 10px !important;
	gap: 4px !important;
}

/* ── Certificate "⋮" share menu — decorative only, no real sharing yet ──── */
.hledu-cert-share-wrap {
	margin-left: auto !important;
	position: relative !important;
	flex-shrink: 0 !important;
}

/* Employee Dashboard's Certificates page has only 2 other actions (no
   Revoke), so pushing "⋮" to the far right of the cell/card leaves an
   ugly gap — keep it flush next to View/Download instead.
   Compound selector (not just the modifier alone): on the standalone
   /employee-dashboard/ page hledu-admin.css loads AFTER this file, and its
   own .hledu-cert-share-wrap base rule (same margin-left:auto) has equal
   specificity to a single-class ".hledu-cert-share-wrap--inline" selector,
   so source order let it win there and reopened the gap. The extra class
   here gives this reset higher specificity than either base rule,
   regardless of which stylesheet loads last. */
.hledu-cert-share-wrap.hledu-cert-share-wrap--inline {
	margin-left: 0 !important;
}

.hledu-cert-share-toggle svg {
	width: 16px !important;
	height: 16px !important;
}

.hledu-cert-share-menu {
	display: none;
	position: absolute !important;
	bottom: calc(100% + 8px) !important;
	right: 0 !important;
	z-index: 20 !important;
	width: 250px !important;
	background: var(--hledu-surface) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-md) !important;
	padding: 8px !important;
}

.hledu-cert-share-wrap.is-open .hledu-cert-share-menu {
	display: block;
}

.hledu-cert-share-menu__title {
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	color: var(--hledu-text-muted) !important;
	padding: 6px 10px !important;
}

.hledu-cert-share-menu__item {
	display: flex;
	width: 100% !important;
	align-items: flex-start !important;
	gap: 10px !important;
	padding: 8px 10px !important;
	border: none !important;
	background: none !important;
	border-radius: var(--hledu-radius) !important;
	color: inherit !important;
	font-family: inherit;
	text-align: left !important;
	cursor: pointer !important;
}

.hledu-cert-share-menu__item:hover {
	background: var(--hledu-bg) !important;
}

.hledu-cert-share-menu__icon {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	flex-shrink: 0 !important;
}

.hledu-cert-share-menu__icon svg {
	width: 16px !important;
	height: 16px !important;
}

.hledu-cert-share-menu__icon .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
}

.hledu-cert-share-menu__item--email .hledu-cert-share-menu__icon {
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
}

.hledu-cert-share-menu__text {
	display: flex;
	flex-direction: column !important;
	gap: 1px !important;
}

.hledu-cert-share-menu__text strong {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-cert-share-menu__text small {
	font-size: 11px !important;
	color: var(--hledu-text-muted) !important;
}

/* ── Platform Staff's Certificates management screen — dummy data. Reuses
   the shared .hledu-modal box for the View preview, but its own overlay/
   close-button classes (not .hledu-modal-overlay/.hledu-modal-close) —
   hledu-admin.js binds a document-level handler to those two classes that
   removes the modal element from the DOM on close, which would leave this
   always-present, server-rendered modal unable to ever reopen. ─────────── */
.hledu-cert-preview-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgb(0 0 0 / 0.45) !important;
	z-index: 100000 !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
}

.hledu-cert-preview-overlay.hledu-modal--open {
	display: flex;
}

.hledu-cert-preview-close-btn {
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	color: var(--hledu-text-light) !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-size: 22px !important;
	transition: color var(--hledu-transition) !important;
}

.hledu-cert-preview-close-btn:hover {
	color: var(--hledu-danger) !important;
}

.hledu-cert-preview-sub {
	margin: 0 0 12px !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
}

.hledu-cert-preview-img {
	width: 100% !important;
	border-radius: var(--hledu-radius) !important;
	display: block;
}

/* --------------------------------------------------------------------------
   7c. Course learning page — /course-learn/, a Learner's own lesson player.
   Curriculum (modules/lessons) is real; the player, progress, and
   completion state are a client-side-only visual preview.
   -------------------------------------------------------------------------- */
.hledu-fe-form-main>.hledu-fe-card {
	position: relative !important;
	overflow: hidden !important;
}

.hledu-fe-form-main>.hledu-fe-card::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 3px !important;
	background: var(--hledu-gradient-primary) !important;
}

.hledu-course-learn__crumb {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-bottom: 24px !important;
}

.hledu-course-learn__crumb-left {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	min-width: 0 !important;
}

.hledu-course-learn__crumb-left a {
	color: var(--hledu-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
}

.hledu-course-learn__crumb-left a svg {
	width: 14px !important;
	height: 14px !important;
}

.hledu-course-learn__crumb-left a:hover {
	text-decoration: underline !important;
}

.hledu-course-learn__crumb-sep {
	color: var(--hledu-text-light) !important;
}

.hledu-course-learn__crumb-current {
	color: var(--hledu-text-muted) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.hledu-course-learn__crumb-actions {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__header-row {
	display: flex;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
}

.hledu-course-learn__header-actions {
	display: flex;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 8px !important;
}

/* Mark Lesson Complete / Completed always matches the Previous+Next row's
   own width, whichever of the two is naturally wider — this stretch, plus
   .hledu-course-learn__quick-nav-btn's flex: 1 below, is what keeps them in
   sync even though the button's text (and so its natural width) changes
   between the two states. */
#hledu-learn-status {
	width: 100% !important;
}

.hledu-course-learn__quick-nav {
	display: flex;
	gap: 6px !important;
}

/* Same height as .hledu-course-learn__type-badge, so Mark Lesson Complete
   and the Previous/Next buttons all line up with it. Selectors need to match
   .hledu-frontend .hledu-btn's own specificity (two classes) to win over it. */
#hledu-learn-status,
.hledu-frontend .hledu-course-learn__quick-nav-btn {
	padding: 4px 12px !important;
	font-size: 13px !important;
}

.hledu-course-learn__quick-nav-btn {
	flex: 1 !important;
}

.hledu-course-learn__quick-nav-btn svg {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__title-group {
	display: flex;
	align-items: center !important;
	gap: 14px !important;
}

.hledu-course-learn__title-icon.hledu-stat-icon-circle {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-course-learn__header-row h1 {
	font-size: 22px !important;
	margin: 0 0 4px !important;
}

#hledu-learn-status-icon {
	font-size: 13px !important;
	width: 13px !important;
	height: 13px !important;
}

.hledu-course-learn__position {
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 !important;
}


/* ── Tabs (Overview / Materials / Notes / Discussion) ────────────────────── */
.hledu-dashboard-nav button {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	background: none !important;
	border: none !important;
	padding: 10px 16px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	cursor: pointer !important;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -2px !important;
	white-space: nowrap !important;
	transition: color var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-dashboard-nav button .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
}

.hledu-dashboard-nav button:hover,
.hledu-dashboard-nav button.active {
	color: var(--hledu-primary) !important;
	border-bottom-color: var(--hledu-primary) !important;
}

.hledu-course-learn__tab-panel {
	min-height: 280px !important;
}

.hledu-course-learn__tab-panel[hidden] {
	display: none;
}

/* ── "What you'll learn" checklist ───────────────────────────────────────── */
.hledu-course-learn__checklist {
	list-style: none !important;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column !important;
	gap: 10px !important;
}

.hledu-course-learn__checklist li {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
}

.hledu-course-learn__checklist svg {
	width: 16px !important;
	height: 16px !important;
	color: var(--hledu-success) !important;
	flex-shrink: 0 !important;
}

/* ── Previous/Next neighbor row ───────────────────────────────────────────── */
.hledu-course-learn__neighbor-row {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 20px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
}

.hledu-course-learn__neighbor-label[hidden] {
	display: none;
}

.hledu-course-learn__neighbor-label {
	display: inline-flex;
	align-items: center !important;
	gap: 5px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	max-width: 45% !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	font-family: inherit;
	cursor: pointer !important;
	transition: color var(--hledu-transition) !important;
}

.hledu-course-learn__neighbor-label:hover {
	color: var(--hledu-primary) !important;
}

.hledu-course-learn__neighbor-label svg {
	width: 13px !important;
	height: 13px !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__neighbor-label span {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.hledu-course-learn__neighbor-label:last-child {
	text-align: right !important;
	margin-left: auto !important;
}

/* ── Circular course-progress ring ────────────────────────────────────────── */
.hledu-course-learn__ring-wrap {
	display: flex;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 16px !important;
}

.hledu-course-learn__ring {
	--pct: 0;
	width: 84px !important;
	height: 84px !important;
	border-radius: 50% !important;
	background: conic-gradient(var(--hledu-success) calc(var(--pct) * 1%), var(--hledu-border) 0) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__ring::before {
	content: "" !important;
	position: absolute !important;
	inset: 8px !important;
	border-radius: 50% !important;
	background: var(--hledu-bg-card) !important;
}

.hledu-course-learn__ring-value {
	position: relative !important;
	z-index: 1 !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
}

.hledu-course-learn__ring-info {
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 !important;
}

/* ── My Notes ─────────────────────────────────────────────────────────────── */
.hledu-course-learn__notes-textarea {
	width: 100% !important;
	min-height: 90px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-bg) !important;
	padding: 10px 12px !important;
	font-size: 13px !important;
	font-family: inherit;
	color: var(--hledu-text) !important;
	resize: vertical !important;
	transition: border-color var(--hledu-transition), box-shadow var(--hledu-transition) !important;
}

.hledu-course-learn__notes-textarea:focus {
	outline: none !important;
	border-color: var(--hledu-primary) !important;
	box-shadow: 0 0 0 3px var(--hledu-primary-light) !important;
}

/* ── Instructor card ──────────────────────────────────────────────────────── */
.hledu-course-learn__instructor {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 12px !important;
}

.hledu-course-learn__instructor-avatar {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__instructor-meta {
	min-width: 0 !important;
}

.hledu-course-learn__instructor-name {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	margin: 0 0 2px !important;
}

.hledu-course-learn__instructor-title {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 !important;
}

.hledu-course-learn__instructor-bio {
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 0 14px !important;
	line-height: 1.5 !important;
}

.hledu-course-learn__instructor-btn {
	width: 100% !important;
	justify-content: center !important;
}

/* ── Need Help card ───────────────────────────────────────────────────────── */
.hledu-course-learn__help-card {
	display: flex;
	gap: 10px !important;
	padding: 16px !important;
	border-radius: var(--hledu-radius-lg) !important;
	background: var(--hledu-primary-light) !important;
}

.hledu-course-learn__help-card .dashicons {
	color: var(--hledu-primary) !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__help-card h3 {
	font-size: 13px !important;
	font-weight: 700 !important;
	margin: 0 0 4px !important;
	color: var(--hledu-text) !important;
}

.hledu-course-learn__help-card p {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 0 10px !important;
}

/* ── Distraction-free mode — this page's own toggle, independent of the
   Module 16 .hledu-focus-mode scaffold elsewhere in this file. The crumb
   (and its own toggle button) hides along with the sidebar, so the
   floating exit button below is the only way back in. ──────────────────── */
.hledu-course-learn--fullscreen .hledu-course-learn__crumb,
.hledu-course-learn--fullscreen .hledu-fe-form-sidebar {
	display: none;
}

.hledu-course-learn--fullscreen .hledu-fe-form-layout {
	grid-template-columns: 1fr !important;
}

/* ID selectors (not just the class) so this reliably wins over the base
   .hledu-frontend .hledu-btn rule's own `display: inline-flex`, which
   otherwise outranks a single-class `display: none` here regardless of
   stylesheet order. */
#hledu-learn-exit-fullscreen {
	display: none;
	position: fixed !important;
	top: 16px !important;
	right: 16px !important;
	z-index: 100 !important;
	box-shadow: var(--hledu-shadow-lg) !important;
}

.hledu-course-learn--fullscreen #hledu-learn-exit-fullscreen {
	display: inline-flex;
}

/* ── Course Content — height-capped with a "View Full List" reveal so a
   long curriculum doesn't tower over the rest of the sidebar. The ID
   selector guarantees this wins over the base .hledu-curriculum rule's
   own `overflow: hidden` regardless of stylesheet order. ───────────────── */
#hledu-learn-curriculum {
	max-height: 360px !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

#hledu-learn-curriculum.hledu-course-learn__curriculum--expanded {
	max-height: none !important;
	overflow: visible !important;
}

.hledu-course-learn__expand-btn {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	margin-top: 12px !important;
	padding: 10px !important;
	background: var(--hledu-bg) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-primary) !important;
	cursor: pointer !important;
	transition: background var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-course-learn__expand-btn:hover {
	background: var(--hledu-primary-light) !important;
	border-color: var(--hledu-primary) !important;
}

.hledu-course-learn__expand-chevron {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	transition: transform var(--hledu-transition) !important;
}

.hledu-course-learn__expand-btn--open .hledu-course-learn__expand-chevron {
	transform: rotate(180deg) !important;
}

.hledu-course-learn__media {
	aspect-ratio: 16 / 9 !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	flex-direction: column !important;
	gap: 10px !important;
	background: linear-gradient(135deg, var(--hledu-bg), var(--hledu-border-light)) !important;
	border-radius: var(--hledu-radius-lg) var(--hledu-radius-lg) 0 0 !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
	overflow: hidden !important;
}

.hledu-course-learn__media--video {
	position: relative !important;
	padding: 0 !important;
	background: #000 !important;
}

.hledu-course-learn__media--video iframe {
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	display: block;
}

.hledu-course-learn__video-poster {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

.hledu-course-learn__media--video::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(0deg, rgb(0 0 0 / 0.35), transparent 55%) !important;
	pointer-events: none !important;
}

.hledu-course-learn__play-btn {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 1 !important;
	width: 76px !important;
	height: 76px !important;
	border-radius: 50% !important;
	background: var(--hledu-gradient-primary) !important;
	border: 3px solid rgb(255 255 255 / 0.9) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	color: #fff !important;
	cursor: pointer !important;
	box-shadow: 0 8px 28px rgb(0 0 0 / 0.4) !important;
	transition: transform var(--hledu-transition), box-shadow var(--hledu-transition) !important;
}

.hledu-course-learn__play-btn:hover {
	transform: translate(-50%, -50%) scale(1.08) !important;
	box-shadow: 0 10px 32px rgb(0 0 0 / 0.5) !important;
}

.hledu-course-learn__play-btn svg {
	width: 28px !important;
	height: 28px !important;
	margin-left: 3px !important;
}

.hledu-course-learn__media-icon {
	width: 56px !important;
	height: 56px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-bg-card) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-shadow-md) !important;
}

.hledu-course-learn__media-icon svg {
	width: 22px !important;
	height: 22px !important;
}

/* ── Sample quiz — plays inline inside the video/media area itself (not a
   popup); reuses the real quiz player's .hledu-quiz-question/
   .hledu-quiz-answer-option/.hledu-quiz-nav classes so this dummy preview
   matches the LMS's actual quiz design. ──────────────────────────────────── */
.hledu-course-learn__media--quiz {
	aspect-ratio: auto !important;
	height: 560px !important;
	overflow: hidden !important;
	padding: 28px 40px !important;
	text-align: center !important;
}

/* Added once the real [hledu_quiz_player] markup is loaded in (see
   course-learn.php's "Start Quiz" handler). Keeps the SAME fixed height as
   the intro screen above (no growing/shrinking as the quiz progresses) —
   quiz-player.php's own JS hides the title/description/meta-list intro
   card once a question is showing, so only one question (or the result
   card) needs to fit here at a time; overflow-y:auto is only a safety net
   for an unusually long question, not the normal case. The quiz/result
   cards are centered in this box, same reasoning .hledu-quiz-confirm-box
   below has for not depending on admin.css's .hledu-modal — content is
   left-aligned within its own centered card for readability. */
.hledu-course-learn__media--quiz.hledu-course-learn__media--quiz-active {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	text-align: left !important;
}

.hledu-course-learn__media--quiz-active #hledu-quiz-player,
.hledu-course-learn__media--quiz-active #hledu-quiz-result {
	width: 100% !important;
	max-width: 480px !important;
}

/* [hidden] must outrank the flex display below (same specificity as the
   browser's default [hidden] rule, so without this the intro never
   actually disappears when the quiz starts). */
.hledu-course-learn__quiz-intro[hidden] {
	display: none;
}

.hledu-course-learn__quiz-intro {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	gap: 14px !important;
}

.hledu-course-learn__quiz-intro p {
	margin: 0 !important;
	max-width: 420px !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
}

.hledu-course-learn__quiz-intro .hledu-course-learn__quiz-meta {
	justify-content: center !important;
	margin: 0 !important;
}

.hledu-course-learn__quiz-player {
	width: 100% !important;
	text-align: left !important;
}

.hledu-course-learn__quiz-progress {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 0 4px !important;
}

/* Static for now — will count down against a real per-quiz time limit
   once quizzes are wired to actual data. */
.hledu-course-learn__quiz-timer {
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	font-weight: 600 !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__quiz-timer .dashicons {
	font-size: 13px !important;
	width: 13px !important;
	height: 13px !important;
}

.hledu-course-learn__quiz-timer-value {
	color: var(--hledu-text) !important;
	font-variant-numeric: tabular-nums !important;
}

/* .hledu-quiz-result-body (Module 08's real quiz result screen) sets its
   own `display: flex` — same specificity as the browser's default
   `[hidden] { display: none }`, so without this it stays visible even
   while hidden. Combining our own class with [hidden] outranks it. */
.hledu-course-learn__quiz-complete[hidden] {
	display: none;
}

.hledu-course-learn__quiz-complete {
	padding: 20px 10px !important;
}

.hledu-course-learn__quiz-complete h3 {
	margin: 0 !important;
	font-size: 16px !important;
	color: var(--hledu-text) !important;
}

.hledu-course-learn__quiz-complete p {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-course-learn__tabs-row {
	flex-wrap: wrap !important;
}

.hledu-course-learn__type-badge {
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	padding: 5px 12px !important;
	margin-left: auto !important;
	margin-top: 6px !important;
	margin-bottom: 6px !important;
	border-radius: var(--hledu-radius-full) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__type-badge .dashicons {
	font-size: 12px !important;
	width: 12px !important;
	height: 12px !important;
}

.hledu-course-learn__quiz-meta {
	display: flex;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 12px 0 !important;
}

.hledu-course-learn__quiz-meta span {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	background: var(--hledu-bg) !important;
	border: 1px solid var(--hledu-border-light) !important;
	border-radius: var(--hledu-radius) !important;
	padding: 6px 12px !important;
}

.hledu-course-learn__resources {
	margin-top: 20px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
}

.hledu-course-learn__resources h3 {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	margin: 0 0 10px !important;
}

.hledu-course-learn__resource {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 12px !important;
	background: var(--hledu-bg) !important;
	border: 1px solid var(--hledu-border-light) !important;
	border-radius: var(--hledu-radius) !important;
	margin-bottom: 8px !important;
}

.hledu-course-learn__resource:last-child {
	margin-bottom: 0 !important;
}

.hledu-course-learn__resource-icon {
	color: var(--hledu-text-light) !important;
	flex-shrink: 0 !important;
	display: flex;
}

.hledu-course-learn__resource-icon svg {
	width: 18px !important;
	height: 18px !important;
}

.hledu-course-learn__resource-name {
	flex: 1 !important;
	min-width: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.hledu-course-learn__resource-size {
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
	flex-shrink: 0 !important;
}

/* The icon-only Download button's default .hledu-icon-btn color
   (var(--hledu-text-muted)) is too light here — darken it to match body text.
   Its :hover background (var(--hledu-bg)) is also the exact same color as
   this row's own background, so on hover it visually vanished — give it a
   distinct hover tint too. */
.hledu-course-learn__resource .hledu-icon-btn {
	color: var(--hledu-text) !important;
}

.hledu-course-learn__resource .hledu-icon-btn:hover {
	background: var(--hledu-primary-light) !important;
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-course-learn__lesson-header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-bottom: 8px !important;
}

.hledu-course-learn__lesson-header h2 {
	font-size: 17px !important;
	margin: 0 !important;
}

.hledu-lesson-item__link {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	flex: 1 !important;
	min-width: 0 !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	font: inherit !important;
	color: inherit !important;
	text-align: left !important;
	cursor: pointer !important;
}

.hledu-lesson-item__link span:not(.hledu-lesson-item__icon) {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.hledu-course-learn__curriculum .hledu-lesson-item {
	border-left: 3px solid transparent !important;
	transition: background var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-course-learn__curriculum .hledu-lesson-item:hover {
	background: var(--hledu-bg) !important;
}

.hledu-course-learn__curriculum .hledu-lesson-item--active {
	background: var(--hledu-primary-light) !important;
	border-left-color: var(--hledu-primary) !important;
}

.hledu-course-learn__curriculum .hledu-lesson-item--active .hledu-lesson-item__icon {
	color: var(--hledu-primary) !important;
}

/* Dimmed-until-completed only applies to this page's curriculum — the
   public course-single preview uses the same icon for its own locked/free
   states and must not be affected. */
.hledu-course-learn__curriculum .hledu-lesson-item__icon {
	opacity: 0.35;
}

.hledu-course-learn__curriculum .hledu-lesson-item--completed .hledu-lesson-item__icon {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   8. Rating stars
   -------------------------------------------------------------------------- */
.hledu-stars {
	display: inline-flex;
	gap: 1px !important;
	color: #f59e0b !important;
	font-size: 14px !important;
}

.hledu-stars--sm {
	font-size: 11px !important;
}

.hledu-stars--lg {
	font-size: 18px !important;
}

/* --------------------------------------------------------------------------
   9. Progress bar
   -------------------------------------------------------------------------- */
.hledu-progress {
	background: var(--hledu-border) !important;
	border-radius: var(--hledu-radius-full) !important;
	height: 8px !important;
	overflow: hidden !important;
}

.hledu-progress__fill {
	height: 100% !important;
	background: var(--hledu-primary) !important;
	border-radius: var(--hledu-radius-full) !important;
	transition: width 0.4s ease !important;
}

.hledu-progress__fill--success {
	background: var(--hledu-success) !important;
}

.hledu-progress__fill--warning {
	background: var(--hledu-warning) !important;
}

/* --------------------------------------------------------------------------
   10. Curriculum / lesson list
   -------------------------------------------------------------------------- */
.hledu-curriculum {
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	overflow: hidden !important;
	margin-bottom: 24px !important;
}

.hledu-section {
	border-bottom: 1px solid var(--hledu-border) !important;
}

.hledu-section:last-child {
	border-bottom: none !important;
}

.hledu-section__header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 16px !important;
	background: var(--hledu-bg) !important;
	cursor: pointer !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	gap: 12px !important;
	user-select: none !important;
}

.hledu-section__title {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	min-width: 0 !important;
}

.hledu-section__index {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	flex-shrink: 0 !important;
}

.hledu-section__chevron {
	flex-shrink: 0 !important;
	color: var(--hledu-text-light) !important;
	transition: transform var(--hledu-transition) !important;
}

.hledu-section__header--open .hledu-section__chevron {
	transform: rotate(-180deg) !important;
}

/* When every lesson in a module is complete, swap the chevron for a
   checkmark — the header keeps toggling the accordion exactly the same,
   only the icon it shows changes. */
.hledu-section__check {
	display: none !important;
	flex-shrink: 0 !important;
	color: var(--hledu-success) !important;
}

.hledu-section--complete .hledu-section__chevron {
	display: none;
}

.hledu-section--complete .hledu-section__check {
	display: inline-flex !important;
}

.hledu-section__meta {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	font-weight: 400 !important;
	white-space: nowrap !important;
}

.hledu-lesson-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hledu-lesson-item {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 16px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
}

.hledu-lesson-item a {
	color: var(--hledu-primary) !important;
	text-decoration: none !important;
	flex: 1 !important;
}

.hledu-lesson-item a:hover {
	text-decoration: underline !important;
}

.hledu-lesson-item__icon {
	color: var(--hledu-text-light) !important;
	flex-shrink: 0 !important;
	display: inline-flex;
}

.hledu-lesson-item__icon .dashicons {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
}

/* Both the type icon and the completed checkmark stay in the DOM — CSS
   swaps which one shows, so toggling --completed on/off never needs to
   overwrite/restore innerHTML. */
.hledu-lesson-item__icon-done {
	display: none !important;
}

.hledu-lesson-item--completed .hledu-lesson-item__icon-default {
	display: none;
}

.hledu-lesson-item--completed .hledu-lesson-item__icon-done {
	display: inline-flex !important;
}

.hledu-lesson-item__duration {
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
	margin-left: auto !important;
	white-space: nowrap !important;
}

.hledu-lesson-item--completed .hledu-lesson-item__icon {
	color: var(--hledu-success) !important;
}

/* A quiz item stays --active (its media panel is what's on screen) at the
   moment it's marked --completed — unlike a lesson, which advances to the
   next item instead. .hledu-course-learn__curriculum .hledu-lesson-item--active
   .hledu-lesson-item__icon above is one class more specific than the plain
   .hledu-lesson-item--completed rule, so without this override the active
   (blue) color always won and the checkmark never actually looked green. */
.hledu-course-learn__curriculum .hledu-lesson-item--active.hledu-lesson-item--completed .hledu-lesson-item__icon {
	color: var(--hledu-success) !important;
}

.hledu-lesson-item--locked .hledu-lesson-item__icon {
	color: var(--hledu-border) !important;
}

/* --------------------------------------------------------------------------
   11. Enroll card (sidebar)
   -------------------------------------------------------------------------- */
.hledu-enroll-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-md) !important;
	padding: 24px !important;
	position: sticky !important;
	top: 24px !important;
}

.hledu-enroll-card__price {
	font-size: 30px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
	margin-bottom: 16px !important;
	line-height: 1 !important;
}

.hledu-enroll-card__price--free {
	color: var(--hledu-success) !important;
	font-size: 22px !important;
}

.hledu-enroll-card__features {
	list-style: none !important;
	padding: 0 !important;
	margin: 16px 0 !important;
}

.hledu-enroll-card__features li {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 0 !important;
	font-size: 13px !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

.hledu-enroll-card__features li:last-child {
	border-bottom: none !important;
}

/* --------------------------------------------------------------------------
   12. Student dashboard nav
   -------------------------------------------------------------------------- */
.hledu-dashboard-nav {
	display: flex;
	gap: 0 !important;
	border-bottom: 2px solid var(--hledu-border) !important;
	margin-bottom: 24px !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
}

.hledu-dashboard-nav::-webkit-scrollbar {
	display: none;
}

.hledu-dashboard-nav a {
	padding: 10px 16px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	text-decoration: none !important;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -2px !important;
	white-space: nowrap !important;
	transition: color var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-dashboard-nav a:hover,
.hledu-dashboard-nav a.active {
	color: var(--hledu-primary) !important;
	border-bottom-color: var(--hledu-primary) !important;
	text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   13. Course hero (single course page) — full-width within the theme page
   -------------------------------------------------------------------------- */

/* Hides the active block theme's own "Page" template title block (the
   large "Single course" header + its padding, rendered above the_content)
   — added via body_class() only on this page, see
   Hledu_Frontend_Course::add_single_course_body_class(). Leaves every
   other page's title untouched. */
body.hledu-course-single-page main>div:first-child:not(.entry-content) {
	display: none;
}

/* The theme's own block-spacing margin/padding around the content area —
   removed so the hero sits flush against the site header (no leftover gap)
   and the page can actually reach full width (the theme's global left/right
   padding otherwise eats into it even with .hledu-course-page's own
   max-width overridden below). */
body.hledu-course-single-page main,
body.hledu-course-single-page .entry-content {
	margin-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Same treatment for the [hledu_course_list] page — hides the theme's
   title block and reclaims the theme's global padding, see
   Hledu_Frontend_Course::add_single_course_body_class(). */
body.hledu-course-list-page main>div:first-child:not(.entry-content) {
	display: none;
}

body.hledu-course-list-page main,
body.hledu-course-list-page .entry-content {
	margin-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* The theme's block-editor "constrained" layout caps its direct children
   (this div included) at its own narrow content width — override it so
   .hledu-course-page__inner's own 1280px max-width actually has room to
   apply, both inside the hero and in the content below it. */
.hledu-course-page {
	max-width: none !important;
}

.hledu-course-page__inner {
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
}

.hledu-course-page .hledu-fe-form-layout {
	margin-top: 40px !important;
}

.hledu-course-hero {
	background: #111827 !important;
	color: #fff !important;
	padding: 48px 0 !important;
	/* Breaks out of the theme's normal (padded/constrained) content column
	   so the hero still spans the full browser width, keeping the theme's
	   own header/footer intact above and below. Actual left/right margins
	   are set by JS (measured from the real layout) — 100vw-based CSS alone
	   overshoots by the scrollbar's width and causes horizontal overflow. */
}

.hledu-course-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr !important;
	gap: 48px !important;
	align-items: center !important;
}

.hledu-course-hero__breadcrumb {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
	margin-bottom: 16px !important;
}

.hledu-course-hero__breadcrumb a {
	color: var(--hledu-text-light) !important;
	text-decoration: none !important;
}

.hledu-course-hero__breadcrumb a:hover {
	color: #fff !important;
	text-decoration: underline !important;
}

.hledu-course-hero__badge {
	margin-bottom: 12px !important;
}

.hledu-course-hero__title {
	font-size: 34px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	margin: 0 0 14px !important;
	/* The active theme's own block-editor heading color styles otherwise
	   win the cascade here — force white so the title reads on the dark hero. */
	color: #fff !important;
}

.hledu-course-hero__desc {
	font-size: 15px !important;
	color: var(--hledu-text-light) !important;
	margin-bottom: 24px !important;
	max-width: 520px !important;
}

.hledu-course-hero__stats {
	display: flex;
	flex-wrap: wrap !important;
	gap: 28px !important;
}

.hledu-course-hero__stat {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
}

.hledu-course-hero__stat .dashicons {
	font-size: 22px !important;
	width: 22px !important;
	height: 22px !important;
	color: var(--hledu-primary-light) !important;
	flex-shrink: 0 !important;
}

.hledu-course-hero__stat div {
	display: flex;
	flex-direction: column !important;
	line-height: 1.3 !important;
}

.hledu-course-hero__stat strong {
	font-size: 14px !important;
	font-weight: 700 !important;
}

.hledu-course-hero__stat span {
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
}

.hledu-course-hero__media-frame {
	position: relative !important;
	aspect-ratio: 16 / 9 !important;
	border-radius: var(--hledu-radius-lg) !important;
	overflow: hidden !important;
	box-shadow: 0 20px 50px rgb(0 0 0 / 0.35) !important;
	background: rgb(255 255 255 / 0.06) !important;
}

.hledu-course-hero__media-frame img,
.hledu-course-hero__media-frame iframe {
	width: 100% !important;
	height: 100% !important;
	display: block;
	object-fit: cover !important;
	border: none !important;
}

.hledu-course-hero__media-caption {
	text-align: center !important;
	font-size: 13px !important;
	color: var(--hledu-text-light) !important;
	margin: 12px 0 0 !important;
}

.hledu-course-single-about {
	max-height: 8.4em !important;
	overflow: hidden !important;
}

.hledu-course-single-about--expanded {
	max-height: none !important;
}

.hledu-course-single-about :first-child {
	margin-top: 0 !important;
}

.hledu-course-single-about :last-child {
	margin-bottom: 0 !important;
}

.hledu-course-single-about__toggle {
	display: flex;
	align-items: center !important;
	gap: 4px !important;
	margin-top: 12px !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--hledu-primary) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.hledu-course-single-about__toggle .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	transition: transform var(--hledu-transition) !important;
}

.hledu-course-single-about__toggle--open .dashicons {
	transform: rotate(180deg) !important;
}

.hledu-course-single-curriculum-header-actions {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
}

.hledu-course-single-expand-all {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--hledu-primary) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.hledu-course-single-expand-all:hover {
	text-decoration: underline !important;
}

.hledu-enroll-card>.hledu-btn {
	margin-bottom: 20px !important;
}

.hledu-enroll-card__includes-label {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	margin: 4px 0 !important;
}

.hledu-enroll-card__features li .dashicons {
	font-size: 15px !important;
	width: 15px !important;
	height: 15px !important;
	color: var(--hledu-text-light) !important;
}

.hledu-enroll-card__share {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	margin-top: 16px !important;
	padding: 10px !important;
	background: none !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: border-color var(--hledu-transition), color var(--hledu-transition) !important;
}

.hledu-enroll-card__share:hover {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-course-single-more {
	margin-top: 24px !important;
}

.hledu-course-single-more__item {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
	padding: 10px 0 !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
	text-decoration: none !important;
	color: inherit !important;
}

.hledu-course-single-more__item:last-child {
	border-bottom: none !important;
}

.hledu-course-single-more__thumb {
	width: 56px !important;
	height: 56px !important;
	border-radius: var(--hledu-radius-sm) !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
}

.hledu-course-single-more__thumb--fallback {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
	font-size: 20px !important;
	font-weight: 800 !important;
}

.hledu-course-single-more__info {
	display: flex;
	flex-direction: column !important;
	gap: 4px !important;
	min-width: 0 !important;
}

.hledu-course-single-more__title {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
}

.hledu-course-single-more__item:hover .hledu-course-single-more__title {
	color: var(--hledu-primary) !important;
}

.hledu-course-single-more__price {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-course-cta-banner {
	display: flex;
	align-items: center !important;
	gap: 20px !important;
	background: var(--hledu-primary-light) !important;
	border-radius: var(--hledu-radius-lg) !important;
	padding: 28px 32px !important;
	margin: 8px 0 40px !important;
}

.hledu-course-cta-banner__icon {
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	background: var(--hledu-bg-card) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.hledu-course-cta-banner__icon .dashicons {
	font-size: 26px !important;
	width: 26px !important;
	height: 26px !important;
	color: var(--hledu-primary) !important;
}

.hledu-course-cta-banner__text {
	flex: 1 !important;
	min-width: 200px !important;
}

.hledu-course-cta-banner__text h2 {
	margin: 0 0 4px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-course-cta-banner__text p {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-course-cta-banner .hledu-btn .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
}

/* --------------------------------------------------------------------------
   14. Quiz / form
   -------------------------------------------------------------------------- */
.hledu-quiz-question {
	margin-bottom: 28px !important;
}

.hledu-quiz-question__text {
	font-size: 15px !important;
	font-weight: 600 !important;
	margin-bottom: 12px !important;
	line-height: 1.5 !important;
}

.hledu-quiz-option {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 14px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	margin-bottom: 8px !important;
	cursor: pointer !important;
	transition: border-color var(--hledu-transition), background var(--hledu-transition) !important;
}

.hledu-quiz-option:hover {
	border-color: var(--hledu-primary) !important;
	background: var(--hledu-primary-light) !important;
}

.hledu-quiz-option input {
	flex-shrink: 0 !important;
}

.hledu-quiz-option--correct {
	border-color: var(--hledu-success) !important;
	background: var(--hledu-success-light) !important;
}

.hledu-quiz-option--wrong {
	border-color: var(--hledu-danger) !important;
	background: var(--hledu-danger-light) !important;
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.hledu-course-page__inner {
		padding: 0 20px !important;
	}

	.hledu-course-hero {
		padding: 32px 0 !important;
	}

	.hledu-course-hero__grid {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}

	.hledu-course-hero__desc {
		max-width: none !important;
	}

	.hledu-course-cta-banner {
		flex-wrap: wrap !important;
		padding: 24px !important;
	}
}

@media (max-width: 768px) {
	.hledu-course-grid {
		grid-template-columns: 1fr 1fr !important;
	}

	.hledu-course-hero__title {
		font-size: 24px !important;
	}
}

@media (max-width: 480px) {
	.hledu-course-grid {
		grid-template-columns: 1fr !important;
	}

	.hledu-certificate-grid {
		grid-template-columns: 1fr !important;
	}

	/* Full-text labels don't fit 3-across on a phone-width card — shrink to
	   icon-only (title attr still gives the label on hover/long-press) so
	   View Details / Download Certificate / ⋮ stay on one row. */
	.hledu-certificate-card__footer .hledu-btn:not(.hledu-icon-btn) {
		padding: 7px !important;
		gap: 0 !important;
	}

	.hledu-certificate-card__footer-label {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   16. Course list — full-width page, toolbar, grid, search & pagination
   -------------------------------------------------------------------------- */

/* Vertical breathing room in place of the theme's title block (hidden via
   the body.hledu-course-list-page rules above) — this page has no colored
   hero band, so plain padding is enough; no JS full-bleed breakout needed. */
.hledu-course-list-page-content {
	padding: 40px 0 64px !important;
}

.hledu-course-list__toolbar {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	margin-bottom: 28px !important;
}

/* Fixed at 3 per row (unlike the auto-fill .hledu-course-grid used
   elsewhere), per explicit request. Compound selector so it wins over
   .hledu-course-grid's own responsive breakpoints regardless of source
   order. */
.hledu-course-grid.hledu-course-list-grid {
	grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 1100px) {
	.hledu-course-grid.hledu-course-list-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 700px) {
	.hledu-course-grid.hledu-course-list-grid {
		grid-template-columns: 1fr !important;
	}
}

.hledu-course-list__search {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	max-width: 420px !important;
	width: 100% !important;
	position: relative !important;
}

.hledu-course-list__search .dashicons-search {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--hledu-text-light) !important;
	font-size: 18px !important;
	width: 18px !important;
	height: 18px !important;
	pointer-events: none !important;
}

.hledu-course-list__search-input {
	flex: 1 !important;
	padding: 10px 14px 10px 40px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: 999px !important;
	background: var(--hledu-bg-card) !important;
	color: var(--hledu-text) !important;
	font-size: 14px !important;
	font-family: inherit;
}

.hledu-course-list__search-input:focus-visible {
	outline: none !important;
	border-color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-course-list__pagination {
	display: flex;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-top: 24px !important;
}

.hledu-course-list__pagination-link {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	min-width: 36px !important;
	height: 36px !important;
	padding: 0 10px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-bg-card) !important;
	color: var(--hledu-text) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background var(--hledu-transition), color var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-course-list__pagination-link:hover {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
	text-decoration: none !important;
}

.hledu-course-list__pagination-link--active {
	background: var(--hledu-primary) !important;
	border-color: var(--hledu-primary) !important;
	color: #fff !important;
}

/* ==========================================================================
   Employee Frontend Dashboard  — Module 04
   ========================================================================== */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.hledu-emp-dashboard {
	max-width: var(--hledu-container) !important;
	margin: 0 auto !important;
	padding: 32px 16px !important;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.hledu-emp-header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

.hledu-emp-header h1 {
	margin: 0 0 4px !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	line-height: 1.2 !important;
}

.hledu-emp-header__role {
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--hledu-text-muted) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.hledu-btn {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 18px !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background var(--hledu-transition), color var(--hledu-transition) !important;
	border: none !important;
	line-height: 1 !important;
}

.hledu-btn--primary {
	background: var(--hledu-primary) !important;
	color: #fff !important;
}

.hledu-btn--primary:hover {
	background: var(--hledu-primary-hover) !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* ── Notice ──────────────────────────────────────────────────────────────── */
.hledu-fe-notice {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 16px !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 14px !important;
	margin-bottom: 24px !important;
}

.hledu-fe-notice--error {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
	border: 1px solid var(--hledu-danger) !important;
}

.hledu-fe-notice--success {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
	border: 1px solid var(--hledu-success) !important;
}

.hledu-fe-notice--info {
	background: var(--hledu-info-light) !important;
	color: var(--hledu-info) !important;
	border: 1px solid var(--hledu-info) !important;
}

/* ── Error / permission-mismatch page — centered glass card shown on
   standalone dashboard pages when a logged-in user's role doesn't match
   the page (e.g. Platform Staff visiting /employee-dashboard/), with a
   Back to Home button to that user's own dashboard. ── */
.hledu-error-page {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	min-height: 100vh !important;
	padding: 24px !important;
}

.hledu-error-page__card {
	max-width: 420px !important;
	width: 100% !important;
	text-align: center !important;
	padding: 48px 32px !important;
	border-radius: var(--hledu-radius-xl) !important;
}

.hledu-error-page__icon {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 64px !important;
	height: 64px !important;
	margin: 0 auto 20px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
}

.hledu-error-page__icon .dashicons {
	font-size: 28px !important;
	width: 28px !important;
	height: 28px !important;
}

.hledu-error-page__code {
	margin: 0 0 8px !important;
	font-size: 56px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-error-page__message {
	margin: 0 0 28px !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--hledu-text-muted) !important;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.hledu-fe-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow) !important;
	overflow: hidden !important;
	margin-bottom: 24px !important;
}

.hledu-fe-card__header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 16px 20px !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

.hledu-fe-card__header h2 {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-fe-card__body {
	padding: 0 !important;
}

/* ── Badge ───────────────────────────────────────────────────────────────── */
.hledu-fe-badge {
	display: inline-block;
	padding: 2px 10px !important;
	border-radius: var(--hledu-radius-full) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

.hledu-fe-badge--neutral {
	background: var(--hledu-border-light) !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-fe-badge--publish,
.hledu-fe-badge--active {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-fe-badge--draft {
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
}

.hledu-fe-badge--inactive,
.hledu-fe-badge--suspended {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
}

/* An employee's own course-progress status (Module 15) — distinct from a
   course's publish-status badge above, so it gets its own modifiers rather
   than reusing --draft/--active/--inactive under a confusing name. */
.hledu-fe-badge--not-started {
	background: var(--hledu-border-light) !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-fe-badge--in-progress {
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
}

.hledu-fe-badge--completed {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.hledu-fe-table-wrap {
	overflow-x: auto !important;
}

/* Certificates table only — the share "⋮" menu (.hledu-cert-share-menu)
   opens as an absolutely-positioned popover above its row; overflow-x:auto
   above also computes overflow-y to auto (not visible), which would clip
   it, so this table opts back out. It's not wide enough to need the
   horizontal scroll the base rule exists for. */
.hledu-fe-table-wrap.hledu-cert-table-wrap {
	overflow: visible !important;
}

/* ...except on phones: at that width the table (Course/Certificate ID/
   Issued/Status/Actions) no longer fits, and the enclosing .hledu-fe-card's
   own overflow:hidden was silently clipping the Status/Actions columns
   with no way to reach them. Scrolling wins over the share popover here —
   losing whole columns of data is worse than the popover being clipped if
   opened while the table happens to be scrolled. */
@media (max-width: 600px) {
	.hledu-fe-table-wrap.hledu-cert-table-wrap {
		overflow-x: auto !important;
	}
}

.hledu-fe-table {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 14px !important;
}

.hledu-fe-table th,
.hledu-fe-table td {
	text-align: left !important;
	padding: 12px 20px !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

.hledu-fe-table th {
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	background: var(--hledu-bg) !important;
}

.hledu-fe-table tbody tr:hover {
	background: var(--hledu-bg) !important;
}

.hledu-fe-table tbody tr:last-child td {
	border-bottom: none !important;
}

.hledu-fe-action-link {
	color: var(--hledu-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	font-size: 13px !important;
}

.hledu-fe-action-link:hover {
	text-decoration: underline !important;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.hledu-fe-empty {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 48px 24px !important;
	text-align: center !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-fe-empty svg {
	opacity: 0.35;
}

.hledu-fe-empty p {
	margin: 0 !important;
	font-size: 15px !important;
}

.hledu-fe-empty__note {
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.hledu-emp-header {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
}

/* ── Employee header actions (logout + create) ───────────────────────────── */
.hledu-emp-header__actions {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.hledu-btn--logout {
	background: transparent !important;
	color: var(--hledu-danger) !important;
	border: 1px solid var(--hledu-danger) !important;
}

.hledu-btn--logout:hover {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
	text-decoration: none !important;
}

/* ── Super admin preview bar ─────────────────────────────────────────────── */
.hledu-emp-superadmin-bar {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	background: #1e1b4b !important;
	color: #c7d2fe !important;
	padding: 10px 20px !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	margin-bottom: 20px !important;
}

.hledu-emp-superadmin-bar__actions {
	display: flex;
	gap: 8px !important;
	flex-wrap: wrap !important;
}

.hledu-btn--switch {
	background: #3730a3 !important;
	color: #e0e7ff !important;
	border: 1px solid #4338ca !important;
}

.hledu-btn--switch:hover {
	background: #4338ca !important;
	color: #fff !important;
	text-decoration: none !important;
}

.hledu-btn--back-admin {
	background: transparent !important;
	color: #a5b4fc !important;
	border: 1px solid #4338ca !important;
}

.hledu-btn--back-admin:hover {
	background: #312e81 !important;
	color: #fff !important;
	text-decoration: none !important;
}

.hledu-btn--sm {
	padding: 6px 12px !important;
	font-size: 13px !important;
}

/* ── Manager Learner Mode toggle (Manager dashboard header) ─────────────── */
.hledu-learner-toggle {
	display: inline-flex;
	align-items: center !important;
	gap: 10px !important;
}

.hledu-learner-toggle__label {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-learner-toggle__switch {
	position: relative !important;
	display: inline-flex;
	align-items: center !important;
	width: 42px !important;
	height: 24px !important;
	padding: 0 !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: 999px !important;
	background: var(--hledu-bg-card) !important;
	cursor: pointer !important;
	transition: background var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-learner-toggle__switch::before {
	content: '' !important;
	position: absolute !important;
	top: 2px !important;
	left: 2px !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: var(--hledu-text-muted) !important;
	transition: transform var(--hledu-transition), background var(--hledu-transition) !important;
}

.hledu-learner-toggle__switch:hover {
	border-color: var(--hledu-primary) !important;
}

.hledu-learner-toggle__switch--on {
	background: var(--hledu-primary) !important;
	border-color: var(--hledu-primary) !important;
}

.hledu-learner-toggle__switch--on::before {
	transform: translateX(18px) !important;
	background: #fff !important;
}

/* ==========================================================================
   Company Account Frontend Dashboard — Module 11
   ========================================================================== */

/* Every standalone dashboard shell (Company, Company Manager, Company
   Employee, Platform Owner, Platform Staff, Course Learn) relies on the
   theme's own body background matching --hledu-bg — true by coincidence in
   light mode, but with no dark-mode override this left the page background
   stuck light while the sidebar/cards correctly went dark. */
body.hledu-standalone-page {
	background: var(--hledu-bg) !important;
}

.hledu-company-dashboard {
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 32px 16px !important;
}

/* Some components on this page reuse admin CSS (form inputs, buttons, the
   header-user dropdown), which sets its own font-family directly on those
   elements — inheriting on the wrapper alone doesn't reach them. The extra
   "body" type selector guarantees this wins over those rules regardless of
   stylesheet load order, without touching admin.css itself. .mce-ico is
   also excluded, same as .dashicons — those are the Description editor's
   toolbar button icons, which need TinyMCE's own icon font to render at
   all instead of showing every button as the same fallback glyph. */
body .hledu-company-dashboard,
body .hledu-company-dashboard *:not(.dashicons):not(.mce-ico) {
	font-family: inherit;
}

/* The dashboard renders its own header — hide the theme's auto-generated
   page title and featured image on this page only. Targets the title/image
   blocks directly (not a shared ancestor wrapper): several default block
   themes, including Twenty Twenty-Five, nest post-title and post-content
   inside the SAME wp-block-group, so hiding that wrapper hid the dashboard
   itself. The theme's own site header/nav and the actual page content are
   untouched. */
body.hledu-company-dashboard-page .wp-block-post-title,
body.hledu-company-dashboard-page .wp-block-post-featured-image,
body.hledu-company-dashboard-page .entry-title,
body.hledu-company-dashboard-page .page-title {
	display: none;
}

/* ── Demo data disclosure banner ─────────────────────────────────────────── */
.hledu-frontend .hledu-demo-banner {
	display: flex;
	align-items: flex-start !important;
	gap: 10px !important;
	padding: 14px 16px !important;
	margin-bottom: 24px !important;
	background: var(--hledu-warning-light) !important;
	border: 1px solid var(--hledu-warning) !important;
	border-radius: var(--hledu-radius-lg) !important;
	color: var(--hledu-text) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.hledu-frontend .hledu-demo-banner .dashicons {
	color: var(--hledu-warning) !important;
	flex-shrink: 0 !important;
}

.hledu-frontend .hledu-demo-tag {
	display: inline-flex;
	align-items: center !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	padding: 2px 8px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
	white-space: nowrap !important;
}

/* ── App shell: sticky sidebar + main content ────────────────────────────── */
.hledu-company-app {
	display: grid;
	grid-template-columns: 260px 1fr !important;
	gap: 24px !important;
	align-items: start !important;
}

@media (max-width: 900px) {
	.hledu-company-app {
		grid-template-columns: 1fr !important;
	}
}

/* Grid items default to min-width:auto, which floors their track at the
   content's own min-content size — without this, .hledu-company-main's
   bento grid/topbar refuse to shrink below their desktop min-content width
   even after the 900px breakpoint above switches the app shell to a single
   column, forcing the whole page to overflow horizontally on phones. */
.hledu-company-app > * {
	min-width: 0 !important;
}

.hledu-company-sidebar {
	position: sticky !important;
	top: 20px !important;
	display: flex;
	flex-direction: column !important;
	gap: 16px !important;
	background: var(--hledu-surface) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	padding: 20px 16px !important;
}

.hledu-company-sidebar__brand {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 4px 12px !important;
	border-bottom: 1px solid var(--hledu-border) !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
}

.hledu-company-sidebar__brand-logo {
	height: 34px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

.hledu-company-nav {
	display: flex;
	flex-direction: column !important;
	gap: 2px !important;
}

.hledu-company-nav__item {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 9px 12px !important;
	border-radius: var(--hledu-radius) !important;
	color: var(--hledu-text) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background var(--hledu-transition), color var(--hledu-transition) !important;
}

.hledu-company-nav__item svg {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
}

.hledu-company-nav__item:hover:not(.hledu-company-nav__item--disabled) {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-company-nav__item--active {
	color: var(--hledu-primary) !important;
}

.hledu-company-nav__item--disabled {
	opacity: 0.5;
	cursor: default !important;
	pointer-events: none !important;
}

.hledu-company-nav__soon {
	margin-left: auto !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
	padding: 2px 6px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-border) !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-company-sidebar__help {
	margin-top: auto !important;
	padding: 28px 20px 22px !important;
	border-radius: var(--hledu-radius-lg) !important;
	background: var(--hledu-primary-light) !important;
	text-align: left !important;
}

.hledu-company-sidebar__help-icon {
	width: 76px !important;
	height: 76px !important;
	margin: 0 0 18px !important;
	border-radius: 50% !important;
	background: var(--hledu-surface) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: var(--hledu-shadow-md) !important;
}

.hledu-company-sidebar__help-icon svg {
	color: var(--hledu-primary) !important;
	width: 32px !important;
	height: 32px !important;
}

.hledu-company-sidebar__help h3 {
	margin: 0 0 8px !important;
	font-size: 19px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
}

.hledu-company-sidebar__help p {
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 0 18px !important;
	line-height: 1.5 !important;
}

.hledu-company-sidebar__help .hledu-btn--primary {
	display: flex;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	padding: 14px 16px !important;
	border-radius: var(--hledu-radius-lg) !important;
	font-size: 14px !important;
}

.hledu-company-sidebar__help-btn-icon {
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	background: rgb(255 255 255 / 0.2) !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.hledu-company-sidebar__help-btn-icon svg {
	width: 14px !important;
	height: 14px !important;
	color: #fff !important;
}

/* ── Sidebar → compact top bar (481px–768px) ─────────────────────────────────
   Below the 900px breakpoint the sidebar already stacks above the main
   column; at 768px it's compacted further into a single short strip: the
   logo stays put on the left, the nav (previously a column of links) moves
   into one row to its right, and the Need Help card collapses onto its own
   row below (icon | text | button) instead of the tall stacked/centered
   card. Because .hledu-company-sidebar keeps its existing position:sticky;
   top:20px (unchanged), this whole now-short strip — nav row AND the help
   bar — stays reachable while scrolling the page below it; the z-index just
   keeps it visually on top of the bento cards it then overlaps.
   Bounded to a min-width so it doesn't reach the ≤480px phone sizes already
   tuned separately (5 nav items in one row need real width) — phones are a
   deliberately separate pass. */
@media (min-width: 481px) and (max-width: 768px) {
	.hledu-frontend .hledu-company-sidebar {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 12px !important;
		padding: 10px 16px !important;
		z-index: 10 !important;
	}

	.hledu-frontend .hledu-company-sidebar__brand {
		padding: 0 12px 0 0 !important;
		border-bottom: none !important;
		border-right: 1px solid var(--hledu-border) !important;
		flex-shrink: 0 !important;
	}

	.hledu-frontend .hledu-company-nav {
		flex: 1 !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: flex-end !important;
		gap: 2px !important;
	}

	.hledu-frontend .hledu-company-nav__item {
		padding: 6px 8px !important;
		gap: 6px !important;
		font-size: 12px !important;
	}

	.hledu-frontend .hledu-company-nav__item svg {
		width: 15px !important;
		height: 15px !important;
	}

	/* Forces the help card onto its own row below the brand+nav row above,
	   inside the same wrapping flex sidebar. */
	.hledu-frontend .hledu-company-sidebar__help {
		flex-basis: 100% !important;
		margin-top: 0 !important;
		display: grid !important;
		grid-template-columns: auto 1fr auto !important;
		grid-template-rows: auto auto !important;
		align-items: center !important;
		column-gap: 12px !important;
		row-gap: 0 !important;
		padding: 12px 16px !important;
		text-align: left !important;
	}

	.hledu-frontend .hledu-company-sidebar__help-icon {
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
		width: 40px !important;
		height: 40px !important;
		margin: 0 !important;
	}

	.hledu-frontend .hledu-company-sidebar__help-icon svg {
		width: 20px !important;
		height: 20px !important;
	}

	.hledu-frontend .hledu-company-sidebar__help h3 {
		grid-column: 2 !important;
		grid-row: 1 !important;
		margin: 0 !important;
		font-size: 14px !important;
	}

	.hledu-frontend .hledu-company-sidebar__help p {
		grid-column: 2 !important;
		grid-row: 2 !important;
		margin: 0 !important;
		font-size: 11px !important;
	}

	.hledu-frontend .hledu-company-sidebar__help .hledu-btn--primary {
		grid-column: 3 !important;
		grid-row: 1 / span 2 !important;
		width: auto !important;
		justify-content: center !important;
		padding: 8px 14px !important;
		font-size: 12px !important;
		white-space: nowrap !important;
	}
}

/* ── Sidebar → floating icon rail (≤915px) ───────────────────────────────────
   Supersedes the 481–768px compact top-bar treatment above for the whole
   ≤915px range (placed after it in source order so it wins the overlap):
   the sidebar card is removed entirely — logo, nav labels, the "Need Help?"
   panel text, AND any container background/border/shadow — leaving bare
   icons attached directly to the left edge of the viewport, vertically
   centered. Each icon expands via a `max-width` transition (not `width`,
   which doesn't interpolate reliably to/from `auto`) on `:hover` ONLY
   (no `:focus-visible` — a click must not leave the label expanded) to
   reveal just that one icon's label, with no background/card behind it;
   moving to another icon collapses the previous one back down. Clicking
   behaves exactly as before — same <a href> elements, just restyled. The
   "Need Help?" card's existing button becomes the last icon (Contact
   Support), restyled to match the nav icons instead of keeping its
   gradient CTA look, since here it's one item in a uniform icon list, not
   a standalone call-to-action. */
@media (max-width: 915px) {
	.hledu-frontend .hledu-company-app {
		grid-template-columns: 1fr !important;
	}

	.hledu-frontend .hledu-company-sidebar {
		position: fixed !important;
		top: 50% !important;
		left: 6px !important;
		transform: translateY(-50%) !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		width: auto !important;
		gap: 6px !important;
		padding: 0 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		z-index: 50 !important;
		/* Safety net for pages with a longer nav list (e.g. Platform Staff's
		   11 items + Contact Support): on a short viewport, centering alone
		   can push the top icon(s) above y=0 with no way to reach them —
		   the rail has no scroll of its own otherwise. Inert everywhere the
		   list already fits (the common case, including Employee Dashboard's
		   shorter list) since nothing needs to scroll there. */
		max-height: calc(100vh - 16px) !important;
		overflow-y: auto !important;
		scrollbar-width: thin !important;
	}

	.hledu-frontend .hledu-company-sidebar__brand {
		display: none !important;
	}

	/* The 481–768px block above also matches this range and sets flex:1,
	   flex-direction:row, flex-wrap:wrap and justify-content:flex-end for
	   its row layout — explicitly reset here so this column rail doesn't
	   inherit any of that at those widths too. */
	.hledu-frontend .hledu-company-nav {
		flex: initial !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 8px !important;
	}

	/* Same reason — the 481–768px block also sets padding/gap/font-size/svg
	   size for a denser row layout; restated here so every icon in the rail
	   (including at those widths) matches the same size. */
	.hledu-frontend .hledu-company-nav__item {
		box-sizing: border-box !important;
		flex-shrink: 0 !important;
		max-width: 40px !important;
		height: 40px !important;
		padding: 0 0 0 11px !important;
		gap: 10px !important;
		font-size: 14px !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		transition: max-width 0.25s ease, color var(--hledu-transition) !important;
	}

	.hledu-frontend .hledu-company-nav__item svg {
		width: 18px !important;
		height: 18px !important;
	}

	/* Gated on body.hledu-hover-ready (see hledu-frontend.js
	   bindHoverReadyGuard()) — without it, landing on this page from a
	   click with the cursor still over the same icon would show its
	   label as "stuck open" from a stale :hover match, not a real hover. */
	body.hledu-hover-ready .hledu-frontend .hledu-company-nav__item:hover {
		max-width: 220px !important;
		padding: 0 16px 0 11px !important;
		background: transparent !important;
	}

	/* Strips the big standalone panel look — this is now just a layout
	   wrapper around one more icon in the rail. Also resets flex-basis/
	   display:grid from the 481–768px block above (that range's row
	   layout put the help button in a grid column), so this wrapper is a
	   plain block around the button at every width in this rail. */
	.hledu-frontend .hledu-company-sidebar__help {
		flex-basis: auto !important;
		margin-top: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border-radius: 0 !important;
		display: block !important;
	}

	.hledu-frontend .hledu-company-sidebar__help-icon,
	.hledu-frontend .hledu-company-sidebar__help h3,
	.hledu-frontend .hledu-company-sidebar__help p {
		display: none !important;
	}

	.hledu-frontend .hledu-company-sidebar__help .hledu-btn--primary {
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		width: auto !important;
		flex-shrink: 0 !important;
		max-width: 40px !important;
		height: 40px !important;
		padding: 0 0 0 11px !important;
		margin: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: var(--hledu-text) !important;
		box-shadow: none !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		transition: max-width 0.25s ease, color var(--hledu-transition) !important;
	}

	body.hledu-hover-ready .hledu-frontend .hledu-company-sidebar__help .hledu-btn--primary:hover {
		max-width: 220px !important;
		padding: 0 16px 0 11px !important;
		background: transparent !important;
		color: var(--hledu-primary) !important;
	}

	.hledu-frontend .hledu-company-sidebar__help-btn-icon {
		width: 18px !important;
		height: 18px !important;
		background: transparent !important;
	}

	.hledu-frontend .hledu-company-sidebar__help-btn-icon svg {
		width: 18px !important;
		height: 18px !important;
		color: inherit !important;
	}

	/* Leaves room so main content doesn't sit under the floating rail. */
	.hledu-frontend .hledu-company-main {
		padding-left: 56px !important;
	}
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.hledu-company-topbar {
	display: flex;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

.hledu-company-topbar__greeting h1 {
	margin: 0 0 4px !important;
	font-size: 24px !important;
}

.hledu-company-topbar__greeting p {
	margin: 0 !important;
	color: var(--hledu-text-muted) !important;
	font-size: 14px !important;
}

.hledu-company-topbar__actions {
	display: flex;
	align-items: center !important;
	gap: 14px !important;
	flex-shrink: 0 !important;
}

.hledu-company-topbar__bell {
	position: relative !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	color: var(--hledu-text) !important;
	font: inherit !important;
	padding: 0 !important;
	cursor: pointer !important;
}

/* On phones, the header-user button's name/role text (admin.css's
   .hledu-header-user__meta, reused on every standalone dashboard topbar —
   Company/Manager/Employee/Platform Owner/Staff) doesn't shrink
   (flex-shrink:0) and was overflowing the page next to the search/bell
   icons. Dropping just the text keeps the avatar+chevron tappable and
   still opens the same dropdown (Log Out, etc.). */
@media (max-width: 600px) {
	.hledu-frontend .hledu-header-user__meta {
		display: none !important;
	}

	.hledu-frontend .hledu-header-user {
		gap: 0 !important;
		padding: 4px !important;
	}
}

/* ── Notifications dropdown (Platform Owner topbar bell) ─────────────────── */
.hledu-notif-wrap {
	position: relative !important;
	flex-shrink: 0 !important;
}

.hledu-notif-dropdown {
	display: none;
	position: absolute !important;
	top: calc(100% + 8px) !important;
	right: 0 !important;
	width: 340px !important;
	max-width: calc(100vw - 32px) !important;
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-md) !important;
	z-index: 1000 !important;
	overflow: hidden !important;
}

.hledu-notif-wrap.is-open .hledu-notif-dropdown {
	display: block;
}

.hledu-notif-dropdown__header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: 14px 16px !important;
	border-bottom: 1px solid var(--hledu-border) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-notif-clear-all {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--hledu-text-muted) !important;
	cursor: pointer !important;
	padding: 0 !important;
}

.hledu-notif-clear-all:hover {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
}

.hledu-notif-dropdown__body {
	max-height: 360px !important;
	overflow-y: auto !important;
}

.hledu-notif-dropdown__body .hledu-fe-empty {
	padding: 32px 16px !important;
}

/* Read/unread states + row interactions — mirrors the same semantics as the
   wp-admin dashboard's own Recent Activity table (admin/css/hledu-admin.css). */
.hledu-notif-dropdown .hledu-activity-feed__row {
	cursor: pointer !important;
	position: relative !important;
	padding-right: 24px !important;
	padding-top: 10px !important;
	padding-left: 10px !important;
	transition: background 0.12s !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row--unread {
	background: var(--hledu-bg) !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row--unread .hledu-activity-feed__text {
	font-weight: 600 !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row--read .hledu-activity-feed__text {
	color: var(--hledu-text-muted) !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row:hover {
	background: var(--hledu-border-light) !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row--removing {
	pointer-events: none !important;
}

.hledu-notif-dropdown .hledu-activity-feed__title-link {
	color: inherit !important;
	text-decoration: underline !important;
	text-decoration-color: transparent !important;
	transition: text-decoration-color 0.15s !important;
}

.hledu-notif-dropdown .hledu-activity-feed__title-link:hover {
	text-decoration-color: currentColor !important;
}

.hledu-notif-close {
	position: absolute !important;
	top: 6px !important;
	right: 2px !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--hledu-text-muted) !important;
	cursor: pointer !important;
	padding: 0 !important;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s, color 0.15s !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row:hover .hledu-notif-close {
	opacity: 1;
}

.hledu-notif-close:hover {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
}

.hledu-company-topbar__bell-badge {
	position: absolute !important;
	top: -2px !important;
	right: -2px !important;
	min-width: 16px !important;
	height: 16px !important;
	padding: 0 4px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-danger) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
}

/* ── Subscription banner — 4 equal-width columns: plan / seats / renewal / manage ── */
.hledu-subscription-banner {
	display: grid;
	grid-template-columns: repeat(4, 1fr) !important;
	align-items: center !important;
	gap: 20px !important;
	padding: 20px 24px !important;
	margin-bottom: 24px !important;
	background: var(--hledu-primary-light) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
}

@media (max-width: 700px) {
	.hledu-subscription-banner {
		grid-template-columns: 1fr !important;
	}

	.hledu-subscription-banner__plan,
	.hledu-subscription-banner__seats,
	.hledu-subscription-banner__renewal {
		border-right: none !important;
		padding-right: 0 !important;
	}
}

.hledu-subscription-banner__plan {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
	border-right: 1px solid var(--hledu-border) !important;
	padding-right: 20px !important;
}

.hledu-subscription-banner__icon {
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	background: var(--hledu-gradient-primary) !important;
	color: #fff !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.hledu-subscription-banner__plan-text strong {
	display: block;
	font-size: 15px !important;
	color: var(--hledu-text) !important;
}

.hledu-subscription-banner__plan-text span {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-subscription-banner__seats {
	border-right: 1px solid var(--hledu-border) !important;
	padding-right: 20px !important;
}

.hledu-subscription-banner__seats-value {
	font-size: 22px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
}

.hledu-subscription-banner__seats-value small {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-subscription-banner__seats-label {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin-bottom: 6px !important;
}

.hledu-subscription-banner__renewal {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	border-right: 1px solid var(--hledu-border) !important;
	padding-right: 20px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-subscription-banner__renewal-text span {
	display: block;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-subscription-banner__renewal-text strong {
	display: block;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-subscription-banner__manage {
	display: flex;
	justify-content: flex-end !important;
}

.hledu-subscription-banner__manage .hledu-btn {
	white-space: nowrap !important;
}

/* ── Stat cards with icon + trend (mirrors admin's .hledu-stat-card) ─────── */
.hledu-frontend .hledu-stat-card {
	display: flex;
	align-items: center !important;
	gap: 14px !important;
	padding: 18px !important;
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
}

/* .hledu-bento-card sets flex-direction: column further down this file and
   would otherwise silently override the icon/value row layout above (equal
   specificity, later rule wins) — same fix as admin/css/hledu-admin.css. */
.hledu-frontend .hledu-stat-card.hledu-bento-card {
	flex-direction: row !important;
	align-items: center !important;
	gap: 14px !important;
}

.hledu-frontend .hledu-stat-icon-circle {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 52px !important;
	height: 52px !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
}

.hledu-frontend .hledu-stat-icon-circle .dashicons {
	font-size: 24px !important;
	width: 24px !important;
	height: 24px !important;
}

.hledu-frontend .hledu-stat-card--students .hledu-stat-icon-circle {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-frontend .hledu-stat-card--active .hledu-stat-icon-circle {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-frontend .hledu-stat-card--employees .hledu-stat-icon-circle {
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
}

.hledu-frontend .hledu-stat-card--courses .hledu-stat-icon-circle {
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
}

.hledu-frontend .hledu-stat-body {
	display: flex;
	flex-direction: column !important;
	gap: 2px !important;
}

.hledu-frontend .hledu-stat-value {
	font-size: 26px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
	line-height: 1 !important;
}

.hledu-frontend .hledu-stat-label {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-frontend .hledu-stat-trend {
	font-size: 11px !important;
	font-weight: 700 !important;
	margin-top: 2px !important;
}

.hledu-frontend .hledu-stat-trend--up {
	color: var(--hledu-success) !important;
}

.hledu-frontend .hledu-stat-trend--flat {
	color: var(--hledu-text-light) !important;
}

.hledu-frontend .hledu-stat-trend--down {
	color: var(--hledu-danger) !important;
}

/* ── Learning progress + quick actions row ───────────────────────────────── */
.hledu-company-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr !important;
	gap: 20px !important;
	margin-bottom: 24px !important;
}

@media (max-width: 900px) {
	.hledu-company-row-2 {
		grid-template-columns: 1fr !important;
	}
}

/* Reports page's Course Completion Rates / Top Performers row — 2:1
   (Course Completion Rates 2/3, Top Performers 1/3), instead of the base
   class's 3 equal columns. */
.hledu-company-row-2.hledu-report-row-2 {
	grid-template-columns: 2fr 1fr !important;
}

/* Scoped to just this card (not the shared .hledu-fe-card/.hledu-fe-card__body
   classes used elsewhere) so its content fills the row's stretched height
   instead of sitting top-anchored with empty space below. */
.hledu-progress-card {
	display: flex;
	flex-direction: column !important;
}

.hledu-progress-card .hledu-fe-card__body {
	flex: 1 !important;
	display: flex;
}

.hledu-progress-highlight {
	display: flex;
	align-items: center !important;
	flex: 1 !important;
	gap: 20px !important;
	padding-left: 20px !important;
	position: relative !important;
	overflow: hidden !important;
}

.hledu-progress-highlight .hledu-ring-track,
.hledu-progress-highlight .hledu-ring-fill {
	stroke-width: 8 !important;
}

.hledu-progress-highlight p {
	margin: 8px 0 4px !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
}

.hledu-progress-ring-wrap {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	position: relative !important;
	z-index: 1 !important;
	margin: auto 0 !important;
}

.hledu-progress-ring-caption {
	margin-top: -4px !important;
	font-size: 10px !important;
	color: var(--hledu-text-muted) !important;
	text-align: center !important;
}

.hledu-progress-highlight__text {
	position: relative !important;
	z-index: 1 !important;
	margin: auto 0 !important;
}

.hledu-progress-highlight__trend {
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--hledu-success) !important;
}

.hledu-progress-highlight__trend--down {
	color: var(--hledu-danger) !important;
}

.hledu-progress-highlight__trend--flat {
	color: var(--hledu-text-muted) !important;
}

.hledu-progress-highlight__trend .dashicons {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
}

.hledu-progress-highlight__trend-note {
	font-weight: 500 !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-progress-highlight__deco {
	position: absolute !important;
	right: 8px !important;
	bottom: 0 !important;
	color: var(--hledu-primary-light) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

/* ── Quick actions ────────────────────────────────────────────────────────── */
.hledu-quick-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 12px !important;
}

@media (max-width: 700px) {
	.hledu-quick-actions {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

.hledu-quick-action {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 14px 8px !important;
	border-radius: var(--hledu-radius-lg) !important;
	color: var(--hledu-text) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-decoration: none !important;
	transition: transform var(--hledu-transition), box-shadow var(--hledu-transition) !important;
}

.hledu-quick-action:hover {
	transform: translateY(-2px) !important;
	box-shadow: var(--hledu-shadow-md) !important;
}

.hledu-quick-action__icon {
	width: 44px !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.hledu-quick-action--purple {
	background: var(--hledu-secondary-light) !important;
}

.hledu-quick-action--purple .hledu-quick-action__icon {
	color: var(--hledu-secondary) !important;
}

.hledu-quick-action--green {
	background: var(--hledu-success-light) !important;
}

.hledu-quick-action--green .hledu-quick-action__icon {
	color: var(--hledu-success) !important;
}

.hledu-quick-action--blue {
	background: var(--hledu-primary-light) !important;
}

.hledu-quick-action--blue .hledu-quick-action__icon {
	color: var(--hledu-primary) !important;
}

.hledu-quick-action--orange {
	background: var(--hledu-warning-light) !important;
}

.hledu-quick-action--orange .hledu-quick-action__icon {
	color: var(--hledu-warning) !important;
}

.hledu-quick-action--teal {
	background: var(--hledu-info-light) !important;
}

.hledu-quick-action--teal .hledu-quick-action__icon {
	color: var(--hledu-info) !important;
}

.hledu-quick-action--pink {
	background: var(--hledu-danger-light) !important;
}

.hledu-quick-action--pink .hledu-quick-action__icon {
	color: var(--hledu-danger) !important;
}

/* ── Three-column row: top courses / students by manager / activity ─────── */
.hledu-company-row-3 {
	display: grid;
	grid-template-columns: 3fr 7fr !important;
	align-items: stretch !important;
	gap: 20px !important;
	margin-bottom: 24px !important;
}

.hledu-company-row-3>.hledu-fe-card {
	display: flex;
	flex-direction: column !important;
	height: 100% !important;
}

@media (max-width: 1100px) {
	.hledu-company-row-3 {
		grid-template-columns: 1fr !important;
	}
}

.hledu-course-mini-icon {
	width: 32px !important;
	height: 32px !important;
	border-radius: var(--hledu-radius-sm) !important;
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	margin-right: 8px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}

.hledu-course-row-title {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
}

a.hledu-course-row-title {
	color: inherit !important;
	text-decoration: none !important;
}

a.hledu-course-row-title:hover .hledu-course-row-title__text {
	color: var(--hledu-primary) !important;
	text-decoration: underline !important;
}

.hledu-course-row-title__text {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-course-mini-thumb {
	width: 32px !important;
	height: 32px !important;
	border-radius: var(--hledu-radius-sm) !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
}

/* Employee Dashboard's "Continue Learning" / "Latest Quiz" bento cards,
   above Top Courses — reuse .hledu-fe-badge/.hledu-progress/.hledu-btn
   above, just need their own row/column layout wrappers. */
.hledu-bento-card__header-actions {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
}

.hledu-fe-view-all {
	display: inline-flex;
	align-items: center !important;
	gap: 2px !important;
}

.hledu-fe-view-all__chevron {
	flex-shrink: 0 !important;
}

.hledu-latest-course {
	display: flex;
	align-items: center !important;
	gap: 14px !important;
}

.hledu-latest-course__avatar {
	width: 48px !important;
	height: 48px !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	flex-shrink: 0 !important;
}

.hledu-latest-course__avatar--img {
	object-fit: cover !important;
}

.hledu-latest-course__body {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex;
	flex-direction: column !important;
	gap: 6px !important;
}

.hledu-latest-course__title {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.hledu-latest-course__percent {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-latest-course__cta {
	flex-shrink: 0 !important;
}

.hledu-latest-course__meta {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
}

.hledu-latest-quiz {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
}

.hledu-latest-quiz__body {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex;
	flex-direction: column !important;
	gap: 6px !important;
}

.hledu-latest-quiz__title {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-latest-quiz__course {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-latest-quiz__meta {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin-top: 4px !important;
}

.hledu-latest-quiz__score {
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-latest-quiz__dot {
	color: var(--hledu-text-light) !important;
}

.hledu-latest-quiz__icon {
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.hledu-course-row-progress {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
}

.hledu-course-row-progress .hledu-progress {
	width: 70px !important;
}

.hledu-course-row-progress span {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	white-space: nowrap !important;
}

/* Employee-progress status badge, stacked under the bar+percent row above
   it in the same "Progress" table cell (Module 15). */
.hledu-course-row-progress + .hledu-fe-badge {
	margin-top: 6px !important;
}

/* ── Mini list (Students by Manager) ─────────────────────────────────────── */
.hledu-mini-list {
	display: flex;
	flex-direction: column !important;
}

.hledu-mini-list__row {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 4px !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

.hledu-mini-list__row:last-child {
	border-bottom: none !important;
}

.hledu-mini-list__avatar {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	flex-shrink: 0 !important;
}

.hledu-mini-list__name {
	flex: 1 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-mini-list__count-badge {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--hledu-success) !important;
	background: var(--hledu-success-light) !important;
	padding: 4px 10px !important;
	border-radius: var(--hledu-radius-full) !important;
	white-space: nowrap !important;
}

.hledu-fe-view-all {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-primary) !important;
}

.hledu-switch-link {
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-primary) !important;
}

.hledu-switch-link svg {
	flex-shrink: 0 !important;
}

.hledu-fe-view-all--disabled {
	color: var(--hledu-text-light) !important;
	cursor: default !important;
}

/* ── Students panel — header filter/search, avatar+subtitle cell, action-buttons row ── */
.hledu-fe-card__header-actions {
	display: flex;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

.hledu-students-toolbar {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
}

/* Match the search box's border radius to the status select's — they
   otherwise inherit different radii (pill vs standard) from the shared
   admin classes reused here. */
.hledu-students-toolbar .hledu-search-input {
	border-radius: var(--hledu-radius) !important;
}

.hledu-user-cell__info {
	display: flex;
	flex-direction: column !important;
	gap: 2px !important;
}

.hledu-user-cell__sub {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-user-cell__link {
	color: inherit !important;
	text-decoration: none !important;
}

.hledu-user-cell__link:hover {
	color: var(--hledu-primary) !important;
	text-decoration: underline !important;
}

.hledu-fe-actions-row {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-bottom: 24px !important;
}

.hledu-fe-actions-row__group {
	display: flex;
	gap: 12px !important;
}

/* Shared grid template for both the header row and every course row, so
   "Student Number" / "Progress" / "All Course" line up exactly with the
   data cells beneath them. */
.hledu-top-courses-row,
.hledu-fe-card__header.hledu-top-courses-row--head {
	display: grid;
	grid-template-columns: 3fr 80px 140px 100px !important;
	align-items: center !important;
	gap: 12px !important;
}

/* Platform Owner/Staff dashboards' own Top Courses card: the 3rd column
   holds a plain Company count instead of a progress bar, so it needs the
   same narrow width as the Employees column — scoped to this modifier so
   the Company/Company Manager dashboards' own Progress column (still a bar)
   keeps its wider column. */
.hledu-top-courses-row--company-col {
	grid-template-columns: 3fr 80px 80px 100px !important;
}

.hledu-top-courses-row--head span {
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-top-courses-row--head .hledu-fe-view-all {
	text-transform: none !important;
	letter-spacing: normal !important;
	text-align: right !important;
}

.hledu-top-courses-row__action {
	text-align: right !important;
}

.hledu-top-courses-row__action.hledu-row-actions {
	justify-content: flex-end !important;
}

.hledu-top-courses-row:not(.hledu-top-courses-row--head) {
	padding: 10px 0 !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

.hledu-top-courses-row:not(.hledu-top-courses-row--head):last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

/* Platform Owner Dashboard — Top Courses card body: no extra top breathing
   room above the first row (it already touches the header divider), but the
   bottom padding from .hledu-fe-card__body--pad stays so the last row's
   content doesn't hug the card's bottom edge/border. */
.hledu-fe-card__body--pad.hledu-top-courses-body {
	padding-top: 0 !important;
}

/* ── Activity feed (Recent Activity) ──────────────────────────────────────── */
.hledu-activity-feed {
	display: flex;
	flex-direction: column !important;
}

.hledu-activity-feed__row {
	display: flex;
	gap: 10px !important;
	padding: 4px 0 16px !important;
	position: relative !important;
}

.hledu-activity-feed__icon {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	z-index: 1 !important;
}

.hledu-activity-feed__icon .dashicons {
	font-size: 15px !important;
	width: 15px !important;
	height: 15px !important;
}

.hledu-activity-feed__icon--completed {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-activity-feed__icon--added {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-activity-feed__icon--certificate {
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
}

.hledu-activity-feed__text {
	font-size: 13px !important;
	color: var(--hledu-text) !important;
	line-height: 1.4 !important;
}

.hledu-activity-feed__time {
	font-size: 11px !important;
	color: var(--hledu-text-muted) !important;
}

/* Platform Staff dashboard only — icon moves from the left of the stat card
   to a small badge bottom-right, freeing the full card width for the
   value/label/trend text. Scoped to this modifier only (three-class
   compound selector, matching .hledu-frontend .hledu-stat-card.hledu-bento-card's
   own specificity) so the Company/Employee dashboards' stat cards are
   untouched. */
.hledu-frontend .hledu-stat-card.hledu-bento-card.hledu-stat-card--icon-corner {
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	position: relative !important;
	padding: 15px !important;
}

/* Shared admin decorative corner glow (.hledu-stat-card::after) is tuned
   for the standard 130px card — shrink it to fit this page's smaller,
   icon-corner cards. Scoped to this page only via .hledu-frontend, so the
   Super Admin dashboard's own stat cards keep their original glow size. */
.hledu-frontend .hledu-stat-card--icon-corner::after {
	width: 100px !important;
	height: 100px !important;
}

.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-value {
	font-size: 28px !important;
	line-height: 1 !important;
}

.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-icon-circle {
	position: absolute !important;
	right: 12px !important;
	bottom: 6px !important;
	width: 40px !important;
	height: 40px !important;
}

.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-icon-circle .dashicons {
	font-size: 19px !important;
	width: 19px !important;
	height: 19px !important;
}

/* Platform-Wide Completion — a dedicated vertical layout (ring, then text,
   then trend, all centered) instead of reusing the shared horizontal
   .hledu-progress-highlight row: that row centers its content within
   whatever height the grid row stretches it to, which looked disconnected
   once it sat beside the taller Platform Growth chart. Stacking vertically
   keeps the whole block centered together regardless of card height. */
.hledu-platform-completion {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	flex: 1 !important;
	gap: 6px !important;
	padding: 12px !important;
}

/* Wraps Platform-Wide Completion + Certification Pass Rate so the two
   split the grid row's height evenly (matching Platform Growth beside
   them) instead of one lone ring card looking mismatched next to a
   taller chart card. */
.hledu-platform-completion-col {
	display: flex;
	flex-direction: column !important;
	gap: 20px !important;
	height: 100% !important;
}

.hledu-platform-completion-col .hledu-fe-card {
	flex: 1 !important;
	min-height: 0 !important;
	margin-bottom: 0 !important;
}

/* Card-header selects (e.g. the Platform Growth range filter) inherit
   .hledu-select's width:100%/max-width:500px, which — unconstrained inside a
   flex header — stretches into an oversized dropdown next to the card
   title. Cap it to a compact, right-aligned control instead. */
.hledu-fe-card__header .hledu-select {
	width: auto !important;
	max-width: 150px !important;
	padding: 6px 30px 6px 10px !important;
	font-size: 12px !important;
}

/* ── 60/40 row: Top Courses (main) / Recent Activity (compact) ──────────── */
.hledu-company-row-60-40 {
	display: grid;
	grid-template-columns: 6fr 4fr !important;
	gap: 20px !important;
	margin-bottom: 24px !important;
}

@media (max-width: 1100px) {
	.hledu-company-row-60-40 {
		grid-template-columns: 1fr !important;
	}
}

/* Platform Owner dashboard's Top Courses / Recent Activity row — 2:1 instead
   of the base class's 6:4, so the columns line up with the 3-equal-column
   row above it (.hledu-company-row-2). */
.hledu-company-row-60-40.hledu-owner-row-2-1 {
	grid-template-columns: 2fr 1fr !important;
}

/* ── Platform Growth chart — hand-drawn SVG line chart, sample data.
   Re-rendered client-side when the range select changes (see inline script
   in dashboard-platform-staff.php) — still no server round-trip. ───────── */
.hledu-growth-chart__svg {
	width: 100% !important;
	height: auto !important;
	display: block;
}

.hledu-growth-chart__grid {
	stroke: var(--hledu-border) !important;
	stroke-width: 1 !important;
}

.hledu-growth-chart__axis-label,
.hledu-growth-chart__month-label {
	font-size: 11px !important;
	fill: var(--hledu-text-muted) !important;
}

/* Right-hand axis (New Companies) is tinted to match its line, since it
   shares the same gridlines as the left axis but a different scale. */
.hledu-growth-chart__axis-label--companies {
	fill: var(--hledu-secondary) !important;
}

.hledu-growth-chart__line {
	fill: none !important;
	stroke-width: 2.5 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

.hledu-growth-chart__line--employees {
	stroke: var(--hledu-primary) !important;
}

.hledu-growth-chart__line--companies {
	stroke: var(--hledu-secondary) !important;
}

.hledu-growth-chart__line--logins {
	stroke: var(--hledu-info) !important;
}

.hledu-growth-chart__point--employees {
	fill: var(--hledu-primary) !important;
}

.hledu-growth-chart__point--companies {
	fill: var(--hledu-secondary) !important;
}

.hledu-growth-chart__point--logins {
	fill: var(--hledu-info) !important;
}

.hledu-growth-chart__legend {
	display: flex;
	align-items: center !important;
	gap: 20px !important;
	margin-top: 12px !important;
}

.hledu-growth-chart__legend-item {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-growth-chart__legend-swatch {
	width: 14px !important;
	height: 3px !important;
	border-radius: 2px !important;
	display: inline-block;
}

.hledu-growth-chart__legend-swatch--employees {
	background: var(--hledu-primary) !important;
}

.hledu-growth-chart__legend-swatch--logins {
	background: var(--hledu-info) !important;
}

/* ── Layout toggle (List/Card) — My Courses ──────────────────────────────── */
.hledu-layout-toggle {
	display: inline-flex;
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	overflow: hidden !important;
}

.hledu-layout-toggle__btn {
	display: inline-flex;
	align-items: center !important;
	gap: 5px !important;
	padding: 7px 12px !important;
	border: none !important;
	background: var(--hledu-surface) !important;
	color: var(--hledu-text-muted) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.hledu-layout-toggle__btn svg {
	width: 14px !important;
	height: 14px !important;
}

.hledu-layout-toggle__btn+.hledu-layout-toggle__btn {
	border-left: 1.5px solid var(--hledu-border) !important;
}

.hledu-layout-toggle__btn:hover {
	background: var(--hledu-bg) !important;
}

.hledu-layout-toggle__btn.hledu-layout-toggle__btn--active {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

/* Fallback thumbnail (no course image) for the Card layout — a big
   initial-letter tile filling the same 16:9 area a real thumbnail would. */
.hledu-course-card__thumb--fallback {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
	font-size: 32px !important;
	font-weight: 800 !important;
}

.hledu-course-card__enrolled {
	color: var(--hledu-text-light) !important;
}

/* Platform Owner's Courses page — Card layout, fixed at 4 per row (unlike
   the auto-fill .hledu-course-grid used elsewhere) per explicit request. */
.hledu-owner-course-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
}

/* Card layout only — list layout's .hledu-course-card__body padding is
   untouched. */
.hledu-owner-course-grid .hledu-course-card__body {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

@media (max-width: 1100px) {
	.hledu-owner-course-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 480px) {
	.hledu-owner-course-grid {
		grid-template-columns: 1fr !important;
	}
}

.hledu-growth-chart__legend-swatch--companies {
	background: var(--hledu-secondary) !important;
}

/* ==========================================================================
   Course Form — Frontend
   ========================================================================== */

/* ── Layout ── */
.hledu-fe-course-form {
	max-width: var(--hledu-container) !important;
	margin: 0 auto !important;
}

.hledu-fe-course-form__nav {
	display: flex;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

.hledu-fe-course-form__nav h1 {
	margin: 0 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-fe-back-link {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	color: var(--hledu-text-muted) !important;
	text-decoration: none !important;
	font-size: 14px !important;
	flex-shrink: 0 !important;
}

.hledu-fe-back-link:hover {
	color: var(--hledu-primary) !important;
	text-decoration: none !important;
}

.hledu-fe-form-layout {
	display: grid;
	grid-template-columns: 1fr 320px !important;
	gap: 24px !important;
	align-items: start !important;
}

@media (max-width: 900px) {
	.hledu-fe-form-layout {
		grid-template-columns: 1fr !important;
	}
}

.hledu-fe-form-main,
.hledu-fe-form-sidebar {
	display: flex;
	flex-direction: column !important;
	gap: 20px !important;
}

/* ── Card ── */
.hledu-fe-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	overflow: hidden !important;
}

.hledu-fe-card__header {
	padding: 14px 20px !important;
	border-bottom: 1px solid var(--hledu-border) !important;
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
}

.hledu-fe-card__header h2 {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-fe-card__body--pad {
	padding: 20px !important;
}

/* Students table bleeds to the card edges — its cells already carry their
   own 20px horizontal padding, so this cancels the card body's padding for
   the table only; other content in the same card (alerts, pagination) keeps it. */
.hledu-fe-card__body--pad .hledu-fe-table-wrap {
	margin: 0 -20px !important;
}

/* Students list card only — top and bottom padding removed, left/right kept. */
.hledu-students-list-body {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Managers list card only — mirrors .hledu-students-list-body. */
.hledu-managers-list-body {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Platform Owner's Courses list card only — mirrors .hledu-students-list-body. */
.hledu-courses-list-body {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Students by Manager / Top Student cards only. */
.hledu-mini-list-body {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Students list pagination — info text left, page numbers right, one row. */
.hledu-students-pagination-row {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
}

.hledu-students-pagination-row .hledu-pagination-info {
	text-align: left !important;
	margin: 0 !important;
}

/* Add/Edit Student card only — .hledu-fe-card's overflow:hidden would clip
   the course-assign tag-picker's dropdown, same reason the admin panel uses
   .hledu-card--overflow-visible around this same picker. Also covers the
   Company edit form's merged Assignment card (company-form.php), same
   .hledu-tag-picker component, same clipping issue. */
#hledu-student-form-card,
#hledu-course-manage-card,
#hledu-course-assignment-card,
#hledu-company-assignment-card {
	overflow: visible !important;
}

/* First Name / Last Name / Department / Status row — 30%, 30%, 20%, 20%.
   The row's 16px gap × 3 gaps (48px) is subtracted evenly across all four
   columns so they still sum to the row's full width instead of overflowing. */
.hledu-name-dept-row>.hledu-form-group.hledu-form-group--first-name,
.hledu-name-dept-row>.hledu-form-group.hledu-form-group--last-name {
	flex: 0 0 calc(30% - 12px) !important;
	min-width: 0 !important;
}

.hledu-name-dept-row>.hledu-form-group.hledu-form-group--department,
.hledu-name-dept-row>.hledu-form-group.hledu-form-group--status {
	flex: 0 0 calc(20% - 12px) !important;
	min-width: 0 !important;
}

/* Assign Courses / Manager row — courses 80%, manager 20%. */
.hledu-course-manager-row>.hledu-form-group.hledu-form-group--courses {
	flex: 0 0 70% !important;
}

.hledu-course-manager-row>.hledu-form-group.hledu-form-group--manager {
	flex: 0 0 30% !important;
	min-width: 0 !important;
	padding-right: 16px !important;
}

.hledu-form-group--manager .hledu-tag-picker {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Employee Capabilities section (Add/Edit Employee form) — grouped-card
   layout: "Company Access" / "Student Management" / "Employee Management",
   each its own bordered card with a group icon, title+description, and its
   capability checkboxes. Reuses the admin Users page's checkmark input skin
   (.hledu-cap-item's checkbox rule) as-is. The "All" toggle lives in
   .hledu-caps-header, next to the section label. */
.hledu-caps-row {
	border-top: 1px solid var(--hledu-border-light) !important;
	padding-top: 20px !important;
}

/* Header — "Capabilities" title + description on the left, "All" toggle on
   the right, same row. */
.hledu-caps-header {
	display: flex;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin-bottom: 16px !important;
}

.hledu-caps-header__text label {
	margin-bottom: 4px !important;
}

.hledu-caps-header__desc {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-caps-header .hledu-cap-item--all {
	flex-shrink: 0 !important;
}

/* Group cards stack vertically with a gap between them. */
.hledu-caps-groups {
	display: flex;
	flex-direction: column !important;
	gap: 12px !important;
}

.hledu-caps-group {
	display: flex;
	align-items: flex-start !important;
	gap: 16px !important;
	padding: 8px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
}

/* Student Management / Employee Management share one row — both have fewer
   items than Company Access, so they fit comfortably side by side. */
.hledu-caps-groups-row {
	display: flex;
	gap: 12px !important;
}

.hledu-caps-groups-row>.hledu-caps-group {
	flex: 1 !important;
	min-width: 0 !important;
}

.hledu-caps-group__icon {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: var(--hledu-radius-lg) !important;
	flex-shrink: 0 !important;
}

.hledu-caps-group__icon--blue {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-caps-group__icon--purple {
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
}

.hledu-caps-group__icon--green {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-caps-group__info {
	flex: 0 0 185px !important;
	padding-top: 3px !important;
}

.hledu-caps-group__info h3 {
	margin: 0 0 2px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-caps-group__info p {
	margin: 0 !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-caps-group__items {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 20px !important;
	flex: 1 !important;
	min-width: 0 !important;
	padding-top: 6px !important;
}

/* .hledu-form-group label{display:block} (higher specificity than
   .hledu-cap-item's own display:flex, since these rows live inside a
   .hledu-form-group) was silently blockifying each row and leaving the
   checkbox sitting at the text's baseline instead of vertically centered —
   re-assert flex+center here at matching specificity to win the cascade. */
.hledu-form-group .hledu-caps-header .hledu-cap-item,
.hledu-form-group .hledu-caps-group__items .hledu-cap-item {
	display: flex;
	align-items: center !important;
	margin-bottom: 0 !important;
	background: none !important;
	border: none !important;
	padding: 4px 0 !important;
}

/* Same font size/weight as the "Capabilities" label — covers "All
   Permission" and every capability item's text (All Students, Create,
   Edit, Delete, etc). */
.hledu-caps-header .hledu-cap-item__label,
.hledu-caps-group__items .hledu-cap-item__label {
	font-size: 13px !important;
	font-weight: 600 !important;
}

.hledu-caps-header .hledu-cap-item:hover,
.hledu-caps-group__items .hledu-cap-item:hover {
	border-color: transparent !important;
}

/* Checkbox is now first in the markup (checkmark, then label) — the base
   rule's margin-left:auto was only there to push it to the right when it was
   last, so it's neutralized here. outline is removed since the existing
   :focus-visible box-shadow glow (inherited from .hledu-cap-item's own rule)
   already gives an accessible, non-black focus indicator. */
.hledu-caps-header .hledu-cap-item input[type="checkbox"],
.hledu-caps-group__items .hledu-cap-item input[type="checkbox"] {
	margin-left: 0 !important;
	outline: none !important;
}

@media (max-width: 900px) {
	.hledu-caps-group {
		flex-wrap: wrap !important;
	}

	.hledu-caps-group__info {
		flex: 1 1 auto !important;
	}

	.hledu-caps-groups-row {
		flex-direction: column !important;
	}
}

/* Username field in Edit mode — .hledu-input sets its own color/background,
   which otherwise hides the browser's default disabled look entirely. */
#hledu_stu_username:disabled {
	opacity: 0.6;
	background: var(--hledu-bg) !important;
	color: var(--hledu-text-muted) !important;
	cursor: not-allowed !important;
}

/* ── Fields ── */
.hledu-fe-field {
	margin-bottom: 14px !important;
}

.hledu-fe-field:last-child {
	margin-bottom: 0 !important;
}

.hledu-fe-field label {
	display: block;
	margin-bottom: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-fe-required {
	color: var(--hledu-danger) !important;
	margin-left: 2px !important;
}

.hledu-fe-input,
.hledu-fe-select,
.hledu-fe-textarea {
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 14px !important;
	color: var(--hledu-text) !important;
	background: var(--hledu-surface) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
}

.hledu-fe-input:hover,
.hledu-fe-select:hover,
.hledu-fe-textarea:hover {
	border-color: var(--hledu-text-light) !important;
}

.hledu-fe-input:focus,
.hledu-fe-select:focus,
.hledu-fe-textarea:focus {
	outline: none !important;
	border-color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-fe-textarea {
	resize: vertical !important;
	min-height: 200px !important;
	font-family: inherit;
}

/* ── Form actions row ── */
.hledu-fe-form-actions {
	display: flex;
	gap: 10px !important;
	padding-bottom: 16px !important;
}

.hledu-fe-form-actions>.hledu-btn {
	flex: 1 !important;
}

.hledu-btn--full {
	width: 100% !important;
	justify-content: center !important;
}

/* ── Hint text ── */
.hledu-fe-hint {
	margin: 10px 0 0 !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

/* ── Alert ── */
.hledu-alert--error {
	background: var(--hledu-danger-light) !important;
	border: 1px solid var(--hledu-danger) !important;
	color: var(--hledu-danger) !important;
	border-radius: 6px !important;
	padding: 12px 16px !important;
	margin-bottom: 20px !important;
	font-size: 14px !important;
}

/* ── Media picker (shared with admin, but needed on frontend too) ── */
.hledu-media-tabs {
	display: flex;
	gap: 6px !important;
	margin-bottom: 14px !important;
}

.hledu-media-tab {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 7px 14px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: 6px !important;
	background: var(--hledu-bg) !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
	cursor: pointer !important;
	transition: border-color 0.15s, color 0.15s !important;
}

.hledu-media-tab:hover {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

/* admin/css/hledu-admin.css's own .hledu-media-tab:hover (also loaded on
   this page, for the ported media-picker JS) sets the same colors, but its
   .hledu-media-tab--active rule sets color with !important — which beats
   any non-important hover rule regardless of specificity, so the "Upload /
   Select" tab (active by default) kept its resting text color on hover
   instead of turning primary-colored. !important here is the only way to
   actually win against that. */
.hledu-frontend .hledu-media-tab:hover {
	color: var(--hledu-primary) !important;
}

.hledu-media-tab--active {
	border-color: var(--hledu-primary) !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	font-weight: 600 !important;
}

.hledu-thumbnail-preview {
	display: block;
	width: 100% !important;
	max-height: 180px !important;
	object-fit: cover !important;
	border-radius: 6px !important;
	margin-bottom: 10px !important;
	border: 1px solid var(--hledu-border) !important;
}

.hledu-thumbnail-actions {
	display: flex;
	gap: 8px !important;
	flex-wrap: wrap !important;
}

/* Wraps the primary media preview so its remove icon can float on top,
   top-right, instead of a separate "Remove" button below the image. */
.hledu-primary-preview-wrap {
	position: relative !important;
	display: block;
	margin-bottom: 4px !important;
}

.hledu-primary-media-remove {
	position: absolute !important;
	top: 4px !important;
	right: 4px !important;
	width: 22px !important;
	height: 22px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.6) !important;
	color: #fff !important;
	font-size: 14px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s !important;
}

.hledu-primary-preview-wrap:hover .hledu-primary-media-remove {
	opacity: 1;
}

.hledu-primary-media-remove:hover {
	background: var(--hledu-danger) !important;
}

.hledu-form-label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	margin: 0 0 10px !important;
}

/* admin/css/hledu-admin.css's own .hledu-form-label (also loaded on this
   page, for the ported quiz/media JS) sets text-transform: uppercase —
   override it back to normal capitalization for the frontend course form. */
.hledu-frontend .hledu-form-label {
	text-transform: none !important;
}

/* Separates Media Gallery from Primary Media within the merged Course
   Media card — spacing only, no divider line. */
.hledu-fe-card__subsection {
	margin-top: 20px !important;
	padding-top: 20px !important;
}

/* ── Price / Free toggle ── */
.hledu-price-row {
	display: flex;
	gap: 8px !important;
	align-items: stretch !important;
}

.hledu-price-row .hledu-fe-input {
	flex: 1 !important;
}

.hledu-price-free-btn {
	flex-shrink: 0 !important;
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
}

.hledu-price-free-btn__check {
	display: none !important;
	color: var(--hledu-success) !important;
}

.hledu-price-free-btn--active {
	background: var(--hledu-primary-light) !important;
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-price-free-btn--active .hledu-price-free-btn__check {
	display: inline-block !important;
}

/* ── Gallery grid ── */
.hledu-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 8px !important;
	margin-bottom: 12px !important;
}

.hledu-gallery-item {
	position: relative !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	aspect-ratio: 1 !important;
	border: 1px solid var(--hledu-border) !important;
}

.hledu-gallery-item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

.hledu-gallery-remove {
	position: absolute !important;
	top: 4px !important;
	right: 4px !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.6) !important;
	color: #fff !important;
	border: none !important;
	font-size: 13px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}

.hledu-gallery-remove:hover {
	background: var(--hledu-danger) !important;
}

/* ── Utility ── */
.hledu-hidden {
	display: none !important;
}

/* ==========================================================================
   Bento/Glass design system — Module 06B
   ========================================================================== */

/* ── Bento grid ──────────────────────────────────────────────────────────── */
.hledu-frontend .hledu-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr) !important;
	grid-auto-rows: minmax(120px, auto) !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

/* Five equal columns in one row — used where a wider stat row needs to fit
   without wrapping, same pattern as admin's .hledu-bento--cols-5. Shorter
   row height too, since its icon-corner cards need less vertical room than
   the standard left-icon stat card. */
.hledu-frontend .hledu-bento--cols-5 {
	grid-template-columns: repeat(5, 1fr) !important;
	grid-auto-rows: minmax(64px, auto) !important;
}

.hledu-frontend .hledu-bento-card {
	grid-column: span 1 !important;
	display: flex;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 20px !important;
	border-radius: var(--hledu-radius-lg) !important;
	background: var(--hledu-surface) !important;
	border: 1px solid var(--hledu-border) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	/* Same min-width:auto trap as .hledu-company-app's grid items — without
	   this, a wide child (e.g. a .hledu-fe-table-wrap table) stops this
	   card, and the bento grid track containing it, from ever shrinking
	   below the table's full unscrolled width, overflowing the page on
	   narrow screens instead of letting .hledu-fe-table-wrap's own
	   overflow-x:auto scroll it in place. */
	min-width: 0 !important;
}

.hledu-frontend .hledu-bento-card--wide {
	grid-column: span 2 !important;
}

.hledu-frontend .hledu-bento-card--tall {
	grid-row: span 2 !important;
}

.hledu-frontend .hledu-bento-card--large {
	grid-column: span 2 !important;
	grid-row: span 2 !important;
}

.hledu-frontend .hledu-bento-card--notice {
	grid-column: 1 / -1 !important;
	display: flex;
	flex-direction: column !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.hledu-frontend .hledu-bento-card--notice .hledu-bento-card__header {
	padding: 16px 20px !important;
	border-bottom: 1px solid var(--hledu-border) !important;
}

.hledu-frontend .hledu-bento-card__header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
}

.hledu-frontend .hledu-bento-card__header h2,
.hledu-frontend .hledu-bento-card__header h3 {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.hledu-frontend .hledu-bento-card__value {
	font-size: 28px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
	line-height: 1 !important;
}

.hledu-frontend .hledu-bento-card__label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
}

/* ── Glass modifier — bento dashboard cards + modals only ───────────────── */
.hledu-frontend .hledu-card--glass {
	background: var(--hledu-surface-glass) !important;
	backdrop-filter: blur(var(--hledu-blur)) !important;
	-webkit-backdrop-filter: blur(var(--hledu-blur)) !important;
	border: 1px solid rgb(255 255 255 / 0.18) !important;
	box-shadow: var(--hledu-shadow-glass) !important;
}

[data-hledu-theme="dark"] .hledu-frontend .hledu-card--glass {
	border-color: rgb(255 255 255 / 0.08) !important;
}

/* ── Gradient primary button ─────────────────────────────────────────────── */
.hledu-frontend .hledu-btn-primary {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 22px !important;
	border: none !important;
	border-radius: var(--hledu-radius-sm) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	font-family: inherit;
	color: #fff !important;
	cursor: pointer !important;
	text-decoration: none !important;
	background-image: var(--hledu-gradient-primary) !important;
	background-size: 200% 100% !important;
	background-position: 0 0 !important;
	transition: background-position var(--hledu-transition-slow), box-shadow var(--hledu-transition) !important;
}

.hledu-frontend .hledu-btn-primary:hover,
.hledu-frontend .hledu-btn-primary:focus-visible {
	background-position: 100% 0 !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-frontend .hledu-btn-secondary {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 22px !important;
	background: var(--hledu-surface) !important;
	color: var(--hledu-text) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: inherit;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-frontend .hledu-btn-secondary:hover {
	background: var(--hledu-bg) !important;
	border-color: var(--hledu-text-muted) !important;
}

.hledu-frontend .hledu-btn-tertiary {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 16px !important;
	background: transparent !important;
	color: var(--hledu-primary) !important;
	border: 1px solid transparent !important;
	border-radius: var(--hledu-radius-sm) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: inherit;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background var(--hledu-transition) !important;
}

.hledu-frontend .hledu-btn-tertiary:hover {
	background: var(--hledu-primary-light) !important;
}

/* ── Floating label form pattern ─────────────────────────────────────────── */
/* Scoped to .hledu-fe-field--floating only (the Status field) — NOT
   .hledu-form-group--floating, which the Content section's module/lesson/
   quiz/question inline-form templates (shared with admin/lesson-editor.php
   and templates/admin/course-form.php) also use. That class must keep
   admin/css/hledu-admin.css's own geometry so those fields render the same
   as the wp-admin course editor; scoping it here too made its label sit at
   the wrong height against the shared .hledu-input's actual size, looking
   overlapped/not standalone instead of a clean label above the field. */
.hledu-frontend .hledu-fe-field--floating {
	position: relative !important;
	padding-top: 20px !important;
}

/* The label always sits in its "floated" caption position above the field,
   from first render — see the matching fix on .hledu-form-group--floating
   in admin/css/hledu-admin.css for why (it no longer waits for focus/value). */
.hledu-frontend .hledu-fe-field--floating label {
	position: absolute !important;
	left: 2px !important;
	top: 8px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	padding: 0 4px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--hledu-primary) !important;
	background: var(--hledu-surface) !important;
	pointer-events: none !important;
}

/* ── Glow — the one active/selected/focus affordance ─────────────────────── */
.hledu-frontend .hledu-glow,
.hledu-frontend .hledu-dashboard-nav a.active,
.hledu-frontend .hledu-tab--active,
.hledu-frontend .hledu-tab.active,
.hledu-frontend .hledu-media-tab--active {
	box-shadow: var(--hledu-glow-primary) !important;
}

/* ── Motion — fade/slide entrance ─────────────────────────────────────────── */
@keyframes hledu-fade-slide-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hledu-fade-slide-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(8px);
	}
}

.hledu-frontend.hledu-fade-slide-in,
.hledu-fade-slide-in {
	animation: hledu-fade-slide-in 220ms ease-out !important;
}

.hledu-fade-slide-out {
	animation: hledu-fade-slide-out 220ms ease-out !important;
}

.hledu-frontend {
	animation: hledu-fade-slide-in 220ms ease-out !important;
}

/* ── Distraction-Free Mode (scaffolded here, wired in Module 16) ─────────── */
.hledu-focus-mode .hledu-dashboard-nav,
.hledu-focus-mode .hledu-emp-header,
.hledu-focus-mode .hledu-emp-superadmin-bar {
	display: none !important;
}

/* ── Skeleton loading shimmer ─────────────────────────────────────────────── */
.hledu-frontend .hledu-skeleton {
	position: relative !important;
	overflow: hidden !important;
	background: var(--hledu-border-light) !important;
	border-radius: var(--hledu-radius-sm) !important;
	color: transparent !important;
}

.hledu-frontend .hledu-skeleton::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	transform: translateX(-100%) !important;
	background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent) !important;
	animation: hledu-skeleton-shimmer 1.4s ease-in-out infinite !important;
}

[data-hledu-theme="dark"] .hledu-frontend .hledu-skeleton::after {
	background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.08), transparent) !important;
}

@keyframes hledu-skeleton-shimmer {
	100% {
		transform: translateX(100%);
	}
}

/* ── Progress ring — output of hledu_render_progress_ring() ──────────────── */
.hledu-frontend .hledu-ring {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
}

.hledu-frontend .hledu-ring svg {
	transform: rotate(-90deg) !important;
}

.hledu-frontend .hledu-ring-track {
	stroke: var(--hledu-border) !important;
	fill: none !important;
}

.hledu-frontend .hledu-ring-fill {
	stroke: var(--hledu-primary) !important;
	fill: none !important;
	stroke-linecap: round !important;
	transition: stroke-dashoffset var(--hledu-transition-slow) !important;
}

.hledu-frontend .hledu-ring__label {
	position: absolute !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

/* ── Quiz player (Module 08) ──────────────────────────────────────────────── */
.hledu-quiz-meta-list {
	list-style: none !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap !important;
	gap: 8px 20px !important;
	color: var(--hledu-text-muted) !important;
	font-size: 14px !important;
}

.hledu-quiz-answers {
	display: flex;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 12px !important;
}

.hledu-quiz-answer-option {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 14px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	cursor: pointer !important;
	transition: border-color var(--hledu-transition), background var(--hledu-transition) !important;
}

.hledu-quiz-answer-option:hover {
	border-color: var(--hledu-primary) !important;
}

.hledu-quiz-nav {
	display: flex;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-top: 16px !important;
}

/* .hledu-btn's own `display: inline-flex` is the same specificity as the
   browser's default [hidden] rule, so without this the Previous button
   stays visible even once JS sets it hidden on the last/complete step. */
.hledu-quiz-nav .hledu-btn[hidden] {
	display: none;
}

/* On the complete screen only Retake Quiz remains — center it instead of
   letting space-between pin a single item to the left. */
.hledu-quiz-nav--single {
	justify-content: center !important;
}

.hledu-quiz-result-body {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	gap: 14px !important;
	text-align: center !important;
}

.hledu-quiz-review-item {
	width: 100% !important;
	text-align: left !important;
	margin-bottom: 16px !important;
}

.hledu-frontend .hledu-answer-review-list {
	list-style: none !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column !important;
	gap: 4px !important;
}

.hledu-frontend .hledu-answer-review-list li {
	padding: 8px 12px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
}

.hledu-frontend .hledu-answer-review-list__item--correct {
	border-color: var(--hledu-success) !important;
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-quiz-review-position {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	align-self: center !important;
}

/* ── "Submit with unanswered questions?" popup — replaces window.confirm().
   Self-contained (not admin.css's .hledu-modal) since quiz-player.php also
   renders standalone on /take-quiz/, which never loads admin.css. ──────── */
.hledu-quiz-confirm-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgb(0 0 0 / 0.45) !important;
	z-index: 100000 !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
}

.hledu-quiz-confirm-box {
	width: 100% !important;
	max-width: 380px !important;
	padding: 24px !important;
	text-align: center !important;
}

.hledu-quiz-confirm-box p {
	margin: 0 0 20px !important;
	font-size: 14px !important;
	color: var(--hledu-text) !important;
	line-height: 1.5 !important;
}

.hledu-quiz-confirm-actions {
	display: flex;
	gap: 10px !important;
	justify-content: center !important;
}

/* ── Reduced motion — disable animation, keep the instant end state ──────── */
@media (prefers-reduced-motion: reduce) {

	.hledu-frontend,
	.hledu-fade-slide-in,
	.hledu-fade-slide-out,
	.hledu-frontend .hledu-skeleton::after {
		animation: none !important;
	}

	html,
	.hledu-frontend .hledu-btn-primary,
	.hledu-frontend .hledu-ring-fill {
		transition: none !important;
	}
}

/* ── Bento responsive ──────────────────────────────────────────────────────── */
/* At 1024px the 4 stat cards (and the two "wide" span-2 cards next to them,
   e.g. Recently Learning / Latest Quiz) used to drop from 4 columns to 2,
   stacking what should be one row into two. Keeping 4 columns here (still
   correctly overridden back down to 1 column by the existing ≤480px rule
   below, for phones) and shrinking padding/icon/font sizes in the
   481–1024px range keeps everything in a single row and still comfortably
   readable, without changing the already-tuned ≤480px phone layout — that's
   a separate pass. */
@media (max-width: 1024px) {
	.hledu-frontend .hledu-bento {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 10px !important;
	}

	.hledu-frontend .hledu-bento--cols-5 {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (min-width: 481px) and (max-width: 1024px) {
	.hledu-frontend .hledu-bento-card {
		padding: 12px !important;
		gap: 8px !important;
	}

	.hledu-frontend .hledu-stat-card.hledu-bento-card {
		gap: 8px !important;
	}

	.hledu-frontend .hledu-stat-icon-circle {
		width: 36px !important;
		height: 36px !important;
	}

	.hledu-frontend .hledu-stat-icon-circle .dashicons {
		font-size: 16px !important;
		width: 16px !important;
		height: 16px !important;
	}

	.hledu-frontend .hledu-stat-value {
		font-size: 17px !important;
	}

	.hledu-frontend .hledu-stat-label {
		font-size: 10px !important;
		/* Base rule is white-space:nowrap + ellipsis — at this card width
		   "Completed Courses"/"Certificates Earned" would just truncate to
		   "Completed C…"; wrapping to two lines reads better than that. */
		white-space: normal !important;
		line-height: 1.25 !important;
	}

	.hledu-frontend .hledu-bento-card__header h2,
	.hledu-frontend .hledu-bento-card__header h3 {
		font-size: 12px !important;
	}

	.hledu-frontend .hledu-latest-course,
	.hledu-frontend .hledu-latest-quiz {
		gap: 8px !important;
	}

	.hledu-frontend .hledu-latest-course__avatar {
		width: 36px !important;
		height: 36px !important;
		font-size: 14px !important;
	}

	.hledu-frontend .hledu-latest-quiz__icon {
		width: 40px !important;
		height: 40px !important;
	}

	.hledu-frontend .hledu-latest-course__title,
	.hledu-frontend .hledu-latest-quiz__title {
		font-size: 12px !important;
	}

	.hledu-frontend .hledu-latest-course__percent,
	.hledu-frontend .hledu-latest-quiz__course,
	.hledu-frontend .hledu-latest-quiz__meta {
		font-size: 11px !important;
	}

	.hledu-frontend .hledu-latest-course__body,
	.hledu-frontend .hledu-latest-quiz__body {
		gap: 4px !important;
	}
}

/* 481–880px: the 4 stat cards squeezed into one row of 4 (per the block
   above) read too small/cramped at this width — 2 per row instead reads
   much better. Since Recently Learning / Latest Quiz (.hledu-bento-card
   --wide) already span 2 of the grid's columns, dropping to a 2-column
   grid also makes each of them take the full row width instead of being
   squeezed to a quarter-width card each — fixing their cramped internal
   layout (avatar + title + button all fighting for space) as a direct
   result, not a separate override. */
@media (min-width: 481px) and (max-width: 880px) {
	.hledu-frontend .hledu-bento {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* The dashboard's "Top Courses" card-view grid (#hledu-courses-card-view
	   is this page's id for it) reads better as one column at this width
	   too — scoped by id so the shared .hledu-course-grid component (also
	   used on the standalone course-list page, with its own breakpoints)
	   is untouched everywhere else. */
	#hledu-courses-card-view .hledu-course-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 480px) {
	.hledu-frontend .hledu-bento {
		grid-template-columns: 1fr !important;
	}

	.hledu-frontend .hledu-bento--cols-5 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.hledu-frontend .hledu-bento-card--wide,
	.hledu-frontend .hledu-bento-card--large {
		grid-column: span 1 !important;
	}
}

/* ── Theme toggle switch (injected by hledu-frontend.js) ──────────────────── */
.hledu-theme-toggle {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-surface) !important;
	color: var(--hledu-text-muted) !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: background var(--hledu-transition), color var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-theme-toggle:hover {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-theme-toggle svg {
	width: 18px !important;
	height: 18px !important;
}

.hledu-theme-toggle .hledu-theme-toggle__sun {
	display: block !important;
}

.hledu-theme-toggle .hledu-theme-toggle__moon {
	display: none !important;
}

[data-hledu-theme="dark"] .hledu-theme-toggle .hledu-theme-toggle__sun {
	display: none !important;
}

[data-hledu-theme="dark"] .hledu-theme-toggle .hledu-theme-toggle__moon {
	display: block !important;
}

/* --------------------------------------------------------------------------
   Module 12 — Invite self-registration page (site root + ?hledu_invite=TOKEN)
   -------------------------------------------------------------------------- */
.hledu-fe-auth-wrap {
	display: flex;
	justify-content: center !important;
	padding: 48px 16px !important;
}

.hledu-fe-auth-card {
	width: 100% !important;
	max-width: 480px !important;
}

/* --------------------------------------------------------------------------
   Module 15 — Standalone login page (/haulity-login/)
   -------------------------------------------------------------------------- */
.hledu-login-body {
	margin: 0 !important;
	background: var(--hledu-bg) !important;
}

/* Full-bleed 50/50 split, no card chrome — each half fills its grid cell
   completely (Grid's default align/justify-items: stretch does this with
   no extra sizing rules needed). Single column below 900px so the form
   takes the full width there instead of leaving the hidden image's column
   as blank space. */
.hledu-auth-page {
	display: grid;
	grid-template-columns: 1fr !important;
	grid-template-rows: 100vh !important;
	min-height: 100vh !important;
}

@media (min-width: 900px) {
	.hledu-auth-page {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* .hledu-card gave this a border/shadow/radius/background — all stripped
   here since this style has no card chrome, just two full-height panels.
   The compound selector's specificity beats the plain .hledu-card rule
   regardless of stylesheet order. */
.hledu-card.hledu-auth-card {
	margin-bottom: 0 !important;
	background: var(--hledu-surface) !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

.hledu-auth-card {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 60px 48px !important;
}

/* Every direct child (brand block, heading, form, switch/secure notes)
   shares one centered content column, instead of stretching edge to edge
   across the half-screen panel. */
.hledu-auth-card>* {
	width: 100% !important;
	max-width: 400px !important;
}

@media (max-width: 480px) {
	.hledu-auth-card {
		padding: 32px 24px !important;
	}
}

/* Right half — just the transport photo dropped into
   assets/images/login-image.jpg, filling its panel edge to edge. Hidden
   below 900px (see .hledu-auth-page above) so mobile shows only the form. */
.hledu-auth-card--placeholder {
	display: none;
	padding: 0 !important;
}

.hledu-auth-card--placeholder>* {
	max-width: none !important;
}

.hledu-auth-card--placeholder img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

@media (min-width: 900px) {
	.hledu-auth-card--placeholder {
		display: block;
	}
}

.hledu-auth-card__brand {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	margin-bottom: 28px !important;
}

.hledu-auth-card__brand-logo {
	height: 40px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

.hledu-auth-card h1 {
	font-size: 24px !important;
	font-weight: 800 !important;
	margin: 0 0 6px !important;
	color: var(--hledu-text) !important;
}

.hledu-auth-card__subtitle {
	color: var(--hledu-text-muted) !important;
	font-size: 14px !important;
	margin: 0 0 24px !important;
}

.hledu-auth-row {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin: -4px 0 20px !important;
	font-size: 13px !important;
}

.hledu-auth-remember {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	color: var(--hledu-text-muted) !important;
	font-weight: 500 !important;
	cursor: pointer !important;
}

.hledu-auth-row a {
	color: var(--hledu-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.hledu-auth-row a:hover {
	text-decoration: underline !important;
}

.hledu-auth-card .hledu-btn--full {
	justify-content: center !important;
}

.hledu-auth-switch {
	margin: 20px 0 0 !important;
	font-size: 13px !important;
	text-align: center !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-auth-switch a {
	color: var(--hledu-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin-left: 4px !important;
}

.hledu-auth-switch a:hover {
	text-decoration: underline !important;
}

.hledu-auth-secure {
	display: flex;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 28px 0 0 !important;
	padding-top: 20px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-auth-secure .dashicons {
	color: var(--hledu-success) !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	margin-top: 1px !important;
}

/* --------------------------------------------------------------------------
   Settings — toggle switch + settings row (Platform Staff Settings mockup)
   -------------------------------------------------------------------------- */
.hledu-fe-toggle {
	position: relative !important;
	display: inline-flex;
	align-items: center !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
}

.hledu-fe-toggle input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
}

.hledu-fe-toggle__track {
	position: relative !important;
	width: 40px !important;
	height: 22px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-border) !important;
	transition: background var(--hledu-transition) !important;
}

.hledu-fe-toggle__track::after {
	content: '' !important;
	position: absolute !important;
	top: 2px !important;
	left: 2px !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	transition: transform var(--hledu-transition) !important;
}

.hledu-fe-toggle input:checked+.hledu-fe-toggle__track {
	background: var(--hledu-primary) !important;
}

.hledu-fe-toggle input:checked+.hledu-fe-toggle__track::after {
	transform: translateX(18px) !important;
}

.hledu-fe-toggle input:focus-visible+.hledu-fe-toggle__track {
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-settings-row {
	display: flex;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	padding: 16px 0 !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

.hledu-settings-row:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.hledu-settings-row:first-child {
	padding-top: 0 !important;
}

.hledu-settings-row__title {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	margin: 0 0 3px !important;
}

.hledu-settings-row__desc {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 !important;
}

.hledu-settings-swatch-row {
	display: flex;
	gap: 10px !important;
	margin-top: 6px !important;
}

.hledu-settings-swatch {
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	border: 2px solid transparent !important;
	cursor: pointer !important;
	box-shadow: var(--hledu-shadow-xs) !important;
}

.hledu-settings-swatch--active {
	border-color: var(--hledu-text) !important;
}

.hledu-settings-logo-picker {
	display: flex;
	align-items: center !important;
	gap: 16px !important;
}

.hledu-settings-logo-picker__preview {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: var(--hledu-radius-lg) !important;
	background-image: var(--hledu-gradient-primary) !important;
	color: #fff !important;
	font-weight: 800 !important;
	font-size: 22px !important;
	flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------------
   My Profile — header row (avatar, name/title/badge, Edit Photo)
   -------------------------------------------------------------------------- */
.hledu-profile-header {
	display: flex;
	align-items: center !important;
	gap: 20px !important;
}

.hledu-profile-header img {
	border-radius: 50% !important;
	flex-shrink: 0 !important;
}

.hledu-profile-header__meta {
	flex: 1 !important;
	min-width: 0 !important;
}

.hledu-profile-header__name {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
	margin: 0 0 4px !important;
}

.hledu-profile-header__title {
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 0 8px !important;
}

@media (max-width: 480px) {
	.hledu-profile-header {
		flex-wrap: wrap !important;
	}
}

/* --------------------------------------------------------------------------
   Company Details profile page — Platform Staff's read-only view of a
   single company, reached by clicking its name on the Companies list.
   -------------------------------------------------------------------------- */
.hledu-company-detail__header-actions {
	display: flex;
	gap: 8px !important;
	margin-left: auto !important;
}

.hledu-company-detail__avatar {
	width: 88px !important;
	height: 88px !important;
	font-size: 28px !important;
}

.hledu-company-detail__description {
	margin: 16px 0 0 !important;
	color: var(--hledu-text-muted) !important;
	line-height: 1.6 !important;
}

.hledu-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 20px !important;
}

.hledu-detail-grid__label {
	display: block;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin-bottom: 4px !important;
}

.hledu-detail-grid__value {
	display: block;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

/* --------------------------------------------------------------------------
   Certificate view (Module 22) — standalone print/verification page.
   -------------------------------------------------------------------------- */
.hledu-certificate-view {
	max-width: 900px !important;
	margin: 40px auto !important;
	padding: 0 20px !important;
	font-family: var(--hledu-font) !important;
}

.hledu-certificate-view__toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
}

.hledu-certificate-view__revoked-banner {
	margin-right: auto !important;
	padding: 10px 16px !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
}

.hledu-certificate-view__paper {
	/* Defaults double as the "classic" design's tokens — every template
	   below overrides just what it needs on its own modifier class, so
	   the shared element rules underneath only ever read var(--cert-*). */
	--cert-accent: #1e3a5f;
	--cert-accent-secondary: #b8860b;
	--cert-bg: var(--hledu-surface);
	--cert-border: 3px double #1e3a5f;
	--cert-name-font: Georgia, 'Times New Roman', serif;
	background: var(--cert-bg) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-lg) !important;
	padding: 12px !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

.hledu-certificate-view__paper--revoked {
	opacity: 0.7 !important;
}

.hledu-certificate-view__border {
	position: relative !important;
	overflow: hidden !important;
	border: var(--cert-border) !important;
	border-radius: var(--hledu-radius) !important;
	padding: 64px 48px !important;
	text-align: center !important;
}

.hledu-certificate-view__icon {
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 auto 12px !important;
	color: var(--cert-accent) !important;
}

.hledu-certificate-view__eyebrow {
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--cert-accent-secondary) !important;
	margin: 0 0 24px !important;
}

.hledu-certificate-view__presented {
	font-size: 15px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 !important;
}

.hledu-certificate-view__name {
	font-family: var(--cert-name-font) !important;
	font-size: 40px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	margin: 12px 0 20px !important;
}

.hledu-certificate-view__body {
	font-size: 16px !important;
	color: var(--hledu-text) !important;
	max-width: 560px !important;
	margin: 0 auto 32px !important;
	line-height: 1.6 !important;
}

.hledu-certificate-view__meta {
	display: flex !important;
	justify-content: center !important;
	gap: 64px !important;
	margin-bottom: 32px !important;
}

.hledu-certificate-view__meta-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.hledu-certificate-view__meta-label {
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-certificate-view__meta-value {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-certificate-view__uid {
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
	letter-spacing: 0.04em !important;
	margin: 0 !important;
}

/* ── Certificate templates — 5 selectable built-in designs ────────────────
   Each modifier class only sets the --cert-* custom properties (and any
   design-specific decoration); every element rule above already reads
   from those properties, so no element rule needs repeating per design. */

.hledu-certificate-view__paper--classic {
	--cert-accent: #1e3a5f;
	--cert-accent-secondary: #b8860b;
	--cert-bg: #ffffff;
	--cert-border: 3px double #1e3a5f;
	--cert-name-font: Georgia, 'Times New Roman', serif;
}

.hledu-certificate-view__paper--classic .hledu-certificate-view__eyebrow::after {
	content: '' !important;
	display: block !important;
	width: 60px !important;
	height: 2px !important;
	background: var(--cert-accent-secondary) !important;
	margin: 10px auto 0 !important;
}

.hledu-certificate-view__paper--nordic {
	--cert-accent: #006AA7;
	--cert-accent-secondary: #c99400;
	--cert-bg: #ffffff;
	--cert-border: 2px solid #006AA7;
	--cert-name-font: var(--hledu-font);
}

.hledu-certificate-view__paper--nordic .hledu-certificate-view__border::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: 6px !important;
	background: linear-gradient(90deg, #006AA7 0%, #006AA7 50%, #FECC02 50%, #FECC02 100%) !important;
}

.hledu-certificate-view__paper--transport {
	--cert-accent: #d35400;
	--cert-accent-secondary: #2c3e50;
	--cert-bg: #fdfdfb;
	--cert-border: 3px dashed #2c3e50;
	--cert-name-font: var(--hledu-font);
}

.hledu-certificate-view__paper--modern {
	--cert-accent: #0f766e;
	--cert-accent-secondary: #0f766e;
	--cert-bg: #ffffff;
	--cert-border: none;
	--cert-name-font: var(--hledu-font);
}

.hledu-certificate-view__paper--modern .hledu-certificate-view__border {
	padding-top: 88px !important;
}

.hledu-certificate-view__paper--modern .hledu-certificate-view__border::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 8px !important;
	background: var(--cert-accent) !important;
}

.hledu-certificate-view__paper--gold {
	--cert-accent: #a67c00;
	--cert-accent-secondary: #a67c00;
	--cert-bg: #fdf8ec;
	--cert-border: 4px double #a67c00;
	--cert-name-font: Georgia, 'Times New Roman', serif;
}

.hledu-certificate-view__paper--appreciation {
	--cert-accent: #b5121b;
	--cert-accent-secondary: #c9a227;
	--cert-bg: #fffdf7;
	--cert-border: 2px solid #c9a227;
	--cert-name-font: 'Brush Script MT', 'Segoe Script', cursive;
}

.hledu-certificate-view__paper--appreciation .hledu-certificate-view__eyebrow {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: var(--cert-name-font) !important;
	font-size: 44px !important;
	color: var(--cert-accent) !important;
	margin-bottom: 4px !important;
}

.hledu-certificate-view__paper--appreciation .hledu-certificate-view__name {
	font-family: var(--cert-name-font) !important;
}

.hledu-certificate-view__paper--appreciation .hledu-certificate-view__border {
	padding-top: 40px !important;
	padding-bottom: 56px !important;
}

.hledu-certificate-view__ribbon {
	position: relative !important;
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 2px !important;
	margin: 0 auto 24px !important;
	padding: 8px 32px !important;
	background: #1f2937 !important;
	clip-path: polygon(4% 0%, 96% 0%, 100% 50%, 96% 100%, 4% 100%, 0% 50%) !important;
}

.hledu-certificate-view__ribbon-line1 {
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

.hledu-certificate-view__ribbon-line2 {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--cert-accent-secondary) !important;
}

.hledu-certificate-view__corner {
	position: absolute !important;
	width: 56px !important;
	height: 56px !important;
	border: 2px solid var(--cert-accent-secondary) !important;
	opacity: 0.55 !important;
}

.hledu-certificate-view__corner--tl {
	top: 8px !important;
	left: 8px !important;
	border-right: none !important;
	border-bottom: none !important;
}

.hledu-certificate-view__corner--tr {
	top: 8px !important;
	right: 8px !important;
	border-left: none !important;
	border-bottom: none !important;
}

.hledu-certificate-view__corner--bl {
	bottom: 8px !important;
	left: 8px !important;
	border-right: none !important;
	border-top: none !important;
}

.hledu-certificate-view__corner--br {
	bottom: 8px !important;
	right: 8px !important;
	border-left: none !important;
	border-top: none !important;
}

.hledu-certificate-view__seal {
	display: block !important;
	width: 44px !important;
	height: 52px !important;
	margin: 16px auto 0 !important;
	color: var(--cert-accent) !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

.hledu-cert-template-swatch--appreciation {
	background: #fffdf7 !important;
	border: 2px solid #c9a227 !important;
	position: relative !important;
}

.hledu-cert-template-swatch--appreciation::after {
	content: '' !important;
	position: absolute !important;
	inset: 4px !important;
	border: 1px solid #b5121b !important;
	opacity: 0.6 !important;
}

.hledu-certificate-view__file {
	background: var(--hledu-surface) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-lg) !important;
	padding: 16px !important;
	text-align: center !important;
}

.hledu-certificate-view__embed {
	width: 100% !important;
	height: 80vh !important;
	border: none !important;
	border-radius: var(--hledu-radius) !important;
}

.hledu-certificate-view__file-fallback {
	margin: 12px 0 0 !important;
}

@media print {
	.hledu-certificate-view {
		margin: 0 !important;
		max-width: none !important;
	}

	.hledu-certificate-view__toolbar,
	.hledu-theme-toggle,
	#wpadminbar {
		display: none !important;
	}

	.hledu-certificate-view__paper {
		box-shadow: none !important;
	}
}

/* ── Certificate template picker — certificate-issue-form.php /
   certificate-create-form.php's "choose a design" grid. ────────────────── */
.hledu-cert-template-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
}

.hledu-cert-template-option {
	position: relative !important;
}

.hledu-cert-template-option input[type="radio"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

.hledu-cert-template-option label {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	height: 100% !important;
	padding: 12px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	cursor: pointer !important;
	transition: var(--hledu-transition) !important;
}

.hledu-cert-template-option input:checked + label {
	border-color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-cert-template-option input:focus-visible + label {
	outline: 2px solid var(--hledu-primary) !important;
	outline-offset: 2px !important;
}

.hledu-cert-template-swatch {
	display: block !important;
	height: 48px !important;
	border-radius: var(--hledu-radius-sm) !important;
}

.hledu-cert-template-swatch--classic {
	background: linear-gradient(135deg, #1e3a5f, #2c5282) !important;
	border: 2px double #b8860b !important;
}

.hledu-cert-template-swatch--nordic {
	background: linear-gradient(90deg, #006AA7 0%, #006AA7 70%, #FECC02 70%, #FECC02 100%) !important;
}

.hledu-cert-template-swatch--transport {
	background: repeating-linear-gradient(90deg, #2c3e50, #2c3e50 8px, #d35400 8px, #d35400 16px) !important;
}

.hledu-cert-template-swatch--modern {
	background: #ffffff !important;
	border: 1px solid var(--hledu-border) !important;
	border-top: 8px solid #0f766e !important;
}

.hledu-cert-template-swatch--gold {
	background: #fdf8ec !important;
	border: 3px double #a67c00 !important;
}

.hledu-cert-template-option label strong {
	font-size: 13px !important;
	color: var(--hledu-text) !important;
}

.hledu-cert-template-option label small {
	font-size: 11px !important;
	color: var(--hledu-text-muted) !important;
	line-height: 1.4 !important;
}

/* ── Course certificate rule form (certificate-create-form.php) — upload
   vs. built-in-design toggle, live preview, and the draggable overlay-field
   editor for uploaded PDFs/images. ────────────────────────────────────────── */
.hledu-cert-source-toggle {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
}

.hledu-cert-source-toggle__option {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 16px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	cursor: pointer !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	transition: var(--hledu-transition) !important;
}

.hledu-cert-source-toggle__option:has(input:checked) {
	border-color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-cert-source-panel {
	margin-bottom: 20px !important;
}

.hledu-cert-preview {
	margin-bottom: 12px !important;
}

.hledu-cert-preview-box {
	position: relative !important;
	width: 100% !important;
	max-width: 640px !important;
	aspect-ratio: 1.414 / 1 !important;
	margin: 0 auto !important;
	overflow: hidden !important;
	background: var(--hledu-surface) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-lg) !important;
}

.hledu-cert-preview-box--view {
	margin: 0 auto !important;
}

.hledu-cert-preview-box__bg {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	border: none !important;
}

.hledu-cert-preview-box__placeholder {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
	text-align: center !important;
	padding: 20px !important;
}

.hledu-cert-field-chip {
	position: absolute !important;
	transform: translate(-50%, -50%) !important;
	padding: 4px 10px !important;
	background: rgba(255, 255, 255, 0.85) !important;
	border: 1px dashed var(--hledu-primary) !important;
	border-radius: var(--hledu-radius-sm) !important;
	cursor: grab !important;
	touch-action: none !important;
	user-select: none !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
}

.hledu-cert-field-chip.is-dragging {
	cursor: grabbing !important;
	box-shadow: var(--hledu-shadow-lg) !important;
	z-index: 2 !important;
}

.hledu-cert-field-controls {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 16px !important;
}

.hledu-cert-field-controls__row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 8px 12px !important;
	background: var(--hledu-bg) !important;
	border-radius: var(--hledu-radius-sm) !important;
}

.hledu-cert-field-controls__label {
	flex: 1 1 140px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-cert-field-controls__item {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-cert-field-controls__item .hledu-cert-field-size {
	width: 60px !important;
}

.hledu-cert-field-controls__item .hledu-cert-field-color {
	width: 32px !important;
	height: 28px !important;
	padding: 2px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	cursor: pointer !important;
}

.hledu-cert-criteria-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
	margin-bottom: 12px !important;
}

.hledu-cert-criteria-row__item {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
	white-space: nowrap !important;
}

/* A flex item's default min-width is auto (its content's own minimum size),
   not 0 — for a span of wrappable text that minimum is just its longest
   word, so without this the two spans below shrink to ~30px and wrap
   word-by-word instead of reading as one line. These are short, fixed
   phrases, so nowrap is correct rather than allowing wrap at all. */
.hledu-cert-criteria-row__item span {
	white-space: nowrap !important;
}

/* Compound selector, not just .hledu-input--narrow alone — admin/css/hledu-admin.css's
   .hledu-input{width:100% !important} is also loaded on this page and, being
   enqueued after this stylesheet, wins any single-class !important tie by
   source order. A compound selector always outranks it regardless of
   enqueue order — this was the actual cause of the Certificate Criteria
   row looking broken (the "narrow" input rendered at ~450px, not 70px,
   throwing off everything laid out after it). */
.hledu-input.hledu-input--narrow {
	width: 70px !important;
	max-width: 70px !important;
	flex: none !important;
}

.hledu-checkbox-label {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
	cursor: pointer !important;
}

.hledu-fe-empty-hint {
	padding: 24px !important;
	text-align: center !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
}

/* Final-render overlay fields (certificate-view.php) — same coordinate
   system as the editor's .hledu-cert-field-chip above, but static and
   print-safe instead of draggable. */
.hledu-certificate-view__field {
	position: absolute !important;
	transform: translate(-50%, -50%) !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

/* ── Certificate canvas builder (certificate-create-form.php +
   hledu-cert-designer.js) — Canva-style free-form design editor. ────────── */
.hledu-cert-designer {
	display: flex !important;
	align-items: flex-start !important;
	gap: 16px !important;
}

.hledu-cert-designer__main {
	flex: 1 1 480px !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

/* Left-hand template rail — small real preview cards, like a Canva template
   list, instead of a row of plain text buttons. */
.hledu-cert-designer__presets {
	flex: 0 0 120px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	max-height: 640px !important;
	overflow-y: auto !important;
}

.hledu-cert-preset-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	padding: 6px !important;
	background: var(--hledu-surface) !important;
	border: 2px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	cursor: pointer !important;
	transition: var(--hledu-transition) !important;
}

.hledu-cert-preset-card:hover {
	border-color: var(--hledu-primary) !important;
}

.hledu-cert-preset-card.is-active {
	border-color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-cert-preset-thumb {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 1.414 / 1 !important;
	overflow: hidden !important;
	background: #ffffff !important;
	border-radius: var(--hledu-radius-sm) !important;
	pointer-events: none !important;
}

.hledu-cert-preset-thumb__inner {
	width: 640px !important;
	transform-origin: top left !important;
}

/* The 'blank' preset has no rendered thumb HTML (empty design) — show a
   plain "+" placeholder instead. */
.hledu-cert-preset-card[data-preset="blank"] .hledu-cert-preset-thumb {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px dashed var(--hledu-border) !important;
	font-size: 24px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-cert-preset-card[data-preset="blank"] .hledu-cert-preset-thumb::before {
	content: '+' !important;
}

.hledu-cert-preset-card__label {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	text-align: center !important;
}

.hledu-cert-designer__toolbar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px !important;
	background: var(--hledu-bg) !important;
	border-radius: var(--hledu-radius) !important;
}

.hledu-cert-designer__toolbar-divider {
	width: 1px !important;
	align-self: stretch !important;
	background: var(--hledu-border) !important;
}

.hledu-cert-designer__toolbar .hledu-select {
	width: auto !important;
	min-width: 160px !important;
}

.hledu-cert-designer__bg-color {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
}

.hledu-cert-designer__bg-color input[type="color"] {
	width: 32px !important;
	height: 28px !important;
	padding: 2px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	cursor: pointer !important;
}

.hledu-cert-designer__body {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 16px !important;
}

.hledu-cert-designer__body .hledu-cert-preview-box {
	flex: 1 1 480px !important;
	position: relative !important;
	overflow: hidden !important;
}

.hledu-cert-el {
	position: absolute !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	cursor: move !important;
	outline: 1px dashed transparent !important;
	padding: 2px !important;
	white-space: pre-wrap !important;
	word-break: break-word !important;
	user-select: none !important;
	touch-action: none !important;
}

.hledu-cert-el:hover {
	outline-color: var(--hledu-border) !important;
}

.hledu-cert-el--dynamic {
	font-style: italic !important;
}

.hledu-cert-el--image {
	object-fit: contain !important;
	padding: 0 !important;
}

.hledu-cert-el.is-selected {
	outline: 2px solid var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-cert-el__handle {
	position: absolute !important;
	right: -6px !important;
	bottom: -6px !important;
	width: 12px !important;
	height: 12px !important;
	background: var(--hledu-primary) !important;
	border: 2px solid #ffffff !important;
	border-radius: 50% !important;
	cursor: nwse-resize !important;
	touch-action: none !important;
}

/* Elements inside the designer force their own `display` value (flex/
   inline-flex via .hledu-btn etc.), which otherwise beats the browser's
   native [hidden]{display:none} rule since !important always wins over an
   unmarked UA rule regardless of specificity — this restores it. */
.hledu-cert-designer [hidden] {
	display: none !important;
}

.hledu-cert-designer__props {
	flex: 0 0 240px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 14px !important;
	background: var(--hledu-bg) !important;
	border-radius: var(--hledu-radius) !important;
}

.hledu-cert-designer__props h4 {
	margin: 0 !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-cert-designer__props-row {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	font-size: 12px !important;
	color: var(--hledu-text) !important;
}

.hledu-cert-designer__props-row textarea,
.hledu-cert-designer__props-row select,
.hledu-cert-designer__props-row input[type="number"] {
	width: 100% !important;
	box-sizing: border-box !important;
}

.hledu-cert-designer__props-row input[type="color"] {
	width: 100% !important;
	height: 30px !important;
	padding: 2px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	cursor: pointer !important;
}

.hledu-cert-designer__props-row--inline {
	flex-direction: row !important;
	align-items: center !important;
}

.hledu-cert-designer__props-row--split {
	flex-direction: row !important;
	gap: 8px !important;
}

.hledu-cert-designer__props-row--split label {
	flex: 1 1 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.hledu-cert-designer__align-group {
	display: flex !important;
	gap: 6px !important;
}

.hledu-cert-designer__align-group .hledu-btn {
	padding: 4px 8px !important;
	font-size: 11px !important;
}

.hledu-cert-designer__align-group .hledu-btn.is-active {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-cert-designer__props-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-top: 6px !important;
}

/* Final-render elements from the canvas design (hledu_render_certificate_design())
   — static, print-safe, no editor chrome. */
.hledu-cert-design-element {
	position: absolute !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	white-space: pre-wrap !important;
	word-break: break-word !important;
	line-height: 1.3 !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

.hledu-cert-design-element--image {
	object-fit: contain !important;
}

.hledu-cert-design-element--shape {
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

/* Editor-side shape element — same idea as .hledu-cert-el--image, just a
   plain colored rectangle with no text child. */
.hledu-cert-el--shape {
	padding: 0 !important;
}

/* Page size / orientation — compound selectors (base class + modifier) so
   these always beat .hledu-cert-preview-box's own default 1.414:1 ratio
   regardless of source order, and only apply when a design actually sets a
   non-default page config; a design with none keeps today's exact default,
   so older saved designs are unaffected. */
.hledu-cert-preview-box.hledu-cert-page--a4-portrait {
	aspect-ratio: 1 / 1.4142 !important;
}

.hledu-cert-preview-box.hledu-cert-page--letter-landscape {
	aspect-ratio: 1.294 / 1 !important;
}

.hledu-cert-preview-box.hledu-cert-page--letter-portrait {
	aspect-ratio: 1 / 1.294 !important;
}

.hledu-cert-preview-box.hledu-cert-page--square {
	aspect-ratio: 1 / 1 !important;
}

/* ── Certificate verification search (Module 23) ─────────────────────────── */
.hledu-cert-verify__inner {
	max-width: 480px !important;
	margin: 40px auto !important;
	padding: 0 16px !important;
}

.hledu-cert-verify__intro {
	margin: 0 0 18px !important;
	font-size: 14px !important;
	color: var( --hledu-text-muted ) !important;
}

.hledu-cert-verify__form .hledu-btn {
	margin-top: 4px !important;
}

.hledu-cert-verify__result {
	margin-top: 20px !important;
}

.hledu-cert-verify__result-card {
	display: flex;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 16px !important;
	border-radius: var( --hledu-radius ) !important;
	border: 1px solid var( --hledu-border ) !important;
}

.hledu-cert-verify__result-card--valid {
	background: var( --hledu-success-light ) !important;
	border-color: var( --hledu-success ) !important;
}

.hledu-cert-verify__result-card--revoked {
	background: var( --hledu-danger-light ) !important;
	border-color: var( --hledu-danger ) !important;
}

.hledu-cert-verify__result-card--not_found,
.hledu-cert-verify__result-card--rate_limited,
.hledu-cert-verify__result-card--error {
	background: var( --hledu-bg ) !important;
}

.hledu-cert-verify__result-card .hledu-fe-badge {
	align-self: flex-start !important;
}

.hledu-cert-verify__result-row {
	display: flex;
	justify-content: space-between !important;
	gap: 12px !important;
	font-size: 14px !important;
	padding-top: 8px !important;
	border-top: 1px solid var( --hledu-border-light ) !important;
}

.hledu-cert-verify__result-row:first-of-type {
	border-top: none !important;
	padding-top: 0 !important;
}

.hledu-cert-verify__result-label {
	color: var( --hledu-text-muted ) !important;
	font-weight: 600 !important;
}

.hledu-cert-verify__result-value {
	color: var( --hledu-text ) !important;
	text-align: right !important;
}