/**
 * Attendance.
 *
 * Built on the theme's own palette - --primary-color #0071A9 and
 * --secondary-color #2EAE49 from style.css - so the dashboard page reads as part
 * of the site rather than as a bolted-on report. The card, pill and table shapes
 * follow the cards used elsewhere on the front end: white on a hairline border,
 * generous radius, colour carried by a tinted pill rather than by heavy fills.
 *
 * Logical properties throughout (inline-start/end, margin-inline, text-align:
 * start) so the Arabic pages need no mirrored counterpart in nvn-rtl.css -
 * direction is inherited from body.rtl and the layout follows on its own.
 */

.nvn-attendance-page {
	--nvn-att-primary: var(--primary-color, #0071a9);
	--nvn-att-green: var(--secondary-color, #2eae49);
	--nvn-att-amber: #d99315;
	--nvn-att-slate: #5b7595;
	--nvn-att-red: #cf4655;
	--nvn-att-line: #e4e8ee;
	--nvn-att-ink: #16324f;
	--nvn-att-muted: #6b7c8f;
	--nvn-att-radius: 12px;

	color: var(--nvn-att-ink);
}

/* This component renders in three places - the Tutor dashboard, a lesson page
   and wp-admin - and only one of them guarantees a border-box reset. Without
   it `width: 100%` plus padding overflows the card it sits in, which is what
   the date filter did. Scoped, so nothing outside the component is touched. */
.nvn-attendance-page,
.nvn-attendance-page *,
.nvn-attendance-page *::before,
.nvn-attendance-page *::after,
.nvn-att-sched,
.nvn-att-sched * {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------- *
 * Page head
 * -------------------------------------------------------------------------- */

.nvn-att-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

/* The title column takes the slack so the export button sits at the far end,
   and wraps under on a narrow screen rather than squeezing the heading. */
.nvn-att-head__text {
	flex: 1 1 18rem;
	min-width: 0;
}

.nvn-att-head__export {
	flex: 0 0 auto;
	text-decoration: none;
}

.nvn-att-head__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--nvn-att-primary);
	line-height: 1.3;
}

.nvn-att-head__sub {
	margin: 0.35rem 0 0;
	font-size: 14px;
	color: var(--nvn-att-muted);
	max-width: 60ch;
}

.nvn-att-subhead {
	margin: 1.75rem 0 0.85rem;
	font-size: 16px;
	font-weight: 600;
	color: var(--nvn-att-ink);
}

.nvn-att-subtle {
	margin: 0 0 1rem;
	color: var(--nvn-att-muted);
	font-size: 14px;
}

/* -------------------------------------------------------------------------- *
 * Filter bar
 * -------------------------------------------------------------------------- */

.nvn-att-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem 1.15rem;
	margin-bottom: 1.5rem;
	background: #f7fafc;
	border: 1px solid var(--nvn-att-line);
	border-radius: var(--nvn-att-radius);
}

.nvn-att-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 13rem;
	min-width: 0;
}

.nvn-att-field__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--nvn-att-muted);
}

.nvn-att-input {
	width: 100%;
	max-width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--nvn-att-line);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
}

.nvn-att-input:focus {
	outline: 0;
	border-color: var(--nvn-att-primary);
	box-shadow: 0 0 0 3px rgba(0, 113, 169, 0.12);
}

.nvn-att-input--sm {
	padding: 0.35rem 0.5rem;
	font-size: 13px;
}

/* -------------------------------------------------------------------------- *
 * Cards
 *
 * Two on the instructor page and a third around the roster: the standing rule,
 * the day, and the people. This replaced a list of collapsible per-lesson
 * panels, which showed the same register once per lesson because a register
 * belongs to a course and a date, not to a lesson.
 * -------------------------------------------------------------------------- */

.nvn-att-card {
	border: 1px solid var(--nvn-att-line);
	border-radius: var(--nvn-att-radius);
	background: #fff;
	padding: 1.15rem;
	margin-bottom: 1rem;
}

/* A register taking attendance right now is the one thing on the page that
   should catch the eye, so it gets the accent rather than a heavier border. */
.nvn-att-card--day.is-live {
	border-color: rgba(46, 174, 73, 0.45);
	box-shadow: 0 0 0 3px rgba(46, 174, 73, 0.08);
}

.nvn-att-card--roster {
	padding: 0.35rem 1.15rem 1rem;
}

.nvn-att-card__title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.35rem;
	font-size: 16px;
	font-weight: 700;
	color: var(--nvn-att-ink);
}

.nvn-att-card__title i {
	color: var(--nvn-att-primary);
	font-size: 15px;
}

