/**
 * Klintaps theme — KUC brand layer over FlatSIS
 *
 * Child theme of FlatSIS (same pattern as the official CoolAdmin theme).
 * Zero core modifications. Rosario 12.7.3.
 *
 * Palette derived from the KUC crest: royal navy #184890 · gold #d89030
 * WCAG 2.1 AA contrast maintained for text; gold is decorative/accent only on white.
 *
 * @package Klintaps theme
 * @version 1.0 — 2026-07-12
 */

@import url("../FlatSIS/stylesheet.css");

/* ============ 1. DESIGN TOKENS ============ */
:root {
	--kuc-navy-950: #081833;
	--kuc-navy-900: #0b2149;
	--kuc-navy-800: #103061;
	--kuc-navy-700: #14417f;
	--kuc-blue-600: #1a4f9c;
	--kuc-blue-500: #2563b0;
	--kuc-blue-100: #dbe7f6;
	--kuc-blue-50:  #eef4fb;
	--kuc-gold-600: #b97b1d;
	--kuc-gold-500: #d4952b;
	--kuc-gold-300: #ecc27a;
	--kuc-gold-100: #f9efdc;
	--kuc-bg:       #f2f5f9;
	--kuc-surface:  #ffffff;
	--kuc-surface-2:#f8fafc;
	--kuc-border:   #dfe5ee;
	--kuc-border-2: #cbd5e3;
	--kuc-text:     #1d2733;
	--kuc-muted:    #5b6b7f;
	--kuc-success:  #0e8a3e;
	--kuc-danger:   #c62828;
	--kuc-radius:   10px;
	--kuc-radius-s: 7px;
	--kuc-shadow:   0 1px 2px rgba(11,33,73,.06), 0 4px 14px rgba(11,33,73,.07);
	--kuc-shadow-lg:0 6px 28px rgba(8,24,51,.18);
	--kuc-focus:    0 0 0 3px rgba(212,149,43,.45);
}

/* ============ 2. BASE ============ */
body, html { background: var(--kuc-bg); }
body { color: var(--kuc-text); }
h1, h2, h3, h4, h5, h6 { color: var(--kuc-navy-900); }
a { color: var(--kuc-blue-600); }
a:active, a:focus, a:hover { color: var(--kuc-gold-600); }
::selection { background: var(--kuc-blue-600); color: #fff; }
hr { background: var(--kuc-border); }
code, pre { background: var(--kuc-blue-50); border-radius: 4px; }
blockquote { border-left-color: var(--kuc-gold-500); }

/* Slim branded scrollbars (progressive enhancement) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--kuc-border-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--kuc-blue-500); }

/* ============ 3. TOP UTILITY BAR ============ */
#footer {
	background: var(--kuc-navy-950);
	box-shadow: 0 2px 10px rgba(8,24,51,.35);
}
#footerwrap { border-color: var(--kuc-navy-800); }
.BottomButton, a.menu-top { color: #e8edf5; }
.BottomButton:active, .BottomButton:focus, .BottomButton:hover { color: var(--kuc-gold-300); }
.BottomButton img { background-color: #fff; }
#footerhelp { background: var(--kuc-surface); box-shadow: var(--kuc-shadow-lg); }

/* ============ 4. SIDEBAR MENU ============ */
#menu {
	background: linear-gradient(180deg, var(--kuc-navy-900) 0%, var(--kuc-navy-950) 100%);
	border-color: var(--kuc-navy-950);
	color: #e8edf5;
}
#menu.fixedmenu-fixed + div { background: var(--kuc-navy-950); }
#menu .logo {
	background: #fff;
	border-radius: 50%;
	padding: 2px;
	max-width: 92px;
	max-height: 92px;
	margin-top: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
#menu-top select {
	border-color: var(--kuc-navy-700);
	background: var(--kuc-navy-800);
	color: #fff;
	border-radius: var(--kuc-radius-s);
}
#menu-top select:focus { border-bottom-color: var(--kuc-gold-500); }
#menu-top span { color: #c7d3e4; }
.menu-inter {
	border-color: var(--kuc-navy-700);
	color: var(--kuc-gold-300);
	font-weight: 700;
	letter-spacing: .06em;
}
.adminmenu { background: transparent; border-color: var(--kuc-navy-800); }
.menu-top {
	background-color: transparent;
	border-top-color: transparent;
	border-bottom-color: rgba(255,255,255,.05);
}
.adminmenu a { border-radius: var(--kuc-radius-s); margin: 1px 4px; transition: background .15s ease, color .15s ease; }
.adminmenu a:focus, .adminmenu a:hover { color: #fff; background: rgba(255,255,255,.08); }
#selectedModuleLink, .menu-top:focus, .menu-top:hover { background-color: rgba(255,255,255,.08); }
#selectedModuleLink {
	box-shadow: inset 3px 0 0 var(--kuc-gold-500);
	color: #fff;
}
.wp-submenu {
	background: var(--kuc-navy-950);
	border-color: var(--kuc-navy-800) var(--kuc-navy-950);
	border-radius: 0 var(--kuc-radius-s) var(--kuc-radius-s) 0;
	box-shadow: var(--kuc-shadow-lg);
}
#selectedMenuLink, .wp-submenu a:active, .wp-submenu a:focus, .wp-submenu a:hover {
	background-color: rgba(255,255,255,.09);
	color: #fff;
}
#selectedMenuLink { box-shadow: inset 3px 0 0 var(--kuc-gold-500); }
.no-touch .menu-module:focus-within .menu-top::after,
.no-touch .menu-module:hover .menu-top::after {
	color: var(--kuc-gold-300);
	/* FlatSIS pins the arrow with bottom:13px / padding-top:6px — misaligned
	   against our row height. True vertical centering instead: */
	top: 50%;
	bottom: auto;
	padding-top: 0;
	right: 8px;
	transform: translateY(-50%);
	font-size: 12px;
	line-height: 1;
}
html[dir=RTL].no-touch .menu-module:focus-within .menu-top::after,
html[dir=RTL].no-touch .menu-module:hover .menu-top::after {
	left: 8px;
	right: auto;
	transform: translateY(-50%) scaleX(-1);
}

