/* ==========================================================================
   Haulity LMS — Admin Design System
   All module CSS files import these variables; no module defines its own
   colors, radius, shadow, or base components.
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (design tokens)
   -------------------------------------------------------------------------- */
:root {
	/* Brand */
	--hledu-primary: #2563eb;
	--hledu-primary-hover: #1d4ed8;
	--hledu-primary-light: #eff6ff;
	--hledu-secondary: #7c3aed;
	--hledu-secondary-light: #f5f3ff;

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

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

	/* Shape */
	--hledu-radius-sm: 4px;
	--hledu-radius: 8px;
	--hledu-radius-lg: 12px;
	--hledu-radius-xl: 16px;
	--hledu-radius-full: 9999px;

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

	/* Motion */
	--hledu-transition: 150ms ease;
	--hledu-transition-slow: 300ms ease;

	/* Typography */
	--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";

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

/* Smooth theme switch: colors transition instead of snapping, except when
   the user prefers reduced motion. */
html {
	transition: background-color var(--hledu-transition-slow), color var(--hledu-transition-slow) !important;
}

/* --------------------------------------------------------------------------
   2. Base / reset (scoped to .hledu-wrap)
   -------------------------------------------------------------------------- */
.hledu-wrap {
	font-family: inherit;
	color: var(--hledu-text) !important;
	max-width: 1400px !important;
}

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

/* --------------------------------------------------------------------------
   3. Page header
   -------------------------------------------------------------------------- */
.hledu-page-header {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
	margin: 16px 0 24px !important;
	padding-bottom: 16px !important;
	border-bottom: 2px solid var(--hledu-border) !important;
}

.hledu-page-header h1 {
	margin: 0 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	line-height: 1.3 !important;
}

.hledu-page-header__title-group {
	display: flex;
	flex-direction: column !important;
	gap: 4px !important;
}

.hledu-page-header__title-row {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
}

.hledu-page-header__subtitle {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-page-header__actions {
	margin-left: auto !important;
	display: flex;
	gap: 8px !important;
	align-items: center !important;
}

.hledu-version-badge {
	display: inline-flex;
	align-items: center !important;
	padding: 2px 8px !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	border-radius: var(--hledu-radius-full) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
}

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

.hledu-card-header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 20px !important;
	border-bottom: 1px solid var(--hledu-border) !important;
	background: var(--hledu-bg) !important;
	border-radius: var(--hledu-radius-lg) var(--hledu-radius-lg) 0 0 !important;
}

/* Allows an absolutely-positioned dropdown (e.g. .hledu-tag-dropdown) inside
   this card to escape its bounds instead of being clipped. */
.hledu-card--overflow-visible {
	overflow: visible !important;
}

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

.hledu-card-body {
	padding: 20px !important;
}

.hledu-card-footer {
	padding: 12px 20px !important;
	border-top: 1px solid var(--hledu-border) !important;
	background: var(--hledu-bg) !important;
}

/* --------------------------------------------------------------------------
   5. Table component (.hledu-table)
   -------------------------------------------------------------------------- */
.hledu-table {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 13px !important;
}

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

.hledu-table th {
	padding: 10px 16px !important;
	text-align: left !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	color: var(--hledu-text-muted) !important;
	border-bottom: 2px solid var(--hledu-border) !important;
	white-space: nowrap !important;
}

.hledu-table td {
	padding: 12px 16px !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
	color: var(--hledu-text) !important;
	vertical-align: middle !important;
}

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

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

.hledu-table tbody tr.hledu-row--selected td {
	background: var(--hledu-bg) !important;
}

.hledu-table .column-cb {
	width: 36px !important;
}

/* Row-selection checkmark (Users list bulk select) */
.hledu-user-select-th {
	width: 44px !important;
}

.hledu-user-select-cell {
	text-align: center !important;
}

.hledu-user-select-check {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--hledu-text-muted) !important;
	opacity: 0.3;
	cursor: pointer !important;
	padding: 0 !important;
	transition: background 0.15s, opacity 0.15s, color 0.15s !important;
}

.hledu-user-select-check:hover {
	opacity: 0.75;
	background: var(--hledu-bg) !important;
}

