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

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (mirrors admin tokens)
   -------------------------------------------------------------------------- */
:root {
	--pktms-primary: #2563eb;
	--pktms-primary-hover: #1d4ed8;
	--pktms-primary-light: #eff6ff;
	--pktms-secondary: #7c3aed;
	--pktms-secondary-light: #f5f3ff;
	--pktms-success: #16a34a;
	--pktms-success-light: #f0fdf4;
	--pktms-warning: #d97706;
	--pktms-warning-light: #fffbeb;
	--pktms-danger: #dc2626;
	--pktms-danger-light: #fef2f2;
	--pktms-info: #0891b2;
	--pktms-info-light: #ecfeff;
	--pktms-text: #1f2937;
	--pktms-text-muted: #6b7280;
	--pktms-text-light: #9ca3af;
	--pktms-bg: #f9fafb;
	--pktms-bg-card: #ffffff;
	--pktms-border: #e5e7eb;
	--pktms-border-light: #f3f4f6;
	--pktms-radius-sm: 4px;
	--pktms-radius: 8px;
	--pktms-radius-lg: 12px;
	--pktms-radius-xl: 20px;
	--pktms-radius-full: 9999px;
	--pktms-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
	--pktms-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
	--pktms-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
	--pktms-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
	--pktms-transition: 150ms ease;
	--pktms-transition-slow: 300ms ease;
	--pktms-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";
	--pktms-container: 1200px;

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

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

	/* Bento/Glass — elevation */
	--pktms-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-pktms-theme="dark"] {
	--pktms-primary: #3b82f6;
	--pktms-primary-hover: #60a5fa;
	--pktms-primary-light: rgb(59 130 246 / 0.16);
	--pktms-secondary: #a78bfa;
	--pktms-secondary-light: rgb(167 139 250 / 0.16);

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

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

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

	--pktms-surface: #171d2e;
	--pktms-surface-glass: rgb(30 38 58 / 0.55);
	--pktms-gradient-primary: linear-gradient(135deg, #3b82f6, #a78bfa, #3b82f6);
	--pktms-glow-primary: 0 0 0 3px rgb(59 130 246 / 0.28), 0 0 18px rgb(59 130 246 / 0.3);
	--pktms-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-pktms-theme="light"]):not([data-pktms-theme="dark"]) {
		--pktms-primary: #3b82f6;
		--pktms-primary-hover: #60a5fa;
		--pktms-primary-light: rgb(59 130 246 / 0.16);
		--pktms-secondary: #a78bfa;
		--pktms-secondary-light: rgb(167 139 250 / 0.16);
		--pktms-success: #22c55e;
		--pktms-success-light: rgb(34 197 94 / 0.16);
		--pktms-warning: #f59e0b;
		--pktms-warning-light: rgb(245 158 11 / 0.16);
		--pktms-danger: #f87171;
		--pktms-danger-light: rgb(248 113 113 / 0.16);
		--pktms-info: #22d3ee;
		--pktms-info-light: rgb(34 211 238 / 0.16);
		--pktms-text: #e5e7eb;
		--pktms-text-muted: #9ca3af;
		--pktms-text-light: #6b7280;
		--pktms-bg: #0f1420;
		--pktms-bg-card: #171d2e;
		--pktms-border: #2a3348;
		--pktms-border-light: #212840;
		--pktms-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
		--pktms-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.45);
		--pktms-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.45);
		--pktms-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
		--pktms-surface: #171d2e;
		--pktms-surface-glass: rgb(30 38 58 / 0.55);
		--pktms-gradient-primary: linear-gradient(135deg, #3b82f6, #a78bfa, #3b82f6);
		--pktms-glow-primary: 0 0 0 3px rgb(59 130 246 / 0.28), 0 0 18px rgb(59 130 246 / 0.3);
		--pktms-shadow-glass: 0 8px 32px rgb(0 0 0 / 0.45);
	}
}

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

/* --------------------------------------------------------------------------
   2. Scope wrapper — all frontend output is inside .pktms-frontend
   -------------------------------------------------------------------------- */
.pktms-frontend {
	font-family: inherit;
	color: var(--pktms-text) !important;
	line-height: 1.6 !important;
	/* Safety net for the responsive view: a component that doesn't shrink in
	   time (a fixed-width row, a grid track floored at its content size)
	   used to widen the whole page and force horizontal scrolling instead of
	   just looking cramped. This clips any such overflow at the page's own
	   edge; it doesn't affect elements that scroll themselves on purpose
	   (e.g. .pktms-fe-table-wrap's own overflow-x:auto still works). */
	overflow-x: hidden !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Settings auto-save status (pktms_print_settings_autosave_script()). */
.pktms-autosave-toast {
	position: fixed !important;
	right: 16px !important;
	bottom: 16px !important;
	z-index: 100000 !important;
	max-width: calc(100vw - 32px) !important;
	padding: 10px 16px !important;
	border-radius: var(--pktms-radius) !important;
	border-left: 4px solid var(--pktms-text-muted) !important;
	background: var(--pktms-surface) !important;
	color: var(--pktms-text) !important;
	box-shadow: var(--pktms-shadow-lg) !important;
	font-size: 14px !important;
	transform: translateY(8px) !important;
	transition: opacity 200ms ease, transform 200ms ease !important;
	pointer-events: none !important;
	opacity: 0;
}

.pktms-autosave-toast--visible {
	transform: none !important;
	opacity: 1;
}

.pktms-autosave-toast--success {
	border-left-color: var(--pktms-success) !important;
}

.pktms-autosave-toast--error {
	border-left-color: var(--pktms-danger) !important;
}

.pktms-checkbox-label[hidden] {
	display: none !important;
}

/* A button that looks like a text link (e.g. "Send a new code"). */
.pktms-btn.pktms-btn--link {
	display: inline;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--pktms-primary) !important;
	font: inherit !important;
	text-decoration: underline !important;
	cursor: pointer !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Dashicons' phone glyph faces the opposite way from how a handset icon is
   normally drawn — mirror it to match. */
.pktms-company-card__phone .dashicons-phone {
	transform: scaleX(-1);
}

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

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

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

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

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

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

/* Real certificate preview (pktms_render_certificate_preview()) — the
   public certificate markup drawn 640px wide, then scaled to the card and
   centered by the certificates view's script. */
.pktms-cert-thumb {
	position: absolute !important;
	inset: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

.pktms-cert-thumb__inner {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 640px !important;
	transform-origin: top left !important;
}

.pktms-cert-thumb .pktms-certificate-view--preview {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.pktms-cert-thumb .pktms-certificate-view__paper,
.pktms-cert-thumb .pktms-cert-preview-box {
	box-shadow: none !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.pktms-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(--pktms-surface) !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius-lg) !important;
	box-shadow: var(--pktms-shadow-md) !important;
	padding: 8px !important;
}

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

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

.pktms-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(--pktms-radius) !important;
	color: inherit !important;
	font-family: inherit;
	text-align: left !important;
	cursor: pointer !important;
}

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

.pktms-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(--pktms-primary-light) !important;
	color: var(--pktms-primary) !important;
	flex-shrink: 0 !important;
}

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

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

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

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

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

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

/* ── Platform Staff's Certificates management screen — dummy data. Reuses
   the shared .pktms-modal box for the View preview, but its own overlay/
   close-button classes (not .pktms-modal-overlay/.pktms-modal-close) —
   pktms-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. ─────────── */
.pktms-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Same treatment for the [pktms_course_list] page — hides the theme's
   title block and reclaims the theme's global padding, see
   Pktms_Frontend_Course::add_single_course_body_class(). Block themes such
   as Twenty Twenty-Five put the title and the page content in the same
   first group, so that group is only hidden when it doesn't hold the
   content; the title itself is hidden either way. */
/* The pricing page ([pktms_pricing], body.pktms-pricing-page) gets the
   same treatment. */
body.pktms-course-list-page main>div:first-child:not(.entry-content):not(:has(.entry-content)),
body.pktms-pricing-page main>div:first-child:not(.entry-content):not(:has(.entry-content)) {
	display: none;
}

body.pktms-course-list-page main .wp-block-post-title,
body.pktms-pricing-page main .wp-block-post-title {
	display: none;
}

/* With the theme's padding removed above, "full width" blocks must not
   pull outwards to cancel it, or the page overflows sideways. */
body.pktms-course-list-page main .alignfull,
body.pktms-pricing-page main .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Card headers that carry a title plus a whole toolbar next to it (e.g. the
   Courses list's title+badge, layout toggle, status filter, search and
   "Skapa kurs" button) don't fit on one line on phones/tablets. The toolbar
   (.pktms-fe-card__header-actions) already wraps internally, but the header
   itself didn't, so it was squeezed onto the same row as the title instead
   of dropping to its own — collapsing the search input down to its icon and
   crowding every button together. */
