/* ==========================================================================
   M4 LMS — Front-end Portal Styles
   Theme-agnostic: works with Elementor, Beaver Builder, or any theme.
   All classes are prefixed with .lms- to avoid conflicts.

   Brand: warm cream / charcoal ink / coral accent, matching m4europe.com.
   Ink drives primary actions; coral is reserved for progress/energy/status —
   the same split the marketing site uses between its dark CTAs and "Give".
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800&family=Roboto:wght@400;500;600;700&display=swap');

:root {
  /* -- admin-configurable (Style tab / ACF options) — keep these names -- */
  --lms-primary:       #fe5e41;
  --lms-primary-dark:  #e1492f;
  --lms-primary-light: #fdeae4;
  --lms-hero-start:    #1e3a8a; /* no longer rendered — kept so saved Style-tab values don't error */
  --lms-hero-mid:      #1d4ed8;
  --lms-hero-end:      #3b82f6;
  --lms-success:       #2f8f5b;
  --lms-success-light: #e6f3ea;
  --lms-warning:       #bd7a1e;
  --lms-warning-bg:    #faf0dd;
  --lms-warning-border:#f0dfb8;
  --lms-nav-bg:        #1e3a8a; /* no longer rendered — see above */
  --lms-notif-high:    #cf4a3c;
  --lms-notif-medium:  #bd7a1e;
  --lms-notif-low:     #7fa2dd;
  --lms-font-body:     'Roboto', 'Segoe UI', system-ui, sans-serif;
  --lms-font-heading:  'Inter', 'Segoe UI', system-ui, sans-serif;
  --lms-font-size-base:16px;
  --lms-radius-card:   16px;
  --lms-radius-btn:    10px;

  /* -- fixed neutrals + effects (not exposed in the Style tab yet) -- */
  --lms-bg:            #f3f1e8;
  --lms-surface:       #fffdf8;
  --lms-surface-2:     #eae6d8;
  --lms-border:        #e0dbc9;
  --lms-border-strong: #cdc6ac;
  --lms-text:          #2b2b2a;
  --lms-text-2:        #5c5a52;
  --lms-text-3:        #8a8677;
  --lms-ink:           #2b2b2a;
  --lms-ink-hover:     #181816;
  --lms-ink-contrast:  #fdfcf7;
  --lms-accent-soft:   #fdeae4;
  --lms-shadow-sm:     0 1px 2px rgba(40,32,16,.06);
  --lms-shadow-md:     0 6px 20px rgba(40,32,16,.08), 0 1px 3px rgba(40,32,16,.06);
  --lms-shadow-lg:     0 18px 40px rgba(40,32,16,.13);
  --lms-ease:          cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-lms-theme="light"]) {
    --lms-bg:            #1c1a16;
    --lms-surface:       #252220;
    --lms-surface-2:     #2d2a25;
    --lms-border:        #3b362e;
    --lms-border-strong: #4c4638;
    --lms-text:          #f3f1e8;
    --lms-text-2:        #c7c2b2;
    --lms-text-3:        #928c78;
    --lms-ink:           #f3f1e8;
    --lms-ink-hover:     #ffffff;
    --lms-ink-contrast:  #1c1a16;
    --lms-primary:       #ff7a5c;
    --lms-primary-dark:  #fe5e41;
    --lms-accent-soft:   rgba(255,122,92,.16);
    --lms-shadow-sm:     0 1px 2px rgba(0,0,0,.3);
    --lms-shadow-md:     0 6px 20px rgba(0,0,0,.35);
    --lms-shadow-lg:     0 18px 44px rgba(0,0,0,.45);
  }
}

/* Apply custom font + size to all portal elements */
.lms-portal, .lms-nav, .lms-notif-banner, .lms-hero, .lms-notif-dropdown {
  font-family: var(--lms-font-body);
  font-size:   var(--lms-font-size-base);
}
.lms-portal h2, .lms-portal h3, .lms-portal h4,
.lms-hero__title, .lms-section__title, .lms-training-panel__title {
  font-family: var(--lms-font-heading, var(--lms-font-body));
}
/* Apply radius vars */
.lms-stat-card, .lms-team-card,
.lms-notif-card, .lms-notif-compose, .lms-notif-banner__body,
.lms-hero, .lms-section, .lms-training-panel, .lms-progress-row,
.lms-key-dates, .lms-kt-card { border-radius: var(--lms-radius-card); }
.lms-btn { border-radius: var(--lms-radius-btn); }
/* Apply priority colours via CSS vars */
.lms-priority--high   { color: var(--lms-notif-high);   border-color: var(--lms-notif-high); }
.lms-priority--medium { color: var(--lms-notif-medium); border-color: var(--lms-notif-medium); }
.lms-priority--low    { color: var(--lms-notif-low);    border-color: var(--lms-notif-low); }
.lms-notif-banner__item--high   .lms-notif-banner__accent { background: var(--lms-notif-high); }
.lms-notif-banner__item--medium .lms-notif-banner__accent { background: var(--lms-notif-medium); }
.lms-notif-banner__item--low    .lms-notif-banner__accent { background: var(--lms-notif-low); }
.lms-notif-card--high   { border-left-color: var(--lms-notif-high); }
.lms-notif-card--medium { border-left-color: var(--lms-notif-medium); }
.lms-notif-card--low    { border-left-color: var(--lms-notif-low); }

/* This stylesheet is only enqueued on portal pages (see is_portal_page() in
   enqueue_assets()), so painting body here is scoped to those pages, not
   the whole site. Without it, .lms-nav/.lms-notif-banner/.lms-portal each
   paint their own cream box, but the theme's white page shows through the
   margins between them — a striped cream/white/cream look instead of one
   continuous backdrop the cards float on, which is what the design needs. */
body {
	background: var(--lms-bg) !important;
}

/* ── Reset helpers ──────────────────────────────────────────────────────── */
.lms-portal *,
.lms-portal *::before,
.lms-portal *::after {
	box-sizing: border-box;
}

/* .lms-nav and .lms-notif-banner are rendered by a separate shortcode
   ([lms_portal_nav]) and sit as siblings of .lms-portal on the page, not
   inside it — this plugin explicitly targets "any theme or Elementor"
   (see file header), and several of those set a global underlined-link
   default that ties with a plain single-class rule on load order. Force
   it off everywhere the portal renders links; nothing in this design
   wants an underlined link. */
.lms-nav a, .lms-notif-banner a, .lms-portal a {
	text-decoration: none !important;
}

/* ── Wrapper ────────────────────────────────────────────────────────────── */
/* .lms-nav, .lms-notif-banner and .lms-notice are separate top-level
   elements (see the comment above — no shared wrapper div exists in the
   PHP), so each needs its own matching max-width/centering/padding here or
   they render edge-to-edge / misaligned with .lms-portal below them. This
   is the app-shell width the approved mockup used throughout.

   NOTE: an earlier version of this rule tried a `100vw` + negative-margin
   breakout to escape the page template's own content-column width. That
   trick assumes the immediate parent is symmetrically centered in the
   viewport, and on this site's actual markup it wasn't — it overflowed off
   the right edge instead. Reverted to plain max-width + auto margins, which
   centers correctly but is capped by whatever column width the page
   template provides. To actually reach 1200px, switch the Dashboard (and
   other portal) pages to a full-width page template in WordPress — Page
   Attributes → Template in the block editor, or the page's Elementor
   settings → Layout → Content Width, if it's built with Elementor. */
.lms-nav, .lms-notif-banner, .lms-notice, .lms-portal {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	box-sizing: border-box;
}
.lms-portal {
	font-family: inherit;
	color: var(--lms-text);
	line-height: 1.55;
	background: var(--lms-bg);
	padding-bottom: 4rem;
}

/* ── Page intro (greeting line above My Training) ───────────────────────── */
.lms-hero__greeting {
	font-size: .85rem;
	color: var(--lms-text-3);
	margin: 0 0 1.25rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}
.lms-hero__greeting strong { color: var(--lms-text-2); font-weight: 600; }

/* Compound selector, not just .lms-badge--hero: the pre-existing
   .lms-badge--role rule further down (purple, unrelated to this redesign)
   has equal specificity and comes later in the file, so it would otherwise
   win the cascade and repaint this badge purple regardless of what's set here. */
.lms-hero__greeting .lms-badge--hero {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--lms-surface-2);
	color: var(--lms-text-2);
	border: none;
	padding: 3px 9px;
	border-radius: 999px;
}

/* ── My Training panel (merged resume hero + course list) ───────────────── */
.lms-hero {
	background: var(--lms-surface);
	box-shadow: var(--lms-shadow-md);
	padding: 2rem;
	margin-bottom: 2.5rem;
}

.lms-hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
}

.lms-hero__text {
	flex: 1;
	min-width: 0;
}

.lms-hero__title {
	font-size: 1.7rem;
	font-weight: 800;
	margin: 0 0 .3rem;
	color: var(--lms-text);
	line-height: 1.2;
	letter-spacing: -.01em;
}

.lms-hero__course {
	font-size: 1rem;
	color: var(--lms-text-2);
	margin: 0 0 .3rem;
	font-weight: 600;
}

.lms-hero__position {
	font-size: .85rem;
	color: var(--lms-text-3);
	margin: 0 0 1.25rem;
}

.lms-hero__cta {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}

.lms-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--lms-ink);
	color: var(--lms-ink-contrast);
	font-weight: 700;
	font-size: .92rem;
	padding: .78rem 1.4rem;
	border-radius: var(--lms-radius-btn);
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s var(--lms-ease), transform .15s var(--lms-ease);
}

.lms-hero__btn:hover {
	background: var(--lms-ink-hover);
	color: var(--lms-ink-contrast);
	transform: translateY(-1px);
}

.lms-hero__btn--ghost {
	background: var(--lms-surface-2);
	color: var(--lms-text);
	border: none;
}

