/* ==========================================================================
   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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── 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;
	inset: 0;
	background: rgb(0 0 0 / 0.45);
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

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

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

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

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

.hledu-cert-preview-img {
	width: 100%;
	border-radius: var(--hledu-radius);
	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;
	overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hledu-course-learn__neighbor-label:last-child {
	text-align: right;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── 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;
}

/* 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;
	top: 16px;
	right: 16px;
	z-index: 100;
	box-shadow: var(--hledu-shadow-lg);
}

.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;
	overflow-x: hidden;
	overflow-y: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── 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;
	height: 560px;
	overflow: hidden;
	padding: 28px 40px;
	text-align: center;
}

/* [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;
	align-items: center;
	gap: 14px;
}

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

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

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

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

/* 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;
	gap: 4px;
	font-weight: 600;
	flex-shrink: 0;
}

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

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

/* .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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

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

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

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

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

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

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

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

/* 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;
	color: #f59e0b;
	font-size: 14px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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;
	color: var(--hledu-success);
}

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

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

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

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

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

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

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

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

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

/* 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;
	color: var(--hledu-text-light);
	margin-left: auto;
	white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   13. Course hero (single course page)
   -------------------------------------------------------------------------- */
.hledu-course-hero {
	background: #111827;
	color: #fff;
	padding: 40px;
	border-radius: var(--hledu-radius-lg);
	margin-bottom: 32px;
}

.hledu-course-hero__category {
	font-size: 12px;
	font-weight: 700;
	color: var(--hledu-primary-light);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.hledu-course-hero__title {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 12px;
}

.hledu-course-hero__desc {
	font-size: 15px;
	color: var(--hledu-text-light);
	margin-bottom: 20px;
}

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.hledu-course-grid {
		grid-template-columns: 1fr 1fr;
	}

	.hledu-course-hero {
		padding: 24px;
	}

	.hledu-course-hero__title {
		font-size: 22px;
	}
}

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

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

	/* 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;
		gap: 0;
	}

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

/* --------------------------------------------------------------------------
   16. Course list — search & pagination
   -------------------------------------------------------------------------- */
.hledu-course-list__search {
	display: flex;
	gap: 8px;
	max-width: 420px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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;
	gap: 10px;
	padding: 14px 16px;
	margin-bottom: 24px;
	background: var(--hledu-warning-light);
	border: 1px solid var(--hledu-warning);
	border-radius: var(--hledu-radius-lg);
	color: var(--hledu-text);
	font-size: 13px;
	line-height: 1.5;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* .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;
	align-items: center;
	gap: 14px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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;
}

/* 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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;
	gap: 2px;
}

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

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

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

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

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

/* 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;
	align-items: center;
	gap: 12px;
}

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

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

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

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

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

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

/* Platform Owner Dashboard — Top Courses card body: no extra top/bottom
   breathing room above the first row / below the last (left/right 20px
   from .hledu-fe-card__body--pad stays, so it doesn't hug the card edges). */
.hledu-fe-card__body--pad.hledu-top-courses-body {
	padding-top: 0;
	padding-bottom: 0;
}

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

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

.hledu-activity-feed__row:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 28px;
	bottom: 0;
	width: 2px;
	background: var(--hledu-border);
}

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

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

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

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

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

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

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

/* 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;
	align-items: flex-start;
	justify-content: center;
	position: relative;
	padding: 15px;
}

/* 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;
	height: 100px;
}

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

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

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

/* 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;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex: 1;
	gap: 6px;
	padding: 12px;
}

/* 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;
	gap: 20px;
	height: 100%;
}

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

/* 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;
	max-width: 150px;
	padding: 6px 30px 6px 10px;
	font-size: 12px;
}

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

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

/* 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;
}

/* ── 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%;
	height: auto;
	display: block;
}

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

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

/* 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);
}

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

.hledu-growth-chart__line--learners {
	stroke: var(--hledu-primary);
}

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

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

.hledu-growth-chart__point--learners {
	fill: var(--hledu-primary);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--hledu-secondary-light);
	color: var(--hledu-secondary);
	font-size: 32px;
	font-weight: 800;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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;
}

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

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

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

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

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

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

/* 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. */
#hledu-student-form-card,
#hledu-course-manage-card {
	overflow: visible;
}

/* 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);
	min-width: 0;
}

.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);
	min-width: 0;
}

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

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

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

/* 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);
	padding-top: 20px;
}

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

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

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

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

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

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

/* 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;
}

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

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

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

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

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

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

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

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

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

/* .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;
	margin-bottom: 0;
	background: none;
	border: none;
	padding: 4px 0;
}

/* 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;
	font-weight: 600;
}

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

/* 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;
	outline: none;
}

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

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

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

/* 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);
	color: var(--hledu-text-muted);
	cursor: not-allowed;
}

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

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

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

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

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

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

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

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

/* ── Form actions row ── */
.hledu-fe-form-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── 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);
	grid-auto-rows: minmax(120px, auto);
	gap: 16px;
	margin-bottom: 24px;
}

