/*
 * Smart LMS — base tokens + scoped reset.
 *
 * Canonical design tokens for every SLMS screen. The accent color and font
 * family are overridden at runtime by the inline `#slms-css-vars` style
 * (generated from Settings > General), so the values below are defaults.
 *
 * Porting rule: page-level wrappers are transparent so the active theme's
 * background shows through; card/modal surfaces keep their own background.
 */

.slms-scope {
	/* Primary family (overridden inline from settings). */
	--slms-primary: #2563eb;
	--slms-primary-hover: #1d4ed8;
	--slms-primary-dark: #1e3a8a;
	--slms-primary-light: #eff6ff;
	--slms-primary-border: #bfdbfe;
	--slms-primary-glow: rgba(37, 99, 235, 0.25);

	/* Neutral surfaces. */
	--slms-bg-app: transparent;
	--slms-bg-surface: #ffffff;
	--slms-bg-subtle: #f1f5f9;

	/* Text ramp. */
	--slms-text-primary: #0f172a;
	--slms-text-secondary: #334155;
	--slms-text-muted: #64748b;
	--slms-text-light: #94a3b8;

	/* Borders. */
	--slms-border-subtle: #f1f5f9;
	--slms-border-default: #e2e8f0;
	--slms-border-strong: #cbd5e1;

	/* Status triads. */
	--slms-status-completed: #059669;
	--slms-status-completed-bg: #ecfdf5;
	--slms-status-completed-border: #a7f3d0;
	--slms-status-progress: #d97706;
	--slms-status-progress-bg: #fffbeb;
	--slms-status-progress-border: #fde68a;
	--slms-status-notstarted: #64748b;
	--slms-status-notstarted-bg: #f8fafc;
	--slms-status-notstarted-border: #e2e8f0;

	/* Feedback. */
	--slms-success: #10b981;
	--slms-success-light: #ecfdf5;
	--slms-success-border: #a7f3d0;
	--slms-danger: #ef4444;
	--slms-danger-light: #fef2f2;
	--slms-danger-border: #fecaca;
	--slms-warning: #f59e0b;
	--slms-warning-light: #fffbeb;
	--slms-flag: #f59e0b;

	/* Radii. (--slms-radius-xs intentionally omitted: pages that use it
	 * define their own in their prototype token block; the registration
	 * sheet uses it without defining it, exactly like the prototype, where
	 * it resolves to the initial 0.) */
	--slms-radius-sm: 6px;
	--slms-radius-md: 10px;
	--slms-radius-lg: 14px;
	--slms-radius-xl: 18px;
	--slms-radius-full: 9999px;

	/* Shadows. */
	--slms-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
	--slms-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
	--slms-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--slms-shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.1);
	--slms-shadow-xl: 0 20px 45px rgba(15, 23, 42, 0.14);

	/* Motion. */
	--slms-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--slms-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--slms-transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Typography (overridden inline from settings). */
	--slms-font-sans: inherit;

	font-family: var(--slms-font-sans);
	/* Normalize the typography the prototype gets from the UA body rule —
	 * without these the active theme's body font-size/weight/letter-spacing
	 * inherits straight into the plugin UI. */
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.6;
	color: var(--slms-text-primary);
	box-sizing: border-box;
}

/*
 * Width: the scope always fills its host (the theme's content container, or
 * an Elementor/Divi Builder column when a page module runs as a shortcode).
 * The host controls the width — the plugin never caps it, so page builders
 * can size pages freely. Page containers are equally fluid (max-width 100%).
 */
