@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@600;700;800&display=swap');

body {
	font-family: Arial, sans-serif;
	margin: 20px;
	background:
		linear-gradient(rgba(244, 247, 246, 0.9), rgba(244, 247, 246, 0.9)),
		var(--app-bg-image, none) center/cover fixed no-repeat;
}
.site-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	padding: 10px 0;
}

.site-header-logo {
	display: flex;
	justify-content: flex-start;
}

.site-logo {
	width: 200px;
	height: 120px;
	object-fit: contain;
}

.site-header-title {
	justify-self: center;
	text-align: center;
	font-family: 'Arimo', Arial, sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: #163f3f;
	letter-spacing: 0.01em;
}

.site-header-actions {
	display: flex;
	justify-content: flex-end;
	justify-self: end;
}

.top-nav-wrap {
	position: relative;
}

.top-nav-menu {
	position: relative;
}

.top-nav-trigger {
	list-style: none;
	cursor: pointer;
	padding: 8px 12px;
	border: 1px solid #cddede;
	border-radius: 8px;
	background: #fff;
	color: #1d4f4f;
	font-weight: 700;
	font-size: 14px;
	user-select: none;
}

.top-nav-trigger::-webkit-details-marker {
	display: none;
}

.top-nav-menu[open] .top-nav-trigger {
	background: #f3fbfb;
	border-color: #9ec0c0;
}

.top-nav-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 220px;
	padding: 8px;
	border: 1px solid #d6e6e6;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 24px rgba(16, 50, 50, 0.12);
	display: grid;
	gap: 4px;
	z-index: 30;
}

.top-nav-panel a {
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
	text-decoration: none;
	color: #1d4f4f;
	font-weight: 600;
}

.top-nav-panel a:hover {
	background: #edf7f7;
}

