@font-face {
	font-family: 'TradeGothic-BoldCondTwenty';
	src: url('../fonts/TradeGothic-BoldCondTwenty.eot');
	src: url('../fonts/TradeGothic-BoldCondTwenty.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/TradeGothic-BoldCondTwenty.woff2') format('woff2'),
	     url('../fonts/TradeGothic-BoldCondTwenty.woff') format('woff'),
	     url('../fonts/TradeGothic-BoldCondTwenty.ttf') format('truetype'),
	     url('../fonts/TradeGothic-BoldCondTwenty.svg#TradeGothic-BoldCondTwenty') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

html, body { overflow-x: hidden; max-width: 100%; }
body {font-family:'Source Sans Pro',sans-serif; padding-top:65px;}

/* Global typography hierarchy */
h1, h2, h3, h4, h5, h6 {font-family:'TradeGothic-BoldCondTwenty', 'Arial Narrow', Arial, sans-serif;}
#nav-holder a {font-family:'TradeGothic-BoldCondTwenty', 'Arial Narrow', Arial, sans-serif;}
@media(hover:none) {
	.btn-outline-success:hover {
		background-color:inherit !important;
		color:var(--bs-btn-color) !important;
	}
}
.form-loader {position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(255,255,255,0.8);display:flex;justify-content:center;align-items:center;z-index:9999;}
.form-loader .loader-icon {width:25vw;max-width:100px;}
.form-loader .loader-icon path {fill:#ccc;}

.super-small {font-size: .625em;}

.folders-list ul {margin:0;padding:0;list-style-type:none;}
.folders-list .btn-sm {padding:.2rem .5rem;font-size:.875rem;line-height:1;border-radius:.2rem;}

img {max-width: 100%; height: auto; }

.siteHeader {position:fixed;left:0;right:0;top:0;height:60px;overflow:hidden;border:none;z-index:999;}
.siteHeader .container-fluid {padding-left:0;padding-right:0;}
.logo {width:128px;background: #000;position:absolute;left:0;padding-bottom:1px;}
.logo img {max-height:59px;}

.icon-24x24 {width:24px;height:24px;margin-bottom:3px;}

#nav-holder {padding-left: 148px; background: rgba(0, 0, 0, 0.95); width: 100%; display: table; }
.nav {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none;text-transform: uppercase;}
#nav-holder .nav {float: left; font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: 1.5px; }
#nav-holder .nav ul {margin: 0; padding: 0; list-style: none; }
ul li, ol li {list-style-position: inside; }
#nav-holder .nav ul li {float: left; margin-bottom: 0; }

#nav-holder .nav ul li a {color: #fff; text-decoration: none; padding: 16px 10px; display: block; position: relative; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.submenu {margin-bottom: 25px !important; }
#nav-holder .nav ul ul {background: #fff; position: absolute; opacity: 0; visibility: hidden; padding-bottom: 10px; min-width: 220px; font-size: 0.875rem; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
#nav-holder .nav ul ul li a {display: block; padding: 10px 20px; color: #fff; font-weight: 400; font-family: inherit; letter-spacing: 1px;}

.header-login, .header-search, .mobileNav-close, .header-hamburger {float:left;position:relative;min-width:56px;max-width:56px;}
.header-login .button {position: relative; padding: 14px 0 2px; text-align: center; cursor: pointer; min-height: 60px; display: block; color: #fff; font-size: 1.125rem; }

.header-right {float:right;height:60px;}

.header-login {border:0;background-color:transparent;}

.login-menu {text-align:right;}
.search-box, .login-menu {height:60px;right:55px;overflow: hidden;background: #000;position: absolute;z-index: 2;right: 56px;top: 0;width: 0;-webkit-transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);-moz-transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);-ms-transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);}

.grecaptcha-badge {right:5px !important;width:60px !important;}
.grecaptcha-badge:hover {width:303px !important;}

header a .svg-icon use, header .button .svg-icon use {fill:none;stroke:#FFFFFF;stroke-width:1;stroke-miterlimit:10;}
header a:hover .svg-icon use, header .button:hover .svg-icon use {stroke:#F9D222;stroke-width:1.5;}
.header-login.active .button .svg-icon use, .header-search.active .button .svg-icon use {stroke:#F9D222;stroke-width:1.5;}
/* Settings icon is fill-based — override the stroke rules */
header a .svg-icon use[href="#menu-settings"],
header .button .svg-icon use[href="#menu-settings"] {fill:#FFFFFF;stroke:none;}
header a:hover .svg-icon use[href="#menu-settings"],
header .button:hover .svg-icon use[href="#menu-settings"] {fill:#F9D222;stroke:none;}
.header-login.active .button .svg-icon use[href="#menu-settings"] {fill:#F9D222;stroke:none;}

.menu-right {margin-top:0;padding-top:0;}
.menu-right ul li {height:60px;margin-right:32px;}
.menu-right ul li a {height:100%;padding-top:17px;border:0;}
.menu-right ul li:last-child {margin-right:15px;}

.mobileNav-close {float:right; border-left:1px solid rgba(255,255,255,0.4); border-right:0;}
.mobileNav-close .button {padding-top:17px;text-align:center;}
.header-hamburger .button {padding-top:17px;text-align:center;}

.header-login.active {background-color:#000;}

.header-hamburger {border:0; background-color:transparent;border-left:1px solid transparent;border-right:1px solid transparent;}

.login-menu ul li {border-right:0;margin-right:3px;}
.login-menu ul li a {padding: 23px 6px;}
.login-menu ul li a:hover {color:#F9D222;}
.login-menu ul li a i {margin-right:3px;transition:margin 300ms;}
.login-menu ul li a:hover i {margin-right:0;margin-left:3px;}
.search-box input[type="text"], .search-box input[type="search"], .login-menu input[type="text"], .login-menu input[type="search"] {border-left:0;}

.search-box ul, .login-menu ul {width:auto;display:inline-flex;}

.mobile-top-nav {padding:0;float:right;}
.mobile-top-nav ul li {margin-right:32px;height:60px;}
.mobile-top-nav ul li:last-child {margin-right:15px;}
.mobile-top-nav ul li a {position:relative;height: 100%;padding-top: 17px;}

.header-user-avatar {margin:0;padding:0;}
#mobile-nav-holder .header-user-avatar {margin:0 auto;padding:0;width:24px;height:24px;}
#mobile-nav-holder .login-menu li:first-child {border-left:0;}
#mobile-nav-holder .header-search {float:right;}
#mobile-nav-holder .header-cart-icon {float:right;}
#mobile-nav-holder .header-login {border-left:0;}
#mobileNav ul li ul li a:hover {color:#F9D222;}

/* Menu Styles */
#desktopNav ul li {display: inline-block;}
#desktopNav ul li a {display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; padding: 18px 16px;}
#desktopNav ul li a .svg-icon {flex-shrink: 0;}
#desktopNav ul li a:hover {color: #F9D222;}
#desktopNav ul li.active > a {color: #F9D222;}
#desktopNav ul li.active > a .svg-icon use {stroke: #F9D222; stroke-width: 1.5;}
#desktopNav ul li.active > a .svg-icon use[href="#menu-settings"] {fill: #F9D222; stroke: none;}

.user-role { font-size: 0.7em; color: #F9D222;}

/* Mobile: Hide menu text, show icons only */
@media (max-width: 768px) {
	#desktopNav ul li a {padding: 18px 12px;}
	#desktopNav ul li a .menu-text {display:none;}
}

/* Desktop: Show both icons and text */
@media (min-width: 769px) {
	#desktopNav ul li a .menu-text {display:inline;margin-left:3px;}
}

.hero-image {margin-top: 60px;width:100%;position:relative;overflow:hidden;}
#mainContent {background:#fff !important;width: 100%;overflow:visible !important;}

pre {margin:0;font-family:sans-serif;font-size:.7em;}

.html-print-ul {margin-block-start:0em;margin-block-end:0em;padding-inline-start:1.2em;font-size:.85em;line-height:1em;list-style:none;}
.html-print-ul .span-key, .span-key {color:red;}
.html-print-ul .span-equals, .span-equals {color:grey;}
.html-print-ul .span-value, .span-value {color:blue;}

@keyframes rotating {
	from {-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
	to {-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
}
.rotating {-webkit-animation:rotating 2s linear infinite;-moz-animation:rotating 2s linear infinite;-ms-animation:rotating 2s linear infinite;-o-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite;}

.switch-description {font-size:.75em;}

/* Bootstrap override */
.form-check {padding-left:0;margin-bottom:15px;}
.form-check .form-check-input {float:none;}
.form-check .form-check-label {margin-right:5px;}
.form-switch .form-check-input {margin-left:0;margin-right:0;}
.submit-button-wrapper {justify-content:right !important;display:none;}

.lfa-yellow {color: #FFD028;}
.btn-lfa-yellow {color:#212529;background-color:#ffd028;transition:background-color 1s ease, color .8s ease;--bs-border-opacity:1;border-color:rgba(var(--bs-dark-rgb),var(--bs-border-opacity)) !important;}
.btn-lfa-yellow:hover, .btn-lfa-yellow:focus-visible {color:#ffd028;background-color:#212529;}

.btn {border-radius:0 !important;transition: all 0.3s ease;font-family:'TradeGothic-BoldCondTwenty', 'Arial Narrow', Arial, sans-serif;}
.form-control {border-radius:0 !important;}
.form-check-input:checked {background-color:#198754;border-color:#198754;}

form#mainForm {
	--color-button-text: 26, 27, 24;
	--btn-duration-animate:.5s;
}

.btn.float-start, .btn.float-end {position:relative;overflow:hidden;}
.btn.float-start::after, .btn.float-end::after {content: '';position:absolute;top:0;width:100%;height:100%;z-index:1;transform:skew(-15deg);background-image:linear-gradient(90deg, transparent, rgba(255, 255, 0, 0.25), transparent);}
.btn.float-end::after {left: -100%;}
.btn.float-start::after {left: 100%;}
.btn.float-end:hover::after {animation:shine-right .5s ease .2s;}
.btn.float-start:hover::after {animation:shine-left .5s ease .2s;}

@keyframes shine-right {100% {left:100%;}}
@keyframes shine-left {100% {left:-100%;}}

.pulse {-webkit-animation:pulse 2s infinite;animation:pulse 2s infinite;transform:scale(1)}
@keyframes pulse {
	0% {box-shadow:0 0 0 0 rgba(20,33,61,.8)}
	70% {box-shadow:0 0 0 10px transparent}
	to {box-shadow:0 0 0 0 transparent}
}
.pulse-green {-webkit-animation:pulse-green 2s infinite;animation:pulse-green 2s infinite;transform:scale(1)}
@keyframes pulse-green {
	0% {box-shadow:0 0 0 0 rgba(50,189,8,.5)}
	70% {box-shadow:0 0 0 5px rgba(50,189,8,0)}
	to {box-shadow:0 0 0 0 rgba(50,189,8,0)}
}
.fade-out {-webkit-animation:fadeOut .2s;animation:fadeOut .2s;opacity:0;}
@keyframes fadeOut {
	0% {opacity:1;visibility:visible}
	to {opacity:0;visibility:hidden}
}
.fade-in {-webkit-animation:fadeIn .2s;animation:fadeIn .2s;opacity:1;}
@keyframes fadeIn {
	0% {opacity:0;visibility:hidden}
	to {opacity:1;visibility:visible}
}

/* ═══ STUDENT STATS POPUP ════════════════════════════════════════════ */
.sm-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.75);
	display: flex; align-items: flex-start; justify-content: center;
	z-index: 1050; padding: 20px 12px; overflow-y: auto;
}
.sm-panel {
	background: var(--c-surface, #0F0F0F); border: 1px solid var(--c-border-md, #2E2E2E);
	width: 100%; max-width: 460px; position: relative;
	font-family: 'Source Sans Pro', sans-serif; color: var(--c-text, #C8BFB0);
	flex-shrink: 0;
}
.sm-close {
	position: absolute; top: 12px; right: 14px;
	background: none; border: none; color: var(--c-muted, #888); font-size: 1.125rem;
	cursor: pointer; line-height: 1; padding: 4px 6px; transition: color .2s;
}
.sm-close:hover { color: #FFD028; }

/* Header */
.sm-hd { padding: 24px 20px 16px; border-bottom: 1px solid var(--c-border, #1E1E1E); }
.sm-eyebrow {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted, #888); margin-bottom: 8px;
}
.sm-name {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 1.75rem; letter-spacing: 1px; color: var(--c-text-str, #EDE5D5);
	line-height: 1; margin-bottom: 4px; padding-right: 28px;
}
.sm-sub {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem;
	letter-spacing: 1px; color: var(--c-muted, #888);
}

/* Stat boxes */
.sm-stats { display: flex; border-bottom: 1px solid var(--c-border, #1E1E1E); }
.sm-stat {
	flex: 1; padding: 14px 10px; border-right: 1px solid var(--c-border, #1E1E1E); text-align: center;
}
.sm-stat:last-child { border-right: none; }
.sm-stat-value {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 1.5rem; line-height: 1; color: #FFD028; margin-bottom: 4px;
}
.sm-stat-label {
	font-family: 'Source Code Pro', monospace; font-size: 0.5rem;
	letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted, #888);
}
.sm-val-absent { color: #BF3A3A; }
.sm-val-auth   { color: #6BB5E8; }
.sm-risk-green .sm-stat-value { color: var(--c-green, #5EBF3A); }
.sm-risk-amber .sm-stat-value { color: #FFD028; }
.sm-risk-red   .sm-stat-value { color: #BF3A3A; }

/* Risk banner */
.sm-risk {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem;
	letter-spacing: 1.5px; text-transform: uppercase;
	padding: 8px 20px; border-bottom: 1px solid var(--c-border, #1E1E1E);
}
.sm-risk.sm-risk-green { color: var(--c-green, #5EBF3A); background: var(--c-gd, rgba(94,191,58,.07)); }
.sm-risk.sm-risk-amber { color: #FFD028; background: rgba(255,208,40,.07); }
.sm-risk.sm-risk-red   { color: #BF3A3A; background: rgba(191,58,58,.10); }

/* Breakdown bars */
.sm-breakdown {
	padding: 12px 20px; border-bottom: 1px solid var(--c-border, #1E1E1E);
	display: flex; flex-direction: column; gap: 7px;
}
.sm-bd-row   { display: flex; align-items: center; gap: 8px; }
.sm-bd-dot   { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sm-bd-label {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 1px; color: var(--c-muted, #888); width: 68px; flex-shrink: 0;
}
.sm-bd-bar  { flex: 1; height: 3px; background: var(--c-border, #1E1E1E); }
.sm-bd-fill { height: 100%; display: block; transition: width .4s; }
.sm-bd-val  {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem;
	color: var(--c-text, #C8BFB0); width: 20px; text-align: right; flex-shrink: 0;
}

/* Per-lesson section */
.sm-section-hd {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 3px; text-transform: uppercase; color: var(--c-muted, #888);
	padding: 12px 20px 4px;
}
.sm-lesson { padding: 8px 20px 10px; border-bottom: 1px solid var(--c-border, #1E1E1E); }
.sm-lesson:last-child { border-bottom: none; }
.sm-lesson-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 0.875rem; letter-spacing: 1px; color: var(--c-text-str, #EDE5D5); margin-bottom: 6px;
}
.sm-sched-list { display: flex; flex-direction: column; gap: 4px; }
.sm-sched-row  { display: flex; align-items: center; gap: 12px; }
.sm-sched-date {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem;
	color: var(--c-muted, #888); width: 88px; flex-shrink: 0;
}
.sm-sched-status {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem; letter-spacing: 0.5px;
	min-width: 80px;
}
.sm-sched-notes {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem; color: var(--c-muted, #888);
	flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Loading / empty / error */
.sm-loading, .sm-error, .sm-empty {
	padding: 40px 20px; text-align: center;
	font-family: 'Source Code Pro', monospace; font-size: 0.6875rem; color: var(--c-muted, #888); letter-spacing: 1px;
}
.sm-error { color: #BF3A3A; }

/* Stats trigger button (on student card) */
.sm-trigger {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--c-muted, #555); background: none; border: none;
	padding: 3px 0 0; cursor: pointer; display: block; transition: color .2s;
}
.sm-trigger:hover { color: #FFD028; }

/* ═══ SHARED ERROR BLOCK ══════════════════════════════════════════════ */
/* Works across all page themes via CSS variable fallbacks */
.err-block {
	border: 1px solid var(--c-border, #1E1E1E);
	background: var(--c-surface, #0F0F0F);
	padding: 32px 24px; text-align: left;
}
.err-eyebrow {
	font-family: 'Source Code Pro', monospace;
	font-size: 0.625rem; letter-spacing: 4px; text-transform: uppercase;
	color: var(--c-muted, #555); margin-bottom: 10px;
}
.err-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 2.25rem; letter-spacing: 2px; color: #BF3A3A;
	line-height: 1; margin-bottom: 16px;
}
.err-msg {
	font-size: 0.875rem; color: var(--c-text, #C8BFB0);
	line-height: 1.6; margin-bottom: 24px;
}
.err-msg p { margin-bottom: 6px; }
.err-back-btn {
	display: inline-block;
	font-family: 'Source Code Pro', monospace; font-size: 0.6875rem;
	letter-spacing: 1.5px; text-transform: uppercase;
	padding: 10px 20px; border: 1px solid var(--c-border-md, #2E2E2E);
	color: var(--c-text, #C8BFB0); background: transparent;
	text-decoration: none; transition: border-color .2s, color .2s;
}
.err-back-btn:hover { border-color: #C19909; color: #C19909; }

/* ═══ SHARED PAGE VARIABLES ════════════════════════════════════════════
   All body.page-* classes inherit these tokens. Page-specific additions
   (e.g. --att-* status colours) live in their own section below.
   ════════════════════════════════════════════════════════════════════ */

body[class*="page-"] {
	background: #080808;
	color: #C8BFB0;
	font-family: 'Source Sans Pro', Georgia, serif;
	--c-surface:   #0F0F0F;
	--c-border:    #1E1E1E;
	--c-border-md: #2E2E2E;
	--c-muted:     #888888;
	--c-text:      #C8BFB0;
	--c-text-str:  #EDE5D5;
	--c-yd:        rgba(255,208,40,.08);
	--c-green:     #5EBF3A;
	--c-gd:        rgba(94,191,58,.12);
	--c-chd:       #0C0B09; /* card header bg — always dark regardless of theme */
}

@media (prefers-color-scheme: light) {
	:root { color-scheme: light; }
	body[class*="page-"] {
		background: #F5F0E6;
		color: #3A3028;
		--c-surface:   #FDFAF4;
		--c-border:    #D8CFBA;
		--c-border-md: #C4B89E;
		--c-muted:     #6a6050;
		--c-text:      #3A3028;
		--c-text-str:  #1A1410;
		--c-yd:        rgba(255,208,40,.12);
		--c-green:     #3A9E1A;
		--c-gd:        rgba(58,158,26,.10);
		--c-chd:       #0C0B09;
	}
	/* Unchecked checkboxes: transparent so light background shows through */
	body[class*="page-"] .form-check-input:not(:checked) {
		--bs-form-check-bg: transparent;
		background: transparent;
	}
	/* ── Yellow accent text → dark amber on light backgrounds ── */
	/* #FFD028 is ~1.5:1 on white; #7A5500 is ~6.4:1 */
	.courses-title, .lessons-title, .students-title,
	.settings-title, .home-title, .dash-title, .att-title,
	.home-hero, .man-idx-title, .man-doc-title, .man-idx-card-title { color: #7A5500; text-shadow: 0 0 1px black; }
	.c-stat-value, .l-stat-value, .s-stat-value,
	.att-stat-value, .att-mark-stat-value, .dash-stat-value { color: #7A5500; }
	.l-sched-today { color: #7A5500; }
	.s-note-shared-badge { color: #6D4C00; background: rgba(122,85,0,.12); }
	.man-body a { color: #7A5500; }
	.lfa-yellow { color: #7A5500; }
	/* #E0B20D is ~1.6:1 on white — swap to dark amber */
	.dash-mark-btn { border-color: #7A5500; color: #7A5500; }
	.l-btn-edit { border-color: #7A5500; color: #7A5500; }
	.l-btn-edit:hover { border-color: #7A5500; color: #0A0A0A; background: #FFD028; }
	.s-search-active strong, .s-db-search-btn { color: #7A5500; }
	.l-sched-comp-partial { color: #7A5500; background: rgba(122,85,0,.10); }
	.att-sched-badge { border-color: #7A5500; color: #7A5500; }
	.att-stu-grp-badge { border-color: #7A5500; color: #7A5500; }
	/* Dash mark btn hover/active */
	.dash-mark-btn:hover, .dash-mark-btn:active { border-color: #7A5500; color: #0A0A0A; background: #FFD028; }
	/* Stats popup: yellow values need outline on light bg */
	.sm-stat-value, .sm-risk-amber .sm-stat-value { color: #FFD028; text-shadow: 0 0 1px black; }
	.sm-risk.sm-risk-amber { color: #C19909; }
}

/* ── Shared page wrappers ────────────────────────────────────────────── */
.courses-wrap, .lessons-wrap, .students-wrap,
.settings-wrap, .att-wrap, .home-wrap, .dash-wrap { text-align: left; padding: 0 2px; }

/* ── Shared page title ───────────────────────────────────────────────── */
.courses-title, .lessons-title, .students-title,
.settings-title, .home-title, .dash-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 2.5rem; letter-spacing: 2px; color: #FFD028; text-shadow: 0 0 var(--c-text-str);
	line-height: 1; margin-bottom: 4px;
}
@media (min-width: 576px) {
	.courses-title, .lessons-title, .students-title,
	.settings-title, .home-title, .dash-title { font-size: 3.25rem; }
}

/* ── Shared page subtitle ────────────────────────────────────────────── */
.courses-sub, .lessons-sub, .students-sub,
.settings-sub, .att-sub, .home-sub, .dash-sub {
	/*font-family: 'Source Code Pro', monospace;*/
	font-size: 0.625rem; color: var(--c-muted);
	letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px;
}
.dash-sub { font-size: 1rem; font-weight: bold; color: var(--c-text-str);}

/* ═══ COURSES PAGE — Production Call Sheet ════════════════════════════ */

/* ── Stats strip — mobile: role full-width top, then 2-col numbers ─── */
.c-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--c-border);
	margin-bottom: 20px;
}
.c-stat { padding: 12px 14px; background: var(--c-surface); border-right: 1px solid var(--c-border); }
.c-stat:nth-child(1) { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid var(--c-border); }
.c-stat:nth-child(2) { border-right: 1px solid var(--c-border); }
.c-stat:nth-child(3) { border-right: none; }
.c-stat-label { font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; color: var(--c-muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.c-stat-value { font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1.75rem; color: #FFD028; text-shadow: 0 0 var(--c-text-str); line-height: 1; }
.c-stat-role  { font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1rem; color: var(--c-text-str); line-height: 1.2; letter-spacing: 1px; margin-top: 3px; }

@media (min-width: 480px) {
	.c-stats { grid-template-columns: repeat(3, 1fr); }
	.c-stat:nth-child(1) { grid-column: auto; border-right: 1px solid var(--c-border); border-bottom: none; }
}

/* ── Filter bar ─────────────────────────────────────────────────────── */
.c-filter { display: flex; margin-bottom: 20px; }
.c-filter-label {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem; letter-spacing: 2px;
	color: #0A0A0A; background: #FFD028; padding: 0 12px;
	display: flex; align-items: center; white-space: nowrap; text-transform: uppercase; flex-shrink: 0;
}
.c-filter-input {
	flex: 1; min-width: 0;
	background: var(--c-surface); border: 1px solid var(--c-border); border-left: none;
	color: var(--c-text-str); font-family: 'Source Code Pro', monospace; font-size: 0.8125rem;
	padding: 10px 12px; outline: none; transition: border-color .2s;
}
.c-filter-input::placeholder { color: var(--c-muted); }
.c-filter-input:focus { border-color: #FFD028; }

/* ── Course cards ───────────────────────────────────────────────────── */
.c-card { border: 1px solid var(--c-border); margin-bottom: 16px; transition: border-color .25s; }
.c-card:hover { border-color: var(--c-border-md); }

/* Course header — always dark, diagonal clapperboard stripe */
.c-hd {
	position: relative; overflow: hidden;
	background: var(--c-chd); padding: 12px 16px;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.c-hd::before {
	content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background: repeating-linear-gradient(
		-55deg,
		transparent 0, transparent 6px,
		rgba(255,208,40,.07) 6px, rgba(255,208,40,.07) 12px
	);
}
.c-hd-text { position: relative; z-index: 1; min-width: 0; }
.c-hd-meta {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; color: #FFD028;
	letter-spacing: 3px; text-transform: uppercase; margin-bottom: 3px;
	/* button reset */
	background: none; border: none; padding: 0; cursor: pointer; text-align: left;
	transition: opacity .15s;
}
.c-hd-name { font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1.375rem; letter-spacing: 2px; color: #EDE5D5; line-height: 1.1; }
.c-hd-btn {
	position: relative; z-index: 1; flex-shrink: 0;
	font-family: 'TradeGothic-BoldCondTwenty', 'Arial Narrow', Arial, sans-serif;
	font-size: 0.6875rem; letter-spacing: 1.5px; text-transform: uppercase;
	padding: 4px 10px; border: 1px solid #E0B20D; color: #E0B20D;
	background: transparent; text-decoration: none; white-space: nowrap;
	transition: border-color .2s, color .2s, background .2s;
}
.c-hd-btn:hover, .c-hd-btn:active { border-color: #FFD028; color: #0A0A0A; background: #FFD028; }

/* ── Batch rows — mobile-first: stacked column ──────────────────────── */
.c-batches { list-style: none; margin: 0; padding: 0; }
.c-batch {
	display: flex; flex-direction: column; gap: 10px;
	padding: 12px 16px; border-top: 1px solid var(--c-border);
	background: var(--c-surface); transition: background .2s;
}
.c-batch:hover { background: var(--c-yd); }
.c-batch-name  { color: var(--c-text-str); font-size: 0.875rem; font-weight: 600; font-family: 'Source Sans Pro', Georgia, serif; }
.c-batch-dates { font-family: 'Source Code Pro', monospace; font-size: 0.6875rem; color: var(--c-muted); margin-top: 2px; }
.c-batch-btns  { display: flex; gap: 8px; }

/* ≥ 480 px: side-by-side row */
@media (min-width: 480px) {
	.c-batch { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
	.c-batch-info { flex: 1; min-width: 0; }
	.c-batch-btns { flex-shrink: 0; }
}

/* Students — secondary, outline */
.btn-stu {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.8125rem; letter-spacing: 1px;
	padding: 7px 13px; border: 1px solid var(--c-border-md); color: var(--c-muted);
	background: transparent; cursor: pointer; text-decoration: none;
	display: inline-flex; align-items: center; gap: 5px;
	flex: 1; justify-content: center;
	transition: border-color .2s, color .2s, background .2s;
}
.btn-stu:hover { border-color: var(--c-green); color: var(--c-green); background: var(--c-gd); }
.c-count {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem;
	color: var(--c-green); background: var(--c-gd); padding: 1px 5px;
}

/* Schedule — primary, yellow */
.btn-sch {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.8125rem; letter-spacing: 1px; font-weight: 700;
	padding: 7px 16px; background: #FFD028; color: #0A0A0A; border: 1px solid #FFD028;
	cursor: pointer; text-decoration: none;
	flex: 1; text-align: center; display: inline-block;
	transition: background .2s, border-color .2s;
}
.btn-sch:hover, .btn-sch:focus { background: #FFE060; border-color: #FFE060; color: #0A0A0A; }

/* Desktop: auto-size buttons */
@media (min-width: 480px) {
	.btn-stu, .btn-sch { flex: none; }
}

/* ═══ LESSONS PAGE ══════════════════════════════════════════════════════ */

/* ── Back link ───────────────────────────────────────────────────────── */
.l-back {
	display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px;
	font-family: 'Source Code Pro', monospace; font-size: 0.6875rem; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--c-muted); text-decoration: none;
	transition: color .2s;
}
.l-back:hover { color: #FFD028; }

/* ── Page title ──────────────────────────────────────────────────────── */
/* ── Stats strip ─────────────────────────────────────────────────────── */
.l-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--c-border);
	margin-bottom: 20px;
}
.l-stat {
	padding: 12px 14px; background: var(--c-surface);
	border-right: 1px solid var(--c-border);
}
.l-stat:last-of-type { border-right: none; }
.l-stat-label { font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; color: var(--c-muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.l-stat-value { font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1.75rem; color: #FFD028; text-shadow: 0 0 var(--c-text-str); line-height: 1; }

/* Add Lesson button — third cell, yellow */
.l-stat-add {
	grid-column: 1 / -1; /* full width on mobile */
	padding: 12px 20px;
	background: #FFD028; color: #0A0A0A; border: none; outline: none;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.875rem; letter-spacing: 1.5px;
	text-transform: uppercase; cursor: pointer; white-space: nowrap;
	border-top: 1px solid rgba(0,0,0,.08);
	transition: background .2s;
}
.l-stat-add:hover { background: #FFE060; color: #0A0A0A; }

@media (min-width: 480px) {
	.l-stats.has-add { grid-template-columns: 1fr 1fr auto; }
	.l-stat-add { grid-column: auto; border-top: none; border-left: 1px solid rgba(0,0,0,.1); }
	.l-stat:last-of-type { border-right: 1px solid var(--c-border); }
}

/* ── Alerts ──────────────────────────────────────────────────────────── */
.l-alert {
	padding: 12px 16px; margin-bottom: 16px; border-left: 3px solid; font-size: 0.8125rem;
	position: relative; overflow: hidden;
	transition: opacity .4s ease, max-height .4s ease, margin .4s ease, padding .4s ease;
}
.l-alert.l-alert-hiding {
	opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
}
.l-alert-success { background: rgba(94,191,58,.08); border-color: #5EBF3A; color: #5EBF3A; }
.l-alert-error   { background: rgba(191,58,58,.08); border-color: #BF3A3A; color: #BF3A3A; }

/* progress bar */
.l-alert-bar {
	position: absolute; bottom: 0; left: 0; height: 2px; width: 100%;
	transform-origin: left center;
	transition: transform linear;
}
.l-alert-success .l-alert-bar { background: #5EBF3A; }
.l-alert-error   .l-alert-bar { background: #BF3A3A; }

@media (prefers-color-scheme: light) {
	.l-alert-success { color: #3A9E1A; border-color: #3A9E1A; }
	.l-alert-success .l-alert-bar { background: #3A9E1A; }
}

/* ── Lesson list ─────────────────────────────────────────────────────── */
.l-list {
	list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--c-border);
}
.l-row {
	padding: 14px 16px; border-bottom: 1px solid var(--c-border);
	background: var(--c-surface); transition: background .2s;
}
.l-row:last-child { border-bottom: none; }
.l-row:hover      { background: var(--c-yd); }
.l-row.is-archived { opacity: .55; }

.l-row-hd {
	display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 5px;
}
.l-row-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 1.1875rem; letter-spacing: 1px; color: var(--c-text-str); line-height: 1.1;
}
.l-badge {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; letter-spacing: 2px;
	text-transform: uppercase; padding: 2px 6px;
}
.l-badge-active   { color: var(--c-green); background: var(--c-gd); }
.l-badge-archived { color: var(--c-muted); background: rgba(100,100,100,.1); }

.l-row-meta { font-family: 'Source Code Pro', monospace; font-size: 0.6875rem; color: var(--c-muted); margin-bottom: 4px; }
.l-row-desc { font-size: 0.8125rem; color: var(--c-text); line-height: 1.5; }

/* ── Row action buttons (staff) ──────────────────────────────────────── */
.l-row-foot {
	display: flex; gap: 8px; margin-top: 12px;
	padding-top: 10px; border-top: 1px solid var(--c-border);
}
.l-btn-edit {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.6875rem; letter-spacing: 1.5px;
	text-transform: uppercase; padding: 5px 12px;
	border: 1px solid #E0B20D; color: #E0B20D;
	background: transparent; cursor: pointer; text-decoration: none;
	transition: border-color .2s, color .2s, background .2s;
}
.l-btn-edit:hover { border-color: #FFD028; color: #0A0A0A; background: #FFD028; }

.l-btn-archive {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.6875rem; letter-spacing: 1.5px;
	text-transform: uppercase; padding: 5px 12px;
	border: 1px solid var(--c-border-md); color: var(--c-muted);
	background: transparent; cursor: pointer; text-decoration: none;
	transition: border-color .2s, color .2s;
}
.l-btn-archive:hover { border-color: var(--c-muted); color: var(--c-text-str); }

.l-btn-restore {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.6875rem; letter-spacing: 1.5px;
	text-transform: uppercase; padding: 5px 12px;
	border: 1px solid rgba(94,191,58,.4); color: var(--c-green);
	background: transparent; cursor: pointer; text-decoration: none;
	transition: border-color .2s, color .2s, background .2s;
}
.l-btn-restore:hover { border-color: var(--c-green); background: var(--c-gd); }

/* ── Empty state ─────────────────────────────────────────────────────── */
.l-empty {
	padding: 32px 20px; text-align: center; border: 1px solid var(--c-border);
	background: var(--c-surface); color: var(--c-muted);
	font-family: 'Source Code Pro', monospace; font-size: 0.75rem; letter-spacing: 1px;
}

/* ── Schedule sub-section (within each lesson row) ───────────────────── */
.l-scheds {
	margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-border);
}

/* Staff header: "Schedules" label + count badge */
.l-scheds-hd {
	display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.l-scheds-label {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted);
}
.l-scheds-count {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; letter-spacing: 1px;
	padding: 1px 6px; background: rgb(55 44 2 / 44%); color: #FFD028;
}

/* Schedules toggle button in lesson header */
.l-scheds-toggle-btn {
	margin-left: auto; flex-shrink: 0;
	background: none; border: 1px solid var(--c-border-md); cursor: pointer;
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted);
	padding: 2px 8px; transition: border-color .2s, color .2s;
}
.l-scheds-toggle-btn:hover { border-color: var(--c-border-str); color: var(--c-text-str); }
.l-scheds-toggle-btn::after { content: ' \25BC'; font-size: 0.5em; }
.l-scheds-toggle-btn.open::after { content: ' \25B2'; }

/* Batch header inside expanded schedules section */
.l-batch-hd {
	display: flex; align-items: center; gap: 10px;
	margin: 12px 0 4px; padding-bottom: 6px;
	border-bottom: 1px solid var(--c-border);
}
.l-batch-hd:first-child { margin-top: 4px; }
.l-batch-name {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1rem;
	letter-spacing: 1px; text-transform: uppercase; color: var(--c-text-str);
	flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.l-batch-edit-btn {
	flex-shrink: 0;
	font-family: 'Source Code Pro', monospace; font-size: 0.5rem;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--c-muted); border: 1px solid var(--c-border-md);
	padding: 2px 7px; text-decoration: none; transition: color .2s, border-color .2s;
}
.l-batch-edit-btn:hover { color: #C19909; border-color: #C19909; }

/* "Show previous" toggle (tutor only) */
.l-past-toggle {
	background: none; border: none; padding: 0; cursor: pointer;
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem;
	letter-spacing: 1px; text-transform: uppercase;
	color: var(--c-muted); transition: color .2s;
	margin-bottom: 8px; display: block;
}
.l-past-toggle:hover { color: #FFD028; }

/* Schedule list */
.l-sched-list {
	list-style: none; margin: 0; padding: 0;
}
.l-sched-list-past { opacity: 0.6; }

.l-sched-row {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	padding: 7px 0; border-top: 1px solid var(--c-border);
}
.l-sched-row:first-child { border-top: none; }

.l-sched-info {
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem; color: var(--c-muted);
	min-width: 0;
}
.l-sched-date  { color: var(--c-text-str); letter-spacing: 0.5px; }
.l-sched-today { color: #FFD028; }
.l-sched-sep   { color: var(--c-border-md); }
.l-sched-time  { color: var(--c-text); }
.l-sched-batch { color: var(--c-muted); }

.l-sched-right {
	display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* Completion pill */
.l-sched-comp {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; white-space: nowrap;
}
.l-sched-comp-none    { color: var(--c-muted); background: rgba(255,255,255,.04); }
.l-sched-comp-partial { color: #E0B20D; background: rgba(255,208,40,.12); }
.l-sched-comp-done    { color: #5EBF3A; background: rgba(94,191,58,.13); }

/* Mark button */
.l-sched-btn {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; letter-spacing: 1px;
	text-transform: uppercase; padding: 4px 10px;
	border: 1px solid var(--c-border-md); color: var(--c-muted);
	background: transparent; text-decoration: none;
	transition: border-color .2s, color .2s; white-space: nowrap;
}
.l-sched-btn:hover { border-color: #C19909; color: #C19909; }

/* Empty within schedules section */
.l-sched-empty {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem;
	color: var(--c-muted); letter-spacing: 0.5px; padding: 4px 0;
}

/* ── Modals — dark/light aware ───────────────────────────────────────── */
body.page-lessons .modal-content {
	background: var(--c-surface); border: 1px solid var(--c-border-md); border-radius: 0;
}
body.page-lessons .modal-header {
	background: var(--c-chd); border-bottom: 1px solid var(--c-border-md);
}
body.page-lessons .modal-header .modal-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 1.25rem; letter-spacing: 1px; color: #EDE5D5;
}
body.page-lessons .modal-header .btn-close { filter: invert(1) brightness(.7); }
body.page-lessons .modal-body  { background: var(--c-surface); color: var(--c-text); }
body.page-lessons .modal-footer { background: var(--c-surface); border-top: 1px solid var(--c-border-md); }
body.page-lessons .modal-body .form-label {
	color: var(--c-muted); font-family: 'Source Code Pro', monospace;
	font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase;
}
body.page-lessons .modal-body .form-control,
body.page-lessons .modal-body .form-select {
	background: var(--c-surface); border: 1px solid var(--c-border-md);
	color: var(--c-text-str); border-radius: 0;
}
body.page-lessons .modal-body .form-control:focus,
body.page-lessons .modal-body .form-select:focus {
	border-color: #FFD028; box-shadow: none; color: var(--c-text-str);
}

/* ═══ STUDENTS PAGE ═════════════════════════════════════════════════════ */

/* ── Page title ──────────────────────────────────────────────────────── */
/* ── Stats strip ─────────────────────────────────────────────────────── */
.s-stats {
	display: flex;
	border: 1px solid var(--c-border);
	margin-bottom: 20px;
}
.s-stat { display: inline-grid; padding: 12px 14px; background: var(--c-surface); width:100%; }
.s-stat-label { font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; color: var(--c-muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.s-stat-value { font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1.75rem; color: #FFD028; text-shadow: 0 0 var(--c-text-str); line-height: 1; }

/* ── Student list ────────────────────────────────────────────────────── */
.s-list {
	list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--c-border);
}
.s-row {
	position: relative;
	display: grid;
	grid-template-columns: 90px 1fr;
	grid-template-areas: "photo body" "notes notes";
	gap: 0 12px;
	padding: 14px 16px; border-bottom: 1px solid var(--c-border);
	background: var(--c-surface); transition: background .2s;
}
.s-row:last-child { border-bottom: none; }
.s-row:hover      { background: var(--c-yd); }

/* Card: CSS grid — photo + body top, notes full-width below (mobile) */
.s-photo-wrap {
	grid-area: photo; overflow: hidden;
}
.s-photo {
	width: 100%; height: 100%; min-height: 90px; display: block;
	object-fit: cover; object-position: center top;
	filter: grayscale(25%); border: 1px solid var(--c-border-md);
}
.s-body {
	grid-area: body; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-right: 48px;
}

/* Name row: name left, desktop stats right */
.s-name-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.s-name {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 1.1875rem; letter-spacing: 1px; color: var(--c-text-str); line-height: 1.2; margin-bottom: 2px;
}
.s-preferred {
	font-family: 'Source Code Pro', monospace; font-size: 0.6875rem; color: var(--c-muted); margin-bottom: 1px;
}
.s-pronouns { color: var(--c-muted); }
.s-email { font-size: 0.8125rem; color: var(--c-text); margin-bottom: 1px; }
.s-email a { color: var(--c-text); text-decoration: none; border-bottom: 1px dotted var(--c-muted); transition: color .2s, border-color .2s; }
.s-email a:hover { color: #FFD028; text-shadow: 0 0 var(--c-text-str); border-bottom-color: #FFD028; }
.s-course { font-size: 0.9375rem; color: var(--c-text-str); font-weight: 600; margin-bottom: 2px; }

/* Stats cell: icon button + #id — absolutely positioned top-right of card */
.s-smcell {
	position: absolute; top: 12px; right: 14px;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.s-smcell .sm-trigger {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 28px; padding: 0;
	border: 1px solid var(--c-border-md); color: var(--c-muted);
	background: var(--c-surface); cursor: pointer;
	transition: border-color .2s, color .2s;
}
.s-smcell .sm-trigger:hover { border-color: #C19909; color: #C19909; }
.s-smcell .s-id {
	font-family: 'Source Code Pro', monospace; font-size: 0.5rem;
	color: var(--c-muted); letter-spacing: 0.5px; white-space: nowrap;
}
.s-smcell .s-id a { color: inherit; text-decoration: none; }
.s-smcell .s-id a:hover { color: #FFD028; }

/* Group + spare row */
.s-gs-row { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.s-gs-label {
	font-family: 'Source Code Pro', monospace; font-size: 0.5rem;
	letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted); margin-bottom: 2px;
}
.s-gs-grp-row { display: flex; align-items: flex-start; gap: 8px; }

/* Desktop: ≥ 480px — photo spans full card height, notes in right column */
@media (min-width: 480px) {
	.s-row {
		grid-template-columns: 140px 1fr;
		grid-template-areas: "photo body" "photo notes";
	}
	.s-photo { min-height: 0; }
	.s-gs-row { flex-direction: row; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
	.s-notes { margin-top: 8px; }
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.s-empty {
	padding: 32px 20px; text-align: center; border: 1px solid var(--c-border);
	background: var(--c-surface); color: var(--c-muted);
	font-family: 'Source Code Pro', monospace; font-size: 0.75rem; letter-spacing: 1px;
}

/* ── Student notes (students page) ──────────────────────────────────── */
.s-notes { grid-area: notes; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 8px; }

/* Editable own note */
.sn-edit-hd {
	display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.sn-shared-label {
	display: flex; align-items: center; gap: 5px; cursor: pointer;
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted);
}
.sn-shared { accent-color: #FFD028; cursor: pointer; }
.sn-textarea {
	width: 100%; display: block;
	background: var(--c-surface); border: 1px solid var(--c-border-md);
	color: var(--c-text); font-family: 'Source Code Pro', monospace; font-size: 0.6875rem;
	line-height: 1.5; padding: 6px 8px; resize: vertical; min-height: 48px;
	border-radius: 0; outline: none; transition: border-color .2s;
	box-sizing: border-box;
}
.sn-textarea:focus { border-color: #FFD028; }
.sn-textarea::placeholder { color: var(--c-muted); }
.sn-status {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; letter-spacing: 1px;
	color: var(--c-muted); text-align: right; min-height: 14px; margin-top: 2px;
}
.sn-status.sn-saved { color: #5EBF3A; }
.s-note-label {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--c-muted); display: block; margin-bottom: 3px;
}
.s-note-shared-badge {
	font-size: 0.5625rem; letter-spacing: 1px; padding: 1px 5px;
	background: rgba(255,208,40,.15); color: #FFD028; margin-left: 5px;
}
.s-note-author {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem; letter-spacing: 0.5px;
	color: var(--c-text-str); display: block; margin-bottom: 3px;
}
.s-note-text { font-size: 0.8125rem; color: var(--c-text); line-height: 1.4; }
.s-note-other .s-note-author { color: var(--c-muted); }

/* ── Pagination ──────────────────────────────────────────────────────── */
.s-pager {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 0; margin-top: 4px; border-top: 1px solid var(--c-border);
}
.s-pager-btn {
	font-family: 'Source Code Pro', monospace; font-size: 0.6875rem; letter-spacing: 1px;
	text-transform: uppercase; padding: 8px 14px;
	border: 1px solid var(--c-border-md); color: var(--c-text);
	background: var(--c-surface); text-decoration: none;
	transition: border-color .2s, color .2s;
}
.s-pager-btn:hover         { border-color: #C19909; color: #C19909; }
.s-pager-disabled          { color: var(--c-muted); cursor: default; }
.s-pager-disabled:hover    { border-color: var(--c-border-md); color: var(--c-muted); }
.s-pager-info {
	font-family: 'Source Code Pro', monospace; font-size: 0.6875rem;
	color: var(--c-muted); letter-spacing: 0.5px;
}

/* ── Search mode banner ──────────────────────────────────────────────── */
.s-search-active {
	display: flex; align-items: center; gap: 10px; justify-content: space-between;
	padding: 10px 14px; margin-bottom: 14px;
	border: 1px solid var(--c-border); background: var(--c-surface);
	font-size: 0.8125rem; color: var(--c-text);
}
.s-search-active strong { color: #E0B20D; font-weight: normal; }
.s-search-clear {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem; letter-spacing: 1px;
	text-transform: uppercase; color: var(--c-muted);
	text-decoration: none; flex-shrink: 0; transition: color .2s;
}
.s-search-clear:hover { color: #E0B20D; }

/* ── Search in DB button ─────────────────────────────────────────────── */
.s-db-search {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; margin-bottom: 14px;
	border: 1px solid var(--c-border-md); background: rgba(255,208,40,.05);
}
.s-db-search-label {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem;
	color: var(--c-muted); letter-spacing: 1px; text-transform: uppercase; flex-shrink: 0;
}
.s-db-search-btn {
	font-size: 0.8125rem; color: #E0B20D; text-shadow: 0 0 var(--c-text-str); text-decoration: none; transition: color .2s;
}
.s-db-search-btn:hover { color: #FFE060; }

/* ═══ SETTINGS PAGE ═════════════════════════════════════════════════════ */

/* ── Page title ──────────────────────────────────────────────────────── */
/* ── Setting blocks ──────────────────────────────────────────────────── */
.set-block {
	border: 1px solid var(--c-border); margin-bottom: 16px;
}

/* Block header — same dark clapperboard stripe as courses */
.set-hd {
	position: relative; overflow: hidden;
	background: var(--c-chd); padding: 10px 16px;
}
.set-hd::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(
		-55deg,
		transparent 0, transparent 6px,
		rgba(255,208,40,.07) 6px, rgba(255,208,40,.07) 12px
	);
}
.set-hd-label {
	position: relative; z-index: 1;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 1rem; letter-spacing: 2px; color: #EDE5D5;
}

/* Info rows */
.set-rows { list-style: none; margin: 0; padding: 0; }
.set-row {
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	padding: 11px 16px; border-bottom: 1px solid var(--c-border);
	background: var(--c-surface);
}
.set-row:last-child { border-bottom: none; }
.set-key {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--c-muted); flex-shrink: 0; min-width: 120px;
}
.set-val {
	font-size: 0.875rem; color: var(--c-text-str); flex: 1;
}
.set-val a { color: var(--c-text-str); text-decoration: none; transition: color .2s; }
.set-val a:hover { color: #FFD028; }

/* Body area (description + action) */
.set-body { padding: 16px; background: var(--c-surface); }
.set-desc {
	font-size: 0.8125rem; color: var(--c-text); margin-bottom: 16px; line-height: 1.6;
}

/* Action button — yellow, same as l-stat-add */
.set-btn {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.875rem; letter-spacing: 1.5px;
	text-transform: uppercase; padding: 10px 20px;
	background: #FFD028; color: #0A0A0A; border: none; outline: none;
	cursor: pointer; transition: background .2s;
}
.set-btn:hover { background: #FFE060; }

/* ═══ ATTENDANCE PAGE ═══════════════════════════════════════════════════ */

body.page-attendance {
	/* Status colours (attendance-specific) */
	--att-p:  #5EBF3A; --att-pd: rgba(94,191,58,.12);   /* present   — green  */
	--att-a:  #BF3A3A; --att-ad: rgba(191,58,58,.12);   /* absent    — red    */
	--att-au: #3A8BBF; --att-aud: rgba(58,139,191,.12); /* authorised — blue  */
	--att-n:  #9966CC; --att-nd: rgba(153,102,204,.12); /* notified  — purple */
	--att-l:  #D4843A; --att-ld: rgba(212,132,58,.12);  /* late      — amber  */
}

/* ── Page title row ──────────────────────────────────────────────────── */
.att-head-row {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 10px; margin-bottom: 5px;
}
.att-head-main { flex: 1; min-width: 0; }
.att-head-main .att-title { margin-bottom: 4px; }
.att-head-main .att-sub   { margin-bottom: 0; }

.att-head-dt {
	flex-shrink: 0; text-align: right;
	/*font-family: 'Source Code Pro', monospace; font-size: 0.8125rem;*/
	color: var(--c-text-str); letter-spacing: 0.5px;
	display: flex; flex-direction: column; gap: 5px; padding-top: 6px;
}
.att-head-date, .att-head-time {
	line-height: 1em; font-weight: bold; color: #FFD028; text-shadow: 0 0 1px black; 
	display: flex; align-items: center; justify-content: flex-end; gap: 5px;
}
.att-head-date { font-size: 1.5em; }
.att-head-time {font-size: 1.25em;}
.att-dt-icon {
	width: 14px; height: 14px; flex-shrink: 0;
	stroke: /*currentColor*/ var(--c-muted); fill: none; stroke-width: 2;
	stroke-linecap: round; stroke-linejoin: round;
}

.att-sub-course {
	display: block; font-size: 0.75rem; font-weight: 600; color: var(--c-text);
}
.att-sub-batch { display: block; }

/* ── Page title ──────────────────────────────────────────────────────── */
.att-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 2.25rem; letter-spacing: 2px; color: #FFD028; text-shadow: 0 0 var(--c-text-str);
	line-height: 1; margin-bottom: 4px;
}
@media (min-width: 576px) { .att-title { font-size: 3rem; } }

/* ── Stats strip (batch overview) ────────────────────────────────────── */
.att-stats {
	display: grid; grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--c-border); margin-bottom: 20px;
}
.att-stat { padding: 12px 14px; background: var(--c-surface); border-right: 1px solid var(--c-border); }
.att-stat:last-child { border-right: none; }
.att-stat-label { font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; color: var(--c-muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.att-stat-value { font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1.625rem; color: #FFD028; text-shadow: 0 0 var(--c-text-str); line-height: 1; }
.att-stat-value--good { color: var(--att-p); }
.att-stat-value--ok   { color: var(--att-n); }
.att-stat-value--bad  { color: var(--att-a); }

/* ── Lesson blocks (batch overview) ─────────────────────────────────── */
.att-lesson { border: 1px solid var(--c-border); margin-bottom: 16px; }

.att-lesson-hd {
	position: relative; overflow: hidden;
	background: var(--c-chd); padding: 10px 16px;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.att-lesson-hd::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(-55deg, transparent 0, transparent 6px, rgba(255,208,40,.07) 6px, rgba(255,208,40,.07) 12px);
}
.att-lesson-hd-text { position: relative; z-index: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.att-lesson-title { font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1.125rem; letter-spacing: 1.5px; color: #EDE5D5; }
.att-lesson-dur   { font-family: 'Source Code Pro', monospace; font-size: 0.625rem; color: rgba(255,255,255,.35); }
.att-sched-add-btn {
	position: relative; z-index: 1; flex-shrink: 0;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.6875rem; letter-spacing: 1.5px; text-transform: uppercase;
	padding: 4px 10px; border: 1px solid #E0B20D; color: #E0B20D;
	background: transparent; cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.att-sched-add-btn:hover, .att-sched-add-btn:active { border-color: #FFD028; color: #0A0A0A; background: #FFD028; }

.att-no-sched {
	padding: 10px 16px; font-family: 'Source Code Pro', monospace;
	font-size: 0.6875rem; color: var(--c-muted); background: var(--c-surface);
}

/* Schedule rows */
.att-schedules { list-style: none; margin: 0; padding: 0; }
.att-sched-row {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	padding: 10px 16px; border-top: 1px solid var(--c-border);
	background: var(--c-surface); transition: background .2s;
}
.att-sched-row:hover { background: var(--c-yd); }

.att-sched-left { display: flex; flex-direction: column; min-width: 90px; }
.att-sched-date { font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.9375rem; letter-spacing: 1px; color: var(--c-text-str); }
.att-sched-time { font-family: 'Source Code Pro', monospace; font-size: 0.625rem; color: var(--c-muted); }

/* Status pills */
.att-pills { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.att-pill   { font-family: 'Source Code Pro', monospace; font-size: 0.625rem; padding: 2px 5px; }
.att-pill-p  { color: var(--att-p);  background: var(--att-pd); }
.att-pill-a  { color: var(--att-a);  background: var(--att-ad); }
.att-pill-au { color: var(--att-au); background: var(--att-aud); }
.att-pill-n  { color: var(--att-n);  background: var(--att-nd); }
.att-pill-l  { color: var(--att-l);  background: var(--att-ld); }

.att-sched-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Completion badges */
.att-comp { font-family: 'Source Code Pro', monospace; font-size: 0.625rem; letter-spacing: 1px; padding: 2px 7px; }
.att-comp-none    { color: var(--c-muted);  background: rgba(100,100,100,.1); }
.att-comp-partial { color: var(--att-n);    background: var(--att-nd); }
.att-comp-done    { color: var(--att-p);    background: var(--att-pd); }

/* Mark + delete buttons */
.att-mark-btn {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.8125rem; letter-spacing: 1px;
	padding: 5px 14px; background: #FFD028; color: #0A0A0A; border: 1px solid #FFD028;
	text-decoration: none; transition: background .2s;
}
.att-mark-btn:hover { background: #FFE060; color: #0A0A0A; border-color: #FFE060; }
.att-del-btn {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.875rem;
	padding: 4px 10px; border: 1px solid var(--c-border-md); color: var(--c-muted);
	text-decoration: none; transition: border-color .2s, color .2s;
}
.att-del-btn:hover { border-color: var(--att-a); color: var(--att-a); }

/* Schedule description in row listing */
.att-sched-desc {
	display: block; font-size: 0.6875rem; color: var(--c-muted);
	font-style: italic; margin-top: 3px;
}

/* Edit schedule button */
.att-edit-btn {
	padding: 4px 8px; border: 1px solid var(--c-border-md); color: var(--c-muted);
	background: transparent; cursor: pointer; transition: border-color .2s, color .2s;
	display: inline-flex; align-items: center;
}
.att-edit-btn:hover { border-color: #C19909; color: #C19909; }

/* Filter badges on schedule rows */
.att-sched-badge {
	display: inline-block; font-size: 0.625rem; font-family: 'Source Code Pro', monospace;
	letter-spacing: .5px; padding: 1px 5px; border: 1px solid #E0B20D;
	color: #E0B20D; border-radius: 2px; margin-top: 2px;
}

/* Group / Spare multiselect toggle buttons */
.att-grp-btns { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.att-grp-btn {
	background: var(--c-surface); border: 1px solid var(--c-border-md); color: var(--c-muted);
	padding: 7px 9px; font-size: 0.75rem; font-family: 'Source Code Pro', monospace;
	letter-spacing: 1px; cursor: pointer; line-height: 1.3; min-width: 32px; text-align: center;
	transition: background .15s, color .15s, border-color .15s;
}
.att-grp-btn:hover { border-color: var(--c-muted); color: var(--c-text); }
.att-grp-btn:active { background: #FFD028; border-color: #FFD028; color: #0A0A0A; }
.att-grp-btn.active { background: #FFD028; border-color: #FFD028; color: #0A0A0A; }

/* Schedule modal filter row */
.att-modal-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.att-modal-spare-sel { height: auto; padding: 2px; }
.att-modal-spare-sel option { padding: 5px 8px; cursor: pointer; }

/* Filter + sort bar on schedule attendance page */
.att-filters {
	display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end;
	margin-bottom: 12px;
}
.att-filter-item { display: flex; flex-direction: column; gap: 3px; }
.att-filter-label {
	font-size: 0.625rem; font-family: 'Source Code Pro', monospace; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--c-muted);
}
.att-filter-sel {
	background: var(--c-surface); border: 1px solid var(--c-border-md); color: var(--c-text);
	padding: 5px 28px 5px 8px; font-size: 0.8125rem; border-radius: 0; cursor: pointer;
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 8px center;
	min-width: 80px;
}
.att-filter-sel:focus { outline: none; border-color: #FFD028; }

/* Student summary table (batch overview) */
.att-section-label {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; letter-spacing: 3px;
	text-transform: uppercase; color: var(--c-muted); margin: 24px 0 8px;
}
.att-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); margin-bottom: 16px; }
.att-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.att-table thead tr { border-bottom: 1px solid var(--c-border); background: var(--c-chd); }
.att-table th {
	padding: 8px 10px; font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 2px; text-transform: uppercase; font-weight: normal; white-space: nowrap;
}
.att-table th:first-child {color: var(--c-muted);}
.att-th-p  { color: var(--att-p); }
.att-th-a  { color: var(--att-a); }
.att-th-au { color: var(--att-au); }
.att-th-n  { color: var(--att-n); }
.att-th-l  { color: var(--att-l); }
.att-table td { padding: 9px 10px; border-bottom: 1px solid var(--c-border); color: var(--c-text); background: var(--c-surface); }
.att-table tr:last-child td { border-bottom: none; }
.att-table tr:hover td { background: var(--c-yd); }
.att-td-center { text-align: center; font-family: 'Source Code Pro', monospace; }
.att-pct-good { color: var(--att-p); font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.9375rem; }
.att-pct-ok   { color: var(--att-n); font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.9375rem; }
.att-pct-bad  { color: var(--att-a); font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.9375rem; }

/* ── Marking view: 7-cell stats grid ─────────────────────────────────── */
.att-mark-stats {
	display: grid; grid-template-columns: repeat(5, 1fr);
	border: 1px solid var(--c-border); margin-bottom: 16px;
}
@media (min-width: 480px) { .att-mark-stats { grid-template-columns: repeat(7, 1fr); } }

.att-mark-stat {
	padding: 5px 3px; background: var(--c-surface);
	border-right: 1px solid var(--c-border);
}
.att-mark-stat:last-child { border-right: none; }
.att-mark-stat-label { font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; color: var(--c-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 3px; }
.att-mark-stat-value { font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1.375rem; color: #FFD028; text-shadow: 0 0 var(--c-text-str); line-height: 1; }

.att-ms-p  .att-mark-stat-value { color: var(--att-p)   !important; }
.att-ms-a  .att-mark-stat-value { color: var(--att-a)   !important; }
.att-ms-au .att-mark-stat-value { color: var(--att-au)  !important; }
.att-ms-n  .att-mark-stat-value { color: var(--att-n)   !important; }
.att-ms-l  .att-mark-stat-value { color: var(--att-l)   !important; }
.att-ms-u  .att-mark-stat-value { color: var(--c-muted) !important; }

/* ── Lesson meta (marking view) ──────────────────────────────────────── */
.att-lesson-meta {
	display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
	margin-bottom: 16px; padding: 8px 0; border-bottom: 1px solid var(--c-border);
}
.att-lesson-meta-dur  { font-family: 'Source Code Pro', monospace; font-size: 0.6875rem; color: var(--c-muted); }
.att-lesson-meta-desc { font-size: 0.8125rem; color: var(--c-text); }

/* ── Bulk action bar ─────────────────────────────────────────────────── */
.att-bulk {
	display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px;
}
/* Bootstrap button overrides for dark theme */
body.page-attendance .btn-success   { background: var(--att-p);  border-color: var(--att-p);  color: #FFF; }
body.page-attendance .btn-danger    { background: var(--att-a);  border-color: var(--att-a);  color: #FFF; }
body.page-attendance .btn-secondary { background: transparent; border-color: var(--c-border-md); color: var(--c-muted); }
body.page-attendance .btn-warning   { background: #FFD028; border-color: #FFD028; color: #0A0A0A; }
body.page-attendance .btn-warning:hover { background: #FFE060; border-color: #FFE060; }

/* ── Status select ───────────────────────────────────────────────────── */
.att-status-sel {
	-webkit-appearance: none; appearance: none;
	font-family: 'Source Code Pro', monospace; font-size: 0.75rem; letter-spacing: 0.5px;
	padding: 6px 28px 6px 10px; border: 1px solid var(--c-border-md);
	background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 10px center;
	background-size: 8px 5px;
	color: var(--c-muted);
	cursor: pointer; border-radius: 0; min-width: 130px;
	transition: border-color .2s, background-color .2s, color .2s;
}
.att-status-sel:focus { outline: none; border-color: #FFD028; }
/* Status-coloured states — background-color only so SVG arrow stays visible */
.att-status-sel.sel-present    { border-color: var(--att-p);  color: var(--att-p);  background-color: var(--att-pd); }
.att-status-sel.sel-absent     { border-color: var(--att-a);  color: var(--att-a);  background-color: var(--att-ad); }
.att-status-sel.sel-authorised { border-color: var(--att-au); color: var(--att-au); background-color: var(--att-aud); }
.att-status-sel.sel-notified   { border-color: var(--att-n);  color: var(--att-n);  background-color: var(--att-nd); }
.att-status-sel.sel-late       { border-color: var(--att-l);  color: var(--att-l);  background-color: var(--att-ld); }

/* ── Student cards (marking view) ────────────────────────────────────── */
.att-student {
	background: var(--c-surface); border-bottom: 1px solid var(--c-border);
	border-left: 3px solid transparent;
	padding: 12px 14px; margin-bottom: 8px;
	transition: background .15s, border-left-color .15s;
}
.att-row-p  { border-left-color: var(--att-p);  border-bottom-color: var(--att-p); }
.att-row-a  { border-left-color: var(--att-a); 	border-bottom-color: var(--att-a); }
.att-row-au { border-left-color: var(--att-au); border-bottom-color: var(--att-au);}
.att-row-n  { border-left-color: var(--att-n);  border-bottom-color: var(--att-n); }
.att-row-l  { border-left-color: var(--att-l);  border-bottom-color: var(--att-l); }

/* Photo + body grid */
.att-stu-grid {
	display: grid; grid-template-columns: 125px 1fr;
	gap: 0 6px; align-items: stretch;
}
.att-stu-photo {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center top;
	border: 1px solid var(--c-border-md); filter: grayscale(20%);
	display: block;
}
.att-stu-body  { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* Name row: name+pronouns left, group badge top-right */
.att-stu-namerow  { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.att-stu-nameblock { flex: 1; min-width: 0; }
.att-stu-name  { font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1.0625rem; letter-spacing: 1px; color: var(--c-text-str); line-height: 1.1; }
.att-stu-sub   { font-family: 'Source Code Pro', monospace; font-size: 0.85em; color: var(--c-muted); margin-top: 3px; }
.att-stu-grp-badge {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem; font-weight: 600;
	letter-spacing: 1px; color: #FFD028; border: 1px solid #FFD028;
	padding: 2px 5px; flex-shrink: 0; line-height: 1.4;
}

/* Status dropdown row — right-aligned */
.att-stu-sel-row { display: flex; justify-content: flex-end; }

/* Share checkbox + save button row */
.att-shared-check {
	display: flex; justify-content: flex-end; align-items: center;
	gap: 8px; margin-top: -2px;
}
.att-save-btn { flex-shrink: 0; margin-left: auto; }
.att-note-input { margin-bottom: 0 !important; }

/* form-control dark overrides */
body.page-attendance .form-control,
body.page-attendance .form-select {
	background: var(--c-surface); border: 1px solid var(--c-border-md);
	color: var(--c-text-str); border-radius: 0;
}
body.page-attendance .form-control:focus,
body.page-attendance .form-select:focus {
	border-color: #FFD028; box-shadow: none; color: var(--c-text-str); background: var(--c-surface);
}
body.page-attendance .form-control::placeholder { color: var(--c-muted); }
body.page-attendance .form-check-input { background-color: var(--c-surface); border-color: var(--c-border-md); }
body.page-attendance .form-check-input:checked { background-color: #FFD028; border-color: #FFD028; }
body.page-attendance .form-check-label { font-family: 'Source Code Pro', monospace; font-size: 0.625rem; color: var(--c-muted); }

/* btn-outline-primary (save button) */
body.page-attendance .btn-outline-primary { border-color: #E0B20D; color: #E0B20D; background: transparent; }
body.page-attendance .btn-outline-primary:hover, body.page-attendance .btn-outline-primary:active { border-color: #FFD028; color: #0A0A0A; background: #FFD028; }

/* read-only note */
.att-stu-note-ro { font-size: 0.75rem; color: var(--c-muted); margin-top: 4px; font-family: 'Source Code Pro', monospace; }

/* Shared notes */
.att-shared-notes { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-border); }
.att-shared-note  { font-size: 0.75rem; color: var(--c-muted); margin-bottom: 2px; }
.att-shared-email { color: var(--c-text-str); font-family: 'Source Code Pro', monospace; }

/* Attendance status badges (read-only view) */
.att-badge { font-family: 'Source Code Pro', monospace; font-size: 0.625rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 8px; }
.att-badge-p  { color: var(--att-p);  background: var(--att-pd); }
.att-badge-a  { color: var(--att-a);  background: var(--att-ad); }
.att-badge-au { color: var(--att-au); background: var(--att-aud); }
.att-badge-n  { color: var(--att-n);  background: var(--att-nd); }
.att-badge-l  { color: var(--att-l);  background: var(--att-ld); }

/* ── Attendance modals ───────────────────────────────────────────────── */
body.page-attendance .modal-content {
	background: var(--c-surface); border: 1px solid var(--c-border-md); border-radius: 0;
}
body.page-attendance .modal-header { background: var(--c-chd); border-bottom: 1px solid var(--c-border-md); }
body.page-attendance .modal-header .modal-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1.25rem; letter-spacing: 1px; color: #EDE5D5;
}
body.page-attendance .modal-header .btn-close { filter: invert(1) brightness(.7); }
body.page-attendance .modal-body   { background: var(--c-surface); color: var(--c-text); }
body.page-attendance .modal-footer { background: var(--c-surface); border-top: 1px solid var(--c-border-md); }
body.page-attendance .modal-body .form-label {
	color: var(--c-muted); font-family: 'Source Code Pro', monospace; font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.att-empty {
	padding: 28px 20px; text-align: left; border: 1px solid var(--c-border);
	background: var(--c-surface); color: var(--c-muted);
	font-family: 'Source Code Pro', monospace; font-size: 0.75rem; letter-spacing: 1px; margin-bottom: 16px;
}
.att-empty-title {
	color: var(--c-text); font-size: 0.8125rem; font-weight: 500; margin-bottom: 14px; text-align: center;
}
.att-empty-steps {
	font-family:'Source Sans Pro',sans-serif;
	margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px;
}
.att-empty-steps li { line-height: 1.5; }
.att-empty-steps a { color: #FFD028; }
@media (prefers-color-scheme: light) { .att-empty-steps a { color: #7A5500; } }
html[data-theme="light"] .att-empty-steps a { color: #7A5500; }

/* ═══ HOME PAGE ═════════════════════════════════════════════════════════ */

body.page-home {
	--att-n: #FFD028; /* notification/pending yellow */
}

@media (prefers-color-scheme: light) {
	body.page-home {
		--att-n: #C79F0E; /* slightly warmer in light mode */
	}
}

/* ── Unauthenticated welcome ─────────────────────────────────────────── */
.home-welcome {
	border: 1px solid var(--c-border); background: var(--c-surface);
	padding: 40px 28px; text-align: left; position: relative; overflow: hidden;
}
.home-welcome::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(
		-55deg,
		transparent 0, transparent 8px,
		rgba(255,208,40,.04) 8px, rgba(255,208,40,.04) 16px
	);
}
.home-eyebrow {
	position: relative; z-index: 1;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.625rem; letter-spacing: 4px;
	color: #FFD028;
	text-transform: uppercase; color: var(--c-muted); margin-bottom: 10px;
}
.home-hero {
	position: relative; z-index: 1;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 4rem; letter-spacing: 4px; color: #FFD028;
	line-height: 1; margin-bottom: 20px;
}
@media (min-width: 480px) { .home-hero { font-size: 5rem; } }

.home-tagline {
	position: relative; z-index: 1;
	font-size: 0.875rem; color: var(--c-text); line-height: 1.6;
	max-width: 420px; margin-bottom: 28px;
	padding-top: 20px; border-top: 1px solid var(--c-border);
}

/* ── Authenticated home ──────────────────────────────────────────────── */
/* ── Access denied ───────────────────────────────────────────────────── */
.home-denied {
	border: 1px solid var(--c-border); background: var(--c-surface); padding: 32px 24px;
}
.home-denied-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 2.25rem; letter-spacing: 2px; color: #BF3A3A;
	line-height: 1; margin-bottom: 16px;
}
.home-denied-msg { font-size: 0.875rem; color: var(--c-text); line-height: 1.6; margin-bottom: 24px; }
.home-denied-msg p { margin-bottom: 6px; }
.home-denied-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Shared buttons ──────────────────────────────────────────────────── */
.home-login-btn, .home-dashboard-btn {
	display: inline-block;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.9375rem; letter-spacing: 1.5px;
	text-transform: uppercase; padding: 12px 24px;
	background: #FFD028; color: #0A0A0A; border: 1px solid #FFD028;
	text-decoration: none; transition: background .2s, border-color .2s;
}
.home-login-btn:hover, .home-dashboard-btn:hover { background: #FFE060; border-color: #FFE060; color: #0A0A0A; }

.home-logout-btn {
	display: inline-block;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.9375rem; letter-spacing: 1.5px;
	text-transform: uppercase; padding: 12px 24px;
	background: transparent; color: var(--c-muted);
	border: 1px solid var(--c-border-md); text-decoration: none;
	transition: border-color .2s, color .2s;
}
.home-logout-btn:hover { border-color: var(--c-muted); color: var(--c-text-str); }

/* ── Actions row ─────────────────────────────────────────────────────── */
.home-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* ═══ DASHBOARD PAGE ════════════════════════════════════════════════════ */

body.page-dashboard {
	/* Attendance status colours used in schedule cards */
	--att-p:  #5EBF3A; --att-pd: rgba(94,191,58,.15);
	--att-a:  #BF3A3A; --att-ad: rgba(191,58,58,.15);
	--att-n:  #FFD028; --att-nd: rgba(255,208,40,.15);
}

@media (prefers-color-scheme: light) {
	body.page-dashboard {
		--c-chd:  #1A1A1A; /* dashboard card headers — slightly lighter in light mode */
		--att-p:  #5EBF3A; --att-pd: rgba(94,191,58,.15);
		--att-a:  #BF3A3A; --att-ad: rgba(191,58,58,.15);
		--att-n:  #FFD028; --att-nd: rgba(255,208,40,.15);
	}
}

/* ── Page header row (title + manual link) ───────────────────────────── */
.dash-hd-row {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 12px;
}
.dash-hd-main { flex: 1; min-width: 0; }
.dash-manual-link {
	flex-shrink: 0; align-self: flex-start; margin-top: 8px;
	font-family: 'Source Code Pro', monospace; font-size: 0.6875rem;
	letter-spacing: 0.5px; color: var(--c-muted); text-decoration: none;
	white-space: nowrap;
}
.dash-manual-link:hover { color: var(--c-text-str); }

/* ── Page title ──────────────────────────────────────────────────────── */
/* ── Stats strip ─────────────────────────────────────────────────────── */
.dash-stats {
	border: 1px solid var(--c-border); margin-bottom: 20px; display: flex;
}
.dash-stat { position:relative; padding: 12px 14px; background: var(--c-surface); flex: 1; border-right: 1px solid var(--c-border); }
.dash-stat:last-child { border-right: none; }
.dash-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(-55deg, transparent 0, transparent 8px, rgba(255, 208, 40, .04) 8px, rgba(255, 208, 40, .04) 16px);
}
.dash-stat-label { font-family: 'Source Code Pro', monospace; font-size: 0.5625rem; color: var(--c-muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.dash-stat-value { font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 1.75rem; color: #FFD028; text-shadow: 0 0 var(--c-text-str); line-height: 1; }
.dash-stat-dim   { color: var(--c-muted); }

/* ── Past toggle ─────────────────────────────────────────────────────── */
.dash-past-toggle {
	width: 100%; text-align: left; padding: 10px 14px;
	background: transparent; border: 1px dashed var(--c-border-md);
	color: var(--c-muted); font-family: 'Source Code Pro', monospace;
	font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase;
	cursor: pointer; margin-bottom: 16px; transition: border-color .2s, color .2s;
}
.dash-past-toggle:hover { border-color: var(--c-text); color: var(--c-text); }

/* ── Date section ────────────────────────────────────────────────────── */
.dash-section { margin-bottom: 4px; }

.dash-section-hd {
	padding: 8px 14px; background: var(--c-chd);
	border: 1px solid var(--c-border); border-bottom: none;
	display: flex; align-items: center; gap: 10px;
}
.dash-date-label {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 0.9375rem; letter-spacing: 1.5px; color: #FFD028;
}
.dash-hd-today .dash-date-label { color: #FFD028; }
.dash-hd-past  .dash-date-label { color: var(--c-muted); }

.dash-today-badge {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 2px; text-transform: uppercase; padding: 2px 6px;
	background: rgba(255,208,40,.15); color: #FFD028;
}

/* ── Schedule card ───────────────────────────────────────────────────── */
.dash-card {
	padding: 7px 16px 14px 16px; background: var(--c-surface);
	border: 1px solid var(--c-border); border-top: none;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	transition: background .2s;
}
.dash-card:hover    { background: var(--c-yd); }
.dash-card-past     { opacity: 0.6; }

.dash-card-course a, .dash-card-batch a {
	color: inherit; text-decoration: none;
}
.dash-card-course a:hover, .dash-card-batch a:hover { text-decoration: underline; }
.dash-card-batch     { font-size: 0.85em; }

.dash-card-main     { flex: 1; min-width: 0; }
.dash-card-lesson   {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 1.0625rem; letter-spacing: 1px; color: var(--c-text-str);
	line-height: 1.1; margin-bottom: 5px;
}
.dash-card-meta {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem;
	color: var(--c-muted); letter-spacing: 0.5px;
	display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.dash-card-sep  { color: var(--c-border-md); }
.dash-card-time { color: var(--c-text); }

.dash-card-foot {
	display: flex; flex-direction: column; align-items: flex-end;
	gap: 6px; flex-shrink: 0;
}

/* ── Completion pill ─────────────────────────────────────────────────── */
.dash-comp {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 1.5px; text-transform: uppercase;
	padding: 2px 6px; white-space: nowrap;
}
.dash-comp-none    { color: var(--c-muted);  background: rgba(255,255,255,.04); }
.dash-comp-partial { color: /*var(--att-n)*/ inherit;    background: var(--att-nd); }
.dash-comp-done    { color: var(--att-p);    background: var(--att-pd); }

/* ── Mark button ─────────────────────────────────────────────────────── */
.dash-mark-btn {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.75rem; letter-spacing: 1.5px;
	text-transform: uppercase; padding: 5px 12px;
	border: 1px solid #E0B20D; color: #E0B20D;
	background: transparent; cursor: pointer; text-decoration: none;
	transition: border-color .2s, color .2s, background .2s;
}
.dash-mark-btn:hover { border-color: #FFD028; color: #0A0A0A; background: #FFD028; }

/* ── Student group/spare controls (students page) ────────────────────── */
.sg-btns .att-grp-btn:disabled { opacity: 0.4; cursor: wait; }
.sg-sel {
	-webkit-appearance: none; appearance: none;
	font-family: 'Source Code Pro', monospace; font-size: 0.75rem; letter-spacing: 0.5px;
	padding: 7px 24px 7px 8px; border: 1px solid var(--c-border-md);
	background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 8px center;
	background-size: 8px 5px;
	color: var(--c-muted); cursor: pointer; border-radius: 0; min-width: 60px;
	transition: border-color .2s, color .2s;
}
.sg-sel:focus { outline: none; border-color: #FFD028; }
.sg-sel:disabled { opacity: 0.5; cursor: wait; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.dash-empty {
	padding: 32px 20px; text-align: center; border: 1px solid var(--c-border);
	background: var(--c-surface); color: var(--c-muted);
	font-family: 'Source Code Pro', monospace; font-size: 0.75rem; letter-spacing: 1px;
}

/* ═══ GLOBAL: THEME + FONT SIZE OVERRIDES ════════════════════════════════
   Applied via html[data-theme] and html[data-fsize] set from cookies.
   These rules have higher specificity than the per-page @media blocks.
   ════════════════════════════════════════════════════════════════════════ */

/* Dark theme — overrides light media query */
html[data-theme="dark"] body { background: #080808 !important; color: #C8BFB0 !important; }
html[data-theme="dark"] body[class*="page-"] {
	--c-surface:   #0F0F0F;
	--c-border:    #1E1E1E;
	--c-border-md: #2E2E2E;
	--c-muted:     #888888;
	--c-text:      #C8BFB0;
	--c-text-str:  #EDE5D5;
	--c-yd:        rgba(255,208,40,.08);
	--c-green:     #5EBF3A;
	--c-gd:        rgba(94,191,58,.12);
	--c-chd:       #0C0B09;
}

/* Light theme — overrides dark default */
html[data-theme="light"] { color-scheme: light; } /* forces native form elements (checkboxes etc.) to render light */
html[data-theme="light"] body { background: #F5F0E6 !important; color: #3A3028 !important; }
html[data-theme="light"] body[class*="page-"] {
	--c-surface:   #FDFAF4;
	--c-border:    #D8CFBA;
	--c-border-md: #C4B89E;
	--c-muted:     #6a6050;
	--c-text:      #3A3028;
	--c-text-str:  #1A1410;
	--c-yd:        rgba(255,208,40,.12);
	--c-green:     #3A9E1A;
	--c-gd:        rgba(58,158,26,.10);
	--c-chd:       #0C0B09;
}
/* Override Bootstrap's dark-mode checkbox bg for Bootstrap-styled checkboxes (form-check-input) */
html[data-theme="light"] body[class*="page-"] .form-check-input:not(:checked) {
	--bs-form-check-bg: transparent;
	background: transparent !important;
}
/* ── Yellow accent text → dark amber on light backgrounds ── */
html[data-theme="light"] .courses-title,
html[data-theme="light"] .lessons-title,
html[data-theme="light"] .students-title,
html[data-theme="light"] .settings-title,
html[data-theme="light"] .home-title,
html[data-theme="light"] .dash-title,
html[data-theme="light"] .att-title,
html[data-theme="light"] .home-hero,
html[data-theme="light"] .man-idx-title,
html[data-theme="light"] .man-doc-title,
html[data-theme="light"] .man-idx-card-title { color: /*#7A5500*/ #FFD028; text-shadow: 0 0 1px black; }
html[data-theme="light"] .c-stat-value,
html[data-theme="light"] .l-stat-value,
html[data-theme="light"] .s-stat-value,
html[data-theme="light"] .att-stat-value,
html[data-theme="light"] .att-mark-stat-value,
html[data-theme="light"] .dash-stat-value { color: /*#C19909*/ #FFD028; text-shadow: 0 0 1px black; }
html[data-theme="light"] .l-sched-today { color: /*#7A5500*/ #FFD028; text-shadow: 0 0 1px black; }
html[data-theme="light"] .s-note-shared-badge { color: #6D4C00; background: rgba(122,85,0,.12); }
html[data-theme="light"] .man-body a { color: /*#7A5500*/ #FFD028; text-shadow: 0 0 1px black; }
html[data-theme="light"] .lfa-yellow { color: /*#7A5500*/ #FFD028; text-shadow: 0 0 1px black; }
html[data-theme="light"] .dash-mark-btn { border-color: #C19909; color: #C19909; }
html[data-theme="light"] .dash-mark-btn:hover,
html[data-theme="light"] .dash-mark-btn:active { border-color: #C19909; color: #0A0A0A; background: #FFD028; }
html[data-theme="light"] .l-btn-edit { border-color: #C19909; color: #C19909;}
html[data-theme="light"] .l-btn-edit:hover { border-color: #C19909; color: #0A0A0A; background: #FFD028; }
html[data-theme="light"] .s-search-active strong,
html[data-theme="light"] .s-db-search-btn { color: /*#7A5500*/ #FFD028; text-shadow: 0 0 1px black; }
html[data-theme="light"] .l-sched-comp-partial { color: /*#7A5500*/ #FFD028; text-shadow: 0 0 1px black; background: rgba(122,85,0,.10); }
html[data-theme="light"] .att-sched-badge { border-color: #C19909; color: #C19909; }
html[data-theme="light"] .att-stu-grp-badge { border-color: #7A5500; color: #7A5500; }
/* Stats popup: yellow values need outline on light bg */
html[data-theme="light"] .sm-stat-value,
html[data-theme="light"] .sm-risk-amber .sm-stat-value { color: #FFD028; text-shadow: 0 0 1px black; }
html[data-theme="light"] .sm-risk.sm-risk-amber { color: #C19909; }

/* ── Font size: scale html root so all rem values cascade ────────────
   Default browser = 16px (100%). Never use the 62.5% trick — it
   breaks user accessibility preferences. Modes stored in cookie and
   applied via html[data-fsize] before first paint (see layout.php).
   ─────────────────────────────────────────────────────────────────── */
:root { --base-font-size: 1rem; } /* convenience token; actual scale = html font-size */

html[data-fsize="sm"] { font-size: 87.5%;  } /* ~14px */
html[data-fsize="md"] { font-size: 100%;   } /* 16px — same as browser default */
html[data-fsize="lg"] { font-size: 112.5%; } /* ~18px */
html[data-fsize="xl"] { font-size: 125%;   } /* 20px */
html[data-fsize="hg"] { font-size: 150%;   } /* 24px */

/* ── Settings: appearance option buttons ─────────────────────────────── */
.set-opts { display: flex; gap: 4px; flex-wrap: wrap; align-items: baseline; }
.set-opt-btn {
	background: var(--c-surface); border: 1px solid var(--c-border-md);
	color: var(--c-muted); padding: 5px 14px;
	font-family: 'Source Code Pro', monospace; font-size: 0.6875rem; letter-spacing: 1px;
	cursor: pointer; line-height: 1.5; transition: background .15s, color .15s, border-color .15s;
}
.set-opt-btn:hover { border-color: var(--c-muted); color: var(--c-text); }
.set-opt-btn.active { background: #FFD028; border-color: #FFD028; color: #0A0A0A; }
/* Font-size preview: each button renders at its resulting size (medium = standard 0.6875rem) */
.set-fsize-btn[data-val="sm"] { font-size: calc(0.6875rem * 0.875); }
.set-fsize-btn[data-val="lg"] { font-size: calc(0.6875rem * 1.125); }
.set-fsize-btn[data-val="xl"] { font-size: calc(0.6875rem * 1.25); }
.set-fsize-btn[data-val="hg"] { font-size: calc(0.6875rem * 1.5); }
.set-opt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.set-opt-row:last-child { border-bottom: none; }
.set-opt-label { font-family: 'Source Code Pro', monospace; font-size: 0.625rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted); min-width: 80px; flex-shrink: 0; }

/* ═══ MANUAL PAGES ════════════════════════════════════════════════════════ */

/* ── Column override (manual pages need more width) ─────────────── */
body.page-manual .row > [class*="col-"] {
	flex: 0 0 auto; width: 100%; max-width: 960px; text-align: left;
}

/* ── Shared wrapper ─────────────────────────────────────────────── */
.man-wrap { text-align: left; padding: 0 2px; }

/* ── Index page ─────────────────────────────────────────────────── */
.man-idx-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 2.5rem; letter-spacing: 2px; color: #FFD028;
	line-height: 1; margin-bottom: 4px;
}
@media (min-width: 576px) { .man-idx-title { font-size: 3.25rem; } }

.man-idx-sub {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted);
	margin-bottom: 28px;
}
.man-idx-cards { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 576px) {
	.man-idx-cards { flex-direction: row; }
	.man-idx-card  { flex: 1; }
}
.man-idx-card {
	display: block; text-decoration: none;
	background: var(--c-surface); border: 1px solid var(--c-border);
	padding: 22px 24px; transition: border-color .2s;
}
.man-idx-card:hover { border-color: #FFD028; }
.man-idx-card-role {
	font-family: 'Source Code Pro', monospace; font-size: 0.5rem;
	letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted);
	margin-bottom: 8px;
}
.man-idx-card-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 1.75rem; letter-spacing: 1px; color: #FFD028;
	line-height: 1; margin-bottom: 10px;
}
.man-idx-card-desc { font-size: 0.8125rem; color: var(--c-text); line-height: 1.5; }

/* ── Back link ──────────────────────────────────────────────────── */
.man-back {
	display: inline-flex; align-items: center; gap: 5px;
	font-family: 'Source Code Pro', monospace; font-size: 0.5rem;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--c-muted); text-decoration: none;
	margin-bottom: 20px; transition: color .2s;
}
.man-back:hover { color: var(--c-text-str); }

/* ── Table of contents ──────────────────────────────────────────── */
.man-toc { border: 1px solid var(--c-border); margin-bottom: 28px; }
.man-toc-toggle {
	width: 100%; text-align: left; cursor: pointer;
	background: var(--c-chd); border: none; padding: 10px 14px;
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 2px; text-transform: uppercase;
	color: var(--c-muted); transition: color .2s;
}
.man-toc-toggle:hover { color: var(--c-text-str); }
.man-toc-body { padding: 12px 16px; background: var(--c-surface); }
.man-toc-list { margin: 0; padding: 0; list-style: none; }
.man-toc-list li + li { margin-top: 3px; }
.man-toc-list a {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 0.5px; color: var(--c-muted);
	text-decoration: none; transition: color .2s;
}
.man-toc-list a:hover { color: #FFD028; }
.man-toc-sub { padding-left: 18px; }
.man-toc-sub a { font-size: 0.5rem; color: var(--c-muted); opacity: .7; }

/* ── Document page title ────────────────────────────────────────── */
.man-doc-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 1.75rem; letter-spacing: 1px; color: #FFD028;
	line-height: 1; margin: 14px 0 6px;
}
.man-doc-sub {
	font-family: 'Source Code Pro', monospace; font-size: 0.5rem;
	letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted);
	margin-bottom: 20px;
}

/* ── Document body ──────────────────────────────────────────────── */
.man-body { max-width: 700px; }

.man-h2 {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 1.25rem; letter-spacing: 1px; color: var(--c-text-str);
	margin: 36px 0 10px; padding-bottom: 6px;
	border-bottom: 1px solid var(--c-border);
}
.man-h2:first-child { margin-top: 16px; }
.man-h3 {
	font-family: 'Source Code Pro', monospace; font-size: 0.5625rem;
	letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted);
	margin: 20px 0 8px;
}
.man-hr { border: none; border-top: 1px solid var(--c-border); margin: 28px 0; }

.man-p {
	font-size: 0.875rem; color: var(--c-text);
	line-height: 1.75; margin-bottom: 12px;
}
.man-bq {
	border-left: 3px solid #FFD028; margin: 16px 0;
	padding: 10px 16px; background: var(--c-yd);
}
.man-bq p { font-size: 0.8125rem; color: var(--c-text); margin: 0; line-height: 1.65; }

/* Lists */
.man-ul, .man-ol { margin: 0 0 14px; padding-left: 0; list-style: none; }
.man-ul > li, .man-ol > li {
	font-size: 0.875rem; color: var(--c-text); line-height: 1.65;
	padding: 3px 0 3px 18px; position: relative;
}
.man-ul > li::before { content: '\2013'; position: absolute; left: 2px; color: var(--c-muted); }
.man-ol { counter-reset: man-li; }
.man-ol > li { counter-increment: man-li; }
.man-ol > li::before {
	content: counter(man-li) '.'; position: absolute; left: 0;
	font-family: 'Source Code Pro', monospace; font-size: 0.75rem;
	color: var(--c-muted); line-height: 1.8;
}
/* Nested ul (inside any list) */
.man-ul > li > ul, .man-ol > li > ul {
	margin: 5px 0 2px; padding-left: 0; list-style: none;
}
.man-ul > li > ul > li, .man-ol > li > ul > li {
	font-size: 0.8125rem; color: var(--c-muted);
	padding: 2px 0 2px 18px; position: relative;
}
.man-ul > li > ul > li::before { content: '\2013'; position: absolute; left: 2px; }

/* Table */
.man-table-wrap { overflow-x: auto; margin: 14px 0; }
.man-table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; }
.man-table th {
	font-family: 'Source Code Pro', monospace; font-size: 0.5rem;
	letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted);
	padding: 6px 12px; border-bottom: 1px solid var(--c-border-md);
	text-align: left; white-space: nowrap;
}
.man-table td {
	padding: 8px 12px; border-bottom: 1px solid var(--c-border);
	color: var(--c-text); vertical-align: top; line-height: 1.55;
}
.man-table tr:last-child td { border-bottom: none; }

/* Inline code */
.man-body code {
	font-family: 'Source Code Pro', monospace; font-size: 0.8em;
	background: var(--c-surface); border: 1px solid var(--c-border);
	padding: 1px 5px; color: var(--c-text-str);
}
/* Links inside body */
.man-body a { color: #FFD028; text-decoration: none; }
.man-body a:hover { text-decoration: underline; }

/* User Manual link on Dashboard */
.dash-manual-link {
	display: inline-block; margin-bottom: 16px;
	font-family: 'Source Code Pro', monospace; font-size: 1rem;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--c-muted); text-decoration: none;
	padding-bottom: 1px; border-bottom: 1px dotted var(--c-border-md);
	transition: color .2s, border-color .2s;
}
.dash-manual-link:hover { color: #FFD028; border-color: #FFD028; }