.hledu-user-select-check--selected {
	color: var(--hledu-success, #16a34a) !important;
	opacity: 1;
}

.hledu-user-select-check--selected:hover {
	background: var(--hledu-success-light, #f0fdf4) !important;
}

/* --------------------------------------------------------------------------
   6. Form components (.hledu-form, .hledu-form-group, .hledu-btn)
   -------------------------------------------------------------------------- */
.hledu-form-group {
	margin-bottom: 20px !important;
}

/* Two (or more) form groups side by side, e.g. a lesson's Title + Content Type. */
.hledu-form-row {
	display: flex;
	gap: 16px !important;
}

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

.hledu-form-row>.hledu-form-group:has(.hledu-lesson-form-title) {
	flex: 2 !important;
}

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

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

.hledu-input,
.hledu-select,
.hledu-textarea {
	width: 100% !important;
	max-width: 500px !important;
	padding: 10px 14px !important;
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 13px !important;
	font-family: inherit;
	color: var(--hledu-text) !important;
	background: var(--hledu-surface) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	transition: border-color var(--hledu-transition), box-shadow var(--hledu-transition), background var(--hledu-transition) !important;
	/*
	 * These fields sit inside rows with draggable="true" (for reordering).
	 * Browsers make draggable elements — and their descendants — unselectable
	 * by default, and also let a click-drag on a descendant start the row's
	 * native drag instead of the field's own text selection. The JS
	 * "dragFromFormField" guard can only cancel that drag after the fact,
	 * leaving neither a drag nor a text selection. Restoring normal
	 * selection here and opting the field out of starting a native drag
	 * lets normal text selection happen instead.
	 */
	user-select: text !important;
	-webkit-user-drag: none !important;
}

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

/* Lesson Content Type select — custom chevron so it visibly reads as a dropdown.
   !important needed because .hledu-form-group--floating .hledu-select sets the
   `background` shorthand later in this file, which would otherwise wipe the
   background-image/position/repeat set here (same issue as .hledu-toolbar .hledu-select above). */
.hledu-lesson-form-content-type {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 36px !important;
	cursor: pointer !important;
}

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

/* Looks and behaves locked like a disabled field, without actually being
   disabled — the Invite modal's Company select on the frontend dashboards
   can't use the native disabled attribute because hledu-invite.js's shared
   toggleCompanyField() re-enables it on load whenever the selected role
   requires a company (true for Learner here). */
.hledu-select--locked {
	pointer-events: none !important;
	cursor: not-allowed !important;
	background: var(--hledu-bg) !important;
	color: var(--hledu-text-muted) !important;
}

/* A genuinely disabled .hledu-input (e.g. the My Profile form's Username
   field) otherwise keeps .hledu-input's own background/color, so it never
   visually reads as disabled — same muted look as .hledu-select--locked
   above, just for a real [disabled] input rather than a locked-but-enabled
   select. */
.hledu-input:disabled {
	cursor: not-allowed !important;
	background: var(--hledu-bg) !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-input--full,
.hledu-select--full,
.hledu-textarea--full {
	max-width: 100% !important;
}

.hledu-textarea {
	resize: vertical !important;
	min-height: 120px !important;
	line-height: 1.6 !important;
}

.hledu-form-hint {
	display: block;
	margin-top: 4px !important;
	font-size: 11px !important;
	color: var(--hledu-text-light) !important;
}

.hledu-form-hint-inline {
	font-weight: 400 !important;
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
}

.hledu-form-error {
	display: block;
	margin-top: 4px !important;
	font-size: 11px !important;
	color: var(--hledu-danger) !important;
}

/* Lesson editor — YouTube preview (Module 07) */
.hledu-lesson-form-video-preview:empty {
	display: none;
}

.hledu-lesson-form-video-preview {
	position: relative !important;
	width: 100% !important;
	max-width: 500px !important;
	margin-top: 10px !important;
	padding-top: 56.25% !important;
	/* 16:9 */
	border-radius: var(--hledu-radius) !important;
	overflow: hidden !important;
	background: var(--hledu-border-light) !important;
}

.hledu-lesson-video-embed {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
}

/* Lesson editor — Downloadable Resource section (Module 07). Dense form
   content stays on the solid surface, not glass, per the design system. */
.hledu-lesson-form-download {
	margin-top: 16px !important;
	padding: 14px 16px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	background: var(--hledu-surface) !important;
}

.hledu-lesson-form-download-header {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-lesson-form-download-header .dashicons {
	color: var(--hledu-text-muted) !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
}

.hledu-lesson-form-download .hledu-form-hint {
	margin: 4px 0 10px !important;
}

.hledu-lesson-form-download-preview:not(:empty) {
	margin-bottom: 10px !important;
}

.hledu-lesson-form-download-actions {
	display: flex;
	gap: 8px !important;
}

/* Capability checklist (Add/Edit user forms) */
.hledu-caps-toolbar {
	display: flex;
	justify-content: flex-end !important;
	margin: -4px 0 12px !important;
}

.hledu-caps-select-all {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--hledu-primary) !important;
	cursor: pointer !important;
}

.hledu-caps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 8px !important;
}

.hledu-cap-item {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 12px !important;
	background: var(--hledu-bg) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
	cursor: pointer !important;
	transition: background var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-cap-item:hover {
	border-color: var(--hledu-text-muted) !important;
}

.hledu-cap-item--checked {
	background: var(--hledu-primary-light) !important;
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-cap-item[hidden] {
	display: none;
}

.hledu-cap-item:has(input:disabled) {
	opacity: 0.55;
	cursor: not-allowed !important;
}

.hledu-form-group--caps {
	position: relative !important;
}

.hledu-cap-toast {
	position: absolute !important;
	left: 50% !important;
	top: 8px !important;
	transform: translateX(-50%) !important;
	background: var(--hledu-text) !important;
	color: var(--hledu-bg-card) !important;
	padding: 10px 18px !important;
	border-radius: var(--hledu-radius-sm) !important;
	font-size: 13px !important;
	box-shadow: var(--hledu-shadow-md) !important;
	z-index: 20 !important;
	opacity: 0;
	pointer-events: none !important;
	transition: opacity 300ms ease !important;
}

.hledu-cap-toast--visible {
	opacity: 1;
}

.hledu-cap-item input[type="checkbox"]:disabled {
	cursor: not-allowed !important;
}

/* Icon shown before the capability label */
.hledu-cap-item__icon {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	color: var(--hledu-text-muted) !important;
	flex-shrink: 0 !important;
}

.hledu-cap-item--checked .hledu-cap-item__icon {
	color: var(--hledu-primary) !important;
}

.hledu-cap-item__label {
	flex: 1 1 auto !important;
}

/* Pushes the checkbox to the right edge of the card (it's last in the markup)
   and gives it a smooth, custom look instead of the default browser checkbox.
   Also reused by "Select All", which uses the same last-in-markup pattern. */
.hledu-cap-item input[type="checkbox"],
.hledu-caps-select-all input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	margin-left: auto !important;
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: 6px !important;
	background: var(--hledu-bg-card) !important;
	cursor: pointer !important;
	position: relative !important;
	transition: background var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-cap-item input[type="checkbox"]:checked,
.hledu-caps-select-all input[type="checkbox"]:checked {
	background: var(--hledu-primary) !important;
	border-color: var(--hledu-primary) !important;
}

.hledu-cap-item input[type="checkbox"]:checked::after,
.hledu-caps-select-all input[type="checkbox"]:checked::after {
	content: "" !important;
	position: absolute !important;
	left: 6px !important;
	top: 2px !important;
	width: 5px !important;
	height: 10px !important;
	border: solid #fff !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
}

.hledu-cap-item input[type="checkbox"]:focus-visible,
.hledu-caps-select-all input[type="checkbox"]:focus-visible {
	box-shadow: var(--hledu-glow-primary) !important;
}

/* --------------------------------------------------------------------------
   Icon card headers (icon circle + title + subtitle) — User Edit page
   -------------------------------------------------------------------------- */
.hledu-card-header--icon {
	/* Override the base header's justify-content: space-between — that only
	   reads correctly when a 3rd "decoration" element balances it (Personal
	   Details); without one it pushed the title/subtitle to the far right
	   instead of sitting next to the icon. The decoration still lands on the
	   right via its own margin-left: auto below. */
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 14px !important;
}

.hledu-card-header__icon-circle {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
	flex-shrink: 0 !important;
}

.hledu-card-header__icon-circle .dashicons {
	font-size: 22px !important;
	width: 22px !important;
	height: 22px !important;
}

.hledu-card-header__title-group {
	min-width: 0 !important;
}

.hledu-card-header--icon .hledu-card-header__title-group h2 {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 16px !important;
}

.hledu-card-header__subtitle {
	margin: 2px 0 0 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--hledu-text-muted) !important;
	text-transform: none !important;
}

.hledu-card-header__decoration {
	margin-left: auto !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-bg) !important;
	color: var(--hledu-border) !important;
	flex-shrink: 0 !important;
}

.hledu-card-header__decoration .dashicons {
	font-size: 26px !important;
	width: 26px !important;
	height: 26px !important;
}

/* Icon prefix inside an input/select, and an optional trailing icon button
   (e.g. the password show/hide toggle) */
.hledu-input-icon-wrap {
	position: relative !important;
}

.hledu-input-icon-wrap__icon {
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--hledu-text-light) !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

.hledu-input-icon-wrap .hledu-input--icon,
.hledu-input-icon-wrap .hledu-select--icon {
	padding-left: 38px !important;
}

.hledu-input-icon-wrap .hledu-input--icon-trailing {
	padding-right: 38px !important;
}

/* Trailing (end) variant of the decorative icon above — e.g. a dropdown
   chevron at the end of a select instead of a leading icon at the start. */
.hledu-input-icon-wrap__icon--end {
	left: auto !important;
	right: 12px !important;
}

.hledu-select--icon-end {
	padding-right: 38px !important;
}

.hledu-input-icon-wrap__toggle {
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	color: var(--hledu-text-light) !important;
	cursor: pointer !important;
}

.hledu-input-icon-wrap__toggle:hover {
	color: var(--hledu-text-muted) !important;
}

/* Notice row with an action control (e.g. "Select All") pinned to the right */
.hledu-notice--with-action {
	justify-content: space-between !important;
}

/* Without this, the <p> shrinks to its own content width and
   justify-content: space-between centers it in the leftover space instead
   of letting it sit flush left next to the icon. */
.hledu-notice--with-action p {
	flex: 1 1 auto !important;
	text-align: left !important;
}

.hledu-notice--with-action .hledu-caps-select-all {
	flex-shrink: 0 !important;
	white-space: nowrap !important;
}

/* Small icon + muted text row inside a .hledu-card-footer */
.hledu-card-footer-note {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	margin: 0 !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-card-footer-note .dashicons {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0 !important;
}

/* Buttons */
.hledu-btn {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 9px 18px !important;
	background: var(--hledu-primary) !important;
	background-image: var(--hledu-gradient-primary) !important;
	background-size: 200% 100% !important;
	background-position: 0 0 !important;
	color: #fff !important;
	border: 1px solid transparent !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	font-family: inherit;
	cursor: pointer !important;
	text-decoration: none !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	transition: background-position var(--hledu-transition-slow), box-shadow var(--hledu-transition), transform var(--hledu-transition) !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
}

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

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

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

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

.hledu-btn--lg {
	padding: 11px 22px !important;
	font-size: 14px !important;
}

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

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

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

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

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

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

.hledu-btn--ghost {
	background: transparent !important;
	color: var(--hledu-primary) !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

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

.hledu-btn[disabled],
.hledu-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Icon-only Edit/Delete buttons (modules, lessons, quizzes, questions) —
   bordered square icon button; Delete turns reddish on hover.
   Selector is tripled (.hledu-icon-btn.hledu-icon-btn.hledu-icon-btn) to
   push its specificity (0,3,0) above frontend.css's .hledu-frontend
   .hledu-btn--sm/--lg/--secondary/--danger/--success (0,2,0) — these
   buttons are reused on frontend pages (e.g. Platform Owner's Courses
   list) alongside those modifier classes, and now that both sides are
   !important (global theme-isolation hardening), the tie must be broken
   by specificity instead; without this the modifier's padding/background
   won and shrank the icon to a near-invisible sliver. Every rule below is
   bumped by the same +2 classes so their relative order to each other is
   unchanged. */
.hledu-icon-btn.hledu-icon-btn.hledu-icon-btn {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	color: var(--hledu-text-muted) !important;
	opacity: 1;
	box-shadow: none !important;
}

.hledu-icon-btn.hledu-icon-btn.hledu-icon-btn:hover {
	background: var(--hledu-bg) !important;
	border-color: var(--hledu-text-muted) !important;
	color: var(--hledu-text) !important;
	opacity: 1;
	box-shadow: none !important;
	transform: none !important;
}

/* .hledu-btn--danger's text stays white for its normal filled background;
   with that background removed here, force a visible icon color instead,
   turning reddish on hover. */
.hledu-icon-btn.hledu-icon-btn.hledu-icon-btn.hledu-btn--danger {
	color: var(--hledu-text-muted) !important;
}

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

/* Platform Owner's Courses list — Delete icon. Renamed away from the
   admin course list's .hledu-course-delete-btn (below), which sets
   opacity: 0 by default and only reveals itself on row/icon hover — a
   different button this one accidentally shared a class name with,
   making it invisible on load. This one should always be visible, same
   dark color as the Edit/View icons beside it. */
.hledu-icon-btn.hledu-icon-btn.hledu-icon-btn.hledu-btn--danger.hledu-owner-course-delete-btn {
	color: var(--hledu-text) !important;
}

.hledu-icon-btn.hledu-icon-btn.hledu-icon-btn.hledu-btn--danger.hledu-owner-course-delete-btn:hover {
	color: var(--hledu-danger) !important;
}

/* .hledu-btn--success's text stays white for its normal filled background;
   same fix as .hledu-icon-btn.hledu-btn--danger above, so the icon (e.g.
   the Certificates page's Revoke button after it flips to "Reinstate")
   doesn't render invisible white-on-white. */
.hledu-icon-btn.hledu-icon-btn.hledu-icon-btn.hledu-btn--success {
	color: var(--hledu-text-muted) !important;
}

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

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

/* Modifier classes */
.hledu-badge--success,
.hledu-badge--active,
.hledu-badge--published,
.hledu-badge--completed,
.hledu-badge--approved {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

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

.hledu-badge--danger,
.hledu-badge--inactive,
.hledu-badge--cancelled,
.hledu-badge--rejected,
.hledu-badge--failed {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
}

.hledu-badge--info,
.hledu-badge--processing {
	background: var(--hledu-info-light) !important;
	color: var(--hledu-info) !important;
}

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

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

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

/* --------------------------------------------------------------------------
   8. Notice component (.hledu-notice)
   -------------------------------------------------------------------------- */
.hledu-notice {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 16px !important;
	border-radius: var(--hledu-radius-sm) !important;
	border-left: 4px solid !important;
	margin-bottom: 16px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.hledu-notice p {
	margin: 0 !important;
}

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

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

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

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

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

/* Row layout for the module/lesson Content toolbar: action buttons on the
   left, an info notice pinned to the right (wraps to its own line on narrow
   viewports). */
.hledu-content-toolbar {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

.hledu-content-toolbar__actions {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
	flex-shrink: 0 !important;
}

.hledu-content-toolbar .hledu-notice {
	border-left: none !important;
	border-right: 4px solid !important;
}

.hledu-content-toolbar .hledu-notice p {
	text-align: right !important;
}

/* Frontend course form embeds this toolbar in a narrower main column (there's
   a sidebar), so it wraps to two rows there even though it fits on one row
   on the full-width admin page — keep it on the same row here specifically. */
.hledu-frontend .hledu-content-toolbar {
	flex-wrap: nowrap !important;
}

.hledu-notice--mt {
	margin-top: 16px !important;
}

/* Users list — avatar before the name (real photo, or initials fallback) */
.hledu-user-cell {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
}

.hledu-user-avatar {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
	object-fit: cover !important;
}

.hledu-user-avatar--initials {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #fff !important;
	letter-spacing: 0.3px !important;
}

.hledu-user-avatar--c0 {
	background: #7c3aed !important;
}

.hledu-user-avatar--c1 {
	background: #f97316 !important;
}

.hledu-user-avatar--c2 {
	background: #2563eb !important;
}

.hledu-user-avatar--c3 {
	background: #16a34a !important;
}

.hledu-user-avatar--c4 {
	background: #eab308 !important;
}

.hledu-user-avatar--c5 {
	background: #0891b2 !important;
}

.hledu-user-avatar--c6 {
	background: #db2777 !important;
}

.hledu-user-avatar--c7 {
	background: #dc2626 !important;
}

.hledu-profile-picture-picker {
	display: flex;
	align-items: center !important;
	gap: 16px !important;
}

.hledu-profile-picture-picker .hledu-user-avatar,
.hledu-profile-picture-picker__preview {
	width: 72px !important;
	height: 72px !important;
	font-size: 26px !important;
	border-radius: var(--hledu-radius-full) !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
}

.hledu-profile-picture-picker__preview-wrap {
	position: relative !important;
	display: inline-flex;
	flex-shrink: 0 !important;
}

.hledu-profile-picture-picker__remove {
	position: absolute !important;
	top: -4px !important;
	right: -4px !important;
	width: 20px !important;
	height: 20px !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	border-radius: var(--hledu-radius-full) !important;
	background: #dc2626 !important;
	color: #fff !important;
	border: 2px solid var(--hledu-surface, #fff) !important;
	font-size: 14px !important;
	line-height: 1 !important;
	padding: 0 !important;
	cursor: pointer !important;
}

.hledu-profile-picture-picker__field {
	display: flex;
	flex-direction: column !important;
	gap: 4px !important;
}

/* --------------------------------------------------------------------------
   9. Stats row
   -------------------------------------------------------------------------- */
.hledu-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

.hledu-stat-card {
	display: flex;
	align-items: center !important;
	gap: 14px !important;
	padding: 18px !important;
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	transition: box-shadow var(--hledu-transition) !important;
	position: relative !important;
	overflow: hidden !important;
}

a.hledu-stat-card {
	color: inherit !important;
	text-decoration: none !important;
}

/* Soft decorative glow in the bottom-right corner, tinted per card variant */
.hledu-stat-card::after {
	content: "" !important;
	position: absolute !important;
	right: -30px !important;
	bottom: -30px !important;
	width: 130px !important;
	height: 130px !important;
	border-radius: 50% !important;
	background: currentColor !important;
	opacity: 0.07;
	pointer-events: none !important;
	z-index: 0 !important;
}

.hledu-stat-card--companies::after {
	color: var(--hledu-primary) !important;
}

.hledu-stat-card--students::after {
	color: var(--hledu-success) !important;
}

.hledu-stat-card--courses::after {
	color: var(--hledu-secondary) !important;
}

.hledu-stat-card--employees::after {
	color: var(--hledu-warning) !important;
}

.hledu-stat-card--logins::after {
	color: var(--hledu-info) !important;
}



.hledu-stat-card:hover {
	box-shadow: var(--hledu-shadow-md) !important;
}

.hledu-stat-card--highlight {
	border-color: var(--hledu-primary) !important;
	background: var(--hledu-primary-light) !important;
}

/* .hledu-bento-card sets flex-direction: column and is defined later in this
   file, which was silently overriding the icon/number/chart row layout below
   (equal specificity, later rule wins). Force the row layout back with a
   higher-specificity compound selector. */
.hledu-stat-card.hledu-bento-card {
	flex-direction: row !important;
	align-items: center !important;
	gap: 14px !important;
}

.hledu-stat-icon {
	font-size: 26px !important;
	width: 26px !important;
	height: 26px !important;
	color: var(--hledu-primary) !important;
	flex-shrink: 0 !important;
}

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

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

.hledu-stat-label {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* --------------------------------------------------------------------------
   10. Toolbar (search + filter bar above tables)
   -------------------------------------------------------------------------- */
.hledu-toolbar {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 14px 16px !important;
	border-bottom: 1px solid var(--hledu-border) !important;
	background: var(--hledu-bg) !important;
	flex-wrap: wrap !important;
}

.hledu-toolbar-spacer {
	flex: 1 !important;
}

.hledu-toolbar .hledu-select {
	/* !important on border/radius/shadow, same as .hledu-header-search__input:
	   WP core admin CSS styles <select> with enough specificity to otherwise
	   partially override these and keep it visually out of sync. */
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	width: auto !important;
	height: 36px !important;
	padding: 0 30px 0 12px !important;
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	background-color: var(--hledu-surface) !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	cursor: pointer !important;
	transition: border-color var(--hledu-transition), box-shadow var(--hledu-transition) !important;
}

.hledu-toolbar .hledu-select:hover {
	border-color: var(--hledu-text-muted) !important;
}

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

.hledu-bulk-actions-wrap {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 8px !important;
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
}

.hledu-bulk-actions-wrap .hledu-select {
	max-width: 160px !important;
}

.hledu-search-wrap {
	position: relative !important;
	display: flex;
	align-items: center !important;
}

.hledu-search-input {
	/* !important throughout, same as .hledu-header-search__input: WP core
	   admin CSS styles input[type=text] with enough specificity to otherwise
	   partially override this, keeping it visually out of sync with the
	   rest of the design system. */
	box-sizing: border-box !important;
	height: 36px !important;
	padding: 0 34px 0 14px !important;
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-full) !important;
	font-size: 13px !important;
	min-width: 240px !important;
	background: var(--hledu-surface) !important;
	color: var(--hledu-text) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	transition: border-color var(--hledu-transition), box-shadow var(--hledu-transition) !important;
}

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

/* --------------------------------------------------------------------------
   11. Tabs
   -------------------------------------------------------------------------- */
.hledu-tabs {
	display: flex;
	gap: 0 !important;
	border-bottom: 2px solid var(--hledu-border) !important;
	margin-bottom: 20px !important;
}

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

.hledu-tab:hover {
	color: var(--hledu-text) !important;
	text-decoration: none !important;
}

.hledu-tab.active,
.hledu-tab--active {
	color: var(--hledu-primary) !important;
	border-bottom-color: var(--hledu-primary) !important;
}

.hledu-tab-count {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	min-width: 20px !important;
	padding: 0 5px !important;
	height: 18px !important;
	border-radius: 9px !important;
	background: var(--hledu-border) !important;
	color: var(--hledu-text-muted) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	margin-left: 5px !important;
	line-height: 1 !important;
}

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

/* --------------------------------------------------------------------------
   12. Pagination
   -------------------------------------------------------------------------- */
.hledu-pagination {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	padding: 16px !important;
}

.hledu-pagination a,
.hledu-pagination span {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	min-width: 32px !important;
	height: 32px !important;
	padding: 0 6px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	font-size: 13px !important;
	text-decoration: none !important;
	color: var(--hledu-text-muted) !important;
	transition: background var(--hledu-transition) !important;
}

.hledu-pagination a:hover {
	background: var(--hledu-bg) !important;
}

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

/* --------------------------------------------------------------------------
   13. Modal
   -------------------------------------------------------------------------- */
.hledu-modal-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgb(0 0 0 / 0.45) !important;
	z-index: 100000 !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
}

.hledu-modal {
	background: var(--hledu-bg-card) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-lg) !important;
	width: 100% !important;
	max-width: 620px !important;
	max-height: 90vh !important;
	overflow-y: auto !important;
}

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

.hledu-modal-header h2 {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

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

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

.hledu-modal-body {
	padding: 20px 30px !important;
}

.hledu-modal-footer {
	display: flex;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 8px !important;
	padding: 14px 30px !important;
	border-top: 1px solid var(--hledu-border) !important;
}

/* Confirmation-style modal (centred icon + text) — hidden by default via ID */
#hledu-delete-modal {
	display: none;
}

#hledu-delete-modal.hledu-modal--open {
	display: flex;
}

#hledu-delete-all-modules-modal {
	display: none;
}

#hledu-delete-all-modules-modal.hledu-modal--open {
	display: flex;
}

#hledu-reset-lms-modal {
	display: none;
}

#hledu-reset-lms-modal.hledu-modal--open {
	display: flex;
}

.hledu-modal--confirm {
	max-width: 440px !important;
	padding: 32px 28px 28px !important;
	text-align: center !important;
	position: relative !important;
}

.hledu-modal-close {
	position: absolute !important;
	top: 14px !important;
	right: 16px !important;
}

.hledu-modal-icon {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	margin: 0 auto 16px !important;
}

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

#hledu-delete-modal-title {
	margin: 0 0 8px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-modal-course-name {
	margin: 0 0 10px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	font-size: 14px !important;
}

.hledu-modal-warning {
	margin: 0 0 24px !important;
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
	line-height: 1.55 !important;
}

.hledu-modal-actions {
	display: flex;
	gap: 10px !important;
	justify-content: center !important;
}

/* Module 12 — Invite Learner modal (Company Account + Company Employee dashboards) */
#hledu-invite-modal {
	display: none;
	/* On the frontend dashboards this modal is a direct child of the block
	   theme's .is-layout-constrained post-content wrapper, whose global
	   styles cap every non-aligned child to the theme's content width
	   (theme.json's contentSize, e.g. 620px) via a low-specificity :where()
	   selector — capping this overlay (and the .hledu-modal box sized off
	   it) far narrower than on wp-admin, which has no such wrapper. This ID
	   selector's specificity always wins without needing !important. */
	max-width: none !important;
}

