.hat {
	--hat-bg: #000000;
	--hat-card: #0b0b0b;
	--hat-card-alt: #ffffff0d;
	--hat-border: #2a2a2a;
	--hat-text: #ffffff;
	--hat-muted: #c1c1c1;
	--hat-accent: #bc9868;
	--hat-accent-bg: #2b2114;
	--hat-accent-ink: #1a1409;
	--hat-green: #34d399;
	--hat-green-bg: #14301f;
	--hat-amber: #f5b942;
	--hat-red: #f2565a;
	--hat-radius: 16px;

	box-sizing: border-box;
	color: var(--hat-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	max-width: 480px;
	margin: 0 auto;
}
.hat *, .hat *::before, .hat *::after {
	box-sizing: border-box;
}
/* Defensive reset: themes often set global font-size/text-transform/padding
   on bare button tags, which otherwise leaks into our components. :where()
   keeps this scoped to .hat without adding any specificity, so every
   .hat-* class below (a plain class selector) still wins regardless of
   source order — this is a base layer, not a competing rule. */
:where(.hat) button {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
	margin: 0;
	padding: 0;
	border-radius: 0;
	cursor: pointer;
	text-align: center;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, box-shadow .15s ease, transform .1s ease;
}
:where(.hat) button:active {
	transform: scale(0.96);
}
/* The glow itself works on tap too (:active), not just mouse :hover — touch has no
   hover state, so :active is its equivalent "I'm touching this" feedback. Keeping
   both means pointer users get it while hovering AND while pressing. */
:where(.hat) .hat-manage-toggle:active,
:where(.hat) .hat-checkin-btn:active,
:where(.hat) .hat-add-submit:active,
:where(.hat) .hat-class-tab-btn:active {
	filter: brightness(1.12);
}
@media (hover: hover) {
	:where(.hat) .hat-manage-toggle:hover,
	:where(.hat) .hat-checkin-btn:hover,
	:where(.hat) .hat-add-submit:hover,
	:where(.hat) .hat-class-tab-btn:hover {
		filter: brightness(1.12);
	}
}
:where(.hat) button, :where(.hat) input, :where(.hat) select, :where(.hat) textarea {
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	color: var(--hat-text);
}

/* ---------- Card shell ---------- */
.hat-card {
	/* Same glass treatment as the table panel: a warm glow behind the header
	   (kept from before) over a flat, uniform light tint — real glass/acrylic
	   catches light at its EDGES from refraction, not across one face, so the
	   "lighter" effect now lives entirely in the four inset highlights below
	   (one per edge) rather than a directional gradient across the fill. A
	   second glow anchored at the bottom reaches up behind the table too. */
	background:
		radial-gradient(ellipse 460px 480px at 50% 0%, rgba(188, 152, 104, 0.09), transparent 75%),
		radial-gradient(ellipse 400px 340px at 50% 100%, rgba(188, 152, 104, 0.06), transparent 75%),
		linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
		var(--hat-card);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--hat-radius);
	padding: 20px 16px 14px;
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	box-shadow:
		0 24px 48px -16px rgba(0, 0, 0, 0.75),
		0 0 50px -8px rgba(188, 152, 104, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		inset 0 -1px 0 rgba(255, 255, 255, 0.1),
		inset 1px 0 0 rgba(255, 255, 255, 0.1),
		inset -1px 0 0 rgba(255, 255, 255, 0.1);
}

/* ---------- Header ---------- */
.hat-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative;
	margin-bottom: 12px;
}
.hat-back {
	position: absolute;
	left: 0;
	top: 4px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--hat-card-alt);
	color: var(--hat-text);
	text-decoration: none;
	font-size: 20px;
}
.hat-avatar {
	position: relative;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hat-card-alt);
	border: 2px solid var(--hat-border);
}
.hat-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hat-avatar-fallback {
	font-size: 36px;
	font-weight: 600;
	color: var(--hat-muted);
}
/* Gold halo on the tracker page's big avatar — the one personal element on
   the page, tied visually to the accent color used everywhere else. */