.nvn-att-card__note {
	margin: 0 0 1rem;
	font-size: 13px;
	line-height: 1.7;
	color: var(--nvn-att-muted);
	max-width: 62ch;
}

.nvn-att-card__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

/* -------------------------------------------------------------------------- *
 * The day
 * -------------------------------------------------------------------------- */

.nvn-att-day__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Not flex here. This title is a sentence with an isolated date span inside it,
   and as a flex container the two became separate items - so a narrow screen
   broke "Class on" onto its own line instead of wrapping the sentence. */
.nvn-att-day__head .nvn-att-card__title {
	display: block;
	margin-bottom: 0;
}

.nvn-att-day__state {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.nvn-att-count {
	font-size: 13px;
	font-weight: 600;
	color: var(--nvn-att-muted);
	white-space: nowrap;
}

/* The three moments the register runs by, as one strip. Each is a label above
   a time so it reads at a glance instead of as a sentence to parse. */
.nvn-att-window {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0.85rem 0 0;
	border-top: 1px solid var(--nvn-att-line);
}

.nvn-att-window li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.nvn-att-window span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nvn-att-muted);
}

.nvn-att-window strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--nvn-att-ink);
}

.nvn-att-hint {
	margin: 1rem 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--nvn-att-muted);
}

/* -------------------------------------------------------------------------- *
 * Today's register
 *
 * The one thing the page exists for, so it is the one thing that looks like it.
 * Everything else on the page reports; this is the part you act on.
 * -------------------------------------------------------------------------- */

.nvn-att-hero {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	padding: 1.35rem 1.5rem;
	margin-bottom: 1rem;
	border: 1px solid var(--nvn-att-line);
	border-radius: var(--nvn-att-radius);
	background: #fff;
}

/* The state is carried by one edge rather than by tinting the whole card,
   which would fight the status pills inside it. */
.nvn-att-hero.is-open {
	border-color: rgba(46, 174, 73, 0.45);
	box-shadow: inset 4px 0 0 var(--nvn-att-green);
}

.nvn-att-hero.is-waiting {
	box-shadow: inset 4px 0 0 var(--nvn-att-slate);
}

.nvn-att-hero.is-closed {
	box-shadow: inset 4px 0 0 var(--nvn-att-line);
}

body.rtl .nvn-att-hero.is-open,
body.rtl .nvn-att-hero.is-waiting,
body.rtl .nvn-att-hero.is-closed {
	box-shadow: inset -4px 0 0 currentColor;
}

body.rtl .nvn-att-hero.is-open { color: var(--nvn-att-green); }
body.rtl .nvn-att-hero.is-waiting { color: var(--nvn-att-slate); }
body.rtl .nvn-att-hero.is-closed { color: var(--nvn-att-line); }

.nvn-att-hero__main {
	flex: 1 1 22rem;
	min-width: 0;
	color: var(--nvn-att-ink);
}

.nvn-att-hero__eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nvn-att-muted);
}

/* The course, named. Nothing else on the page says which register this is. */
.nvn-att-hero__course {
	margin: 0.15rem 0 0.1rem;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nvn-att-ink);
	overflow-wrap: anywhere;
}

.nvn-att-hero__when {
	margin: 0 0 0.75rem;
	font-size: 13px;
	color: var(--nvn-att-muted);
}

.nvn-att-hero__state {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 0;
}

.nvn-att-hero__said {
	font-size: 13px;
	line-height: 1.6;
	color: var(--nvn-att-muted);
}

.nvn-att-hero__said strong {
	color: var(--nvn-att-ink);
}

.nvn-att-hero__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

/* The count, big enough to read from the back of a classroom. */
.nvn-att-hero__score {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	min-width: 8.5rem;
	padding: 1rem 1.25rem;
	border-radius: 10px;
	background: #f5f9fc;
	text-align: center;
}

.nvn-att-hero__n {
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--nvn-att-primary);
}

.nvn-att-hero__of {
	font-size: 12px;
	font-weight: 600;
	color: var(--nvn-att-muted);
}

.nvn-att-hero.is-open .nvn-att-hero__n {
	color: var(--nvn-att-green);
}

/* -------------------------------------------------------------------------- *
 * Roster head
 * -------------------------------------------------------------------------- */

.nvn-att-rosterhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.9rem;
}

.nvn-att-rosterhead .nvn-att-card__title {
	margin-bottom: 0;
}

.nvn-att-chips {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.nvn-att-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: #f2f6fa;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--nvn-att-muted);
}

.nvn-att-chip b {
	font-size: 13px;
	font-weight: 800;
	color: var(--nvn-att-ink);
}