#hledu-invite-modal.hledu-modal--open {
	display: flex;
}

/* Scoped, ID-anchored overrides for this modal only:
   1. .hledu-modal-header's own justify-content:space-between (declared later
      in this file than .hledu-card-header--icon's flex-start) otherwise wins
      the cascade tie, pushing the title away from the icon instead of
      sitting left-aligned next to it.
   2. wp-admin core's own forms.css styles input[type="email"]/"text"/select
      etc. with a bare attribute selector, which beats a lone .hledu-input
      class selector on specificity — so on this wp-admin screen the fields
      were silently falling back to WP's plain 2px-radius default instead of
      this design system's input styling. */
#hledu-invite-modal .hledu-modal-header {
	justify-content: flex-start !important;
}

#hledu-invite-modal .hledu-input,
#hledu-invite-modal .hledu-select,
#hledu-invite-modal .hledu-textarea {
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	background: var(--hledu-surface) !important;
	color: var(--hledu-text) !important;
}

#hledu-invite-modal .hledu-modal {
	max-width: 880px !important;
}

#hledu-invite-modal .hledu-card-header__icon-circle svg {
	width: 22px !important;
	height: 22px !important;
}

/* The Invite Method box needs more room than Role/Company to fit its 3-way
   Email/WhatsApp/Invite Link segmented control without the buttons
   overflowing their shared border. */