.lms-hero__btn--ghost:hover {
	background: var(--lms-border);
	color: var(--lms-text);
}

.lms-hero__chapters {
	font-size: .82rem;
	color: var(--lms-text-3);
	font-weight: 600;
	white-space: nowrap;
}

/* Progress ring — replaces the old horizontal hero bar */
.lms-ring {
	position: relative;
	width: 84px;
	height: 84px;
	flex-shrink: 0;
}
.lms-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lms-ring circle { fill: none; stroke-width: 7; }
.lms-ring circle.lms-ring__track { stroke: var(--lms-surface-2); }
.lms-ring circle.lms-ring__fill {
	stroke: var(--lms-primary);
	stroke-linecap: round;
	transition: stroke-dashoffset 1s var(--lms-ease);
}
.lms-ring__value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lms-font-heading, var(--lms-font-body));
	font-weight: 800;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	color: var(--lms-text);
}
.lms-ring--sm { width: 56px; height: 56px; }
.lms-ring--sm circle { stroke-width: 5; }
.lms-ring--sm .lms-ring__value { font-size: .8rem; }

/* Additional in-progress/not-started courses, listed as plain rows below the
   featured one — replaces the old separate "Continue Learning" card grid so
   the same course is never shown twice on the dashboard. */
.lms-training-list { margin-top: .5rem; }
.lms-training-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
	border-top: 1px solid var(--lms-border);
}
.lms-training-row__title { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; color: var(--lms-text); }
.lms-training-row__bar { width: 110px; height: 5px; border-radius: 99px; background: var(--lms-surface-2); overflow: hidden; flex-shrink: 0; }
.lms-training-row__bar span { display: block; height: 100%; border-radius: 99px; background: var(--lms-text-3); }
.lms-training-row__bar--done span { background: var(--lms-success); }
.lms-training-row__action { font-size: .85rem; font-weight: 700; color: var(--lms-primary-dark); flex-shrink: 0; text-decoration: none; }

/* Standalone rows used by My Progress (richer meta: status pill, last active) */
.lms-progress-row {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	background: var(--lms-surface);
	border-radius: var(--lms-radius-card);
	box-shadow: var(--lms-shadow-sm);
	padding: 1.25rem 1.5rem;
	margin-bottom: .75rem;
}
.lms-progress-row__body { flex: 1; min-width: 0; }
.lms-progress-row__title { font-weight: 700; font-size: .95rem; color: var(--lms-text); display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.lms-progress-row__meta { font-size: .82rem; color: var(--lms-text-3); margin-top: 2px; }

.lms-status-pill {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .7rem; font-weight: 700;
	padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.lms-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.lms-status-pill--progress { background: var(--lms-accent-soft); color: var(--lms-primary-dark); }
.lms-status-pill--progress::before { background: var(--lms-primary); }
.lms-status-pill--done { background: var(--lms-success-light); color: var(--lms-success); }
.lms-status-pill--done::before { background: var(--lms-success); }

@media (max-width: 640px) {
	.lms-hero {
		padding: 1.5rem;
	}

	.lms-hero__inner {
		flex-direction: column-reverse;
		align-items: flex-start;
	}

	.lms-hero__cta {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.lms-hero__btn {
		width: 100%;
		justify-content: center;
	}

	.lms-progress-row { flex-wrap: wrap; }
	.lms-progress-row .lms-hero__btn { width: 100%; order: 1; }
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.lms-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--lms-bg) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--lms-border);
	margin-bottom: 1.5rem;
	/* top/bottom only — left/right padding comes from the shared
	   max-width/padding rule above so nav lines up with .lms-portal */
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.lms-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lms-nav__link {
	display: block;
	padding: .5rem 1rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--lms-text-2);
	text-decoration: none;
	border-radius: 999px;
	transition: color .15s var(--lms-ease), background .15s var(--lms-ease);
}

.lms-nav__link:hover {
	color: var(--lms-text);
	background: var(--lms-surface-2);
}

.lms-nav__item--active .lms-nav__link {
	color: var(--lms-ink-contrast);
	background: var(--lms-ink);
}
.lms-nav__item--active .lms-nav__link:hover {
	color: var(--lms-ink-contrast);
	background: var(--lms-ink);
}

.lms-nav__item--logout {
	margin-left: 0;
}

.lms-nav__link--logout {
	color: var(--lms-text-3);
}

.lms-nav__link--logout:hover {
	color: var(--lms-text);
	background: transparent;
}

/* ── Notices ────────────────────────────────────────────────────────────── */
.lms-notice {
	/* top/bottom only — see .lms-nav above */
	padding-top: .85rem;
	padding-bottom: .85rem;
	border-radius: 6px;
	margin-bottom: 1.25rem;
	font-size: .9rem;
}

.lms-notice--error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

.lms-notice--success {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
}

/* ── Page header ────────────────────────────────────────────────────────── */
.lms-portal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.lms-portal-header__title {
	margin: 0 0 .3rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: #111827;
}

.lms-portal-page-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1.5rem;
}

.lms-portal-page-header h2 {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	color: #111827;
	flex: 1;
}

/* ── Back link ──────────────────────────────────────────────────────────── */
.lms-back {
	font-size: .85rem;
	color: #6b7280;
	text-decoration: none;
	white-space: nowrap;
}

.lms-back:hover {
	color: var(--lms-primary);
}

/* ── Stat cards row ─────────────────────────────────────────────────────── */
.lms-stat-row--wrap .lms-stat-card {
	flex: 1 1 140px;
}

.lms-board-filters {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

.lms-board-country-filter {
	margin-left: auto;
}

.lms-select--sm {
	padding: .35rem .65rem;
	font-size: .85rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: #374151;
	min-width: 160px;
}

/* Lightened, borderless treatment: a plain row with hairline dividers
   between items rather than a grid of boxed tiles — reads as "reference
   data", visually distinct from the actionable panels above it. */
.lms-stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0;
	row-gap: 1rem;
	background: none;
	border: none;
	margin-bottom: 1.75rem;
}
.lms-stat-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	background: none;
	border: none;
	border-left: 1px solid var(--lms-border);
	border-radius: 0;
	padding: 0 1.5rem;
	min-width: 120px;
	text-decoration: none;
	color: inherit;
	transition: opacity .15s var(--lms-ease);
}
.lms-stat-row .lms-stat-card:first-child {
	border-left: none;
	padding-left: 0;
}

a.lms-stat-card:hover {
	opacity: .7;
	box-shadow: none;
}

.lms-stat-card__value {
	font-family: var(--lms-font-heading, var(--lms-font-body));
	font-size: 1.7rem;
	font-weight: 800;
	color: var(--lms-text);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.lms-stat-card__label {
	font-size: .8rem;
	color: var(--lms-text-3);
	font-weight: 600;
	margin-top: .1rem;
}

/* ── Summary cards (reports) ────────────────────────────────────────────── */
.lms-summary-cards {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: .5rem;
}

.lms-summary-card {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: .6rem 1rem;
	min-width: 100px;
}

.lms-summary-card__value {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
}

.lms-summary-card__label {
	font-size: .75rem;
	color: #6b7280;
	margin-top: .15rem;
}

/* ── Teams grid ─────────────────────────────────────────────────────────── */
.lms-teams-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
}

.lms-team-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	transition: box-shadow .15s;
}

.lms-team-card:hover {
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

.lms-team-card__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.lms-team-card__name a {
	color: #111827;
	text-decoration: none;
}

.lms-team-card__name a:hover {
	color: var(--lms-primary);
}

.lms-team-card__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	font-size: .85rem;
	color: #4b5563;
	flex: 1;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.lms-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.lms-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
}

.lms-table th {
	background: #f9fafb;
	color: #374151;
	font-weight: 600;
	text-align: left;
	padding: .65rem .85rem;
	border-bottom: 2px solid #e5e7eb;
	white-space: nowrap;
}

.lms-table td {
	padding: .65rem .85rem;
	border-bottom: 1px solid #f3f4f6;
	vertical-align: middle;
}

.lms-table tbody tr:hover td {
	background: #fafafa;
}

.lms-table tbody tr:last-child td {
	border-bottom: 2px solid #e5e7eb;
}

/* ── Detail meta strip ──────────────────────────────────────────────────── */
.lms-detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	font-size: .88rem;
	margin-bottom: 1.5rem;
}

.lms-detail-meta__item {
	color: #374151;
}

.lms-detail-meta__item a {
	color: var(--lms-primary);
	text-decoration: none;
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.lms-section__title {
	font-size: 1.05rem;
	font-weight: 600;
	color: #111827;
	margin: 0 0 .75rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid #e5e7eb;
}

/* ── Tab nav (reports) ──────────────────────────────────────────────────── */
.lms-tab-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 2px solid #e5e7eb;
	margin-bottom: 1.5rem;
}

.lms-tab-nav__link {
	display: block;
	padding: .65rem 1.1rem;
	font-size: .9rem;
	font-weight: 500;
	color: #6b7280;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color .15s, border-color .15s;
}

.lms-tab-nav__link:hover {
	color: var(--lms-primary);
}

.lms-tab-nav__link--active {
	color: var(--lms-primary);
	border-bottom-color: var(--lms-primary);
	font-weight: 600;
}

.lms-find-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin: -.5rem 0 1.25rem;
}

.lms-shell .lms-find-bar input[type="search"],
.lms-shell .lms-find-bar select {
	margin: 0;
	padding: 8px 12px;
	font: inherit;
	font-size: 13.5px;
	color: var(--lms-text);
	background: var(--lms-surface);
	border: 1px solid var(--lms-border);
	border-radius: var(--lms-square);
	box-shadow: none;
}

.lms-shell .lms-find-bar input[type="search"] {
	flex: 1 1 220px;
	max-width: 340px;
}

.lms-find-bar__clear {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lms-primary);
}

.lms-chips--roles { margin: 0 0 1.25rem; }

