/**
 * =============================================================================
 * CCTRL365 - AKADEMI-KURSKATALOG.CSS
 * =============================================================================
 * Kursarkiv-layout och kurskort enligt redesign (Claude Design 2026).
 * Lases in pa is_post_type_archive('courses') och course-category-taxonomisidor.
 * Kraver: tutor.css last in fore.
 * =============================================================================
 */

/* ============================================================================
   1) DESIGN TOKENS - akademi-kontext
   --akademi-* anti-mönstret borttaget (GOLD-STANDARD regel 1). Konsumerar nu
   globala Claude-tokens direkt ur cctrl-core.css. Mappning (#91 Fas 1, 2026-06-29):
   --akademi-primary→--lav-500, -primary-dk→--lav-600, -secondary/-text→--lav-900,
   -muted→--muted, -bg-tint→--lav-50, -border→--outline. (Pia godkänt rak mappning
   inkl. de två minimala nyansskiftena bg-tint/border.)
   ============================================================================ */

/* ============================================================================
   2) KURSARKIV - sida-layout
   ============================================================================ */
.course-archive-page.tutor-container,
.tutor-wrap-parent.tutor-container {
	/* Delad lavendel-canvas (samma formel som .ctp-shell: blogg/podd/biblioteket/
	   mitt-medlemskap). Token-härledd → flippar automatiskt i dark. */
	background: color-mix(in srgb, var(--lav-500) 8%, var(--bg));
	padding-top: 32px !important;
	padding-bottom: 64px !important;
}

/* Rubrik + antal */
.cctrl-kurskatalog-header {
	max-width: 1180px;
	margin: 0 auto 28px;
}
.cctrl-kurskatalog-header h1 {
	font-weight: 800;
	font-size: clamp(22px, 3vw, 30px);
	letter-spacing: -.02em;
	color: var(--lav-900);
	margin: 0 0 6px;
}
.cctrl-kurskatalog-header p {
	font-size: 15px;
	color: var(--muted);
	margin: 0;
}
.cctrl-kurskatalog-header strong {
	color: var(--lav-900);
}

/* Gor Tutor-raden till CSS Grid.
   MOBIL-FORST: default = EN full-breddskolumn. Tutor gor filter-sidebaren till en
   off-canvas drawer under sitt xl-brytpunkt (1200px) -> sidebaren lamnar grid-flodet.
   Reserverar vi da ett fast forsta spar (240px/200px) hamnar det enda kvarvarande
   barnet (innehallet) i det smala sparet och HELA katalogen kollapsar (kort ~65px).
   Darfor: tvakolumn (sidebar + innehall) laggs till FORST vid >=1200px nedan. */
.course-archive-page .tutor-row.tutor-gx-xl-5 {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 28px;
	/* #53: flytande app-shell-kort. Speglar .ctp-shell och #84:s implementation i
	   pmpro-dashboard.css. width: min() i stallet for max-width sa kortet far samma
	   sidoinset som blogg/podd pa sma skarmar - canvas-regeln nedan har bara
	   topp/botten-padding. 1180px ar katalogens EGEN kolumnbredd, inte bloggens 1280.
	   INGET overflow: hidden - Tutor gor filter-sidebaren till en off-canvas drawer
	   under 1200px, och den skulle klippas bort. Filtret hade slutat ga att oppna pa
	   varje laptop under full bredd och pa hela mobilen. */
	width: min(1180px, 100% - clamp(20px, 5vw, 72px));
	margin: 0 auto !important;
	align-items: start;
	padding: var(--space-4);
	background: var(--bg-elev);
	border-radius: 26px;
	box-shadow: 0 24px 70px rgba(30, 27, 75, .12);
}
html[data-theme="dark"] .course-archive-page .tutor-row.tutor-gx-xl-5 {
	box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
@media (max-width: 767px) {
	/* #53: BARA vertikal padding pa mobil. Horisontell padding krymper radens
	   innehallsbox, och Tutors egna kolumner (.tutor-col-3, .tutor-course-filter)
	   dimensionerar sig mot radens YTTERMATT - de blev 328px i en 323px bred box
	   och gav 3px horisontell sidscroll pa 375px. Sidoinsetet levereras redan av
	   width: min(...) ovan, sa horisontell padding tillfor ingenting har.
	   Matt och verifierat 2026-08-13, inte antaget. */
	.course-archive-page .tutor-row.tutor-gx-xl-5 { padding: var(--space-3) 0; }
}

/* >=1200px: sidebaren ar in-flow -> tvakolumnslayout (240px sidebar + innehall). */
@media (min-width: 1200px) {
	.course-archive-page .tutor-row.tutor-gx-xl-5 {
		grid-template-columns: 240px 1fr;
	}
}

/* Extra skydd: om Tutor renderar HELT utan filter (has_course_filters=false, enda
   .tutor-col-12-barn) -> tvinga full bredd aven >=1200px. */
.course-archive-page .tutor-row.tutor-gx-xl-5:not(:has(.tutor-course-filter-container)) {
	grid-template-columns: 1fr !important;
}

/* Ta bort Tutor Bootstrap-kolumnbredder */
.course-archive-page .tutor-row.tutor-gx-xl-5 > [class*="tutor-col"] {
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	flex: none !important;
}

/* ============================================================================
   3) FILTER-SIDEBAR
   ============================================================================ */
.tutor-course-filter-container {
	position: sticky;
	top: 96px;
}

.tutor-course-filter-container .tutor-course-filter {
	border: 1px solid var(--outline);
	border-radius: 16px !important;
	padding: 22px !important;
	box-shadow: none !important;
}
html:not([data-theme="dark"]) .tutor-course-filter-container .tutor-course-filter {
	background: #fff;
}

/* #777 punkt 5 (Pias dom 2026-07-25): selektorerna nedan uppdaterade till Tutor 3.9-
   markupen (.tutor-widget-title, .tutor-widget, .tutor-form-check-input …). De gamla
   (.tutor-fs-tiny/.tutor-filter-title/.tutor-mt-20) matchade inget längre → sidebaren
   stod och såg rå ut, avvikande mot resten av siten. */
.tutor-course-filter-container .tutor-fs-tiny,
.tutor-course-filter-container .tutor-filter-title,
.tutor-course-filter-container .tutor-widget-title {
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .05em !important;
	color: var(--lav-900) !important;
	margin: 0 0 8px !important;
}

.tutor-course-filter-container .tutor-mt-20,
.tutor-course-filter-container .tutor-widget + .tutor-widget,
.tutor-course-filter-container .tutor-widget.tutor-mt-48,
.tutor-course-filter-container .tutor-widget.tutor-mt-32 {
	margin-top: 20px !important;
	border-top: 1px solid var(--outline);
	padding-top: 16px;
}
.tutor-course-filter-container .tutor-widget-search + .tutor-widget {
	margin-top: 20px !important;
}

/* Sidebarens sökfält: samma input-chrome som resten av siten */
.tutor-course-filter-container .tutor-widget-search .tutor-form-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.tutor-course-filter-container .tutor-widget-search .tutor-form-icon {
	position: absolute;
	left: 10px;
	color: var(--muted);
	pointer-events: none;
}
.tutor-course-filter-container .tutor-widget-search .tutor-form-control {
	width: 100%;
	border: 1px solid var(--outline);
	border-radius: 8px;
	padding: 8px 12px 8px 34px;
	font-size: 14px;
	color: var(--ink);
	background: var(--bg-elev);
	box-shadow: none;
}
.tutor-course-filter-container .tutor-widget-search .tutor-form-control:focus {
	border-color: var(--lav-500);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lav-500) 20%, transparent);
}