#hledu-invite-modal .hledu-form-row>.hledu-form-group {
	flex: 0.9 1 0 !important;
}

#hledu-invite-modal .hledu-form-row>#hledu-invite-method-field {
	flex: 1.2 1 0 !important;
}

/* Footer has a left-side "N users ready" status alongside Cancel/Send —
   the shared .hledu-modal-footer rule is flex-end only, scoped override here. */
#hledu-invite-modal .hledu-modal-footer {
	justify-content: space-between !important;
}

.hledu-invite-footer-status {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-invite-footer-status__icon {
	color: var(--hledu-success) !important;
}

.hledu-invite-footer-actions {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
}

/* Two-column body layout: People to Invite (left) + Permissions (right),
   divided by a horizontal rule from the row above and a vertical rule
   between the columns. */
.hledu-invite-columns {
	display: flex;
	align-items: flex-start !important;
	margin-top: 10px !important;
	padding-top: 30px !important;
	border-top: 1px solid var(--hledu-border) !important;
}

.hledu-invite-col-left,
.hledu-invite-col-right {
	flex: 1 !important;
	min-width: 0 !important;
}

.hledu-invite-col-left {
	padding-right: 24px !important;
}

.hledu-invite-col-right {
	padding-left: 24px !important;
	border-left: 1px solid var(--hledu-border) !important;
}

.hledu-invite-caps-header {
	display: flex;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-bottom: 10px !important;
}

.hledu-invite-caps-header .hledu-invite-section-title {
	margin: 0 !important;
}

.hledu-invite-caps-actions {
	display: flex;
	align-items: center !important;
	gap: 14px !important;
}


/* Permissions list: 2 per row, no card/border, checkbox before the label
   (markup order changed to checkbox-first, so the shared .hledu-cap-item
   rule's margin-left:auto — written for the old "checkbox last" layout —
   needs to be neutralized here). Scoped to this modal's own grid ID only;
   the Add User page's capability grid (a different ID) is unaffected. */
#hledu-invite-caps-grid {
	grid-template-columns: repeat(2, 1fr) !important;
}

#hledu-invite-caps-grid .hledu-cap-item {
	background: none !important;
	border: none !important;
	padding: 4px 0 !important;
}

#hledu-invite-caps-grid .hledu-cap-item:hover {
	border-color: transparent !important;
}

#hledu-invite-caps-grid .hledu-cap-item--checked {
	background: none !important;
	border-color: transparent !important;
}

#hledu-invite-caps-grid .hledu-cap-item input[type="checkbox"] {
	margin-left: 0 !important;
}

/* No focus glow on click — the shared .hledu-cap-item:focus-visible rule
   (also used by the Add User page's own capability grid) is intentionally
   left alone; this only cancels it out within this modal's grid. */
#hledu-invite-caps-grid input[type="checkbox"]:focus-visible {
	box-shadow: none !important;
}

.hledu-invite-section-title {
	margin: 0 0 10px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-invite-generate-row {
	display: flex;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	gap: 12px !important;
	margin-bottom: 18px !important;
}

.hledu-invite-generate-row .hledu-form-group {
	margin: 0 !important;
}

.hledu-invite-generate-row .hledu-input {
	width: 110px !important;
}

.hledu-invite-table td {
	vertical-align: middle !important;
}

.hledu-invite-table td:first-child {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	min-width: 260px !important;
}

.hledu-invite-table td:first-child .hledu-input {
	flex: 1 !important;
}

/* Invite User modal — channel picker (Email / WhatsApp / Link), styled as one
   seamless segmented control (shared outer border, divider between segments,
   rounded corners only at the two outer ends) rather than 3 separate pill buttons. */
.hledu-invite-channel-tabs {
	display: flex;
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	overflow: hidden !important;
}

.hledu-invite-channel-btn {
	flex: 1 !important;
	min-width: 0 !important;
	justify-content: center !important;
	gap: 5px !important;
	padding: 9px 10px !important;
	border: none !important;
	border-radius: 0 !important;
	background: var(--hledu-surface) !important;
	color: var(--hledu-text) !important;
	font-size: 12.5px !important;
	transition: background var(--hledu-transition), box-shadow var(--hledu-transition), color var(--hledu-transition) !important;
}

.hledu-invite-channel-btn+.hledu-invite-channel-btn {
	border-left: 1.5px solid var(--hledu-border) !important;
}

.hledu-invite-channel-btn:hover,
.hledu-invite-channel-btn:focus {
	background: var(--hledu-bg) !important;
}

.hledu-invite-channel-btn.hledu-invite-channel-btn--active {
	position: relative !important;
	z-index: 1 !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	box-shadow: inset 0 0 0 1.5px var(--hledu-primary) !important;
}

/* Invite User modal — multi-value chip input (recipient emails/phone numbers) */
.hledu-chip-input {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px !important;
	width: 100% !important;
	max-width: 500px !important;
	min-height: 42px !important;
	padding: 6px 8px !important;
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-surface) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
}