.nvn-att-chip.is-present b { color: var(--nvn-att-green); }
.nvn-att-chip.is-late b { color: var(--nvn-att-amber); }
.nvn-att-chip.is-excused b { color: var(--nvn-att-slate); }
.nvn-att-chip.is-absent b { color: var(--nvn-att-red); }

.nvn-att-search {
	position: relative;
	margin-bottom: 0.75rem;
	max-width: 22rem;
}

.nvn-att-search i {
	position: absolute;
	inset-inline-start: 0.7rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: var(--nvn-att-muted);
	pointer-events: none;
}

.nvn-att-search .nvn-att-input {
	padding-inline-start: 2rem;
}

.nvn-att-today {
	align-self: flex-end;
}

.nvn-att-field--grow {
	flex: 2 1 20rem;
}

/* -------------------------------------------------------------------------- *
 * The schedule panel, folded
 * -------------------------------------------------------------------------- */

.nvn-att-card--sched > summary {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	cursor: pointer;
	list-style: none;
	margin-bottom: 0;
}

.nvn-att-card--sched > summary::-webkit-details-marker,
.nvn-att-card--sched > summary::marker {
	display: none;
	content: '';
}

.nvn-att-card--sched[open] > summary {
	margin-bottom: 0.35rem;
}

.nvn-att-card__now {
	margin-inline-start: auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--nvn-att-primary);
	text-align: end;
}

/* -------------------------------------------------------------------------- *
 * Export customizer
 * -------------------------------------------------------------------------- */

/* `hidden` has to beat the component's own display rules.
 *
 * The UA stylesheet's `[hidden] { display: none }` loses to any author rule
 * that sets a display, so `.nvn-att-field { display: flex }` kept the custom
 * date row on screen even while the script had marked it hidden. Scoped to this
 * component, and `!important` because the whole point is to win. */
[data-nvn-export-modal] [hidden],
.nvn-attendance-page [hidden],
.nvn-attendance-settings [hidden],
.nvn-att-modal[hidden] {
	display: none !important;
}

.nvn-att-modal {
	position: fixed;
	inset: 0;
	/* Above Tutor's dashboard chrome and wp-admin's sticky admin bar, both of
	   which sit in the 99-100 range. */
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

.nvn-att-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(12, 28, 44, 0.55);
}

.nvn-att-modal__panel {
	position: relative;
	width: 100%;
	max-width: 32rem;
	max-height: calc(100vh - 2.5rem);
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(12, 28, 44, 0.28);
	overflow: hidden;
	color: var(--nvn-att-ink, #16324f);
}

.nvn-att-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--nvn-att-line);
}

.nvn-att-modal__head h4 {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.nvn-att-modal__head i {
	color: var(--nvn-att-primary);
	font-size: 15px;
}

.nvn-att-modal__x {
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var(--nvn-att-muted);
	cursor: pointer;
	padding: 0 0.25rem;
}

.nvn-att-modal__x:hover {
	color: var(--nvn-att-ink);
}

/* Scrolls on its own, so the header and the download button stay put on a
   short screen instead of being pushed out of reach. */
.nvn-att-modal__body {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.1rem 1.25rem;
	overflow-y: auto;
}

/*
 * The dialog owns its own spacing.
 *
 * It renders inside the Tutor dashboard and inside wp-admin, and both give
 * form controls generous bottom margins of their own - which stacked on top of
 * the flex `gap` and pushed roughly 250px of white space between each field,
 * turning a five-field dialog into something taller than the screen. Resetting
 * here rather than hunting each stylesheet down: whatever the page does to a
 * label, a select or a fieldset, the dialog looks the same.
 */
.nvn-att-modal label,
.nvn-att-modal select,
.nvn-att-modal input,
.nvn-att-modal fieldset,
.nvn-att-modal p {
	margin: 0;
}

.nvn-att-modal .nvn-att-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 0 0 auto;
}

/* Tutor sizes dashboard selects with a line-height that assumes its own
   padding; without a height of our own they grow by a third. */
.nvn-att-modal .nvn-att-input {
	min-height: 40px;
	line-height: 1.4;
}

.nvn-att-modal__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.9rem 1.25rem;
	border-top: 1px solid var(--nvn-att-line);
	background: #f8fafc;
}

.nvn-att-modal__note {
	flex: 1 1 10rem;
	min-width: 0;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--nvn-att-muted);
	overflow-wrap: anywhere;
}

.nvn-att-modal__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.nvn-att-modal a.nvn-att-btn {
	text-decoration: none;
}

.nvn-att-field__hint {
	font-size: 11.5px;
	color: var(--nvn-att-muted);
}

.nvn-att-range__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.nvn-att-range__dash {
	color: var(--nvn-att-muted);
}