/* Rensa-knappen: sitens sekundära knappform i stället för Tutors blå outline */
.tutor-course-filter-container .tutor-btn.tutor-btn-outline-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--outline) !important;
	border-radius: 8px !important;
	padding: 6px 14px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--muted) !important;
	background: transparent !important;
	text-decoration: none !important;
	transition: color .15s, border-color .15s;
}
.tutor-course-filter-container .tutor-btn.tutor-btn-outline-primary:hover {
	color: var(--lav-500) !important;
	border-color: var(--lav-500) !important;
}

/* Label-layout gäller båda lägena, men färg scopas per tema.
   Cloud476 #2263: `!important` borttaget på padding, color och font-size. Ingen
   plugin-regel konkurrerade om dem — mätt med CSS.getMatchedStylesForNode på
   /courses/ — så de tre var bara ärvd vana, och de gjorde det omöjligt för
   kategorifiltrets noder att rita sig som rubriker utan ett eget `!important`.
   Selektorn får i stället ett steg mer specificitet (.tutor-widget-content),
   vilket är hur resten av den här filen vinner. Se raden om (0,2,0) längre ner.
   display/align-items/gap behåller sin `!important`: där finns en plugin-regel. */
.tutor-course-filter-container label {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	cursor: pointer !important;
}
.tutor-course-filter-container label {
	padding: 7px 0;
	font-size: var(--text-small);
}
html:not([data-theme="dark"]) .tutor-course-filter-container label {
	color: var(--lav-900);
}
.tutor-course-filter-container input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--lav-500);
	border-radius: 4px;
	cursor: pointer;
}

/* ============================================================================
   4) KURSGRID
   ============================================================================ */
.tutor-course-list {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 22px !important;
	margin: 0 !important;
}

.tutor-course-list.tutor-grid-3 > *,
.tutor-course-list > * {
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
}

/* Surfplatta (<=820): sidebaren ar en off-canvas drawer (ej in-flow), sa raden ar
   full bredd (default 1fr fran basregeln). Korten laggs i 2 kolumner. Over 820px och
   upp till 1199 galler basens 3 kolumner (full bredd) -> mjuk reflow 1->2->3 utan
   over-breda kort. Vid >=1200 kommer sidebaren in och innehallet ar ~884px = 3 kort. */
