/*
 * Tutorio theme system.
 *
 * Loaded on every page (via component.ThemeAssets in <head>). Contains:
 *   1. The Light / Auto / Dark segmented toggle shown in profile dropdowns.
 *   2. html[data-theme="dark"] overrides: design-token flips first (--cd-*,
 *      --bs-*, page palettes), then surface/component overrides for the
 *      parts of the app that hardcode light colours.
 *
 * The app predates any token system, so the dark rules lean on three
 * layers: token overrides (cheap, wide), class-pattern overrides
 * (:where([class*="card"]) etc.), and [style*=...] attribute matches as a
 * backstop for inline styles in templ files.
 */

/* ============================================================
   1. Theme toggle (light-mode base look)
   ============================================================ */

.tt-theme-row {
	display: flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 10px;
}

.tt-theme-seg {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	background: rgba(100, 116, 139, 0.1);
	border: 1px solid rgba(100, 116, 139, 0.16);
	border-radius: 999px;
	padding: 3px;
}

.tt-theme-seg button {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
	height: 34px;
	border: 0;
	background: transparent;
	border-radius: 999px;
	color: #94a3b8;
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0;
	transition: color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.tt-theme-seg button:hover { color: #475569; }

.tt-theme-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: calc((100% - 6px) / 3);
	height: 34px;
	border-radius: 999px;
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	box-shadow: 0 2px 6px rgba(99, 102, 241, 0.45);
	transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.4, 1);
	pointer-events: none;
}

html[data-theme-pref="light"] .tt-theme-thumb { transform: translateX(0); }
html[data-theme-pref="auto"] .tt-theme-thumb { transform: translateX(100%); }
html[data-theme-pref="dark"] .tt-theme-thumb { transform: translateX(200%); }

@keyframes tt-theme-pop {
	0% { transform: scale(0.5) rotate(-60deg); }
	70% { transform: scale(1.15) rotate(8deg); }
	100% { transform: scale(1) rotate(0deg); }
}

html[data-theme-pref="light"] [data-theme-choice="light"],
html[data-theme-pref="auto"] [data-theme-choice="auto"],
html[data-theme-pref="dark"] [data-theme-choice="dark"] {
	color: #ffffff;
}

html[data-theme-pref="light"] [data-theme-choice="light"]:hover,
html[data-theme-pref="auto"] [data-theme-choice="auto"]:hover,
html[data-theme-pref="dark"] [data-theme-choice="dark"]:hover {
	color: #ffffff;
}

html[data-theme-pref="light"] [data-theme-choice="light"] i,
html[data-theme-pref="auto"] [data-theme-choice="auto"] i,
html[data-theme-pref="dark"] [data-theme-choice="dark"] i {
	animation: tt-theme-pop 0.35s ease;
}

/* Smooth colour crossfade while switching (class added briefly by theme.js) */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
	transition: background-color 0.3s ease, background 0.3s ease, color 0.3s ease,
		border-color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease !important;
}

/* ============================================================
   1b. Legendary theme flair (day-75 streak reward)
   Renders on top of the dark token set: deep royal-purple
   surfaces with a gold accent. Applied via data-theme-flair
   so every html[data-theme="dark"] rule below still applies.
   ============================================================ */

html[data-theme-flair="legendary"] {
	/* theme-local surface scale - purple-shifted */
	--tt-bg: #120826;
	--tt-surface: #1b1038;
	--tt-surface-2: #241547;
	--tt-surface-3: #2d1b57;
	--tt-line: #3b2a66;
	--tt-line-strong: #4d3a80;
	--tt-ink: #f1e9ff;
	--tt-muted: #a99cc9;

	/* gold accent */
	--cd-accent: #eab308;
	--cd-accent-hover: #facc15;
	--cd-accent-soft: rgba(234, 179, 8, 0.16);
	--cd-ink: #f1e9ff;
	--cd-muted: #a99cc9;
	--cd-line: #3b2a66;
	--cd-card: #1b1038;
	--cd-bg: #120826;
	--cd-glass: rgba(27, 16, 56, 0.75);

	--border-color: #3b2a66;
	--bg-white: #1b1038;
	--title: #f1e9ff;

	--bs-body-color: #c4b6e2;
	--bs-body-bg: #120826;
	--bs-body-bg-rgb: 18, 8, 38;
	--bs-light: #241547;
	--bs-light-rgb: 36, 21, 71;
	--bs-gray-100: #241547;
	--bs-gray-200: #2d1b57;
	--bs-gray-300: #3b2a66;
	--bs-gray-400: #4d3a80;

	--adm-bg: #120826;
	--adm-card: #1b1038;
	--adm-border: #3b2a66;
	--adm-text: #f1e9ff;
	--adm-muted: #a99cc9;

	--cd-gray-50: #241547;
	--cd-gray-100: #2d1b57;
	--cd-gray-200: #3b2a66;

	--streak-slate-200: #3b2a66;
	--streak-slate-100: #2d1b57;
	--streak-slate-50: #241547;

	--sm-accent-soft: rgba(234, 179, 8, 0.18);
	--sm-accent-softer: rgba(234, 179, 8, 0.1);
}

/* ============================================================
   2. Dark theme - design token overrides
   ============================================================ */

html[data-theme="dark"] {
	color-scheme: dark;

	/* theme-local surface scale */
	--tt-bg: #0b1120;
	--tt-surface: #111a2e;
	--tt-surface-2: #17233b;
	--tt-surface-3: #1e2c48;
	--tt-line: #263450;
	--tt-line-strong: #33436a;
	--tt-ink: #e6ebf5;
	--tt-muted: #94a3b8;

	/* content dashboard tokens (content_dashboard.css) */
	--cd-accent: #7c80f2;
	--cd-accent-hover: #939bf7;
	--cd-accent-soft: rgba(124, 128, 242, 0.16);
	--cd-ink: #e6ebf5;
	--cd-muted: #94a3b8;
	--cd-line: #263450;
	--cd-card: #111a2e;
	--cd-bg: #0b1120;
	--cd-glass: rgba(17, 26, 46, 0.75);
	--cd-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
	--cd-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.45);
	--cd-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);

	/* main.css template tokens */
	--border-color: #263450;
	--bg-white: #111a2e;
	--title: #e6ebf5;

	/* bootstrap tokens (main.css) */
	--bs-body-color: #aeb9cc;
	--bs-body-bg: #0b1120;
	--bs-body-color-rgb: 174, 185, 204;
	--bs-body-bg-rgb: 11, 17, 32;
	--bs-light: #17233b;
	--bs-light-rgb: 23, 35, 59;
	--bs-dark: #e6ebf5;
	--bs-dark-rgb: 230, 235, 245;
	--bs-gray-100: #17233b;
	--bs-gray-200: #1e2c48;
	--bs-gray-300: #263450;
	--bs-gray-400: #33436a;
	--bs-gray-500: #64748b;
	--bs-gray-600: #94a3b8;
	--bs-gray-700: #c3cddd;
	--bs-gray-800: #dbe3ef;
	--bs-gray-900: #eef2f8;

	/* admin palette (pages/admin.css) */
	--adm-bg: #0b1120;
	--adm-card: #111a2e;
	--adm-border: #263450;
	--adm-text: #e6ebf5;
	--adm-muted: #94a3b8;
	--adm-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
	--adm-shadow-hover: 0 4px 10px rgba(108, 92, 231, 0.25), 0 10px 28px rgba(0, 0, 0, 0.45);

	/* org / tutor dashboard grays (pages/org_dashboard.css & co.) */
	--cd-gray-50: #17233b;
	--cd-gray-100: #1e2c48;
	--cd-gray-200: #263450;
	--cd-gray-500: #8b98ad;
	--cd-gray-600: #aab6c8;
	--cd-gray-700: #c3cddd;
	--cd-gray-900: #eef2f8;

	/* streaks palette (pages/streaks.css) */
	--streak-orange-soft: rgba(245, 158, 11, 0.14);
	--streak-slate-900: #eef2f8;
	--streak-slate-600: #c3cddd;
	--streak-slate-500: #94a3b8;
	--streak-slate-400: #64748b;
	--streak-slate-200: #263450;
	--streak-slate-100: #1e2c48;
	--streak-slate-50: #17233b;

	/* student management accent softs stay tinted, on dark */
	--sm-accent-soft: rgba(99, 102, 241, 0.18);
	--sm-accent-softer: rgba(99, 102, 241, 0.1);
}

/* ============================================================
   3. Dark theme - base surfaces & typography
   ============================================================ */

html[data-theme="dark"] body {
	background: var(--tt-bg);
	color: var(--bs-body-color);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
	color: var(--tt-ink);
}

html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--tt-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
	background: var(--tt-line-strong);
	border-radius: 8px;
}