.nvn-att-formats {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	border: 0;
	margin: 0;
	padding: 0;
}

.nvn-att-format {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--nvn-att-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.nvn-att-format.is-on {
	border-color: var(--nvn-att-primary);
	background: rgba(0, 113, 169, 0.05);
}

.nvn-att-format input {
	accent-color: var(--nvn-att-primary);
	margin: 0;
}

.nvn-att-format i {
	font-size: 16px;
	color: var(--nvn-att-primary);
	width: 1.1rem;
	text-align: center;
}

.nvn-att-format span {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.nvn-att-format strong {
	font-size: 13.5px;
	font-weight: 700;
}

.nvn-att-format em {
	font-size: 11.5px;
	font-style: normal;
	color: var(--nvn-att-muted);
}

/* The page behind a dialog must not scroll with it. */
body.nvn-att-modal-open {
	overflow: hidden;
}

/* The heading row on the admin screen that carries the export button. */
.nvn-att-h2row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.nvn-att-h2row h2 {
	margin: 0;
}

/* `Export` in a table row is a button, because it opens a dialog rather than
   going somewhere - but it should read as the link it replaced. */
button.nvn-att-link {
	border: 0;
	background: none;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
}

@media (max-width: 600px) {
	.nvn-att-hero__score {
		width: 100%;
	}

	.nvn-att-modal {
		padding: 0;
		align-items: flex-end;
	}

	.nvn-att-modal__panel {
		max-width: none;
		max-height: 92vh;
		border-radius: 14px 14px 0 0;
	}
}

/* -------------------------------------------------------------------------- *
 * Course table
 *
 * One table, two homes: the wp-admin screen and the instructor dashboard.
 * Compact on purpose - it is a list you scan for the one course you want, not
 * a form you read, so the row is a line of text and the schedule editor stays
 * folded until asked for.
 * -------------------------------------------------------------------------- */

.nvn-att-ctable {
	width: 100%;
	/* Below this the course title is squeezed into a four-line stack. The
	   wrapper scrolls horizontally, so a narrow screen slides the table
	   sideways instead of crushing its first column. */
	min-width: 46rem;
	border-collapse: collapse;
	background: #fff;
	font-size: 13px;
}

.nvn-att-ctable th,
.nvn-att-ctable td {
	padding: 0.55rem 0.7rem;
	text-align: start;
	vertical-align: middle;
	border-bottom: 1px solid var(--nvn-att-line);
}

/* Not sticky: the wrapper is an `overflow-x` container, so a sticky header
   would stick to a box that never scrolls vertically and do nothing but
   introduce a stacking context. */
.nvn-att-ctable thead th {
	background: #f7fafc;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nvn-att-muted);
	white-space: nowrap;
}

.nvn-att-ctable tbody tr:hover {
	background: #f9fbfd;
}

/* A row whose editor is open gets more room, and loses the hover tint so the
   open panel does not read as hovered the whole time it is open. */
.nvn-att-ctable tbody tr:has(.nvn-att-sched-fold[open]) {
	background: #f7fafc;
}

.nvn-att-ctable__on {
	width: 2.5rem;
	text-align: center;
}

/* A native checkbox, painted by the browser.
 *
 * wp-admin gives every checkbox `appearance: none` and draws its own tick from
 * a `::before` whose colour comes from rules scoped to `.wp-core-ui` - so the
 * control only looks checked when that exact combination of core stylesheets
 * and body classes is present, and `accent-color` is ignored entirely. Asking
 * for the native control instead makes this one checkbox look and behave the
 * same in wp-admin and on the front end, and depend on nothing.
 */
.nvn-att-ctable__on input[type='checkbox'] {
	appearance: auto;
	-webkit-appearance: checkbox;
	width: 1rem;
	height: 1rem;
	min-width: 1rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	accent-color: var(--nvn-att-primary);
	cursor: pointer;
}

.nvn-att-ctable__on input[type='checkbox']::before {
	content: none;
}

/* The same treatment for the roster-rule boxes and the auto switch, which sit
   on both screens. Only the tinted border said they were ticked, and a border
   is not a checkbox. */
.nvn-attendance-status input[type='checkbox'],
.nvn-att-sched__auto input[type='checkbox'] {
	appearance: auto;
	-webkit-appearance: checkbox;
	width: 1rem;
	height: 1rem;
	min-width: 1rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	accent-color: var(--nvn-att-primary);
	cursor: pointer;
}

.nvn-attendance-status input[type='checkbox']::before,
.nvn-att-sched__auto input[type='checkbox']::before {
	content: none;
}

.nvn-att-ctable__num {
	width: 5.5rem;
	white-space: nowrap;
}

.nvn-att-ctable__sched {
	width: 22rem;
}

.nvn-att-ctable__reg {
	width: 11rem;
	white-space: nowrap;
}

.nvn-att-ctable__title {
	font-weight: 600;
	color: var(--nvn-att-ink);
	text-decoration: none;
}

a.nvn-att-ctable__title:hover {
	color: var(--nvn-att-primary);
	text-decoration: underline;
}

.nvn-att-ctable__id {
	margin-inline-start: 0.4rem;
	font-size: 11px;
	color: #9aa8b6;
}

.nvn-att-link {
	display: inline-block;
	margin-inline-start: 0.5rem;
	font-size: 12px;
	font-weight: 600;
	color: var(--nvn-att-primary);
	text-decoration: none;
	white-space: nowrap;
}

.nvn-att-link:hover {
	text-decoration: underline;
}

/* Per-row save, on the dashboard where there is no whole-table Save button. */
.nvn-att-sched-save {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.6rem;
}

/* Only while the editor is open: a Save button under every folded row would be
   a column of buttons for schedules nobody is editing. */
.nvn-att-sched-fold:not([open]) + .nvn-att-sched-save {
	display: none;
}

/* -------------------------------------------------------------------------- *
 * Schedule editor
 *
 * The same markup renders here and on the wp-admin screen, so everything is
 * scoped to the component rather than to either page.
 * -------------------------------------------------------------------------- */

.nvn-att-sched {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

/* The folded variant, used in the admin course list. */
/* The edit affordance sits next to the summary it opens, not pushed to the far
   edge of the column - out there it read as belonging to the next column. */
.nvn-att-sched-fold > summary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.15rem 0.6rem;
	padding: 0.3rem 0;
	cursor: pointer;
	list-style: none;
}

.nvn-att-sched-fold > summary::-webkit-details-marker,
.nvn-att-sched-fold > summary::marker {
	display: none;
	content: '';
}

.nvn-att-sched-fold__now {
	font-size: 13px;
	font-weight: 600;
	color: var(--nvn-att-muted);
}

/* Bolder when the schedule is actually driving the register, so the list
   distinguishes "set up" from "typed in but still manual" at a glance. */
.nvn-att-sched-fold__now.is-on {
	color: var(--nvn-att-primary);
}

.nvn-att-sched-fold__edit {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--nvn-att-primary);
	text-decoration: underline;
}

.nvn-att-sched-fold[open] > summary {
	margin-bottom: 0.6rem;
}

.nvn-att-sched-fold[open] .nvn-att-sched-fold__edit {
	opacity: 0.5;
}

.nvn-att-sched__days {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* A day is a chip, not a checkbox in a row of seven labels: the box itself is
   hidden rather than removed, so the control is still focusable and still
   reached by the keyboard. */
.nvn-att-day {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.25rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--nvn-att-line);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--nvn-att-muted);
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nvn-att-day input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	inset: 0;
	cursor: pointer;
}