.hat-header .hat-avatar {
	width: 140px;
	height: 140px;
	border-color: var(--hat-accent);
	box-shadow: 0 0 0 4px var(--hat-accent-bg), 0 0 28px -4px rgba(188, 152, 104, 0.55);
}
.hat-header .hat-avatar-fallback {
	font-size: 44px;
}
.hat-header .hat-avatar-edit {
	width: 38px;
	height: 38px;
	font-size: 17px;
}
.hat-avatar-img[role="button"] {
	cursor: pointer;
}
/* ---------- Photo reposition modal (Cropper.js) ---------- */
/* Cropper.js itself owns all drag/pinch/zoom touch handling — this is just
   sizing the container it takes over, and the standard "round preview"
   recipe (make its view-box and face circular) since Cropper is rectangular
   by default and our avatars are circles everywhere else in the plugin. */
.hat-photo-position-preview {
	width: 220px;
	height: 220px;
	max-width: 100%;
	margin: 0 auto 14px;
	overflow: hidden;
}
.hat-photo-position-preview-img {
	display: block;
	max-width: 100%;
}
.hat-photo-position-preview .cropper-view-box,
.hat-photo-position-preview .cropper-face {
	border-radius: 50%;
}
.hat-photo-position-preview .cropper-view-box {
	outline: 1px solid var(--hat-accent);
	outline-color: var(--hat-accent);
}
.hat-photo-position-zoom-row {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-bottom: 16px;
}
.hat-photo-position-restore {
	display: block;
	margin: 0 auto 16px;
	background: none;
	border: none;
	color: var(--hat-muted);
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}
.hat-avatar-edit {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--hat-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	cursor: pointer;
	border: 2px solid var(--hat-card);
}
.hat-photo-error {
	color: var(--hat-red);
	font-size: 12px;
	text-align: center;
	margin: -4px 0 8px;
}
.hat-student-name {
	margin: 4px 0 0;
	font-size: 19px;
	font-weight: 700;
	text-align: center;
}

/* ---------- Month nav ---------- */
.hat-month-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 4px 0 16px;
}
.hat-month-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--hat-border);
	background: var(--hat-card-alt);
	color: var(--hat-text);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hat-month-btn:hover {
	background: var(--hat-border);
}
.hat-month-label {
	font-weight: 600;
	min-width: 120px;
	text-align: center;
}

/* ---------- Tabs ---------- */
.hat-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}
.hat-tab {
	flex: 1;
	padding: 10px 8px;
	border-radius: 999px;
	border: 1px solid var(--hat-border);
	/* Faint top highlight over the card-alt tone, plus a soft drop shadow —
	   reads as a raised physical button rather than a flat text label. */
	background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%), var(--hat-card-alt);
	box-shadow: 0 2px 5px -1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
	color: var(--hat-muted);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.hat-tab.is-active {
	background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%), var(--hat-accent-bg);
	border-color: var(--hat-accent);
	color: var(--hat-accent);
	box-shadow: 0 4px 12px -3px rgba(188, 152, 104, 0.55), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ---------- Table ---------- */
/* Glass panel — deliberately lighter than the near-black card behind it
   (dark-on-dark has almost no contrast, so a dark tint here was invisible),
   with a flat uniform tint (light catching lives in the four edge highlights
   below, not a directional gradient across the fill — real glass catches
   light at its edges, not across one face) and an actual glowing halo (a
   separate gold-tinted shadow, not just a dark drop shadow) so the panel
   visibly lifts off the page instead of just sitting flush against it. */