@media (max-width: 820px) {
	.course-archive-page .tutor-row.tutor-gx-xl-5 {
		gap: 22px;
	}
	.tutor-course-list {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Mobil (<=767): stapla i EN kolumn men visa KURSERNA forst och filtret under.
   Annars skymmer sok + 15+ kategori-kryssrutor hela forsta skarmen innan man ser
   nagon kurs. order + position:static gor det CSS-only, utan beroende av Tutors JS-drawer. */
@media (max-width: 767px) {
	.course-archive-page .tutor-row.tutor-gx-xl-5 {
		grid-template-columns: 1fr;
	}
	.course-archive-page .tutor-row.tutor-gx-xl-5 > [class*="tutor-col-xl"] {
		order: 1;
	}
	.course-archive-page .tutor-row.tutor-gx-xl-5 > .tutor-course-filter-container {
		order: 2;
		position: static;
	}
	.tutor-course-list {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Smal mobil (<=560): en kurs per rad. */
@media (max-width: 560px) {
	.tutor-course-list {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================================
   5) KURSKORT - .cctrl-course-card
   ============================================================================ */
.cctrl-course-card {
	background: var(--bg-elev);
	border: 1px solid var(--outline);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
	height: 100%;
}
.cctrl-course-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-hover);
}

.cctrl-course-card__thumb-link {
	display: block;
	text-decoration: none;
}
.cctrl-course-card__thumb {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--lav-900);
}
.cctrl-course-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.cctrl-course-card:hover .cctrl-course-card__img {
	transform: scale(1.04);
}
.cctrl-course-card__thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--lav-900) 0%, var(--lav-500) 100%);
}

.cctrl-course-card__provider {
	position: absolute;
	top: 10px;
	left: 10px;
	background: color-mix(in srgb, var(--lav-900) 82%, transparent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	backdrop-filter: blur(4px);
	z-index: 2;
}

/* #98: externt kort-band – kurser i course-category "Extern". Avvikande lila (token),
   tydligt skild från det lavendelfärgade interna provider-bandet, ej terracotta. */
.cctrl-course-card__provider--extern {
	background: color-mix(in srgb, var(--badge-extern) 90%, transparent);
}

.cctrl-course-card__body {
	padding: var(--space-2);
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Pills: matchar den delade kort-pillen (.ffn__app-omrade-pill) — outline + tokens, ingen hårdkodad hex */
.cctrl-course-card__pills {
	display: flex;
	gap: var(--space-1);
	flex-wrap: wrap;
	margin-bottom: var(--space-1);
}
.cctrl-pill {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	padding: 2px 10px;
	border-radius: 9999px;
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--outline);
}
.cctrl-pill--primary {
	color: var(--lav-500);
	border-color: color-mix(in srgb, var(--lav-500) 40%, var(--outline));
}
.cctrl-pill--muted {
	color: var(--muted);
}

.cctrl-course-card__title {
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--ink);
	margin: 0 0 var(--space-1);
	flex: 1;
}
.cctrl-course-card__title a {
	color: inherit;
	text-decoration: none;
}
.cctrl-course-card__title a:hover {
	color: var(--lav-500);
}

.cctrl-course-card__duration {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-small);
	color: var(--muted);
	margin: 0 0 var(--space-2);
}
.cctrl-course-card__duration svg {
	flex-shrink: 0;
}

.cctrl-course-card__cta {
	display: block;
	width: 100%;
	background: var(--lav-500);
	color: var(--lav-500-text);
	border: none;
	font-weight: 700;
	font-size: var(--text-small);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, transform .15s;
	margin-top: auto;
}
.cctrl-course-card__cta:hover {
	background: var(--lav-600);
	color: #fff;
	transform: translateY(-1px);
	text-decoration: none;
}

/* ============================================================================
   6) AKADEMI-BAND – nav-raden (.akademi-nav) styras nu av KANONISK
   .app-band:has(.akademi-nav) i app-shell.css (DELAD av alla appar). Endast
   Akademi-specifik breadcrumb bor kvar här.
   ============================================================================ */
.akademi-breadcrumb {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
}
.akademi-breadcrumb-link {
	color: #B7B2D9 !important;
	text-decoration: none;
}
.akademi-breadcrumb-link:hover {
	color: #fff !important;
}
.akademi-breadcrumb-current {
	color: #fff;
	font-weight: 600;
}
.akademi-breadcrumb-sep {
	color: rgba(255,255,255,.35);
}

/* ============================================================================
   7) WRAPPER-FIX - Tutor lagger till .tutor-card.tutor-course-card runt korten
   Neutraliserar wrappern sa bara .cctrl-course-card syns (undviker dubbel-kort)
   ============================================================================ */
.tutor-course-list .tutor-card.tutor-course-card {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	display: flex !important;
	flex-direction: column !important;
}
.tutor-course-list .tutor-card.tutor-course-card .cctrl-course-card {
	flex: 1;
}

/* Tutor-duration: span.tutor-meta-level + span.tutor-meta-value renderas inline
   som "30m" – behover ingen extra styling, men ta bort eventuell gap */
.cctrl-course-card__duration .tutor-meta-level,
.cctrl-course-card__duration .tutor-meta-value {
	font: inherit;
	color: inherit;
}
.cctrl-course-card__duration .tutor-mr-4 {
	margin-right: 0 !important;
}

/* Nav-länk-färger flyttade till app-shell.css (.app-band:has(.akademi-nav)). */

/* Sort-dropdown i kursarkivet */
.course-archive-page .tutor-course-filter[tutor-course-filter]:not(.tutor-course-filter-container *) {
	background: transparent;
	border: none;
	padding: 0;
	text-align: right;
	margin-bottom: 12px;
}
.course-archive-page .tutor-course-filter[tutor-course-filter] .tutor-form-select {
	appearance: auto;
	font-size: 13px;
	color: var(--muted);
	background: #fff;
	border: 1px solid var(--outline);
	border-radius: 8px;
	padding: 6px 12px;
	cursor: pointer;
}
html[data-theme="dark"] .course-archive-page .tutor-course-filter[tutor-course-filter] .tutor-form-select {
	background: var(--bg-elev);
	border-color: var(--outline);
	color: var(--muted);
}