.slms-scope {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Scoped reset — never leaks to the theme. Mirrors the prototype reset
 * (`.slms-scope *`, class-level specificity) so every later page-component
 * rule wins. The element resets below are extras for theme normalization:
 * they are wrapped in :where() so they can NEVER out-specify a page css
 * rule like `.slms-question-prompt` or `.slms-topbar-back-link`. */
.slms-scope *,
.slms-scope *::before,
.slms-scope *::after {
	box-sizing: border-box;
}

.slms-scope :where(h1:not(:where(.slms-divi-content *)), h2:not(:where(.slms-divi-content *)), h3:not(:where(.slms-divi-content *)), h4:not(:where(.slms-divi-content *)), h5:not(:where(.slms-divi-content *)), h6:not(:where(.slms-divi-content *)), p:not(:where(.slms-divi-content *)), ul:not(:where(.slms-divi-content *)), ol:not(:where(.slms-divi-content *)), figure:not(:where(.slms-divi-content *)), blockquote:not(:where(.slms-divi-content *))) {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
}

/*
 * Headings: undo the theme's global heading typography (font-size presets,
 * line-height 1.125, weight 400, letter-spacing, uppercase on h6). `revert`
 * restores the user-agent values the prototype renders with and `inherit`
 * re-joins the scope's line-height chain; page css class rules (later in the
 * cascade) still win wherever they declare these properties.
 */
.slms-scope :where(h1:not(:where(.slms-divi-content *)), h2:not(:where(.slms-divi-content *)), h3:not(:where(.slms-divi-content *)), h4:not(:where(.slms-divi-content *)), h5:not(:where(.slms-divi-content *)), h6:not(:where(.slms-divi-content *))) {
	font-family: inherit;
	font-size: revert;
	font-weight: revert;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.slms-scope :where(ul, ol) {
	list-style: none;
}

.slms-scope :where(img) {
	max-width: 100%;
	height: auto;
	display: block;
}

.slms-scope :where(a) {
	color: inherit;
	text-decoration: none;
}

.slms-scope :where(button:not(:where(.slms-divi-content *))) {
	font-family: inherit;
	text-transform: none;
	cursor: pointer;
}

.slms-scope :where(input:not(:where(.slms-divi-content *)), select:not(:where(.slms-divi-content *)), textarea:not(:where(.slms-divi-content *))) {
	font-family: inherit;
}

/*
 * Form control backstop: each page stylesheet carries the prototype's own
 * `.slms-scope input/button…` resets at (0,1,1), which already normalize
 * fonts and beat theme form rules by load order. This shim only covers
 * controls on pages whose resets omit these properties.
 */
.slms-scope :where(input:not(:where(.slms-divi-content *)), select:not(:where(.slms-divi-content *)), textarea:not(:where(.slms-divi-content *))) {
	font-size: inherit;
	line-height: normal;
}
.slms-scope :where(button:not(:where(.slms-divi-content *))) {
	line-height: normal;
}

/* Page-level wrappers inherit the theme background (porting rule D6).
 * :where() keeps this at class specificity so a page may still paint its
 * own wrapper surfaces. */
.slms-scope :where([class*="-wrapper"], [class*="-container"], [class*="-page"]) {
	background: transparent;
}

/* Universal visibility utility (prototype convention). */
.slms-scope .slms-is-hidden {
	display: none !important;
}

/* Focus visibility. */
.slms-scope :focus-visible {
	outline: 2px solid var(--slms-primary);
	outline-offset: 2px;
}

/* Shared notice component (used by shortcode module placeholders). */
.slms-scope .slms-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--slms-radius-md);
	border: 1px solid var(--slms-border-default);
	background: var(--slms-bg-surface);
}

.slms-scope .slms-notice-info {
	border-color: var(--slms-primary-border);
	background: var(--slms-primary-light);
}

/* Reduced motion respect. */
@media (prefers-reduced-motion: reduce) {
	.slms-scope *,
	.slms-scope *::before,
	.slms-scope *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/*
 * List guard: themes declare line-height directly on content-area lists
 * (Divi: `#left-area ul, .entry-content ul { line-height: 26px }`), which
 * overrides the inheritance the prototype relies on. The wrapper :is()
 * matches the theme's own content containers (which wrap .slms-scope), so
 * the guard carries ID-level specificity and wins wherever the theme does —
 * and matches nothing when those wrappers are absent.
 */
:is(#left-area, #et-boc, #content-area, .entry-content, .et-db) .slms-scope :where(ul:not(:where(.slms-divi-content *)), ol:not(:where(.slms-divi-content *))) {
	line-height: inherit;
	list-style: none;
}