.hat-table-scroll {
	overflow-x: auto;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.045);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	box-shadow:
		0 20px 40px -12px rgba(0, 0, 0, 0.75),
		0 0 44px -6px rgba(188, 152, 104, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		inset 0 -1px 0 rgba(255, 255, 255, 0.12),
		inset 1px 0 0 rgba(255, 255, 255, 0.12),
		inset -1px 0 0 rgba(255, 255, 255, 0.12);
}
.hat-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 320px;
}
.hat-table thead th {
	text-align: center;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hat-accent);
	font-weight: 700;
	padding: 14px 8px;
	background: var(--hat-card-alt);
}
.hat-table tbody tr {
	transition: background-color .15s ease;
}
.hat-table tbody td {
	padding: 10px 8px;
	border-top: 1px solid var(--hat-border);
	vertical-align: middle;
	color: var(--hat-text);
	text-align: center;
}
/* Gold tint on Friday's row specifically, rather than plain alternating rows. */
.hat-table tbody tr.is-friday {
	background: rgba(255,255,255,0.015);
}
.hat-table tbody tr.is-friday td {
	color: var(--hat-accent);
}
.hat-table tbody tr.is-friday td .hat-day-name {
	color: var(--hat-accent);
}
/* Permanent "you are here" marker on today's row — a gold inset edge plus a
   faint tint, so today is always findable at a glance without scanning.
   box-shadow (not border) so it doesn't shift column widths. The edge lives
   on the row's first cell, not the <tr> itself — box-shadow on a table row
   doesn't reliably paint in WebKit when border-collapse: collapse is set. */
.hat-table tbody tr.is-today {
	background: rgba(188, 152, 104, 0.08);
}
.hat-table tbody tr.is-today td:first-child {
	box-shadow: inset 3px 0 0 var(--hat-accent);
}
/* Comes after is-friday (and is-today) so the highlight wins on Friday rows
   too — same specificity, later source order. Press (:active) doubles as the
   touch-equivalent feedback; :hover is pointer-only. */
.hat-table tbody tr:active {
	background: rgba(188, 152, 104, 0.12);
}
@media (hover: hover) {
	.hat-table tbody tr:hover {
		background: rgba(188, 152, 104, 0.08);
	}
}
/* Skeleton placeholder rows shown only if a month fetch is actually slow —
   sized to match the real row count exactly, so there's no height jump
   (and no scrollbar flicker) when the real data replaces it. */
.hat-skeleton-row td {
	padding: 10px 8px;
}
.hat-skeleton-bar {
	display: block;
	height: 14px;
	width: 70%;
	margin: 0 auto;
	border-radius: 6px;
	background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%);
	background-size: 200% 100%;
	animation: hat-shimmer 1.3s ease-in-out infinite;
}
@keyframes hat-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hat-skeleton-bar {
		animation: none;
	}
}
.hat-col-day {
	white-space: nowrap;
}
.hat-day-num {
	font-weight: 700;
	margin-right: 6px;
}
.hat-day-name {
	color: var(--hat-muted);
	font-size: 12px;
	font-weight: 700;
}
.hat-col-num {
	text-align: left;
}

/* value cell (free text), tap to edit */
.hat-value {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 34px;
	min-height: 30px;
	max-width: 100%;
	padding: 3px 8px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	word-break: break-word;
}
.hat-value:hover {
	background: rgba(255,255,255,0.06);
}
.hat-value.hat-empty {
	color: var(--hat-muted);
	font-weight: 400;
}
/* Teacher tab: read-only, no tap-to-edit — don't suggest it's clickable. */
.hat-value.hat-value-static {
	cursor: default;
}
.hat-value.hat-value-static:hover {
	background: none;
}

.hat-edit-input {
	width: auto;
	max-width: 100%;
	background: var(--hat-bg);
	border: 1px solid var(--hat-accent);
	border-radius: 6px;
	color: var(--hat-text);
	font-size: 14px;
	padding: 3px 6px;
}

/* Teacher tab: value + grading dot sit side by side; editing the value
   never touches the dot, since they're siblings, not nested. Full-width flex
   row (not inline-flex) with the dot pushed to the far edge via margin-left:
   auto — that way the dot lands in the same spot on every row regardless of
   how long the value text is, instead of drifting with it. */
.hat-teacher-cell {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
}