/* 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);
	grid-auto-rows: minmax(64px, auto);
}

.hledu-frontend .hledu-bento-card {
	grid-column: span 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	border-radius: var(--hledu-radius-lg);
	background: var(--hledu-surface);
	border: 1px solid var(--hledu-border);
	box-shadow: var(--hledu-shadow-xs);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Floating label form pattern ─────────────────────────────────────────── */
/* JS toggles .is-active on the wrapper when the field has focus or a
   non-empty value — works regardless of label/input DOM order. */
.hledu-frontend .hledu-form-group--floating,
.hledu-frontend .hledu-fe-field--floating {
	position: relative;
	padding-top: 20px;
}

/* Anchored a fixed distance from the group's top edge (roughly the resting
   vertical center of a standard input) rather than 50% of the group's total
   height, so a hint/error line below the field doesn't pull the label down. */
.hledu-frontend .hledu-form-group--floating label,
.hledu-frontend .hledu-fe-field--floating label {
	position: absolute;
	left: 13px;
	top: 40px;
	transform: translateY(-50%);
	margin: 0;
	padding: 0 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--hledu-text-light);
	background: var(--hledu-surface);
	pointer-events: none;
	transition: top var(--hledu-transition), font-size var(--hledu-transition), color var(--hledu-transition);
}

.hledu-frontend .hledu-form-group--floating.is-active label,
.hledu-frontend .hledu-fe-field--floating.is-active label {
	top: 8px;
	transform: translateY(-50%);
	font-size: 11px;
	font-weight: 700;
	color: var(--hledu-primary);
}

/* ── 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);
}

/* ── 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;
}

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

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

/* ── 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;
	overflow: hidden;
	background: var(--hledu-border-light);
	border-radius: var(--hledu-radius-sm);
	color: transparent !important;
}

.hledu-frontend .hledu-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent);
	animation: hledu-skeleton-shimmer 1.4s ease-in-out infinite;
}

[data-hledu-theme="dark"] .hledu-frontend .hledu-skeleton::after {
	background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.08), transparent);
}

@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;
	justify-content: center;
	position: relative;
}

.hledu-frontend .hledu-ring svg {
	transform: rotate(-90deg);
}

.hledu-frontend .hledu-ring-track {
	stroke: var(--hledu-border);
	fill: none;
}

.hledu-frontend .hledu-ring-fill {
	stroke: var(--hledu-primary);
	fill: none;
	stroke-linecap: round;
	transition: stroke-dashoffset var(--hledu-transition-slow);
}

.hledu-frontend .hledu-ring__label {
	position: absolute;
	font-size: 13px;
	font-weight: 700;
	color: var(--hledu-text);
}

/* ── Quiz player (Module 08) ──────────────────────────────────────────────── */
.hledu-quiz-meta-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	color: var(--hledu-text-muted);
	font-size: 14px;
}

.hledu-quiz-answers {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

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

.hledu-quiz-answer-option:hover {
	border-color: var(--hledu-primary);
}

.hledu-quiz-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

/* .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;
}

.hledu-quiz-result-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.hledu-quiz-review-item {
	width: 100%;
	text-align: left;
	margin-bottom: 16px;
}

.hledu-frontend .hledu-answer-review-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hledu-frontend .hledu-answer-review-list li {
	padding: 8px 12px;
	border: 1px solid var(--hledu-border);
	border-radius: var(--hledu-radius-sm);
}

.hledu-frontend .hledu-answer-review-list__item--correct {
	border-color: var(--hledu-success);
	background: var(--hledu-success-light);
	color: var(--hledu-success);
}

/* ── 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 ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.hledu-frontend .hledu-bento {
		grid-template-columns: repeat(2, 1fr);
	}

	.hledu-frontend .hledu-bento--cols-5 {
		grid-template-columns: repeat(3, 1fr);
	}
}

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

	.hledu-frontend .hledu-bento--cols-5 {
		grid-template-columns: repeat(2, 1fr);
	}

	.hledu-frontend .hledu-bento-card--wide,
	.hledu-frontend .hledu-bento-card--large {
		grid-column: span 1;
	}
}

/* ── Theme toggle switch (injected by hledu-frontend.js) ──────────────────── */
.hledu-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--hledu-border);
	border-radius: var(--hledu-radius-full);
	background: var(--hledu-surface);
	color: var(--hledu-text-muted);
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--hledu-transition), color var(--hledu-transition), border-color var(--hledu-transition);
}

.hledu-theme-toggle:hover {
	border-color: var(--hledu-primary);
	color: var(--hledu-primary);
}

.hledu-theme-toggle svg {
	width: 18px;
	height: 18px;
}

.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;
	padding: 48px 16px;
}

.hledu-fe-auth-card {
	width: 100%;
	max-width: 480px;
}

/* --------------------------------------------------------------------------
   Module 15 — Standalone login page (/haulity-login/)
   -------------------------------------------------------------------------- */
.hledu-login-body {
	margin: 0;
	background: var(--hledu-bg);
}

