/* Star Project Class Register — self-contained, mobile first. */

.spcr-register {
	--spcr-fg: #1d2327;
	--spcr-muted: #50575e;
	--spcr-line: #d5d8dc;
	--spcr-bg: #fff;
	--spcr-ok: #0a7b34;
	--spcr-warn: #8a4b00;
	--spcr-alert: #a32020;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--spcr-fg);
	max-width: 46rem;
	margin: 0 auto;
}

.spcr-register *,
.spcr-register *::before,
.spcr-register *::after { box-sizing: border-box; }

.spcr-title { font-size: 1.35rem; margin: .4rem 0 .6rem; }
.spcr-gate { padding: 1rem; }

/* Sticky header keeps the class, count and filter in view while scrolling. */
.spcr-sticky {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--spcr-bg);
	padding: .5rem 0 .6rem;
	border-bottom: 2px solid var(--spcr-line);
}

.spcr-headrow { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.spcr-back { text-decoration: none; font-weight: 600; }
.spcr-counter { font-size: 1.05rem; }

.spcr-datebar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .4rem 0; }
.spcr-datebar label { font-weight: 600; }
.spcr-datebar input[type="date"] { padding: .5rem; font-size: 1rem; border: 1px solid var(--spcr-line); border-radius: .35rem; }

.spcr-filter {
	width: 100%;
	padding: .7rem .6rem;
	font-size: 1rem;
	border: 1px solid var(--spcr-line);
	border-radius: .35rem;
	margin-top: .3rem;
}

.spcr-class-list { list-style: none; margin: 0; padding: 0; }
.spcr-class-list li { margin: 0 0 .5rem; }

.spcr-class-link {
	display: block;
	padding: 1.1rem .9rem;
	border: 1px solid var(--spcr-line);
	border-radius: .5rem;
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--spcr-fg);
	background: #fafafa;
}

.spcr-children { list-style: none; margin: .6rem 0 0; padding: 0; }

.spcr-child {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	min-height: 64px;
	padding: .7rem .6rem;
	border: 1px solid var(--spcr-line);
	border-left: 6px solid var(--spcr-line);
	border-radius: .45rem;
	margin-bottom: .5rem;
	background: var(--spcr-bg);
}

/* State is carried by the border AND a text label, never by colour alone —
   a sunlit hall and colour-blind teachers both defeat colour on its own. */