/* performance dot (teacher tab) — a raised glossy "bead" rather than a flat
   filled circle: a highlight near the top-left simulates light catching a
   rounded surface, an inner shadow near the bottom adds roundness, and an
   outer shadow lifts it off the row. */
.hat-dot-btn {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--hat-border);
	background: transparent;
	padding: 0;
	cursor: pointer;
	flex: none;
	margin-left: auto;
	box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.12);
	transition: background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.hat-dot-btn.is-just-updated {
	transform: scale(1.25);
}
.hat-dot-btn[data-color="green"] {
	background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%), var(--hat-green);
	border-color: var(--hat-green);
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.55), inset 0 -2px 2px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.hat-dot-btn[data-color="amber"] {
	background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%), var(--hat-amber);
	border-color: var(--hat-amber);
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.55), inset 0 -2px 2px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.hat-dot-btn[data-color="red"] {
	background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%), var(--hat-red);
	border-color: var(--hat-red);
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.55), inset 0 -2px 2px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
/* Hifz tab shows the same dot read-only — grading itself only happens on the Teacher tab. */
.hat-dot-btn.hat-dot-static {
	cursor: default;
}

/* attendance pill */
.hat-attendance-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--hat-border);
	color: var(--hat-muted);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.hat-attendance-pill.is-just-updated {
	transform: scale(1.08);
}
.hat-attendance-pill[data-status="present"] { color: var(--hat-green); border-color: var(--hat-green); background: var(--hat-green-bg); }
.hat-attendance-pill[data-status="absent"]  { color: var(--hat-red); border-color: var(--hat-red); background: #3a1618; }
.hat-attendance-pill[data-status="late"]    { color: var(--hat-amber); border-color: var(--hat-amber); background: #3a2c10; }
.hat-checkin-btn {
	background: var(--hat-accent);
	color: var(--hat-accent-ink);
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}
.hat-checkin-btn:disabled {
	opacity: 0.6;
	cursor: default;
}
.hat-attendance-future {
	color: var(--hat-muted);
	font-size: 13px;
}
.hat-attendance-note {
	color: var(--hat-muted);
	font-size: 12px;
	margin: -6px 0 10px;
}

/* ---------- Shared staff-auth modal ---------- */
.hat-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 9999;
}
/* Explicitly setting display above means the browser's built-in
   "[hidden] { display: none }" rule no longer wins by itself
   (same specificity, ours loads later) — restate it so the
   overlay actually disappears when JS sets .hidden = true. */
.hat-modal-overlay[hidden] {
	display: none;
}
.hat-modal-box {
	background: var(--hat-card);
	border: 1px solid var(--hat-border);
	border-radius: 16px;
	padding: 22px 20px;
	width: 100%;
	max-width: 340px;
	color: var(--hat-text);
	font-family: inherit;
}
.hat-modal-title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
}
.hat-modal-copy {
	color: var(--hat-muted);
	font-size: 13px;
	margin: 0 0 16px;
}
.hat-modal-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hat-settings-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: var(--hat-muted);
}
.hat-modal-form input {
	background: var(--hat-bg);
	border: 1px solid var(--hat-border);
	border-radius: 8px;
	color: var(--hat-text);
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
}
.hat-modal-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
.hat-modal-submit {
	background: var(--hat-accent);
	color: var(--hat-accent-ink);
	border-radius: 999px;
	padding: 10px 20px;
	font-weight: 700;
}
.hat-modal-cancel {
	background: transparent;
	border: 1px solid var(--hat-border);
	color: var(--hat-muted);
	border-radius: 999px;
	padding: 10px 16px;
}
.hat-modal-error {
	color: var(--hat-red);
	margin: 10px 0 0;
	font-size: 13px;
}

/* ---------- Student access gate (standalone page, not a modal overlay) ---------- */
.hat-gate {
	margin: 40px auto;
}
.hat-gate .hat-modal-actions {
	justify-content: stretch;
}
.hat-gate .hat-modal-submit {
	width: 100%;
	text-align: center;
}