.nvn-att-day:hover {
	border-color: var(--nvn-att-primary);
	color: var(--nvn-att-primary);
}

/* `is-on` is written by the script as the box is toggled; `:has()` covers the
   first paint and any browser the script has not reached. */
.nvn-att-day.is-on,
.nvn-att-day:has(input:checked) {
	background: var(--nvn-att-primary);
	border-color: var(--nvn-att-primary);
	color: #fff;
}

.nvn-att-day:has(input:focus-visible) {
	outline: 2px solid var(--nvn-att-primary);
	outline-offset: 2px;
}

.nvn-att-sched__times {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
}

.nvn-att-sched__times label {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nvn-att-muted);
}

.nvn-att-sched__times input {
	min-height: 38px;
	padding: 0 0.6rem;
	border: 1px solid var(--nvn-att-line);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	color: var(--nvn-att-ink);
	text-transform: none;
	letter-spacing: normal;
}

.nvn-att-sched__times input:focus {
	outline: none;
	border-color: var(--nvn-att-primary);
	box-shadow: 0 0 0 3px rgba(0, 113, 169, 0.12);
}

/* A number field is three digits at most; a time field needs room for the
   browser's own AM/PM control, which is why the two are sized apart. */
.nvn-att-sched__times input[type='number'] {
	width: 6rem;
}

.nvn-att-sched__times input[type='time'] {
	width: 9.5rem;
}

.nvn-att-sched__auto {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 13px;
	font-weight: 600;
	color: var(--nvn-att-ink);
	cursor: pointer;
}



/* -------------------------------------------------------------------------- *
 * Buttons
 * -------------------------------------------------------------------------- */