.hledu-chip-input:focus-within {
	border-color: var(--hledu-primary) !important;
}

/* WhatsApp invites aren't available yet — the chip box visibly dims when
   its input is disabled instead of looking identical to the working state. */
.hledu-chip-input:has(input:disabled) {
	background: var(--hledu-bg) !important;
	opacity: 0.65;
}

.hledu-chip-input__field:disabled {
	cursor: not-allowed !important;
}

.hledu-chip {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 4px 6px 4px 10px !important;
	border-radius: 999px !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}

.hledu-chip__remove {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 16px !important;
	height: 16px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: inherit !important;
	cursor: pointer !important;
	line-height: 1 !important;
	font-size: 14px !important;
}

.hledu-chip__remove:hover {
	background: rgb(0 0 0 / 0.08) !important;
}

.hledu-chip-input__field {
	flex: 1 !important;
	min-width: 140px !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	font-size: 13px !important;
	font-family: inherit;
	color: var(--hledu-text) !important;
	padding: 4px !important;
}

/* Course list — permanent delete icon button (archived rows only) */
.hledu-course-delete-btn {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--hledu-danger) !important;
	cursor: pointer !important;
	padding: 0 !important;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s !important;
}

tr:hover .hledu-course-delete-btn {
	opacity: 0.55;
}

.hledu-course-delete-btn:hover {
	opacity: 1 !important;
	background: var(--hledu-danger-light) !important;
}

/* --------------------------------------------------------------------------
   14. Empty state
   -------------------------------------------------------------------------- */
.hledu-empty-state {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 56px 20px !important;
	text-align: center !important;
}

.hledu-empty-state .dashicons {
	font-size: 44px !important;
	width: 44px !important;
	height: 44px !important;
	color: var(--hledu-border) !important;
	margin-bottom: 14px !important;
}

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

/* --------------------------------------------------------------------------
   15. Coming soon
   -------------------------------------------------------------------------- */
.hledu-coming-soon {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	padding: 64px 20px !important;
	text-align: center !important;
}

.hledu-coming-soon .dashicons {
	font-size: 52px !important;
	width: 52px !important;
	height: 52px !important;
	color: var(--hledu-border) !important;
	margin-bottom: 18px !important;
}

.hledu-coming-soon h2 {
	margin: 0 0 8px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

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

/* --------------------------------------------------------------------------
   16. Quick links
   -------------------------------------------------------------------------- */
.hledu-quick-links {
	display: flex;
	flex-wrap: wrap !important;
	gap: 10px !important;
	padding: 18px !important;
}

.hledu-quick-link {
	display: inline-flex;
	align-items: center !important;
	gap: 7px !important;
	padding: 9px 15px !important;
	background: var(--hledu-bg) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	text-decoration: none !important;
	transition: background var(--hledu-transition), border-color var(--hledu-transition), color var(--hledu-transition) !important;
}

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

.hledu-quick-link .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
}

/* --------------------------------------------------------------------------
   17. Row actions (inside table cells)
   -------------------------------------------------------------------------- */
.hledu-row-actions {
	display: flex;
	gap: 10px !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
}

.hledu-row-actions a {
	font-size: 12px !important;
	color: var(--hledu-primary) !important;
	text-decoration: none !important;
}

.hledu-row-actions a:hover {
	text-decoration: underline !important;
}

.hledu-row-actions a.hledu-delete,
.hledu-row-actions .hledu-row-delete {
	color: var(--hledu-danger) !important;
}

/* --------------------------------------------------------------------------
   18. Dashboard — Super Admin (Module 03)
   -------------------------------------------------------------------------- */

/* Full width on every Haulity LMS admin page. "hledu-page-*" is stamped by
   our own admin_body_class filter (Hledu_Admin::add_body_class()) on every
   hledu- page, so this never affects core WP admin screens. Existing
   .hledu-toolbar / .hledu-table responsive breakpoints elsewhere are
   unaffected since they key off viewport width, not this wrapper. */
body[class*="hledu-page-"] .hledu-wrap {
	max-width: none !important;
}

/* Stat card color variants for each platform metric */
.hledu-stat-card--companies .hledu-stat-icon {
	color: var(--hledu-primary) !important;
}

.hledu-stat-card--students .hledu-stat-icon {
	color: var(--hledu-success) !important;
}

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

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

.hledu-stat-card--logins .hledu-stat-icon {
	color: var(--hledu-info) !important;
}

/* Circular icon avatar wrapping the stat icon */
.hledu-stat-icon-circle {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
}

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

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

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

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

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

.hledu-stat-card--logins .hledu-stat-icon-circle {
	background: var(--hledu-info-light) !important;
}

/* "+2 this month" trend line under the label */
.hledu-stat-trend {
	display: inline-flex;
	align-items: center !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	margin-top: 2px !important;
}

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

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

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

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


/* ── Dashboard header cluster: search, icon buttons, user profile ────────── */
.hledu-header-search {
	position: relative !important;
	display: flex;
	align-items: center !important;
}

.hledu-header-search__input {
	/* !important throughout: WP core admin CSS styles input[type=text] with
	   enough specificity to otherwise win over this single class, which was
	   partially overriding the border/radius/padding (causing the icon to
	   sit on top of the placeholder text instead of clear of it). */
	box-sizing: border-box !important;
	width: 220px !important;
	height: 36px !important;
	padding: 0 14px 0 36px !important;
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-surface) !important;
	color: var(--hledu-text) !important;
	font-size: 13px !important;
	font-family: inherit;
	box-shadow: var(--hledu-shadow-xs) !important;
	transition: border-color var(--hledu-transition), box-shadow var(--hledu-transition) !important;
}

.hledu-header-search__input:focus {
	outline: none !important;
	border-color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-header-search__icon {
	position: absolute !important;
	left: 11px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--hledu-text-light) !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	pointer-events: none !important;
}