.lms-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: 1rem;
	font-size: 13px;
	color: var(--lms-text-3);
}

.lms-pager > span { margin-right: auto; }

.lms-tab-nav__count {
	margin-left: .35rem;
	font-size: .78rem;
	font-weight: 600;
	color: #9ca3af;
	font-variant-numeric: tabular-nums;
}

.lms-tab-nav__link--active .lms-tab-nav__count {
	color: var(--lms-primary);
}

/* ── Filter form ────────────────────────────────────────────────────────── */
.lms-filter-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1.5rem;
}

.lms-filter-form select {
	min-width: 220px;
	padding: .45rem .65rem;
	border: 1px solid #d1d5db;
	border-radius: 5px;
	font-size: .9rem;
	color: #374151;
	background: #fff;
}

.lms-filter-form label {
	font-size: .9rem;
	color: #374151;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.lms-badge {
	display: inline-block;
	padding: .2em .65em;
	border-radius: 20px;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.4;
}

.lms-badge--role {
	background: #ede9fe;
	color: #5b21b6;
}

.lms-badge--upcoming {
	background: #fef9c3;
	color: #713f12;
}

.lms-badge--active {
	background: var(--lms-success-light);
	color: #166534;
}

.lms-badge--completed {
	background: #dbeafe;
	color: var(--lms-primary-dark);
}

.lms-badge--archived {
	background: #f3f4f6;
	color: #6b7280;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.lms-btn {
	display: inline-block;
	padding: .5rem 1rem;
	border-radius: 6px;
	font-size: .88rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: background .15s, box-shadow .15s;
	line-height: 1.4;
}

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

.lms-btn--primary:hover {
	background: var(--lms-primary-dark);
	color: #fff;
}

.lms-btn--secondary {
	background: #f3f4f6;
	color: #374151;
	border: 1px solid #d1d5db;
}

.lms-btn--secondary:hover {
	background: #e5e7eb;
	color: #111827;
}

.lms-btn--small {
	padding: .35rem .75rem;
	font-size: .8rem;
	background: #f3f4f6;
	color: #374151;
	border: 1px solid #d1d5db;
}

.lms-btn--small:hover {
	background: #e5e7eb;
	color: #111827;
}

.lms-btn--sm {
	padding: .25rem .6rem;
	font-size: .75rem;
}

.lms-btn--danger {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}

.lms-btn--danger:hover {
	background: #fecaca;
	color: #991b1b;
}

.lms-btn--danger:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* ── Progress bar (standalone) ──────────────────────────────────────────── */
.lms-progress-bar {
	flex: 1;
	height: 8px;
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	min-width: 80px;
}

.lms-progress-bar__fill {
	height: 100%;
	border-radius: 4px;
	background: var(--lms-primary);
	transition: width .4s ease;
}

.lms-progress-bar__label {
	font-size: .8rem;
	font-weight: 600;
	color: #374151;
	white-space: nowrap;
}

/* Coach team progress row */
.lms-coach-progress {
	display: flex;
	align-items: center;
	gap: .6rem;
}

/* ── Alert strip ────────────────────────────────────────────────────────── */
.lms-alert {
	padding: .65rem .9rem;
	border-radius: 6px;
	font-size: .85rem;
	line-height: 1.4;
}

.lms-alert--info {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: var(--lms-primary-dark);
}

.lms-alert--warning {
	background: var(--lms-warning-bg);
	border: 1px solid var(--lms-warning-border);
	color: #92400e;
}

/* Ghost button (completed courses) */
.lms-btn--ghost {
	background: transparent;
	color: #6b7280;
	border: 1px solid #d1d5db;
}

.lms-btn--ghost:hover {
	background: #f3f4f6;
	color: #374151;
}

/* ── Misc ───────────────────────────────────────────────────────────────── */
.lms-empty {
	color: #9ca3af;
	font-style: italic;
	padding: 1.5rem 0;
}

.lms-text-muted {
	font-size: .82rem;
	color: #6b7280;
}

/* ── Progress bar (reuse admin style) ───────────────────────────────────── */
.lms-portal .lms-progress-bar {
	height: 8px;
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	min-width: 100px;
}

.lms-portal .lms-progress-bar__fill {
	height: 100%;
	border-radius: 4px;
	background: var(--lms-primary);
	transition: width .3s;
}

/* ── Discreet filter bar ────────────────────────────────────────────────── */
.lms-filter-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .25rem .5rem;
	padding: .35rem 0 1rem;
	margin-bottom: .25rem;
	border-bottom: 1px solid #f3f4f6;
}

.lms-filter-bar__group {
	display: flex;
	align-items: center;
	gap: .05rem;
	position: relative;
}

.lms-filter-bar__item {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .5rem;
	font-size: .75rem;
	color: #9ca3af;
	text-decoration: none;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 4px;
	transition: color .12s;
	white-space: nowrap;
	line-height: 1.4;
}

.lms-filter-bar__item:hover {
	color: #374151;
}

.lms-filter-bar__item--active {
	color: #111827;
	font-weight: 600;
}

.lms-filter-bar__dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lms-success);
	flex-shrink: 0;
}

.lms-filter-bar__sep {
	display: inline-block;
	width: 1px;
	height: 12px;
	background: #e5e7eb;
	margin: 0 .3rem;
	flex-shrink: 0;
}

.lms-filter-bar__actions {
	margin-left: auto;
}

.lms-filter-bar__export {
	font-size: .72rem;
	color: #c4c9d4;
	background: none;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	cursor: pointer;
	padding: .2rem .55rem;
	transition: color .12s, border-color .12s;
	letter-spacing: .02em;
}

.lms-filter-bar__export:hover {
	color: #374151;
	border-color: #9ca3af;
}

.lms-filter-bar__range-label {
	font-size: .68rem;
	color: #6b7280;
	font-weight: 400;
	margin-left: .15rem;
}

.lms-filter-bar__custom-picker {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: .75rem 1rem;
	z-index: 100;
	box-shadow: 0 4px 16px rgba(0,0,0,.1);
	min-width: 280px;
}

.lms-filter-bar__custom-picker--open {
	display: block;
}

.lms-filter-bar__date-input {
	padding: .28rem .5rem;
	font-size: .78rem;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	color: #374151;
}

.lms-filter-bar__apply {
	padding: .28rem .65rem;
	font-size: .76rem;
	background: var(--lms-primary);
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
}

.lms-filter-bar__apply:hover {
	background: var(--lms-primary-dark);
}

/* ── Act As preview notice strip ───────────────────────────────────────── */
.lms-act-as-notice {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 8px;
	padding: .6rem 1rem;
	font-size: .85rem;
	color: #713f12;
	margin-bottom: 1.25rem;
}

.lms-act-as-notice strong {
	font-weight: 700;
}

.lms-act-as-notice__exit {
	color: #92400e;
	font-weight: 600;
	text-decoration: underline;
}

.lms-act-as-notice__exit:hover {
	color: #451a03;
}

/* Admin bar active state */
#wp-admin-bar-lms-act-as.lms-act-as--active > .ab-item {
	background: #fde047 !important;
	color: #713f12 !important;
}

#wp-admin-bar-lms-act-as-exit > .ab-item {
	color: #ef4444 !important;
}

#wp-admin-bar-lms-act-as-exit > .ab-item:hover {
	background: #fee2e2 !important;
}

/* ── Progress bar variants ──────────────────────────────────────────────── */
.lms-progress-bar--done .lms-progress-bar__fill {
	background: var(--lms-success);
}

.lms-progress-bar--idle .lms-progress-bar__fill {
	background: var(--lms-warning);
}

/* ── Stat card warning variant ──────────────────────────────────────────── */
.lms-stat-card--warning {
	border-left-color: var(--lms-warning);
}

.lms-stat-card--warning .lms-stat-card__value {
	color: var(--lms-warning);
}

/* ── Badge variants ─────────────────────────────────────────────────────── */
.lms-badge--idle {
	background: #fef3c7;
	color: #92400e;
	font-size: .7rem;
}

/* ── Key Dates (Student dashboard, replaces Achievements) ────────────────── */
.lms-key-dates {
	background: var(--lms-surface);
	box-shadow: var(--lms-shadow-md);
	padding: 2rem;
	margin-bottom: 2.5rem;
}
.lms-key-dates__empty {
	color: var(--lms-text-3);
	font-size: .9rem;
	line-height: 1.6;
	margin: 0;
	max-width: 52ch;
}
.lms-date-row {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1rem 0;
	border-top: 1px solid var(--lms-border);
}
.lms-date-row:first-child { border-top: none; padding-top: 0; }
.lms-date-row__badge {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: var(--lms-surface-2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.lms-date-row__day {
	font-family: var(--lms-font-heading, var(--lms-font-body));
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.1;
	color: var(--lms-text);
}
.lms-date-row__month {
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--lms-text-3);
	letter-spacing: .03em;
}
.lms-date-row__body { flex: 1; min-width: 0; }
.lms-date-row__title { font-weight: 700; font-size: .9rem; color: var(--lms-text); }
.lms-date-row__meta { font-size: .8rem; color: var(--lms-text-3); margin-top: 2px; }
.lms-date-row__countdown { font-size: .82rem; font-weight: 700; color: var(--lms-primary-dark); white-space: nowrap; flex-shrink: 0; }

/* ── Keep Training (Student dashboard: inline next-chapter card) ──────────── */
.lms-kt-card {
	background: var(--lms-surface);
	box-shadow: var(--lms-shadow-md);
	padding: 2rem;
	margin-bottom: 2.5rem;
}
.lms-kt-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--lms-border);
}
.lms-kt-course { font-size: .85rem; color: var(--lms-text-3); font-weight: 600; margin-top: 2px; }
.lms-kt-ring { width: 44px; height: 44px; }
.lms-kt-ring .lms-ring__value { font-size: .62rem; }