/* The dashboard button. This selector used to have no block of its own - it
   was left dangling in front of the lesson-page comment below, so it merged
   into `.nvn-attendance-box` and every button on the instructor page rendered
   as a bare browser button, with `--ghost` setting a border-color on something
   that had no border. */
.nvn-att-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.55rem 1.15rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--nvn-att-primary, #0071a9);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* ------------------------------------------------------------------ *
 * Lesson page
 *
 * The tokens are declared here, on the component, as well as on the
 * dashboard page. They used to live only on `.nvn-attendance-page` and
 * `.nvn-attendance-settings`, and the lesson button belongs to neither - so
 * `background: var(--nvn-att-green)` resolved to nothing, the declaration was
 * dropped as invalid, and the button rendered as bare white text on Tutor's
 * blue bar. It looked unstyled because it was.
 * ------------------------------------------------------------------ */

.nvn-attendance-box {
	--nvn-att-green: var(--secondary-color, #2eae49);
	--nvn-att-amber: #d99315;
	--nvn-att-slate: #5b7595;
	--nvn-att-red: #cf4655;

	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.nvn-attendance-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.55rem 1.15rem;
	border: 0;
	border-radius: 999px;
	background: var(--nvn-att-green, #2eae49);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
	/* Loud on purpose: it sits in a bar of quiet text links and is the one
	   thing on the page the student is here to press. */
	box-shadow: 0 0 0 4px rgba(46, 174, 73, .22);
	animation: nvn-att-pulse 2.4s ease-in-out infinite;
	line-height: 1.4;
	cursor: pointer;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.nvn-att-btn:hover:not(:disabled),
.nvn-attendance-btn:hover:not(:disabled) {
	opacity: 0.88;
	color: #fff;
}

/* The outline variants are white-on-colour inverted, so the shared hover above
   would paint their label white on a white background - invisible. */
.nvn-att-btn--ghost:hover:not(:disabled),
.nvn-att-btn--quiet:hover:not(:disabled) {
	opacity: 1;
}

.nvn-att-btn:disabled,
.nvn-attendance-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Smaller, for a table row or a toolbar above one. */
.nvn-att-btn--sm {
	padding: 0.35rem 0.8rem;
	font-size: 12.5px;
}

/* A secondary action that should not compete with the primary one beside it. */
.nvn-att-btn--quiet {
	background: #fff;
	border-color: var(--nvn-att-line);
	color: var(--nvn-att-ink);
}

.nvn-att-btn--quiet:hover:not(:disabled) {
	border-color: var(--nvn-att-primary);
	color: var(--nvn-att-primary);
	opacity: 1;
}

/* Closing is the destructive half of the pair, so it reads as an outline. */
.nvn-att-btn--ghost {
	background: #fff;
	color: var(--nvn-att-red, #cf4655);
	border-color: rgba(207, 70, 85, 0.4);
}

.nvn-att-btn--ghost:hover:not(:disabled) {
	background: #fdf4f5;
	color: var(--nvn-att-red);
	opacity: 1;
}

.nvn-att-feedback,
.nvn-attendance-feedback {
	font-size: 13px;
	color: var(--nvn-att-muted);
}

/* -------------------------------------------------------------------------- *
 * Status pills
 * -------------------------------------------------------------------------- */

.nvn-att-pill {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	white-space: nowrap;
	background: #eef2f6;
	color: var(--nvn-att-slate);
}

.nvn-att-pill.is-present,
.nvn-att-pill.is-open {
	background: rgba(46, 174, 73, 0.12);
	color: #1d8c3a;
}

.nvn-att-pill.is-late {
	background: rgba(217, 147, 21, 0.14);
	color: #a8700c;
}

.nvn-att-pill.is-excused {
	background: rgba(91, 117, 149, 0.14);
	color: var(--nvn-att-slate);
}

.nvn-att-pill.is-absent,
.nvn-att-pill.is-closed {
	background: rgba(207, 70, 85, 0.12);
	color: var(--nvn-att-red);
}

/* Scheduled but not yet begun: the same slate as the lesson page's waiting
   state, so "not open yet" looks the same in both places. */
.nvn-att-pill.is-waiting {
	background: rgba(91, 117, 149, 0.12);
	color: var(--nvn-att-slate);
}

.nvn-att-pill.is-none {
	background: #eef2f6;
	color: var(--nvn-att-muted);
}

.nvn-att-source {
	font-size: 11px;
	color: var(--nvn-att-muted);
	margin-inline-start: 0.4rem;
}

/* -------------------------------------------------------------------------- *
 * Tables
 * -------------------------------------------------------------------------- */

.nvn-att-scroll {
	overflow-x: auto;
	max-width: 100%;
	border: 1px solid var(--nvn-att-line);
	border-radius: 10px;
	background: #fff;
}

.nvn-att-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.nvn-att-table th,
.nvn-att-table td {
	padding: 0.7rem 0.9rem;
	text-align: start;
	vertical-align: middle;
	border-bottom: 1px solid var(--nvn-att-line);
}

.nvn-att-table thead th {
	background: #f7fafc;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--nvn-att-muted);
	white-space: nowrap;
}

.nvn-att-table tbody tr:last-child td {
	border-bottom: 0;
}

.nvn-att-table tbody tr:hover {
	background: #fbfdff;
}

.nvn-att-table a {
	color: var(--nvn-att-primary);
	text-decoration: none;
	font-weight: 600;
}

.nvn-att-table a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------- *
 * Tally tiles, empty state, pagination
 * -------------------------------------------------------------------------- */

.nvn-att-tally {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.nvn-att-tally__item {
	flex: 1 1 7.5rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--nvn-att-line);
	border-radius: 10px;
	background: #fff;
	text-align: center;
}

.nvn-att-tally__n {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--nvn-att-ink);
}

.nvn-att-tally__item.is-present .nvn-att-tally__n {
	color: #1d8c3a;
}

.nvn-att-tally__item.is-late .nvn-att-tally__n {
	color: #a8700c;
}

.nvn-att-tally__item.is-excused .nvn-att-tally__n {
	color: var(--nvn-att-slate);
}

.nvn-att-tally__item.is-absent .nvn-att-tally__n {
	color: var(--nvn-att-red);
}

.nvn-att-tally__label {
	display: block;
	margin-top: 0.15rem;
	font-size: 12px;
	color: var(--nvn-att-muted);
}

.nvn-att-empty {
	padding: 2rem 1.25rem;
	border: 1px dashed var(--nvn-att-line);
	border-radius: var(--nvn-att-radius);
	background: #fbfdff;
	color: var(--nvn-att-muted);
	text-align: center;
	font-size: 14px;
}

.nvn-att-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 1rem;
}

/* paginate_links( 'type' => 'list' ) wraps the links in a <ul>, so the flex row
   has to be the list itself - otherwise every link stacks in one column. */
.nvn-att-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nvn-att-pagination ul.page-numbers li {
	margin: 0;
	list-style: none;
}

/* The count and the links on one line, count first, so the list says how much
   of it you are looking at without a heading. */
.nvn-att-pagerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	flex-wrap: wrap;
	margin-top: 0.75rem;
}

.nvn-att-pagerow__count {
	font-size: 12px;
	font-weight: 600;
	color: var(--nvn-att-muted);
}

.nvn-att-pagerow .nvn-att-pagination {
	margin-top: 0;
}

.nvn-att-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border: 1px solid var(--nvn-att-line);
	border-radius: 8px;
	color: var(--nvn-att-ink);
	text-decoration: none;
	font-size: 13px;
}