@media (max-width: 720px) {
	.site-header {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	.site-logo {
		width: 96px;
		height: 60px;
	}

	.site-header-title {
		font-size: 22px;
	}
}
table { border-collapse: collapse; width: 100% }
th, td { border: 1px solid #ddd; padding: 8px }
.flashes { list-style:none; padding:0; color: darkred }

/* subjects multi-select */
.subject-multi { margin: 8px 0 16px 0 }
.subject-tags { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 }
.subject-tag { background:#eef; padding:4px 8px; border-radius:12px; display:inline-flex; align-items:center }
.subject-tag button { margin-left:8px; background:transparent; border:0; cursor:pointer }
#subject-search { display:block; width:100%; padding:6px; margin-bottom:6px }
#subject-select { width:100%; }

/* admin form validation */
.inline-error { color: #b00020; font-size:0.9em; margin-top:4px }
.invalid { outline: 2px solid rgba(176,0,32,0.2) }

/* login page */
.login-hero {
	max-width: 680px;
	margin: 30px auto 24px;
	text-align: center;
}

.brand-logo {
	display: block;
	max-width: 132px;
	max-height: 132px;
	width: auto;
	height: auto;
	margin: 0 auto 10px;
}

.brand-kicker {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12px;
	color: #2f6d6d;
}

.login-hero h2 {
	margin: 8px 0 4px;
	font-size: 38px;
	line-height: 1.05;
	color: #163f3f;
}

.login-hero h3 {
	margin: 0;
	font-size: 34px;
	line-height: 1.08;
	color: #163f3f;
}

.brand-copy {
	margin: 12px auto 0;
	max-width: 620px;
	color: #335f5f;
}

.login-card {
	max-width: 440px;
	margin: 0 auto;
	border: 1px solid #cddede;
	border-radius: 14px;
	padding: 20px;
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(16, 50, 50, 0.08);
}

.login-card h4 {
	margin: 0 0 12px;
	color: #163f3f;
}

.login-form {
	display: grid;
	gap: 12px;
}

.login-form label {
	display: grid;
	gap: 6px;
	font-size: 14px;
}

.login-form input {
	padding: 10px 12px;
	border: 1px solid #a9c4c4;
	border-radius: 8px;
}

.login-form button {
	margin-top: 4px;
	border: 0;
	border-radius: 8px;
	padding: 10px 12px;
	font-weight: 700;
	background: #1d4f4f;
	color: #fff;
	cursor: pointer;
}

.login-help,
.login-default {
	margin: 12px 0 0;
	color: #456969;
	font-size: 14px;
}

/* admin landing */
.admin-hero {
	max-width: 760px;
	margin: 20px auto 16px;
	text-align: center;
}

.admin-stats {
	max-width: 980px;
	margin: 0 auto 16px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.admin-stat {
	border: 1px solid #cddede;
	border-radius: 12px;
	padding: 12px;
	background: #ffffff;
	box-shadow: 0 8px 16px rgba(16, 50, 50, 0.06);
}

.admin-stat h4 {
	margin: 0;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #2f6d6d;
}

.admin-stat p {
	margin: 8px 0 0;
	font-size: 24px;
	font-weight: 700;
	color: #163f3f;
}

.admin-grid {
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.admin-column {
	border: 1px solid #cddede;
	border-radius: 14px;
	padding: 16px;
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(16, 50, 50, 0.08);
	display: grid;
	gap: 10px;
}

.admin-column h4 {
	margin: 0 0 4px;
	color: #163f3f;
	font-size: 20px;
}

.admin-column-copy {
	margin: 0 0 6px;
	color: #456969;
	font-size: 14px;
	line-height: 1.45;
}

.admin-column-tall {
	min-height: 360px;
	align-content: start;
}

.admin-grouping {
	max-width: 1180px;
	margin: 18px auto 0;
	display: grid;
	gap: 14px;
}

.admin-grouping-header h3 {
	margin: 0;
	color: #163f3f;
	font-size: 24px;
}

.admin-grouping-header p {
	margin: 6px 0 0;
	color: #456969;
	font-size: 14px;
}

.admin-grid-extended {
	max-width: 1180px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.admin-action {
	display: block;
	padding: 10px 12px;
	border: 1px solid #a9c4c4;
	border-radius: 8px;
	background: #f6fbfb;
	color: #163f3f;
	text-decoration: none;
	font-weight: 600;
}

.admin-action:hover {
	background: #eaf5f5;
}

.admin-action.is-soon {
	color: #5a7373;
	background: #f7f9f9;
	border-style: dashed;
	cursor: not-allowed;
}

.admin-action em {
	font-style: normal;
	font-size: 12px;
	margin-left: 8px;
	color: #2f6d6d;
}

.admin-sessions {
	max-width: 980px;
	margin: 18px auto 0;
	border: 1px solid #cddede;
	border-radius: 14px;
	padding: 14px 16px;
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(16, 50, 50, 0.08);
}

.admin-sessions h3 {
	margin-top: 0;
	color: #163f3f;
}

.admin-sessions ul {
	margin: 0;
	padding-left: 20px;
}

.commissioner-grid {
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.commissioner-panel {
	min-height: 340px;
	border: 1px solid #cddede;
	border-radius: 14px;
	padding: 18px;
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(16, 50, 50, 0.08);
	display: grid;
	align-content: start;
	gap: 14px;
}

.commissioner-panel h4 {
	margin: 0;
	font-size: 28px;
	line-height: 1.1;
	color: #163f3f;
}

.commissioner-panel p {
	margin: 0;
	color: #456969;
	font-size: 15px;
}

.commissioner-flow {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 18px 0;
	color: #163f3f;
	font-size: 24px;
	font-weight: 700;
}

.commissioner-arrow {
	font-size: 34px;
	line-height: 1;
	color: #2f6d6d;
}

.student-grid {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
	gap: 16px;
	align-items: stretch;
}

.student-panel {
	min-height: 320px;
	border: 1px solid #cddede;
	border-radius: 14px;
	padding: 18px;
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(16, 50, 50, 0.08);
	display: grid;
	align-content: start;
	gap: 14px;
}

.student-panel h4 {
	margin: 0;
	font-size: 26px;
	line-height: 1.1;
	color: #163f3f;
}

.student-panel p {
	margin: 0;
	color: #456969;
	font-size: 15px;
}

.student-panel-wide {
	grid-column: span 1;
}

.student-panel-narrow {
	grid-column: span 1;
}

.student-work-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.student-work-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	padding: 10px 12px;
	border: 1px solid #dbe8e8;
	border-radius: 10px;
	background: #fbfefe;
}

.student-work-item strong,
.student-work-item span,
.student-work-item small {
	display: block;
}

.student-work-item span {
	margin-top: 4px;
	color: #2f6d6d;
	font-weight: 600;
}

.student-work-item small {
	margin-top: 6px;
	color: #5a7373;
	font-size: 13px;
	line-height: 1.4;
}

.student-work-item.is-empty {
	grid-template-columns: 1fr;
}

.parent-grid {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1.25fr;
	gap: 16px;
	align-items: stretch;
}

.parent-panel-wide {
	min-height: 320px;
}

.parent-summary-list {
	display: grid;
	gap: 10px;
}

.parent-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	border: 1px solid #dbe8e8;
	border-radius: 10px;
	background: #fbfefe;
	color: #163f3f;
}

.parent-summary-item strong {
	font-size: 14px;
}

.parent-summary-item span {
	font-size: 22px;
	font-weight: 700;
	color: #2f6d6d;
}

.parent-panel-wide h5 {
	margin: 6px 0 0;
	font-size: 16px;
	color: #163f3f;
}

.parent-student-list {
	margin: 0;
	padding-left: 18px;
	color: #456969;
	display: grid;
	gap: 6px;
}

.child-picker-form {
	margin: 0;
}

.child-picker-form select {
	max-width: 360px;
	padding: 10px 12px;
	border: 1px solid #a9c4c4;
	border-radius: 8px;
	background: #fff;
}

.multi-select-summary {
	margin-top: 8px;
	padding: 8px 10px;
	border: 1px solid #dbe8e8;
	border-radius: 8px;
	background: #fbfefe;
	color: #456969;
	font-size: 13px;
	line-height: 1.35;
}

.link-picker {
	display: grid;
	gap: 10px;
}

.link-picker-controls {
	display: grid;
	gap: 10px;
}

.link-picker-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
}

.link-picker-row .admin-action {
	border: 1px solid #1d4f4f;
	border-radius: 8px;
	padding: 10px 12px;
	background: #1d4f4f;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.linked-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 16px;
}

.linked-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border: 1px solid #c7dddd;
	border-radius: 999px;
	background: #f3f9f9;
	color: #173f3f;
	font-size: 14px;
	font-weight: 600;
}

.chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1px solid #9ab9b9;
	border-radius: 50%;
	background: #fff;
	color: #2f6363;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
}

.chip-remove:hover {
	background: #eef6f6;
}

.tutor-grid {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 16px;
	align-items: stretch;
}

.tutor-summary-list {
	display: grid;
	gap: 10px;
}

/* admin dashboard redesign closer to provided reference */
.schooldash {
	max-width: 1260px;
	margin: 0 auto;
	border: 1px solid #cad3df;
	border-radius: 14px;
	overflow: hidden;
	background: #eef2f7;
	box-shadow: 0 12px 24px rgba(17, 37, 67, 0.12);
}

.schooldash-topbar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	padding: 14px 18px;
	background: linear-gradient(90deg, #153759 0%, #1f4368 100%);
	color: #fff;
}

.schooldash-brand {
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
}

.schooldash-topnav {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.schooldash-topnav a {
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
	color: #d6e6f8;
}

.schooldash-topnav a:hover,
.schooldash-topnav a.is-active {
	background: rgba(77, 151, 242, 0.28);
	color: #fff;
}

.schooldash-user {
	font-weight: 700;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 8px 10px;
	border-radius: 999px;
}

.schooldash-layout {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 14px;
	padding: 14px;
}

.schooldash-sidebar {
	background: #e6ebf2;
	border: 1px solid #c8d1de;
	border-radius: 10px;
	padding: 8px;
	display: grid;
	align-content: start;
	gap: 8px;
}

.schooldash-sidebar a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
	color: #44556e;
}

.schooldash-sidebar a:hover {
	background: #dce6f4;
}

.schooldash-sidebar a.is-active {
	background: linear-gradient(90deg, #2f6fc0 0%, #3f83d8 100%);
	color: #fff;
}

.schooldash-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 14px;
	align-items: start;
}

.schooldash-timetable-card,
.schooldash-card {
	border: 1px solid #c9d2df;
	border-radius: 10px;
	padding: 12px;
	background: #f8fafc;
	box-shadow: 0 6px 14px rgba(16, 37, 70, 0.07);
}

.schooldash-card h3,
.schooldash-timetable-card h3 {
	margin: 0;
	font-size: 32px;
	line-height: 1.05;
	color: #2a3b53;
}

.schooldash-card-title-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #d9e1ea;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.schooldash-card-title-row span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5a6f8d;
}


.schooldash-filterbar {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	gap: 8px;
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #d7e0ec;
	border-radius: 8px;
	background: #eef3fa;
	align-items: end;
}

.schooldash-filterbar label {
	display: grid;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	color: #4f6483;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.schooldash-filterbar select,
.schooldash-filterbar input,
.schooldash-filterbar button {
	border: 1px solid #bccbdd;
	border-radius: 7px;
	padding: 8px 10px;
	font-size: 14px;
	background: #fff;
	color: #2e425f;
}

.schooldash-filterbar button {
	background: #2f6fc0;
	border-color: #2f6fc0;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	height: 38px;
}

.schooldash-filter-search {
	min-width: 220px;
}

.schooldash-timeline-wrap {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 8px;
}

.schooldash-time-axis {
	display: grid;
	grid-template-rows: auto 1fr;
	border: 1px solid #d2dce8;
	border-radius: 8px;
	background: #edf3fb;
	overflow: hidden;
}

.schooldash-time-axis-head {
	padding: 8px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #4f6483;
	border-bottom: 1px solid #d7e1ef;
}

.schooldash-time-axis ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	align-content: stretch;
	grid-template-rows: repeat(var(--dash-time-rows, 11), minmax(44px, 1fr));
}

.schooldash-time-axis li {
	padding: 0 8px;
	font-size: 12px;
	font-weight: 700;
	color: #5a6f8d;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 4px;
	border-top: 1px dashed #c6d3e5;
}

.schooldash-time-axis li:first-child {
	border-top: 0;
}

.schooldash-day-columns {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}

.schooldash-day-column {
	display: grid;
	grid-template-rows: auto 1fr;
	border: 1px solid #d2dce8;
	border-radius: 8px;
	background: #edf3fb;
	overflow: hidden;
}

.schooldash-day-column h4 {
	margin: 0;
	font-size: 15px;
	color: #334b6b;
	padding: 8px;
	border-bottom: 1px solid #d7e1ef;
	text-align: center;
}

.schooldash-day-track {
	position: relative;
	min-height: 440px;
	background: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.5) 0px,
		rgba(255, 255, 255, 0.5) 43px,
		rgba(212, 223, 238, 0.45) 44px
	);
}