/* ============================================================================
   8) KATALOG – dark mode för kortet
   Kortets yta/ram/pills/duration flippar nu automatiskt via semantiska tokens
   (--bg-elev, --outline, --ink, --muted, --shadow-hover). Endast länkfärger
   behöver scoped override: titel och CTA är <a> och kapas annars av den globala
   `html[data-theme="dark"] a` (0,1,2). Våra (0,2,0)-regler vinner utan !important
   (GOLD-STANDARD regel 2, motiverat). Plus wrapper-neutralisering.
   ============================================================================ */

html[data-theme="dark"] .cctrl-course-card__title a {
	color: var(--ink);
}
html[data-theme="dark"] .cctrl-course-card__title a:hover {
	color: var(--lav-500);
}
html[data-theme="dark"] .cctrl-course-card__cta,
html[data-theme="dark"] .cctrl-course-card__cta:hover {
	color: var(--lav-500-text);
}

html[data-theme="dark"] .tutor-course-list .tutor-card.tutor-course-card {
	background: transparent;
}

/* Filter-sidebar dark mode
   Spec: html[data-theme="dark"] .tutor-course-filter-container .tutor-course-filter = (0,4,0)
   Plugin: .tutor-course-filter-container .tutor-course-filter = (0,2,0) → vi vinner utan !important */
html[data-theme="dark"] .tutor-course-filter-container .tutor-course-filter {
	background: var(--bg-elev);
	border-color: var(--outline);
}
html[data-theme="dark"] .tutor-course-filter-container .tutor-fs-tiny,
html[data-theme="dark"] .tutor-course-filter-container .tutor-filter-title,
html[data-theme="dark"] .tutor-course-filter-container .tutor-widget-title {
	color: var(--text) !important;
}
/* Cloud476 #2263: label brutet ur regeln ovan och utan `!important`, av samma skäl
   som i ljusa läget — noderna ska kunna ta en egen färg på specificitet. */
html[data-theme="dark"] .tutor-course-filter-container label {
	color: var(--text);
}
html[data-theme="dark"] .tutor-course-filter-container .tutor-form-check-label,
html[data-theme="dark"] .tutor-course-filter-container .tutor-color-black {
	color: var(--text) !important;
}
html[data-theme="dark"] .tutor-course-filter-container .tutor-mt-20 {
	border-top-color: var(--outline);
}
/* Checkboxes i filter – custom dark styling (browser default ger vita rutor).
   appearance:none + SVG-bock ger konsekvent dark utseende. */
/* Checkbox dark mode: background-color kan inte overridas på befintliga checkbox-element i
   Chromium (platform rendering-issue med appearance:none). Använd color-scheme: dark istället —
   ger mörk OS-styling automatiskt. accent-color hanterar checked-state. */
html[data-theme="dark"] .tutor-course-filter-container .tutor-form-check-input[type="checkbox"] {
	color-scheme: dark !important;
	accent-color: var(--lav-500) !important;
}
/* Label-text inuti filter: inkl. tutor-form-check-label och tutor-color-black */
html[data-theme="dark"] .tutor-course-filter-container .tutor-form-check-label,
html[data-theme="dark"] .tutor-course-filter-container .tutor-color-black {
	color: var(--text);
}

/* Sidans canvas-bakgrund sköts av token-flippad color-mix i sektion 2 → ingen
   separat dark-regel behövs (GOLD-STANDARD regel 2). */

/* tutor-alert dark mode
   Spec: html[data-theme="dark"] .tutor-alert = (0,2,0) > plugin .tutor-alert = (0,1,0)
   Child-spans: html[data-theme="dark"] .tutor-alert span = (0,3,0) > plugin .tutor-alert span = (0,2,0) */
html[data-theme="dark"] .tutor-alert {
	background-color: rgba(91,79,212,.10);
	border-color: var(--outline);
	color: var(--text);
}
html[data-theme="dark"] .tutor-alert span,
html[data-theme="dark"] .tutor-alert p,
html[data-theme="dark"] .tutor-alert .tutor-alert-text {
	color: var(--text);
}

/* ============================================================================
   9) KURS-DETALJSIDA – visuell polish
   ============================================================================ */

/* Luft under akademi-bandet – pills ska inte klistras mot navy-bandet */
.single-courses .tutor-course-details-page > .tutor-container:first-child,
.tutor-course-details-page .tutor-course-details-header-left {
	padding-top: 44px;
}

/* Sticky tab-nav: tutor.css sätter background: rgba(255,255,255,.6) → vit på vit i dark mode */
html:not([data-theme="dark"]) .tutor-course-details-page .tutor-is-sticky {
	background: rgba(248, 247, 253, 0.88) !important;
	border-bottom: 1px solid var(--outline);
}
html[data-theme="dark"] .tutor-course-details-page .tutor-is-sticky {
	background: rgba(15, 17, 30, 0.88) !important;
	border-bottom: 1px solid var(--outline);
}

/* Pills FÖR rubriken via flex-order.
   !important krävs på display/flex-direction för att slå TutorLMS inline block-stil. */