/* Current-person chips */
.current-person { border-radius: var(--kuc-radius-s); }
.current-person.student { background: var(--kuc-blue-600); }
.current-person.staff { background: var(--kuc-success); }
.current-person.self { background: var(--kuc-gold-600); }

/* ============ 5. BUTTONS ============ */
input[type=button], input[type=reset], input[type=submit] {
	background: var(--kuc-surface);
	border-color: var(--kuc-border-2);
	color: var(--kuc-navy-800);
	border-radius: var(--kuc-radius-s);
	font-weight: 700;
	letter-spacing: .03em;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type=button]:focus, input[type=button]:hover,
input[type=submit]:focus, input[type=submit]:hover {
	color: var(--kuc-navy-900);
	border-color: var(--kuc-blue-500);
	background: var(--kuc-blue-50);
}
input[type=button]:active, input[type=reset]:active, input[type=submit]:active { background: var(--kuc-blue-100); }
a.button-primary, button.button-primary, input.button-primary {
	background: linear-gradient(180deg, var(--kuc-blue-500), var(--kuc-blue-600));
	border-color: var(--kuc-navy-700);
	color: #fff;
	box-shadow: 0 1px 3px rgba(11,33,73,.3);
}
a.button-primary:focus, a.button-primary:hover,
button.button-primary:focus, button.button-primary:hover,
input.button-primary:focus, input.button-primary:hover {
	background: linear-gradient(180deg, var(--kuc-blue-600), var(--kuc-navy-700));
	border-color: var(--kuc-navy-900);
	color: #fff;
}
.button-upsell-premium { background: var(--kuc-gold-500); border-radius: var(--kuc-radius-s); }
.button-upsell-premium:active, .button-upsell-premium:focus, .button-upsell-premium:hover { background: var(--kuc-gold-300); }

/* ============ 6. FORMS & FOCUS ============ */
input[type=button], input[type=color], input[type=email], input[type=file],
input[type=number], input[type=password], input[type=reset], input[type=search],
input[type=submit], input[type=tel], input[type=text], input[type=time],
input[type=url], select, textarea {
	border-color: var(--kuc-border-2);
	border-radius: var(--kuc-radius-s);
	background: var(--kuc-surface);
	transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=color], input[type=email], input[type=file], input[type=number],
input[type=password], input[type=search], input[type=tel], input[type=text],
input[type=time], input[type=url], select { height: 32px; }
.checkbox-label, .no-input-value, span.uld, span.underline-dots { line-height: 32px; }
.span-grade-points + label { line-height: 32px; }
input[type=text]:hover, input[type=password]:hover, select:hover, textarea:hover { border-color: var(--kuc-blue-500); }
input[type=email]:focus, input[type=number]:focus, input[type=password]:focus,
input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus,
input[type=time]:focus, input[type=url]:focus, select:focus, textarea:focus {
	border-color: var(--kuc-blue-600);
	box-shadow: var(--kuc-focus);
	outline: 0;
}
input[readonly] { background: var(--kuc-surface-2); }
fieldset { border-color: var(--kuc-border); border-radius: var(--kuc-radius-s); }
legend { color: var(--kuc-muted); font-weight: 700; letter-spacing: .05em; }
.uld, .underline-dots { border-bottom-color: var(--kuc-border-2); }
.legend-gray { color: var(--kuc-muted); }

/* Checkboxes & radios */
input[type=checkbox]:before, input[type=radio]:before { border-color: var(--kuc-border-2); border-radius: 4px; }
input[type=radio]:before { border-radius: 100%; }
input[type=checkbox]:checked:before, input[type=radio]:checked:before {
	background-color: var(--kuc-blue-600);
	border-color: var(--kuc-blue-600);
}
input[type=checkbox]:focus:before, input[type=radio]:focus:before { border-color: var(--kuc-gold-500); }
input[type=checkbox]:focus, input[type=radio]:focus { outline: 0; }