.schooldash-hour-line {
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: #c8d6e7;
	opacity: 0.8;
	pointer-events: none;
}

.schooldash-day-empty {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 6px 8px;
	border: 1px dashed #b6c5d8;
	border-radius: 7px;
	text-align: center;
	font-size: 13px;
	color: #637a98;
	background: #f6f9fd;
}

.school-event {
	position: absolute;
	left: 6px;
	right: 6px;
	display: block;
	padding: 7px;
	border-radius: 7px;
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	box-shadow: 0 4px 10px rgba(20, 40, 70, 0.22);
	overflow: hidden;
	cursor: grab;
}

.school-event.is-moving {
	opacity: 0.9;
	box-shadow: 0 8px 18px rgba(20, 40, 70, 0.35);
	cursor: grabbing;
}

.school-event strong,
.school-event span,
.school-event small {
	display: block;
}

.school-event strong {
	font-size: 13px;
	line-height: 1.2;
}

.school-event span {
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.2;
}

.school-event small {
	margin-top: 4px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.school-event-resize {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 4px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	cursor: ns-resize;
}

.schooldash-modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 20, 34, 0.45);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 60;
}

.schooldash-modal.is-open {
	display: flex;
}

.schooldash-modal-card {
	width: min(640px, 100%);
	border: 1px solid #c9d2df;
	border-radius: 12px;
	background: #f8fafc;
	padding: 16px;
	box-shadow: 0 16px 30px rgba(16, 37, 70, 0.25);
}