.lms-kt-body { transition: opacity .18s var(--lms-ease), transform .18s var(--lms-ease); }
.lms-kt-body.lms-kt-fade { opacity: 0; transform: translateY(4px); }

.lms-kt-badge {
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--lms-primary-dark);
	background: var(--lms-accent-soft);
	padding: 3px 9px;
	border-radius: 999px;
	margin-bottom: 1rem;
}
.lms-kt-badge--muted { color: var(--lms-text-3); background: var(--lms-surface-2); }
.lms-kt-badge--locked { color: var(--lms-warning); background: var(--lms-warning-bg); }

.lms-kt-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 1rem; letter-spacing: -.01em; color: var(--lms-text); }
.lms-kt-content { font-size: .95rem; line-height: 1.7; color: var(--lms-text-2); max-width: 62ch; }
.lms-kt-content p { margin: 0 0 1rem; }
.lms-kt-content p:last-child { margin-bottom: 0; }
/* Content-block partials (text/callout/image/download) render inside with
   their own .lms-block classes from lms-frontend.css — scope a few of the
   most common ones to the card's reading width/type so they don't look
   like a foreign page inside the dashboard. */
.lms-kt-content .lms-block { margin-bottom: 1rem; }
.lms-kt-content .lms-block:last-child { margin-bottom: 0; }

.lms-kt-video__frame {
	position: relative;
	max-width: 420px;
	aspect-ratio: 16/9;
	border-radius: var(--lms-radius-btn);
	background: var(--lms-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: .75rem;
}
.lms-kt-video__caption { font-size: .8rem; color: var(--lms-text-3); margin: 0 0 1.5rem; }

.lms-kt-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.5rem; }
.lms-kt-secondary-link { font-size: .85rem; font-weight: 600; color: var(--lms-text-3); text-decoration: none; transition: color .15s var(--lms-ease); }
.lms-kt-secondary-link:hover { color: var(--lms-text); }

@media (max-width: 640px) {
	.lms-kt-card { padding: 1.5rem; }
	.lms-kt-actions .lms-hero__btn { width: 100%; justify-content: center; }
}

/* ── Team Pulse leaderboard (student) ───────────────────────────────────── */
.lms-team-pulse__course {
	margin-left: .25rem;
	font-weight: 400;
}

.lms-member-list {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-top: .5rem;
}

.lms-member-list__item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .55rem .75rem;
	border-radius: 8px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	transition: box-shadow .15s;
}

.lms-member-list__item:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.lms-member-list__item--me {
	background: #eff6ff;
	border-color: #bfdbfe;
}

.lms-member-list__rank {
	font-size: .9rem;
	font-weight: 700;
	color: #6b7280;
	min-width: 1.6rem;
	text-align: center;
}

.lms-member-list__avatar {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
}

.lms-member-list__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lms-member-list__name {
	flex: 0 0 auto;
	min-width: 100px;
	max-width: 160px;
	font-size: .88rem;
	font-weight: 600;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lms-member-list__bar {
	flex: 1;
	min-width: 80px;
}

.lms-member-list__pct {
	font-size: .8rem;
	font-weight: 700;
	color: #374151;
	white-space: nowrap;
	min-width: 2.5rem;
	text-align: right;
}

/* ── Team Leader panel ──────────────────────────────────────────────────── */
.lms-section--team-leader {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.lms-tl-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.lms-tl-header__title {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: .2rem;
}

.lms-tl-header__cycle {
	font-size: .82rem;
	display: block;
}

/* ── Cycle timeline bar ─────────────────────────────────────────────────── */
.lms-cycle-timeline {
	margin: .25rem 0 1.5rem;
}

.lms-cycle-timeline__bar {
	position: relative;
	height: 10px;
	background: #e5e7eb;
	border-radius: 6px;
	overflow: visible;
	margin-bottom: .4rem;
}

.lms-cycle-timeline__fill {
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--lms-primary), #60a5fa);
	transition: width .4s ease;
}

.lms-cycle-timeline__team-marker {
	position: absolute;
	top: -4px;
	transform: translateX(-50%);
	width: 18px;
	height: 18px;
	background: #fff;
	border: 2.5px solid var(--lms-primary);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(29,78,216,.25);
	cursor: default;
}

.lms-cycle-timeline__team-label {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--lms-primary);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	padding: .1em .4em;
	border-radius: 3px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s;
}

.lms-cycle-timeline__team-marker:hover .lms-cycle-timeline__team-label {
	opacity: 1;
}

.lms-cycle-timeline__labels {
	display: flex;
	justify-content: space-between;
	font-size: .75rem;
	color: #9ca3af;
}

.lms-cycle-timeline__remaining {
	font-size: .75rem;
	font-weight: 600;
	color: #374151;
}

/* ── Nudge strip ────────────────────────────────────────────────────────── */
.lms-tl-nudge {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
	background: var(--lms-warning-bg);
	border: 1px solid var(--lms-warning-border);
	border-radius: 8px;
	padding: .65rem 1rem;
	margin-bottom: 1.25rem;
	font-size: .85rem;
}

.lms-tl-nudge__text {
	flex: 1;
	color: #92400e;
}

/* ── Member roster ──────────────────────────────────────────────────────── */
.lms-tl-roster__heading {
	font-size: .88rem;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0 0 .65rem;
}

.lms-tl-roster {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}

.lms-tl-member {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .6rem .85rem;
	border-radius: 8px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	transition: box-shadow .12s;
}

.lms-tl-member:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.lms-tl-member--idle {
	background: var(--lms-warning-bg);
	border-color: var(--lms-warning-border);
}