/* Visible focus for keyboard users */
a:focus-visible, summary:focus-visible {
	outline: 2px solid var(--kuc-gold-500);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ============ 7. TABLES, CARDS & HEADERS ============ */
.postbox, .widefat { background: var(--kuc-surface); border-color: var(--kuc-border); }
.postbox {
	border-radius: var(--kuc-radius);
	box-shadow: var(--kuc-shadow);
	border-bottom-width: 1px;
	overflow: hidden;
}
.postbox > thead th { background: var(--kuc-surface-2); border-bottom-color: var(--kuc-border); }
.postbox .h3selected { border-top: 2px solid var(--kuc-gold-500); background: var(--kuc-surface); }
.postbox th { color: var(--kuc-navy-800); }
.widefat th, .widefat tfoot tr th {
	background: var(--kuc-blue-50);
	color: var(--kuc-navy-800);
	font-weight: 700;
	letter-spacing: .04em;
}
.widefat td, .widefat th { border-color: var(--kuc-surface) var(--kuc-surface) var(--kuc-border); }
.alt, .alternate, .widefat tr:nth-child(odd) { background: var(--kuc-surface); }
.widefat tr:nth-child(even) { background: var(--kuc-surface-2); }
.highlight, .widefat tr.highlight, .widefat tr:hover { background: var(--kuc-blue-50); }
.list-header { border-bottom-color: var(--kuc-border); }
.header2 {
	background: var(--kuc-surface);
	border-bottom: 1px solid var(--kuc-border);
	border-top: 1px solid var(--kuc-surface);
	border-radius: var(--kuc-radius-s);
	box-shadow: var(--kuc-shadow);
}
.header1 h2 { color: var(--kuc-navy-900); font-weight: 700; }
.bgcolor { background: var(--kuc-blue-50); }
#calendar th { background: var(--kuc-navy-800); }

/* ============ 8. NOTICES ============ */
div.error, div.updated {
	background: var(--kuc-surface);
	border-radius: var(--kuc-radius-s);
	box-shadow: var(--kuc-shadow);
	padding: 8px 12px;
}
div.error { border-left: 4px solid var(--kuc-danger); }
div.updated { border-left-color: var(--kuc-success); }
div.error a { color: var(--kuc-danger); }

/* ============ 9. MODALS (colorbox) ============ */
#cboxLoadedContent {
	border-radius: var(--kuc-radius) !important;
	box-shadow: var(--kuc-shadow-lg) !important;
}
#cboxOverlay { background: var(--kuc-navy-950); opacity: .55; }

/* ============ 10. LOGIN & FIRST-LOGIN ============ */
.login #body, .first-login #body, .password-reset #body {
	background:
		radial-gradient(1000px 460px at 85% -10%, rgba(212,149,43,.16), transparent 60%),
		linear-gradient(160deg, var(--kuc-navy-900) 0%, var(--kuc-navy-950) 70%);
	min-height: 100vh;
	box-sizing: border-box;
	/* center the card in the viewport. column: the password-reset / first-login
	   pages render an extra .header1 inside #body — a flex ROW put it beside the
	   card and shoved the card right. Column stacks + centers regardless. */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 12px;
}
/* Hide the redundant page header on the auth pages (the card's own title —
   "FORGOT YOUR PASSWORD?" / "STUDENT PORTAL LOGIN" — already labels it; the
   external navy-on-navy header was invisible anyway). */
.password-reset #body > .header1, .first-login #body > .header1,
.password-reset .header1, .first-login .header1 { display: none; }
.login .postbox img[src*="logo"], .first-login .postbox img[src*="logo"] {
	max-width: 88px;
	max-height: 88px;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(11,33,73,.18);
}
.login .postbox, .first-login .postbox, .password-reset .postbox {
	border-radius: 14px;
	box-shadow: var(--kuc-shadow-lg);
	border-top: 4px solid var(--kuc-gold-500);
}
.login .postbox img[src*="logo"] { border-radius: 50%; }
.login #loginform input[type=password], .login #loginform input[type=text] { border-radius: var(--kuc-radius-s); }
.login input[type=submit], .first-login input[type=submit], .password-reset input[type=submit] {
	width: 100%;
	margin: 8px 0 0;
	box-sizing: border-box;
	background: linear-gradient(180deg, var(--kuc-blue-500), var(--kuc-blue-600));
	border-color: var(--kuc-navy-700);
	color: #fff;
	font-size: 16px;
	padding: 10px 12px;
}
.login input[type=submit]:focus, .login input[type=submit]:hover,
.first-login input[type=submit]:focus, .first-login input[type=submit]:hover,
.password-reset input[type=submit]:focus, .password-reset input[type=submit]:hover {
	background: linear-gradient(180deg, var(--kuc-blue-600), var(--kuc-navy-700));
	color: #fff;
	border-color: var(--kuc-navy-900);
}
/* Username-format hint — pure CSS: core does NOT load theme scripts.js on the
   login page. ::before + column-reverse renders it directly under the field.
   Evidence: access log shows students typing index numbers as usernames. */
.login #loginform tr:first-child label::before {
	content: "Sign in with your portal username (e.g. a.mensah) — not your index number. Your first password is on your credential slip.";
	display: block;
	margin-top: 8px;
	padding: 9px 11px;
	background: var(--kuc-gold-100);
	border: 1px solid var(--kuc-gold-300);
	border-radius: var(--kuc-radius-s);
	color: var(--kuc-hint-text);
	font-size: 13.5px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.45;
	white-space: normal;
}
.kuc-login-hint {
	margin: 10px 0 0;
	padding: 9px 11px;
	background: var(--kuc-gold-100);
	border: 1px solid var(--kuc-gold-300);
	border-radius: var(--kuc-radius-s);
	color: #6a4b0f;
	font-size: 14px;
	line-height: 1.45;
}