.nvn-att-pagination .page-numbers.current {
	background: var(--nvn-att-primary);
	border-color: var(--nvn-att-primary);
	color: #fff;
}

.nvn-att-back {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--nvn-att-primary);
	text-decoration: none;
}

.nvn-att-back:hover {
	text-decoration: underline;
}

/* Dates and counts are left-to-right runs even on an Arabic page. */
.nvn-attendance-page .nvn-ltr-run {
	unicode-bidi: plaintext;
}

@media (max-width: 575.98px) {
	.nvn-att-class__head {
		flex-wrap: wrap;
	}

	.nvn-att-class__state {
		width: 100%;
		padding-inline-start: 1.25rem;
	}
}

/* -------------------------------------------------------------------------- *
 * Lesson page button (front end, outside the dashboard)
 * -------------------------------------------------------------------------- */

.nvn-attendance-box {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.nvn-attendance-state {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0.95rem;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	background: rgba(46, 174, 73, 0.12);
	color: #1d8c3a;
}

.nvn-attendance-state.is-late {
	background: rgba(217, 147, 21, 0.14);
	color: #a8700c;
}

.nvn-attendance-state.is-excused {
	background: rgba(91, 117, 149, 0.14);
	color: #5b7595;
}

.nvn-attendance-state.is-absent,
.nvn-attendance-state.is-closed {
	background: rgba(207, 70, 85, 0.12);
	color: #cf4655;
}

.nvn-attendance-error {
	font-size: 13px;
	color: #cf4655;
}

/* -------------------------------------------------------------------------- *
 * Admin settings screen
 * -------------------------------------------------------------------------- */

.nvn-attendance-settings {
	--nvn-att-primary: #0071a9;
	--nvn-att-green: #2eae49;
	--nvn-att-line: #dfe3e8;
	--nvn-att-muted: #6b7c8f;

	/* The schedule editor is the same component as the one on the instructor
	   dashboard and reads the same tokens. wp-admin does not carry the theme's
	   palette, so the ones it needs are spelled out here too - without `--ink`
	   the day chips and time fields inherited the browser default. */
	--nvn-att-ink: #16324f;
	--nvn-att-radius: 12px;

	/* No max-width. The course list has five columns and a folding editor in
	   one of them; boxing it to the left of a wide screen wasted the room the
	   table most needed and squeezed course titles into four-line stacks. */
	margin-inline-end: 20px;
}

.nvn-attendance-settings h2 {
	margin-top: 2rem;
	font-size: 16px;
}

.nvn-attendance-settings .description {
	max-width: 70ch;
}

.nvn-att-panel {
	padding: 1rem 1.15rem;
	margin: 0.75rem 0 0;
	background: #fff;
	border: 1px solid var(--nvn-att-line);
	border-radius: 10px;
}

.nvn-attendance-statuses {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
}

.nvn-attendance-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--nvn-att-line);
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.nvn-attendance-status:hover {
	border-color: var(--nvn-att-primary);
}