.single-courses .tutor-course-details-header {
	display: flex !important;
	flex-direction: column !important;
}
.single-courses .tutor-course-details-ratings { order: 1; }
.single-courses .tutor-course-details-top    { order: 2; margin-bottom: 10px; }
.single-courses h1.tutor-course-details-title { order: 3; margin-top: 4px; }

/* font-size:0 trick: döljer "Kategorier:"-text och kommatecken.
   !important krävs här för att overrida nedärft font-size från body. */
.single-courses .tutor-course-details-info > div {
	font-size: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.single-courses .tutor-course-details-info > div > span.tutor-mr-16 {
	display: none;
}
.single-courses .tutor-course-details-info > div > a {
	font-size: 11px !important; /* återställ från 0 ovan */
	display: inline-flex;
	align-items: center;
	background: #EDEBFA;
	color: var(--lav-500);
	border-radius: 20px;
	padding: 4px 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
}
.single-courses .tutor-course-details-info > div > a:hover {
	background: var(--lav-500);
	color: #fff;
}
html[data-theme="dark"] .single-courses .tutor-course-details-info > div > a {
	background: rgba(91,79,212,.3);
	color: var(--lav-300, #b8b9d9);
}
html[data-theme="dark"] .single-courses .tutor-course-details-info > div > a:hover {
	background: var(--lav-600, #55578f);
	color: #fff;
}

/* Wishlist-knapp – bara ikon */
.tutor-course-details-actions .tutor-course-wishlist-btn { font-size: 0; }
.tutor-course-details-actions .tutor-course-wishlist-btn i { font-size: 18px; }

/* Kurstitel */
h1.tutor-course-details-title {
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--lav-900);
}
html[data-theme="dark"] h1.tutor-course-details-title {
	color: var(--text);
}

/* Aktiva tabs */
.tutor-course-details-tab .tutor-nav-link.is-active {
	color: var(--lav-500);
	border-bottom-color: var(--lav-500);
}
.tutor-course-details-tab .tutor-nav-link:hover {
	color: var(--lav-500);
}

/* Thumbnail & video – rundade hörn */
.tutor-video-player-wrapper,
.tutor-video-embeded-wrap,
.single-courses .tutor-course-thumbnail,
.tutor-video-player {
	border-radius: 12px;
	overflow: hidden;
}

/* Visa mer-gradient: TutorLMS använder .tutor-toggle-more-collapsed::BEFORE (inte ::after!).
   Källfil: tutor.min.css → .tutor-toggle-more-collapsed::before { background: gradient(vit→vit) }
   !important krävs för att slå plugin-regeln oavsett specificitet. */
html:not([data-theme="dark"]) .tutor-toggle-more-collapsed::before {
	background: linear-gradient(to bottom, rgba(248,247,253,0) 0%, rgba(248,247,253,1) 85%) !important;
}
html[data-theme="dark"] .tutor-toggle-more-collapsed::before {
	background: linear-gradient(to bottom, rgba(21,23,38,0) 0%, rgba(21,23,38,1) 85%) !important;
}

/* Accordion – ljusläge (no overrides needed – plugin already sets #eff1f6 on sidebar,
   #fff on body – we just add styling for non-sidebar accordions) */
html:not([data-theme="dark"]) .tutor-course-details-page .tutor-accordion-item {
	border: 1px solid var(--outline);
	border-radius: 10px;
	margin-bottom: 10px;
}

/* Accordion – dark mode.
   Plugin tutor.min.css: .tutor-accordion-item { background: #fff } = (0,1,0)
   Vi behöver sätta både containern (item) OCH header/body.
   Spec: html[data-theme="dark"] .selector.tutor-accordion-item = (0,3,0) → vinner */
html[data-theme="dark"] .tutor-course-single-sidebar-wrapper .tutor-accordion-item {
	background-color: var(--bg-elev) !important;
	border-color: var(--outline) !important;
}
html[data-theme="dark"] .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header {
	background-color: var(--bg-elev) !important;
	color: var(--text) !important;
	border-color: var(--outline) !important;
}
html[data-theme="dark"] .tutor-course-single-sidebar-wrapper .tutor-accordion-item-body {
	background-color: var(--bg) !important;
	border-color: var(--outline) !important;
}
/* Kursinnehåll-accordion på kursdetaljsidan (utanför sidebar).
   !important krävs — plugin-JS lägger om styles dynamiskt när accordion öppnas/stängs. */
html[data-theme="dark"] .tutor-course-details-page .tutor-accordion-item {
	background-color: var(--bg-elev) !important;
	border-color: var(--outline) !important;
}
html[data-theme="dark"] .tutor-course-details-page .tutor-accordion-item-header {
	background-color: var(--bg-elev) !important;
	color: var(--text) !important;
	border-color: var(--outline) !important;
}
html[data-theme="dark"] .tutor-course-details-page .tutor-accordion-item-body {
	background-color: var(--bg) !important;
	border-color: var(--outline) !important;
}
html[data-theme="dark"] .tutor-course-details-page .tutor-accordion-item-body a {
	color: var(--muted);
}
html[data-theme="dark"] .tutor-course-details-page .tutor-accordion-item-body a:hover {
	color: var(--text);
}
/* Lektionslista-items i dark mode.
   !important behövs — plugin-JS kan sätta inline background vid rendering. */
html[data-theme="dark"] .tutor-course-details-page .tutor-course-content-list-item {
	background-color: var(--bg) !important;
}
html[data-theme="dark"] .tutor-course-details-page .tutor-course-content-list-item .tutor-color-black,
html[data-theme="dark"] .tutor-course-details-page .tutor-course-content-list-item a {
	color: var(--muted);
}
html[data-theme="dark"] .tutor-course-details-page .tutor-course-content-list-item a:hover {
	color: var(--text);
}

/* Kurs-sidebar: stäng av TutorLMS interna scroll (dubbel scrollbar + ▼-indikator).
   TutorLMS JS sätter inline `max-height: 80vh; overflow-y: scroll` på sidebaren med
   Kursframsteg-kortet. När sidebar-innehållet är högre än 80vh får den en EGEN scrollbar
   bredvid sidans scrollbar → dubbel scroll + ▼ längst ner. Designen vill inte ha intern
   scroll här; sidan ska scrolla normalt. Sticky-positionen behålls (snyggt på höga skärmar).
   !important krävs — överskriver inline-styles som JS applicerar (inline utan !important). */
.tutor-single-course-sidebar {
	max-height: none !important;
	overflow-y: visible !important;
}

/* Kursframsteg-kort i dark mode.
   Spec: html[data-theme="dark"] .tutor-course-details-page .tutor-card = (0,3,0)
   Plugin tutor.css: .tutor-card { background: #fff } = (0,1,0) → vi vinner utan !important */
html[data-theme="dark"] .tutor-course-details-page .tutor-card {
	background-color: var(--bg-elev);
	border-color: var(--outline);
}

/* Instructor/requirements-box i dark mode.
   KÄLLAN: tutor-front.min.css sätter .tutor-single-course-sidebar-more > div { background: rgb(252,252,253) }
   Spec plugin: (0,1,1). Vår spec: html[data-theme="dark"] .tutor-single-course-sidebar-more > div = (0,3,1) → vinner. */
html[data-theme="dark"] .tutor-single-course-sidebar-more > div {
	background-color: var(--bg-elev);
}

/* Globala tutor-textfärger i dark mode för kursdetaljsidan.
   Spec: html[data-theme="dark"] .tutor-course-details-page .tutor-color-black = (0,3,0)
   Plugin: .tutor-color-black = (0,1,0) → vi vinner utan !important */
html[data-theme="dark"] .tutor-course-details-page .tutor-color-black,
html[data-theme="dark"] .tutor-course-details-page .tutor-color-secondary {
	color: var(--text);
}
html[data-theme="dark"] .tutor-course-details-page .tutor-color-muted,
html[data-theme="dark"] .tutor-course-details-page .tutor-color-hints {
	color: var(--muted);
}
html[data-theme="dark"] .tutor-course-details-page .tutor-color-success {
	color: var(--lav-300, #9698d8);
}
/* Instruktörs-länk och -titel (utanför .tutor-card men innanför sidebar-more) */
html[data-theme="dark"] .tutor-course-details-instructors .tutor-color-black,
html[data-theme="dark"] .tutor-course-details-instructors a {
	color: var(--text);
}
html[data-theme="dark"] .tutor-course-details-instructors .tutor-instructor-designation {
	color: var(--muted);
}

/* Primärknapp – identisk med .cctrl-course-card__cta.
   Plugin: .tutor-btn-primary (0,1,0) → vi vinner utan !important */
html:not([data-theme="dark"]) .tutor-btn-primary {
	background-color: var(--lav-500);
	border-color: var(--lav-500);
	border-radius: 10px;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: .02em;
}
html:not([data-theme="dark"]) .tutor-btn-primary:hover {
	background-color: var(--lav-600);
	border-color: var(--lav-600);
}
/* Dark mode – solid lilac, ingen border-synlighet mot mörk bakgrund
   Samma utseende som .cctrl-course-card__cta i dark mode */
html[data-theme="dark"] .tutor-btn-primary {
	background: var(--lav-500);
	border-color: var(--lav-500);
	border-radius: 10px;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	box-shadow: none;
}
html[data-theme="dark"] .tutor-btn-primary:hover {
	background: var(--lav-600);
	border-color: var(--lav-600);
}

/* Outline-knapp */
html:not([data-theme="dark"]) .tutor-btn-outline-primary {
	color: var(--lav-500);
	border-color: var(--lav-500);
}
html:not([data-theme="dark"]) .tutor-btn-outline-primary:hover {
	background-color: var(--lav-500);
	color: #fff;
}
html[data-theme="dark"] .tutor-btn-outline-primary {
	color: var(--lav-300, #9698d8);
	border-color: var(--lav-400, #7679c0);
}
html[data-theme="dark"] .tutor-btn-outline-primary:hover {
	background-color: rgba(91, 79, 212, 0.30);
	color: #fff;
}

/* Progress bar */
.tutor-progress-bar .tutor-progress-value {
	background-color: var(--lav-500);
}

/* Font-normalisering för konsistens genom kurssidan.
   TutorLMS blandar .tutor-fs-5/6/7 oregelbundet – vi sätter rimliga grunder. */
.tutor-course-details-page h2,
.tutor-course-details-page .tutor-section-header-title {
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 700;
	line-height: 1.3;
}
.tutor-course-details-page h3,
.tutor-sidebar-card h3 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}
.tutor-course-details-page .tutor-fs-5 {
	font-size: 1.0625rem; /* 17px */
}
.tutor-course-details-page .tutor-fs-6 {
	font-size: 0.9375rem; /* 15px */
}
.tutor-course-details-page .tutor-fs-7 {
	font-size: 0.8125rem; /* 13px */
}
/* Brödtext och lista i tab-innehållet */
.tutor-course-details-page .tutor-tab-item p,
.tutor-course-details-page .tutor-course-details-widget-list li,
.tutor-course-details-page .tutor-course-details-description p {
	font-size: 0.9375rem;
	line-height: 1.65;
}
/* Sidebar meta-lista */
.tutor-sidebar-card .tutor-card-footer .tutor-fs-6 {
	font-size: 0.875rem !important;
}

/* ============================================================================
   10) LEKTIONSSPELAREN
   ============================================================================ */

/* Sidebar-header navy i ljusläge */
html:not([data-theme="dark"]) .tutor-course-single-sidebar-title {
	background-color: var(--lav-900);
	color: #fff;
}
html:not([data-theme="dark"]) .tutor-course-single-sidebar-title a,
html:not([data-theme="dark"]) .tutor-course-single-sidebar-title span {
	color: #fff;
}
html:not([data-theme="dark"]) .tutor-course-single-sidebar-title .tutor-iconic-btn {
	color: rgba(255,255,255,.7);
}

/* Aktiv lektion.
   Plugin: .tutor-course-topic-item a – inga bakgrundsregler i plugin
   Vår: html:not(...) .tutor-course-topic-item.is-active a – behöver bara matcha */
html:not([data-theme="dark"]) .tutor-course-topic-item.is-active > a,
html:not([data-theme="dark"]) .tutor-course-topic-item.tutor-is-active > a {
	background-color: #EDEBFA;
}
html:not([data-theme="dark"]) .tutor-course-topic-item.is-active .tutor-course-topic-item-title,
html:not([data-theme="dark"]) .tutor-course-topic-item.tutor-is-active .tutor-course-topic-item-title {
	color: var(--lav-500);
	font-weight: 700;
}

/* Lektion-tabs */
#tutor-single-entry-content .tutor-nav-link.is-active {
	color: var(--lav-500);
	border-bottom-color: var(--lav-500);
}

/* ============================================================================
   11) DASHBOARD
   ============================================================================ */

/* Ta bort border-linjer (TutorLMS/BuddyBoss lägger border-right på kolumn) */
.tutor-dashboard-left-menu,
.tutor-frontend-dashboard .tutor-col-12.tutor-col-md-4 {
	border: none;
}

/* Vänsterkolumnen ska hugga sitt innehåll, inte sträckas till höjden av
   höger innehållskolumn. Raden är display:flex med default align-items:stretch →
   menykortet (161px innehåll) blåses upp till full sidhöjd. flex-start fixar det. */
.tutor-row.tutor-frontend-dashboard-maincontent {
	align-items: flex-start;
}

/* Profilbild rund – BuddyBoss .avatar renderas fyrkantig (border-radius: 0).
   !important: BuddyBoss sätter border-radius på .avatar med hög specificitet. */
.tutor-dashboard-header-avatar img,
.tutor-dashboard-header-avatar .avatar {
	border-radius: 50% !important;
	object-fit: cover;
}

/* Vänstermeny – konsekvent kortformat */
html:not([data-theme="dark"]) .tutor-dashboard-permalinks {
	background-color: #fff;
	border: 1px solid var(--outline);
	border-radius: 12px;
	padding: 6px 0;
}
html[data-theme="dark"] .tutor-dashboard-permalinks {
	background-color: var(--bg-elev);
	border: 1px solid var(--outline);
	border-radius: 12px;
	padding: 6px 0;
}

/* Aktiv menypost */
html:not([data-theme="dark"]) .tutor-dashboard-menu-item.current-page > .tutor-dashboard-menu-item-link,
html:not([data-theme="dark"]) .tutor-dashboard-menu-item.tutor-is-active > .tutor-dashboard-menu-item-link {
	background-color: #EDEBFA;
	color: var(--lav-500);
	border-radius: 8px;
}
html:not([data-theme="dark"]) .tutor-dashboard-menu-item-link:hover {
	background-color: var(--lav-50);
	color: var(--lav-500);
}
html[data-theme="dark"] .tutor-dashboard-menu-item-link {
	color: var(--muted);
}
html[data-theme="dark"] .tutor-dashboard-menu-item.current-page > .tutor-dashboard-menu-item-link,
html[data-theme="dark"] .tutor-dashboard-menu-item.tutor-is-active > .tutor-dashboard-menu-item-link {
	background-color: rgba(91,79,212,.25);
	color: var(--lav-300, #9698d8);
	border-radius: 8px;
}
html[data-theme="dark"] .tutor-dashboard-menu-item-link:hover {
	background-color: rgba(255,255,255,.06);
	color: var(--text);
}

/* Dashboard-tabs */
.tutor-dashboard-content-inner .tutor-nav-link.is-active {
	color: var(--lav-500);
	border-bottom-color: var(--lav-500);
}
.tutor-dashboard-content-inner .tutor-nav-link:hover {
	color: var(--lav-500);
}
.tutor-dashboard-content-inner .tutor-progress-bar .tutor-progress-value {
	background-color: var(--lav-500);
}

/* Dashboard dark mode – bastext + rubriker.
   TutorLMS-dashboarden ärver en brungrå bastext (rgb(99,93,91)) som inte byts i dark
   mode → låg kontrast. Scopa till .tutor-dashboard. Spec (0,3,0) > plugin (0,1,0). */
html[data-theme="dark"] .tutor-dashboard .tutor-color-black,
html[data-theme="dark"] .tutor-dashboard h2,
html[data-theme="dark"] .tutor-dashboard h3,
html[data-theme="dark"] .tutor-dashboard .tutor-dashboard-title,
html[data-theme="dark"] .tutor-dashboard .tutor-dashboard-info-card-title {
	color: var(--text);
}
html[data-theme="dark"] .tutor-dashboard .tutor-color-muted,
html[data-theme="dark"] .tutor-dashboard .tutor-color-hints {
	color: var(--muted);
}

/* Statistikkort (Instrumentpanel) dark mode */
html[data-theme="dark"] .tutor-dashboard .tutor-dashboard-info-card {
	background-color: var(--bg-elev);
	border-color: var(--outline);
}

/* "Mina kurser"-tabell dark mode – plugin renderar ljus tabell (vit td, ljusgrå th).
   Spec: html[data-theme="dark"] .tutor-dashboard .tutor-table thead th = (0,4,1) > plugin. */
html[data-theme="dark"] .tutor-dashboard .tutor-table thead th {
	background-color: var(--bg-elev);
	color: var(--text);
	border-color: var(--outline);
}
html[data-theme="dark"] .tutor-dashboard .tutor-table tbody td {
	background-color: var(--bg-elev);
	color: var(--muted);
	border-color: var(--outline);
}
html[data-theme="dark"] .tutor-dashboard .tutor-table tbody td a,
html[data-theme="dark"] .tutor-dashboard .tutor-table tbody td .tutor-color-black {
	color: var(--text);
}
html[data-theme="dark"] .tutor-dashboard .tutor-table tbody td a:hover {
	color: var(--lav-300, #9698d8);
}

/* ============================================================================
   12) QUIZ – dark mode för svars-alternativ och inputs
   Quiz-svar renderas som .tutor-card inuti .quiz-question-ans-choice-area.
   Spec: html[data-theme="dark"] .quiz-question-ans-choice-area .tutor-card = (0,3,0)
   Plugin tutor.css: .tutor-card { background: #fff } = (0,1,0) → vi vinner.
   ============================================================================ */

/* Svars-kort (choice-box) */
html[data-theme="dark"] .quiz-question-ans-choice-area .tutor-card {
	background-color: var(--bg-elev);
	border-color: var(--outline);
}
html[data-theme="dark"] .quiz-question-ans-choice-area .tutor-card:hover {
	border-color: var(--lav-400, #7679c0);
}
html[data-theme="dark"] .quiz-question-ans-choice-area .tutor-color-black {
	color: var(--text);
}

/* Valt svar (aktiv state) */
html[data-theme="dark"] .tutor-quiz-answer-single input:checked + .tutor-quiz-question-item .tutor-card,
html[data-theme="dark"] .tutor-quiz-question-item input:checked ~ .tutor-card {
	background-color: rgba(91,79,212,.25);
	border-color: var(--lav-500);
}

/* Checkbox och radio-knappar – accent-color ger korrekt lillafärg när ikryssade */
html[data-theme="dark"] .tutor-form-check-input[type="checkbox"],
html[data-theme="dark"] .tutor-form-check-input[type="radio"] {
	accent-color: var(--lav-500);
}

/* Quiz-metadata-rad (Antal frågor, Totalt försök etc.) */
html[data-theme="dark"] .quiz-meta-info .tutor-color-black,
html[data-theme="dark"] .quiz-meta-info .quiz-meta-info-right .tutor-fw-bold {
	color: var(--text);
}

/* Quiz-wrapper-bakgrund */
html[data-theme="dark"] .tutor-quiz-single-entry-wrap {
	background-color: var(--bg);
	color: var(--text);
}

/* Quiz-frågetext */
html[data-theme="dark"] .tutor-quiz-wrap .tutor-color-black,
html[data-theme="dark"] .tutor-quiz-wrap h2,
html[data-theme="dark"] .tutor-quiz-wrap h3 {
	color: var(--text);
}

/* ============================================================================
   LEKTIONSSPELARE – Claude Design (2026-06-23)
   Tutor (tutor-front.min.css) sätter header-bandet till var(--tutor-color-primary)
   = #6264A7 (gammal periwinkle) i LJUST läge. I MÖRKT läge sätter tutor.css redan
   bandet till var(--lav-900) navy (!important). Vi matchar mörkt läge i ljust:
   navy --lav-900, så bandet blir ETT med AKADEMI-app-bandet ovanför.
   Selektor matchar Tutors föräldrar + extra klass → (1,3,0) > Tutors (1,2,0),
   vinner oavsett laddningsordning, utan !important.
   ============================================================================ */
.tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header.tutor-single-page-top-bar {
  background: var(--lav-900);
  border: 0;
}

/* #55: enroll-knappen i kurskort = samma utseende som .cctrl-course-card__cta-länken */
.cctrl-course-card__enrollform { margin: 0; display: block; }
button.cctrl-course-card__cta { width: 100%; border: 0; cursor: pointer; font: inherit; -webkit-appearance: none; appearance: none; }