.hat-attendance-note-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: -6px 0 10px;
}
.hat-attendance-note-row .hat-attendance-note {
	margin: 0;
}
.hat-attendance-settings-btn {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--hat-border);
	background: var(--hat-card-alt);
	color: var(--hat-muted);
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hat-teacher-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.hat-teacher-hint {
	color: var(--hat-muted);
	font-size: 12px;
}
.hat-teacher-logout {
	background: transparent;
	border: 1px solid var(--hat-border);
	color: var(--hat-muted);
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 12px;
	cursor: pointer;
}

.hat-status {
	min-height: 1em;
	font-size: 12px;
	color: var(--hat-muted);
	text-align: center;
	margin: 4px 0 0;
}
@keyframes hat-status-pop {
	0%   { opacity: 0; transform: translateY(-3px); }
	100% { opacity: 1; transform: translateY(0); }
}
.hat-status.is-updated {
	animation: hat-status-pop 220ms ease;
}

/* ---------- Directory ---------- */
/* A light, modest glow behind the card grid — kept subtle (learned from the
   tracker page: too strong and it just looks like too much gold) so the
   cards' backdrop-blur has some color to reveal without dominating the page. */
.hat-directory {
	max-width: 640px;
	background: radial-gradient(ellipse 420px 320px at 50% 20%, rgba(188, 152, 104, 0.07), transparent 75%);
}
.hat-directory-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
/* .hat prefix bumps specificity above typical theme rules like
   input[type="search"] { ... }, which otherwise win on font-size
   and bloat the input (and, via flex stretch above, the button beside it). */
.hat .hat-directory-search-input {
	appearance: none;
	-webkit-appearance: none;
	flex: 1 1 120px;
	min-width: 0;
	background: var(--hat-card);
	border: 1px solid var(--hat-border);
	border-radius: 10px;
	color: var(--hat-text);
	padding: 8px 14px;
	font-size: 14px;
	line-height: 1.4;
}
/* Chrome/Safari draw a native cancel ("x") button inside [type="search"]
   with its own box metrics — drop it since we don't lay out for it. */
.hat .hat-directory-search-input::-webkit-search-cancel-button {
	display: none;
}
.hat .hat-manage-toggle {
	flex: none;
	background: var(--hat-accent-bg);
	border: 1px solid var(--hat-accent);
	color: var(--hat-accent);
	border-radius: 999px;
	padding: 8px 18px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
}
.hat-manage-panel {
	padding: 2px 0 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--hat-border);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.hat-manage-panel[hidden] {
	display: none;
}
.hat-add-student-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hat-add-student-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.hat-add-student-row[hidden] {
	display: none;
}
.hat-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 140px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hat-muted);
}
.hat-field input[type="text"],
.hat-field select {
	background: var(--hat-bg);
	border: 1px solid var(--hat-border);
	border-radius: 8px;
	color: var(--hat-text);
	padding: 9px 12px;
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}
.hat-add-photo-label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hat-muted);
	width: 100%;
}
.hat-add-photo-label input[type="file"] {
	background: var(--hat-bg);
	border: 1px solid var(--hat-border);
	border-radius: 8px;
	padding: 8px 10px;
	color: var(--hat-muted);
	font-size: 13px;
	text-transform: none;
	letter-spacing: normal;
}
.hat-add-photo-label input[type="file"]::file-selector-button {
	background: var(--hat-card-alt);
	color: var(--hat-text);
	border: 1px solid var(--hat-border);
	border-radius: 999px;
	padding: 6px 14px;
	margin-right: 10px;
	font-size: 12.5px;
	font-family: inherit;
	cursor: pointer;
}
.hat-add-photo-label input[type="file"]::file-selector-button:hover {
	background: var(--hat-border);
}
.hat-add-student-actions {
	display: flex;
	gap: 10px;
}
.hat-add-submit {
	background: var(--hat-accent);
	color: var(--hat-accent-ink);
	border-radius: 999px;
	padding: 10px 22px;
	font-weight: 700;
}
.hat-add-cancel {
	background: transparent;
	border: 1px solid var(--hat-border);
	color: var(--hat-muted);
	border-radius: 999px;
	padding: 10px 18px;
}
.hat-add-error {
	color: var(--hat-red);
	font-size: 13px;
	margin: 0;
}
.hat-directory-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
/* Glass treatment, same recipe as the card shell and table panel: a light
   translucent tint (not dark-on-dark), backdrop blur+saturate, and edge-lit
   inset highlights on all four sides instead of one directional gradient. */