.nvn-attendance-status:has(input:checked) {
	border-color: var(--nvn-att-primary);
	background: rgba(0, 113, 169, 0.06);
}

.nvn-attendance-status code {
	background: none;
	padding: 0;
	font-size: 13px;
}

.nvn-attendance-count {
	padding: 0.05rem 0.4rem;
	border-radius: 100px;
	background: #eef2f6;
	color: var(--nvn-att-muted);
	font-size: 11px;
}

.nvn-attendance-course-table {
	margin-top: 0.75rem;
	border-radius: 10px;
	overflow: hidden;
}

.nvn-attendance-course-table td,
.nvn-attendance-course-table th {
	vertical-align: middle;
}

.nvn-attendance-id {
	margin-inline-start: 0.4rem;
	color: #8a95a1;
	font-size: 12px;
}

.nvn-att-roster-count {
	display: inline-block;
	min-width: 2rem;
	padding: 0.1rem 0.5rem;
	border-radius: 100px;
	background: #eef2f6;
	color: var(--nvn-att-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.nvn-att-roster-count.is-zero {
	background: rgba(207, 70, 85, 0.1);
	color: #cf4655;
}

.nvn-attendance-actions {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
	padding: 0.85rem 0;
	background: #f0f0f1;
	border-top: 1px solid var(--nvn-att-line);
}

.nvn-attendance-feedback {
	font-size: 13px;
	color: var(--nvn-att-muted);
}

.nvn-attendance-badge {
	display: inline-block;
	margin-inline-start: 0.4rem;
	padding: 0.1rem 0.5rem;
	border-radius: 100px;
	background: rgba(46, 174, 73, 0.14);
	color: #1d8c3a;
	font-size: 11px;
	font-weight: 600;
}


/* ------------------------------------------------------------------ *
 * Lesson page states
 * ------------------------------------------------------------------ */

@keyframes nvn-att-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(46, 174, 73, .22); }
	50%      { box-shadow: 0 0 0 8px rgba(46, 174, 73, .10); }
}

@media (prefers-reduced-motion: reduce) {
	.nvn-attendance-btn { animation: none; }
}

.nvn-attendance-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.nvn-attendance-state {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

.nvn-attendance-state.is-present { background: rgba(46, 174, 73, .95); }
.nvn-attendance-state.is-late    { background: rgba(217, 147, 21, .95); }
.nvn-attendance-state.is-excused { background: rgba(91, 117, 149, .95); }
.nvn-attendance-state.is-absent  { background: rgba(207, 70, 85, .95); }
.nvn-attendance-state.is-waiting { background: rgba(255, 255, 255, .18); }

.nvn-attendance-at,
.nvn-attendance-tally,
.nvn-attendance-warn {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .82);
	white-space: nowrap;
}

.nvn-attendance-warn { color: #ffd479; font-weight: 600; }

.nvn-attendance-tally {
	/* The standing is context, not a control - it steps back from the rest. */
	opacity: .78;
}

/*
 * The box is rendered inside Tutor's lesson top bar, whose own colour is dark.
 * Where the theme drops it somewhere pale, the text has to flip.
 */
.nvn-attendance-box--light .nvn-attendance-state { background: #eef6fb; color: #16324f; }
.nvn-attendance-box--light .nvn-attendance-at,
.nvn-attendance-box--light .nvn-attendance-tally { color: #5b7595; }