@media (max-width: 700px) {
	.pktms-frontend .pktms-fe-card__header {
		flex-wrap: wrap !important;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* On phones these tables (Managers/Employees/Courses/etc.) are already
   horizontally scrollable (.pktms-fe-table-wrap), but the full 20px side
   padding on every cell exaggerates the gap around short values (a single
   digit count, a status badge) — tightening it here shows more of the next
   column before the user has to scroll for it. */
@media (max-width: 480px) {
	.pktms-frontend .pktms-fe-table th,
	.pktms-frontend .pktms-fe-table td {
		padding: 10px 12px !important;
	}
}

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

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

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

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

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

/* ── Empty state ─────────────────────────────────────────────────────────── */
.pktms-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(--pktms-text-muted) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pktms-frontend .pktms-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(--pktms-radius-full) !important;
	background: var(--pktms-warning-light) !important;
	color: var(--pktms-warning) !important;
	white-space: nowrap !important;
}

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

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

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

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

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

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

/* Text logo — shown instead of an image until a platform logo is uploaded
   (Platform Settings → Brand Profile). Used in the sidebars and on the
   login screens. */
.pktms-brand-mark {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-width: 0;
	color: var(--pktms-text) !important;
	text-decoration: none !important;
}

.pktms-brand-mark__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: var(--pktms-radius) !important;
	background: var(--pktms-primary) !important;
	color: #ffffff !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

.pktms-brand-mark__name {
	overflow: hidden !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.pktms-auth-card__brand .pktms-brand-mark__icon {
	width: 40px !important;
	height: 40px !important;
	font-size: 20px !important;
}

.pktms-auth-card__brand .pktms-brand-mark__name {
	font-size: 18px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	/* Same reason — the 481–768px block also sets padding/gap/font-size/svg
	   size for a denser row layout; restated here so every icon in the rail
	   (including at those widths) matches the same size. */
	.pktms-frontend .pktms-company-nav__item {
		box-sizing: border-box !important;
		flex-shrink: 0 !important;
		/* Exactly padding-left(11) + icon width(18) — leaving zero content
		   width for the label's flex gap/text, so no sliver of its first
		   character peeks past the icon while collapsed (was 40px, which
		   left ~1px of the label visible as a stray "spot" next to every
		   icon). :hover below still expands to the full 220px label width. */
		max-width: 29px !important;
		height: 40px !important;
		padding: 0 0 0 11px !important;
		gap: 10px !important;
		font-size: 14px !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		transition: max-width 0.25s ease, color var(--pktms-transition) !important;
	}

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

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

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

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

	.pktms-frontend .pktms-company-sidebar__help .pktms-btn--primary {
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		width: auto !important;
		flex-shrink: 0 !important;
		/* Same fix as .pktms-company-nav__item above — was 40px, leaving a
		   sliver of the "Kontakta support" label visible as a stray spot. */
		max-width: 29px !important;
		height: 40px !important;
		padding: 0 0 0 11px !important;
		margin: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: var(--pktms-text) !important;
		box-shadow: none !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		transition: max-width 0.25s ease, color var(--pktms-transition) !important;
	}

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

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

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

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

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

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

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

/* Below ~900px the greeting (title/subtitle) and the actions cluster (search,
   Adminvy, bell, user menu) no longer fit on one row — wrap the actions onto
   their own full-width row instead of letting them squeeze the greeting text
   (which was forcing "Välkommen tillbaka, X" to break mid-word) and cramping
   the search input down to nothing. admin/css/pktms-admin.css also hides
   .pktms-header-search entirely below 900px for its own (wp-admin) layout —
   that rule bleeds into this shared component, so it's restored visible here. */
@media (max-width: 900px) {
	.pktms-frontend .pktms-company-topbar {
		flex-wrap: wrap !important;
	}

	.pktms-frontend .pktms-company-topbar__greeting {
		flex: 1 1 100% !important;
	}

	.pktms-frontend .pktms-company-topbar__actions {
		flex: 1 1 100% !important;
		flex-wrap: wrap !important;
		justify-content: flex-end !important;
	}

	.pktms-frontend .pktms-header-search {
		display: flex !important;
		order: -1 !important;
		flex: 1 1 100% !important;
	}

	.pktms-frontend .pktms-header-search__input {
		width: 100% !important;
	}
}

@media (max-width: 600px) {
	.pktms-frontend .pktms-company-topbar__greeting h1 {
		font-size: 19px !important;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	/* Parent-qualified so it beats the base divider rules further down. */
	.pktms-subscription-banner .pktms-subscription-banner__plan,
	.pktms-subscription-banner .pktms-subscription-banner__seats {
		border-right: none !important;
		padding-right: 0 !important;
	}
}

/* No divider after the banner's last part. */
.pktms-subscription-banner > :last-child {
	border-right: none !important;
	padding-right: 0 !important;
}

.pktms-subscription-banner--suspended .pktms-subscription-banner__plan-text span,
.pktms-subscription-banner--pending .pktms-subscription-banner__plan-text span,
.pktms-subscription-banner--overdue .pktms-subscription-banner__plan-text span {
	color: var(--pktms-danger) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pktms-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;
}

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

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

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

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

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

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

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

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

/* ── Quick actions ────────────────────────────────────────────────────────── */
.pktms-quick-actions {
	display: grid;
	/* As many columns as the card has room for (T44: three fixed ones overflowed a narrow card). */
	grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
	gap: 12px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pktms-course-mini-icon {
	width: 32px !important;
	height: 32px !important;
	border-radius: var(--pktms-radius-sm) !important;
	background: var(--pktms-secondary-light) !important;
	color: var(--pktms-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;
}

.pktms-course-row-title {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	min-width: 0 !important;
}

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

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

.pktms-course-row-title__text {
	display: block;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
	min-width: 0 !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Status, due and mandatory badges (T25/T26) need room: on a narrow card the
   button moves under the course instead of squeezing it. */
.pktms-latest-course {
	flex-wrap: wrap !important;
}

.pktms-latest-course__body {
	flex-basis: 160px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Courses view "Courses | Categories" tabs and the Categories tab (T11). */
.pktms-course-tabs {
	margin-bottom: 16px !important;
}

.pktms-course-tabs a.pktms-layout-toggle__btn {
	text-decoration: none !important;
}

.pktms-category-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
	gap: 16px !important;
	align-items: start !important;
}

.pktms-category-layout .pktms-row-actions form {
	display: inline-flex;
	margin: 0 !important;
}

.pktms-category-desc {
	display: block;
	margin-top: 2px !important;
}

@media (max-width: 900px) {
	.pktms-category-layout {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Course catalog category chips and card label (T11). */
.pktms-category-chips {
	display: flex;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: 0 0 20px !important;
}

.pktms-category-chip {
	display: inline-flex;
	align-items: center !important;
	padding: 6px 14px !important;
	border: 1.5px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius-full) !important;
	background: var(--pktms-surface) !important;
	color: var(--pktms-text) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	transition: border-color var(--pktms-transition), color var(--pktms-transition) !important;
}

.pktms-category-chip:hover {
	border-color: var(--pktms-primary) !important;
	color: var(--pktms-primary) !important;
}

.pktms-category-chip.pktms-category-chip--active {
	border-color: var(--pktms-primary) !important;
	background: var(--pktms-primary) !important;
	color: #ffffff !important;
}

.pktms-course-card__category {
	display: inline-block;
	margin-bottom: 6px !important;
	color: var(--pktms-primary) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
}

/* Completion date under a course's "Completed" badge (T10). */
.pktms-course-completed-on {
	display: block;
	margin-top: 4px !important;
	white-space: nowrap !important;
}

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

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

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

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

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

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

/* On phones the 80/80/100px fixed columns (plus gaps) left almost nothing
   for the course title, which wrapped word-by-word into a tall, cramped
   column — this row is inside the Platform Owner dashboard's Bästa
   kurser card, still only ~350px wide even after that card goes full-width
   below (see .pktms-owner-row-2-1's 1100px breakpoint above). */
@media (max-width: 480px) {
	.pktms-frontend .pktms-top-courses-row,
	.pktms-frontend .pktms-fe-card__header.pktms-top-courses-row--head,
	.pktms-frontend .pktms-top-courses-row--company-col {
		grid-template-columns: 2fr 34px 34px 60px !important;
		gap: 8px !important;
	}

	.pktms-frontend .pktms-top-courses-row--head span {
		font-size: 10px !important;
	}
}

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

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

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

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

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

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

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

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

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

.pktms-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Card-header selects (e.g. the Platform Growth range filter) inherit
   .pktms-select's width:100%/max-width:500px, which — unconstrained inside a
   flex header — stretches into an oversized dropdown next to the card
   title. Cap it to a compact, right-aligned control instead. */
.pktms-fe-card__header .pktms-select {
	width: auto !important;
	/* Was 150px — too tight for "Senaste 12 månaderna", clipping the option
	   text against the dropdown arrow with no breathing room either side. */
	max-width: 190px !important;
	padding: 6px 30px 6px 10px !important;
	font-size: 12px !important;
	text-overflow: ellipsis !important;
}

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

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

	/* .pktms-owner-row-2-1 below sets a 2:1 split with the same specificity
	   as the base 60/40 rule (both two classes) but no media query of its
	   own, so it was winning on specificity at every width and this stack
	   never actually applied to the Platform Owner dashboard's Top Courses /
	   Recent Activity row — leaving Bästa kurser's 4-column mini-table
	   squeezed into ~66% of a phone/tablet width and its content wrapping
	   letter-by-letter. */
	.pktms-company-row-60-40.pktms-owner-row-2-1 {
		grid-template-columns: 1fr !important;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	/* flex-grow was 1 here, which only makes sense once .pktms-caps-group
	   above has actually wrapped onto two lines (icon+info on their own
	   row). Below ~900px the group is often still one row (just narrower),
	   so growth:1 made this compete for space with .pktms-caps-group__items
	   right next to it — e.g. Företagsåtkomst's 6 checkboxes were left with
	   only ~200px and stacked one per line while .pktms-caps-group__info sat
	   at ~390px, far wider than its own text needed. flex-grow:0 lets it
	   size to its content either way and leaves items free to claim the
	   rest of the row. */
	.pktms-caps-group__info {
		flex: 0 1 auto !important;
	}

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

/* At phone widths, even the flex-wrap above still leaves the icon+info on
   the same line as .pktms-caps-group__items (both keep shrinking to fit
   rather than actually wrapping, since items has no minimum size to force
   the break) — the smaller groups (e.g. Hantering av chefer's 3 checkboxes)
   were left with only ~90px and their labels ran past the card edge. Below
   ~480px, stack icon/info/items as full-width blocks instead so items
   always gets the whole card width for its own internal wrapping. */
@media (max-width: 480px) {
	.pktms-frontend .pktms-caps-group {
		flex-direction: column !important;
	}

	.pktms-frontend .pktms-caps-group__items {
		flex-basis: 100% !important;
	}
}

/* Company edit/create form's two-column layout (.pktms-form-main +
   .pktms-form-sidebar, admin/css/pktms-admin.css) never dropped to one
   column on narrow screens — below ~900px .pktms-form-main was left with a
   sliver of its normal width (or less, once the fixed 300px sidebar column
   didn't fit either), squeezing the Assigned Courses tag picker down to
   almost nothing and wrapping its chip labels one character per line. */
@media (max-width: 900px) {
	.pktms-frontend .pktms-form-layout {
		grid-template-columns: 1fr !important;
	}
}

/* Same 3-equal-column .pktms-form-row (admin/css/pktms-admin.css) used by
   the Add/Edit Employee/Manager forms and the Invite User modal never
   stacked on phones either, leaving each field only a third of an already
   narrow card — labels/values were clipping or, in the Invite modal's
   3-way channel picker, overlapping the neighbouring segment. */
@media (max-width: 600px) {
	.pktms-frontend .pktms-form-row {
		flex-wrap: wrap !important;
	}

	.pktms-frontend .pktms-form-row > .pktms-form-group {
		flex: 1 1 100% !important;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pktms-frontend .pktms-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: pktms-skeleton-shimmer 1.4s ease-in-out infinite !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* .pktms-btn's own `display: inline-flex` is the same specificity as the
   browser's default [hidden] rule, so without this the Previous button
   stays visible even once JS sets it hidden on the last/complete step. */
.pktms-quiz-nav .pktms-btn[hidden] {
	display: none;
}

/* On the complete screen only Retake Quiz remains — center it instead of
   letting space-between pin a single item to the left. */
.pktms-quiz-nav--single {
	justify-content: center !important;
}

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

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

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

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

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

.pktms-quiz-review-position {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--pktms-text-muted) !important;
	align-self: center !important;
}

/* ── "Submit with unanswered questions?" popup — replaces window.confirm().
   Self-contained (not admin.css's .pktms-modal) since quiz-player.php also
   renders standalone on /take-quiz/, which never loads admin.css. ──────── */
.pktms-quiz-confirm-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgb(0 0 0 / 0.45) !important;
	z-index: 100000 !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
}

.pktms-quiz-confirm-box {
	width: 100% !important;
	max-width: 380px !important;
	padding: 24px !important;
	text-align: center !important;
}

.pktms-quiz-confirm-box p {
	margin: 0 0 20px !important;
	font-size: 14px !important;
	color: var(--pktms-text) !important;
	line-height: 1.5 !important;
}

.pktms-quiz-confirm-actions {
	display: flex;
	gap: 10px !important;
	justify-content: center !important;
}

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

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

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

/* ── Bento responsive ──────────────────────────────────────────────────────── */
/* At 1024px the 4 stat cards (and the two "wide" span-2 cards next to them,
   e.g. Recently Learning / Latest Quiz) used to drop from 4 columns to 2,
   stacking what should be one row into two. Keeping 4 columns here (still
   correctly overridden back down to 1 column by the existing ≤480px rule
   below, for phones) and shrinking padding/icon/font sizes in the
   481–1024px range keeps everything in a single row and still comfortably
   readable, without changing the already-tuned ≤480px phone layout — that's
   a separate pass. */
@media (max-width: 1024px) {
	.pktms-frontend .pktms-bento {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 10px !important;
	}

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

@media (min-width: 481px) and (max-width: 1024px) {
	.pktms-frontend .pktms-bento-card {
		padding: 12px !important;
		gap: 8px !important;
	}

	.pktms-frontend .pktms-stat-card.pktms-bento-card {
		gap: 8px !important;
	}

	.pktms-frontend .pktms-stat-icon-circle {
		width: 36px !important;
		height: 36px !important;
	}

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

	.pktms-frontend .pktms-stat-value {
		font-size: 17px !important;
	}

	.pktms-frontend .pktms-stat-label {
		font-size: 10px !important;
		/* Base rule is white-space:nowrap + ellipsis — at this card width
		   "Completed Courses"/"Certificates Earned" would just truncate to
		   "Completed C…"; wrapping to two lines reads better than that. */
		white-space: normal !important;
		line-height: 1.25 !important;
	}

	.pktms-frontend .pktms-bento-card__header h2,
	.pktms-frontend .pktms-bento-card__header h3 {
		font-size: 12px !important;
	}

	.pktms-frontend .pktms-latest-course,
	.pktms-frontend .pktms-latest-quiz {
		gap: 8px !important;
	}

	.pktms-frontend .pktms-latest-course__avatar {
		width: 36px !important;
		height: 36px !important;
		font-size: 14px !important;
	}

	.pktms-frontend .pktms-latest-quiz__icon {
		width: 40px !important;
		height: 40px !important;
	}

	.pktms-frontend .pktms-latest-course__title,
	.pktms-frontend .pktms-latest-quiz__title {
		font-size: 12px !important;
	}

	.pktms-frontend .pktms-latest-course__percent,
	.pktms-frontend .pktms-latest-quiz__course,
	.pktms-frontend .pktms-latest-quiz__meta {
		font-size: 11px !important;
	}

	.pktms-frontend .pktms-latest-course__body,
	.pktms-frontend .pktms-latest-quiz__body {
		gap: 4px !important;
	}
}

/* 481–880px: the 4 stat cards squeezed into one row of 4 (per the block
   above) read too small/cramped at this width — 2 per row instead reads
   much better. Since Recently Learning / Latest Quiz (.pktms-bento-card
   --wide) already span 2 of the grid's columns, dropping to a 2-column
   grid also makes each of them take the full row width instead of being
   squeezed to a quarter-width card each — fixing their cramped internal
   layout (avatar + title + button all fighting for space) as a direct
   result, not a separate override. */
@media (min-width: 481px) and (max-width: 880px) {
	.pktms-frontend .pktms-bento {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* The dashboard's "Top Courses" card-view grid (#pktms-courses-card-view
	   is this page's id for it) reads better as one column at this width
	   too — scoped by id so the shared .pktms-course-grid component (also
	   used on the standalone course-list page, with its own breakpoints)
	   is untouched everywhere else. */
	#pktms-courses-card-view .pktms-course-grid {
		grid-template-columns: 1fr !important;
	}
}

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

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

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

	/* The 5 stat cards above only shrink their font/icon sizes in the
	   481–1024px range (see that block above) — below 481px they were still
	   using the full desktop 26px/12px sizes inside a now-half-width card,
	   reading oversized and cramped. */
	.pktms-frontend .pktms-bento--cols-5 .pktms-stat-icon-circle {
		width: 40px !important;
		height: 40px !important;
	}

	.pktms-frontend .pktms-bento--cols-5 .pktms-stat-icon-circle .dashicons {
		font-size: 18px !important;
		width: 18px !important;
		height: 18px !important;
	}

	.pktms-frontend .pktms-bento--cols-5 .pktms-stat-value {
		font-size: 19px !important;
	}

	.pktms-frontend .pktms-bento--cols-5 .pktms-stat-label {
		font-size: 10px !important;
		white-space: normal !important;
		line-height: 1.25 !important;
	}
}

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

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

.pktms-theme-toggle svg {
	width: 18px !important;
	height: 18px !important;
}

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

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

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

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

/* --------------------------------------------------------------------------
   Module 12 — Invite self-registration page (site root + ?pktms_invite=TOKEN)
   -------------------------------------------------------------------------- */
.pktms-fe-auth-wrap {
	display: flex;
	justify-content: center !important;
	padding: 48px 16px !important;
}

.pktms-fe-auth-card {
	width: 100% !important;
	max-width: 480px !important;
}

/* --------------------------------------------------------------------------
   Module 15 — Standalone login page (/pixeltokig-login/)
   -------------------------------------------------------------------------- */
.pktms-login-body {
	margin: 0 !important;
	background: var(--pktms-bg) !important;
}

/* Full-bleed 50/50 split, no card chrome — each half fills its grid cell
   completely (Grid's default align/justify-items: stretch does this with
   no extra sizing rules needed). Single column below 900px so the form
   takes the full width there instead of leaving the hidden image's column
   as blank space. */
.pktms-auth-page {
	display: grid;
	grid-template-columns: 1fr !important;
	grid-template-rows: 100vh !important;
	min-height: 100vh !important;
}

@media (min-width: 900px) {
	.pktms-auth-page {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* .pktms-card gave this a border/shadow/radius/background — all stripped
   here since this style has no card chrome, just two full-height panels.
   The compound selector's specificity beats the plain .pktms-card rule
   regardless of stylesheet order. */
.pktms-card.pktms-auth-card {
	margin-bottom: 0 !important;
	background: var(--pktms-surface) !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

.pktms-auth-card {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 60px 48px !important;
}

/* Every direct child (brand block, heading, form, switch/secure notes)
   shares one centered content column, instead of stretching edge to edge
   across the half-screen panel. */
.pktms-auth-card>* {
	width: 100% !important;
	max-width: 400px !important;
}

@media (max-width: 480px) {
	.pktms-auth-card {
		padding: 32px 24px !important;
	}
}

/* Right half — the login image from Platform Settings (or the brand panel
   below), filling its panel edge to edge. Hidden
   below 900px (see .pktms-auth-page above) so mobile shows only the form. */
.pktms-auth-card--placeholder {
	display: none;
	padding: 0 !important;
}

.pktms-auth-card--placeholder>* {
	max-width: none !important;
}

.pktms-auth-card--placeholder img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

@media (min-width: 900px) {
	.pktms-auth-card--placeholder {
		display: block;
	}
}

/* No login image uploaded — brand-color panel with the platform's
   initial and name in place of a photo. Three classes so it outranks the
   shared .pktms-card.pktms-auth-card surface background. */
.pktms-card.pktms-auth-card.pktms-auth-card--brand-panel {
	background: var(--pktms-primary) !important;
	background-image:
		radial-gradient(circle at 18% 22%, rgb(255 255 255 / 0.18) 0, rgb(255 255 255 / 0) 42%),
		radial-gradient(circle at 85% 80%, rgb(0 0 0 / 0.22) 0, rgb(0 0 0 / 0) 48%),
		linear-gradient(150deg, var(--pktms-primary), var(--pktms-primary-hover)) !important;
	border-color: transparent !important;
}

@media (min-width: 900px) {
	.pktms-auth-card--brand-panel {
		display: flex;
		align-items: center !important;
		justify-content: center !important;
	}
}

.pktms-auth-brand-panel {
	display: flex;
	flex-direction: column;
	align-items: center !important;
	gap: 18px !important;
	padding: 48px 32px !important;
	color: #ffffff !important;
	text-align: center !important;
}

.pktms-auth-brand-panel__mark {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 96px !important;
	height: 96px !important;
	border: 1px solid rgb(255 255 255 / 0.35) !important;
	border-radius: 24px !important;
	background: rgb(255 255 255 / 0.14) !important;
	font-size: 48px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

.pktms-auth-brand-panel__name {
	max-width: 320px !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
}

.pktms-auth-card__brand {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	margin-bottom: 28px !important;
}

.pktms-auth-card__brand-logo {
	height: 40px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

.pktms-auth-card h1 {
	font-size: 24px !important;
	font-weight: 800 !important;
	margin: 0 0 6px !important;
	color: var(--pktms-text) !important;
}

.pktms-auth-card__subtitle {
	color: var(--pktms-text-muted) !important;
	font-size: 14px !important;
	margin: 0 0 24px !important;
}

.pktms-auth-row {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin: -4px 0 20px !important;
	font-size: 13px !important;
}

.pktms-auth-remember {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	color: var(--pktms-text-muted) !important;
	font-weight: 500 !important;
	cursor: pointer !important;
}

.pktms-auth-row a {
	color: var(--pktms-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.pktms-auth-row a:hover {
	text-decoration: underline !important;
}

.pktms-auth-card .pktms-btn--full {
	justify-content: center !important;
}

.pktms-auth-switch {
	margin: 20px 0 0 !important;
	font-size: 13px !important;
	text-align: center !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-auth-switch a {
	color: var(--pktms-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin-left: 4px !important;
}

.pktms-auth-switch a:hover {
	text-decoration: underline !important;
}

.pktms-auth-secure {
	display: flex;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 28px 0 0 !important;
	padding-top: 20px !important;
	border-top: 1px solid var(--pktms-border-light) !important;
	font-size: 12px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-auth-secure .dashicons {
	color: var(--pktms-success) !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	margin-top: 1px !important;
}

/* --------------------------------------------------------------------------
   Settings — toggle switch + settings row (Platform Staff Settings mockup)
   -------------------------------------------------------------------------- */
.pktms-fe-toggle {
	position: relative !important;
	display: inline-flex;
	align-items: center !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
}

.pktms-fe-toggle input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
}

.pktms-fe-toggle__track {
	position: relative !important;
	width: 40px !important;
	height: 22px !important;
	border-radius: var(--pktms-radius-full) !important;
	background: var(--pktms-border) !important;
	transition: background var(--pktms-transition) !important;
}

.pktms-fe-toggle__track::after {
	content: '' !important;
	position: absolute !important;
	top: 2px !important;
	left: 2px !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: var(--pktms-shadow-xs) !important;
	transition: transform var(--pktms-transition) !important;
}

.pktms-fe-toggle input:checked+.pktms-fe-toggle__track {
	background: var(--pktms-primary) !important;
}

.pktms-fe-toggle input:checked+.pktms-fe-toggle__track::after {
	transform: translateX(18px) !important;
}

.pktms-fe-toggle input:focus-visible+.pktms-fe-toggle__track {
	box-shadow: var(--pktms-glow-primary) !important;
}

.pktms-settings-row {
	display: flex;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	padding: 16px 0 !important;
	border-bottom: 1px solid var(--pktms-border-light) !important;
}

.pktms-settings-row:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.pktms-settings-row:first-child {
	padding-top: 0 !important;
}

.pktms-settings-row__title {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
	margin: 0 0 3px !important;
}

.pktms-settings-row__desc {
	font-size: 12px !important;
	color: var(--pktms-text-muted) !important;
	margin: 0 !important;
}

.pktms-settings-swatch-row {
	display: flex;
	gap: 10px !important;
	margin-top: 6px !important;
}

.pktms-settings-swatch {
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	border: 2px solid transparent !important;
	cursor: pointer !important;
	box-shadow: var(--pktms-shadow-xs) !important;
}

.pktms-settings-swatch--active {
	border-color: var(--pktms-text) !important;
}

.pktms-settings-logo-picker {
	display: flex;
	align-items: center !important;
	gap: 16px !important;
}

.pktms-settings-logo-picker__preview {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: var(--pktms-radius-lg) !important;
	background-image: var(--pktms-gradient-primary) !important;
	color: #fff !important;
	font-weight: 800 !important;
	font-size: 22px !important;
	flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------------
   My Profile — header row (avatar, name/title/badge, Edit Photo)
   -------------------------------------------------------------------------- */
.pktms-profile-header {
	display: flex;
	align-items: center !important;
	gap: 20px !important;
}

.pktms-profile-header img {
	border-radius: 50% !important;
	flex-shrink: 0 !important;
}

.pktms-profile-header__meta {
	flex: 1 !important;
	min-width: 0 !important;
}

.pktms-profile-header__name {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: var(--pktms-text) !important;
	margin: 0 0 4px !important;
}

.pktms-profile-header__title {
	font-size: 13px !important;
	color: var(--pktms-text-muted) !important;
	margin: 0 0 8px !important;
}

@media (max-width: 480px) {
	.pktms-profile-header {
		flex-wrap: wrap !important;
	}
}

/* --------------------------------------------------------------------------
   Company Details profile page — Platform Staff's read-only view of a
   single company, reached by clicking its name on the Companies list.
   -------------------------------------------------------------------------- */
.pktms-company-detail__header-actions {
	display: flex;
	gap: 8px !important;
	margin-left: auto !important;
}

.pktms-company-detail__avatar {
	width: 88px !important;
	height: 88px !important;
	font-size: 28px !important;
}

.pktms-company-detail__description {
	margin: 16px 0 0 !important;
	color: var(--pktms-text-muted) !important;
	line-height: 1.6 !important;
}

.pktms-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 20px !important;
}

.pktms-detail-grid__label {
	display: block;
	font-size: 12px !important;
	color: var(--pktms-text-muted) !important;
	margin-bottom: 4px !important;
}

.pktms-detail-grid__value {
	display: block;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
}

/* --------------------------------------------------------------------------
   Certificate view (Module 22) — standalone print/verification page.
   -------------------------------------------------------------------------- */
.pktms-certificate-view {
	max-width: 900px !important;
	margin: 40px auto !important;
	padding: 0 20px !important;
	font-family: var(--pktms-font) !important;
}

.pktms-certificate-view__toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
	flex-wrap: wrap !important;
}

/* "Download PDF" (T35) — the standalone page has no .pktms-frontend wrapper. */
.pktms-certificate-view__toolbar .pktms-btn--secondary {
	background: var(--pktms-bg-card, #ffffff) !important;
	color: var(--pktms-text, #111827) !important;
	border: 1px solid var(--pktms-border, #e5e7eb) !important;
	text-decoration: none !important;
}

.pktms-certificate-view__revoked-banner {
	margin-right: auto !important;
	padding: 10px 16px !important;
	border-radius: var(--pktms-radius) !important;
	background: var(--pktms-danger-light) !important;
	color: var(--pktms-danger) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
}

/* Expiry (T27): "Valid until …" beside the print button. */
.pktms-certificate-view__validity {
	margin: 0 auto 0 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--pktms-success) !important;
}

.pktms-certificate-view__validity--expiring {
	color: var(--pktms-warning) !important;
}

.pktms-certificate-card__meta-row .pktms-fe-badge,
.pktms-cert-row .pktms-fe-badge {
	white-space: nowrap !important;
}

/* ── Email texts (T34) ───────────────────────────────────────────────────── */
.pktms-email-templates__layout {
	display: grid;
	grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
	gap: 20px !important;
	margin-top: 12px !important;
}

.pktms-email-templates__list {
	display: flex;
	flex-direction: column !important;
	gap: 4px !important;
	min-width: 0;
}

.pktms-email-templates__item {
	display: flex;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 2px !important;
	padding: 8px 10px !important;
	border-radius: var(--pktms-radius) !important;
	color: var(--pktms-text) !important;
	text-decoration: none !important;
	font-size: 13px !important;
}

.pktms-email-templates__item:hover,
.pktms-email-templates__item.is-active {
	background: var(--pktms-primary-light, var(--pktms-border-light)) !important;
}

.pktms-email-templates__item.is-active {
	font-weight: 600 !important;
}

.pktms-email-templates__editor {
	min-width: 0;
}

.pktms-email-templates__languages {
	display: inline-flex;
	margin-bottom: 12px !important;
}

.pktms-email-templates__languages a {
	text-decoration: none !important;
}

.pktms-email-templates__placeholders {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 4px 0 12px !important;
}

.pktms-email-templates__placeholders .pktms-btn {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 12px !important;
}

.pktms-email-templates__actions {
	flex-wrap: wrap !important;
}

.pktms-email-templates__preview {
	margin-top: 20px !important;
}

.pktms-email-templates__preview-subject {
	margin: 0 0 8px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: var(--pktms-text) !important;
}

.pktms-email-templates__preview iframe {
	display: block;
	width: 100%;
	height: 520px;
	border: 1px solid var(--pktms-border-light) !important;
	border-radius: var(--pktms-radius) !important;
	background: #fff !important;
}

@media (max-width: 780px) {
	.pktms-email-templates__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Scheduled jobs (T32) ────────────────────────────────────────────────── */
.pktms-scheduled-jobs__table td {
	vertical-align: top !important;
}

.pktms-scheduled-jobs__table form {
	margin: 0 !important;
}

.pktms-scheduled-jobs__table .pktms-user-cell__sub {
	display: block;
	margin-top: 2px !important;
}

.pktms-scheduled-jobs__history-row td {
	padding-top: 0 !important;
	border-top: 0 !important;
}

.pktms-scheduled-jobs__history-row summary {
	cursor: pointer;
	font-size: 12px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-scheduled-jobs__history {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pktms-scheduled-jobs__history li {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 4px 8px !important;
	padding: 4px 0 !important;
	font-size: 12px !important;
}

.pktms-scheduled-jobs__subhead {
	margin: 20px 0 4px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.pktms-scheduled-jobs__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 12px !important;
}

.pktms-scheduled-jobs__cron-status {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px 12px !important;
	margin-top: 12px !important;
}

.pktms-scheduled-jobs__cron-status form {
	margin: 0 !important;
}

/* ── Completion rules (T31) ──────────────────────────────────────────────── */
.pktms-course-learn__rule {
	margin: 4px 0 0 !important;
	font-size: 13px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-completion-rule {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.pktms-completion-rule legend {
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
}

.pktms-completion-rule .pktms-checkbox-label {
	display: flex;
	margin: 4px 0 !important;
}

/* ── Unlock in order and prerequisites (T30) ─────────────────────────────── */
.pktms-lesson-item--locked .pktms-lesson-item__link {
	opacity: 0.6;
}

.pktms-lesson-item__lock {
	margin-left: auto !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-course-learn__media--locked {
	color: var(--pktms-text-muted) !important;
}

.pktms-course-learn__media--locked .dashicons {
	font-size: 32px !important;
	width: 32px !important;
	height: 32px !important;
}

.pktms-course-prereq {
	max-width: 720px;
	margin: 32px auto !important;
	padding: 0 16px !important;
}

.pktms-course-prereq__title {
	margin: 12px 0 8px !important;
	font-size: 22px !important;
}

.pktms-course-prereq__list {
	margin: 16px 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pktms-course-prereq__list li {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px 12px !important;
	padding: 10px 0 !important;
	border-bottom: 1px solid var(--pktms-border-light) !important;
}

.pktms-course-prereq .dashicons-lock {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
	vertical-align: -2px;
}

.pktms-prerequisites-select {
	height: auto !important;
}

/* ── Copy a course (T29) ─────────────────────────────────────────────────── */
.pktms-copy-course-form {
	display: inline-flex;
	margin: 0 !important;
}

/* Course edit page: "Copy course" on its own line under Cancel / Update. */
.pktms-fe-form-actions {
	flex-wrap: wrap !important;
}

.pktms-fe-form-actions > .pktms-copy-course-btn {
	flex: 1 1 100% !important;
	justify-content: center !important;
}

/* ── Self-enrolment (T28) ────────────────────────────────────────────────── */
.pktms-available-courses__list {
	margin: 12px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pktms-available-courses__item {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px 12px !important;
	padding: 10px 0 !important;
	border-bottom: 1px solid var(--pktms-border-light) !important;
}

.pktms-available-courses__item:last-child {
	border-bottom: 0 !important;
}

.pktms-available-courses__item form,
.pktms-leave-course-form {
	margin: 0 !important;
}

.pktms-available-courses__item .pktms-course-row-title {
	min-width: 0;
	flex: 1 1 200px !important;
}

.pktms-self-enroll-card .pktms-settings-row {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
}

.pktms-course-card__footer .pktms-leave-course-form {
	width: 100%;
	margin-top: 6px !important;
}

/* Five stat cards in a row: long labels wrap before the corner icon instead
   of running underneath it. */
.pktms-frontend .pktms-bento--cols-5 .pktms-stat-label {
	white-space: normal !important;
	line-height: 1.25 !important;
}

.pktms-frontend .pktms-bento--cols-5 .pktms-stat-card--icon-corner .pktms-stat-body {
	padding-right: 44px !important;
}

/* Five stat cards on two columns: the last one takes the whole row instead
   of sitting alone in half of it. */
@media (max-width: 880px) {
	.pktms-frontend .pktms-bento--cols-5 > .pktms-bento-card:last-child:nth-child(odd) {
		grid-column: span 2 !important;
	}
}

.pktms-certificate-view__paper {
	/* Defaults double as the "classic" design's tokens — every template
	   below overrides just what it needs on its own modifier class, so
	   the shared element rules underneath only ever read var(--cert-*). */
	--cert-accent: #1e3a5f;
	--cert-accent-secondary: #b8860b;
	--cert-bg: var(--pktms-surface);
	--cert-border: 3px double #1e3a5f;
	--cert-name-font: Georgia, 'Times New Roman', serif;
	background: var(--cert-bg) !important;
	border-radius: var(--pktms-radius-lg) !important;
	box-shadow: var(--pktms-shadow-lg) !important;
	padding: 12px !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

.pktms-certificate-view__paper--revoked {
	opacity: 0.7 !important;
}

.pktms-certificate-view__border {
	position: relative !important;
	overflow: hidden !important;
	border: var(--cert-border) !important;
	border-radius: var(--pktms-radius) !important;
	padding: 64px 48px !important;
	text-align: center !important;
}

.pktms-certificate-view__icon {
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 auto 12px !important;
	color: var(--cert-accent) !important;
}

.pktms-certificate-view__eyebrow {
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--cert-accent-secondary) !important;
	margin: 0 0 24px !important;
}

.pktms-certificate-view__presented {
	font-size: 15px !important;
	color: var(--pktms-text-muted) !important;
	margin: 0 !important;
}

.pktms-certificate-view__name {
	font-family: var(--cert-name-font) !important;
	font-size: 40px !important;
	font-weight: 700 !important;
	color: var(--pktms-text) !important;
	margin: 12px 0 20px !important;
}

.pktms-certificate-view__body {
	font-size: 16px !important;
	color: var(--pktms-text) !important;
	max-width: 560px !important;
	margin: 0 auto 32px !important;
	line-height: 1.6 !important;
}

.pktms-certificate-view__meta {
	display: flex !important;
	justify-content: center !important;
	gap: 64px !important;
	margin-bottom: 32px !important;
}

.pktms-certificate-view__meta-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.pktms-certificate-view__meta-label {
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-certificate-view__meta-value {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
}

.pktms-certificate-view__uid {
	font-size: 12px !important;
	color: var(--pktms-text-light) !important;
	letter-spacing: 0.04em !important;
	margin: 0 !important;
}

/* ── Certificate templates — 5 selectable built-in designs ────────────────
   Each modifier class only sets the --cert-* custom properties (and any
   design-specific decoration); every element rule above already reads
   from those properties, so no element rule needs repeating per design. */

.pktms-certificate-view__paper--classic {
	--cert-accent: #1e3a5f;
	--cert-accent-secondary: #b8860b;
	--cert-bg: #ffffff;
	--cert-border: 3px double #1e3a5f;
	--cert-name-font: Georgia, 'Times New Roman', serif;
}

.pktms-certificate-view__paper--classic .pktms-certificate-view__eyebrow::after {
	content: '' !important;
	display: block !important;
	width: 60px !important;
	height: 2px !important;
	background: var(--cert-accent-secondary) !important;
	margin: 10px auto 0 !important;
}

.pktms-certificate-view__paper--nordic {
	--cert-accent: #006AA7;
	--cert-accent-secondary: #c99400;
	--cert-bg: #ffffff;
	--cert-border: 2px solid #006AA7;
	--cert-name-font: var(--pktms-font);
}

.pktms-certificate-view__paper--nordic .pktms-certificate-view__border::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: 6px !important;
	background: linear-gradient(90deg, #006AA7 0%, #006AA7 50%, #FECC02 50%, #FECC02 100%) !important;
}

.pktms-certificate-view__paper--band {
	--cert-accent: #334155;
	--cert-accent-secondary: #0f172a;
	--cert-bg: #ffffff;
	--cert-border: 3px solid #334155;
	--cert-name-font: var(--pktms-font);
}

.pktms-certificate-view__paper--modern {
	--cert-accent: #0f766e;
	--cert-accent-secondary: #0f766e;
	--cert-bg: #ffffff;
	--cert-border: none;
	--cert-name-font: var(--pktms-font);
}

.pktms-certificate-view__paper--modern .pktms-certificate-view__border {
	padding-top: 88px !important;
}

.pktms-certificate-view__paper--modern .pktms-certificate-view__border::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 8px !important;
	background: var(--cert-accent) !important;
}

.pktms-certificate-view__paper--gold {
	--cert-accent: #a67c00;
	--cert-accent-secondary: #a67c00;
	--cert-bg: #fdf8ec;
	--cert-border: 4px double #a67c00;
	--cert-name-font: Georgia, 'Times New Roman', serif;
}

.pktms-certificate-view__paper--appreciation {
	--cert-accent: #b5121b;
	--cert-accent-secondary: #c9a227;
	--cert-bg: #fffdf7;
	--cert-border: 2px solid #c9a227;
	--cert-name-font: 'Brush Script MT', 'Segoe Script', cursive;
}

.pktms-certificate-view__paper--appreciation .pktms-certificate-view__eyebrow {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: var(--cert-name-font) !important;
	font-size: 44px !important;
	color: var(--cert-accent) !important;
	margin-bottom: 4px !important;
}

.pktms-certificate-view__paper--appreciation .pktms-certificate-view__name {
	font-family: var(--cert-name-font) !important;
}

.pktms-certificate-view__paper--appreciation .pktms-certificate-view__border {
	padding-top: 40px !important;
	padding-bottom: 56px !important;
}

.pktms-certificate-view__ribbon {
	position: relative !important;
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 2px !important;
	margin: 0 auto 24px !important;
	padding: 8px 32px !important;
	background: #1f2937 !important;
	clip-path: polygon(4% 0%, 96% 0%, 100% 50%, 96% 100%, 4% 100%, 0% 50%) !important;
}

.pktms-certificate-view__ribbon-line1 {
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

.pktms-certificate-view__ribbon-line2 {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--cert-accent-secondary) !important;
}

.pktms-certificate-view__corner {
	position: absolute !important;
	width: 56px !important;
	height: 56px !important;
	border: 2px solid var(--cert-accent-secondary) !important;
	opacity: 0.55 !important;
}

.pktms-certificate-view__corner--tl {
	top: 8px !important;
	left: 8px !important;
	border-right: none !important;
	border-bottom: none !important;
}

.pktms-certificate-view__corner--tr {
	top: 8px !important;
	right: 8px !important;
	border-left: none !important;
	border-bottom: none !important;
}

.pktms-certificate-view__corner--bl {
	bottom: 8px !important;
	left: 8px !important;
	border-right: none !important;
	border-top: none !important;
}

.pktms-certificate-view__corner--br {
	bottom: 8px !important;
	right: 8px !important;
	border-left: none !important;
	border-top: none !important;
}

.pktms-certificate-view__seal {
	display: block !important;
	width: 44px !important;
	height: 52px !important;
	margin: 16px auto 0 !important;
	color: var(--cert-accent) !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

.pktms-cert-template-swatch--appreciation {
	background: #fffdf7 !important;
	border: 2px solid #c9a227 !important;
	position: relative !important;
}

.pktms-cert-template-swatch--appreciation::after {
	content: '' !important;
	position: absolute !important;
	inset: 4px !important;
	border: 1px solid #b5121b !important;
	opacity: 0.6 !important;
}

.pktms-certificate-view__file {
	background: var(--pktms-surface) !important;
	border-radius: var(--pktms-radius-lg) !important;
	box-shadow: var(--pktms-shadow-lg) !important;
	padding: 16px !important;
	text-align: center !important;
}

.pktms-certificate-view__embed {
	width: 100% !important;
	height: 80vh !important;
	border: none !important;
	border-radius: var(--pktms-radius) !important;
}

.pktms-certificate-view__file-fallback {
	margin: 12px 0 0 !important;
}

@media print {
	.pktms-certificate-view {
		margin: 0 !important;
		max-width: none !important;
	}

	.pktms-certificate-view__toolbar,
	.pktms-theme-toggle,
	#wpadminbar {
		display: none !important;
	}

	.pktms-certificate-view__paper {
		box-shadow: none !important;
	}
}

/* ── Certificate template picker — certificate-issue-form.php /
   certificate-create-form.php's "choose a design" grid. ────────────────── */
.pktms-cert-template-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
}

.pktms-cert-template-option {
	position: relative !important;
}

.pktms-cert-template-option input[type="radio"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

.pktms-cert-template-option label {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	height: 100% !important;
	padding: 12px !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius) !important;
	cursor: pointer !important;
	transition: var(--pktms-transition) !important;
}

.pktms-cert-template-option input:checked + label {
	border-color: var(--pktms-primary) !important;
	box-shadow: var(--pktms-glow-primary) !important;
}

.pktms-cert-template-option input:focus-visible + label {
	outline: 2px solid var(--pktms-primary) !important;
	outline-offset: 2px !important;
}

.pktms-cert-template-swatch {
	display: block !important;
	height: 48px !important;
	border-radius: var(--pktms-radius-sm) !important;
}

.pktms-cert-template-swatch--classic {
	background: linear-gradient(135deg, #1e3a5f, #2c5282) !important;
	border: 2px double #b8860b !important;
}

.pktms-cert-template-swatch--nordic {
	background: linear-gradient(90deg, #006AA7 0%, #006AA7 70%, #FECC02 70%, #FECC02 100%) !important;
}

.pktms-cert-template-swatch--band {
	background: linear-gradient(90deg, #334155 0%, #334155 28%, #ffffff 28%, #ffffff 100%) !important;
	border: 1px solid var(--pktms-border) !important;
}

.pktms-cert-template-swatch--modern {
	background: #ffffff !important;
	border: 1px solid var(--pktms-border) !important;
	border-top: 8px solid #0f766e !important;
}

.pktms-cert-template-swatch--gold {
	background: #fdf8ec !important;
	border: 3px double #a67c00 !important;
}

.pktms-cert-template-option label strong {
	font-size: 13px !important;
	color: var(--pktms-text) !important;
}

.pktms-cert-template-option label small {
	font-size: 11px !important;
	color: var(--pktms-text-muted) !important;
	line-height: 1.4 !important;
}

/* ── Course certificate rule form (certificate-create-form.php) — upload
   vs. built-in-design toggle, live preview, and the draggable overlay-field
   editor for uploaded PDFs/images. ────────────────────────────────────────── */
.pktms-cert-source-toggle {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
}

.pktms-cert-source-toggle__option {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 16px !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius) !important;
	cursor: pointer !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
	transition: var(--pktms-transition) !important;
}

.pktms-cert-source-toggle__option:has(input:checked) {
	border-color: var(--pktms-primary) !important;
	box-shadow: var(--pktms-glow-primary) !important;
	color: var(--pktms-primary) !important;
}

.pktms-cert-source-panel {
	margin-bottom: 20px !important;
}

.pktms-cert-preview {
	margin-bottom: 12px !important;
}

.pktms-cert-preview-box {
	position: relative !important;
	width: 100% !important;
	max-width: 640px !important;
	aspect-ratio: 1.414 / 1 !important;
	margin: 0 auto !important;
	overflow: hidden !important;
	background: var(--pktms-surface) !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius-lg) !important;
	box-shadow: var(--pktms-shadow-lg) !important;
}

.pktms-cert-preview-box--view {
	margin: 0 auto !important;
}

.pktms-cert-preview-box__bg {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	border: none !important;
}

.pktms-cert-preview-box__placeholder {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	color: var(--pktms-text-muted) !important;
	font-size: 13px !important;
	text-align: center !important;
	padding: 20px !important;
}

.pktms-cert-field-chip {
	position: absolute !important;
	transform: translate(-50%, -50%) !important;
	padding: 4px 10px !important;
	background: rgba(255, 255, 255, 0.85) !important;
	border: 1px dashed var(--pktms-primary) !important;
	border-radius: var(--pktms-radius-sm) !important;
	cursor: grab !important;
	touch-action: none !important;
	user-select: none !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
}

.pktms-cert-field-chip.is-dragging {
	cursor: grabbing !important;
	box-shadow: var(--pktms-shadow-lg) !important;
	z-index: 2 !important;
}

.pktms-cert-field-controls {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 16px !important;
}

.pktms-cert-field-controls__row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 8px 12px !important;
	background: var(--pktms-bg) !important;
	border-radius: var(--pktms-radius-sm) !important;
}

.pktms-cert-field-controls__label {
	flex: 1 1 140px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
}

.pktms-cert-field-controls__item {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 12px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-cert-field-controls__item .pktms-cert-field-size {
	width: 60px !important;
}

.pktms-cert-field-controls__item .pktms-cert-field-color {
	width: 32px !important;
	height: 28px !important;
	padding: 2px !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius-sm) !important;
	cursor: pointer !important;
}

.pktms-cert-criteria-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
	margin-bottom: 12px !important;
}

.pktms-cert-criteria-row__item {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: var(--pktms-text) !important;
	white-space: nowrap !important;
}

/* A flex item's default min-width is auto (its content's own minimum size),
   not 0 — for a span of wrappable text that minimum is just its longest
   word, so without this the two spans below shrink to ~30px and wrap
   word-by-word instead of reading as one line. These are short, fixed
   phrases, so nowrap is correct rather than allowing wrap at all. */
.pktms-cert-criteria-row__item span {
	white-space: nowrap !important;
}

/* Compound selector, not just .pktms-input--narrow alone — admin/css/pktms-admin.css's
   .pktms-input{width:100% !important} is also loaded on this page and, being
   enqueued after this stylesheet, wins any single-class !important tie by
   source order. A compound selector always outranks it regardless of
   enqueue order — this was the actual cause of the Certificate Criteria
   row looking broken (the "narrow" input rendered at ~450px, not 70px,
   throwing off everything laid out after it). */
.pktms-input.pktms-input--narrow {
	width: 70px !important;
	max-width: 70px !important;
	flex: none !important;
}

.pktms-checkbox-label {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: var(--pktms-text) !important;
	cursor: pointer !important;
}

.pktms-fe-empty-hint {
	padding: 24px !important;
	text-align: center !important;
	color: var(--pktms-text-muted) !important;
	font-size: 13px !important;
}

/* Final-render overlay fields (certificate-view.php) — same coordinate
   system as the editor's .pktms-cert-field-chip above, but static and
   print-safe instead of draggable. */
.pktms-certificate-view__field {
	position: absolute !important;
	transform: translate(-50%, -50%) !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

/* ── Certificate canvas builder (certificate-create-form.php +
   pktms-cert-designer.js) — Canva-style free-form design editor. ────────── */
.pktms-cert-designer {
	display: flex !important;
	align-items: flex-start !important;
	gap: 16px !important;
}

.pktms-cert-designer__main {
	flex: 1 1 480px !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

/* Left-hand template rail — small real preview cards, like a Canva template
   list, instead of a row of plain text buttons. */
.pktms-cert-designer__presets {
	flex: 0 0 120px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	max-height: 640px !important;
	overflow-y: auto !important;
}

.pktms-cert-preset-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	padding: 6px !important;
	background: var(--pktms-surface) !important;
	border: 2px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius) !important;
	cursor: pointer !important;
	transition: var(--pktms-transition) !important;
}

.pktms-cert-preset-card:hover {
	border-color: var(--pktms-primary) !important;
}

.pktms-cert-preset-card.is-active {
	border-color: var(--pktms-primary) !important;
	box-shadow: var(--pktms-glow-primary) !important;
}

.pktms-cert-preset-thumb {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 1.414 / 1 !important;
	overflow: hidden !important;
	background: #ffffff !important;
	border-radius: var(--pktms-radius-sm) !important;
	pointer-events: none !important;
}

.pktms-cert-preset-thumb__inner {
	width: 640px !important;
	transform-origin: top left !important;
}

/* The 'blank' preset has no rendered thumb HTML (empty design) — show a
   plain "+" placeholder instead. */
.pktms-cert-preset-card[data-preset="blank"] .pktms-cert-preset-thumb {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px dashed var(--pktms-border) !important;
	font-size: 24px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-cert-preset-card[data-preset="blank"] .pktms-cert-preset-thumb::before {
	content: '+' !important;
}

.pktms-cert-preset-card__label {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
	text-align: center !important;
}

.pktms-cert-designer__toolbar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px !important;
	background: var(--pktms-bg) !important;
	border-radius: var(--pktms-radius) !important;
}

.pktms-cert-designer__toolbar-divider {
	width: 1px !important;
	align-self: stretch !important;
	background: var(--pktms-border) !important;
}

.pktms-cert-designer__toolbar .pktms-select {
	width: auto !important;
	min-width: 160px !important;
}

.pktms-cert-designer__bg-color {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	color: var(--pktms-text) !important;
}

.pktms-cert-designer__bg-color input[type="color"] {
	width: 32px !important;
	height: 28px !important;
	padding: 2px !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius-sm) !important;
	cursor: pointer !important;
}

.pktms-cert-designer__body {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 16px !important;
}

.pktms-cert-designer__body .pktms-cert-preview-box {
	flex: 1 1 480px !important;
	position: relative !important;
	overflow: hidden !important;
}

.pktms-cert-el {
	position: absolute !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	cursor: move !important;
	outline: 1px dashed transparent !important;
	padding: 2px !important;
	white-space: pre-wrap !important;
	word-break: break-word !important;
	user-select: none !important;
	touch-action: none !important;
}

.pktms-cert-el:hover {
	outline-color: var(--pktms-border) !important;
}

.pktms-cert-el--dynamic {
	font-style: italic !important;
}

.pktms-cert-el--image {
	object-fit: contain !important;
	padding: 0 !important;
}

.pktms-cert-el.is-selected {
	outline: 2px solid var(--pktms-primary) !important;
	box-shadow: var(--pktms-glow-primary) !important;
}

.pktms-cert-el__handle {
	position: absolute !important;
	right: -6px !important;
	bottom: -6px !important;
	width: 12px !important;
	height: 12px !important;
	background: var(--pktms-primary) !important;
	border: 2px solid #ffffff !important;
	border-radius: 50% !important;
	cursor: nwse-resize !important;
	touch-action: none !important;
}

/* Elements inside the designer force their own `display` value (flex/
   inline-flex via .pktms-btn etc.), which otherwise beats the browser's
   native [hidden]{display:none} rule since !important always wins over an
   unmarked UA rule regardless of specificity — this restores it. */
.pktms-cert-designer [hidden] {
	display: none !important;
}

.pktms-cert-designer__props {
	flex: 0 0 240px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 14px !important;
	background: var(--pktms-bg) !important;
	border-radius: var(--pktms-radius) !important;
}

.pktms-cert-designer__props h4 {
	margin: 0 !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-cert-designer__props-row {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	font-size: 12px !important;
	color: var(--pktms-text) !important;
}

.pktms-cert-designer__props-row textarea,
.pktms-cert-designer__props-row select,
.pktms-cert-designer__props-row input[type="number"] {
	width: 100% !important;
	box-sizing: border-box !important;
}

.pktms-cert-designer__props-row input[type="color"] {
	width: 100% !important;
	height: 30px !important;
	padding: 2px !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius-sm) !important;
	cursor: pointer !important;
}

.pktms-cert-designer__props-row--inline {
	flex-direction: row !important;
	align-items: center !important;
}

.pktms-cert-designer__props-row--split {
	flex-direction: row !important;
	gap: 8px !important;
}

.pktms-cert-designer__props-row--split label {
	flex: 1 1 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.pktms-cert-designer__align-group {
	display: flex !important;
	gap: 6px !important;
}

.pktms-cert-designer__align-group .pktms-btn {
	padding: 4px 8px !important;
	font-size: 11px !important;
}

.pktms-cert-designer__align-group .pktms-btn.is-active {
	border-color: var(--pktms-primary) !important;
	color: var(--pktms-primary) !important;
}

.pktms-cert-designer__props-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-top: 6px !important;
}

/* Final-render elements from the canvas design (pktms_render_certificate_design())
   — static, print-safe, no editor chrome. */
.pktms-cert-design-element {
	position: absolute !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	white-space: pre-wrap !important;
	word-break: break-word !important;
	line-height: 1.3 !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

.pktms-cert-design-element--image {
	object-fit: contain !important;
}

.pktms-cert-design-element--shape {
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

/* Editor-side shape element — same idea as .pktms-cert-el--image, just a
   plain colored rectangle with no text child. */
.pktms-cert-el--shape {
	padding: 0 !important;
}

/* Page size / orientation — compound selectors (base class + modifier) so
   these always beat .pktms-cert-preview-box's own default 1.414:1 ratio
   regardless of source order, and only apply when a design actually sets a
   non-default page config; a design with none keeps today's exact default,
   so older saved designs are unaffected. */
.pktms-cert-preview-box.pktms-cert-page--a4-portrait {
	aspect-ratio: 1 / 1.4142 !important;
}

.pktms-cert-preview-box.pktms-cert-page--letter-landscape {
	aspect-ratio: 1.294 / 1 !important;
}

.pktms-cert-preview-box.pktms-cert-page--letter-portrait {
	aspect-ratio: 1 / 1.294 !important;
}

.pktms-cert-preview-box.pktms-cert-page--square {
	aspect-ratio: 1 / 1 !important;
}

/* ── Certificate verification search (Module 23) ─────────────────────────── */
.pktms-cert-verify__inner {
	max-width: 480px !important;
	margin: 40px auto !important;
	padding: 0 16px !important;
}

.pktms-cert-verify__intro {
	margin: 0 0 18px !important;
	font-size: 14px !important;
	color: var( --pktms-text-muted ) !important;
}

.pktms-cert-verify__form .pktms-btn {
	margin-top: 4px !important;
}

.pktms-cert-verify__result {
	margin-top: 20px !important;
}

.pktms-cert-verify__result-card {
	display: flex;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 16px !important;
	border-radius: var( --pktms-radius ) !important;
	border: 1px solid var( --pktms-border ) !important;
}

.pktms-cert-verify__result-card--valid {
	background: var( --pktms-success-light ) !important;
	border-color: var( --pktms-success ) !important;
}

.pktms-cert-verify__result-card--revoked {
	background: var( --pktms-danger-light ) !important;
	border-color: var( --pktms-danger ) !important;
}

.pktms-cert-verify__result-card--not_found,
.pktms-cert-verify__result-card--rate_limited,
.pktms-cert-verify__result-card--error {
	background: var( --pktms-bg ) !important;
}

.pktms-cert-verify__result-card .pktms-fe-badge {
	align-self: flex-start !important;
}

.pktms-cert-verify__result-row {
	display: flex;
	justify-content: space-between !important;
	gap: 12px !important;
	font-size: 14px !important;
	padding-top: 8px !important;
	border-top: 1px solid var( --pktms-border-light ) !important;
}

.pktms-cert-verify__result-row:first-of-type {
	border-top: none !important;
	padding-top: 0 !important;
}

.pktms-cert-verify__result-label {
	color: var( --pktms-text-muted ) !important;
	font-weight: 600 !important;
}

.pktms-cert-verify__result-value {
	color: var( --pktms-text ) !important;
	text-align: right !important;
}

/* ── Subscription plans (T14) ─────────────────────────────────────────────
   Owner dashboard → Plans (plans-manage.php) and the public pricing page
   (pricing.php, [pktms_pricing]). */
.pktms-plan-hint {
	margin: 0 0 12px !important;
	font-size: 12.5px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-plan-table .pktms-row-actions form {
	display: inline-flex;
	margin: 0 !important;
}

.pktms-plan-order {
	min-width: 72px;
}

/* Short values stay on one line; the name column takes the wrapping. */
.pktms-plan-table td {
	white-space: nowrap;
}

.pktms-plan-table td:nth-child(2) {
	min-width: 200px;
	white-space: normal;
}

.pktms-plan-form .pktms-form-row {
	display: flex;
	gap: 16px !important;
}

.pktms-plan-form .pktms-form-row > .pktms-form-group {
	flex: 1 1 0 !important;
	min-width: 0 !important;
}

.pktms-plan-courses {
	margin: 8px 0 16px !important;
	padding: 0 !important;
	border: 0 !important;
}

.pktms-plan-courses legend {
	margin-bottom: 4px !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
}

.pktms-plan-courses__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
	gap: 8px 16px !important;
	max-height: 260px !important;
	overflow-y: auto !important;
	padding: 12px !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius) !important;
	background: var(--pktms-surface) !important;
}

.pktms-plan-active {
	margin: 0 0 16px !important;
}

/* The pricing page sits on the theme's own background, so its loose text
   (heading, intro, footnote) takes the theme's text colour; the cards and
   the switch use the plugin's colours, dark mode included. */
.pktms-frontend.pktms-pricing {
	color: inherit !important;
}

.pktms-pricing__inner {
	padding-top: 48px !important;
	padding-bottom: 72px !important;
}

.pktms-pricing__header {
	max-width: 680px !important;
	margin: 0 auto 32px !important;
	text-align: center !important;
}

.pktms-pricing__title {
	margin: 0 0 12px !important;
	font-size: clamp(28px, 4vw, 40px) !important;
	line-height: 1.15 !important;
	color: inherit !important;
}

.pktms-pricing__lead {
	margin: 0 0 24px !important;
	font-size: 16px !important;
	color: inherit !important;
	opacity: 0.75;
}

.pktms-pricing__switch {
	display: inline-flex;
}

.pktms-pricing__switch-save {
	margin-left: 6px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--pktms-success, #16a34a) !important;
}

.pktms-pricing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
	gap: 20px !important;
	align-items: stretch !important;
}

.pktms-pricing-card {
	display: flex;
	flex-direction: column !important;
	padding: 28px 24px !important;
	border: 1px solid var(--pktms-border) !important;
	border-top: 4px solid var(--pktms-primary) !important;
	border-radius: var(--pktms-radius-lg) !important;
	background: var(--pktms-surface) !important;
	box-shadow: var(--pktms-shadow-md) !important;
}

.pktms-pricing-card__name {
	margin: 0 0 6px !important;
	font-size: 20px !important;
	color: var(--pktms-text) !important;
}

.pktms-pricing-card__desc {
	/* Room for two lines, so prices line up across cards. */
	min-height: 2.9em;
	margin: 0 0 16px !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-pricing-card__price {
	min-height: 64px;
	margin: 0 0 20px !important;
}

.pktms-pricing-card__amount {
	font-size: clamp(24px, 2.6vw, 34px) !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	color: var(--pktms-text) !important;
}

.pktms-pricing-card__period {
	white-space: nowrap;
	margin-left: 4px !important;
	font-size: 14px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-pricing-card__save,
.pktms-pricing-card__note {
	display: block;
	width: fit-content;
	margin-top: 6px !important;
}

.pktms-pricing-card__note {
	font-size: 12.5px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-pricing-card__features {
	flex: 1 1 auto;
	margin: 0 0 24px !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 14px !important;
	color: var(--pktms-text) !important;
}

.pktms-pricing-card__features > li {
	position: relative;
	margin: 0 0 10px !important;
	padding-left: 24px !important;
}

.pktms-pricing-card__features > li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--pktms-primary);
}

.pktms-pricing-card__courses {
	margin: 6px 0 0 !important;
	padding-left: 16px !important;
	list-style: disc !important;
	font-size: 13px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-pricing-card__courses li {
	margin: 0 0 4px !important;
}

.pktms-pricing-card__cta {
	margin-top: auto !important;
	justify-content: center !important;
}

.pktms-pricing__footnote {
	margin: 24px 0 0 !important;
	text-align: center !important;
	font-size: 13px !important;
	color: inherit !important;
	opacity: 0.7;
}

.pktms-pricing__empty {
	max-width: 560px !important;
	margin: 0 auto !important;
	padding: 32px !important;
	text-align: center !important;
}

@media (max-width: 600px) {
	.pktms-plan-form .pktms-form-row {
		flex-wrap: wrap !important;
	}

	.pktms-plan-form .pktms-form-row > .pktms-form-group {
		flex: 1 1 100% !important;
	}

	.pktms-pricing__inner {
		padding-top: 32px !important;
		padding-bottom: 48px !important;
	}

	/* One card per row: nothing to line up, so no reserved space. */
	.pktms-pricing-card__desc {
		min-height: 0;
	}

	.pktms-pricing-card__desc:empty {
		display: none;
	}

	.pktms-pricing-card__price {
		min-height: 0;
	}
}

/* ── Stripe (T15) ─────────────────────────────────────────────────────────
   Platform Settings → Payments (settings-payments.php) and the company
   dashboard's Billing view (company-billing.php). */
.pktms-stripe-keys {
	margin: 16px 0 0 !important;
	padding: 16px 16px 4px !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius) !important;
}

.pktms-stripe-keys legend {
	padding: 0 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
}

#pktms-stripe-settings form[data-pktms-autosave] > .pktms-plan-hint {
	margin-top: 12px !important;
}

.pktms-stripe-test--ok {
	color: var(--pktms-success) !important;
}

.pktms-stripe-test--error {
	color: var(--pktms-danger) !important;
}

.pktms-billing-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
	gap: 16px !important;
	margin: 0 0 12px !important;
}

.pktms-billing-summary dt {
	margin: 0 0 4px !important;
	font-size: 12px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-billing-summary dd {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
}

.pktms-billing-plans .pktms-pricing-card {
	padding: 22px 20px !important;
	box-shadow: none !important;
}

.pktms-pricing-card--current {
	border-color: var(--pktms-primary) !important;
	background: var(--pktms-primary-light) !important;
}

.pktms-billing-plans form.pktms-pricing-card__cta {
	margin: auto 0 0 !important;
}

.pktms-billing-secure {
	margin: 16px 0 0 !important;
}

.pktms-subscription-banner__billing {
	display: inline-block;
	margin-top: 4px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--pktms-primary) !important;
}

/* ── Company signup (T16) — /get-started/ (company-signup.php). Shares the
   pricing page's header and theme-colour handling (.pktms-pricing). */
.pktms-signup__layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
	gap: 20px !important;
	align-items: start !important;
	text-align: left !important;
}

.pktms-signup__main {
	display: flex;
	flex-direction: column !important;
	gap: 20px !important;
	min-width: 0 !important;
}

.pktms-signup__main .pktms-fe-card,
.pktms-signup__summary {
	margin: 0 !important;
}

.pktms-signup__summary {
	position: sticky;
	top: 24px;
}

.pktms-signup__hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.pktms-signup__plans {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
	gap: 12px !important;
}

.pktms-signup__plan {
	position: relative;
	display: flex;
	flex-direction: column !important;
	gap: 4px !important;
	padding: 16px 16px 16px 44px !important;
	border: 1.5px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius-lg) !important;
	background: var(--pktms-surface) !important;
	color: var(--pktms-text) !important;
	cursor: pointer !important;
}

.pktms-signup__plan input[type="radio"] {
	position: absolute;
	top: 18px;
	left: 16px;
	margin: 0 !important;
}

.pktms-signup__plan--selected {
	border-color: var(--pktms-primary) !important;
	background: var(--pktms-primary-light) !important;
}

.pktms-signup__plan-name {
	font-weight: 700 !important;
	font-size: 15px !important;
}

.pktms-signup__plan-price {
	font-size: 18px !important;
	font-weight: 800 !important;
}

.pktms-signup__plan-price small {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-signup__plan-meta {
	font-size: 12.5px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-signup .pktms-form-row {
	display: flex;
	gap: 16px !important;
}

.pktms-signup .pktms-form-row > .pktms-form-group {
	flex: 1 1 0 !important;
	min-width: 0 !important;
}

.pktms-signup .pktms-pricing__switch label {
	cursor: pointer !important;
}

.pktms-signup .pktms-pricing__switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pktms-signup__summary-plan {
	margin: 0 0 4px !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	color: var(--pktms-text) !important;
}

.pktms-signup__summary-price {
	margin: 0 0 12px !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	color: var(--pktms-text) !important;
}

.pktms-signup__summary .pktms-btn {
	margin: 8px 0 12px !important;
	justify-content: center !important;
}

.pktms-signup-settings__warning {
	color: var(--pktms-warning, #b45309) !important;
}

@media (max-width: 900px) {
	.pktms-signup__layout {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.pktms-signup__summary {
		position: static;
	}
}

@media (max-width: 600px) {
	.pktms-signup .pktms-form-row {
		flex-wrap: wrap !important;
	}

	.pktms-signup .pktms-form-row > .pktms-form-group {
		flex: 1 1 100% !important;
	}
}

/* ── Stripe webhook (T17) — Settings → Payments and the company page. */
.pktms-stripe-webhook {
	margin: 16px 0 0 !important;
	padding: 16px 0 0 !important;
	border-top: 1px solid var(--pktms-border-light) !important;
}

.pktms-stripe-webhook__url {
	display: flex;
	gap: 8px !important;
	margin: 8px 0 !important;
}

.pktms-stripe-webhook__url .pktms-input {
	font-family: monospace !important;
	font-size: 12.5px !important;
}

.pktms-stripe-webhook code,
.pktms-stripe-events code {
	font-size: 12px !important;
	word-break: break-word;
}

.pktms-stripe-webhook__recent {
	margin-top: 16px !important;
}

.pktms-stripe-events td {
	font-size: 13px !important;
	vertical-align: top !important;
}

/* Event names stay whole; the table scrolls on narrow screens instead. */
.pktms-stripe-events td code {
	display: block;
	margin-bottom: 4px !important;
	white-space: nowrap;
	word-break: normal;
}

/* ── Seat limits (T18) — banner states, the Employees view's seats line
   (seat-limit-notice.php) and the owner's "12 / 20" counts. */
.pktms-subscription-banner--seats-warn .pktms-progress__fill {
	background: var(--pktms-warning, #d97706) !important;
}

.pktms-subscription-banner--seats-full .pktms-progress__fill {
	background: var(--pktms-danger) !important;
}

.pktms-subscription-banner__seats-note {
	margin: 6px 0 0 !important;
	font-size: 12px !important;
	color: var(--pktms-danger) !important;
}

.pktms-seat-notice {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px 12px !important;
	margin: 0 0 12px !important;
	padding: 10px 14px !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius) !important;
	background: var(--pktms-surface) !important;
	font-size: 13px !important;
	color: var(--pktms-text) !important;
}

.pktms-seat-notice__count {
	font-weight: 600 !important;
}

.pktms-seat-notice__text {
	flex: 1 1 260px;
	color: var(--pktms-text-muted) !important;
}

.pktms-seat-notice--warn {
	border-color: var(--pktms-warning, #d97706) !important;
}

.pktms-seat-notice--full {
	border-color: var(--pktms-danger) !important;
	background: var(--pktms-danger-light, #fef2f2) !important;
}

.pktms-seat-notice--full .pktms-seat-notice__text {
	color: var(--pktms-text) !important;
}

.pktms-btn:disabled,
.pktms-btn.pktms-btn--disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	pointer-events: none;
}

.pktms-seat-count__limit {
	color: var(--pktms-text-muted) !important;
}

/* ── Unpaid invoices (T19) — dashboard notice (billing-overdue-notice.php)
   and the owner's override on the company page. */
.pktms-billing-notice {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px 16px !important;
	margin: 0 0 16px !important;
	padding: 12px 16px !important;
	border: 1px solid var(--pktms-warning, #d97706) !important;
	border-radius: var(--pktms-radius) !important;
	background: var(--pktms-surface) !important;
	color: var(--pktms-text) !important;
	font-size: 13px !important;
}

.pktms-billing-notice--suspended {
	border-color: var(--pktms-danger) !important;
	background: var(--pktms-danger-light, #fef2f2) !important;
}

.pktms-billing-notice__text {
	display: flex;
	flex: 1 1 280px;
	flex-direction: column !important;
	gap: 2px !important;
}

.pktms-billing-notice__text strong {
	color: var(--pktms-warning, #d97706) !important;
}

.pktms-billing-notice--suspended .pktms-billing-notice__text strong {
	color: var(--pktms-danger) !important;
}

.pktms-billing-override {
	margin: 16px 0 0 !important;
	padding: 12px 14px !important;
	border: 1px solid var(--pktms-warning, #d97706) !important;
	border-radius: var(--pktms-radius) !important;
	font-size: 13px !important;
}

.pktms-billing-override--suspended {
	border-color: var(--pktms-danger) !important;
}

.pktms-billing-override__status {
	margin: 0 0 10px !important;
	color: var(--pktms-text) !important;
}

.pktms-billing-override__form {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
}

.pktms-billing-override__form .pktms-input--narrow {
	width: 72px !important;
}
/* ── Customer Portal (T20) — Billing → Manage subscription. */
.pktms-billing-portal {
	margin: 16px 0 0 !important;
}

.pktms-billing-portal .pktms-plan-hint {
	margin: 8px 0 0 !important;
}

/* ── Invoices and VAT (T21) — "excl. VAT" under prices, Billing details,
   the invoice list. */
.pktms-pricing-card__vat {
	display: block;
	margin-top: 2px !important;
	font-size: 12px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-billing-details .pktms-btn {
	margin-top: 4px !important;
}

.pktms-invoice-table__links {
	white-space: nowrap !important;
}

.pktms-invoice-table__links a + a {
	margin-left: 12px !important;
}

/* ── Subscription page (T22) — templates/frontend/subscription-overview.php. */
.pktms-subscription-overview__badges {
	display: inline-flex;
	flex-wrap: wrap !important;
	gap: 6px !important;
}

.pktms-subscription-overview__muted {
	display: block;
	margin-top: 2px !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-subscription-overview__seats {
	margin: 16px 0 0 !important;
	padding: 12px 14px !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: var(--pktms-radius) !important;
}

.pktms-subscription-overview__seats-head {
	display: flex;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	gap: 4px 12px !important;
	margin: 0 0 8px !important;
	font-size: 13px !important;
}

.pktms-subscription-overview__seats-label {
	font-weight: 600 !important;
}

.pktms-subscription-overview__seats-head a {
	margin-left: auto !important;
}

.pktms-subscription-overview__seats--warn .pktms-progress__fill {
	background: var(--pktms-warning, #d97706) !important;
}

.pktms-subscription-overview__seats--full .pktms-progress__fill {
	background: var(--pktms-danger) !important;
}

.pktms-subscription-overview .pktms-alert {
	margin: 16px 0 0 !important;
}

.pktms-subscription-overview__actions {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 16px 0 0 !important;
}

.pktms-subscription-overview__actions .pktms-billing-portal {
	display: flex;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: 0 !important;
}

.pktms-subscription-overview__actions .pktms-plan-hint {
	flex-basis: 100% !important;
	margin: 0 !important;
}

.pktms-subscription-overview__note {
	margin: 16px 0 0 !important;
}

/* ── Revenue (T23) — owner dashboard → Revenue (templates/frontend/revenue.php).
   Chart: paid revenue as bars in the brand colour, MRR as an orange line on
   the same money axis; colours checked for colour-blind separation in both themes. */
.pktms-revenue-chart {
	--pktms-chart-line: #eb6834;
}

[data-pktms-theme="dark"] .pktms-revenue-chart {
	--pktms-chart-line: #d95926;
}

.pktms-revenue__mode {
	margin: 0 0 12px !important;
	font-size: 13px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-revenue__figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 16px !important;
	margin: 0 0 12px !important;
}

.pktms-revenue__figures > * {
	min-width: 0;
}

.pktms-revenue__hero .pktms-stat-value {
	font-size: 30px !important;
}

.pktms-revenue__sub {
	display: block;
	margin-top: 4px !important;
	font-size: 12px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-revenue__counts {
	display: flex;
	flex-wrap: wrap !important;
	gap: 8px 18px !important;
	margin: 0 0 16px !important;
	font-size: 13px !important;
	color: var(--pktms-text) !important;
}

.pktms-revenue__count {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
}

.pktms-revenue-chart__legend {
	display: flex;
	flex-wrap: wrap !important;
	gap: 6px 16px !important;
	font-size: 12px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-revenue-chart__legend span {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
}

.pktms-revenue-chart__key {
	display: inline-block;
	width: 12px !important;
	height: 12px !important;
	border-radius: 3px !important;
	background: var(--pktms-primary) !important;
}

.pktms-revenue-chart__key--line {
	height: 2px !important;
	border-radius: 2px !important;
	background: var(--pktms-chart-line) !important;
}

.pktms-revenue-chart__wrap {
	position: relative !important;
}

.pktms-revenue-chart__svg {
	display: block;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
}

.pktms-revenue-chart__grid {
	stroke: var(--pktms-border) !important;
	stroke-width: 1 !important;
}

.pktms-revenue-chart__axis {
	fill: var(--pktms-text-muted) !important;
	font-size: 11px !important;
}

.pktms-revenue-chart__bar {
	fill: var(--pktms-primary) !important;
}

.pktms-revenue-chart__hit {
	fill: transparent !important;
}

.pktms-revenue-chart__month {
	outline: none;
}

.pktms-revenue-chart__month--active .pktms-revenue-chart__hit {
	fill: var(--pktms-primary-light, rgb(37 99 235 / 0.08)) !important;
}

.pktms-revenue-chart__line {
	fill: none !important;
	stroke: var(--pktms-chart-line) !important;
	stroke-width: 2 !important;
	stroke-linejoin: round !important;
	pointer-events: none;
}

.pktms-revenue-chart__dot {
	fill: var(--pktms-chart-line) !important;
	stroke: var(--pktms-surface) !important;
	stroke-width: 2 !important;
	pointer-events: none;
}

.pktms-revenue-chart__tip {
	position: absolute !important;
	top: 0 !important;
	display: flex;
	flex-direction: column !important;
	gap: 2px !important;
	padding: 8px 10px !important;
	border: 1px solid var(--pktms-border) !important;
	border-radius: 8px !important;
	background: var(--pktms-surface) !important;
	box-shadow: var(--pktms-shadow-glass) !important;
	font-size: 12px !important;
	color: var(--pktms-text) !important;
	white-space: nowrap !important;
	pointer-events: none;
}

.pktms-revenue-chart__tip[hidden] {
	display: none;
}

.pktms-revenue-chart__table {
	margin-top: 12px !important;
	font-size: 13px !important;
}

.pktms-revenue-chart__table summary {
	cursor: pointer;
	color: var(--pktms-text-muted) !important;
}

.pktms-revenue__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
	gap: 16px !important;
}

.pktms-revenue__columns > * {
	min-width: 0;
}

.pktms-revenue__tool + .pktms-revenue__tool {
	margin-top: 16px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--pktms-border) !important;
}

.pktms-revenue__dates {
	display: flex;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	gap: 8px 12px !important;
	font-size: 13px !important;
}

.pktms-revenue__dates label {
	display: flex;
	flex-direction: column !important;
	gap: 4px !important;
}

/* Revenue figures: labels wrap rather than cut off (base stat labels don't wrap). */
.pktms-revenue__figures .pktms-stat-label {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	line-height: 1.3 !important;
}

/* Revenue chart on phones: keep labels readable; the chart scrolls inside its card. */
@media (max-width: 640px) {
	.pktms-revenue-chart__wrap {
		overflow-x: auto !important;
	}

	.pktms-revenue-chart__svg {
		min-width: 560px !important;
	}
}

/* ── Single course purchases (T24) — course page Buy card (course-buy.php). */
.pktms-enroll-card__vat {
	display: block;
	margin-top: 2px !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-course-buy {
	margin: 0 0 16px !important;
}

.pktms-course-buy .pktms-alert {
	margin: 0 0 12px !important;
}

.pktms-course-buy__form {
	display: flex;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 0 !important;
}

.pktms-course-buy__form .pktms-form-group {
	margin: 0 !important;
}

.pktms-course-buy__intro {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-course-buy__intro a {
	display: block;
	margin-top: 4px !important;
}

.pktms-course-buy__secure {
	margin: 0 !important;
	font-size: 12px !important;
	text-align: center !important;
}

.pktms-revenue__kind {
	display: block;
	font-size: 11px !important;
	color: var(--pktms-text-muted) !important;
}

/* ── Due dates (T25) — assignments card, learner badges, overdue notice. */
.pktms-course-assign__form {
	display: flex;
	flex-direction: column !important;
	gap: 12px !important;
	margin: 0 0 16px !important;
}

.pktms-course-assign__group {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 13px !important;
}

.pktms-course-assign__group legend {
	width: 100%;
	margin: 0 0 4px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
}

.pktms-course-assign__group label {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	white-space: nowrap !important;
	color: var(--pktms-text) !important;
}

.pktms-course-assign__choice {
	display: flex;
	flex-direction: column !important;
	gap: 4px !important;
	max-width: 420px;
	font-size: 13px !important;
}

.pktms-course-assign__choice[hidden] {
	display: none;
}

.pktms-course-assign__form > .pktms-btn {
	align-self: flex-start !important;
}

.pktms-course-assign__row-form {
	margin: 0 !important;
}

.pktms-course-assign__due,
.pktms-course-due {
	display: block;
	margin-top: 2px !important;
	font-size: 12px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-course-assign__due--soon,
.pktms-course-due--soon {
	color: var(--pktms-warning, #d97706) !important;
	font-weight: 600 !important;
}

.pktms-course-due--overdue {
	color: var(--pktms-danger) !important;
}

.pktms-course-due-badge {
	margin-left: 4px !important;
}

.pktms-overdue-badge {
	margin-left: 6px !important;
	text-decoration: none !important;
}

.pktms-overdue-notice {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px 12px !important;
	margin: 0 0 16px !important;
	padding: 10px 14px !important;
	border: 1px solid var(--pktms-danger) !important;
	border-radius: var(--pktms-radius) !important;
	background: var(--pktms-surface) !important;
	font-size: 13px !important;
	color: var(--pktms-text) !important;
}

.pktms-due-summary {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 0 16px !important;
	font-size: 13px !important;
	color: var(--pktms-text) !important;
}

.pktms-course-learn__due {
	margin: 4px 0 0 !important;
	font-size: 13px !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-course-learn__due--soon {
	color: var(--pktms-warning, #d97706) !important;
	font-weight: 600 !important;
}

.pktms-course-learn__due--overdue {
	color: var(--pktms-danger) !important;
	font-weight: 600 !important;
}

/* ── Mandatory training (T26) ────────────────────────────────────────────── */
.pktms-fe-badge--pending {
	background: var(--pktms-warning-light) !important;
	color: var(--pktms-warning) !important;
}

.pktms-fe-badge--mandatory {
	background: var(--pktms-primary-light, var(--pktms-border-light)) !important;
	color: var(--pktms-primary) !important;
}

.pktms-course-mandatory {
	margin: 20px 0 0 !important;
	padding: 16px 0 0 !important;
	border-top: 1px solid var(--pktms-border-light) !important;
}

.pktms-course-mandatory h3 {
	margin: 0 0 4px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
}

.pktms-course-mandatory__rules {
	margin: 12px 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pktms-course-mandatory__rules li {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px 10px !important;
	margin: 0 0 8px !important;
	font-size: 13px !important;
	color: var(--pktms-text) !important;
}

.pktms-course-mandatory__rules form {
	margin: 0 0 0 auto !important;
}

.pktms-course-mandatory__add {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px 10px !important;
	margin: 12px 0 0 !important;
	font-size: 13px !important;
}

.pktms-course-mandatory__add label {
	font-weight: 600 !important;
	color: var(--pktms-text) !important;
}

.pktms-course-mandatory__add .pktms-select {
	width: auto !important;
	min-width: 0;
	max-width: 100%;
}

.pktms-valid-until {
	display: block;
	font-size: 13px !important;
	white-space: nowrap !important;
	color: var(--pktms-text) !important;
}

.pktms-valid-until--soon {
	color: var(--pktms-warning, #d97706) !important;
	font-weight: 600 !important;
}

.pktms-valid-until--expired {
	color: var(--pktms-danger) !important;
	font-weight: 600 !important;
}

.pktms-compliance-summary {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 0 16px !important;
	font-size: 13px !important;
	color: var(--pktms-text) !important;
}
/* ── Per-person report (T36) — templates/frontend/person-report.php. ───── */
.pktms-person-link {
	color: inherit !important;
	text-decoration: none !important;
}

.pktms-person-link:hover,
.pktms-person-link:focus-visible {
	color: var(--pktms-primary) !important;
	text-decoration: underline !important;
}

.pktms-person-report .pktms-fe-card + .pktms-fe-card,
.pktms-person-report .pktms-bento + .pktms-fe-card,
.pktms-person-report .pktms-fe-card + .pktms-bento {
	margin-top: 20px !important;
}

.pktms-person-report .pktms-fe-actions-row {
	justify-content: space-between !important;
}

.pktms-person-report__name {
	margin: 0 !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
}

.pktms-person-report .pktms-user-cell__sub {
	display: block !important;
}

.pktms-person-report__details {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
	gap: 16px 24px !important;
	margin: 0 !important;
}

.pktms-person-report__details dt {
	margin: 0 0 4px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var(--pktms-text-muted) !important;
}

.pktms-person-report__details dd {
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--pktms-text) !important;
	overflow-wrap: anywhere !important;
}

.pktms-person-report__progress {
	min-width: 140px !important;
}

.pktms-person-report__progress .pktms-progress {
	margin-bottom: 4px !important;
}

.pktms-person-report__list {
	margin: 0 !important;
	padding-left: 18px !important;
	color: var(--pktms-text) !important;
}

.pktms-person-report__list li + li {
	margin-top: 6px !important;
}

@media (max-width: 640px) {
	.pktms-person-report .pktms-fe-card__header {
		flex-wrap: wrap !important;
		gap: 10px !important;
	}
}

@media print {
	body:has(.pktms-person-report) .pktms-company-sidebar,
	body:has(.pktms-person-report) .pktms-company-topbar,
	.pktms-person-report__actions,
	.pktms-person-report__actions-col {
		display: none !important;
	}

	.pktms-person-report .pktms-fe-table-wrap {
		overflow: visible !important;
	}
}

/* ── CSV export buttons (T37). ─────────────────────────────────────────── */
.pktms-csv-export-btn {
	white-space: nowrap !important;
}

/* With the Export button, list toolbars wrap instead of overflowing the card. */
.pktms-students-toolbar {
	flex-wrap: wrap !important;
}

.pktms-fe-card__header:has(.pktms-csv-export-btn) {
	flex-wrap: wrap !important;
	gap: 12px !important;
}

.pktms-report-exports {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}
/* ── Your data / Privacy requests (T40). ──────────────────────────────── */
#pktms-my-data,
#pktms-privacy-requests {
	margin-top: 20px !important;
}

.pktms-my-data__actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-top: 12px !important;
}

.pktms-my-data__actions form {
	margin: 0 !important;
}

.pktms-privacy-form {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	gap: 12px !important;
	margin: 12px 0 16px !important;
}

.pktms-privacy-form .pktms-form-group {
	flex: 1 1 200px !important;
	margin: 0 !important;
}

.pktms-privacy-links {
	margin: 12px 0 0 !important;
	font-size: 13px !important;
}
/* ── Activity log page (T41). ─────────────────────────────────────────── */
.pktms-activity-log__date {
	width: auto !important;
	min-width: 140px !important;
}

.pktms-activity-log__time {
	white-space: nowrap !important;
}

.pktms-activity-log__settings {
	margin-top: 20px !important;
}

.pktms-activity-log__retention {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	align-items: center !important;
	margin: 0 0 12px !important;
}