/* ============ 11. WIDGET ACCENTS ============ */
.attendance-code { border-radius: 6px; font-weight: 700; }
.attendance-code.present { background-color: var(--kuc-success); }
.attendance-code.absent { background-color: var(--kuc-danger); }
.tooltip:before { background: var(--kuc-gold-500); color: var(--kuc-navy-950); }
.tooltip > i { background: var(--kuc-navy-950); border-color: var(--kuc-navy-950); border-radius: var(--kuc-radius-s); }
.divPortalPoll .bar { background: var(--kuc-blue-600); border-radius: 4px; }
.bar.relevance { background: var(--kuc-border-2); }
.dashboard-module-title { color: var(--kuc-navy-800); font-weight: 700; }
.password-strength-bars .score3, .password-strength-bars .score4 { background-color: var(--kuc-success); }
#LO_search { border-radius: var(--kuc-radius-s); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--kuc-blue-600) !important; }
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single { border-radius: var(--kuc-radius-s) !important; min-height: 32px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px !important; }
.legend-square { border-radius: 4px; }
.md-preview > .tab.disabled { border-top-color: var(--kuc-gold-500); }
.calendar-day.full { background: #eef7ee; }
.calendar-day.no-school { background: #fdefef; }

/* ============ 12. MOTION & ACCESSIBILITY ============ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ================================================================
   V2 LAYER — component craft (buttons, icons, forms, login, tables)
   ================================================================ */

/* ---- V2.1 Buttons: sentence case, solid hierarchy, consistent height ----
   v3.6 FIX (2026-07-17): was `height: 36px`. A FIXED height is a desktop instinct that
   breaks on phones, because phones are where labels wrap. FlatSIS caps inputs at
   max-width:260px below 480px, so "Create Grade Lists for Selected Students" wraps to
   two lines, needs ~44px, and `height:36px` + `overflow:clip` amputated line two —
   students read "Create Grade Lists for" and the rest simply vanished.
   min-height keeps the consistent look at desktop (single line still lands on 36px)
   while letting a wrapped label grow instead of being cut.
   NOTE: vertical padding stays 0 — `line-height: 34px` below does the centring. Adding
   padding here double-counts against that line-height and inflates every button to 51px. */
input[type=button], input[type=reset], input[type=submit] {
	box-sizing: border-box;
	min-height: 36px;
	height: auto;
	padding: 0 16px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 34px;
	border-radius: 8px;
}
a.button-primary, button.button-primary, input.button-primary {
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}
.header2.align-right input[type=button], .header2.align-right input[type=reset], .header2.align-right input[type=submit] { margin: 2px 0 2px 12px; }

/* ---- V2.2 Page title & section headers ---- */
.header1 h2 { font-size: 26px; letter-spacing: -0.01em; }
.postbox th h3, .postbox th h3 a, .postbox > thead th,
.widefat tfoot tr th, .widefat th, .widefat th a, .widefat th label, .widefat th span {
	font-size: 12.5px;
	letter-spacing: .07em;
}
legend { font-size: 12.5px; letter-spacing: .07em; }

/* ---- V2.3 Tables: rhythm, numerals, hover affordance ---- */
.widefat td { padding: 9px 12px; font-variant-numeric: tabular-nums; }
.widefat td:first-child { font-weight: 600; color: var(--kuc-navy-800); }
.widefat td:first-child a { font-weight: 600; }
.list.widefat tbody tr { transition: background .12s ease; }
.list-nav td { color: var(--kuc-muted); }

/* ---- V2.4 Sidebar: refined text, monochrome icon system ---- */
.wp-submenu a { color: #cfe0f5; }
.menu-top { text-transform: none; font-weight: 600; letter-spacing: .01em; }
.menu-inter { text-transform: uppercase; font-size: 11.5px; letter-spacing: .12em; padding-top: 10px; }
#menu-top .username { font-weight: 600; color: #fff; }

@supports (mask-repeat: no-repeat) or (-webkit-mask-repeat: no-repeat) {
	.module-icon {
		background-image: none !important;
		background-color: #dfe8f6;
		width: 21px; height: 21px;
		vertical-align: -22%;
		margin: 0 6px 0 2px;
		-webkit-mask-position: center; mask-position: center;
		-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
		-webkit-mask-size: contain; mask-size: contain;
		-webkit-mask-image: var(--kuc-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"));
		mask-image: var(--kuc-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"));
	}
	.menu-top:hover .module-icon, #selectedModuleLink .module-icon { background-color: var(--kuc-gold-300); }
	.header1 .module-icon { background-color: var(--kuc-navy-800); width: 26px; height: 26px; vertical-align: -12%; }
	.dashboard-module-title .module-icon { background-color: var(--kuc-navy-700); }

	.module-icon.School_Setup { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E"); }
	.module-icon.Students { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10L12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5'/%3E%3C/svg%3E"); }
	.module-icon.Users { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
	.module-icon.Grades { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.5 13.5L17 22l-5-3-5 3 1.5-8.5'/%3E%3C/svg%3E"); }
	.module-icon.Attendance { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Cpath d='M9 15l2 2 4-4'/%3E%3C/svg%3E"); }
	.module-icon.Eligibility { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); }
	.module-icon.Discipline { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
	.module-icon.Accounting { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E"); }
	.module-icon.Student_Billing { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cpath d='M1 10h22'/%3E%3C/svg%3E"); }
	.module-icon.Food_Service { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6a2 2 0 0 0 2 2h3zm0 0v7'/%3E%3C/svg%3E"); }
	.module-icon.Resources { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
	.module-icon.Library { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }
	.module-icon.SMS, .module-icon.Messaging { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
	.module-icon.Scheduling { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
	.module-icon.Reports { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V10M18 20V4M6 20v-4'/%3E%3C/svg%3E"); }
	.module-icon.misc { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 0 20a15.3 15.3 0 0 1 0-20z'/%3E%3C/svg%3E"); }

	/* ---- v3.9: chevron on the OPEN module, so "tap to close" is discoverable --
	 * scripts.js v3.9 makes tapping the open module header collapse it (core
	 * always sets, never toggles — warehouse.js submenuOnTouch). A collapse you
	 * cannot see is a collapse nobody uses, so mark the open one.
	 * ⚠ CORRECTION (2026-07-17): an earlier version of this comment claimed core's
	 *   hover "❯" is on the <li> and therefore cannot collide with ours. FALSE —
	 *   core puts it on the LINK too, the same element and the same pseudo:
	 *     .no-touch .menu-module:hover .menu-top:after { content:"\276F"; right:5px }   (0,3,1)
	 *     #selectedModuleLink:after                    { content:"" }                   (1,0,1)
	 *   An element has only ONE ::after, so these do compete. Ours wins because
	 *   #selectedModuleLink::after is (1,0,1) — the ID beats core's classes on
	 *   hover, and it ties core's own blanking rule but is declared later.
	 *   The result is right; the reason I first gave was not. */
	#selectedModuleLink { position: relative; }
	#selectedModuleLink::after {
		content: "";
		position: absolute;
		right: 12px;
		top: 50%;
		width: 7px; height: 7px;
		margin-top: -5px;
		border-right: 2px solid var(--kuc-gold-300);
		border-bottom: 2px solid var(--kuc-gold-300);
		transform: rotate(-135deg);   /* points up = "open, tap to close" */
		transition: transform .15s ease;
		pointer-events: none;
	}

	/* ---- v3.8: the two ADDON modules, which had no icon at all ----------------
	 * Hostel and KUC_Reports are not in $RosarioCoreModules (Warehouse.php:511),
	 * so Side.php:724 gives them an INLINE background-image: url(modules/X/icon.png)
	 * instead of relying on a class. Two consequences, both visible pre-v3.8:
	 *   1. Neither defined --kuc-icon, so both fell back to the default 4-square
	 *      grid mask — the "generic squares" in the student sidebar.
	 *   2. Hostel DOES ship an icon.png, but it is a flat multi-colour bed-and-moon
	 *      in a circle — off-brand against these monoline strokes — and it was being
	 *      clipped to a grid-shaped mask anyway, so nobody ever saw it.
	 *      KUC_Reports ships no icon.png at all, so that URL simply 404s.
	 * Fix: give both a --kuc-icon, and kill the inline background-image. A CSS
	 * !important beats an inline style that has none, so the PNG cannot bleed
	 * through the mask.
	 * Icons chosen to not collide: Reports already owns the bar chart, Grades the
	 * medal, Attendance the calendar-with-check, Scheduling the plain calendar.
	 */

	/* THE SYSTEMIC FIX. This icon system is mask-based end to end: the shape comes
	 * from mask-image, the colour from background-color. A background-IMAGE is never
	 * wanted — but Side.php:724 hands every addon an inline one, which then paints
	 * through the mask. That is why Messaging/SMS/Library/Reports showed as flat
	 * multi-colour PNGs clipped to an icon shape, and why Certificate/Broadcast/
	 * Billing_Elements/Hostel showed as PNGs clipped to a 4-square GRID.
	 * A stylesheet !important beats an inline style with none, so this one line
	 * neutralises all seven at the source.
	 *
	 * ⚠ SPECIFICITY, THE HARD BIT: this file INLINES the whole FlatSIS stylesheet
	 * above (the theme was built from it), and FlatSIS ships rules like
	 *     .module-icon.Messaging { background-image: url("modules/Messaging.png") !important }
	 * at specificity (0,2,0) WITH !important — which beats a plain .module-icon
	 * (0,1,0) !important no matter how late it appears. Same for Reports, Quiz,
	 * Example and Staff_Absences. Hostel and KUC_Reports only ever looked "fixed"
	 * by the simpler rule because FlatSIS never shipped a rule for them.
	 * Repeating the class lifts this to (0,3,0) so it wins outright. Ugly, and
	 * deliberate — the alternative is enumerating every FlatSIS module by hand. */
	.module-icon.module-icon.module-icon { background-image: none !important; }

	/* Hostel — a bed. Unambiguous, and nothing else in the sidebar is furniture. */
	.module-icon.Hostel { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V8'/%3E%3Cpath d='M3 12h14a4 4 0 0 1 4 4v4'/%3E%3Cpath d='M3 17h18'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3C/svg%3E"); }

	/* KUC_Reports — one icon serves three profiles: admin "KUC Reports",
	 * lecturer "My Classes", student "My Results". A clipboard with a tick reads
	 * as "your record, checked" to all three without favouring any. Deliberately
	 * NOT a bar chart (Reports owns that) or a medal (Grades owns that). */
	.module-icon.KUC_Reports { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E"); }

	/* The three remaining addons had no --kuc-icon, so the line above would drop
	 * them to the grid fallback. Admin-only screens, but the sidebar should be
	 * coherent for staff too. */
	/* Certificate — a rosette/seal. */
	.module-icon.Certificate { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M9 14.5L8 22l4-2 4 2-1-7.5'/%3E%3Cpath d='M12 6v3l2 1'/%3E%3C/svg%3E"); }
	/* Broadcast — a transmission tower / signal. */
	.module-icon.Broadcast { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='2'/%3E%3Cpath d='M7.8 6.8a6 6 0 0 0 0 8.4M16.2 6.8a6 6 0 0 1 0 8.4'/%3E%3Cpath d='M4.9 3.9a10 10 0 0 0 0 14.2M19.1 3.9a10 10 0 0 1 0 14.2'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"); }
	/* Billing_Elements ("Store") — a price tag. */
	.module-icon.Billing_Elements { --kuc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0l-8-8A2 2 0 0 1 2 11.2V4a2 2 0 0 1 2-2h7.2a2 2 0 0 1 1.4.6l8 8a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1.4'/%3E%3C/svg%3E"); }
}

/* ---- V2.5 Login anatomy (labels moved above inputs by scripts.js) ---- */
.login .postbox, .password-reset .postbox { max-width: 368px; }
.login .popTable td { padding-bottom: 18px; }
/* Rosario nests the input INSIDE the label (caption = trailing text node);
   column-reverse puts the caption visually above the field. */
.kuc-field-label, .login #loginform label {
	display: flex;
	flex-direction: column-reverse;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--kuc-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 0 0 2px 1px;
	line-height: 1.2;
}
.login #loginform label input { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--kuc-text); }
.login #loginform input[type=password], .login #loginform input[type=text] {
	height: 44px;
	font-size: 17px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}
.login input[type=submit], .first-login input[type=submit], .password-reset input[type=submit] { height: 44px; line-height: 42px; font-size: 16px; }
.login .postbox > thead th { letter-spacing: .1em; }

/* ---- V2.6 Top utility bar ---- */
.BottomButton img, #BottomButtonMenu svg { transition: box-shadow .15s ease, transform .15s ease; border-radius: 50%; }
.BottomButton:hover img, #BottomButtonMenu:hover svg { box-shadow: 0 0 0 3px rgba(212,149,43,.35); }
.BottomButton span { text-transform: none; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }

/* ---- V2.7 Details/summary, links in content ---- */
#body summary { color: var(--kuc-muted); font-weight: 600; }
.error a, .updated a { font-weight: 600; }

/* ================================================================
   V3 LAYER — Inter type, sticky headers, command palette, dark mode
   ================================================================ */

/* ---- V3.1 Inter variable font (self-hosted, latin subset, 48KB) ---- */
@font-face {
	font-family: 'InterVar';
	src: url('fonts/inter/Inter-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
body, input, select, textarea, .calendar, .calendar table, div.chosen-container {
	font-family: 'InterVar', Lato, -apple-system, sans-serif;
}
h1, h2, h3, h4, .header1 h2 { font-family: 'InterVar', Lato, sans-serif; letter-spacing: -0.015em; }
.widefat td, .header2 table { font-variant-numeric: tabular-nums; }

/* Semantic aliases (light values; redefined in dark mode) */
:root {
	--kuc-heading: var(--kuc-navy-900);
	--kuc-th-text: var(--kuc-navy-800);
	--kuc-btn-text: var(--kuc-navy-800);
	--kuc-hint-text: #6a4b0f;
}
h1, h2, h3, h4, h5, h6 { color: var(--kuc-heading); }
.header1 h2 { color: var(--kuc-heading); }
.postbox th, .widefat th, .widefat tfoot tr th { color: var(--kuc-th-text); }
.widefat td:first-child { color: var(--kuc-th-text); }
.dashboard-module-title { color: var(--kuc-th-text); }
input[type=button], input[type=reset], input[type=submit] { color: var(--kuc-btn-text); }
.kuc-login-hint { color: var(--kuc-hint-text); }

/* ---- V3.2 Sticky table headers: DEFERRED to the PWA phase.
   Rosario renders list headers as <th> rows inside <tbody> with periodic
   .thead-repeat rows and AJAX-replaced tables — CSS-only sticky is not
   reliable against that markup. Do not re-add without owning the markup. ---- */

/* ---- V3.3 Command palette (Ctrl/⌘+K) ---- */
.kuc-cmdk {
	position: fixed; inset: 0;
	background: rgba(8, 24, 51, .55);
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
	z-index: 100000;
	display: flex; align-items: flex-start; justify-content: center;
	padding: 12vh 16px 16px;
}
.kuc-cmdk[hidden] { display: none; }
.kuc-cmdk-panel {
	width: 560px; max-width: 100%;
	background: var(--kuc-surface);
	border-radius: 12px;
	box-shadow: var(--kuc-shadow-lg);
	overflow: hidden;
	border: 1px solid var(--kuc-border);
}
.kuc-cmdk-input {
	width: 100%; box-sizing: border-box;
	height: 52px !important;
	border: 0 !important; border-bottom: 1px solid var(--kuc-border) !important;
	border-radius: 0 !important;
	padding: 0 18px !important;
	font-size: 17px !important;
	background: var(--kuc-surface) !important;
	color: var(--kuc-text) !important;
	outline: none !important; box-shadow: none !important;
}
.kuc-cmdk-list { max-height: 46vh; overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.kuc-cmdk-item {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 10px 12px; margin: 0;
	border-radius: 8px; cursor: pointer;
	color: var(--kuc-text); font-size: 15px;
}
.kuc-cmdk-item .kuc-cmdk-group { color: var(--kuc-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.kuc-cmdk-item.active { background: var(--kuc-blue-50); box-shadow: inset 3px 0 0 var(--kuc-gold-500); }
.kuc-cmdk-empty { padding: 18px; color: var(--kuc-muted); text-align: center; }
.kuc-cmdk-hint { padding: 8px 14px; border-top: 1px solid var(--kuc-border); color: var(--kuc-muted); font-size: 12px; display: flex; gap: 14px; }
.kuc-cmdk-hint b { font-weight: 600; }
.kuc-cmdk-btn { cursor: pointer; }
.kuc-cmdk-btn svg { stroke: #000; background: #fff; padding: 3px; height: 18px; width: 18px; border-radius: 50%; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.kuc-cmdk-btn:hover svg { box-shadow: 0 0 0 3px rgba(212, 149, 43, .35); }
@media only screen and (max-width: 874px) { .kuc-cmdk { padding-top: 8vh; } .kuc-cmdk-btn svg { height: 24px; width: 24px; } }

/* ---- V3.4 Dark mode — user-toggled (html.kuc-dark, set by scripts.js from
        the top-bar sun/moon button, persisted per browser). Light is default;
        device preference is NOT auto-applied, so nobody gets surprised. ---- */
html.kuc-dark {
	color-scheme: dark;
	--kuc-bg: #131e33;
	--kuc-surface: #1b2846;
	--kuc-surface-2: #233252;
	--kuc-border: #30405f;
	--kuc-border-2: #3d4f70;
	--kuc-text: #e9eef7;
	--kuc-muted: #a9b7cd;
	--kuc-blue-50: #24365a;
	--kuc-blue-100: #2b4067;
	--kuc-gold-100: #3b2f13;
	--kuc-gold-300: #7a6126;
	--kuc-heading: #eef3fa;
	--kuc-th-text: #d3deef;
	--kuc-btn-text: #e2eaf5;
	--kuc-hint-text: #f0cb85;
}
html.kuc-dark body { color: var(--kuc-text); }
html.kuc-dark .widefat td, html.kuc-dark .widefat th { border-color: var(--kuc-surface) var(--kuc-surface) var(--kuc-border); }
html.kuc-dark .highlight, html.kuc-dark .widefat tr.highlight, html.kuc-dark .widefat tr:hover, html.kuc-dark .wp-submenu { background: var(--kuc-blue-50); }
html.kuc-dark #cboxLoadedContent { background: var(--kuc-surface) !important; }
html.kuc-dark #footerhelp { background: var(--kuc-surface); }
html.kuc-dark .postbox .h3selected { background: var(--kuc-surface); }
html.kuc-dark div.error, html.kuc-dark div.updated { background: var(--kuc-surface); }
html.kuc-dark .calendar, html.kuc-dark .calendar table { background: var(--kuc-surface); color: var(--kuc-text); }
html.kuc-dark #courses_div, html.kuc-dark .password-toggle { background: var(--kuc-surface); }
html.kuc-dark a { color: #8ebdf0; }
html.kuc-dark a:active, html.kuc-dark a:focus, html.kuc-dark a:hover { color: var(--kuc-gold-300); }
html.kuc-dark .attendance-code input, html.kuc-dark .attendance-code select { color: var(--kuc-text); }
html.kuc-dark .md-preview .tab.disabled, html.kuc-dark .md-preview .tab:hover { background: var(--kuc-surface); }
html.kuc-dark input[readonly] { background: var(--kuc-surface-2); }
html.kuc-dark .BottomButton img, html.kuc-dark .kuc-cmdk-btn svg, html.kuc-dark .kuc-mode-btn svg { background: #e2eaf5; }
html.kuc-dark .login .postbox img[src*="logo"], html.kuc-dark #menu .logo { background: #eef3fa; }

/* ---- V3.3b Login button: dead-center text, uppercase, KUC gold ----
   (placed after the V2 button layer so its line-height:34px cannot win) */
.login input[type=submit], .first-login input[type=submit], .password-reset input[type=submit] {
	height: 46px;
	line-height: 46px;
	padding-top: 0;
	padding-bottom: 0;
	text-transform: uppercase;
	letter-spacing: .09em;
	font-size: 15.5px;
	font-weight: 700;
	color: #ecc27a;
}
.login input[type=submit]:focus, .login input[type=submit]:hover,
.first-login input[type=submit]:focus, .first-login input[type=submit]:hover,
.password-reset input[type=submit]:focus, .password-reset input[type=submit]:hover {
	color: #f6dfae;
}

/* ---- V3.3c Login "About": hide core internals (RosarioSIS credits/version),
   show KUC-relevant text instead. CSS-only — the login page loads no theme JS. ---- */
.login #body details > *:not(summary) { display: none; }
.login #body details[open]::after {
	content: "Klintaps University College of Health and Allied Sciences — Student & Staff Portal. Need help signing in? Contact the ICT Office or your course coordinator.";
	display: block;
	padding: 10px 2px 2px;
	color: var(--kuc-muted);
	font-size: 13.5px;
	line-height: 1.5;
	white-space: normal;
}
.login #body summary { color: var(--kuc-muted); font-weight: 600; }

/* Top-bar light/dark toggle button */
.kuc-mode-btn { cursor: pointer; }
.kuc-mode-btn svg { stroke: #000; background: #fff; padding: 3px; height: 18px; width: 18px; border-radius: 50%; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kuc-mode-btn:hover svg { box-shadow: 0 0 0 3px rgba(212, 149, 43, .35); }
@media only screen and (max-width: 874px) { .kuc-mode-btn svg { height: 24px; width: 24px; } }

/* ============ 13. MOBILE ============ */
@media only screen and (max-width: 874px) {
	/* --- v3.6 (2026-07-17): .rt label/value alignment ---
	   FlatSIS's responsive-table mode floats <thead> left as a label column and hard-codes
	   `.rt th{height:2.137em}` / `.rt td{height:1.87em}`. Those two ems only resolve to the
	   SAME pixel height if th and td share a font-size. Our theme restyles th (smaller,
	   uppercase, letter-spaced), so they compute to 41px vs 44px — and the label column
	   drifts 3px further out of true on every row (measured: COURSE ✓, PERIOD DAYS 3px,
	   ROOM 6px, TERM 10px…). On a long table a label ends up pointing at the wrong value,
	   which is a correctness problem, not a cosmetic one — a student could read another
	   row's data as their own.
	   Pinning both to one height fixes the drift; 44px is also Apple's minimum tap target,
	   so alignment and touch are fixed by the same rule.
	   SPECIFICITY: FlatSIS uses `.list.rt th` (0,2,1) — a bare `.rt th` (0,1,1) LOSES to it,
	   which made td grow to 44px while th stayed 27px and drove the drift to 17px/row.
	   Match its specificity; our sheet is imported after FlatSIS, so an equal-weight rule wins. */
	.list.rt th, .rt th, .list.rt td, .rt td {
		height: 44px;
		line-height: 44px;
		padding-top: 0;
		padding-bottom: 0;
		box-sizing: border-box;
	}
	/* The sort links inside those header cells are separate targets: FlatSIS gives them
	   `.rt th a{line-height:2.137em}` = 27px, so the CELL became 44px above while the
	   actual <a> stayed 27px — tapping the top or bottom of a column header missed the
	   link. FlatSIS already sets `th a{display:block}`, so matching the line-height is
	   enough to make the link fill its cell. (Measured: 18 such links per list.) */
	.list.rt th a, .rt th a { line-height: 44px; }
	/* --- v3.6: our OWN modules overflow on phones (found by the full 3-role sweep) ---
	   These are clipped by .mod{overflow-x:hidden}, NOT scrollable like FlatSIS's .rt
	   tbody — so the pixels past the edge are simply gone, with no way to reach them. */

	/* KUC_Reports charts ran 66px off a 390px screen. The cause is ONE property in FlatSIS:
	       .chart { width: 90vw; min-width: 450px }
	   min-width BEATS both width and max-width in CSS — always. So `width:100%!important`
	   lands and is overruled anyway (verified by injecting it at runtime: no effect).
	   min-width:0 is the only thing that releases it; then 100% can take hold. */
	.chart { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
	.chart canvas, canvas { max-width: 100% !important; height: auto !important; }

	/* The v3.5 list bar is flex with `margin-left:auto` on the pager: the 320px filter
	   input plus the 172px pager needs 492px and only has 378, so Next/Prev were shoved
	   off-screen — the pagination existed but could not be reached. Let it wrap. */
	.kuc-listbar { flex-wrap: wrap; }
	.kuc-listbar input { flex: 1 1 100%; }
	.kuc-pager { margin-left: 0; }

	/* Wide custom tables (e.g. Broadcast Jobs' 9 columns = 646px) are not `table.list`,
	   so FlatSIS never gives them .rt and they get amputated. Let them scroll instead. */
	.kuc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* --- v3.6c: primary action buttons sat 70px left of centre ---
	   `td.header2` is a toolbar: left-aligned is CORRECT on desktop, where it holds a row
	   of controls. On a phone that row collapses to a single button, which then floats 30px
	   from the left (left gap 30 vs right gap 100) and reads as a mistake — while the twin
	   button lower down sits perfectly centred in its .center div. Same label, same page,
	   two different positions.
	   Scoped with :has(> input[type=submit]) so ONLY lone-button toolbars are touched:
	   the header2 cells holding 18 checkboxes or three date selects must stay left-aligned,
	   because centring a wrapped checkbox list ruins its left edge and makes it unscannable.
	   Centring (not full-width) is deliberate — it makes the top button match the bottom one. */
	td.header2:has(> input[type=submit]) { text-align: center; }
	/* The cell is td.header2.align-right, and our own line ~421 sets
	       .header2.align-right input[type=submit] { margin: 2px 0 2px 12px }
	   at specificity (0,3,1) — THREE classes ([type=submit] counts class-level). A
	   `td.header2 > input[type=submit]` rule is only (0,2,2) and loses however late it
	   comes, so the 12px left margin survived and pushed the button 12px right of centre.
	   Match their selector exactly to tie, and win on order. */
	.header2.align-right input[type=button],
	.header2.align-right input[type=reset],
	.header2.align-right input[type=submit] { margin-left: 4px; margin-right: 4px; }

	/* Buttons are finger targets on a phone, not cursor targets. 44px = Apple HIG minimum.
	   line-height is reset from the desktop 34px: that value exists to centre ONE line inside
	   36px, but it doubles on a wrapped label (34+34 = an 89px slab). 1.35 keeps a single-line
	   button at 44px and a two-line button at a civilised ~60px instead. */
	input[type=button], input[type=reset], input[type=submit] {
		min-height: 44px;
		line-height: 1.35;
		padding: 10px 16px;
	}
	input[type=color], input[type=email], input[type=file], input[type=number],
	input[type=password], input[type=search], input[type=tel], input[type=text],
	/* v3.6c: was 40px — 4px under Apple's 44pt minimum and 8 under Material's 48dp.
	   Measured 15 text inputs on Custom/Registration and 8 selects on Attendance/DailySummary
	   sitting at exactly 40px. 44px costs nothing and clears the HIG floor.
	   Deliberately NOT touched: the 20 rich-text editor toolbar buttons on Messaging/Write
	   are 28px, but they are third-party furniture — forcing them to 44px breaks the
	   editor's own layout, and they are secondary controls, not primary actions. */
	input[type=time], input[type=url], select { height: 44px; }
	.checkbox-label, .no-input-value, span.uld, span.underline-dots { line-height: 44px; }
	input[type=button], input[type=reset], input[type=submit] { padding: 10px 14px 8px; }
	input[type=checkbox], input[type=radio] { height: 20px; width: 20px; }
	input[type=checkbox]:before, input[type=radio]:before { width: 20px; height: 20px; }
	.adminmenu a { padding: 9px 12px; }
	.wp-submenu a { padding: 10px 12px; }
	#menu .logo { margin: 10px 12px; }
	.postbox { border-radius: var(--kuc-radius-s); }
	/* keep the login button text centered on phones (generic mobile button
	   padding above would push it down) */
	.login input[type=submit], .first-login input[type=submit], .password-reset input[type=submit] {
		padding-top: 0;
		padding-bottom: 0;
		line-height: 46px;
	}
}