/**
 * CBYOS portal — front-end member/staff door.
 * Scoped to the standalone portal template (.cbyos-portal-body).
 */

.cbyos-portal-body {
	margin: 0;
	min-height: 100vh;
	background: #f6f7f9;
	color: #1d2327;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
}
/* Brand-font weights: light headings, semibold labels, regular body. */
.cbyos-portal__h1 {
	font-weight: 300;
}
.cbyos-card__title,
.cbyos-section__title,
.cbyos-portal__brand-text {
	font-weight: 600;
}

.cbyos-portal {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px 48px;
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* Brand bar */
.cbyos-portal__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 24px 0;
}
.cbyos-portal__brand-mark {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
}
.cbyos-portal__brand-text {
	font-size: 18px;
	font-weight: 600;
}

/* Logged-in top bar */
.cbyos-portal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
}
.cbyos-portal__who {
	display: flex;
	align-items: center;
	gap: 10px;
}
.cbyos-portal__greeting {
	font-weight: 600;
	font-size: 18px;
}
.cbyos-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: #c9e6f7;
	color: #256a97;
	font-size: 12px;
	font-weight: 600;
}
.cbyos-portal__signout {
	color: #256a97;
	text-decoration: none;
	font-weight: 600;
}
.cbyos-portal__signout:hover {
	text-decoration: underline;
}

/* Main */
.cbyos-portal__main {
	flex: 1 0 auto;
	padding-top: 28px;
}
.cbyos-portal__main--narrow {
	max-width: 420px;
	margin: 0 auto;
	width: 100%;
}
.cbyos-portal__h1 {
	font-size: 20px;
	margin: 0 0 20px;
}