.hledu-header-icon-btn {
	position: relative !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-bg-card) !important;
	color: var(--hledu-text-muted) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: background var(--hledu-transition), color var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-header-icon-btn:hover {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-header-icon-btn .dashicons {
	font-size: 18px !important;
	width: 18px !important;
	height: 18px !important;
}

/* Icon + label header button (e.g. "Frontend View") — same pill language
   as .hledu-header-icon-btn, just sized to fit a text label instead of a
   lone icon. */
.hledu-header-frontend-btn {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	height: 36px !important;
	padding: 0 14px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-bg-card) !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: background var(--hledu-transition), color var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-header-frontend-btn:hover {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-header-frontend-btn svg {
	flex-shrink: 0 !important;
}

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

.hledu-header-user-wrap {
	position: relative !important;
	flex-shrink: 0 !important;
}

.hledu-header-user {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	padding: 4px 10px 4px 4px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-bg-card) !important;
	color: var(--hledu-text) !important;
	font-family: inherit;
	text-decoration: none !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	outline: none !important;
}

.hledu-header-user-dropdown {
	display: none;
	position: absolute !important;
	top: calc(100% + 8px) !important;
	right: 0 !important;
	min-width: 160px !important;
	padding: 6px !important;
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	box-shadow: var(--hledu-shadow-md) !important;
	z-index: 1000 !important;
}

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

.hledu-header-user-dropdown__item {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 10px !important;
	border-radius: var(--hledu-radius-sm) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}

.hledu-header-user-dropdown__item:hover {
	background: var(--hledu-bg) !important;
}

.hledu-header-user-dropdown__item--logout {
	color: var(--hledu-danger) !important;
}

.hledu-header-user-dropdown__item--logout:hover {
	background: var(--hledu-danger-light) !important;
}

.hledu-header-user__avatar {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	display: block;
}

.hledu-header-user__meta {
	display: flex;
	flex-direction: column !important;
	line-height: 1.25 !important;
}

.hledu-header-user__name {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

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

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

/* Visual order in the header actions row, independent of DOM insertion order.
   -1 (rather than 1) so the toggle also sorts before page-specific action
   buttons that have no explicit order (default 0), e.g. "Add New User". */
.hledu-page-header__actions .hledu-theme-toggle {
	order: -1 !important;
}

.hledu-page-header__actions .hledu-header-frontend-btn {
	order: 1 !important;
}

.hledu-page-header__actions .hledu-header-search {
	order: 2 !important;
}

.hledu-page-header__actions .hledu-header-icon-btn {
	order: 3 !important;
}

.hledu-page-header__actions .hledu-header-user-wrap {
	order: 4 !important;
}

.hledu-page-header__actions .hledu-version-badge {
	order: 5 !important;
}

@media (max-width: 1200px) {
	.hledu-header-search__input {
		width: 160px !important;
	}
}

@media (max-width: 900px) {
	.hledu-header-search {
		display: none;
	}
}

/* "Live data" notice beneath stat grid */
.hledu-dashboard-data-notice {
	display: flex;
	align-items: center !important;
	gap: 7px !important;
	margin: -12px 0 20px !important;
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
}

.hledu-dashboard-data-notice .dashicons {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
}

/* --------------------------------------------------------------------------
   19. Module 05 — Course Builder
   -------------------------------------------------------------------------- */

/* Archived badge (neutral grey — indicates disabled, not failed) */
.hledu-badge--archived {
	background: var(--hledu-border-light) !important;
	color: var(--hledu-text-muted) !important;
}

/* Two-column form layout: main content + sidebar */
.hledu-form-layout {
	display: grid;
	grid-template-columns: 1fr 300px !important;
	gap: 20px !important;
	align-items: start !important;
}

.hledu-form-main {
	min-width: 0 !important;
}

.hledu-form-sidebar {
	min-width: 0 !important;
}

/* Form action buttons row inside card */
.hledu-form-actions {
	display: flex;
	gap: 8px !important;
	align-items: center !important;
	justify-content: flex-end !important;
	padding-top: 12px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
	margin-top: 8px !important;
}

/* Thumbnail uploader */
.hledu-thumbnail-wrap {
	display: flex;
	flex-direction: column !important;
	gap: 10px !important;
}

.hledu-thumbnail-preview {
	width: 100% !important;
	height: auto !important;
	border-radius: var(--hledu-radius-sm) !important;
	border: 1px solid var(--hledu-border) !important;
	display: block;
	object-fit: cover !important;
	max-height: 160px !important;
}

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

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

/* Pagination info line below pagination links */
.hledu-pagination-info {
	text-align: center !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin: 4px 0 0 !important;
}

/* Zero-padding modifier for card body when containing a table */
.hledu-card-body--flush {
	padding: 0 !important;
}

/* Search icon inside .hledu-search-wrap */
.hledu-search-wrap .dashicons {
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--hledu-text-light) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	width: 16px !important;
	height: 16px !important;
	pointer-events: none !important;
}

/* Form sidebar hint paragraph (no extra margin needed) */
.hledu-form-sidebar .hledu-form-hint {
	margin: 0 !important;
}

/* --------------------------------------------------------------------------
   21. Course detail view (action=view)
   -------------------------------------------------------------------------- */
.hledu-course-view-layout {
	display: grid;
	grid-template-columns: 1fr 280px !important;
	gap: 20px !important;
	align-items: start !important;
}

.hledu-course-view-main,
.hledu-course-view-sidebar {
	min-width: 0 !important;
}

.hledu-course-view-thumbnail {
	width: 100% !important;
	height: auto !important;
	border-radius: var(--hledu-radius-sm) !important;
	display: block;
	max-height: 320px !important;
	object-fit: cover !important;
}

.hledu-course-view-description {
	font-size: 14px !important;
	line-height: 1.7 !important;
	color: var(--hledu-text) !important;
}

.hledu-course-view-description p {
	margin: 0 0 14px !important;
}

/* Definition list used in sidebar */
.hledu-detail-list {
	display: grid;
	grid-template-columns: auto 1fr !important;
	gap: 8px 16px !important;
	margin: 0 !important;
	font-size: 13px !important;
}

.hledu-detail-list dt {
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	white-space: nowrap !important;
}

.hledu-detail-list dd {
	margin: 0 !important;
	color: var(--hledu-text) !important;
}

/* Full-width button in sidebar */
.hledu-btn--full {
	width: 100% !important;
	justify-content: center !important;
}

/* Spacing above the edit action button inside a detail card */
.hledu-detail-edit-action {
	margin-top: 16px !important;
}

/* --------------------------------------------------------------------------
   23. Course Media (form — tabs, YouTube, gallery)
   -------------------------------------------------------------------------- */

/* Tab strip */
.hledu-media-tabs {
	display: flex;
	gap: 0 !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	overflow: hidden !important;
	margin-bottom: 12px !important;
}

.hledu-media-tab {
	flex: 1 !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 7px 10px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	background: var(--hledu-bg) !important;
	border: none !important;
	border-right: 1px solid var(--hledu-border) !important;
	color: var(--hledu-text-muted) !important;
	cursor: pointer !important;
	transition: background var(--hledu-transition), color var(--hledu-transition) !important;
}

.hledu-media-tab:last-child {
	border-right: none !important;
}

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

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

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

/* YouTube pane — spacing above URL input */
#hledu-primary-pane-yt .hledu-form-group {
	margin-bottom: 10px !important;
}

/* Form label (above the tab strip) */
.hledu-form-label {
	display: block;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	margin: 0 0 8px !important;
}

/* Gallery grid */
.hledu-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 6px !important;
	margin-bottom: 10px !important;
	min-height: 0 !important;
}

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

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

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

.hledu-gallery-item:hover .hledu-gallery-remove {
	opacity: 1;
}

/* Primary media preview — wraps the image so the remove icon can float on top */
.hledu-primary-preview-wrap {
	position: relative !important;
	display: block;
	margin-bottom: 4px !important;
}

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

/* Sidebar actions card — no divider needed when it's the only thing in the card */
.hledu-form-actions--top {
	padding-top: 0 !important;
	border-top: none !important;
	margin-top: 0 !important;
}

/* When the actions bar sits bare at the top of the sidebar (not wrapped in
   its own .hledu-card), give it the same 24px gap before the next card that
   .hledu-card's own margin-bottom gives between sibling cards. */
.hledu-form-sidebar > .hledu-form-actions--top {
	margin-bottom: 24px !important;
}

/* Helper note pinned left, primary action pinned right — vs. the base
   class's flex-end, which bunches everything (note included) at the end. */
.hledu-form-actions--split {
	justify-content: space-between !important;
}

/* --------------------------------------------------------------------------
   25. Tag picker (searchable multi-select — Assigned Employee / Authors)
   -------------------------------------------------------------------------- */
.hledu-tag-picker {
	position: relative !important;
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 8px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	background: var(--hledu-bg-card) !important;
}

.hledu-tag-picker:focus-within {
	border-color: var(--hledu-primary) !important;
	box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12) !important;
}

.hledu-tag-chips {
	display: flex;
	flex-wrap: wrap !important;
	gap: 6px !important;
}

.hledu-tag-chip {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 3px 6px 3px 10px !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	border-radius: var(--hledu-radius-full) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	max-width: 100% !important;
	white-space: normal !important;
	word-break: break-word !important;
}

.hledu-tag-chip-remove {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--hledu-primary) !important;
	font-size: 14px !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

.hledu-tag-chip-remove:hover {
	background: rgb(37 99 235 / 0.15) !important;
}

.hledu-tag-chip--more {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	border: none !important;
	padding: 3px 10px !important;
	cursor: pointer !important;
}

.hledu-tag-chip--more:hover {
	background: rgb(37 99 235 / 0.15) !important;
}

.hledu-tag-search {
	flex: 1 1 100px !important;
	min-width: 100px !important;
	border: none !important;
	outline: none !important;
	padding: 4px 2px !important;
	font-size: 13px !important;
	font-family: inherit;
	color: var(--hledu-text) !important;
	background: transparent !important;
}

.hledu-tag-dropdown {
	position: absolute !important;
	top: calc(100% + 4px) !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 20 !important;
	max-height: 220px !important;
	overflow-y: auto !important;
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	box-shadow: var(--hledu-shadow-md) !important;
}

.hledu-tag-option {
	padding: 8px 12px !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
	cursor: pointer !important;
}

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

.hledu-tag-option--empty {
	color: var(--hledu-text-light) !important;
	cursor: default !important;
}

.hledu-tag-option--empty:hover {
	background: none !important;
	color: var(--hledu-text-light) !important;
}

/* --------------------------------------------------------------------------
   26. Course view — media stage & gallery strip
   -------------------------------------------------------------------------- */

.hledu-media-stage {
	background: #000 !important;
	border-radius: var(--hledu-radius-sm) var(--hledu-radius-sm) 0 0 !important;
	overflow: hidden !important;
	line-height: 0 !important;
}

.hledu-media-stage__img {
	width: 100% !important;
	max-height: 380px !important;
	object-fit: contain !important;
	display: block;
	background: #000 !important;
	transition: opacity 0.2s ease !important;
}

.hledu-media-stage__yt {
	position: relative !important;
	padding-top: 56.25% !important;
}

.hledu-media-stage__yt iframe {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: none !important;
}

.hledu-media-stage__empty {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 40px 20px !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
	background: var(--hledu-bg-alt) !important;
}

.hledu-media-stage__empty .dashicons {
	font-size: 36px !important;
	width: 36px !important;
	height: 36px !important;
	margin-bottom: 8px !important;
}

/* Gallery thumbnail strip below the stage */
.hledu-gallery-strip {
	display: flex;
	gap: 4px !important;
	padding: 6px !important;
	background: #111 !important;
	border-radius: 0 0 var(--hledu-radius-sm) var(--hledu-radius-sm) !important;
	overflow-x: auto !important;
}

.hledu-gallery-thumb {
	flex-shrink: 0 !important;
	width: 56px !important;
	height: 56px !important;
	padding: 0 !important;
	border: 2px solid transparent !important;
	border-radius: 3px !important;
	overflow: hidden !important;
	cursor: pointer !important;
	opacity: 0.65;
	transition: opacity var(--hledu-transition), border-color var(--hledu-transition) !important;
	background: none !important;
}

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