.spcr-status-in { border-left-color: var(--spcr-ok); background: #f2fbf5; }
.spcr-status-out { border-left-color: #2b5fb8; background: #f3f7fd; }
.spcr-status-absent { border-left-color: var(--spcr-alert); background: #fdf4f4; }

.spcr-child-main { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.spcr-name { font-size: 1.15rem; font-weight: 700; }
.spcr-chips { display: flex; flex-wrap: wrap; gap: .3rem; }

.spcr-chip {
	display: inline-block;
	padding: .12rem .4rem;
	font-size: .8rem;
	font-weight: 600;
	border-radius: .25rem;
	border: 1px solid var(--spcr-line);
	background: #f2f2f2;
	color: var(--spcr-muted);
}

.spcr-chip-ok { border-color: var(--spcr-ok); color: var(--spcr-ok); background: #eefaf1; }
.spcr-chip-warn { border-color: var(--spcr-warn); color: var(--spcr-warn); background: #fdf6ec; }
.spcr-chip-info { border-color: var(--spcr-muted); }

/* Additional needs are always visible. Never hide an allergy behind a tap. */
.spcr-needs {
	font-size: .9rem;
	font-weight: 600;
	color: var(--spcr-alert);
	background: #fdf4f4;
	border-left: 3px solid var(--spcr-alert);
	padding: .2rem .4rem;
	overflow-wrap: anywhere;
}

.spcr-needs-fp { color: var(--spcr-warn); border-left-color: var(--spcr-warn); background: #fdf6ec; }
.spcr-times { font-size: .9rem; color: var(--spcr-muted); }

.spcr-actions { display: flex; gap: .35rem; flex: 0 0 auto; flex-wrap: wrap; }

.spcr-btn {
	min-height: 44px;
	min-width: 56px;
	padding: .55rem .7rem;
	font-size: 1rem;
	font-weight: 700;
	border: 1px solid var(--spcr-line);
	border-radius: .4rem;
	background: #f6f7f7;
	color: var(--spcr-fg);
	cursor: pointer;
}

.spcr-btn:disabled { opacity: .5; cursor: progress; }
.spcr-btn-in { border-color: var(--spcr-ok); color: var(--spcr-ok); }
.spcr-btn-out { border-color: #2b5fb8; color: #2b5fb8; }
.spcr-btn-absent { border-color: var(--spcr-alert); color: var(--spcr-alert); }
.spcr-btn-undo { font-weight: 500; font-size: .85rem; min-width: 44px; }
.spcr-btn-secondary { min-height: 38px; }

.spcr-status-in .spcr-btn-in,
.spcr-status-out .spcr-btn-out,
.spcr-status-absent .spcr-btn-absent { outline: 3px solid currentColor; outline-offset: -3px; }

.spcr-warning {
	padding: .6rem .7rem;
	border-left: 4px solid var(--spcr-warn);
	background: #fdf6ec;
	font-weight: 600;
}

.spcr-note {
	padding: .6rem .7rem;
	border-left: 4px solid #2b5fb8;
	background: #eff4fd;
	font-weight: 600;
}

.spcr-note[data-spcr-state="error"] { border-left-color: var(--spcr-alert); background: #fdf4f4; }
.spcr-empty { padding: 1rem; color: var(--spcr-muted); }
.spcr-footnote { margin-top: 1rem; font-size: .85rem; color: var(--spcr-muted); }
.spcr-hidden { display: none !important; }

@media (min-width: 700px) {
	.spcr-child { flex-wrap: nowrap; }
}

/* ---------------------------------------------------------------------------
   Admin screens.

   Sits on top of wp-admin's own .wrap / .widefat styling rather than replacing
   it, so these pages read as part of Project Management. The .list-group and
   .form-control class names mirror the existing Enrolments screen, which
   carries them over from Bootstrap; Bootstrap is not loaded in wp-admin, so
   they are given native-looking styles here.
   --------------------------------------------------------------------------- */

.spcr-admin {
	--spcr-a-line: #c3c4c7;
	--spcr-a-muted: #646970;
	--spcr-a-ok: #0a7b34;
	--spcr-a-alert: #b32d2e;
	--spcr-a-warn: #8a4b00;
}

.spcr-admin h3 { font-size: 1.3em; margin: 1em 0 .6em; }

.spcr-admin .spcr-filters {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1rem;
	padding: .9rem 1rem;
	margin: 0 0 1rem;
	background: #fff;
	border: 1px solid var(--spcr-a-line);
	border-left: 4px solid #2271b1;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

.spcr-admin .spcr-filters .list-group { display: flex; flex-direction: column; gap: .25rem; }
.spcr-admin .spcr-filters label { font-weight: 600; font-size: .92em; }

.spcr-admin .form-control {
	min-width: 15rem;
	max-width: 100%;
	padding: 0 .5rem;
	min-height: 30px;
	line-height: 2;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	background: #fff;
	color: #2c3338;
}

.spcr-admin .form-control:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: 2px solid transparent;
}

.spcr-admin .spcr-filter-actions { margin: 0; display: flex; gap: .5rem; align-items: center; }
.spcr-admin .spcr-count { font-size: 1.02em; margin: 0 0 .8rem; }
.spcr-admin .spcr-explainer { max-width: 60rem; margin-top: 1rem; }

.spcr-admin .spcr-note {
	padding: .6rem .8rem;
	margin: 0 0 .8rem;
	background: #f0f6fc;
	border-left: 4px solid #2271b1;
	font-weight: 600;
}

.spcr-admin .spcr-note[data-spcr-state="error"] { background: #fcf0f1; border-left-color: var(--spcr-a-alert); }

.spcr-admin .spcr-table { margin-top: .2rem; }
.spcr-admin .spcr-table th { font-weight: 600; }
.spcr-admin .spcr-table td { vertical-align: middle; }

/* Row state. Applied to the cells so it wins over .striped's row background,
   and paired with a left accent so state is never carried by colour alone. */
.spcr-admin .spcr-table tbody tr.spcr-status-in td { background: #f0faf3; }
.spcr-admin .spcr-table tbody tr.spcr-status-out td { background: #f2f6fc; }
.spcr-admin .spcr-table tbody tr.spcr-status-absent td { background: #fcf2f2; }

.spcr-admin .spcr-table tbody tr.spcr-status-in td:first-child { box-shadow: inset 4px 0 0 var(--spcr-a-ok); }
.spcr-admin .spcr-table tbody tr.spcr-status-out td:first-child { box-shadow: inset 4px 0 0 #2271b1; }
.spcr-admin .spcr-table tbody tr.spcr-status-absent td:first-child { box-shadow: inset 4px 0 0 var(--spcr-a-alert); }

/* Subscription on hold or ending — the Enrolments screen flags these red too. */
.spcr-admin .spcr-table tbody tr.spcr-row-flag td:nth-child(8) { color: var(--spcr-a-alert); font-weight: 600; }

.spcr-admin .spcr-cell-needs { max-width: 22rem; }
.spcr-admin .spcr-needs-flag { color: var(--spcr-a-alert); font-weight: 700; }
.spcr-admin .spcr-sub { font-size: .85em; color: var(--spcr-a-muted); margin-top: .15rem; }
.spcr-admin .spcr-cell-time { font-variant-numeric: tabular-nums; white-space: nowrap; }

.spcr-admin .spcr-yes { color: var(--spcr-a-ok); font-weight: 600; }
.spcr-admin .spcr-no { color: var(--spcr-a-warn); font-weight: 600; }

.spcr-admin .spcr-cell-actions { white-space: nowrap; }
.spcr-admin .spcr-cell-actions .button { margin: 0 .15rem .15rem 0; }
.spcr-admin .spcr-act-in.button { color: var(--spcr-a-ok); border-color: var(--spcr-a-ok); }
.spcr-admin .spcr-act-out.button { color: #2271b1; border-color: #2271b1; }
.spcr-admin .spcr-act-absent.button { color: var(--spcr-a-alert); border-color: var(--spcr-a-alert); }

/* Mark the button matching the row's current state. */
.spcr-admin tr.spcr-status-in .spcr-act-in.button,
.spcr-admin tr.spcr-status-out .spcr-act-out.button,
.spcr-admin tr.spcr-status-absent .spcr-act-absent.button { box-shadow: inset 0 0 0 2px currentColor; font-weight: 700; }

.spcr-admin .spcr-hidden { display: none !important; }

@media screen and (max-width: 782px) {
	.spcr-admin .spcr-filters { flex-direction: column; align-items: stretch; }
	.spcr-admin .form-control { min-width: 0; width: 100%; }
}