.lms-tl-member--done {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.lms-tl-member__avatar {
	position: relative;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
}

.lms-tl-member__check {
	position: absolute;
	bottom: -2px;
	right: -4px;
	background: var(--lms-success);
	color: #fff;
	font-size: .55rem;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	border: 1.5px solid #fff;
}

.lms-tl-member__info {
	flex: 0 0 auto;
	min-width: 110px;
	max-width: 180px;
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.lms-tl-member__name {
	font-size: .88rem;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lms-tl-member__position {
	font-size: .75rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lms-tl-member__progress {
	flex: 1;
	display: flex;
	align-items: center;
	gap: .5rem;
	min-width: 0;
}

.lms-tl-member__bar {
	flex: 1;
	min-width: 60px;
}

.lms-tl-member__pct {
	font-size: .8rem;
	font-weight: 700;
	color: #374151;
	white-space: nowrap;
	min-width: 2.5rem;
	text-align: right;
}

.lms-tl-member__status {
	flex-shrink: 0;
	min-width: 60px;
	text-align: right;
}

/* Responsive adjustments */
@media (max-width: 640px) {
	.lms-member-list__name {
		max-width: 100px;
	}

	.lms-tl-member__info {
		max-width: 100px;
	}

	.lms-tl-member__status {
		display: none;
	}

	.lms-date-row {
		flex-wrap: wrap;
	}
}

/* ── Print: hide nudge/email button, keep roster ────────────────────────── */
.lms-print-hide { /* also applied inline to specific buttons */ }

/* ── Print / Export PDF ─────────────────────────────────────────────────── */
@media print {
	.lms-nav,
	.lms-filter-bar__actions,
	.lms-filter-bar__custom-picker,
	.lms-hero__cta,
	.lms-back,
	.lms-btn,
	.lms-team-card .lms-btn--small,
	.lms-tl-nudge,
	.lms-print-hide { display: none !important; }

	.lms-hero {
		background: var(--lms-primary) !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		border-radius: 0;
		page-break-inside: avoid;
	}

	.lms-stat-card   { page-break-inside: avoid; }
	.lms-table       { page-break-inside: auto; font-size: 9pt; }
	.lms-table tr    { page-break-inside: avoid; }
	.lms-teams-grid  { display: block; }
	.lms-team-card   { page-break-inside: avoid; margin-bottom: .75rem; box-shadow: none; border: 1px solid #ccc; }

	@page { margin: 1.5cm 1.5cm 2cm; }

	body { font-size: 10pt; color: #000; }
	a    { color: #000; text-decoration: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.lms-nav__item--logout {
		margin-left: 0;
	}

	.lms-stat-card {
		flex: 1 1 45%;
		min-width: 0;
		border-left: none;
		padding-left: 0;
	}

	.lms-teams-grid {
		grid-template-columns: 1fr;
	}

	.lms-portal-page-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.lms-detail-meta {
		gap: .5rem 1rem;
	}

	.lms-filter-form {
		flex-direction: column;
		align-items: flex-start;
	}

	.lms-filter-form select {
		width: 100%;
	}
}

/* ── Form wrap ─────────────────────────────────────────────────────── */
.lms-form-wrap {
	max-width: 640px;
}

.lms-field-row {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 1.75rem 2rem;
	margin-bottom: .75rem;
}

.lms-field-label {
	display: block;
	font-size: .88rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: .4rem;
}

.lms-select {
	width: 100%;
	padding: .5rem .75rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: .95rem;
	background: #fff;
	color: #111827;
}

.lms-form-wrap .frm_forms {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 1.75rem 2rem;
}

.lms-form-wrap .frm_form_field {
	margin-bottom: 1.1rem;
}

.lms-form-wrap label {
	display: block;
	font-size: .88rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: .35rem;
}

.lms-form-wrap input[type=text],
.lms-form-wrap input[type=email],
.lms-form-wrap input[type=date],
.lms-form-wrap select,
.lms-form-wrap textarea {
	width: 100%;
	padding: .55rem .75rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: .9rem;
	color: #111827;
	background: #fff;
	transition: border-color .15s;
}

.lms-form-wrap input:focus,
.lms-form-wrap select:focus,
.lms-form-wrap textarea:focus {
	outline: none;
	border-color: var(--lms-primary);
	box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}

.lms-form-wrap .frm_submit button,
.lms-form-wrap .frm_submit input[type=submit] {
	background: var(--lms-primary);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: .65rem 1.5rem;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}

.lms-form-wrap .frm_submit button:hover,
.lms-form-wrap .frm_submit input[type=submit]:hover {
	background: var(--lms-primary-dark);
}

/* ==========================================================================
   Notification Centre
   ========================================================================== */

/* ── Priority badges ────────────────────────────────────────────────────── */
.lms-priority-badge {
	display: inline-block;
	padding: .15rem .55rem;
	border-radius: 20px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.4;
	flex-shrink: 0;
}
.lms-priority--urgent { background: #fff0f0; color: #b91c1c; border: 1px solid #f87171; font-weight: 800; letter-spacing: .04em; }
.lms-priority--high   { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.lms-priority--medium { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.lms-priority--low    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* ── Notification banner ────────────────────────────────────────────────── */
/* ==========================================================================
   Notification Banner
   ========================================================================== */

:root {
  --lms-radius-banner: 14px;
}

/* Slim strip, not a colored band — severity reads via a small dot instead
   of the whole banner being painted the priority color. */
.lms-notif-banner {
	margin-bottom: 1.5rem;
	border-radius: var(--lms-radius-banner, 14px);
	overflow: hidden;
	background: var(--lms-surface);
	box-shadow: var(--lms-shadow-sm);
	/* This renders as a sibling of .lms-portal, directly on the theme's own
	   page background (not the cream --lms-bg, which only .lms-portal has)
	   — so on a white theme page, --lms-surface's near-white card color has
	   almost no contrast against it. A visible border guarantees the card
	   reads as a distinct surface regardless of what's behind it. */
	border: 1px solid var(--lms-border);
}

/* ── Toggle bar ─────────────────────────────────────────────────────────── */
.lms-notif-banner__toggle {
	-webkit-appearance: none;
	appearance: none;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: .65rem;
	width: 100% !important;
	box-sizing: border-box;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	padding: .85rem 1.1rem;
	margin: 0;
	cursor: pointer;
}
.lms-notif-banner__toggle::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--lms-notif-low);
}
.lms-notif-banner__toggle--high::before,
.lms-notif-banner__toggle--urgent::before { background: var(--lms-notif-high); }
.lms-notif-banner__toggle--medium::before { background: var(--lms-notif-medium); }

.lms-notif-banner__toggle-label {
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--lms-text) !important;
	flex-shrink: 0;
	white-space: nowrap;
}
.lms-notif-banner__chevron {
	display: flex;
	align-items: center;
	margin-left: auto;
	flex-shrink: 0;
	color: var(--lms-text-3);
	transition: transform .25s var(--lms-ease);
}
.lms-notif-banner__toggle[aria-expanded="false"] .lms-notif-banner__chevron {
	transform: rotate(180deg);
}

/* ── Collapsible body ─────────────────────────────────────────────────────── */
.lms-notif-banner__body {
	background: none;
	overflow: hidden;
	transition: max-height .32s var(--lms-ease), opacity .2s;
	max-height: 220px;
	opacity: 1;
	border-top: 1px solid var(--lms-border);
}
.lms-notif-banner__body--collapsed {
	max-height: 0 !important;
	opacity: 0;
	border-top-color: transparent;
}

/* ── Carousel ────────────────────────────────────────────────────────────── */
.lms-notif-banner__carousel {
	display: flex;
	align-items: center;
	position: relative;
}
.lms-notif-banner__slides { flex: 1; min-width: 0; }
.lms-notif-banner__item--hidden { display: none !important; }

/* ── Slide ───────────────────────────────────────────────────────────────── */
.lms-notif-banner__item { display: flex; }

.lms-notif-banner__slide-content {
	flex: 1;
	min-width: 0;
	padding: .85rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

/* Title row: badge + title */
.lms-notif-banner__title-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: .5rem;
	flex-wrap: nowrap;
	overflow: hidden;
}
.lms-notif-banner__title {
	font-size: .9rem;
	font-weight: 700;
	color: var(--lms-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* Meta row */
.lms-notif-banner__meta {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: .3rem;
	flex-wrap: nowrap;
	overflow: hidden;
}
.lms-notif-banner__meta-item {
	font-size: .75rem;
	color: var(--lms-text-3);
	white-space: nowrap;
}
.lms-notif-banner__meta-item--date {
	font-weight: 600;
	color: var(--lms-text-2);
}
.lms-notif-banner__meta-item--urgent { color: var(--lms-notif-high); }
.lms-notif-banner__meta-sep {
	font-size: .68rem;
	color: var(--lms-border-strong);
	flex-shrink: 0;
}

/* Body text */
.lms-notif-banner__body-text {
	font-size: .82rem;
	color: var(--lms-text-2);
	margin: 0;
	line-height: 1.5;
}

/* Date chip */
.lms-notif-banner__date-chip {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .72rem;
	font-weight: 600;
	color: var(--lms-text-2);
	background: var(--lms-surface-2);
	border: none;
	padding: .2rem .6rem;
	border-radius: 20px;
	white-space: nowrap;
	flex-shrink: 0;
}
.lms-notif-banner__date-chip strong { color: var(--lms-text); }

/* Role chip */
.lms-notif-banner__role-chip {
	display: inline-block;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--lms-text-3);
	background: var(--lms-surface-2);
	border: none;
	padding: .2rem .55rem;
	border-radius: 20px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── Nav arrows — no box, no background ever ─────────────────────────────── */
.lms-notif-banner__nav {
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	color: var(--lms-text-3);
	opacity: .6;
	cursor: pointer;
	padding: 0 .9rem;
	align-self: stretch;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	font-size: .9rem;
	transition: opacity .15s var(--lms-ease);
}
.lms-notif-banner__nav:hover:not(:disabled) { opacity: 1; background: none !important; }
.lms-notif-banner__nav:focus { outline: none; background: none !important; }
.lms-notif-banner__nav:disabled { opacity: .25; cursor: default; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.lms-notif-banner__footer {
	display: flex;
	justify-content: flex-end;
	padding: .5rem 1.1rem;
	background: none;
	border-top: 1px solid var(--lms-border);
}
.lms-notif-banner__more {
	font-size: .78rem;
	font-weight: 700;
	color: var(--lms-primary-dark);
	text-decoration: none;
}
.lms-notif-banner__more:hover { text-decoration: underline; }

/* ── Nav notifications icon button ───────────────────────────────────────── */
.lms-nav__item--notif-link { margin-left: auto; margin-right: 0; }

.lms-notif-nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--lms-surface);
	border: 1px solid var(--lms-border);
	color: var(--lms-text-2) !important;
	text-decoration: none !important;
	border-radius: 999px;
	transition: border-color .15s var(--lms-ease), color .15s var(--lms-ease);
}
.lms-notif-nav-link:hover { color: var(--lms-text) !important; border-color: var(--lms-border-strong); }
.lms-notif-nav-link svg { width: 18px; height: 18px; }

.lms-notif-nav-link__count {
	position: absolute;
	top: -4px;
	right: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--lms-primary);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	line-height: 1;
	border: 2px solid var(--lms-bg);
}

/* ── Bell dropdown ──────────────────────────────────────────────────────── */
.lms-notif-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 320px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	z-index: 9999;
	overflow: hidden;
}

.lms-notif-dropdown__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .65rem 1rem;
	border-bottom: 1px solid #f3f4f6;
	background: #f9fafb;
	font-size: .85rem;
}
.lms-notif-dropdown__header strong {
	font-size: .9rem;
	color: #111827;
}
.lms-notif-dropdown__all {
	font-size: .8rem;
	color: var(--lms-primary);
	text-decoration: none;
}
.lms-notif-dropdown__all:hover { text-decoration: underline; }

.lms-notif-dropdown__items {
	max-height: 340px;
	overflow-y: auto;
}

/* ── Dropdown items ─────────────────────────────────────────────────────── */
.lms-notif-item {
	padding: .7rem 1rem;
	border-bottom: 1px solid #f3f4f6;
	cursor: pointer;
	transition: background .12s;
}
.lms-notif-item:last-child { border-bottom: none; }
.lms-notif-item:hover { background: #f9fafb; }

.lms-notif-item--unread { background: #eff6ff; }
.lms-notif-item--unread:hover { background: #dbeafe; }
.lms-notif-item--read { opacity: .8; }
.lms-notif-item--empty,
.lms-notif-item--loading {
	cursor: default;
	color: #6b7280;
	font-size: .875rem;
	text-align: center;
	padding: 1.25rem 1rem;
}

.lms-notif-item__title {
	font-size: .875rem;
	font-weight: 600;
	color: #111827;
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .2rem;
}
.lms-notif-item__body {
	font-size: .8rem;
	color: #4b5563;
	line-height: 1.4;
}
.lms-notif-item__meta {
	font-size: .75rem;
	margin-top: .25rem;
}

/* ── Unread dot ─────────────────────────────────────────────────────────── */
.lms-notif-unread-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lms-primary);
	flex-shrink: 0;
}

/* ── Full notifications page ────────────────────────────────────────────── */
.lms-notif-list {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

/* ── Notification cards (full page) — unchanged ──────────────────────────── */
.lms-notif-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 1rem 1.25rem;
	transition: border-color .15s;
}
.lms-notif-card:not(.lms-notif-card--read) {
	border-left: 3px solid var(--lms-primary);
	background: #f8fbff;
}
.lms-notif-card--read { opacity: .85; }
.lms-notif-card--high   { border-left: 3px solid #dc2626; }
.lms-notif-card--medium { border-left: 3px solid #f59e0b; }
.lms-notif-card--low    { border-left: 3px solid #3b82f6; }

.lms-notif-card__title-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: .25rem;
}
.lms-notif-card__title {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .95rem;
	color: #111827;
}
.lms-notif-card__meta {
	display: flex;
	align-items: center;
	gap: .35rem;
	flex-wrap: wrap;
	margin-bottom: .5rem;
}
.lms-notif-card__meta-item { font-size: .78rem; color: #6b7280; }
.lms-notif-card__meta-item--date { font-weight: 600; color: #374151; }
.lms-notif-card__meta-sep { font-size: .7rem; color: #d1d5db; }
.lms-notif-card__body {
	font-size: .875rem;
	color: #374151;
	line-height: 1.55;
	margin-bottom: .6rem;
}
.lms-notif-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.lms-notif-card__btn {
	-webkit-appearance: none;
	appearance: none;
	font-size: .78rem;
	font-weight: 600;
	padding: .35rem .85rem;
	border-radius: var(--lms-radius-btn, 6px);
	border: 1.5px solid;
	cursor: pointer;
	background: none;
}
.lms-notif-card__btn--read  { color: var(--lms-primary,#1d4ed8); border-color: var(--lms-primary,#1d4ed8); }
.lms-notif-card__btn--read:hover  { background: var(--lms-primary,#1d4ed8); color: #fff; }
.lms-notif-card__btn--delete { color: #9ca3af; border-color: #e5e7eb; }
.lms-notif-card__btn--delete:hover { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }

/* Inline form row (priority + date side by side) */
.lms-form-row--inline {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	align-items: flex-end;
}
.lms-form-row--inline > div { flex: 1; min-width: 140px; }
.lms-input--date { max-width: 180px; }

/* ── Compose form ───────────────────────────────────────────────────────── */
.lms-notif-compose {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.75rem;
}

.lms-notif-target-row {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	align-items: center;
}

.lms-form-row {
	margin-bottom: 1rem;
}
.lms-label {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: .35rem;
}
.lms-label--inline {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-weight: 400;
}
.lms-input,
.lms-textarea,
.lms-select {
	width: 100%;
	padding: .5rem .75rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: .9rem;
	color: #111827;
	background: #fff;
	transition: border-color .15s;
	box-sizing: border-box;
}
.lms-select { width: auto; min-width: 140px; }
.lms-textarea { resize: vertical; }
.lms-input:focus,
.lms-textarea:focus,
.lms-select:focus {
	outline: none;
	border-color: var(--lms-primary);
	box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}
.lms-form-actions {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}

/* Danger button variant */
.lms-btn--danger {
	color: #dc2626;
	border-color: #fca5a5;
}
.lms-btn--danger:hover {
	background: #fef2f2;
	border-color: #dc2626;
}

/* ── Page header (shared with teams/cycles) ──────────────────────────────── */
.lms-portal-page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}
.lms-portal-page-header h2 {
	margin: 0;
	font-size: 1.35rem;
}

@media (max-width: 480px) {
	.lms-notif-dropdown { width: calc(100vw - 2rem); right: -1rem; }
	.lms-notif-card__header { flex-direction: column; }
}

/* -------------------------------------------------------------------------
   [lms_portal_login]
------------------------------------------------------------------------- */
.lms-login {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
}
.lms-login__card {
	width: 100%;
	max-width: 380px;
	background: #fff;
	border-radius: var(--lms-radius-card);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
	padding: 2.5rem 2rem;
	text-align: center;
}
.lms-login__title {
	font-family: var(--lms-font-heading, var(--lms-font-body));
	font-size: 1.3rem;
	margin: 0 0 1.5rem;
}
.lms-login__ct-btn {
	display: block;
	width: 100%;
	padding: .75rem 1rem;
	font-size: 1rem;
	margin-bottom: 1.25rem;
}
.lms-login__wp-link {
	display: inline-block;
	font-size: .85rem;
	color: var(--lms-primary);
	text-decoration: none;
}
.lms-login__wp-link:hover { text-decoration: underline; }
.lms-login .lms-notice { margin-bottom: 1.25rem; text-align: left; }

/* ══════════════════════════════════════════════════════════════════════════
   App shell — sidebar rail + content (templates/portal-shell.php)
   One shared frame for every role; only the rail items and dashboard content
   differ per role. Soft tier backgrounds are derived with color-mix() so they
   follow the light/dark tokens instead of needing per-theme colours.
   ══════════════════════════════════════════════════════════════════════════ */
.lms-shell {
	display: flex;
	align-items: flex-start;
	min-height: 100vh;
	background: var(--lms-bg);
	color: var(--lms-text);
	font-family: var(--lms-font-body);
}
.lms-shell *, .lms-shell *::before, .lms-shell *::after { box-sizing: border-box; }
.lms-shell a { text-decoration: none !important; }

.lms-rail {
	width: 250px;
	flex: 0 0 250px;
	position: sticky;
	top: 0;
	height: 100vh;
	padding: 24px 16px;
	border-right: 1px solid var(--lms-border);
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow-y: auto;
}
body.admin-bar .lms-rail { top: 32px; height: calc(100vh - 32px); }
.lms-rail__brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.lms-rail__mark {
	width: 36px; height: 36px; border-radius: 10px; flex: none;
	background: var(--lms-primary); color: #fff8f2;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--lms-font-heading); font-weight: 800; font-size: 15px;
}
.lms-rail__brand-text b { display: block; font-family: var(--lms-font-heading); font-weight: 700; font-size: 14.5px; }
.lms-rail__brand-text span { display: block; font-size: 12px; color: var(--lms-text-3); }

.lms-rail__group { display: flex; flex-direction: column; gap: 2px; }
.lms-rail__group-label {
	font-family: var(--lms-font-heading); font-size: 10.5px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--lms-text-3);
	padding: 0 10px; margin: 4px 0 6px;
}
.lms-rail__item {
	display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px;
	color: var(--lms-text-2); font-size: 13.5px; font-weight: 500;
}
.lms-rail__item svg { width: 17px; height: 17px; flex: none; color: var(--lms-text-3); }
a.lms-rail__item:hover { background: var(--lms-surface-2); color: var(--lms-text); }
.lms-rail__item[aria-current="page"] { background: var(--lms-accent-soft); color: var(--lms-primary); font-weight: 700; }
.lms-rail__item[aria-current="page"] svg { color: var(--lms-primary); }
.lms-rail__item--soon { opacity: .62; cursor: default; }
.lms-rail__soon {
	margin-left: auto; font-family: var(--lms-font-heading); font-size: 9px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; background: var(--lms-surface-2);
	color: var(--lms-text-3); border: 1px solid var(--lms-border); padding: 2px 6px; border-radius: 999px;
}
.lms-rail__count {
	position: static;
	margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
	background: var(--lms-primary); color: #fff; font-size: 11px; font-weight: 700;
}
.lms-rail__spacer { flex: 1; }
.lms-rail__foot { border-top: 1px solid var(--lms-border); padding-top: 14px; display: flex; align-items: center; gap: 10px; }
.lms-rail__avatar {
	width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--lms-surface-2);
	color: var(--lms-text-2); display: flex; align-items: center; justify-content: center;
	font-family: var(--lms-font-heading); font-weight: 700; font-size: 12px;
}
.lms-rail__foot-text b { display: block; font-size: 12.5px; }
.lms-rail__foot-text a { display: block; font-size: 11px; color: var(--lms-text-3); }
.lms-rail__foot-text a:hover { color: var(--lms-primary); }

.lms-shell__main {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	max-width: 1116px;
	margin: 0 auto; /* centred in the space beside the rail */
	padding: 40px 40px 72px;
}
/* The pages' own wrappers were sized for the old centred column — inside the
   shell the main area already provides width and padding. */
.lms-shell__main .lms-nav,
.lms-shell__main .lms-notif-banner,
.lms-shell__main .lms-notice,
.lms-shell__main .lms-portal {
	max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
}

/* ── Regional Director dashboard ─────────────────────────────────────────── */
.lms-rd__head { margin-bottom: 22px; }
.lms-rd__title { margin: 0 0 4px; font-family: var(--lms-font-heading); font-size: 21px; font-weight: 700; }
.lms-rd__badge {
	display: inline-block; margin-left: 8px; vertical-align: 2px; padding: 3px 9px; border-radius: 999px;
	font-family: var(--lms-font-heading); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	background: var(--lms-surface-2); color: var(--lms-text-2); border: 1px solid var(--lms-border);
}
.lms-rd__sub { margin: 0; color: var(--lms-text-2); font-size: 13.5px; }
.lms-rd__section { margin-bottom: 30px; }
.lms-rd__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.lms-rd__section-head h2 { margin: 0; font-family: var(--lms-font-heading); font-size: 14px; font-weight: 700; }
.lms-rd__note { font-size: 12px; color: var(--lms-text-3); }
.lms-rd__def { margin: 10px 0 0; font-size: 12px; color: var(--lms-text-3); max-width: 80ch; }

.lms-glance { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 12px; }
.lms-glance__tile {
	display: block; padding: 14px 16px; border-radius: 12px; color: var(--lms-text);
	background: var(--lms-surface); border: 1px solid var(--lms-border); box-shadow: var(--lms-shadow-sm);
}
a.lms-glance__tile:hover { border-color: var(--lms-border-strong); }
.lms-glance__n { display: block; font-family: var(--lms-font-heading); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lms-glance__l { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--lms-text-2); }

.lms-pulse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lms-pulse__tile { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: 14px; box-shadow: var(--lms-shadow-sm); }
.lms-pulse__n { font-family: var(--lms-font-heading); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lms-pulse__l { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--lms-text-2); }
.lms-pulse__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lms-pulse__tile--ok    { background: color-mix(in srgb, var(--lms-success) 14%, var(--lms-surface)); }
.lms-pulse__tile--ok .lms-pulse__n { color: var(--lms-success); }
.lms-pulse__tile--ok .lms-pulse__dot { background: var(--lms-success); }
.lms-pulse__tile--warn  { background: color-mix(in srgb, var(--lms-warning) 14%, var(--lms-surface)); }
.lms-pulse__tile--warn .lms-pulse__n { color: var(--lms-warning); }
.lms-pulse__tile--warn .lms-pulse__dot { background: var(--lms-warning); }
.lms-pulse__tile--alert { background: color-mix(in srgb, var(--lms-primary) 14%, var(--lms-surface)); }
.lms-pulse__tile--alert .lms-pulse__n { color: var(--lms-primary); }
.lms-pulse__tile--alert .lms-pulse__dot { background: var(--lms-primary); }
.lms-pulse__tile--bad   { background: color-mix(in srgb, var(--lms-notif-high) 14%, var(--lms-surface)); }
.lms-pulse__tile--bad .lms-pulse__n { color: var(--lms-notif-high); }
.lms-pulse__tile--bad .lms-pulse__dot { background: var(--lms-notif-high); }

.lms-rd__list { background: var(--lms-surface); border: 1px solid var(--lms-border); border-radius: 14px; overflow: hidden; box-shadow: var(--lms-shadow-sm); }
.lms-rd__row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; color: var(--lms-text); border-bottom: 1px solid var(--lms-border); }
.lms-rd__row:last-child { border-bottom: none; }
.lms-rd__row:hover { background: var(--lms-surface-2); }
.lms-rd__row-name { flex: 1; font-weight: 600; font-size: 13.5px; }
.lms-rd__row-meta { color: var(--lms-text-3); font-size: 12.5px; }

@media (max-width: 860px) {
	.lms-shell { flex-direction: column; }
	.lms-rail {
		width: 100%; flex: none; position: static; height: auto; border-right: none;
		border-bottom: 1px solid var(--lms-border); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px;
	}
	body.admin-bar .lms-rail { top: auto; height: auto; }
	.lms-rail__group { flex-direction: row; flex-wrap: wrap; }
	.lms-rail__group-label, .lms-rail__spacer { display: none; }
	.lms-rail__foot { border-top: none; padding-top: 0; margin-left: auto; }
	.lms-shell__main { padding: 22px 18px 48px; max-width: none; }
	.lms-glance { grid-template-columns: repeat(2, 1fr); }
	.lms-pulse { grid-template-columns: repeat(2, 1fr); }
}

/* Back to the public site: the theme header is gone inside the shell, so this
   is the way out and needs to read as a button, not a footnote. */
.lms-rail__site {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 12px; border-radius: 10px;
	background: var(--lms-surface); border: 1px solid var(--lms-border-strong);
	color: var(--lms-text) !important; font-size: 13px; font-weight: 600;
	box-shadow: var(--lms-shadow-sm);
}
.lms-rail__site svg { width: 16px; height: 16px; color: var(--lms-primary); }
.lms-rail__site:hover { border-color: var(--lms-primary); color: var(--lms-primary) !important; }

/* Breathing room: banner / preview strip / page content stack with even gaps. */
.lms-shell__main > * + * { margin-top: 20px; }
.lms-shell__main .lms-notif-banner,
.lms-shell__main .lms-act-as-notice,
.lms-shell__main .lms-notice { margin-bottom: 0; }
.lms-rd__head { margin-bottom: 28px; }
.lms-rd__section { margin-bottom: 40px; }
.lms-rd__section-head { margin-bottom: 16px; }
.lms-glance { margin-top: 18px; gap: 16px; }
.lms-glance__tile { padding: 18px 20px; }
.lms-pulse { gap: 16px; }
.lms-rd__def { margin-top: 14px; }

/* ── Regional Director refinements: square-cornered, quieter controls ────── */
.lms-shell { --lms-square: 6px; }

/* Filter bar: compact segmented controls. The theme's global button style
   (large, coloured border) beats the base rules, so restate them here. */
.lms-shell .lms-filter-bar { padding: 0; margin: 0 0 16px; border-bottom: 0; gap: 10px 12px; }
.lms-shell .lms-filter-bar__sep { display: none; }
.lms-shell .lms-filter-bar__group {
	gap: 2px; padding: 2px; background: var(--lms-surface);
	border: 1px solid var(--lms-border); border-radius: var(--lms-square);
}
.lms-shell .lms-filter-bar__item,
.lms-shell .lms-filter-bar__export,
.lms-shell .lms-filter-bar__apply {
	font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.4;
	letter-spacing: 0; text-transform: none; box-shadow: none; min-height: 0;
}
.lms-shell .lms-filter-bar__item {
	padding: 5px 11px; border: 0; border-radius: 4px; background: transparent; color: var(--lms-text-2);
}
.lms-shell .lms-filter-bar__item:hover { background: var(--lms-surface-2); color: var(--lms-text); }
.lms-shell .lms-filter-bar__item--active,
.lms-shell .lms-filter-bar__item--active:hover { background: var(--lms-ink); color: var(--lms-ink-contrast); font-weight: 600; }
.lms-shell .lms-filter-bar__dot { background: var(--lms-success); }
.lms-shell .lms-filter-bar__item--active .lms-filter-bar__dot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lms-success) 35%, transparent); }
.lms-shell .lms-filter-bar__export {
	padding: 6px 12px; color: var(--lms-text-2); background: transparent;
	border: 1px solid var(--lms-border-strong); border-radius: var(--lms-square);
}
.lms-shell .lms-filter-bar__export:hover { background: var(--lms-surface); color: var(--lms-primary); border-color: var(--lms-primary); }

/* At a glance: one divided strip instead of five cards. */
.lms-glance {
	gap: 1px; margin-top: 0; overflow: hidden;
	background: var(--lms-border); border: 1px solid var(--lms-border); border-radius: var(--lms-square);
}
.lms-glance__tile { padding: 18px 22px; border: 0; border-radius: 0; box-shadow: none; background: var(--lms-surface); }
a.lms-glance__tile:hover { background: var(--lms-surface-2); border: 0; }
.lms-glance__l { margin-top: 4px; text-transform: none; }

/* Team pulse: proportional bar, then square cells with the rule for each tier. */
.lms-pulse-bar {
	display: flex; gap: 2px; height: 10px; margin-bottom: 14px; overflow: hidden;
	border-radius: 3px; background: var(--lms-border);
}
.lms-pulse-bar--empty { background: var(--lms-surface-2); }
.lms-pulse-bar__seg { display: block; min-width: 4px; }
.lms-pulse-bar__seg--ok    { background: var(--lms-success); }
.lms-pulse-bar__seg--warn  { background: var(--lms-warning); }
.lms-pulse-bar__seg--alert { background: var(--lms-primary); }
.lms-pulse-bar__seg--bad   { background: var(--lms-notif-high); }

.lms-pulse { gap: 12px; }
.lms-pulse__tile {
	padding: 16px 18px 14px; gap: 4px; border-radius: var(--lms-square); box-shadow: none;
	background: var(--lms-surface); border: 1px solid var(--lms-border); border-top-width: 3px;
}
.lms-pulse__tile--ok    { background: var(--lms-surface); border-top-color: var(--lms-success); }
.lms-pulse__tile--warn  { background: var(--lms-surface); border-top-color: var(--lms-warning); }
.lms-pulse__tile--alert { background: var(--lms-surface); border-top-color: var(--lms-primary); }
.lms-pulse__tile--bad   { background: var(--lms-surface); border-top-color: var(--lms-notif-high); }
.lms-pulse__l { order: 1; font-size: 12px; text-transform: none; }
.lms-pulse__n { order: 2; font-size: 32px; line-height: 1.1; margin-top: 6px; }
.lms-pulse__hint { order: 3; font-size: 11.5px; color: var(--lms-text-3); }

.lms-rd__list { border-radius: var(--lms-square); box-shadow: none; }
.lms-rd__badge { border-radius: 4px; }

/* ── Shell header: search + bell ─────────────────────────────────────────── */
.lms-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.lms-search { position: relative; flex: 1; min-width: 0; }
.lms-search > svg {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; color: var(--lms-text-3); pointer-events: none;
}
.lms-shell .lms-search__input {
	width: 100%; margin: 0; padding: 12px 14px 12px 42px; font-family: inherit; font-size: 14px; line-height: 1.4;
	color: var(--lms-text); background: var(--lms-surface); border: 1px solid var(--lms-border);
	border-radius: var(--lms-square); box-shadow: none;
}
.lms-shell .lms-search__input:focus { outline: 2px solid var(--lms-primary); outline-offset: 1px; }
.lms-search__results {
	position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
	background: var(--lms-surface); border: 1px solid var(--lms-border-strong);
	border-radius: var(--lms-square); box-shadow: var(--lms-shadow-md); max-height: 380px; overflow-y: auto; padding: 6px;
}
.lms-search__results[hidden], .lms-bell__panel[hidden], .lms-bell__count[hidden] { display: none; }
.lms-search__group {
	padding: 8px 10px 4px; font-family: var(--lms-font-heading); font-size: 10.5px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--lms-text-3);
}
.lms-search__item {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 8px 10px; border-radius: 4px; font-size: 13.5px; color: var(--lms-text);
}
.lms-search__item:hover, .lms-search__item:focus { background: var(--lms-surface-2); }
.lms-search__item small { color: var(--lms-text-3); font-size: 11.5px; }
.lms-search__empty { padding: 12px 10px; font-size: 13px; color: var(--lms-text-3); }

.lms-bell { position: relative; flex: none; }
.lms-shell .lms-bell__btn {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; padding: 0; margin: 0; cursor: pointer;
	background: var(--lms-surface); color: var(--lms-text-2);
	border: 1px solid var(--lms-border); border-radius: var(--lms-square); box-shadow: none;
}
.lms-shell .lms-bell__btn:hover { background: var(--lms-surface); border-color: var(--lms-primary); color: var(--lms-primary); }
.lms-bell__btn svg { width: 18px; height: 18px; }
.lms-bell__count {
	position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
	display: flex; align-items: center; justify-content: center; border-radius: 999px;
	background: var(--lms-primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
	box-shadow: 0 0 0 2px var(--lms-bg);
}
.lms-bell__panel {
	position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); width: 360px; max-width: 86vw;
	background: var(--lms-surface); border: 1px solid var(--lms-border-strong);
	border-radius: var(--lms-square); box-shadow: var(--lms-shadow-md); overflow: hidden;
}
.lms-bell__list { max-height: 380px; overflow-y: auto; }
.lms-bell__all {
	display: block; padding: 11px 14px; text-align: center; font-size: 12.5px; font-weight: 600;
	color: var(--lms-primary); border-top: 1px solid var(--lms-border);
}
.lms-bell__all:hover { background: var(--lms-surface-2); }

/* ── Dashboard section cards ─────────────────────────────────────────────── */
.lms-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lms-card {
	--card-accent: var(--lms-primary);
	display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 14px;
	background: var(--lms-surface); border: 1px solid var(--lms-border); border-top: 3px solid var(--card-accent);
	border-radius: var(--lms-square);
}
.lms-card--c0 { --card-accent: #3f6fd1; }
.lms-card--c1 { --card-accent: #2f7a55; }
.lms-card--c2 { --card-accent: #9a4a2a; }
.lms-card--c3 { --card-accent: #9a3b5c; }
.lms-card--c4 { --card-accent: #2d5fa8; }
.lms-card--c5 { --card-accent: #6b6b5c; }
.lms-card__head {
	display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
	font-family: var(--lms-font-heading); font-size: 15px; font-weight: 700;
}
.lms-card__head svg { width: 20px; height: 20px; color: var(--card-accent); flex: none; }
.lms-card__head a { color: var(--lms-text); }
.lms-card__head a:hover { color: var(--card-accent); }
.lms-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lms-card__row {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 8px 0; font-size: 13.5px; color: var(--lms-text-2); border-top: 1px solid var(--lms-border);
}
.lms-card__list li:first-child .lms-card__row { border-top: 0; }
a.lms-card__row:hover { color: var(--card-accent); }
.lms-card__row svg { width: 14px; height: 14px; color: var(--lms-text-3); flex: none; }
.lms-card__row--soon { color: var(--lms-text-3); opacity: .7; }

/* ── Board tables: first rows, then a "See more" toggle ─────────────────── */
.lms-table tr[hidden] { display: none; }
.lms-shell .lms-board-more {
	margin-top: 10px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600;
	color: var(--lms-text-2); background: var(--lms-surface); border: 1px solid var(--lms-border-strong);
	border-radius: var(--lms-square); cursor: pointer;
}
.lms-shell .lms-board-more:hover { color: var(--lms-primary); border-color: var(--lms-primary); }

/* ── My Progress page sections (anchored from the dashboard card) ───────── */
.lms-profile-section { scroll-margin-top: 84px; margin-bottom: 2rem; }
.lms-profile-section:last-child { margin-bottom: 0; }
.lms-card__disclosure summary.lms-card__row { border-top: 0; cursor: pointer; list-style: none; }
.lms-card__disclosure summary::-webkit-details-marker { display: none; }
.lms-card__disclosure summary svg { transition: transform .15s ease; }
.lms-card__disclosure[open] summary svg { transform: rotate(90deg); }
.lms-card__sublist { list-style: none; margin: 0; padding: 0 0 4px 14px; display: flex; flex-direction: column; }
.lms-card__sublist .lms-card__row { padding: 6px 0; font-size: 13px; }
.lms-card__sublist li:first-child .lms-card__row { border-top: 1px dashed var(--lms-border); }

@media (max-width: 860px) {
	.lms-cards { grid-template-columns: 1fr; }
	.lms-topbar { margin-bottom: 20px; }
}

/* ── Board dashboard: breadcrumb, filters, map, chips, tables ────────────── */
.lms-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--lms-text-2); }
.lms-crumbs a { color: var(--lms-primary); }
.lms-crumbs a:hover { text-decoration: underline !important; }
.lms-crumbs [aria-current="page"] { font-weight: 700; color: var(--lms-text); }
.lms-crumbs__sep { color: var(--lms-text-3); }
.lms-crumbs__course {
	margin-left: 6px; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600;
	background: var(--lms-accent-soft); color: var(--lms-primary);
}

.lms-board-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 14px; }
.lms-board-filters__field { display: flex; flex-direction: column; gap: 4px; min-width: 170px; flex: 0 1 220px; }
.lms-board-filters__field > span {
	font-family: var(--lms-font-heading); font-size: 10.5px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--lms-text-3);
}
.lms-shell .lms-board-filters select {
	width: 100%; margin: 0; padding: 9px 12px; font-family: inherit; font-size: 13.5px; line-height: 1.4;
	color: var(--lms-text); background: var(--lms-surface); border: 1px solid var(--lms-border);
	border-radius: var(--lms-square); box-shadow: none;
}
.lms-shell .lms-board-filters select:focus { outline: 2px solid var(--lms-primary); outline-offset: 1px; }
.lms-board-filters__clear { align-self: center; padding: 9px 4px 0; font-size: 12.5px; font-weight: 600; color: var(--lms-primary); }

.lms-board-map {
	padding: 8px; overflow: hidden;
	background: var(--lms-surface); border: 1px solid var(--lms-border); border-radius: var(--lms-square);
}
.lms-map { display: block; width: 100%; max-height: 640px; height: auto; margin: 0 auto; }
.lms-map__land path { fill: #e6e1d2; stroke: var(--lms-surface); stroke-width: .6; }
.lms-map__country path { fill: var(--f); stroke: var(--lms-surface); stroke-width: .8; stroke-linejoin: round; transition: fill .12s; }
.lms-map__country .lms-map__dot { fill: var(--f); stroke: var(--lms-surface); stroke-width: 1.4; }
.lms-map__country .lms-map__hit { fill: transparent; }
.lms-map__country { cursor: pointer; outline: none; }
.lms-map__country:hover path, .lms-map__country:focus-visible path { fill: var(--h); }
.lms-map__country:hover .lms-map__dot, .lms-map__country:focus-visible .lms-map__dot { fill: var(--h); }
.lms-map__country:focus-visible path, .lms-map__country:focus-visible .lms-map__dot { stroke: var(--lms-text); stroke-width: 2; }
.lms-map__country--on path, .lms-map__country--on .lms-map__dot { stroke: var(--lms-text); stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .lms-map__country path { transition: none; } }
.lms-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lms-chip {
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 500;
	color: var(--lms-text-2); background: var(--lms-surface); border: 1px solid var(--lms-border); border-radius: var(--lms-square);
}
.lms-chip:hover { border-color: var(--lms-border-strong); color: var(--lms-text); }
.lms-chip--on { color: var(--lms-text); border-color: var(--lms-text); font-weight: 700; }
.lms-chip__dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.lms-chip__n { color: var(--lms-text-3); font-variant-numeric: tabular-nums; }

.lms-table-wrap { overflow-x: auto; background: var(--lms-surface); border: 1px solid var(--lms-border); border-radius: var(--lms-square); }
.lms-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0; }
.lms-table th, .lms-table td { padding: 11px 16px; text-align: left; border: 0; border-bottom: 1px solid var(--lms-border); background: transparent; }
.lms-table thead th {
	font-family: var(--lms-font-heading); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--lms-text-3); background: var(--lms-surface-2);
}
.lms-table tbody tr:last-child td { border-bottom: 0; }
.lms-table tbody tr:hover td { background: var(--lms-surface-2); }
.lms-table a { color: var(--lms-text); font-weight: 600; }
.lms-table a:hover { color: var(--lms-primary); }
.lms-table__num { text-align: right !important; font-variant-numeric: tabular-nums; }
.lms-table__on td { background: var(--lms-accent-soft); }

/* ── Coach/Team Leader/Expert team cards + Team Leader cycle timeline ────────
   Restyled in place to the square-corner token language the rest of the
   shell uses — same content and layout as before, just matching visually.
   Restated under .lms-shell because the theme's own card/border styles
   otherwise win (same reason .lms-board-filters/.lms-table do this). ── */
.lms-shell .lms-team-card {
	background: var(--lms-surface);
	border: 1px solid var(--lms-border);
	border-radius: var(--lms-square);
	box-shadow: none;
}
.lms-shell .lms-team-card:hover {
	border-color: var(--lms-border-strong);
	box-shadow: var(--lms-shadow-sm);
}
.lms-shell .lms-team-card__name a {
	color: var(--lms-text);
}
.lms-shell .lms-team-card__name a:hover {
	color: var(--lms-primary);
}
.lms-shell .lms-team-card__meta {
	color: var(--lms-text-2);
}

.lms-shell .lms-progress-bar {
	background: var(--lms-surface-2);
	border-radius: 3px;
}
.lms-shell .lms-progress-bar__fill {
	background: var(--lms-primary);
	border-radius: 3px;
}
.lms-shell .lms-progress-bar__label {
	color: var(--lms-text-2);
}

.lms-shell .lms-section--team-leader {
	background: var(--lms-surface);
	border: 1px solid var(--lms-border);
	border-radius: var(--lms-square);
}
.lms-shell .lms-tl-header__cycle {
	color: var(--lms-text-2);
}

.lms-shell .lms-cycle-timeline__bar {
	background: var(--lms-surface-2);
	border-radius: 3px;
}
.lms-shell .lms-cycle-timeline__fill {
	background: var(--lms-primary);
	border-radius: 3px;
}
.lms-shell .lms-cycle-timeline__team-marker {
	background: var(--lms-surface);
	border-color: var(--lms-primary);
	box-shadow: var(--lms-shadow-sm);
}
.lms-shell .lms-cycle-timeline__team-label {
	background: var(--lms-primary);
	color: #fff8f2;
	border-radius: 4px;
}
.lms-shell .lms-cycle-timeline__labels {
	color: var(--lms-text-3);
}
.lms-shell .lms-cycle-timeline__remaining {
	color: var(--lms-text-2);
}