/* Cards */
.cbyos-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.cbyos-card {
	display: block;
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 20px;
	/* Gradient border: white fills the padding box, the brand gradient the border box. */
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(160deg, #c9e6f7 0%, #e6dbf8 50%, #c9e6f7 100%) border-box;
}
.cbyos-card--login {
	margin-top: 24px;
}
.cbyos-card--link {
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cbyos-card--link:hover {
	box-shadow: 0 4px 14px rgba(136, 203, 237, .3);
}
.cbyos-card--soon {
	opacity: .7;
}
.cbyos-card__title {
	margin: 0 0 6px;
	font-size: 15px;
}
/* Student names (cards in the students grid) a touch larger. */
.cbyos-cards .cbyos-card__title {
	font-size: 17px;
}
.cbyos-card__lead {
	margin: 0;
	color: #50575e;
}
.cbyos-card__links {
	margin: 16px 0 0;
	font-size: 14px;
}
.cbyos-card__links a {
	color: #6a1b9a;
}

/* Sections */
.cbyos-section {
	margin-top: 32px;
}
.cbyos-section:first-of-type {
	margin-top: 8px;
}
.cbyos-section__title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6e7781;
	margin: 0 0 12px;
}
.cbyos-badge--muted {
	background: #eef0f2;
	color: #6e7781;
	margin-left: 6px;
	vertical-align: middle;
}

/* Lessons list (per student) */
.cbyos-lessons,
.cbyos-subs,
.cbyos-payments {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cbyos-lesson {
	padding: 8px 0;
	border-top: 1px solid #f0f1f3;
}
.cbyos-lesson:first-child {
	border-top: 0;
}
.cbyos-lesson__name {
	display: block;
	font-weight: 600;
}
.cbyos-lesson__slot {
	color: #50575e;
	font-size: 14px;
}
.cbyos-lesson__teacher {
	color: #8c8f94;
	font-size: 14px;
}
.cbyos-lesson__teacher::before {
	content: " · ";
	color: #c3c4c7;
}

/* Lesson rows (staff "today" list: time + body) */
.cbyos-lesson--row {
	display: flex;
	gap: 14px;
	align-items: baseline;
}
.cbyos-lesson__time {
	min-width: 72px;
	font-weight: 600;
	white-space: nowrap;
}
.cbyos-lesson__body {
	flex: 1;
}
.cbyos-lesson__meta {
	display: block;
	color: #8c8f94;
	font-size: 14px;
}

/* Billing */
.cbyos-billing__total {
	margin: 0 0 12px;
	font-size: 18px;
}
.cbyos-sub,
.cbyos-payment {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid #f0f1f3;
}
.cbyos-sub:first-child,
.cbyos-payment:first-child {
	border-top: 0;
}
.cbyos-sub__amt,
.cbyos-payment__amt {
	font-weight: 600;
	white-space: nowrap;
}
.cbyos-payment__date {
	color: #8c8f94;
	font-size: 14px;
	white-space: nowrap;
	min-width: 90px;
}
.cbyos-payment__desc {
	flex: 1;
	color: #50575e;
}
.cbyos-billing__note {
	margin: 14px 0 0;
	color: #8c8f94;
	font-size: 13px;
}

/* Back link */
.cbyos-back {
	margin: 0 0 8px;
	font-size: 14px;
}
.cbyos-back a {
	color: #256a97;
	text-decoration: none;
}
.cbyos-back a:hover {
	text-decoration: underline;
}

/* Forms */
.cbyos-field {
	margin: 0 0 16px;
}
.cbyos-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}
.cbyos-field select,
.cbyos-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
}
.cbyos-btn {
	display: inline-block;
	padding: 11px 20px;
	background: linear-gradient(135deg, #88cbed 0%, #d5bff2 100%);
	color: #21323d;
	border: 0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
.cbyos-btn:hover {
	background: linear-gradient(135deg, #6fbde6 0%, #c6abee 100%);
}

/* =========================================================================
   Absence form v2 — children checklist, mode/date, 24-hour summary
   ========================================================================= */
.cbyos-abs-block {
	margin: 0 0 22px;
}
.cbyos-abs-legend {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 10px;
}
.cbyos-abs-child {
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 8px;
}
.cbyos-abs-child-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	cursor: pointer;
}
.cbyos-abs-lessons {
	margin: 10px 0 2px 26px;
	display: grid;
	gap: 7px;
}
.cbyos-abs-lesson {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #3d4a55;
	cursor: pointer;
}
.cbyos-abs-modes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-bottom: 12px;
}
.cbyos-abs-modes label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	cursor: pointer;
}
.cbyos-abs-single > label,
.cbyos-abs-range label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}
.cbyos-abs-range-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.cbyos-abs-range-row label {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cbyos-portal-body input[type="date"],
.cbyos-portal-body input[type="month"] {
	padding: 9px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	box-sizing: border-box;
}
.cbyos-field input[type="month"] {
	width: 100%;
	max-width: 240px;
}
.cbyos-abs-single input[type="date"] {
	width: 100%;
	max-width: 240px;
}
.cbyos-abs-notice {
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
	margin: 0 0 18px;
}
.cbyos-abs-notice--ok {
	background: #eaf6fd;
	border: 1px solid #a9d9f2;
	color: #1c5b86;
}
.cbyos-abs-notice--warn {
	background: #fff6e6;
	border: 1px solid #f0c987;
	color: #8a5a12;
}
.cbyos-abs-tag {
	display: inline-block;
	align-self: center; /* don't stretch to the (possibly 2-line) row height */
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.cbyos-abs-tag--video_feedback {
	background: #d9ecfb;
	color: #0b4f86;
}
.cbyos-abs-tag--forfeit {
	background: #fbdada;
	color: #9a2c2c;
}
.cbyos-abs-tag--credit_used {
	background: #d9f6e2;
	color: #17663a;
}
.cbyos-abs-tag--ineligible {
	background: #eef0f2;
	color: #6e7781;
}

/* Breathing room between the cards on the Report-an-absence page. */
.cbyos-portal--absence .cbyos-card {
	margin-bottom: 22px;
}

/* Reported-absence row: pill + cancel, right-aligned. */
.cbyos-abs-report__end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	white-space: nowrap;
}
.cbyos-abs-cancel-form {
	margin: 0;
}
.cbyos-abs-cancel {
	background: none;
	border: 0;
	padding: 0;
	color: #9a2c2c;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
	font-family: inherit;
}

/* Alerts */
.cbyos-alert {
	padding: 10px 14px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 14px;
}
.cbyos-alert--error {
	background: #fcebea;
	border: 1px solid #f3b2ad;
	color: #8a1f1a;
}
.cbyos-alert--success {
	background: #e6f5ea;
	border: 1px solid #a3d9b5;
	color: #1c6b3a;
}

/* WordPress login form tidy-up inside our card */
.cbyos-card .login-username,
.cbyos-card .login-password {
	margin-bottom: 14px;
}
.cbyos-card label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 14px;
}
.cbyos-card input[type="text"],
.cbyos-card input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	font-size: 15px;
}
.cbyos-card .login-remember {
	font-weight: 400;
	margin: 4px 0 14px;
}
.cbyos-card .login-remember label {
	display: inline;
	font-weight: 400;
}
.cbyos-card .login-submit input[type="submit"] {
	width: 100%;
	padding: 11px 16px;
	background: #7b1fa2;
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.cbyos-card .login-submit input[type="submit"]:hover {
	background: #6a1b9a;
}

/* =========================================================================
   myCBY login screen — brand pass (scoped to the login page only)
   Mirrors the CBYOS admin login: soft blue→lavender wash, Poppins Light, and
   the sky-blue gradient sign-in button. Other portal pages are untouched.
   ========================================================================= */

/* Same background as the CBYOS admin login, with a very slow diagonal drift
   (bottom-right → top-left) so the two tints breathe like a gentle wave. */
body.cbyos-portal--login {
	background: linear-gradient(160deg, #c9e6f7 0%, #e6dbf8 50%, #c9e6f7 100%);
	background-size: 220% 220%;
	animation: cbyos-login-wave 17s ease-in-out infinite alternate;
	font-weight: 300;
}
@keyframes cbyos-login-wave {
	from { background-position: 100% 100%; } /* bottom-right */
	to   { background-position: 0% 0%; }     /* top-left */
}
@media (prefers-reduced-motion: reduce) {
	body.cbyos-portal--login {
		animation: none;
		background-position: 50% 50%;
	}
}

/* All Poppins, like CBYOS. */
body.cbyos-portal--login,
body.cbyos-portal--login * {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Drop the top-left icon + title entirely on the login page. */
body.cbyos-portal--login .cbyos-portal__brand {
	display: none;
}

/* Temporary placeholder wordmark above the login card. */
.cbyos-portal__login-logo {
	display: block;
	max-width: 260px;
	height: auto;
	margin: 8px auto 20px;
}

body.cbyos-portal--login .cbyos-card__title {
	font-weight: 300;
}

/* Sign-in button: same gradient, colour and font as the CBYOS login button. */
body.cbyos-portal--login .cbyos-card .login-submit input[type="submit"] {
	background: linear-gradient(135deg, #88cbed 0%, #d5bff2 100%);
	border: 1px solid #2f80b4;
	color: #21323d;
	font-weight: 500;
	box-shadow: 0 2px 8px rgba(136, 203, 237, .35);
}
body.cbyos-portal--login .cbyos-card .login-submit input[type="submit"]:hover {
	background: linear-gradient(135deg, #6fbde6 0%, #c6abee 100%);
}

/* Forgot-password link colour. */
body.cbyos-portal--login .cbyos-card__links a {
	color: #97c8e9;
}

/* Subtle "powered by CBYOS" mark below the login block. */
.cbyos-portal__poweredby {
	text-align: center;
	margin-top: 28px;
}
.cbyos-portal__poweredby-label {
	display: block;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: .06em;
	color: #8a94a0;
	margin-bottom: 6px;
}
.cbyos-portal__poweredby-logo {
	display: inline-block;
	width: 84px;
	aspect-ratio: 2337 / 1042;
	/* Recolour the wordmark to the "powered by" grey via a mask. */
	background-color: #8a94a0;
	-webkit-mask: url("brand/wordmark.png") center / contain no-repeat;
	mask: url("brand/wordmark.png") center / contain no-repeat;
}

/* Footer */
.cbyos-portal__foot {
	flex-shrink: 0;
	padding-top: 32px;
	color: #8c8f94;
	font-size: 13px;
	text-align: center;
}