/* Bootstrap utilities that hardcode light colours */
html[data-theme="dark"] .bg-white { background-color: var(--tt-surface) !important; }
/* The learner pages' <body class="bg-white"> is the page canvas, not a card */
html[data-theme="dark"] body.bg-white { background-color: var(--tt-bg) !important; }
html[data-theme="dark"] .bg-light { background-color: var(--tt-surface-2) !important; }
html[data-theme="dark"] .text-dark { color: var(--tt-ink) !important; }
html[data-theme="dark"] .text-black { color: var(--tt-ink) !important; }
html[data-theme="dark"] .text-muted { color: var(--tt-muted) !important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end { border-color: var(--tt-line) !important; }

/* Brand logos are dark artwork - render them white on dark chrome */
html[data-theme="dark"] img[src*="/logo/logo-2"],
html[data-theme="dark"] img[src*="/logo-1"] {
	filter: brightness(0) invert(1);
}

/* ============================================================
   4. Dark theme - component surfaces
   ============================================================ */

/* Broad, low-specificity hammer: anything that self-describes as a card,
   panel, tile or menu becomes a dark surface. :where() keeps specificity
   low so page CSS can still refine on top. The :not() chain skips classes
   that merely NAME a card/panel part but are text or decoration inside it
   (e.g. .ll-panel-title, .cd-course-item-subtitle) - without it those
   elements get painted as dark boxes behind their own text. -body keeps
   Bootstrap .card-body transparent so gradient hero cards show through;
   -number/-visual skip decorative card art (.org-card-number,
   .hero-card-visual) that must stay on its parent's gradient. tt-card-
   skips the /practice card-change transition classes (tt-card-enter,
   tt-card-rise), which otherwise got a surface box flashed on them. */
html[data-theme="dark"] :where([class*="card"], [class*="panel"], [class*="-tile"], [class*="-menu"]):where(:not([class*="fa-"]):not([class*="-title"]):not([class*="-label"]):not([class*="-text"]):not([class*="-sub"]):not([class*="-head"]):not([class*="-icon"]):not([class*="-item"]):not([class*="-count"]):not([class*="-crumb"]):not([class*="-meta"]):not([class*="-foot"]):not([class*="-body"]):not([class*="-number"]):not([class*="-visual"]):not([class*="tt-card-"])) {
	background-color: var(--tt-surface);
	border-color: var(--tt-line);
	color: inherit;
}

/* Inline-style backstop for templ files that hardcode light backgrounds */
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background: rgba(248, 250, 252"],
html[data-theme="dark"] [style*="background: rgba(255, 255, 255"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background-color: #f8f9fa"],
html[data-theme="dark"] [style*="background: #fafafa"],
/* JS that touches el.style re-serialises the whole attribute, turning hex
   colours into rgb() and defeating the hex matches above - match the
   serialised twins too (keywords like "white" survive serialisation). */
html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background: rgb(250, 250, 250)"],
html[data-theme="dark"] [style*="background: rgb(248, 249, 250)"],
html[data-theme="dark"] [style*="background: rgb(248, 250, 252)"],
html[data-theme="dark"] [style*="background: rgb(241, 245, 249)"] {
	background: var(--tt-surface-2) !important;
}

/* Progress-bar tracks rendered inline by templ (StudentProgressBar,
   practice_content's .progress-timer) */
html[data-theme="dark"] [style*="background:#eef2f7"],
html[data-theme="dark"] [style*="background: #f0f0f0"] {
	background-color: var(--tt-surface-3) !important;
}

html[data-theme="dark"] [style*="color: #0f172a"],
html[data-theme="dark"] [style*="color: #212529"],
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color: #334155"] {
	color: var(--tt-ink) !important;
}

html[data-theme="dark"] [style*="color: #475569"] {
	color: var(--tt-muted) !important;
}

/* Inline light borders (course.templ / practice_content.templ hardcode
   these on cards, badges, icon chips and dropzones) */
html[data-theme="dark"] [style*="solid #e2e8f0"],
html[data-theme="dark"] [style*="dashed #e2e8f0"],
html[data-theme="dark"] [style*="solid #f1f5f9"],
html[data-theme="dark"] [style*="solid #f0f0f0"],
html[data-theme="dark"] [style*="dashed #f0f0f0"],
html[data-theme="dark"] [style*="solid #eee"],
html[data-theme="dark"] [style*="dashed #eee"],
html[data-theme="dark"] [style*="solid #e1e8ff"],
html[data-theme="dark"] [style*="solid #eef2ff"],
html[data-theme="dark"] [style*="solid #f3f4f6"],
html[data-theme="dark"] [style*="solid #e8edf7"],
html[data-theme="dark"] [style*="solid #edf1f9"],
/* serialised twins - JS hover handlers rewrite style="" with rgb() colours */
html[data-theme="dark"] [style*="solid rgb(240, 240, 240)"],
html[data-theme="dark"] [style*="solid rgb(238, 238, 238)"] {
	border-color: var(--tt-line) !important;
}

/* Pale-blue inline canvases elsewhere (content_dashboard_modal, tiktok_question) */
html[data-theme="dark"] [style*="background: #e5f3ff"] {
	background: var(--tt-surface-2) !important;
}

/* Practice page canvas - was an inline #e5f3ff on <body> in practice.templ */
body.tt-practice-body { background-color: #e5f3ff !important; }
html[data-theme="dark"] body.tt-practice-body { background-color: var(--tt-bg) !important; }

/* Header chrome */
html[data-theme="dark"] .header {
	background: var(--tt-surface) !important;
	border-bottom-color: var(--tt-line) !important;
}

html[data-theme="dark"] .header .cd-class-toggle:hover,
html[data-theme="dark"] .header .cd-profile-toggle:hover {
	background: var(--tt-surface-3) !important;
	border-color: var(--cd-accent) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .header .cd-class-item:hover div {
	background: var(--tt-surface-3) !important;
}

/* Back chevron. component.BackButton writes the colour as an inline fill on the
   <path> (often #000), so dark mode has to repaint it; !important is needed to
   beat the .header.transparent .main-bar.sticky-header rules in main.css. */
html[data-theme="dark"] .back-anywhere-btn svg path,
html[data-theme="dark"] .back-btn svg path {
	fill: var(--tt-ink) !important;
}
html[data-theme="dark"] .header .back-btn:hover svg path {
	fill: #fff !important;
}

/* Top-bar stat pills (lives, streak, XP capsule, profile toggle): main.css
   and components/profile_menu.css hardcode white chips, and their legacy
   .theme-dark overrides never fire under data-theme. */
html[data-theme="dark"] .lives-link,
html[data-theme="dark"] .streaks-link,
html[data-theme="dark"] .progression-wrapper,
html[data-theme="dark"] .tt-profile-toggle {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .lives-link:hover,
html[data-theme="dark"] .streaks-link:hover,
html[data-theme="dark"] .progression-wrapper:hover,
html[data-theme="dark"] .tt-profile-toggle:hover {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .lives-counter,
html[data-theme="dark"] .streaks-counter {
	color: var(--tt-ink);
}
html[data-theme="dark"] .streaks-component { color: var(--tt-muted); }
html[data-theme="dark"] .progress-bar-outer { background: var(--tt-surface-3); }
html[data-theme="dark"] .tt-profile-toggle-name { color: var(--tt-ink); }
html[data-theme="dark"] .tt-profile-toggle-subtitle,
html[data-theme="dark"] .tt-profile-caret {
	color: var(--tt-muted);
}
html[data-theme="dark"] .device-avatar {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Dropdown menus (profile, class, org, generic bootstrap) */
html[data-theme="dark"] .cd-profile-menu,
html[data-theme="dark"] .cd-class-menu,
html[data-theme="dark"] .cd-org-menu,
html[data-theme="dark"] .tt-profile-dropdown,
html[data-theme="dark"] .dropdown-menu {
	background: var(--tt-surface) !important;
	border-color: var(--tt-line) !important;
	box-shadow: var(--cd-shadow-lg) !important;
	color: var(--tt-ink);
}

html[data-theme="dark"] .dropdown-item { color: var(--bs-body-color); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
	background-color: var(--tt-surface-2);
	color: var(--tt-ink);
}
html[data-theme="dark"] .dropdown-divider { border-color: var(--tt-line); }

/* Mobile nav flyout */
html[data-theme="dark"] #cd-mobile-menu {
	background: var(--tt-surface) !important;
	border-color: var(--tt-line) !important;
}

/* Hero banners built from white gradients */
html[data-theme="dark"] .cd-hero {
	background: linear-gradient(135deg, var(--tt-surface) 0%, var(--tt-surface-2) 100%);
	border-color: rgba(124, 128, 242, 0.22);
}

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
	background-color: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: var(--tt-ink);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus {
	background-color: var(--tt-surface-2);
	border-color: var(--cd-accent);
	color: var(--tt-ink);
}

html[data-theme="dark"] ::placeholder { color: var(--tt-muted); opacity: 0.8; }

html[data-theme="dark"] .input-group-text {
	background-color: var(--tt-surface-3);
	border-color: var(--tt-line-strong);
	color: var(--tt-muted);
}

/* Modals & offcanvas */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas {
	background-color: var(--tt-surface);
	border-color: var(--tt-line);
	color: var(--bs-body-color);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--tt-line); }
html[data-theme="dark"] .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

/* SweetAlert2 */
html[data-theme="dark"] .swal2-popup {
	background: var(--tt-surface) !important;
	color: var(--tt-ink) !important;
}
html[data-theme="dark"] .swal2-title { color: var(--tt-ink) !important; }
html[data-theme="dark"] .swal2-html-container { color: var(--bs-body-color) !important; }

/* Tables (incl. DataTables) */
html[data-theme="dark"] .table {
	color: var(--bs-body-color);
	border-color: var(--tt-line);
	--bs-table-bg: transparent;
	--bs-table-striped-bg: rgba(255, 255, 255, 0.03);
	--bs-table-striped-color: var(--bs-body-color);
	--bs-table-hover-bg: rgba(124, 128, 242, 0.08);
	--bs-table-hover-color: var(--tt-ink);
}
html[data-theme="dark"] .table thead th { color: var(--tt-ink); border-color: var(--tt-line); }
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th { border-color: var(--tt-line); }
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
	color: var(--bs-body-color) !important;
}
html[data-theme="dark"] .page-link {
	background-color: var(--tt-surface);
	border-color: var(--tt-line);
	color: var(--bs-body-color);
}
html[data-theme="dark"] .page-item.active .page-link {
	background-color: var(--cd-accent);
	border-color: var(--cd-accent);
	color: #fff;
}

/* List groups, accordions, breadcrumbs */
html[data-theme="dark"] .list-group-item {
	background-color: var(--tt-surface);
	border-color: var(--tt-line);
	color: var(--bs-body-color);
}
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button {
	background-color: var(--tt-surface);
	border-color: var(--tt-line);
	color: var(--tt-ink);
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
	background-color: var(--tt-surface-2);
	color: var(--cd-accent);
}

/* Buttons that assume a white page */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-white,
html[data-theme="dark"] .btn-outline-secondary {
	background-color: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: var(--tt-ink);
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-white:hover,
html[data-theme="dark"] .btn-outline-secondary:hover {
	background-color: var(--tt-surface-3);
	border-color: var(--cd-accent);
	color: var(--tt-ink);
}

/* main.css forces .btn-outline-light text to #000 for light pages */
html[data-theme="dark"] .btn-outline-light {
	color: var(--tt-ink);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .btn-outline-light:hover {
	background-color: var(--tt-surface-3);
	border-color: var(--cd-accent);
	color: var(--tt-ink);
}

/* Toggle appearance on dark */
html[data-theme="dark"] .tt-theme-seg {
	background: rgba(148, 163, 184, 0.12);
	border-color: rgba(148, 163, 184, 0.2);
}
html[data-theme="dark"] .tt-theme-thumb {
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.55);
}
html[data-theme="dark"] .tt-theme-seg button { color: var(--tt-muted); }
html[data-theme="dark"] .tt-theme-seg button:hover { color: var(--tt-ink); }
html[data-theme="dark"][data-theme-pref="light"] [data-theme-choice="light"],
html[data-theme="dark"][data-theme-pref="auto"] [data-theme-choice="auto"],
html[data-theme="dark"][data-theme-pref="dark"] [data-theme-choice="dark"] { color: #ffffff; }

/* Light-locked pages (learner side) never switch, so hide the toggle there.
   Also swallow the divider that follows it, otherwise the dropdown shows two
   adjacent divider lines where the toggle used to be. */
html[data-theme-lock="light"] .tt-theme-row { display: none; }
html[data-theme-lock="light"] [data-theme-toggle] + div { display: none; }

/* Sidebar course/group lists (content_dashboard.css hardcodes light greys) */
html[data-theme="dark"] .cd-course-item:hover { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-course-item.active { background: var(--tt-surface-3); }
/* ============================================================
   5. Dark theme - tutor workspace chrome & Students page
   ============================================================ */

/* Page canvas: .cd-page sits on a div inside body, so the body override
   doesn't reach it and pages/my_students.css paints it #f8fafc. */
html[data-theme="dark"] .cd-page { background-color: var(--tt-bg); }

/* Header nav pill (layouts/dashboard.css hardcodes a white navbar) */
html[data-theme="dark"] .header-nav {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
	box-shadow: none;
}
html[data-theme="dark"] .nav-link-item:hover,
html[data-theme="dark"] .nav-link-item.active {
	background: var(--tt-surface-3);
}
html[data-theme="dark"] .header-nav .nav-link-item + .nav-link-item::before,
html[data-theme="dark"] .header-nav .nav-link-item + .cd-org-nav::before {
	background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] #cd-nav-toggle {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
	color: var(--tt-ink);
}

/* Class & org pickers (white toggles / menu items in layouts/dashboard.css) */
html[data-theme="dark"] .cd-class-toggle[aria-expanded="true"] {
	background: var(--tt-surface-3) !important;
}
html[data-theme="dark"] .cd-class-item:hover {
	background: var(--tt-surface-2);
	color: var(--cd-accent);
}
html[data-theme="dark"] .cd-class-item-icon,
html[data-theme="dark"] .cd-class-item:hover .cd-class-item-icon {
	background: var(--tt-surface-3);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .cd-org-trigger[aria-expanded="true"] {
	background: var(--tt-surface-3);
	color: var(--cd-accent);
}
html[data-theme="dark"] .cd-org-item:hover { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-org-item-icon,
html[data-theme="dark"] .cd-org-item:hover .cd-org-item-icon {
	background: var(--tt-surface-3);
	border-color: var(--tt-line);
}

/* Students workspace: pages/my_students.css, pages/student_management.css
   and components/student_insights.css hardcode white cards & chips. */
html[data-theme="dark"] .sm-card { background: var(--tt-surface); }
html[data-theme="dark"] .sm-method-card {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .sm-method-card:hover { background: var(--tt-surface-3); }
html[data-theme="dark"] .sm-method-title { color: var(--tt-ink); }
html[data-theme="dark"] .sm-status-chip.pending {
	background: var(--tt-surface-3);
	color: var(--tt-muted);
}
html[data-theme="dark"] .sm-group-chip {
	background: rgba(59, 130, 246, 0.15);
	border-color: rgba(59, 130, 246, 0.3);
}
html[data-theme="dark"] .si-icon-btn,
html[data-theme="dark"] .si-page-btn {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .si-course-card,
html[data-theme="dark"] .si-mini-card {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
/* Insights chip/pill tones: light pastels flip to translucent colour washes */
html[data-theme="dark"] .si-tone-success { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
html[data-theme="dark"] .si-tone-warning { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
html[data-theme="dark"] .si-tone-danger { background: rgba(239, 68, 68, 0.16); color: #f87171; }
html[data-theme="dark"] .si-tone-info { background: rgba(14, 165, 233, 0.16); color: #38bdf8; }
html[data-theme="dark"] .si-tone-muted { background: var(--tt-surface-3); color: var(--tt-muted); }
html[data-theme="dark"] .si-tone-blue { background: rgba(59, 130, 246, 0.16); color: #60a5fa; }
html[data-theme="dark"] .si-tone-gold { background: rgba(234, 179, 8, 0.16); color: #facc15; }
html[data-theme="dark"] .si-tone-orange { background: rgba(249, 115, 22, 0.16); color: #fb923c; }
html[data-theme="dark"] .si-tone-slate { background: var(--tt-surface-3); color: var(--tt-muted); }
/* Progress-bar track and donut ring behind the coloured segments */
html[data-theme="dark"] .si-bartrack { background: var(--tt-surface-3); }
html[data-theme="dark"] .si-donut-track { stroke: var(--tt-surface-3); }
/* Highlight columns hardcode white cards */
html[data-theme="dark"] .si-highlight-col {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
/* Roster search box: #si-search hardcodes a light field at ID specificity */
html[data-theme="dark"] #si-search {
	background-color: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] #si-search:focus {
	background-color: var(--tt-surface-2);
	border-color: var(--cd-accent);
}
/* Roster table header sits transparent on the card in both themes */
html[data-theme="dark"] #si-table thead.bg-light {
	background: transparent !important;
}
html[data-theme="dark"] .si-detail-inner { background: var(--tt-surface-2); }
html[data-theme="dark"] .si-nocourse {
	background: var(--tt-surface);
	border-color: rgba(139, 92, 246, 0.4);
}
html[data-theme="dark"] .si-col-stub { background: var(--tt-line); }
/* Status donut track circle carries a light stroke attribute */
html[data-theme="dark"] .si-donut circle[stroke="#eef2f7"] { stroke: var(--tt-surface-3); }
/* Icon tint tones: light pastels flip to translucent colour washes */
html[data-theme="dark"] .si-ic-indigo { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
html[data-theme="dark"] .si-ic-pink { background: rgba(219, 39, 119, 0.18); color: #f9a8d4; }
html[data-theme="dark"] .si-ic-green { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
html[data-theme="dark"] .si-ic-orange { background: rgba(249, 115, 22, 0.18); color: #fdba74; }
html[data-theme="dark"] .si-ic-gold { background: rgba(234, 179, 8, 0.18); color: #fde047; }
html[data-theme="dark"] .si-ic-blue { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
html[data-theme="dark"] .si-ic-red { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
html[data-theme="dark"] .si-stat-icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

/* Profile dropdown internals (hardcoded light greys in
   content_dashboard.css / components/profile_menu.css) */
html[data-theme="dark"] .cd-profile-item,
html[data-theme="dark"] .tt-profile-item { color: var(--tt-ink); }
html[data-theme="dark"] .cd-profile-item:hover,
html[data-theme="dark"] .tt-profile-item:hover {
	background: var(--tt-surface-2);
	color: var(--cd-accent);
}
html[data-theme="dark"] .cd-profile-item-icon,
html[data-theme="dark"] .tt-profile-item-icon {
	background: var(--tt-surface-3);
	color: var(--tt-muted);
}
html[data-theme="dark"] .cd-profile-item:hover .cd-profile-item-icon,
html[data-theme="dark"] .tt-profile-item:hover .tt-profile-item-icon {
	background: rgba(124, 128, 242, 0.18);
	color: var(--cd-accent);
}
html[data-theme="dark"] .cd-profile-avatar {
	box-shadow: 0 0 0 4px var(--tt-surface), 0 0 0 6px rgba(124, 128, 242, 0.4),
		0 8px 22px -6px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .cd-profile-header {
	background: radial-gradient(120% 90% at 50% -20%, rgba(124, 128, 242, 0.2) 0%,
		rgba(139, 92, 246, 0.08) 45%, rgba(17, 26, 46, 0) 75%);
}
html[data-theme="dark"] .tt-profile-dropdown-header {
	background: radial-gradient(120% 90% at 50% -20%, rgba(124, 128, 242, 0.2) 0%,
		rgba(139, 92, 246, 0.08) 45%, rgba(17, 26, 46, 0) 75%);
}
html[data-theme="dark"] .tt-profile-avatar-lg {
	box-shadow: 0 0 0 4px var(--tt-surface), 0 0 0 6px rgba(124, 128, 242, 0.4),
		0 8px 22px -6px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .tt-profile-dropdown-name { color: var(--tt-ink); }
html[data-theme="dark"] .tt-profile-dropdown-email,
html[data-theme="dark"] .cd-profile-email {
	color: var(--tt-ink);
	background: var(--tt-surface-3);
}
html[data-theme="dark"] .tt-profile-divider { background: var(--tt-line); }
html[data-theme="dark"] .tt-profile-dropdown-footer,
html[data-theme="dark"] .cd-profile-footer { border-top-color: var(--tt-line); }
html[data-theme="dark"] .tt-profile-logout-btn,
html[data-theme="dark"] .cd-logout-btn { color: #f87171; }
html[data-theme="dark"] .tt-profile-logout-btn:hover,
html[data-theme="dark"] .cd-logout-btn:hover {
	background: rgba(239, 68, 68, 0.12);
	color: #fca5a5;
}
html[data-theme="dark"] .tt-profile-logout-btn i,
html[data-theme="dark"] .cd-logout-btn i { background: rgba(239, 68, 68, 0.18); }
html[data-theme="dark"] .tt-profile-invite-badge { box-shadow: 0 0 0 2px var(--tt-surface-2); }
html[data-theme="dark"] .tt-profile-invite-card {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .tt-profile-invite-text { color: var(--tt-ink); }
html[data-theme="dark"] .tt-profile-invite-decline {
	background: var(--tt-surface-3);
	color: var(--tt-muted);
	border-color: var(--tt-line);
}

/* ============================================================
   6. Dark theme - course library (/tutor/library)
   content_dashboard.css hardcodes white for the course hero,
   topic/subtopic accordions, item cards, chips and toolbars.
   ============================================================ */

html[data-theme="dark"] .cd-course-hero,
html[data-theme="dark"] .cd-course-hero-foot,
html[data-theme="dark"] .cd-topic {
	background: var(--tt-surface);
}
html[data-theme="dark"] .cd-topic:hover { border-color: var(--tt-line-strong); }
html[data-theme="dark"] .cd-topic summary { border-bottom-color: var(--tt-line); }
html[data-theme="dark"] .cd-topic summary:hover,
html[data-theme="dark"] .cd-topic > summary:hover,
html[data-theme="dark"] .cd-topic[open] > summary { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-subtopic { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-subtopic:hover,
html[data-theme="dark"] .cd-subtopic[open] { background: var(--tt-surface-3); }
html[data-theme="dark"] .cd-topic-count { box-shadow: none; }

/* Entity / course icons hardcode white tiles */
html[data-theme="dark"] .cd-entity-icon,
html[data-theme="dark"] .cd-course-head-icon {
	background: var(--tt-surface-3);
	border-color: var(--tt-line);
}

/* Content item cards inside subtopics */
html[data-theme="dark"] .cd-item { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-item .cd-type { box-shadow: none; }
html[data-theme="dark"] .cd-etest,
html[data-theme="dark"] .cd-edel {
	background: var(--tt-surface-3);
	color: var(--tt-muted);
}
html[data-theme="dark"] .cd-etest:hover,
html[data-theme="dark"] .cd-edel:hover { background: var(--tt-surface); }
html[data-theme="dark"] .cd-add-btn {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
}

/* Bulk-select action bar (uses --cd-ink as its bg, which flips light in dark mode) */
html[data-theme="dark"] .cd-bulkbar {
	background: var(--tt-surface-3);
	border: 1px solid var(--tt-line-strong);
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
}

/* View toggles / "Select All" toolbar in the hero foot */
html[data-theme="dark"] .cd-view-toggles-wrapper,
html[data-theme="dark"] .cd-view-toggles,
html[data-theme="dark"] .cd-select-all-wrapper {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .cd-select-all-wrapper:hover { background: var(--tt-surface-3); }
html[data-theme="dark"] .cd-select-all-topics:not(:checked),
html[data-theme="dark"] .cd-select-all-subtopic:not(:checked),
html[data-theme="dark"] .cd-select:not(:checked):not(:indeterminate) {
	background-color: var(--tt-surface-3);
	border-color: var(--tt-line-strong);
}

/* Attachment chips + dashed upload buttons (light values are !important) */
html[data-theme="dark"] .cd-attachment-item,
html[data-theme="dark"] .cd-attachment-tile {
	background: var(--tt-surface-2);
}
html[data-theme="dark"] .cd-attachment-upload,
html[data-theme="dark"] .cd-attachment-upload.dropzone {
	background: var(--tt-surface-2) !important;
	border-color: var(--tt-line-strong) !important;
}
html[data-theme="dark"] .cd-attachment-upload:hover {
	background: var(--tt-surface-3) !important;
}
html[data-theme="dark"] .cd-attachment-upload .dz-preview { background: var(--tt-surface-3); }
html[data-theme="dark"] .cd-ename:empty,
html[data-theme="dark"] .cd-editable:empty { background: var(--tt-surface-2); }

/* Resources explorer (tutor dashboard modal + /tutor/resources page) */
html[data-theme="dark"] .cd-resources { background: var(--tt-surface); }
html[data-theme="dark"] .cd-resources-toolbar { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-resources-filter {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: var(--tt-ink);
}
html[data-theme="dark"] .cd-res-count { background: var(--tt-surface-3); }
html[data-theme="dark"] .cd-smart-file { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-smart-new-badge {
	color: #fbbf24;
	background: rgba(245, 158, 11, 0.18);
}
html[data-theme="dark"] .cd-smart-done-check { border-color: var(--tt-surface); }

/* Subtopic header while AI is generating (.cd-regenerating hardcodes a
   near-white shimmer with !important) and the per-row magic buttons */
html[data-theme="dark"] .cd-regenerating {
	background: linear-gradient(90deg, var(--tt-surface-2) 0%, rgba(124, 128, 242, 0.22) 50%, var(--tt-surface-2) 100%) !important;
	background-size: 200% 100% !important;
}
html[data-theme="dark"] .cd-magic-subtopic:hover,
html[data-theme="dark"] .cd-magic-topic:hover {
	background: var(--cd-accent-soft);
	color: var(--cd-accent-hover);
}
html[data-theme="dark"] .cd-add-tile.cd-generate-tile:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--cd-accent) 10%, var(--cd-card)) 0%, color-mix(in srgb, var(--cd-accent) 18%, var(--cd-card)) 100%);
}

/* Course hero action buttons - Generate All + delete hardcode white pills
   (both plain and .has-banner glass variants) */
html[data-theme="dark"] .cd-magic-course,
html[data-theme="dark"] .cd-course-hero.has-banner .cd-magic-course {
	background: var(--tt-surface-2);
	backdrop-filter: none;
	border-color: var(--tt-line-strong);
	color: var(--cd-accent);
}
html[data-theme="dark"] .cd-magic-course:hover,
html[data-theme="dark"] .cd-course-hero.has-banner .cd-magic-course:hover {
	background: #8b5cf6;
	border-color: #8b5cf6;
	color: #fff;
}
html[data-theme="dark"] .cd-delete-course,
html[data-theme="dark"] .cd-course-hero.has-banner .cd-delete-course {
	background: var(--tt-surface-2);
	backdrop-filter: none;
	border-color: rgba(239, 68, 68, 0.4);
	color: #f87171;
}
html[data-theme="dark"] .cd-delete-course:hover,
html[data-theme="dark"] .cd-course-hero.has-banner .cd-delete-course:hover {
	background: #ef4444;
	border-color: #ef4444;
	color: #fff;
}
/* Edit Course on a banner hero hardcodes a white pill; match Generate All */
html[data-theme="dark"] .cd-course-hero.has-banner .cd-edit-course {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: var(--cd-accent);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .cd-course-hero.has-banner .cd-edit-course:hover {
	background: var(--cd-accent);
	border-color: var(--cd-accent);
	color: #fff;
}
/* Banner hero icon tile + sidebar course icon tiles hardcode white */
html[data-theme="dark"] .cd-course-hero.has-banner .cd-course-head-icon {
	background: var(--tt-surface-3);
	border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .cd-course-item-icon {
	background: var(--tt-surface-3);
	box-shadow: inset 0 0 0 1px var(--tt-line);
}

/* Content-type count badges (topic/subtopic rows) and item type chips:
   pastel light washes flip to translucent colour washes on dark. */
html[data-theme="dark"] .cd-counts .badge.cd-interactive,
html[data-theme="dark"] .cd-counts .badge.cd-static {
	background: var(--tt-surface-3);
	border-color: var(--tt-line-strong);
	box-shadow: none;
}
html[data-theme="dark"] .cd-counts .badge.type-pick,
html[data-theme="dark"] .cd-item .cd-type.type-pick { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.35); }
html[data-theme="dark"] .cd-counts .badge.type-pairs,
html[data-theme="dark"] .cd-item .cd-type.type-pairs,
html[data-theme="dark"] .cd-counts .badge.type-ask,
html[data-theme="dark"] .cd-item .cd-type.type-ask { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; border-color: rgba(139, 92, 246, 0.35); }
html[data-theme="dark"] .cd-counts .badge.type-fill,
html[data-theme="dark"] .cd-item .cd-type.type-fill { background: rgba(236, 72, 153, 0.18); color: #f9a8d4; border-color: rgba(236, 72, 153, 0.35); }
html[data-theme="dark"] .cd-counts .badge.type-drag,
html[data-theme="dark"] .cd-item .cd-type.type-drag { background: rgba(6, 182, 212, 0.18); color: #67e8f9; border-color: rgba(6, 182, 212, 0.35); }
html[data-theme="dark"] .cd-counts .badge.type-text,
html[data-theme="dark"] .cd-item .cd-type.type-text { background: var(--tt-surface-3); color: var(--tt-muted); border-color: var(--tt-line-strong); }
html[data-theme="dark"] .cd-counts .badge.type-image,
html[data-theme="dark"] .cd-item .cd-type.type-image { background: rgba(245, 158, 11, 0.18); color: #fcd34d; border-color: rgba(245, 158, 11, 0.35); }
html[data-theme="dark"] .cd-counts .badge.type-video,
html[data-theme="dark"] .cd-item .cd-type.type-video { background: rgba(239, 68, 68, 0.18); color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); }
html[data-theme="dark"] .cd-counts .badge.cd-interactive:hover {
	border-color: var(--cd-accent);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

/* Item body editors: markdown previews, answers, pairs, badges
   (content_dashboard.css hardcodes white/pastel surfaces there) */
html[data-theme="dark"] .cd-md-preview {
	background: var(--tt-surface-3);
	color: var(--tt-ink);
}
html[data-theme="dark"] .cd-answers li,
html[data-theme="dark"] .cd-pairs li {
	background: var(--tt-surface-3);
}
html[data-theme="dark"] .cd-pairs .cd-pair-v,
html[data-theme="dark"] .cd-desc,
html[data-theme="dark"] .cd-items.view-list .cd-item-body .cd-item-summary {
	color: var(--tt-muted);
}
html[data-theme="dark"] .cd-answers li.correct {
	background: rgba(16, 185, 129, 0.14);
	color: #6ee7b7;
	border-color: rgba(16, 185, 129, 0.5);
}
html[data-theme="dark"] .cd-correct-toggle {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: var(--tt-muted);
}
html[data-theme="dark"] .cd-correct-toggle:hover {
	background: rgba(16, 185, 129, 0.16);
	border-color: #10b981;
	color: #10b981;
}
html[data-theme="dark"] .cd-answers li.correct .cd-correct-toggle {
	background: #10b981;
	border-color: #10b981;
	color: #fff;
}
html[data-theme="dark"] .cd-source .cd-editable {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .cd-editable:focus,
html[data-theme="dark"] .cd-source .cd-editable:focus {
	background: var(--tt-surface-3);
}
html[data-theme="dark"] .cd-editable.cd-saving,
html[data-theme="dark"] .cd-ename.cd-saving {
	background: rgba(234, 179, 8, 0.18);
	border-color: rgba(234, 179, 8, 0.5);
}
html[data-theme="dark"] .cd-editable.cd-saved,
html[data-theme="dark"] .cd-ename.cd-saved {
	background: rgba(16, 185, 129, 0.18);
	border-color: rgba(16, 185, 129, 0.5);
}
html[data-theme="dark"] .cd-editable.cd-error,
html[data-theme="dark"] .cd-ename.cd-error {
	background: rgba(239, 68, 68, 0.18);
	border-color: rgba(239, 68, 68, 0.5);
}
html[data-theme="dark"] .cd-keywords .badge,
html[data-theme="dark"] .cd-region .badge {
	background: var(--tt-surface-3);
	color: var(--tt-muted);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .cd-urls .badge { background: var(--tt-surface-2); }
/* Keyword / drag-item chips hardcode #f1f5f9 */
html[data-theme="dark"] .cd-chip {
	background: var(--tt-surface-3);
	border-color: var(--tt-line-strong);
	color: var(--tt-ink);
}

/* Ask (open question) body: content_dashboard_item_bodies.templ paints the
   outer card inline with #fdfdff - too far from #fff for the [style*=]
   backstops - plus a slate heading, #e5e7eb divider and pastel badge. */
html[data-theme="dark"] .cd-ask-body {
	background: var(--tt-surface) !important;
	border-color: var(--tt-line) !important;
}
html[data-theme="dark"] .cd-ask-body h6[style*="#4b5563"] { color: var(--tt-ink) !important; }
html[data-theme="dark"] .cd-ask-body [style*="background: #e5e7eb"] { background: var(--tt-line-strong) !important; }
html[data-theme="dark"] .cd-ask-body .badge[style*="#f5f3ff"] {
	background: var(--cd-accent-soft) !important;
	color: var(--cd-accent) !important;
}

/* EasyMDE / CodeMirror markdown editor: content_dashboard.css hardcodes a
   white container, #f8fafc toolbar and white CodeMirror pane, while the text
   colour follows --cd-ink - which flips light on dark and vanishes on the
   still-white pane. Repaint the whole editor. (!important to beat the
   !important rules in content_dashboard.css.) */
html[data-theme="dark"] .EasyMDEContainer {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .editor-toolbar {
	background: var(--tt-surface-3) !important;
	border-bottom-color: var(--tt-line) !important;
}
html[data-theme="dark"] .CodeMirror,
html[data-theme="dark"] .CodeMirror-focused {
	background: var(--tt-surface-2) !important;
	color: var(--tt-ink) !important;
}
html[data-theme="dark"] .CodeMirror-cursor { border-left-color: var(--tt-ink) !important; }
html[data-theme="dark"] .CodeMirror-selected { background: var(--cd-accent-soft) !important; }
html[data-theme="dark"] .CodeMirror pre.CodeMirror-placeholder { color: var(--tt-muted) !important; }
html[data-theme="dark"] .cd-md-editable {
	background-color: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .cd-md-editor-wrap .tox .tox-toolbar__primary { background: var(--tt-surface-3) !important; }

/* Create-course wizard (.cd-step-modal): content_dashboard.css hardcodes
   white gradients on the card, stepper, dropzone and buttons. */
html[data-theme="dark"] .cd-step-modal { background: var(--tt-surface); }
html[data-theme="dark"] .cd-step-modal .modal-title {
	background: linear-gradient(90deg, var(--tt-ink) 0%, #a5b4fc 100%);
	-webkit-background-clip: text;
	background-clip: text;
}
html[data-theme="dark"] .cd-step-number {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .cd-step-header { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-pill-tabs {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .cd-step-modal .dropzone {
	background: var(--tt-surface-2) !important;
	border-color: var(--tt-line-strong) !important;
}
html[data-theme="dark"] .cd-step-modal .dropzone:hover,
html[data-theme="dark"] .cd-step-modal .dropzone.dz-drag-hover {
	background: var(--tt-surface-3) !important;
	border-color: var(--cd-accent) !important;
}
/* Create Course upload step */
html[data-theme="dark"] .cd-course-dz.dropzone {
	background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0.02) 100%), var(--tt-surface-2) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 50px -30px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .cd-course-dz.dropzone.dz-drag-hover {
	background: linear-gradient(180deg, rgba(99, 102, 241, 0.16) 0%, rgba(139, 92, 246, 0.06) 100%), var(--tt-surface-3) !important;
}
html[data-theme="dark"] .cd-course-dz.dropzone:hover {
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 28px 60px -30px rgba(99, 102, 241, 0.45), inset 0 0 0 1px rgba(129, 140, 248, 0.18);
}
html[data-theme="dark"] .cd-course-dz-glow { opacity: 0.8; }
html[data-theme="dark"] .cd-course-dz-title { color: var(--tt-ink); }
html[data-theme="dark"] .cd-course-dz-title u { color: #a5b4fc; border-bottom-color: rgba(165, 180, 252, 0.45); }
html[data-theme="dark"] .cd-course-dz-sub { color: var(--tt-muted); }
html[data-theme="dark"] .cd-course-dz-chip {
	background: var(--tt-surface-3);
	border-color: var(--tt-line);
	color: var(--tt-muted);
	box-shadow: none;
}
html[data-theme="dark"] .cd-course-dz.dropzone:hover .cd-course-dz-chip { color: var(--tt-ink); border-color: rgba(129, 140, 248, 0.45); }
html[data-theme="dark"] .cd-dz-item {
	background: var(--tt-surface-3);
	border-color: rgba(129, 140, 248, 0.25);
	box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .cd-dz-item-icon { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
html[data-theme="dark"] .cd-dz-item-name { color: var(--tt-ink); }
html[data-theme="dark"] .cd-dz-item-meta { color: var(--tt-muted); }
html[data-theme="dark"] .cd-dz-item-status { color: #a5b4fc; }
html[data-theme="dark"] .cd-dz-item-bar { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .cd-dz-item-done .cd-dz-item-icon { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
html[data-theme="dark"] .cd-dz-item-done .cd-dz-item-status { color: #4ade80; }
html[data-theme="dark"] .cd-attachments-title { color: var(--tt-muted); }
html[data-theme="dark"] .cd-attachments-title i { color: #a5b4fc; }
html[data-theme="dark"] .cd-attachments-count { background: rgba(99, 102, 241, 0.18); color: #c7d2fe; }
html[data-theme="dark"] .cd-attachment-tile {
	border-color: var(--tt-line);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
html[data-theme="dark"] .cd-attachment-tile:hover {
	border-color: rgba(129, 140, 248, 0.5);
	box-shadow: 0 18px 36px -20px rgba(99, 102, 241, 0.5);
}
html[data-theme="dark"] .cd-attachment-tile-icon { background: color-mix(in srgb, var(--tile-c) 18%, transparent); }
html[data-theme="dark"] .cd-attachment-tile-ext { box-shadow: 0 0 0 2px var(--tt-surface-2); }
html[data-theme="dark"] .cd-attachment-tile-name { color: var(--tt-ink); }
html[data-theme="dark"] .cd-attachment-tile-meta { color: var(--tt-muted); }
html[data-theme="dark"] .cd-attachment-tile-ok { color: #4ade80; }
html[data-theme="dark"] .cd-attachment-tile-warn { color: #fbbf24; }
html[data-theme="dark"] .cd-attachment-tile.is-unreadable {
	border-color: rgba(251, 191, 36, 0.45);
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(251, 191, 36, 0.03)), var(--tt-surface-2);
}
html[data-theme="dark"] .cd-attachment-tile.is-unreadable:hover { border-color: rgba(251, 191, 36, 0.7); }
html[data-theme="dark"] .cd-ai-status.is-warn { color: #fbbf24; }
html[data-theme="dark"] .cd-attachment-tile-remove { color: var(--tt-muted); }
html[data-theme="dark"] .cd-attachment-tile-remove:hover { background: rgba(239, 68, 68, 0.18); color: #f87171; }
html[data-theme="dark"] .cd-ai-status { color: #a5b4fc; background: rgba(99, 102, 241, 0.18); }
html[data-theme="dark"] .cd-ai-status.is-done { color: #4ade80; background: rgba(34, 197, 94, 0.16); }
html[data-theme="dark"] .cd-ai-status.is-failed { color: var(--tt-muted); background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-ai-status-retry { color: #a5b4fc; }
html[data-theme="dark"] .cd-appearance-section {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .cd-appearance-accordion .accordion-button { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-ap-search input {
	background: var(--tt-surface);
	border-color: var(--tt-line-strong);
	color: var(--tt-ink);
}
html[data-theme="dark"] .cd-ap-search input::placeholder { color: var(--tt-muted); }
html[data-theme="dark"] .cd-own-tab-lock, html[data-theme="dark"] .cd-own-staff { color: #fbbf24; }
html[data-theme="dark"] .cd-own-opt[data-tone="green"] { --own-tone: #22c55e; }
html[data-theme="dark"] .cd-own-opt[data-tone="amber"] { --own-tone: #f59e0b; }
html[data-theme="dark"] .cd-own-opt[data-tone="slate"] { --own-tone: #94a3b8; }
html[data-theme="dark"] .cd-step-modal .btn-light {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: var(--tt-ink);
}
html[data-theme="dark"] .cd-step-modal .btn-light:hover {
	background: var(--tt-surface-3);
	border-color: var(--cd-accent);
	color: var(--cd-accent);
}
html[data-theme="dark"] .cd-step-modal .form-control:focus,
html[data-theme="dark"] .cd-step-modal .form-select:focus {
	background: var(--tt-surface-3) !important;
}
html[data-theme="dark"] .cd-step-modal .cd-s2-field,
html[data-theme="dark"] .cd-step-modal .cd-s2-field.bg-light { background: var(--tt-surface-2) !important; }
html[data-theme="dark"] .cd-s2-field > label { color: var(--tt-muted); }
html[data-theme="dark"] .cd-s2-field .select2-container--default .select2-selection--single.cd-s2-selection .select2-selection__rendered { color: var(--tt-ink); }
html[data-theme="dark"] .cd-s2-field .select2-container--default .select2-selection--single.cd-s2-selection .select2-selection__placeholder { color: var(--tt-muted); }
html[data-theme="dark"] .cd-s2-field .select2-container--default .select2-selection--single.cd-s2-selection .select2-selection__arrow b { border-top-color: var(--tt-muted); }
html[data-theme="dark"] .cd-s2-field .select2-container--default.select2-container--open .select2-selection--single.cd-s2-selection .select2-selection__arrow b { border-bottom-color: var(--tt-muted); }
html[data-theme="dark"] .cd-s2-dropdown.select2-dropdown {
	background: var(--tt-surface);
	border-color: var(--tt-line-strong);
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .cd-s2-dropdown .select2-search--dropdown .select2-search__field {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: var(--tt-ink);
}
html[data-theme="dark"] .cd-s2-dropdown .select2-results__option { color: var(--tt-ink); }
html[data-theme="dark"] .cd-s2-dropdown .select2-results__option--selected:not(.select2-results__option--highlighted),
html[data-theme="dark"] .cd-s2-dropdown .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) { background: var(--tt-surface-3); color: #a5b4fc; }
html[data-theme="dark"] .cd-s2-dropdown .select2-results__option--highlighted { background: var(--cd-accent) !important; color: #fff !important; }
html[data-theme="dark"] .cd-notes-editor-shell .tox-tinymce { border-color: var(--tt-line-strong); }
html[data-theme="dark"] .cd-notes-editor-shell .tox .tox-toolbar__primary { background: var(--tt-surface-3) !important; border-bottom-color: var(--tt-line-strong); }
html[data-theme="dark"] .cd-notes-editor-shell textarea#c-notes { background: var(--tt-surface-2); border-color: var(--tt-line-strong); color: var(--tt-ink); }
html[data-theme="dark"] .cd-mark-scheme-wrap {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .cd-icon-option { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-icon-grid-container::-webkit-scrollbar-track { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-icon-grid-container::-webkit-scrollbar-thumb { background: var(--tt-line-strong); }

/* Icon chips set --bg-soft to pastel light colours inline; derive a dark
   tint from the accompanying --icon-color instead. */
html[data-theme="dark"] .cd-step-icon-bg,
html[data-theme="dark"] .cd-type-icon {
	background: color-mix(in srgb, var(--icon-color, var(--cd-accent)) 18%, transparent);
	box-shadow: none;
}

/* Add-content modal type cards */
html[data-theme="dark"] .cd-content-type {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .cd-content-type:hover { border-color: var(--cd-accent); }

/* Generate-content modal (gc-*) */
html[data-theme="dark"] .gc-course-card {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .gc-course-banner::after {
	background: linear-gradient(180deg, transparent 40%, var(--tt-surface-2) 100%);
}
html[data-theme="dark"] .gc-course-icon {
	background: var(--tt-surface-3);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .gc-topic {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .gc-topic-icon { background: var(--tt-surface-3); }
html[data-theme="dark"] .gc-subtopic {
	background: var(--tt-surface-3);
	border-color: var(--tt-line-strong);
	box-shadow: none;
}
html[data-theme="dark"] .gc-status {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
}

/* Validation hint popover + test-activity modal (inline light bg) */
/* main.css hardcodes .popover { background-color: #fff } (ignores --bs-popover-bg) */
html[data-theme="dark"] .cd-hint-popover.popover {
	--bs-popover-bg: var(--tt-surface-3);
	background-color: var(--tt-surface-3);
}
html[data-theme="dark"] .cd-hint-popover .popover-body { color: #f87171; }
html[data-theme="dark"] .cd-hint-popover .popover-arrow::after { border-top-color: var(--tt-surface-3); }
html[data-theme="dark"] .cd-hint-popover.bs-popover-bottom .popover-arrow::after { border-bottom-color: var(--tt-surface-3); }
html[data-theme="dark"] #testContentModal .modal-content { background: var(--tt-surface) !important; }

/* ============================================================
   7. Dark theme - organisation workspace (/org/billing, /org/tutors)
   org_shared_styles.go hardcodes light panels, stats and steppers.
   ============================================================ */

html[data-theme="dark"] .org-page {
	--org-border: var(--tt-line);
	--org-ink: var(--tt-ink);
}
html[data-theme="dark"] .org-card {
	background: var(--tt-surface);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .org-feature { color: var(--tt-ink); }
html[data-theme="dark"] .org-stat {
	background: linear-gradient(180deg, var(--tt-surface-2) 0%, var(--tt-surface-3) 100%);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .org-stat:hover { border-color: var(--tt-line-strong); }
html[data-theme="dark"] .org-stat-value { color: var(--tt-ink); }
html[data-theme="dark"] .org-stat-label { color: var(--tt-muted); }
html[data-theme="dark"] .org-progress-track { background: var(--tt-surface-3); }
html[data-theme="dark"] .org-setup-panel {
	background: linear-gradient(120deg, var(--tt-surface-2) 0%, rgba(99, 102, 241, 0.14) 100%);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .org-setup-divider { border-color: var(--tt-line-strong); }
html[data-theme="dark"] .org-stepper {
	background: var(--tt-surface);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .org-stepper input { color: var(--tt-ink); }
html[data-theme="dark"] .org-pill-muted {
	background: var(--tt-surface-3);
	color: var(--tt-muted);
}
html[data-theme="dark"] .org-pill-success { background: rgba(16, 185, 129, 0.18); color: #34d399; }
html[data-theme="dark"] .org-pill-warn { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
html[data-theme="dark"] .org-empty-icon,
html[data-theme="dark"] .org-invoice-icon,
html[data-theme="dark"] .org-avatar {
	background: rgba(99, 102, 241, 0.16);
	border-color: rgba(99, 102, 241, 0.3);
	color: #a5b4fc;
	box-shadow: none;
}
html[data-theme="dark"] .org-table > :not(caption) > * > * { border-bottom-color: var(--tt-line); }
html[data-theme="dark"] .org-table thead th { border-bottom-color: var(--tt-line); }
html[data-theme="dark"] .org-table tbody tr:hover { background: rgba(124, 128, 242, 0.06); }
html[data-theme="dark"] .org-amount { color: var(--tt-ink); }
html[data-theme="dark"] .org-search input {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: var(--tt-ink);
}
html[data-theme="dark"] .org-search input:focus {
	background: var(--tt-surface-2);
	border-color: var(--cd-accent);
	box-shadow: 0 0 0 4px rgba(124, 128, 242, 0.15);
}
html[data-theme="dark"] .org-invite-card {
	background: linear-gradient(120deg, var(--tt-surface-2) 0%, rgba(99, 102, 241, 0.14) 100%);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .org-card .btn-outline-primary {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: #a5b4fc;
}
html[data-theme="dark"] .org-card .btn-outline-primary:hover {
	background: rgba(99, 102, 241, 0.16);
	border-color: var(--cd-accent);
	color: #c7d2fe;
}
html[data-theme="dark"] .org-card .btn-link { color: #a5b4fc; }
html[data-theme="dark"] .org-card .btn-link:hover { color: #c7d2fe; }
/* The card-surface catch-all above sets color:inherit on .org-payment-card,
   which beats its own color:#fff - restore white text on the gradient card. */
html[data-theme="dark"] .org-payment-card { color: #fff; }
/* Empty-state card keeps a hardcoded light gradient; give it a dark surface
   and beat the color:#fff restore above so its copy stays readable. */
html[data-theme="dark"] .org-payment-card-empty {
	background: linear-gradient(135deg, var(--tt-surface-2) 0%, rgba(99, 102, 241, 0.12) 100%);
	border-color: rgba(124, 128, 242, 0.45);
	color: var(--tt-muted);
}
html[data-theme="dark"] .org-payment-card-empty .org-card-number { color: var(--tt-muted); }
html[data-theme="dark"] .org-chip-graphic-ghost {
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px) 50% 0 / 14px 100%,
		linear-gradient(0deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 50% / 100% 10px,
		linear-gradient(135deg, var(--tt-surface-3) 0%, rgba(124, 128, 242, 0.35) 100%);
}
html[data-theme="dark"] .org-how-row {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .org-how-row:hover {
	background: var(--tt-surface-3);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .org-how-icon {
	background: rgba(99, 102, 241, 0.16);
	color: #a5b4fc;
}
html[data-theme="dark"] .org-estimate-value { color: var(--tt-ink); }
html[data-theme="dark"] .org-stepper-btn { color: #a5b4fc; }

/* Org dashboard (/org): pages/org_dashboard.css hardcodes light surfaces */
html[data-theme="dark"] .org-section-card {
	background: var(--tt-surface);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .org-section-card:hover { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] .org-table-wrap thead th {
	background: var(--tt-surface);
	color: var(--tt-muted);
	border-bottom-color: var(--tt-line);
}
html[data-theme="dark"] .org-card-head { border-bottom-color: var(--tt-line); }
html[data-theme="dark"] .org-head-count {
	color: var(--tt-ink);
	background: rgba(var(--org-accent-rgb, 124, 128, 242), 0.22);
}
html[data-theme="dark"] .org-section-card::before { opacity: .65; }
html[data-theme="dark"] .org-accent-indigo { --org-accent-ink: #a5b4fc; }
html[data-theme="dark"] .org-accent-amber { --org-accent-ink: #fcd34d; }
html[data-theme="dark"] .org-accent-sky { --org-accent-ink: #7dd3fc; }
html[data-theme="dark"] .org-accent-emerald { --org-accent-ink: #6ee7b7; }
html[data-theme="dark"] .org-accent-rose { --org-accent-ink: #f9a8d4; }
html[data-theme="dark"] .org-card-head::after {
	background: linear-gradient(90deg, rgba(var(--org-accent-rgb, 124, 128, 242), 0.45), var(--tt-line) 30%, transparent);
}
html[data-theme="dark"] .org-section-card .cd-edit-link:hover,
html[data-theme="dark"] .org-empty-cta { color: #0f172a; }
html[data-theme="dark"] .org-tutor-accordion .accordion-item.org-list-item {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .org-invite-row {
	border-color: rgba(124, 128, 242, 0.4);
	background: rgba(124, 128, 242, 0.08);
}
html[data-theme="dark"] .org-invite-hint,
html[data-theme="dark"] .org-empty-hint { color: var(--tt-muted); }
html[data-theme="dark"] .org-empty {
	background:
		radial-gradient(380px 190px at 50% 0%, rgba(var(--org-accent-rgb, 124, 128, 242), 0.18), transparent 70%),
		var(--tt-surface-2);
}
html[data-theme="dark"] .org-preset-chip::after { opacity: .35; }
html[data-theme="dark"] .org-preset-add-chip { background: transparent; color: #fcd34d; }
html[data-theme="dark"] .org-table-wrap { scrollbar-color: var(--tt-line-strong) transparent; }
html[data-theme="dark"] .org-table-wrap::-webkit-scrollbar-thumb { background: var(--tt-line-strong); }
html[data-theme="dark"] .jm-chip {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: var(--tt-muted);
}
html[data-theme="dark"] .org-course-group-head {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
/* Roles & permissions page (pages/org_roles.css) */
html[data-theme="dark"] .org-role-card {
	background: var(--tt-surface);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .org-role-card:hover {
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
	border-color: rgba(124, 128, 242, 0.35);
}
html[data-theme="dark"] .org-role-name { color: var(--tt-ink); }
html[data-theme="dark"] .org-role-chip {
	background: var(--tt-surface-2);
	border-color: rgba(124, 128, 242, 0.4);
	color: #a5b4fc;
}
html[data-theme="dark"] .org-role-template {
	background: rgba(99, 102, 241, 0.08);
	color: #a5b4fc;
}
html[data-theme="dark"] .org-role-template:hover { background: rgba(99, 102, 241, 0.18); }
html[data-theme="dark"] .org-perm-accordion .accordion-item {
	background: var(--tt-surface);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .org-perm-group-header:hover { background: rgba(124, 128, 242, 0.06); }
html[data-theme="dark"] .org-perm-group-count {
	color: var(--tt-muted);
	background: var(--tt-surface-3);
}
html[data-theme="dark"] .org-perm-row:hover { background: rgba(124, 128, 242, 0.08); }
html[data-theme="dark"] .org-color-swatch.active {
	border-color: var(--tt-surface);
	box-shadow: 0 0 0 2px var(--tt-ink), 0 6px 14px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .org-assign-row { border-color: var(--tt-line); }
html[data-theme="dark"] .org-assign-row:hover {
	border-color: rgba(124, 128, 242, 0.45);
	background: rgba(124, 128, 242, 0.06);
}

html[data-theme="dark"] .next-step-card {
	background:
		radial-gradient(1200px 400px at 50% -20%, rgba(124, 58, 237, 0.16), transparent 60%),
		radial-gradient(800px 300px at 100% 120%, rgba(14, 165, 233, 0.12), transparent 60%),
		var(--tt-surface);
	border-color: rgba(124, 128, 242, 0.28);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .org-mini-search input:focus {
	background: var(--tt-surface-2);
	border-color: var(--cd-accent);
}

/* Content preset chips: light pastel gradients → tinted-on-dark */
html[data-theme="dark"] .org-preset-c0 { background: rgba(99, 102, 241, 0.16); border-color: rgba(99, 102, 241, 0.38); color: #a5b4fc; }
html[data-theme="dark"] .org-preset-c0 i { color: #818cf8; }
html[data-theme="dark"] .org-preset-c1 { background: rgba(6, 182, 212, 0.14); border-color: rgba(6, 182, 212, 0.38); color: #67e8f9; }
html[data-theme="dark"] .org-preset-c1 i { color: #22d3ee; }
html[data-theme="dark"] .org-preset-c2 { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.38); color: #86efac; }
html[data-theme="dark"] .org-preset-c2 i { color: #4ade80; }
html[data-theme="dark"] .org-preset-c3 { background: rgba(249, 115, 22, 0.14); border-color: rgba(249, 115, 22, 0.38); color: #fdba74; }
html[data-theme="dark"] .org-preset-c3 i { color: #fb923c; }
html[data-theme="dark"] .org-preset-c4 { background: rgba(217, 70, 239, 0.14); border-color: rgba(217, 70, 239, 0.38); color: #f0abfc; }
html[data-theme="dark"] .org-preset-c4 i { color: #e879f9; }
html[data-theme="dark"] .org-preset-c5 { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.38); color: #fca5a5; }
html[data-theme="dark"] .org-preset-c5 i { color: #f87171; }
html[data-theme="dark"] .org-preset-chip-x { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .org-preset-chip-x:hover {
	background: rgba(239, 68, 68, 0.22);
	color: #fca5a5;
}
html[data-theme="dark"] .org-preset-add-chip {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: #a5b4fc;
}
html[data-theme="dark"] .org-preset-add-chip:hover {
	border-color: var(--cd-accent);
	background: rgba(99, 102, 241, 0.16);
}

/* Preset add/edit modal */
html[data-theme="dark"] .org-preset-modal-close {
	background: var(--tt-surface-3);
	color: var(--tt-muted);
}
html[data-theme="dark"] .org-preset-modal-close:hover { background: var(--tt-line); }
html[data-theme="dark"] .org-preset-input,
html[data-theme="dark"] .org-preset-row input,
html[data-theme="dark"] .org-preset-row textarea {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: var(--tt-ink);
}
html[data-theme="dark"] .org-preset-icon-btn {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .org-preset-icon-btn:hover {
	border-color: var(--cd-accent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .org-preset-icon-menu {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .org-preset-icon-option {
	background: var(--tt-surface-3);
	color: var(--tt-muted);
}

/* Add-tutor modal method cards & search */
html[data-theme="dark"] .ot-method-card {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
	box-shadow: none;
}
html[data-theme="dark"] .ot-method-card:hover { border-color: var(--cd-accent); }
html[data-theme="dark"] .ot-icon-blue { background: rgba(59, 130, 246, 0.16); color: #60a5fa; }
html[data-theme="dark"] .ot-icon-purple { background: rgba(168, 85, 247, 0.16); color: #c084fc; }
html[data-theme="dark"] .ot-icon-orange { background: rgba(249, 115, 22, 0.16); color: #fb923c; }
html[data-theme="dark"] .ot-icon-pink { background: rgba(236, 72, 153, 0.16); color: #f472b6; }
html[data-theme="dark"] .ot-search-results {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

/* Unchecked checkboxes & switches ship white from Bootstrap; the checked
   state keeps its accent colour so only the resting state needs darkening.
   The switch knob is repainted light so it stays visible on the dark track. */
html[data-theme="dark"] .form-check-input:not(:checked) {
	background-color: var(--tt-surface-3);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,0.55)'/%3e%3c/svg%3e");
}

/* Roles & permissions page + role editor / assign modals (pages/org_roles.css) */
html[data-theme="dark"] .org-role-card {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .org-role-card:hover {
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
	border-color: rgba(124, 128, 242, 0.45);
}
html[data-theme="dark"] .org-role-name { color: var(--tt-ink); }
html[data-theme="dark"] .org-role-icon,
html[data-theme="dark"] .org-perm-group-icon {
	color: #a5b4fc;
	background: rgba(99, 102, 241, 0.16);
}
html[data-theme="dark"] .org-role-chip { background: var(--tt-surface-2); }
html[data-theme="dark"] .org-role-template {
	border-color: rgba(124, 128, 242, 0.5);
	background: rgba(99, 102, 241, 0.1);
	color: #a5b4fc;
}
html[data-theme="dark"] .org-role-template:hover { background: rgba(99, 102, 241, 0.2); }
html[data-theme="dark"] .org-perm-accordion .accordion-item {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .org-perm-group-header:hover { background: rgba(124, 128, 242, 0.07); }
html[data-theme="dark"] .org-perm-group-count {
	color: var(--tt-muted);
	background: var(--tt-surface-3);
}
html[data-theme="dark"] .org-perm-group-count.has-some {
	color: #a5b4fc;
	background: rgba(99, 102, 241, 0.18);
}
html[data-theme="dark"] .org-perm-counter {
	color: #a5b4fc;
	background: rgba(99, 102, 241, 0.15);
}
html[data-theme="dark"] .org-perm-row:hover { background: rgba(124, 128, 242, 0.08); }
html[data-theme="dark"] .org-color-swatch.active {
	border-color: var(--tt-surface);
	box-shadow: 0 0 0 2px var(--tt-ink), 0 6px 14px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .org-assign-row { border-color: var(--tt-line); }
html[data-theme="dark"] .org-assign-row:hover {
	border-color: rgba(124, 128, 242, 0.5);
	background: rgba(99, 102, 241, 0.08);
}

/* ============================================================
   8. Dark theme - deliver page (/tutor/deliver)
   deliver.css + pages/deliveries.css hardcode light tabs,
   section heads, assignment cards and the results modal.
   ============================================================ */

/* Tab pill bar */
html[data-theme="dark"] .deliver-tabs {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .deliver-tabs .nav-link { color: var(--tt-muted); }
html[data-theme="dark"] .deliver-tabs .nav-link:hover:not(.active) {
	color: var(--tt-ink);
	background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .deliver-tabs .nav-link.active {
	background: var(--tt-surface-3);
	color: var(--tt-ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--tt-line-strong);
}
html[data-theme="dark"] .deliver-tabs .nav-link.active i { color: #a5b4fc; }
html[data-theme="dark"] .nav-link:not(.active) .deliver-tab-count {
	background: var(--tt-surface-3);
	color: var(--tt-muted);
}
html[data-theme="dark"] .deliver-golive-btn {
	color: #34d399;
	background: rgba(16, 185, 129, 0.14);
	border-color: rgba(16, 185, 129, 0.35);
}
html[data-theme="dark"] .deliver-golive-btn:hover,
html[data-theme="dark"] .deliver-golive-btn:focus {
	background: #10b981;
	border-color: #10b981;
	color: #fff;
}

/* Assignments list header */
html[data-theme="dark"] .delivery-list-header {
	background: linear-gradient(135deg, var(--tt-surface) 0%, var(--tt-surface-2) 100%);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .delivery-list-header .delivery-list-title { color: var(--tt-ink); }
html[data-theme="dark"] .delivery-list-header .delivery-list-count {
	background: var(--tt-surface-2);
	border-color: rgba(99, 102, 241, 0.35);
	color: #a5b4fc;
	box-shadow: none;
}
html[data-theme="dark"] .delivery-list-header .delivery-list-overdue {
	background: rgba(239, 68, 68, 0.14);
	border-color: rgba(239, 68, 68, 0.38);
	color: #f87171;
}

/* Category section heads */
html[data-theme="dark"] .delivery-section-head {
	background: var(--tt-surface);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .delivery-section-title { color: var(--tt-ink); }
html[data-theme="dark"] .delivery-section-chevron {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
	color: var(--tt-muted);
}
html[data-theme="dark"] .delivery-section-head:hover .delivery-section-chevron {
	background: var(--tt-surface-3);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .delivery-section-count {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
	box-shadow: none;
}
html[data-theme="dark"] .delivery-section-more {
	background: var(--tt-surface);
	border-color: var(--tt-line);
	color: var(--bs-body-color);
	box-shadow: none;
}
html[data-theme="dark"] .delivery-section-more:hover {
	color: #a5b4fc;
	border-color: rgba(99, 102, 241, 0.4);
}

/* Assignment cards */
html[data-theme="dark"] .delivery-card {
	background: var(--tt-surface);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .delivery-card:hover { border-color: var(--tt-line-strong); }
html[data-theme="dark"] .delivery-card-title { color: var(--tt-ink); }
html[data-theme="dark"] .delivery-card-type-assessment { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
html[data-theme="dark"] .delivery-card-type-review { background: rgba(14, 165, 233, 0.16); color: #38bdf8; }
html[data-theme="dark"] .delivery-card-type-assignment { background: rgba(99, 102, 241, 0.16); color: #a5b4fc; }
html[data-theme="dark"] .delivery-split-bar { background: var(--tt-surface-3); }
html[data-theme="dark"] .delivery-split-caption { color: var(--tt-muted); }
html[data-theme="dark"] .delivery-date-pill {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
	color: var(--bs-body-color);
}
html[data-theme="dark"] .delivery-card-stats {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .delivery-cstat + .delivery-cstat { border-left-color: var(--tt-line); }
html[data-theme="dark"] .delivery-cstat-num { color: var(--tt-ink); }
html[data-theme="dark"] .delivery-cstat-muted { color: var(--tt-line-strong); }
html[data-theme="dark"] .delivery-avatars img,
html[data-theme="dark"] .delivery-avatars-more { border-color: var(--tt-surface); }
html[data-theme="dark"] .delivery-avatars-more {
	background: rgba(99, 102, 241, 0.18);
	color: #a5b4fc;
}
html[data-theme="dark"] .delivery-cta { color: #a5b4fc; }
html[data-theme="dark"] .delivery-card:hover .delivery-cta { color: #c7d2fe; }
html[data-theme="dark"] .delivery-action-btn {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
	color: var(--tt-muted);
}
html[data-theme="dark"] .delivery-action-edit:hover {
	background: rgba(99, 102, 241, 0.18);
	color: #a5b4fc;
	border-color: rgba(99, 102, 241, 0.4);
}
html[data-theme="dark"] .delivery-action-delete:hover {
	background: rgba(239, 68, 68, 0.16);
	color: #f87171;
	border-color: rgba(239, 68, 68, 0.4);
}
html[data-theme="dark"] .delivery-pulse-idle { background: var(--tt-surface-3); }

/* Completion ring: dark track + dark inner disc */
html[data-theme="dark"] .cd-ring {
	background: conic-gradient(var(--ring-color, #6366f1) calc(var(--pct, 0) * 1%), var(--tt-surface-3) 0);
	box-shadow: none;
}
html[data-theme="dark"] .cd-ring::before { background: var(--tt-surface); }
html[data-theme="dark"] .cd-ring-value { color: var(--tt-ink); }

/* Due-date badges: pastel chips → tinted-on-dark */
html[data-theme="dark"] .delivery-due-badge.due-overdue {
	background: rgba(239, 68, 68, 0.16) !important;
	color: #f87171 !important;
	border-color: rgba(239, 68, 68, 0.4);
}
html[data-theme="dark"] .delivery-due-badge.due-urgent {
	background: rgba(249, 115, 22, 0.16) !important;
	color: #fb923c !important;
	border-color: rgba(249, 115, 22, 0.4);
}
html[data-theme="dark"] .delivery-due-badge.due-soon {
	background: rgba(234, 179, 8, 0.16) !important;
	color: #facc15 !important;
	border-color: rgba(234, 179, 8, 0.4);
}
html[data-theme="dark"] .delivery-due-badge.due-later {
	background: rgba(34, 197, 94, 0.16) !important;
	color: #4ade80 !important;
	border-color: rgba(34, 197, 94, 0.4);
}

/* Results modal: timeline, KPIs, chart, chips */
html[data-theme="dark"] .cd-timeline { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-timeline-node strong { color: var(--tt-ink); }
html[data-theme="dark"] .cd-timeline-track { background: var(--tt-surface-3); }
html[data-theme="dark"] .cd-timeline-today { border-color: var(--tt-surface); }
html[data-theme="dark"] .cd-kpi { background: var(--tt-surface-2); }
html[data-theme="dark"] .cd-kpi-value { color: var(--tt-ink); }
html[data-theme="dark"] .cd-kpi-muted { color: var(--tt-line-strong); }
html[data-theme="dark"] .cd-chart {
	background: var(--tt-surface);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .cd-chart-colwrap { border-bottom-color: var(--tt-line); }
html[data-theme="dark"] .delivery-chip,
html[data-theme="dark"] .delivery-chip.delivery-chip-piece {
	background: var(--tt-surface-2);
	color: var(--bs-body-color);
}
html[data-theme="dark"] .delivery-chip:hover { background: var(--tt-surface-3); }
html[data-theme="dark"] .delivery-chip-more {
	background: transparent;
	color: var(--tt-muted);
}
html[data-theme="dark"] .delivery-chip-more:hover { color: var(--tt-ink); }
html[data-theme="dark"] .delivery-chip .delivery-chip-typename {
	background: var(--tt-surface);
	border-color: var(--tt-line);
}

/* Student rows in the results modal */
html[data-theme="dark"] .student-item {
	background: var(--tt-surface);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .student-item:hover {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .student-item-idle,
html[data-theme="dark"] .student-item-inactive { background: var(--tt-surface-2); }
html[data-theme="dark"] .student-item-inactive { border-color: var(--tt-line); }
html[data-theme="dark"] .student-item-idle .fw-bold { color: var(--tt-muted); }
html[data-theme="dark"] .student-avatar-ring .student-avatar,
html[data-theme="dark"] .student-item:hover .student-avatar-ring .student-avatar {
	box-shadow: 0 0 0 2px var(--tt-surface), 0 0 0 4px var(--ring-color, var(--tt-line-strong));
}
html[data-theme="dark"] .student-crown,
html[data-theme="dark"] .student-rank { border-color: var(--tt-surface); }
html[data-theme="dark"] .student-rank-2 { background: linear-gradient(135deg, #475569, #64748b); color: #e2e8f0; }
html[data-theme="dark"] .student-reactivate-btn {
	background: rgba(99, 102, 241, 0.16);
	border-color: rgba(99, 102, 241, 0.35);
	color: #a5b4fc;
}
html[data-theme="dark"] .delivery-stat-value { color: var(--tt-ink); }
html[data-theme="dark"] .delivery-task-row {
	background: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .delivery-task-row:hover {
	background: var(--tt-surface-3);
	border-color: var(--tt-line-strong);
}
html[data-theme="dark"] .dtr-name { color: var(--tt-ink); }
html[data-theme="dark"] .dtr-name.text-muted { color: var(--tt-muted); }
html[data-theme="dark"] .dtr-item {
	background: var(--tt-surface);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .dtr-item-idle { background: var(--tt-surface-2); }
html[data-theme="dark"] .dtr-item-label { color: var(--bs-body-color); }
html[data-theme="dark"] .dtr-item-idle .dtr-item-label { color: var(--tt-muted); }
html[data-theme="dark"] .student-avatar-popover {
	background: var(--tt-surface);
	border-color: var(--tt-line-strong);
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.65);
}
html[data-theme="dark"] .student-avatar-popover .student-popover-item { color: var(--bs-body-color); }
html[data-theme="dark"] .student-avatar-popover .student-popover-item:hover:not(:disabled) {
	background: var(--tt-surface-2);
	color: var(--tt-ink);
}
html[data-theme="dark"] .student-avatar-popover .student-popover-danger:hover:not(:disabled) {
	background: rgba(239, 68, 68, 0.14);
	color: #f87171;
}

/* Floating bottom menubar on student pages (main.css hardcodes a white
   frosted pill; the inline SVG icons hardcode fill="#292D32"). The
   .nav-link.active rule in main.css is more specific, so active icons
   keep their --primary fill. */
html[data-theme="dark"] .menubar-area {
	background-color: rgba(17, 26, 46, 0.85);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .menubar-area svg path {
	fill: var(--tt-ink);
}
/* The inline svg style="opacity: 0.6" multiplied by the duotone path's
   opacity="0.4" left inactive icons at ~24% on the dark pill, near invisible.
   Lift both (inline styles need !important) so every tab reads clearly. */
html[data-theme="dark"] .menubar-area .toolbar-inner .nav-link svg {
	opacity: 0.85 !important;
}
html[data-theme="dark"] .menubar-area .toolbar-inner .nav-link:not(.active) svg path[opacity] {
	opacity: 0.6;
}
html[data-theme="dark"] .menubar-area .toolbar-inner .nav-link:not(.active):hover svg {
	opacity: 1 !important;
}

/* Empty state */
html[data-theme="dark"] .delivery-empty-card {
	border-color: rgba(99, 102, 241, 0.3);
	background: linear-gradient(180deg, var(--tt-surface) 0%, var(--tt-surface-2) 100%);
}
html[data-theme="dark"] .delivery-empty-card .delivery-empty-icon {
	background: rgba(99, 102, 241, 0.16);
	color: #a5b4fc;
	box-shadow: none;
}

/* ---- Deliver course picker (launchpad browse state + sidebar tree).
   deliver.css hardcodes white cards, pastel chips and slate inks for
   the "pick a course" grid; repaint them on the dark surface scale.
   Several base rules carry !important, so the overrides here must too. ---- */

/* Sidebar shell: white card → dark surface (both browse + preview states) */
html[data-theme="dark"] .cd-sidebar {
	background: var(--tt-surface);
	border-right-color: var(--tt-line);
}
html[data-theme="dark"] .cd-layout.cd-empty .cd-sidebar {
	background:
		radial-gradient(1100px 480px at 12% -8%, rgba(124, 128, 242, 0.12), transparent 60%),
		radial-gradient(900px 420px at 88% -4%, rgba(168, 85, 247, 0.10), transparent 60%),
		radial-gradient(800px 460px at 50% 112%, rgba(6, 182, 212, 0.08), transparent 60%),
		var(--tt-bg) !important;
	box-shadow: none !important;
}

/* Search pill (deliver.css forces a white glass bg with !important) */
html[data-theme="dark"] .cd-layout.cd-empty .cd-sidebar-card > .mb-3 .input-group {
	background: rgba(17, 26, 46, 0.9) !important;
	border-color: rgba(124, 128, 242, 0.3) !important;
	box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.5) !important;
}

/* Expand / collapse / clear chips */
html[data-theme="dark"] #content-expand-all,
html[data-theme="dark"] #content-collapse-all {
	background: var(--tt-surface-2);
	color: var(--tt-muted) !important;
}
html[data-theme="dark"] #content-expand-all:hover,
html[data-theme="dark"] #content-collapse-all:hover {
	background: var(--cd-accent-soft);
	color: var(--cd-accent) !important;
}
html[data-theme="dark"] #content-clear { background: rgba(239, 68, 68, 0.14); color: #f87171 !important; }
html[data-theme="dark"] #content-clear:hover { background: rgba(239, 68, 68, 0.22); }

/* Course cards: glass white → glass dark (grid state and sidebar list) */
html[data-theme="dark"] .course-node {
	border-color: var(--tt-line) !important;
}
html[data-theme="dark"] .cd-layout.cd-empty .course-node {
	background: rgba(17, 26, 46, 0.85);
	border-color: var(--tt-line) !important;
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .course-node:hover {
	border-color: rgba(124, 128, 242, 0.5) !important;
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .cd-layout.cd-empty .course-node:hover {
	border-color: rgba(124, 128, 242, 0.5) !important;
	box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.65) !important;
}
/* Hover sheen sweep is a white flare - soften it on dark */
html[data-theme="dark"] .cd-layout.cd-empty .course-node::after {
	background: linear-gradient(105deg, transparent, rgba(230, 235, 245, 0.08), transparent);
}
/* !important: deliver.templ inlines background:#fff on the header */
html[data-theme="dark"] .course-node > .deliver-node-header { background: var(--tt-surface) !important; }
html[data-theme="dark"] .course-node > .deliver-node-header > .rounded-3.bg-white {
	background: var(--tt-surface-2) !important;
	/* border-color is inlined with !important in the templ; kill the width instead */
	border-width: 0 !important;
}
html[data-theme="dark"] .cd-layout.cd-empty .course-node > .deliver-node-header { background: transparent !important; }
html[data-theme="dark"] .course-node.open > .deliver-node-header,
html[data-theme="dark"] .cd-layout.cd-empty .course-node.open > .deliver-node-header {
	border-bottom-color: var(--tt-line);
}
html[data-theme="dark"] .cd-layout.cd-empty .course-node .deliver-children {
	background: rgba(11, 17, 32, 0.5);
}

/* Course icon orb: pale indigo gradient → dark inset tile */
html[data-theme="dark"] .cd-layout.cd-empty .course-node > .deliver-node-header > .rounded-3 {
	background: linear-gradient(135deg, var(--tt-surface-2), var(--tt-surface-3)) !important;
	border-color: rgba(124, 128, 242, 0.28) !important;
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6) !important;
}

/* Row labels, tags and counts */
html[data-theme="dark"] .deliver-node-header > .flex-grow-1 > h5.deliver-course-title { color: var(--tt-ink); }
html[data-theme="dark"] .deliver-tag-qual {
	background: rgba(99, 102, 241, 0.16);
	color: #a5b4fc;
	border-color: rgba(99, 102, 241, 0.35);
}
html[data-theme="dark"] .deliver-tag-board {
	background: rgba(16, 185, 129, 0.14);
	color: #34d399;
	border-color: rgba(16, 185, 129, 0.35);
}
html[data-theme="dark"] .deliver-tag-class {
	background: rgba(249, 115, 22, 0.14);
	color: #fb923c;
	border-color: rgba(249, 115, 22, 0.35);
}
html[data-theme="dark"] .deliver-node-header .badge {
	background: var(--tt-surface-3) !important;
	color: var(--tt-muted) !important;
}

/* Tree rows: hover / selected / partial / active-preview washes */
html[data-theme="dark"] .deliver-node-header:hover {
	background-color: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .piece-node .deliver-node-header:hover { background-color: var(--tt-surface-2); }
html[data-theme="dark"] .deliver-node.selected > .deliver-node-header,
html[data-theme="dark"] .student-delivery-card.selected {
	background-color: rgba(124, 128, 242, 0.12);
	border-color: rgba(124, 128, 242, 0.45) !important;
}
html[data-theme="dark"] .deliver-node.partial > .deliver-node-header {
	background-color: var(--tt-surface-2);
	border-color: var(--tt-line);
}
html[data-theme="dark"] .deliver-node.active-preview > .deliver-node-header {
	background-color: rgba(124, 128, 242, 0.12);
	border-color: rgba(124, 128, 242, 0.45);
	box-shadow: none;
}
html[data-theme="dark"] .deliver-caret:hover,
html[data-theme="dark"] .deliver-node.open > .deliver-node-header .deliver-caret {
	background-color: var(--tt-surface-3);
	color: var(--cd-accent);
}
html[data-theme="dark"] .deliver-children::before { background: var(--tt-line); }
/* Topic / subtopic icon tiles: deliver.templ inlines pastel backgrounds
   (#fffbeb cream, #ecfeff pale cyan) that glare white on dark - repaint
   as tinted-on-dark chips (!important to beat the inline styles). */
html[data-theme="dark"] .topic-node > .deliver-node-header > .rounded-2 {
	background: rgba(245, 158, 11, 0.16) !important;
	color: #fbbf24 !important;
}
html[data-theme="dark"] .subtopic-node > .deliver-node-header > .rounded-2 {
	background: rgba(6, 182, 212, 0.16) !important;
	color: #22d3ee !important;
}
html[data-theme="dark"] .delivery-scroll-area::-webkit-scrollbar-thumb { background: var(--tt-line-strong); }

/* Play buttons on course rows (pale indigo pills) */
html[data-theme="dark"] .course-node > .deliver-node-header > .play-node-btn {
	background: var(--cd-accent-soft) !important;
	border-color: rgba(124, 128, 242, 0.35);
}
html[data-theme="dark"] .play-node-btn:hover,
html[data-theme="dark"] .course-node > .deliver-node-header > .play-node-btn:hover {
	background-color: rgba(124, 128, 242, 0.3) !important;
}

/* Mobile drawer toggle: the gradient handle works on both themes, just
   soften the glow so it doesn't bloom against the dark backdrop. */
html[data-theme="dark"] #deliver-sidebar-fab {
	box-shadow: 0 8px 24px -6px rgba(79, 70, 229, 0.4);
}

/* Bottom action bar: white glass → dark glass */
html[data-theme="dark"] #delivery-action-bar {
	background: rgba(11, 17, 32, 0.92);
	border-top-color: var(--tt-line);
	box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .delivery-config { border-bottom-color: var(--tt-line); }
html[data-theme="dark"] .delivery-config-divider { background: var(--tt-line); }
html[data-theme="dark"] .delivery-type-btn {
	background: var(--tt-surface-2);
	border-color: var(--tt-line-strong);
	color: #a5b4fc;
	box-shadow: none;
}
html[data-theme="dark"] .delivery-pick-btn { background: var(--tt-surface-2); }
html[data-theme="dark"] .delivery-summary-pill {
	background: var(--tt-surface-2);
	color: var(--bs-body-color);
}
html[data-theme="dark"] .delivery-cancel-btn { color: var(--tt-muted); }
html[data-theme="dark"] .delivery-cancel-btn:hover {
	background: var(--tt-surface-2);
	color: var(--tt-ink);
}

/* Live-update toasts (pages/deliver.css: white glass, slate inks) */
html[data-theme="dark"] .tlu-toast {
	background: rgba(17, 26, 46, 0.92);
	border-color: var(--tt-line-strong);
	box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .tlu-toast-title { color: var(--tt-ink); }
html[data-theme="dark"] .tlu-toast-avatar { box-shadow: 0 0 0 2px var(--tt-surface), 0 0 0 4px #a5b4fc; }
html[data-theme="dark"] #tlu-sound-toggle {
	background: rgba(17, 26, 46, 0.9);
	border-color: var(--tt-line);
	color: var(--tt-muted);
}

/* ============================================================
   9. Dark theme - practice page content cards
   practice_content.templ paints every card inline (#fff cards,
   #fafafa fields, #1a1a1a text), and the practice JS rewrites
   the cards' style attributes (transitions, hover handlers),
   which re-serialises the inline colours and can defeat the
   [style*=] backstops. These rules key on the stable
   li[data-type] hooks instead and use !important to beat the
   inline styles. Answered pick/pair states keep their tinted
   overrides from the per-component stylesheets.
   ============================================================ */

html[data-theme="dark"] li[data-uuid][data-type] {
	background: var(--tt-surface) !important;
	border-color: var(--tt-line) !important;
}

/* Question / prompt / body text (inline #1a1a1a, #1a1a2e, #333) */
html[data-theme="dark"] li[data-type] .question-text,
html[data-theme="dark"] li[data-type] .text-content,
html[data-theme="dark"] li[data-type] .pairs-title,
html[data-theme="dark"] li[data-type] h2,
html[data-theme="dark"] li[data-type] .fib {
	color: var(--tt-ink) !important;
}
html[data-theme="dark"] li[data-type] .form-label { color: var(--tt-muted) !important; }

/* Card progress-timer track (inline #f0f0f0) */
html[data-theme="dark"] li[data-type] .progress-timer { background: var(--tt-surface-3) !important; }

/* Free-response textarea: inline #fafafa field whose onfocus/onblur
   handlers also rewrite the inline background */
html[data-theme="dark"] li[data-type] .question-response {
	background: var(--tt-surface-2) !important;
	border-color: var(--tt-line-strong) !important;
	color: var(--tt-ink) !important;
}
html[data-theme="dark"] li[data-type] .char-count-pill {
	background: var(--tt-surface-3) !important;
	color: var(--tt-muted);
}

/* Pick answers, resting state (#fafafa buttons, white A/B/C/D tiles).
   Hover lightening comes from inline handlers, so repaint it here too. */
html[data-theme="dark"] .pickBtn:not(.btn-success):not(.btn-danger) {
	background: var(--tt-surface-2) !important;
	border-color: var(--tt-line) !important;
	color: var(--tt-ink) !important;
}
html[data-theme="dark"] .pickBtn:not(.btn-success):not(.btn-danger):hover {
	background: var(--tt-surface-3) !important;
	border-color: var(--cd-accent) !important;
}
html[data-theme="dark"] .pickBtn:not(.btn-success):not(.btn-danger) .option-indicator {
	background: var(--tt-surface-3) !important;
	border-color: var(--tt-line-strong) !important;
	color: var(--tt-muted) !important;
}

/* Fill-the-blank container (inline #fafafa) */
html[data-theme="dark"] li[data-type] .fill-text-container {
	background: var(--tt-surface-2) !important;
	border-color: var(--tt-line) !important;
}

/* Drag: word pool + the two drop regions (inline #f9f9f9 / #f8faff) */
html[data-theme="dark"] li[data-type] .itemzone {
	background: var(--tt-surface-2) !important;
	border-color: var(--tt-line) !important;
}
html[data-theme="dark"] li[data-type] .imageuploadify {
	background: var(--tt-surface-2) !important;
	border-color: var(--tt-line-strong) !important;
}

/* Image cards: the readability veil over the ambient backdrop is a white
   gradient inline; flip it to a dark one (match both the authored,
   space-less rgba and its serialised spaced twin). */
html[data-theme="dark"] li[data-type="image"] [style*="rgba(255,255,255,0.35)"],
html[data-theme="dark"] li[data-type="image"] [style*="rgba(255, 255, 255, 0.35)"] {
	background: linear-gradient(180deg, rgba(11, 17, 32, 0.35) 0%, rgba(11, 17, 32, 0.55) 60%, rgba(11, 17, 32, 0.75) 100%) !important;
}

/* Ambient image backdrop (content_attached_image.js injects white veils
   over the blurred cover art; multiply-blended blobs vanish on dark, so
   glow them with screen blending and flip the veils to the page colour) */
html[data-theme="dark"] .attached-image-ambient .ambient-blob {
	mix-blend-mode: screen;
}
html[data-theme="dark"] .attached-image-ambient .ambient-veil {
	background:
		radial-gradient(ellipse 90% 60% at 50% 32%, rgba(11, 17, 32, 0.78), rgba(11, 17, 32, 0.18) 72%),
		linear-gradient(180deg, rgba(11, 17, 32, 0.4), rgba(11, 17, 32, 0.58) 55%, rgba(11, 17, 32, 0.78));
}
html[data-theme="dark"] .attached-image-ambient.ambient-wash .ambient-veil {
	background:
		radial-gradient(ellipse 78% 72% at 50% 42%, rgba(17, 26, 46, 0.94), rgba(17, 26, 46, 0.6) 62%, rgba(17, 26, 46, 0.24)),
		linear-gradient(180deg, rgba(17, 26, 46, 0.5), rgba(17, 26, 46, 0.6));
}

/* AI feedback card (.ai-feedback-card): themed via its own --gf-* vars in
   practice/util.js, which map to --tt-* tokens on dark. */

/* Admin edit/delete pill (inline space-less rgba(255,255,255,0.9), which
   the rgba backstop above never matches) */
html[data-theme="dark"] li[data-type] .admin-controls {
	background: rgba(17, 26, 46, 0.9) !important;
	border-color: var(--tt-line) !important;
}
html[data-theme="dark"] li[data-type] .admin-action-btn { color: var(--tt-muted) !important; }
html[data-theme="dark"] li[data-type] .admin-divider { background: var(--tt-line) !important; }

/* Classroom activity materials panel + chips (pale blue gradient, white
   chips with #445 text) */
html[data-theme="dark"] li[data-type] .materials-panel {
	background: var(--tt-surface-2) !important;
	border-color: var(--tt-line) !important;
}
html[data-theme="dark"] li[data-type] .materials-panel span {
	background: var(--tt-surface-3) !important;
	border-color: var(--tt-line-strong) !important;
	color: var(--tt-ink) !important;
}

/* ============================================================
   App webview (Capacitor stamps (app|dev).tutorio.* in the UA;
   the ThemeAssets boot script mirrors it as html[data-app]).
   The stock WKWebView rubber-bands the root scroller, letting
   pages be dragged up "into nothing" past the top edge -
   suppress that, and paint the html canvas in the theme colour
   so any residual overscroll glow matches the page instead of
   flashing white.
   ============================================================ */

html[data-app] {
	overscroll-behavior-y: none;
	background-color: #ffffff;
}
html[data-app] body {
	overscroll-behavior-y: none;
}
html[data-app][data-theme="dark"] {
	background-color: #0b1120;
}

/* ============================================================
   Mobile modal scrolling: keep touch scrolls inside an open
   modal from chaining into the page behind it. The JS half
   (modal_scroll_lock.js) pins the body on touch devices, since
   iOS Safari ignores Bootstrap's overflow:hidden body lock.
   ============================================================ */

.modal {
	overscroll-behavior-y: contain;
}
.modal-body {
	overscroll-behavior-y: contain;
}

/* ============================================================
   Page preloaders (#loader/#preloader .spinner) reference this
   keyframe, but the block that defined it in the SCSS source
   never made it into the compiled main.css - without it every
   spinner renders frozen. theme.css loads on all app pages, so
   define it once here.
   ============================================================ */

@keyframes loading {
	to { transform: rotate(360deg); }
}

/* Course hero / course-card icon squircle (main.css paints .course-icon-container #fff) */
html[data-theme="dark"] .course-icon-container {
	background: var(--tt-surface-2);
}