/* 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;
	grid-template-rows: 100vh;
	min-height: 100vh;
}

@media (min-width: 900px) {
	.hledu-auth-page {
		grid-template-columns: 1fr 1fr;
	}
}

/* .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;
	background: var(--hledu-surface);
	border: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

.hledu-auth-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 48px;
}

/* 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%;
	max-width: 400px;
}

@media (max-width: 480px) {
	.hledu-auth-card {
		padding: 32px 24px;
	}
}

/* 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;
}

.hledu-auth-card--placeholder>* {
	max-width: none;
}

.hledu-auth-card--placeholder img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 900px) {
	.hledu-auth-card--placeholder {
		display: block;
	}
}

.hledu-auth-card__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
}

.hledu-auth-card__brand-logo {
	height: 40px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.hledu-auth-card h1 {
	font-size: 24px;
	font-weight: 800;
	margin: 0 0 6px;
	color: var(--hledu-text);
}

.hledu-auth-card__subtitle {
	color: var(--hledu-text-muted);
	font-size: 14px;
	margin: 0 0 24px;
}

.hledu-auth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: -4px 0 20px;
	font-size: 13px;
}

.hledu-auth-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--hledu-text-muted);
	font-weight: 500;
	cursor: pointer;
}

.hledu-auth-row a {
	color: var(--hledu-primary);
	font-weight: 600;
	text-decoration: none;
}

.hledu-auth-row a:hover {
	text-decoration: underline;
}

.hledu-auth-card .hledu-btn--full {
	justify-content: center;
}

.hledu-auth-switch {
	margin: 20px 0 0;
	font-size: 13px;
	text-align: center;
	color: var(--hledu-text-muted);
}

.hledu-auth-switch a {
	color: var(--hledu-primary);
	font-weight: 600;
	text-decoration: none;
	margin-left: 4px;
}

.hledu-auth-switch a:hover {
	text-decoration: underline;
}

.hledu-auth-secure {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 28px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--hledu-border-light);
	font-size: 12px;
	color: var(--hledu-text-muted);
}

.hledu-auth-secure .dashicons {
	color: var(--hledu-success);
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Settings — toggle switch + settings row (Platform Staff Settings mockup)
   -------------------------------------------------------------------------- */
.hledu-fe-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	cursor: pointer;
}

.hledu-fe-toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.hledu-fe-toggle__track {
	position: relative;
	width: 40px;
	height: 22px;
	border-radius: var(--hledu-radius-full);
	background: var(--hledu-border);
	transition: background var(--hledu-transition);
}

.hledu-fe-toggle__track::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--hledu-shadow-xs);
	transition: transform var(--hledu-transition);
}

.hledu-fe-toggle input:checked+.hledu-fe-toggle__track {
	background: var(--hledu-primary);
}

.hledu-fe-toggle input:checked+.hledu-fe-toggle__track::after {
	transform: translateX(18px);
}

.hledu-fe-toggle input:focus-visible+.hledu-fe-toggle__track {
	box-shadow: var(--hledu-glow-primary);
}

.hledu-settings-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--hledu-border-light);
}

.hledu-settings-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.hledu-settings-row:first-child {
	padding-top: 0;
}

.hledu-settings-row__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--hledu-text);
	margin: 0 0 3px;
}

.hledu-settings-row__desc {
	font-size: 12px;
	color: var(--hledu-text-muted);
	margin: 0;
}

.hledu-settings-swatch-row {
	display: flex;
	gap: 10px;
	margin-top: 6px;
}

.hledu-settings-swatch {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	box-shadow: var(--hledu-shadow-xs);
}

.hledu-settings-swatch--active {
	border-color: var(--hledu-text);
}

.hledu-settings-logo-picker {
	display: flex;
	align-items: center;
	gap: 16px;
}

.hledu-settings-logo-picker__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--hledu-radius-lg);
	background-image: var(--hledu-gradient-primary);
	color: #fff;
	font-weight: 800;
	font-size: 22px;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   My Profile — header row (avatar, name/title/badge, Edit Photo)
   -------------------------------------------------------------------------- */
.hledu-profile-header {
	display: flex;
	align-items: center;
	gap: 20px;
}

.hledu-profile-header img {
	border-radius: 50%;
	flex-shrink: 0;
}

.hledu-profile-header__meta {
	flex: 1;
	min-width: 0;
}

.hledu-profile-header__name {
	font-size: 20px;
	font-weight: 800;
	color: var(--hledu-text);
	margin: 0 0 4px;
}

.hledu-profile-header__title {
	font-size: 13px;
	color: var(--hledu-text-muted);
	margin: 0 0 8px;
}

@media (max-width: 480px) {
	.hledu-profile-header {
		flex-wrap: wrap;
	}
}

/* --------------------------------------------------------------------------
   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;
	margin-left: auto;
}

.hledu-company-detail__avatar {
	width: 88px;
	height: 88px;
	font-size: 28px;
}

.hledu-company-detail__description {
	margin: 16px 0 0;
	color: var(--hledu-text-muted);
	line-height: 1.6;
}

.hledu-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.hledu-detail-grid__label {
	display: block;
	font-size: 12px;
	color: var(--hledu-text-muted);
	margin-bottom: 4px;
}

.hledu-detail-grid__value {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--hledu-text);
}