.hat-directory-card {
	position: relative;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 14px;
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	box-shadow:
		0 10px 24px -14px rgba(0, 0, 0, 0.7),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		inset 0 -1px 0 rgba(255, 255, 255, 0.08),
		inset 1px 0 0 rgba(255, 255, 255, 0.08),
		inset -1px 0 0 rgba(255, 255, 255, 0.08);
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Same lift on tap (:active) as on :hover below — touch has no hover state,
   so a brief lift-on-press is its equivalent "this card responded" feedback. */
.hat-directory-card:active {
	transform: translateY(-3px) scale(0.98);
	border-color: var(--hat-accent);
	box-shadow:
		0 16px 30px -14px rgba(0, 0, 0, 0.8),
		0 0 30px -8px rgba(188, 152, 104, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		inset 0 -1px 0 rgba(255, 255, 255, 0.08),
		inset 1px 0 0 rgba(255, 255, 255, 0.08),
		inset -1px 0 0 rgba(255, 255, 255, 0.08);
}
@media (hover: hover) {
	.hat-directory-card:hover {
		transform: translateY(-3px);
		border-color: var(--hat-accent);
		box-shadow:
			0 16px 30px -14px rgba(0, 0, 0, 0.8),
			0 0 30px -8px rgba(188, 152, 104, 0.4),
			inset 0 1px 0 rgba(255, 255, 255, 0.25),
			inset 0 -1px 0 rgba(255, 255, 255, 0.08),
			inset 1px 0 0 rgba(255, 255, 255, 0.08),
			inset -1px 0 0 rgba(255, 255, 255, 0.08);
	}
}
.hat-directory-card-link {
	padding: 16px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--hat-text);
}
.hat-card-remove, .hat-card-edit {
	position: absolute;
	top: 6px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--hat-border);
	background: var(--hat-card-alt);
	color: var(--hat-muted);
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.hat-card-remove[hidden], .hat-card-edit[hidden] {
	display: none;
}
.hat-card-remove { right: 6px; }
.hat-card-edit { left: 6px; }
.hat-card-remove:hover { color: var(--hat-red); border-color: var(--hat-red); }
.hat-card-edit:hover { color: var(--hat-accent); border-color: var(--hat-accent); }
.hat-directory-card .hat-avatar {
	width: 56px;
	height: 56px;
}
.hat-directory-card .hat-avatar-fallback {
	font-size: 20px;
}
.hat-directory-name {
	font-weight: 600;
	text-align: center;
	font-size: 14px;
}
.hat-directory-empty {
	color: var(--hat-muted);
	text-align: center;
}
.hat-directory-empty a {
	color: var(--hat-accent);
}

/* ---------- Combined classes+students page (tabs) ---------- */
.hat-students-page {
	max-width: 640px;
	position: relative;
}
.hat-class-tabs-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}
.hat-class-tabs {
	display: flex;
	justify-content: center;
	justify-content: safe center;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	flex: 1;
	min-width: 0;
}
.hat-class-tab {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
	border: 1px solid var(--hat-border);
	border-radius: 999px;
	padding: 3px;
	/* Same raised-button treatment as the Hifz/Attendance/Teacher tabs. */
	background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%), var(--hat-card-alt);
	box-shadow: 0 2px 5px -1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hat-class-tab.is-active {
	background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%), var(--hat-accent-bg);
	border-color: var(--hat-accent);
	box-shadow: 0 4px 12px -3px rgba(188, 152, 104, 0.55), inset 0 1px 0 rgba(255,255,255,0.12);
}
.hat-class-tab-btn {
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--hat-muted);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.hat-class-tab.is-active .hat-class-tab-btn {
	color: var(--hat-accent);
}
.hat-tab-edit, .hat-tab-remove, .hat-tab-move {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: var(--hat-muted);
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hat-tab-edit[hidden], .hat-tab-remove[hidden], .hat-tab-move[hidden] {
	display: none;
}
.hat-tab-remove:hover { color: var(--hat-red); }
.hat-tab-edit:hover, .hat-tab-move:hover { color: var(--hat-accent); }
.hat-class-panel {
	max-width: none;
}

/* ---------- Manage Classes form ---------- */
.hat-add-class-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hat-add-class-form .hat-field {
	width: 100%;
}

/* ---------- Mobile: compact the student page so it fits without scrolling ---------- */
@media (max-width: 699px) {
	.hat-card {
		padding: 14px 12px 10px;
	}
	.hat-header {
		margin-bottom: 8px;
	}
	.hat-header .hat-avatar {
		width: 96px;
		height: 96px;
	}
	.hat-header .hat-avatar-fallback {
		font-size: 30px;
	}
	.hat-header .hat-avatar-edit {
		width: 30px;
		height: 30px;
		font-size: 13px;
	}
	.hat-student-name {
		font-size: 16px;
		margin-top: 2px;
	}
	.hat-month-nav {
		gap: 10px;
		margin: 2px 0 10px;
	}
	.hat-month-btn {
		width: 26px;
		height: 26px;
		font-size: 13px;
	}
	.hat-month-label {
		min-width: 100px;
		font-size: 13px;
	}
	.hat-tabs {
		gap: 6px;
		margin-bottom: 10px;
	}
	.hat-tab {
		padding: 7px 6px;
		font-size: 12px;
	}
	.hat-table {
		min-width: 0;
		font-size: 12.5px;
	}
	.hat-table thead th {
		padding: 5px 4px;
		font-size: 14px;
	}
	.hat-table tbody td {
		padding: 5px 4px;
	}
	.hat-day-num {
		margin-right: 3px;
	}
	.hat-day-name {
		font-size: 10.5px;
	}
	.hat-value {
		min-width: 26px;
		min-height: 22px;
		padding: 2px 5px;
	}
	.hat-attendance-pill {
		padding: 3px 8px;
		font-size: 11px;
	}
	.hat-checkin-btn {
		padding: 5px 10px;
		font-size: 11px;
	}
	.hat-attendance-note-row {
		margin: -4px 0 6px;
	}
	.hat-teacher-toolbar {
		margin-bottom: 6px;
	}
	.hat-status {
		margin-top: 4px;
	}

	/* ---- Students & Classes page: tabs get their own row, then the two
	   management buttons share the row below, then search, then the grid.
	   The active class panel's "Manage Students" button is moved into the
	   tabs row by JS (see relocateManageStudentsButton), so it's a real
	   flex sibling of "Manage Classes" here — no positioning guesswork. ---- */
	.hat-class-tabs-row {
		flex-wrap: wrap;
	}
	.hat-class-tabs {
		flex: 1 1 100%;
	}
	.hat-class-tabs-row .hat-manage-toggle {
		flex: 1 1 calc(50% - 5px);
	}
}

/* ---------- Desktop ---------- */
@media (min-width: 700px) {
	.hat {
		max-width: 640px;
		font-size: 16px;
	}
	.hat-card {
		padding: 28px 32px 32px;
	}
	.hat-header {
		flex-direction: row;
		justify-content: center;
	}
	.hat-student-name {
		font-size: 22px;
	}
	.hat-tabs {
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
	}
	.hat-directory {
		max-width: 900px;
	}
	.hat-directory-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.hat-students-page {
		max-width: 900px;
	}
	.hat-class-tabs {
		justify-content: flex-start;
	}
	.hat .hat-directory-search-input {
		max-width: 420px;
	}
}