.hledu-gallery-thumb:hover {
	opacity: 1;
}

.hledu-gallery-thumb--active {
	border-color: var(--hledu-primary) !important;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.hledu-stats-row {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

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

	.hledu-toolbar {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.hledu-search-input {
		width: 100% !important;
		min-width: unset !important;
	}

	.hledu-bulk-actions-wrap {
		width: 100% !important;
	}

	.hledu-modal {
		max-width: 100% !important;
	}
}

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

	.hledu-page-header {
		flex-wrap: wrap !important;
	}
}

/* --------------------------------------------------------------------------
   Activity log — read / unread states & row interactions
   -------------------------------------------------------------------------- */

/* Clickable rows */
.hledu-activity-row {
	cursor: pointer !important;
	transition: background 0.12s !important;
}

/* Unread = same shade as the hover state so it stands out */
.hledu-activity-row--unread td {
	background: var(--hledu-bg) !important;
	font-weight: 600 !important;
}

/* Override the generic hover so unread rows get the same hover feel */
.hledu-activity-table tbody tr.hledu-activity-row--unread:hover td,
.hledu-activity-table tbody tr.hledu-activity-row--read:hover td {
	background: #e9edf2 !important;
}

/* Read rows — muted */
.hledu-activity-row--read td {
	color: var(--hledu-text-muted) !important;
	font-weight: 400 !important;
}

/* Narrow actions column — no header text */
.hledu-activity-th-actions {
	width: 72px !important;
	text-align: right !important;
	padding-right: 14px !important;
}

.hledu-activity-actions-cell {
	text-align: right !important;
	padding-right: 14px !important;
}

/* Action button group */
.hledu-activity-actions {
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
}

/* Shared icon-button base */
.hledu-activity-check,
.hledu-activity-delete {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	cursor: pointer !important;
	padding: 0 !important;
	transition: background 0.15s, opacity 0.15s, color 0.15s !important;
}

/* Checkmark — full opacity when read, dim when unread */
.hledu-activity-check {
	color: var(--hledu-success, #16a34a) !important;
}

.hledu-activity-row--unread .hledu-activity-check {
	opacity: 0.22;
}

.hledu-activity-row--read .hledu-activity-check {
	opacity: 1;
}

.hledu-activity-check:hover {
	opacity: 1 !important;
	background: var(--hledu-success-light, #f0fdf4) !important;
}

/* Trash — hidden until row hover */
.hledu-activity-delete {
	color: var(--hledu-danger) !important;
	opacity: 0;
}

.hledu-activity-row:hover .hledu-activity-delete {
	opacity: 0.55;
}

.hledu-activity-delete:hover {
	opacity: 1 !important;
	background: var(--hledu-danger-light, #fef2f2) !important;
}

/* Header-row "mark all read" / "delete all" — same icon-button base as the
   per-row actions above, but always visible since they aren't tied to a
   specific row's read/hover state. */
.hledu-activity-check-all,
.hledu-activity-delete-all {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	cursor: pointer !important;
	padding: 0 !important;
	transition: background 0.15s, opacity 0.15s, color 0.15s !important;
}

.hledu-activity-check-all {
	color: var(--hledu-success, #16a34a) !important;
}

.hledu-activity-check-all:hover {
	background: var(--hledu-success-light, #f0fdf4) !important;
}

.hledu-activity-delete-all {
	color: var(--hledu-danger) !important;
}

.hledu-activity-delete-all:hover {
	background: var(--hledu-danger-light, #fef2f2) !important;
}

/* Delete animation */
.hledu-activity-row--removing {
	pointer-events: none !important;
	opacity: 0.5;
}

.hledu-activity-other {
	color: var(--hledu-text-muted) !important;
	font-style: italic !important;
	font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   20. Module: Bulk User Upload — progress bar
   -------------------------------------------------------------------------- */
.hledu-progress-track {
	width: 100% !important;
	height: 10px !important;
	background: var(--hledu-border-light) !important;
	border-radius: var(--hledu-radius-full) !important;
	overflow: hidden !important;
}

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

.hledu-progress-fill--done {
	background: var(--hledu-success) !important;
}

.hledu-progress-label {
	margin-top: 6px !important;
	margin-bottom: 0 !important;
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
	text-align: center !important;
}

/* --------------------------------------------------------------------------
   21. Module: Modules & Lessons Manager (accordion, drag-drop)
   -------------------------------------------------------------------------- */
.hledu-accordion {
	display: flex;
	flex-direction: column !important;
	gap: 10px !important;
	margin-top: 16px !important;
}

.hledu-accordion-item {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
}

.hledu-accordion-item.is-dragging,
.hledu-lesson-row.is-dragging {
	opacity: 0.4;
}

.hledu-accordion-header {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 16px !important;
}

.hledu-drag-handle {
	cursor: grab !important;
	color: var(--hledu-text) !important;
}

.hledu-drag-handle:active {
	cursor: grabbing !important;
}

.hledu-accordion-toggle {
	flex: 1 !important;
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	cursor: pointer !important;
	text-align: left !important;
}

.hledu-accordion-toggle:focus,
.hledu-quiz-item-toggle:focus,
.hledu-quiz-question-item-toggle:focus {
	outline: none !important;
}

.hledu-accordion-actions .dashicons-arrow-down-alt2 {
	transition: transform var(--hledu-transition) !important;
	color: var(--hledu-text-light) !important;
}

.hledu-accordion-item.is-open .hledu-accordion-actions .dashicons-arrow-down-alt2 {
	transform: rotate(-180deg) !important;
}

.hledu-accordion-actions {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	flex-shrink: 0 !important;
}

.hledu-accordion-body {
	display: none;
	padding: 0 16px 16px 40px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
}

.hledu-accordion-item.is-open .hledu-accordion-body {
	display: block;
	padding-top: 16px !important;
}

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

.hledu-lessons-list {
	display: flex;
	flex-direction: column !important;
	gap: 6px !important;
	margin-bottom: 12px !important;
}

.hledu-lesson-row {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 12px !important;
	background: var(--hledu-bg) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
}

.hledu-lesson-row .dashicons-video-alt3,
.hledu-lesson-row .dashicons-media-document,
.hledu-lesson-row .dashicons-media-text {
	color: var(--hledu-text-muted) !important;
}

.hledu-lesson-title {
	flex: 1 !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
	cursor: pointer !important;
}

.hledu-lesson-actions {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	flex-shrink: 0 !important;
}

.hledu-inline-form {
	margin: 10px 0 !important;
}

/* ── Quiz builder (Module 08) ────────────────────────────────────────────── */
.hledu-answer-row {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	margin-bottom: 6px !important;
}

.hledu-answer-row .hledu-answer-row-text {
	flex: 1 !important;
}

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

.hledu-answer-review-list li {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 10px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	color: var(--hledu-text) !important;
}

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

/* ── Quizzes nested inside a module (Module & Lesson manager) — deliberately
   distinct class names from .hledu-accordion-* so they never collide with
   admin/js/hledu-lesson-manager.js's module drag-reorder / toggle listeners. ── */
.hledu-module-actions-row {
	display: flex;
	gap: 8px !important;
	margin-top: 10px !important;
}

.hledu-quiz-items-list {
	display: flex;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 12px !important;
}

/* Combined lesson+quiz list — built client-side by moving the already-bound
   .hledu-lesson-row / .hledu-quiz-item elements out of their original
   (now-empty) containers into one interleaved, drag-reorderable sequence. */
.hledu-module-content-list {
	display: flex;
	flex-direction: column !important;
	gap: 6px !important;
	margin-bottom: 12px !important;
}

.hledu-quiz-item {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
}

.hledu-quiz-item-header {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 14px !important;
}

.hledu-quiz-item-toggle {
	flex: 1 !important;
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	cursor: pointer !important;
	text-align: left !important;
}

.hledu-quiz-item-actions .dashicons-arrow-down-alt2 {
	transition: transform var(--hledu-transition) !important;
	color: var(--hledu-text-light) !important;
}

.hledu-quiz-item.is-open .hledu-quiz-item-actions .dashicons-arrow-down-alt2 {
	transform: rotate(-180deg) !important;
}

.hledu-quiz-item-actions {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	flex-shrink: 0 !important;
}

.hledu-quiz-item-body {
	display: none;
	padding: 0 14px 14px 36px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
}

.hledu-quiz-item.is-open .hledu-quiz-item-body {
	display: block;
	padding-top: 14px !important;
}

.hledu-quiz-item-meta {
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
	margin: 0 0 10px !important;
}

/* ── Questions embedded inline inside a quiz item (Module 08) ────────────── */
.hledu-quiz-question-list {
	display: flex;
	flex-direction: column !important;
	gap: 8px !important;
	margin-bottom: 10px !important;
}

.hledu-quiz-question-item {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	padding: 10px 12px !important;
}

.hledu-quiz-question-item-header {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
}

.hledu-quiz-question-item-toggle {
	flex: 1 !important;
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	text-align: left !important;
}

.hledu-quiz-question-item-actions .dashicons-arrow-down-alt2 {
	transition: transform var(--hledu-transition) !important;
	color: var(--hledu-text-light) !important;
}

.hledu-quiz-question-item.is-open .hledu-quiz-question-item-actions .dashicons-arrow-down-alt2 {
	transform: rotate(-180deg) !important;
}

.hledu-quiz-question-item-actions {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	flex-shrink: 0 !important;
}

.hledu-quiz-question-item-body {
	display: none;
}

.hledu-quiz-question-item.is-open .hledu-quiz-question-item-body {
	display: block;
	margin-top: 8px !important;
}

.hledu-quiz-question-item-text {
	flex: 1 !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

/*
 * The row/item these titles sit in has draggable="true" for reordering, and
 * browsers make draggable elements non-selectable by default (so a
 * click-drag reliably moves the element instead of selecting its text).
 * That default reaches into these title buttons too, so a click-drag over
 * the title text can't select it. Opt just the title text back into normal
 * selection and stop it from starting a native drag itself — dragging from
 * elsewhere in the row (e.g. the drag handle) is unaffected.
 */
.hledu-accordion-title-text,
.hledu-quiz-item-title,
.hledu-quiz-question-item-text {
	user-select: text !important;
	-webkit-user-drag: none !important;
}

.hledu-lesson-edit-slot {
	margin-bottom: 6px !important;
}

/* --------------------------------------------------------------------------
   27. Bento/Glass design system — Module 06B
   -------------------------------------------------------------------------- */

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

/* Opt-in modifier for a row that must hold 5 equal cards (e.g. the Super
   Admin dashboard's stat cards) without changing the default 4-column
   .hledu-bento grid used elsewhere. */
.hledu-bento--cols-5 {
	grid-template-columns: repeat(5, 1fr) !important;
}

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

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

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

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

/* Notice/activity card — spans the full row, holds a scrollable list */
.hledu-bento-card--notice {
	grid-column: 1 / -1 !important;
	display: flex;
	flex-direction: column !important;
	padding: 0 !important;
	overflow: hidden !important;
}

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

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

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

.hledu-bento-card__icon {
	font-size: 26px !important;
	width: 26px !important;
	height: 26px !important;
	color: var(--hledu-primary) !important;
}

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

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

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

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

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

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

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

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

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

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

/* ── Floating label form pattern ─────────────────────────────────────────── */
/* The label always sits in its "floated" caption position above the field,
   from first render — it no longer waits for focus or a non-empty value
   (previously JS-toggled via .is-active), since a label that only appears on
   interaction reads as missing on every empty field until clicked. */
.hledu-form-group--floating {
	position: relative !important;
	padding-top: 18px !important;
}

.hledu-form-group--floating label {
	position: absolute !important;
	left: -2px !important;
	top: 6px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	padding: 0 4px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--hledu-primary) !important;
	background: var(--hledu-surface) !important;
	pointer-events: none !important;
}

.hledu-form-group--floating .hledu-input,
.hledu-form-group--floating .hledu-select,
.hledu-form-group--floating .hledu-textarea {
	background: var(--hledu-surface) !important;
}

/* Higher specificity than the rule above (which otherwise wins the cascade
   and erases .hledu-input:disabled's muted background for a disabled field
   inside a floating-label group, e.g. the My Profile form's Username field). */
.hledu-form-group--floating .hledu-input:disabled {
	background: var(--hledu-bg) !important;
	color: var(--hledu-text-muted) !important;
}

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

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

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

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

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

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

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

/* ── Distraction-Free Mode (scaffolded here, wired in Module 16) ─────────── */
body.hledu-focus-mode #wpadminbar,
body.hledu-focus-mode #adminmenumain,
body.hledu-focus-mode #wpfooter {
	display: none !important;
}

body.hledu-focus-mode #wpcontent,
body.hledu-focus-mode #wpbody-content {
	margin-left: 0 !important;
}

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

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

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

@keyframes hledu-skeleton-shimmer {
	100% {
		transform: translateX(100%);
	}
}

/* ── Progress ring — output of hledu_render_progress_ring() ──────────────── */
.hledu-ring {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
}

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

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

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

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

/* ── Reduced motion — disable animation, keep the instant end state ──────── */
@media (prefers-reduced-motion: reduce) {

	.hledu-wrap,
	.hledu-fade-slide-in,
	.hledu-fade-slide-out,
	.hledu-skeleton::after {
		animation: none !important;
	}

	html,
	.hledu-btn-primary,
	.hledu-ring-fill {
		transition: none !important;
	}
}

/* ── Bento responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.hledu-bento {
		grid-template-columns: repeat(2, 1fr) !important;
	}

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

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

	.hledu-bento--cols-5 {
		grid-template-columns: 1fr !important;
	}

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

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

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

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

.hledu-theme-toggle .hledu-theme-toggle__sun {
	display: block !important;
}

.hledu-theme-toggle .hledu-theme-toggle__moon {
	display: none !important;
}

[data-hledu-theme="dark"] .hledu-theme-toggle .hledu-theme-toggle__sun {
	display: none !important;
}

[data-hledu-theme="dark"] .hledu-theme-toggle .hledu-theme-toggle__moon {
	display: block !important;
}

/* ==========================================================================
   Dashboard overview widgets (Growth chart, completion rings, Top
   Companies/Top Employee/Quick Actions, Top Courses, Recent Activity
   mini-card) — ported from frontend/css/hledu-frontend.css so the Super
   Admin Dashboard's overview (admin.php?page=hledu-dashboard) can mirror the
   Platform Owner frontend dashboard's own widgets. Reuses this file's own
   design tokens (same variable names in both files) rather than loading the
   whole frontend stylesheet, which would also redefine :root tokens
   page-wide and risk shifting this page's other elements.
   ========================================================================== */
.hledu-fe-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow) !important;
	overflow: hidden !important;
	margin-bottom: 24px !important;
}

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

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

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

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

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

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

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

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

.hledu-company-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr !important;
	gap: 20px !important;
	margin-bottom: 24px !important;
}

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

.hledu-progress-card {
	display: flex;
	flex-direction: column !important;
}

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

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

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

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

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

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

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

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

.hledu-platform-completion {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	flex: 1 !important;
	gap: 6px !important;
	padding: 12px !important;
}

.hledu-platform-completion-col {
	display: flex;
	flex-direction: column !important;
	gap: 20px !important;
	height: 100% !important;
}

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

.hledu-fe-card__header .hledu-select {
	width: auto !important;
	max-width: 150px !important;
	padding: 6px 30px 6px 10px !important;
	font-size: 12px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hledu-company-row-3 {
	display: grid;
	grid-template-columns: 3fr 7fr !important;
	align-items: stretch !important;
	gap: 20px !important;
	margin-bottom: 24px !important;
}

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

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

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

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

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

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

.hledu-fe-view-all {
	display: inline-flex;
	align-items: center !important;
	gap: 2px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-primary) !important;
}

/* ── Mini list (Top Companies / Top Employee) ────────────────────────────── */
.hledu-mini-list {
	display: flex;
	flex-direction: column !important;
}

.hledu-mini-list-body {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

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

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

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

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

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

/* ── Top Courses table ────────────────────────────────────────────────────── */
.hledu-top-courses-row,
.hledu-fe-card__header.hledu-top-courses-row--head {
	display: grid;
	grid-template-columns: 3fr 80px 140px 100px !important;
	align-items: center !important;
	gap: 12px !important;
}

.hledu-top-courses-row--company-col {
	grid-template-columns: 3fr 80px 80px 100px !important;
}

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

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

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

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

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

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

.hledu-fe-card__body--pad.hledu-top-courses-body {
	padding-top: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

.hledu-company-row-60-40.hledu-owner-row-2-1 {
	grid-template-columns: 2fr 1fr !important;
}

/* ── Platform Growth chart — hand-drawn SVG line chart, sample data.
   Re-rendered client-side when the range select changes. ───────────────── */
.hledu-growth-chart__svg {
	width: 100% !important;
	height: auto !important;
	display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   Certificates page (admin.php?page=hledu-certificates) — ported from
   frontend/css/hledu-frontend.css so this admin screen can mirror the
   Platform Owner frontend dashboard's own Certificates view exactly.
   Reuses this file's own design tokens rather than loading the whole
   frontend stylesheet (see the Dashboard overview widgets section above
   for why).
   ========================================================================== */
.hledu-fe-actions-row {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-bottom: 24px !important;
}

.hledu-fe-card__header-actions {
	display: flex;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

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

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

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

.hledu-fe-table-wrap {
	overflow-x: auto !important;
}

/* 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. */
.hledu-fe-table-wrap.hledu-cert-table-wrap {
	overflow: visible !important;
}

@media (max-width: 600px) {
	.hledu-fe-table-wrap.hledu-cert-table-wrap {
		overflow-x: auto !important;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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