.schooldash-modal-card h3 {
	margin: 0;
	font-size: 28px;
	color: #2a3b53;
}

.schooldash-modal-grid {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.schooldash-modal-grid label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #44556e;
}

.schooldash-modal-grid select,
.schooldash-modal-grid input {
	padding: 9px 10px;
	border: 1px solid #b9c7d8;
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	color: #22364f;
}

.schooldash-modal-actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}

.schooldash-modal-actions button {
	border: 1px solid #2f6fc0;
	border-radius: 8px;
	padding: 10px 12px;
	background: #2f6fc0;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.schooldash-modal-actions button[type='button'] {
	background: #eef3fa;
	border-color: #b9c7d8;
	color: #324b6b;
}

.school-event-0 { background: linear-gradient(180deg, #2f86d6 0%, #2f6fc0 100%); }
.school-event-1 { background: linear-gradient(180deg, #39a553 0%, #2f8f46 100%); }
.school-event-2 { background: linear-gradient(180deg, #f39a2a 0%, #dc7d11 100%); }
.school-event-3 { background: linear-gradient(180deg, #dd4d55 0%, #c33a42 100%); }
.school-event-4 { background: linear-gradient(180deg, #7856d8 0%, #6343bf 100%); }

.schooldash-right {
	display: grid;
	gap: 12px;
}

.schooldash-stat-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-top: 1px solid #dbe3ee;
}

.schooldash-stat-row:first-of-type {
	border-top: 0;
}

.schooldash-stat-row span {
	color: #536a89;
	font-weight: 700;
}

.schooldash-stat-row strong {
	font-size: 24px;
	color: #2a3b53;
}

.schooldash-download {
	display: block;
	text-align: center;
	padding: 11px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(90deg, #3aa840 0%, #2f9035 100%);
	border: 1px solid #2f9035;
}

.schooldash-task-list,
.schooldash-report-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.schooldash-task-list li,
.schooldash-report-list li {
	border: 1px solid #d5deeb;
	border-radius: 8px;
	background: #eef3fa;
}

.schooldash-task-list a,
.schooldash-report-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 8px;
	text-decoration: none;
	color: #314a6b;
}

.schooldash-report-list a {
	display: block;
}

.schooldash-report-list a strong,
.schooldash-report-list a small {
	display: block;
}

.schooldash-report-list a small {
	margin-top: 4px;
	font-size: 12px;
	color: #5d7493;
}

.schooldash-task-list strong {
	font-size: 18px;
	color: #1f5ea8;
	min-width: 26px;
	text-align: right;
}

.schooldash-bottom-row {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.schooldash-actions {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.schooldash-report-list li.is-empty {
	padding: 10px;
	text-align: center;
	border-style: dashed;
	background: #f4f8fd;
	color: #6d819d;
}

@media (max-width: 1180px) {
	.schooldash-layout {
		grid-template-columns: 1fr;
	}

	.schooldash-sidebar {
		display: flex;
		flex-wrap: wrap;
	}

	.schooldash-main {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.schooldash-topbar {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.schooldash-filterbar {
		grid-template-columns: 1fr 1fr;
	}

	.schooldash-timeline-wrap {
		grid-template-columns: 58px minmax(0, 1fr);
	}

	.schooldash-day-columns {
		grid-template-columns: 1fr 1fr;
	}

	.schooldash-bottom-row {
		grid-template-columns: 1fr;
	}

	.schooldash-actions {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.schooldash-filterbar {
		grid-template-columns: 1fr;
	}

	.schooldash-timeline-wrap {
		grid-template-columns: 1fr;
	}

	.schooldash-time-axis {
		display: none;
	}

	.schooldash-day-columns {
		grid-template-columns: 1fr;
	}

	.schooldash-brand,
	.schooldash-card h3,
	.schooldash-timetable-card h3 {
		font-size: 24px;
	}
}

.schooldash-admin-page {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	gap: 14px;
}

.schooldash-report-metrics {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

.schooldash-report-card {
	border: 1px solid #c9d2df;
	border-radius: 10px;
	background: #f8fafc;
	padding: 10px;
	box-shadow: 0 6px 14px rgba(16, 37, 70, 0.07);
}

.schooldash-report-card h4 {
	margin: 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #536a89;
}

.schooldash-report-card p {
	margin: 8px 0 0;
	font-size: 30px;
	font-weight: 800;
	color: #2a3b53;
}

.schooldash-report-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 12px;
	align-items: start;
}

.schooldash-report-side {
	display: grid;
	gap: 12px;
}

.schooldash-table-wrap {
	overflow-x: auto;
}

.schooldash-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: #fff;
	border: 1px solid #d7e0ec;
	border-radius: 10px;
	overflow: hidden;
}

.schooldash-table th,
.schooldash-table td {
	padding: 9px 10px;
	border-bottom: 1px solid #e0e8f2;
	text-align: left;
	vertical-align: top;
}

.schooldash-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #536a89;
	background: #edf3fb;
}

.report-pill {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.report-pill.is-good {
	background: #e7f6ec;
	color: #1f6a3f;
	border: 1px solid #bfe4cc;
}

.report-pill.is-warn {
	background: #fff4e8;
	color: #8b5315;
	border: 1px solid #f0d0ac;
}

.schooldash-comment-list,
.schooldash-resource-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.schooldash-comment-list li,
.schooldash-resource-list li {
	border: 1px solid #d7e0ec;
	border-radius: 9px;
	background: #f4f8fd;
	padding: 8px;
}

.schooldash-comment-list strong,
.schooldash-comment-list small,
.schooldash-resource-list strong,
.schooldash-resource-list small {
	display: block;
}

.schooldash-comment-list small,
.schooldash-resource-list small {
	margin-top: 2px;
	font-size: 12px;
	color: #5d7493;
}

.schooldash-comment-list p,
.schooldash-resource-list p {
	margin: 6px 0 0;
	color: #2e4566;
	font-size: 14px;
	line-height: 1.4;
}

.schooldash-admin-card {
	border-color: #c9d2df;
	background: #f8fafc;
	box-shadow: 0 8px 16px rgba(17, 37, 67, 0.08);
}

.schooldash-admin-card h3 {
	margin: 0 0 12px;
	font-size: 28px;
	line-height: 1.1;
	color: #2a3b53;
}

.schooldash-crud-grid,
.schooldash-crud-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	align-items: end;
}

.schooldash-crud-grid label,
.schooldash-crud-row label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #44556e;
}

.schooldash-crud-grid input,
.schooldash-crud-grid select,
.schooldash-crud-row input,
.schooldash-crud-row select {
	padding: 9px 10px;
	border: 1px solid #b9c7d8;
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	color: #22364f;
}

.schooldash-crud-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.schooldash-subject-panel {
	grid-column: 1 / -1;
	border: 1px solid #d6deea;
	border-radius: 10px;
	background: #f3f7fc;
	padding: 10px;
}

.schooldash-subject-panel h4 {
	margin: 0 0 8px;
	font-size: 16px;
	color: #2f4768;
}

.schooldash-crud-list {
	display: grid;
	gap: 10px;
}

.schooldash-crud-row {
	padding: 10px;
	border: 1px solid #d6deea;
	border-radius: 10px;
	background: #eef3fa;
}

.schooldash-crud-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.schooldash-crud-actions button {
	border: 1px solid #2f6fc0;
	border-radius: 8px;
	padding: 9px 12px;
	background: #2f6fc0;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.schooldash-delete-row {
	display: flex;
	justify-content: flex-end;
	margin-top: -4px;
}

@media (max-width: 900px) {
	.schooldash-report-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.schooldash-report-grid {
		grid-template-columns: 1fr;
	}

	.schooldash-crud-grid,
	.schooldash-crud-row {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.schooldash-report-metrics {
		grid-template-columns: 1fr;
	}

	.schooldash-crud-grid,
	.schooldash-crud-row {
		grid-template-columns: 1fr;
	}

	.schooldash-modal-grid {
		grid-template-columns: 1fr;
	}
}

/* branded admin forms */
.management-hero {
	max-width: 760px;
	margin: 20px auto 16px;
	text-align: center;
}

.management-card {
	max-width: 980px;
	margin: 0 auto 16px;
	border: 1px solid #cddede;
	border-radius: 14px;
	padding: 20px;
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(16, 50, 50, 0.08);
}

.session-detail-card {
	display: grid;
	gap: 18px;
}

.session-meta-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.session-meta-item {
	border: 1px solid #d6e6e6;
	border-radius: 12px;
	padding: 12px;
	background: linear-gradient(180deg, #fbfefe 0%, #f6fbfb 100%);
}

.session-meta-label {
	margin: 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #2f6d6d;
	font-weight: 700;
}

.session-meta-value {
	margin: 8px 0 0;
	font-size: 22px;
	line-height: 1.2;
	color: #163f3f;
	font-weight: 700;
}

.session-meta-value--person {
	font-size: 18px;
	line-height: 1.3;
}

.session-topic-pill {
	margin: 8px 0 0;
	display: inline-block;
	padding: 8px 12px;
	border-radius: 999px;
	background: #edf7f7;
	border: 1px solid #c7dddd;
	color: #163f3f;
	font-weight: 700;
	font-size: 18px;
}

.session-comments-panel {
	border: 1px solid #d6e6e6;
	border-radius: 12px;
	padding: 14px;
	background: #fff;
}

.session-comments-panel h3 {
	margin: 0 0 10px;
	color: #123d3d;
	font-size: 24px;
}

.session-comments-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.session-comment-item {
	border: 1px solid #dbe8e8;
	border-radius: 10px;
	padding: 10px 12px;
	background: #fbfefe;
	display: grid;
	gap: 6px;
}

.session-comment-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.session-comment-role {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px;
	background: #e0f0f0;
	color: #1d6060;
	border-radius: 99px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.session-comment-role--admin {
	background: #eef2ff;
	color: #243f9e;
	border: 1px solid #cfd9ff;
}

.session-comment-role--tutor {
	background: #e9f7ef;
	color: #1f6a3f;
	border: 1px solid #bfe4cc;
}

.session-comment-role--parent {
	background: #fff4e8;
	color: #8b5315;
	border: 1px solid #f0d0ac;
}

.session-comment-role--student {
	background: #edf7ff;
	color: #1b5d8b;
	border: 1px solid #c7e2f5;
}

.session-comment-role--scheduler,
.session-comment-role--commissioner,
.session-comment-role--unknown {
	background: #f1f4f4;
	color: #4e6a6a;
	border: 1px solid #d7e1e1;
}

.session-comment-time {
	font-size: 13px;
	color: #5b7979;
}

.session-comment-content {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: #163f3f;
	white-space: pre-wrap;
}

.session-comment-empty {
	padding: 12px;
	border: 1px dashed #c7dddd;
	border-radius: 10px;
	background: #f7fbfb;
	color: #476c6c;
	font-weight: 600;
}

.session-comment-form textarea {
	padding: 10px 12px;
	border: 1px solid #a9c4c4;
	border-radius: 8px;
	background: #fff;
	resize: vertical;
	min-height: 88px;
	font-family: Arial, sans-serif;
}

.branded-form {
	display: grid;
	gap: 14px;
}

.admin-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: start;
}

.compact-form-grid {
	max-width: 640px;
	grid-template-columns: 1fr;
}

.branded-form label {
	display: grid;
	gap: 6px;
	font-size: 14px;
	color: #163f3f;
}

.branded-form input,
.branded-form select {
	padding: 10px 12px;
	border: 1px solid #a9c4c4;
	border-radius: 8px;
	background: #fff;
}

.form-block {
	display: grid;
	gap: 6px;
}

.form-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.form-actions button {
	border: 0;
	border-radius: 8px;
	padding: 10px 14px;
	font-weight: 700;
	background: #1d4f4f;
	color: #fff;
	cursor: pointer;
}

.secondary-link {
	width: auto;
	background: #f6fbfb;
}

.form-note {
	margin: 0;
	color: #456969;
	font-size: 14px;
}

.form-section-panel {
	border: 1px solid #d6e6e6;
	border-radius: 12px;
	padding: 14px;
	background: linear-gradient(180deg, #fbfefe 0%, #f6fbfb 100%);
	display: grid;
	gap: 12px;
}

.form-section-panel > h3 {
	margin: 0;
	color: #123d3d;
	font-size: 18px;
}

.background-preview-wrap {
	margin-top: 14px;
	display: grid;
	gap: 8px;
}

.background-preview-frame {
	border: 1px solid #d6e6e6;
	border-radius: 14px;
	padding: 10px;
	background: linear-gradient(180deg, #fbfefe 0%, #f4faf9 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.background-preview-image {
	height: 180px;
	border-radius: 10px;
	background:
		linear-gradient(rgba(244, 247, 246, 0.9), rgba(244, 247, 246, 0.9)),
		center/cover no-repeat;
	border: 1px solid rgba(158, 192, 192, 0.5);
}

.background-preview-note {
	margin-bottom: 0;
}

.local-feedback {
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
}

.local-feedback.is-success {
	background: #edf8f1;
	color: #1f6240;
	border: 1px solid #b9ddc5;
}

.local-feedback.is-warning {
	background: #fff7ea;
	color: #8b5a00;
	border: 1px solid #ead39d;
}

/* ── User Selector ───────────────────────────── */
.selector-card {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.selector-form {
	gap: 10px;
}

.selector-note {
	margin: 0;
	font-size: 14px;
	color: #476c6c;
}

.selector-row {
	display: grid;
	gap: 8px;
}

#user-search {
	font-size: 15px;
}

#user-select {
	min-height: 180px;
	border-radius: 8px;
	border-color: #9ec0c0;
	font-size: 15px;
	line-height: 1.4;
	padding: 6px;
	background: #fff;
}

#user-select option {
	padding: 4px 8px;
}

/* ── User Edit Modal ──────────────────────────── */
.user-edit-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5, 30, 30, 0.52);
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 32px 16px 48px;
	overflow-y: auto;
}

.user-edit-modal {
	background: #fff;
	border-radius: 18px;
	width: 100%;
	max-width: 860px;
	box-shadow: 0 10px 48px rgba(5, 30, 30, 0.26);
	display: flex;
	flex-direction: column;
}

.user-edit-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 28px 16px;
	border-bottom: 1px solid #d6e6e6;
	border-radius: 18px 18px 0 0;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 10;
}

.user-edit-modal-body {
	padding: 24px 28px 32px;
}

.modal-user-title {
	margin: 0 0 4px;
	font-size: 22px;
	color: #123d3d;
	line-height: 1.2;
}

.modal-username-badge {
	font-size: 14px;
	color: #7a9e9e;
	font-weight: 400;
	margin-left: 6px;
}

.modal-role-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 12px;
	background: #e0f0f0;
	color: #1d6060;
	border-radius: 99px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.modal-close-btn {
	flex-shrink: 0;
	font-size: 30px;
	line-height: 1;
	color: #7a9e9e;
	text-decoration: none;
	padding: 2px 8px;
	border-radius: 8px;
	transition: background 0.15s, color 0.15s;
}

.modal-close-btn:hover {
	background: #f0f6f6;
	color: #123d3d;
}

.status-banner {
	margin-bottom: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	font-weight: 700;
}

.status-banner.is-complete {
	background: #edf8f1;
	color: #1f6240;
	border: 1px solid #b9ddc5;
}

.status-banner.is-incomplete {
	background: #fff7ea;
	color: #8b5a00;
	border: 1px solid #ead39d;
}

.completion-list {
	margin: 0 0 14px;
	padding-left: 20px;
	color: #8b5a00;
}

.role-section {
	display: grid;
	gap: 10px;
}

.role-section h3 {
	margin: 0;
	color: #163f3f;
}

.subject-level-grid {
	display: grid;
	gap: 10px;
}

.subject-level-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid #dbe8e8;
	border-radius: 10px;
	background: #fbfefe;
	align-items: center;
}

.subject-toggle {
	display: flex;
	gap: 10px;
	align-items: center;
	font-weight: 600;
}

.subject-toggle input {
	width: 18px;
	height: 18px;
	padding: 0;
}

/* subject list on manage subjects page */
.subject-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.subject-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border: 1px solid #dbe8e8;
	border-radius: 10px;
	background: #fbfefe;
}

.delete-form {
	margin: 0;
}

.delete-btn {
	border: 1px solid #d9a8a8;
	background: #fff5f5;
	color: #8b2020;
	border-radius: 8px;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 14px;
}

.delete-btn:hover {
	background: #fdeaea;
}

@media (max-width: 640px) {
	.login-hero {
		margin-top: 18px;
	}

	.brand-logo {
		max-width: 112px;
		max-height: 112px;
	}

	.login-hero h2 {
		font-size: 30px;
	}

	.login-hero h3 {
		font-size: 26px;
	}

	.admin-stats,
	.admin-grid,
	.admin-grid-extended,
	.commissioner-grid,
	.student-grid,
	.parent-grid,
	.tutor-grid {
		grid-template-columns: 1fr;
	}

	.admin-form-grid {
		grid-template-columns: 1fr;
	}

	.session-meta-grid {
		grid-template-columns: 1fr;
	}

	.subject-level-row {
		grid-template-columns: 1fr;
	}

	.link-picker-row {
		grid-template-columns: 1fr;
	}
}

/* ── Booking wizard ─────────────────────────────────────────────────── */

.booking-steps {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 28px;
	flex-wrap: wrap;
	gap: 4px;
}

.booking-step {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 24px;
	border: 2px solid #cddede;
	background: #f6fbfb;
	color: #6b8f8f;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.booking-step .step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #cddede;
	color: #163f3f;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}

.booking-step.is-active {
	border-color: #1d4f4f;
	background: #eaf4f4;
	color: #1d4f4f;
}

.booking-step.is-active .step-num {
	background: #1d4f4f;
	color: #fff;
}

.booking-step.is-done {
	border-color: #3a9e6e;
	background: #edf8f1;
	color: #1f6240;
}

.booking-step.is-done .step-num {
	background: #3a9e6e;
	color: #fff;
}

.booking-step.is-done .step-num::after {
	content: '✓';
}

.booking-step.is-done .step-num {
	font-size: 0;
}

.booking-step.is-done .step-num::after {
	font-size: 13px;
}

.step-connector {
	flex: 1;
	height: 2px;
	background: #cddede;
	min-width: 16px;
	max-width: 40px;
}

/* Wizard step panels */
.wizard-step-panel {
	border: 2px solid #dbe8e8;
	border-radius: 12px;
	padding: 20px;
	transition: border-color 0.2s, opacity 0.2s;
	display: grid;
	gap: 14px;
}

.wizard-step-panel.locked {
	opacity: 0.45;
	pointer-events: none;
	background: #f8fbfb;
	border-style: dashed;
}

.wizard-step-panel:not(.locked) {
	background: #fff;
	border-color: #1d4f4f;
}

/* Remove default fieldset chrome */
.wizard-step-panel {
	margin: 0;
}

legend.wizard-step-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	color: #163f3f;
	padding: 0 6px;
}

.step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #1d4f4f;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	flex-shrink: 0;
}

.wizard-hint {
	margin: 0;
	font-size: 13px;
	color: #456969;
	min-height: 18px;
}

.wizard-hint.is-warning {
	color: #8b5a00;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Date conflict bar */
.date-info-bar {
	background: #fff7ea;
	border: 1px solid #ead39d;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13px;
	color: #4a3200;
}

.date-info-bar strong {
	display: block;
	margin-bottom: 6px;
}

.date-info-bar ul {
	margin: 0;
	padding-left: 18px;
}

.date-info-bar li.unavail {
	color: #8b2020;
	font-weight: 600;
}

.date-info-bar li.busy {
	color: #7a5500;
}

/* Date status message */
.date-status-msg {
	align-self: end;
	font-size: 13px;
	color: #456969;
	padding-bottom: 4px;
}

.date-status-msg.is-blocked {
	color: #8b2020;
	font-weight: 600;
}

.date-status-msg.is-warning {
	color: #8b5a00;
}