/* Bilal Academy Management — Teacher & Parent portal design (v1.106)

   Everything here is scoped under .bam-ui, which is added only to the Teacher
   Portal, Parent Portal, Teacher Sign-In, the sign-in / password cards and the
   "account not set up" notice — so nothing else on the site (the School
   Office, the calendar, the forms, the theme) is touched.

   The look follows the Employment & Volunteering page already in this plugin:
   a deep-green gradient with gold accents and soft rounded cards. Links use
   the crimson of the school's own menu and footer, so a portal page reads as
   part of the same site rather than a separate app. System fonts, like the
   school's header, so nothing extra is downloaded. */

/* ---------------------------------------------------------------- tokens */
.bam-ui {
	--ui-deep: #14532d;
	--ui-green: #1d7a4c;
	--ui-green-ink: #10502f;
	--ui-soft: #f1f8f3;
	--ui-soft2: #e3f1e8;
	--ui-line: #d9e6dd;
	--ui-line2: #e9f0eb;
	--ui-ink: #1b2a22;
	--ui-muted: #5b6b62;
	--ui-gold: #f2b632;
	--ui-gold-soft: #fff6dc;
	--ui-navy: #203b6a;
	--ui-link: #cc3366;
	--ui-link-h: #a62a55;
	--ui-red: #a3282f;
	--ui-red-soft: #fdecec;
	--ui-blue: #29499b;
	--ui-blue-soft: #e8eefc;
	--ui-r: 14px;
	--ui-shadow: 0 1px 2px rgba(20, 83, 45, .06), 0 8px 24px rgba(20, 83, 45, .07);

	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: 24px 20px 56px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ui-ink);
}
.bam-ui *, .bam-ui *::before, .bam-ui *::after { box-sizing: border-box; }
.bam-ui a { color: var(--ui-link); }
.bam-ui a:hover { color: var(--ui-link-h); }
.bam-ui h2, .bam-ui h3, .bam-ui h4 { line-height: 1.25; }
.bam-ui .bam-note { color: var(--ui-muted); font-size: 13px; }
.bam-ui .bam-lead { color: var(--ui-muted); }
.bam-ui .bam-empty { color: var(--ui-muted); font-style: normal; margin: 6px 0 14px; }

/* A soft page tint so the white cards read as cards. */
body.bam-portal-page { background: #f6faf7; }

/* ------------------------------------------------------- school header */
.bam-ui .bam-hero {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 18px;
	padding: 22px 26px;
	border-radius: 18px;
	color: #fff;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.2'%3E%3Crect x='14' y='14' width='28' height='28'/%3E%3Crect x='14' y='14' width='28' height='28' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(135deg, var(--ui-deep) 0%, var(--ui-green) 100%);
	box-shadow: var(--ui-shadow), inset 0 -4px 0 var(--ui-gold);
}
.bam-ui .bam-hero__badge {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.bam-ui .bam-hero__logo { width: 58px; height: 58px; object-fit: contain; display: block; }
.bam-ui .bam-hero__text { min-width: 0; }
.bam-ui .bam-hero__eyebrow {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #ffe9a8;
}
.bam-ui .bam-hero__title {
	margin: 0 0 4px;
	color: #fff;
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -.01em;
}
.bam-ui .bam-hero__sub { margin: 0; color: #e4f5ea; font-size: 1rem; }
.bam-ui .bam-hero__account { margin-left: auto; flex: 0 0 auto; }

/* the account menu on the green header */
.bam-ui .bam-hero .bam-account-widget { gap: 10px; }
.bam-ui .bam-hero .bam-account-widget__signout {
	padding: 8px 18px;
	border-radius: 999px;
	background: #fff;
	color: var(--ui-deep);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.bam-ui .bam-hero .bam-account-widget__signout:hover { background: var(--ui-gold-soft); color: var(--ui-deep); opacity: 1; }
.bam-ui .bam-hero .bam-account-widget__toggle {
	background-color: var(--ui-gold);
	color: #3b2a00;
	font-weight: 800;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
}
.bam-ui .bam-hero .bam-account-widget__toggle--photo { color: transparent; }
.bam-ui .bam-hero .bam-account-widget__panel {
	top: calc(100% + 12px);
	color: var(--ui-ink);
	border-color: var(--ui-line);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
.bam-ui .bam-hero .bam-account-widget__panel a { color: var(--ui-link); }

/* ------------------------------------------------------------------ tabs */
.bam-ui .bam-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(20, 83, 45, .05);
}
.bam-ui .bam-tab {
	margin: 0;
	padding: 9px 16px;
	border: 0;
	border-radius: 999px;
	color: var(--ui-green-ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, color .15s, box-shadow .15s;
}
.bam-ui .bam-tab:hover { background: var(--ui-soft2); color: var(--ui-deep); }
.bam-ui .bam-tab.is-active { background: var(--ui-deep); color: #fff; box-shadow: 0 2px 8px rgba(20, 83, 45, .3); }
.bam-ui .bam-tab:focus-visible { outline: 3px solid rgba(242, 182, 50, .7); outline-offset: 2px; }

/* ----------------------------------------------- class / date / child pickers */
.bam-ui .bam-class-picker,
.bam-ui .bam-date-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	align-items: flex-end;
	margin: 0 0 16px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-r);
}
.bam-ui .bam-panel .bam-date-picker { background: var(--ui-soft); border-color: var(--ui-line2); }
.bam-ui .bam-class-picker label,
.bam-ui .bam-date-picker label {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ui-muted);
}
.bam-ui .bam-class-picker select { min-width: 220px; }

.bam-ui .bam-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.bam-ui .bam-chip {
	padding: 9px 18px;
	border-radius: 999px;
	border: 1.5px solid var(--ui-line);
	background: #fff;
	color: var(--ui-green-ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}
.bam-ui .bam-chip:hover { background: var(--ui-soft2); border-color: var(--ui-green); color: var(--ui-deep); }
.bam-ui .bam-chip.is-active { background: var(--ui-deep); border-color: var(--ui-deep); color: #fff; }

/* This site's Additional CSS (Appearance -> Customize) can carry an old rule,
   ".bam-chip, .bam-chip * { color: #fff !important }", left from when the
   calendar's event labels used this class. It would turn every chip's text
   white on a white chip. These !important rules are more specific, so the
   chips stay readable whatever a site's own CSS says. */
.bam-ui .bam-chip, .bam-ui .bam-chip * { color: var(--ui-green-ink) !important; }
.bam-ui .bam-chip:hover, .bam-ui .bam-chip:hover * { color: var(--ui-deep) !important; }
.bam-ui .bam-chip.is-active, .bam-ui .bam-chip.is-active * { color: #fff !important; }

/* ---------------------------------------------------------------- panels */
.bam-ui .bam-panel,
.bam-ui .bam-card {
	max-width: none;
	margin: 0 0 18px;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-r);
	box-shadow: var(--ui-shadow);
}
.bam-ui .bam-panel--empty { padding: 44px 24px; text-align: center; }
.bam-ui .bam-panel__title,
.bam-ui .bam-card__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	color: var(--ui-navy);
	font-size: 1.15rem;
	font-weight: 800;
}
.bam-ui .bam-panel__title::before,
.bam-ui .bam-card__title::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 20px;
	border-radius: 3px;
	background: linear-gradient(var(--ui-gold), #e0a21b);
}
.bam-ui .bam-subheading {
	position: relative;
	margin: 28px 0 12px;
	padding: 0 0 0 14px;
	border: 0;
	color: var(--ui-navy);
	font-size: 1.08rem;
	font-weight: 800;
}
.bam-ui .bam-subheading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 5px;
	border-radius: 3px;
	background: linear-gradient(var(--ui-gold), #e0a21b);
}
.bam-ui .bam-panel > .bam-subheading:first-child,
.bam-ui .bam-panel > :first-child.bam-subheading { margin-top: 0; }

/* ----------------------------------------------------------------- tables */
.bam-ui .bam-table {
	width: 100%;
	margin: 8px 0 20px;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--ui-line);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	font-size: 14px;
}
.bam-ui .bam-table th {
	padding: 12px 14px;
	background: var(--ui-soft2);
	border-bottom: 1px solid var(--ui-line);
	color: var(--ui-green-ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-align: left;
}
.bam-ui .bam-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--ui-line2);
	vertical-align: middle;
}
.bam-ui .bam-table tbody tr:last-child td { border-bottom: 0; }
.bam-ui .bam-table tbody tr:nth-child(even) td { background: #fbfdfb; }
.bam-ui .bam-table tbody tr:hover td { background: var(--ui-soft); }
.bam-ui .bam-table th.num, .bam-ui .bam-table td.num { text-align: right; }
.bam-ui .bam-panel > .bam-table:last-child { margin-bottom: 0; }
.bam-ui .bam-cell-val { display: inline; }
.bam-ui .bam-table-scroll { border-radius: 12px; }
.bam-ui .bam-table-scroll .bam-table { margin-bottom: 0; }
.bam-ui .bam-att-name { font-weight: 700; color: var(--ui-ink); }

/* ------------------------------------------------------------------ forms */
.bam-ui label { color: var(--ui-ink); }
.bam-ui input[type="text"], .bam-ui input[type="email"], .bam-ui input[type="tel"],
.bam-ui input[type="url"], .bam-ui input[type="date"], .bam-ui input[type="time"],
.bam-ui input[type="number"], .bam-ui input[type="password"], .bam-ui input[type="search"],
.bam-ui select, .bam-ui textarea {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 13px;
	border: 1.5px solid #c9d8cf;
	border-radius: 10px;
	background: #fff;
	color: var(--ui-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.bam-ui textarea { min-height: 84px; }
.bam-ui select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%2310502f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.bam-ui input:focus, .bam-ui select:focus, .bam-ui textarea:focus {
	outline: none;
	border-color: var(--ui-green);
	box-shadow: 0 0 0 4px rgba(29, 122, 76, .16);
}
.bam-ui .bam-input--tiny { width: 84px !important; text-align: center; }
.bam-ui .bam-input--wide { width: 100% !important; min-width: 180px; }
.bam-ui input[type="checkbox"], .bam-ui input[type="radio"] { accent-color: var(--ui-green); }
.bam-ui .bam-check, .bam-ui .bam-checkline {
	display: flex; align-items: center; gap: 10px; margin: 14px 0; font-weight: 600;
}
.bam-ui .bam-form label, .bam-ui .bam-inline-form label { font-size: 13px; font-weight: 700; color: var(--ui-muted); }

/* ---------------------------------------------------------------- buttons */
.bam-ui .bam-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 26px;
	border: 2px solid var(--ui-green);
	border-radius: 999px;
	background: #fff;
	color: var(--ui-green-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.bam-ui .bam-btn:hover { background: var(--ui-soft2); color: var(--ui-deep); opacity: 1; transform: translateY(-1px); }
.bam-ui .bam-btn--primary {
	background: linear-gradient(135deg, var(--ui-green), var(--ui-deep));
	border-color: var(--ui-deep);
	color: #fff;
	box-shadow: 0 4px 12px rgba(20, 83, 45, .25);
}
.bam-ui .bam-btn--primary:hover {
	background: linear-gradient(135deg, #25905a, var(--ui-deep));
	color: #fff;
	box-shadow: 0 7px 18px rgba(20, 83, 45, .32);
}
.bam-ui .bam-btn--small { padding: 7px 16px; font-size: 13px; }
.bam-ui .bam-btn--quiet { border-color: #aab4ad; color: #46524b; background: #fff; }
.bam-ui .bam-btn:focus-visible { outline: 3px solid rgba(242, 182, 50, .7); outline-offset: 2px; }
.bam-ui .bam-danger-link { color: var(--ui-red); font-weight: 600; }
.bam-ui form > .bam-btn--primary, .bam-ui .bam-attendance-form > .bam-btn { margin-top: 6px; }

/* --------------------------------------------------------------- notices */
.bam-ui .bam-notice {
	position: relative;
	margin: 0 0 16px;
	padding: 13px 16px 13px 46px;
	border: 1px solid;
	border-left-width: 5px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ui-ink);
}
.bam-ui .bam-notice::before {
	position: absolute;
	left: 14px;
	top: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
}
.bam-ui .bam-notice--success { background: #edf9f1; border-color: #a6dcbc; border-left-color: #1d7a4c; }
.bam-ui .bam-notice--success::before { content: "\2713"; background: #1d7a4c; }
.bam-ui .bam-notice--error { background: var(--ui-red-soft); border-color: #f0b5b8; border-left-color: #c0392b; }
.bam-ui .bam-notice--error::before { content: "!"; background: #c0392b; }
.bam-ui .bam-notice--warning { background: var(--ui-gold-soft); border-color: #f2d98a; border-left-color: #d9a21b; }
.bam-ui .bam-notice--warning::before { content: "!"; background: #d9a21b; }

/* badges and tags */
.bam-ui .bam-badge { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }

/* --------------------------------------------- attendance: labelled choices */
.bam-ui .bam-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.bam-ui .bam-seg__opt { position: relative; display: block; margin: 0 !important; padding: 0; cursor: pointer; }
.bam-ui .bam-seg__opt input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	margin: 0 !important;
	opacity: 0;
	pointer-events: none;
}
.bam-ui .bam-seg__opt span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1.5px solid var(--ui-line);
	border-radius: 999px;
	background: #fff;
	color: var(--ui-muted);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	transition: background .12s, border-color .12s, color .12s;
}
.bam-ui .bam-seg__opt:hover span { border-color: var(--ui-green); color: var(--ui-green-ink); }
.bam-ui .bam-seg__opt input:focus-visible + span { outline: 3px solid rgba(29, 122, 76, .4); outline-offset: 2px; }
.bam-ui .bam-seg__opt input:checked + span::before { content: "\2713"; font-weight: 800; }
.bam-ui .bam-seg__opt--present input:checked + span { background: #e3f5ea; border-color: #2f9e5a; color: #0f5b2b; }
.bam-ui .bam-seg__opt--late input:checked + span    { background: #fff1cf; border-color: #d9a21b; color: #7a5200; }
.bam-ui .bam-seg__opt--absent input:checked + span  { background: #fde5e5; border-color: #d14b4b; color: #8f1f26; }
.bam-ui .bam-seg__opt--excused input:checked + span { background: var(--ui-blue-soft); border-color: #5b7bd1; color: #233f8c; }
.bam-ui .bam-table--attendance td.bam-seg-cell { min-width: 360px; }

/* ---------------------------------------------------- parent: child + stats */
.bam-ui .bam-child {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 16px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-left: 6px solid var(--ui-gold);
	border-radius: var(--ui-r);
	box-shadow: var(--ui-shadow);
}
.bam-ui .bam-child__avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ui-green), var(--ui-deep));
	color: #fff;
	font-size: 22px;
	font-weight: 800;
}
.bam-ui .bam-child__info { flex: 1 1 auto; min-width: 0; }
.bam-ui .bam-child__name { margin: 0; color: var(--ui-navy); font-size: 1.3rem; font-weight: 800; }
.bam-ui .bam-child__meta { margin: 2px 0 0; color: var(--ui-muted); font-size: 14px; }

.bam-ui .bam-stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin: 0 0 18px;
}
.bam-ui .bam-stat {
	position: relative;
	min-width: 0;
	padding: 18px 20px 16px;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-r);
	box-shadow: var(--ui-shadow);
	overflow: hidden;
}
.bam-ui .bam-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--ui-green); }
.bam-ui .bam-stat--grade::before { background: var(--ui-gold); }
.bam-ui .bam-stat--behavior::before { background: var(--ui-navy); }
.bam-ui .bam-stat__label { margin: 0 0 4px; color: var(--ui-muted); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.bam-ui .bam-stat__value { margin: 0; color: var(--ui-navy); font-size: 2rem; font-weight: 800; line-height: 1.15; }
.bam-ui .bam-stat .bam-note { display: block; margin-top: 6px; }

/* my profile form: two columns on wide screens */
.bam-ui .bam-card form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.bam-ui .bam-card form > p { margin: 0 0 12px; }
.bam-ui .bam-card form > p label { display: block; font-size: 13px; font-weight: 700; color: var(--ui-muted); }
.bam-ui .bam-card form > p label input { margin-top: 5px; }
.bam-ui .bam-card form > .bam-btn { grid-column: 1 / -1; justify-self: start; }
.bam-ui .bam-card form > input[type="hidden"] { display: none; }

/* ------------------------------------------------------- sign-in card */
.bam-ui.bam-portal--login {
	max-width: 460px;
	margin: 36px auto 64px;
	padding: 0 0 30px;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-radius: 20px;
	box-shadow: 0 2px 4px rgba(20, 83, 45, .06), 0 18px 44px rgba(20, 83, 45, .12);
	overflow: hidden;
}
.bam-ui .bam-login__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
	padding: 20px 28px;
	color: #fff;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.2'%3E%3Crect x='14' y='14' width='28' height='28'/%3E%3Crect x='14' y='14' width='28' height='28' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(135deg, var(--ui-deep) 0%, var(--ui-green) 100%);
	box-shadow: inset 0 -4px 0 var(--ui-gold);
}
.bam-ui .bam-login__logo { width: 52px; height: 52px; padding: 4px; object-fit: contain; border-radius: 14px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.bam-ui .bam-login__school { font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; }
.bam-ui.bam-portal--login > *:not(.bam-login__brand) { margin-left: 28px; margin-right: 28px; }
.bam-ui .bam-portal__title { margin: 0 0 6px; color: var(--ui-navy); font-size: 1.55rem; font-weight: 800; }
.bam-ui .bam-portal__lead { margin: 0 0 20px; color: var(--ui-muted); }
.bam-ui .bam-login-form label { display: block; margin: 0 0 16px; font-size: 13px; font-weight: 700; color: var(--ui-muted); }
.bam-ui .bam-login-form input[type="text"], .bam-ui .bam-login-form input[type="password"] { width: 100%; max-width: none; margin-top: 6px; min-height: 48px; font-size: 16px; }
.bam-ui .bam-login-form .bam-checkline { margin: 4px 0 18px; font-weight: 500; color: var(--ui-ink); font-size: 14px; }
.bam-ui .bam-login-form .bam-checkline input { width: auto; min-height: 0; margin: 0; }
.bam-ui .bam-login-form .bam-btn { width: 100%; min-height: 50px; font-size: 16px; }
.bam-ui .bam-portal__help { margin: 18px 28px 6px; text-align: center; font-size: 14px; font-weight: 600; }
.bam-ui.bam-portal--login .bam-note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ui-line2); text-align: center; }

/* sign-in: label above field, a Show/Hide button inside the password field */
.bam-ui .bam-login-form label[for] { margin: 0 0 6px; }
.bam-ui .bam-login-form input[name="log"] { margin: 0 0 16px; }
.bam-ui .bam-pw { position: relative; margin: 0 0 16px; }
.bam-ui .bam-login-form .bam-pw input { margin: 0; padding-right: 84px; }
.bam-ui .bam-pw__toggle {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	min-height: 0; padding: 7px 12px; border: 0; border-radius: 999px; background: transparent;
	color: var(--ui-green-ink); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
}
.bam-ui .bam-pw__toggle:hover, .bam-ui .bam-pw__toggle:focus { background: var(--ui-soft2); color: var(--ui-deep); }
/* Edge adds its own "reveal" eye; ours replaces it so there is only one */
.bam-ui input[type="password"]::-ms-reveal { display: none; }
/* Nothing a page builder places beside the card (a decorative picture, a blurred
   background) may sit on top of the form and swallow clicks on Sign in. */
.bam-ui.bam-portal--login { position: relative; z-index: 40; isolation: isolate; }
.bam-ui .bam-login-form .bam-btn { position: relative; z-index: 1; }
.bam-ui .bam-login-form .bam-btn:disabled { opacity: .75; cursor: progress; }

/* Teacher Attendance & Sign Sheet: the approve bar and the "Excused" box */
.bam-ui .bam-table--ta th, .bam-ui .bam-table--ta td { padding: 10px 8px; }
.bam-ui .bam-table--ta th:nth-child(6), .bam-ui .bam-table--ta td:nth-child(6) { width: 30%; min-width: 210px; }
.bam-ui .bam-table--ta td:nth-child(2) select { min-width: 0; width: 100px; padding-left: 8px; }
.bam-ui .bam-table--ta input[type="time"] { min-width: 0; width: 116px; padding: 8px 6px; font-size: 14px; }
.bam-ui .bam-table--ta input.bam-input--tiny { width: 66px !important; }
.bam-ui .bam-table--ta td:nth-child(7) { white-space: nowrap; }
/* on a narrow desktop window the table scrolls inside its own panel instead of pushing the page sideways */
@media (min-width: 783px) and (max-width: 1040px) { .bam-ui .bam-ta-wrap { overflow-x: auto; } }
.bam-ui .bam-approvebar { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; }
.bam-ui .bam-excuse { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 8px 0 0; font-size: 13px; font-weight: 400; color: var(--ui-ink); }
.bam-ui .bam-excuse span { color: var(--ui-muted); font-size: 12px; }
.bam-ui .bam-excuse input { width: auto; min-height: 0; margin: 0; }
.bam-ui .bam-excuse__flag { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; }
.bam-ui .bam-excuse__flag--ok { color: #0f5b2b; }
.bam-ui .bam-excuse__flag--warn { color: #a3282f; font-weight: 700; }

/* ---------------------------------------- "this account is not set up" */
.bam-ui.bam-portal--notice { max-width: 680px; padding-top: 32px; }
.bam-ui .bam-notice-card { display: flex; align-items: flex-start; gap: 18px; }
.bam-ui .bam-notice-card__icon {
	flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
	border-radius: 50%; background: var(--ui-navy); color: #fff; font-weight: 800; font-family: Georgia, serif; font-size: 20px;
}
.bam-ui .bam-notice-card__title { margin: 0 0 6px; color: var(--ui-navy); font-size: 1.2rem; font-weight: 800; }
.bam-ui .bam-notice-card__body p { margin: 0 0 12px; }

/* ------------------------------------------------ teacher sign-in page */
.bam-ui .bam-signin__status {
	margin: 0 0 18px; padding: 16px 20px; background: var(--ui-soft); border: 1px solid var(--ui-line); border-radius: var(--ui-r);
}
.bam-ui .bam-signin__actions { margin-top: 16px; }
.bam-ui .bam-signature-pad { border: 2px dashed #9db8a8; border-radius: 12px; background: #fff; max-width: 100%; }

/* ------------------------------------------------------------------ links */
/* Plain text links stay underlined (readable on any screen); everything that
   is really a button, tab, tile or card is not. */
.bam-ui a { text-decoration: underline; text-underline-offset: 2px; }
.bam-ui .bam-tab, .bam-ui .bam-btn, .bam-ui .bam-chip, .bam-ui .bam-office__tab, .bam-ui .bam-office__stat,
.bam-ui .bam-office__card, .bam-ui .bam-office__row, .bam-ui .bam-admin-portal__link,
.bam-ui .bam-hero a { text-decoration: none; }

/* ---------------------------------------------------- School Office */
.bam-ui .bam-office__nav {
	display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 6px;
	background: #fff; border: 1px solid var(--ui-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(20, 83, 45, .05);
}
.bam-ui .bam-office__tab {
	margin: 0; padding: 9px 16px; border: 0; border-radius: 999px; color: var(--ui-green-ink);
	font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .15s, color .15s;
}
.bam-ui .bam-office__tab:hover { background: var(--ui-soft2); color: var(--ui-deep); }
.bam-ui .bam-office__tab.is-active { background: var(--ui-deep); color: #fff; box-shadow: 0 2px 8px rgba(20, 83, 45, .3); }
.bam-ui .bam-panel--office { padding: 22px 24px; }

.bam-ui .bam-office__stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.bam-ui .bam-office__stat {
	position: relative; padding: 18px 20px 16px; background: #fff; border: 1px solid var(--ui-line);
	border-radius: var(--ui-r); box-shadow: var(--ui-shadow); overflow: hidden; color: inherit;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.bam-ui .bam-office__stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--ui-green); }
.bam-ui .bam-office__stat:nth-child(2)::before { background: var(--ui-gold); }
.bam-ui .bam-office__stat:nth-child(3)::before { background: var(--ui-navy); }
.bam-ui .bam-office__stat:hover { transform: translateY(-2px); border-color: var(--ui-green); box-shadow: 0 10px 26px rgba(20, 83, 45, .13); }
.bam-ui .bam-office__stat--static:hover { transform: none; border-color: var(--ui-line); box-shadow: var(--ui-shadow); }
.bam-ui .bam-office__stat-num { color: var(--ui-navy); font-size: 2rem; font-weight: 800; }
.bam-ui .bam-office__stat-label { color: var(--ui-muted); font-size: 12px; font-weight: 700; letter-spacing: .07em; }

.bam-ui .bam-office__cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.bam-ui .bam-office__card {
	padding: 18px 20px; background: #fff; border: 1px solid var(--ui-line); border-left: 5px solid var(--ui-gold);
	border-radius: var(--ui-r); box-shadow: var(--ui-shadow); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.bam-ui .bam-office__card:hover { transform: translateY(-2px); border-left-color: var(--ui-green); box-shadow: 0 10px 26px rgba(20, 83, 45, .13); }
.bam-ui .bam-office__card strong { color: var(--ui-navy); font-size: 15px; font-weight: 800; }
.bam-ui .bam-office__card span { color: var(--ui-muted); }

.bam-ui .bam-office__search { gap: 10px; margin-bottom: 18px; }
.bam-ui .bam-office__search input[type="search"] { flex: 1 1 240px; width: auto; }
.bam-ui .bam-office__search input[type="date"], .bam-ui .bam-office__search select { width: auto; }
.bam-ui .bam-office__filters { gap: 8px; margin-bottom: 18px; }
.bam-ui .bam-office__list { gap: 10px; }
.bam-ui .bam-office__row {
	padding: 14px 18px; background: #fff; border: 1px solid var(--ui-line); border-radius: 12px; color: inherit;
	transition: border-color .15s, box-shadow .15s;
}
.bam-ui a.bam-office__row:hover { border-color: var(--ui-green); box-shadow: 0 4px 14px rgba(20, 83, 45, .1); }
.bam-ui .bam-office__row-main { color: var(--ui-ink); font-weight: 700; }
.bam-ui .bam-office__row-sub { color: var(--ui-muted); }
.bam-ui .bam-office__reg, .bam-ui .bam-office__invoice, .bam-ui .bam-office__payslip {
	background: #fff; border: 1px solid var(--ui-line); border-radius: var(--ui-r); box-shadow: var(--ui-shadow); padding: 20px 22px;
}
.bam-ui .bam-office__reg-head strong { color: var(--ui-navy); font-weight: 800; }
.bam-ui .bam-office__reg-meta dt { color: var(--ui-muted); font-weight: 700; }
.bam-ui .bam-office__att-row { background: #fff; border: 1px solid var(--ui-line); border-radius: 12px; }
.bam-ui .bam-office__att-name { font-weight: 700; color: var(--ui-ink); }
.bam-ui .bam-office__att-opt {
	padding: 8px 14px; border: 1.5px solid var(--ui-line); border-radius: 999px; background: #fff; color: var(--ui-muted);
	font-size: 13px !important; font-weight: 700 !important;
}
.bam-ui .bam-office__att-opt:hover { border-color: var(--ui-green); color: var(--ui-green-ink); }
.bam-ui .bam-office__att-opt:has(input:checked) { border-color: #2f9e5a; background: #e3f5ea; color: #0f5b2b; }
.bam-ui .bam-office__att-opt--late:has(input:checked) { border-color: #d9a21b; background: #fff1cf; color: #7a5200; }
.bam-ui .bam-office__att-opt--absent:has(input:checked) { border-color: #d14b4b; background: #fde5e5; color: #8f1f26; }
.bam-ui .bam-office__att-opt input { width: auto !important; min-height: 0 !important; }
.bam-ui .bam-tag, .bam-ui .bam-tag--paid, .bam-ui .bam-tag--unpaid, .bam-ui .bam-tag--partial {
	display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
}

.bam-ui .bam-office__card .bam-office__hint { margin-top: 6px; color: var(--ui-green-ink); font-size: 12px; font-weight: 700; }
.bam-ui .bam-office__card .bam-office__hint--warn { color: #7a5200; }
.bam-ui .bam-office__card .bam-office__hint--bad { color: #8f1f26; }
.bam-ui .bam-dash { margin-top: 0; }

/* Student Logins screen */
.bam-ui .bam-table--logins td input[type="text"] { min-width: 150px; }
.bam-ui .bam-logins__pw { display: flex; align-items: center; gap: 8px; }
.bam-ui .bam-logins__pw input { flex: 1 1 auto; font-family: ui-monospace, Consolas, "Courier New", monospace; }
.bam-ui .bam-logins__classes { display: block; margin-top: 2px; font-weight: 400; }
.bam-ui .bam-logins__remove { display: flex; align-items: center; gap: 6px; color: #8f1f26; font-size: 13px; font-weight: 600; }
.bam-ui .bam-table--logins input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; }
.bam-ui .bam-badge--ok { background: #e3f5ea; color: #0f5b2b; }

/* ------------------------------------------------ About Us, in the school design */
/* Every word, photo and button is untouched: only colours and shapes change, so the
   page can still be edited in the block editor. The editor stores each colour inside
   the block, which is why these rules match on it. */
.bam-doc--about { --ab-green: #1d7a4c; --ab-deep: #14532d; --ab-gold: #f2b632; --ab-navy: #203b6a; --ab-soft: #f1f8f3; --ab-line: #d9e6dd; }

/* the dark bands (the story at the top, the invitation at the bottom) become the school header */
.bam-doc--about .wp-block-group[style*="background-color:#19224c" i] {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.2'%3E%3Crect x='14' y='14' width='28' height='28'/%3E%3Crect x='14' y='14' width='28' height='28' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(135deg, #14532d 0%, #1d7a4c 100%) !important;
	box-shadow: inset 0 -4px 0 #f2b632;
}
/* the pale band */
.bam-doc--about .wp-block-group[style*="background-color:#eef0f6" i] { background: var(--ab-soft) !important; }

/* text */
.bam-doc--about [style^="color:#19224c" i], .bam-doc--about [style*=";color:#19224c" i] { color: var(--ab-navy) !important; }
.bam-doc--about [style^="color:#3a4160" i], .bam-doc--about [style*=";color:#3a4160" i] { color: #1b2a22 !important; }
.bam-doc--about [style^="color:#5a6178" i], .bam-doc--about [style*=";color:#5a6178" i] { color: #5b6b62 !important; }
.bam-doc--about [style^="color:#d7dcee" i], .bam-doc--about [style*=";color:#d7dcee" i] { color: #e4f5ea !important; }
.bam-doc--about [style^="color:#cc3366" i], .bam-doc--about [style*=";color:#cc3366" i] { color: var(--ab-green) !important; }
.bam-doc--about .wp-block-group[style*="background-color:#19224c" i] [style^="color:#cc3366" i],
.bam-doc--about .wp-block-group[style*="background-color:#19224c" i] [style*=";color:#cc3366" i] { color: var(--ab-gold) !important; }

/* the small label ("Our story") */
.bam-doc--about [style*="background-color:#cc3366" i] { background-color: var(--ab-gold) !important; color: var(--ab-deep) !important; }
/* buttons */
.bam-doc--about .wp-block-button__link { border-radius: 999px !important; font-weight: 700; }
.bam-doc--about .wp-block-button__link[style*="background-color:#cc3366" i] { background-color: var(--ab-green) !important; color: #fff !important; }
.bam-doc--about .wp-block-group[style*="background-color:#19224c" i] .wp-block-button__link[style*="background-color:#cc3366" i] { background-color: var(--ab-gold) !important; color: var(--ab-deep) !important; }
/* the highlighted note, and any pink tint */
.bam-doc--about [style*="background-color:#fbeff3" i], .bam-doc--about [style*="background-color:#fdeaf0" i] { background-color: #fff6dc !important; }
.bam-doc--about [style*="border-left" i][style*="#cc3366" i] { border-left-color: var(--ab-gold) !important; }

/* white cards (the three values) */
.bam-doc--about .wp-block-group[style*="border-radius:12px" i] {
	border: 1px solid var(--ab-line); border-top: 4px solid var(--ab-green);
	box-shadow: 0 1px 2px rgba(20, 83, 45, .06), 0 8px 24px rgba(20, 83, 45, .07);
}
.bam-doc--about .bam-about__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e3f5ea; color: var(--ab-deep); }
.bam-doc--about .bam-about__icon svg { display: block; }
/* photos and the video */
.bam-doc--about .wp-block-image img, .bam-doc--about .wp-block-embed iframe, .bam-doc--about .wp-block-embed__wrapper { border-radius: 14px; }
.bam-doc--about .wp-block-image img { box-shadow: 0 1px 2px rgba(20, 83, 45, .08), 0 10px 26px rgba(20, 83, 45, .12); }
/* the program photos: equal frames and aligned captions, whatever shape each picture is, with nothing cropped */
.bam-doc--about .wp-block-columns .wp-block-image { margin-bottom: 8px; }
.bam-doc--about .wp-block-columns .wp-block-image img { display: block; width: 100% !important; height: 210px !important; object-fit: contain; padding: 6px; border: 1px solid var(--ab-line); background: #fff; }
.bam-doc--about .wp-block-columns .wp-block-image figcaption, .bam-doc--about .wp-block-columns .wp-block-image + p { margin-top: 10px; text-align: center; font-weight: 700; }
.bam-doc--about a { text-underline-offset: 3px; }

/* Programs page: the About Us treatment above, plus what this page has that About does not */
.bam-doc--programs [style^="color:#d7dcea" i], .bam-doc--programs [style*=";color:#d7dcea" i] { color: #e4f5ea !important; }
.bam-doc--about.bam-doc--programs [style*="background-color:#fbeff3" i], .bam-doc--about.bam-doc--programs [style*="background-color:#fdeaf0" i] { background-color: var(--ab-soft) !important; border: 1px solid var(--ab-line); box-shadow: 0 1px 2px rgba(20, 83, 45, .05), 0 12px 30px rgba(20, 83, 45, .08); }
/* the age and program labels: small pills, not full-width bars */
.bam-doc--about.bam-doc--programs p.ba-badge.ba-badge { display: inline-block !important; width: auto !important; max-width: 100%; background: #e3f5ea !important; color: var(--ab-deep) !important; border-radius: 999px !important; padding: 5px 14px !important; font-weight: 800; letter-spacing: .04em; }
.bam-doc--about.bam-doc--programs p.ba-badge-center.ba-badge-center { display: table !important; width: auto !important; margin-left: auto !important; margin-right: auto !important; padding: 6px 20px !important; border-radius: 999px !important; }
/* program photos fill their column at their natural shape (About Us's equal-frame rule is for its four small thumbnails) */
.bam-doc--about.bam-doc--programs .wp-block-columns .wp-block-image img { width: 100% !important; height: auto !important; object-fit: cover; padding: 0; border: 0; background: none; }
.bam-doc--programs li::marker { color: var(--ab-green); }
.bam-doc--programs li { margin: 6px 0; }
.bam-doc--programs hr.wp-block-separator { color: var(--ab-gold); }

/* ------------------------------------------- Privacy, Terms and Contact pages */
.bam-ui.bam-doc { max-width: 1040px; }
.bam-doc__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 960px) {
	.bam-doc__layout--toc { grid-template-columns: 250px minmax(0, 1fr); }
	.bam-doc__toc { position: sticky; top: 24px; }
}
.bam-doc__toc { padding: 16px 18px; background: #fff; border: 1px solid var(--ui-line); border-radius: var(--ui-r); box-shadow: var(--ui-shadow); }
.bam-doc__toc-title { margin: 0 0 8px; color: var(--ui-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bam-doc__toc ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.4; }
.bam-doc__toc li { margin: 8px 0; }
.bam-doc__toc a { color: var(--ui-navy); text-decoration: none; }
.bam-doc__toc a:hover { color: var(--ui-link); text-decoration: underline; }
.bam-doc__body { padding: 30px 34px; font-size: 16px; line-height: 1.75; }
.bam-doc__body > :first-child { margin-top: 0; }
.bam-doc__body h2 { position: relative; margin: 36px 0 12px; padding-left: 14px; color: var(--ui-navy); font-size: 1.35rem; font-weight: 800; line-height: 1.3; scroll-margin-top: 24px; }
.bam-doc__body h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 3px; background: linear-gradient(var(--ui-gold), #e0a21b); }
.bam-doc__body h3, .bam-doc__body h4 { margin: 24px 0 8px; color: var(--ui-navy); font-weight: 800; }
.bam-doc__body p { margin: 0 0 16px; }
.bam-doc__body ul, .bam-doc__body ol { margin: 0 0 18px; padding-left: 26px; }
.bam-doc__body li { margin: 7px 0; padding-left: 4px; }
.bam-doc__body li::marker { color: var(--ui-green); }
.bam-doc__body hr { margin: 30px 0; border: 0; border-top: 1px solid var(--ui-line); }
.bam-doc__body strong { color: var(--ui-ink); }
.bam-doc__body a { color: var(--ui-link); }
.bam-doc__body table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.bam-doc__body th, .bam-doc__body td { padding: 8px 10px; border: 1px solid var(--ui-line); text-align: left; }
@media (max-width: 782px) { .bam-doc__body { padding: 20px 18px; font-size: 15px; } }

.bam-contact__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0 0 18px; }
.bam-contact__card { padding: 20px 22px; background: #fff; border: 1px solid var(--ui-line); border-top: 4px solid var(--ui-green); border-radius: var(--ui-r); box-shadow: var(--ui-shadow); }
.bam-contact__card:nth-child(2) { border-top-color: var(--ui-gold); }
.bam-contact__card:nth-child(3) { border-top-color: var(--ui-navy); }
.bam-contact__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%; background: var(--ui-soft2); color: var(--ui-deep); }
.bam-contact__card h3 { margin: 0 0 4px; color: var(--ui-navy); font-size: 1.05rem; font-weight: 800; }
.bam-contact__card p { margin: 0 0 6px; }
.bam-contact__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
@media (max-width: 640px) { .bam-contact__row { grid-template-columns: minmax(0, 1fr); } }
.bam-contact__form label { display: block; margin: 0 0 14px; color: var(--ui-muted); font-size: 13px; font-weight: 700; }
.bam-ui .bam-panel.bam-contact__form form.bam-form input, .bam-ui .bam-panel.bam-contact__form form.bam-form select, .bam-ui .bam-panel.bam-contact__form form.bam-form textarea { display: block; width: 100%; min-width: 0; max-width: none; margin: 6px 0 0; }
.bam-doc__body hr + h2 { margin-top: 8px; }
.bam-contact__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bam-req { color: #c0392b; }

/* ------------------------------------------------------ Administration */
.bam-ui .bam-admin-portal__grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 0; }
.bam-ui .bam-admin-portal__link {
	display: block; padding: 18px 20px; background: #fff; border: 1px solid var(--ui-line); border-left: 5px solid var(--ui-gold);
	border-radius: var(--ui-r); box-shadow: var(--ui-shadow); color: var(--ui-navy); font-weight: 800;
	transition: transform .15s, box-shadow .15s, border-left-color .15s;
}
.bam-ui .bam-admin-portal__link:hover { background: #fff; transform: translateY(-2px); border-left-color: var(--ui-green); box-shadow: 0 10px 26px rgba(20, 83, 45, .13); }
.bam-ui .bam-admin-portal__link span { margin-top: 4px; color: var(--ui-muted); font-size: 13px; font-weight: 400; }

/* ------------------------------------------------------------ Classroom */
.bam-ui .bam-panel .bam-card { margin: 0 0 14px; box-shadow: none; background: var(--ui-soft); border-color: var(--ui-line2); }
.bam-ui .bam-panel .bam-card:last-child { margin-bottom: 0; }
.bam-ui .bam-panel form.bam-form > p { margin: 0 0 12px; }
.bam-ui .bam-panel form.bam-form select, .bam-ui .bam-panel form.bam-form input[type="date"] { display: inline-block; width: auto; min-width: 190px; margin: 0 8px 8px 0; vertical-align: middle; }
.bam-ui .bam-panel form.bam-form input[type="file"] { width: 100%; min-height: 0; padding: 10px; border-style: dashed; background: var(--ui-soft); }
.bam-ui details.bam-card { padding: 0; }
.bam-ui details.bam-card > summary {
	cursor: pointer; padding: 14px 18px; color: var(--ui-navy); font-weight: 800; list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.bam-ui details.bam-card > summary::-webkit-details-marker { display: none; }
.bam-ui details.bam-card > summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--ui-green); }
.bam-ui details.bam-card[open] > summary::after { content: "\2212"; }
.bam-ui details.bam-card > div { padding: 0 18px 16px !important; }
.bam-ui .bam-thread__msg { padding: 8px 12px; border-left: 4px solid var(--ui-line); border-radius: 0 10px 10px 0; background: #fff; }
.bam-ui .bam-thread__msg--teacher, .bam-ui .bam-thread__msg--staff { border-left-color: var(--ui-green); background: var(--ui-soft); }
.bam-ui .bam-thread__who { color: var(--ui-navy); font-weight: 800; font-size: 13px; }
.bam-ui .bam-thread__when { color: var(--ui-muted); }
.bam-ui .bam-files { padding-left: 20px; }

/* -------------------------------------------------------------- Calendar */
.bam-ui .bam-cal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.bam-ui .bam-legend { gap: 10px 18px; margin: 0 0 20px; font-size: 13px; color: var(--ui-ink); }
.bam-ui .bam-months { gap: 20px; margin-bottom: 0; }
.bam-ui .bam-month { border: 1px solid var(--ui-line); border-radius: 14px; background: #fff; overflow: hidden; }
.bam-ui .bam-month__title { background: linear-gradient(135deg, var(--ui-deep), var(--ui-green)); padding: 10px; font-size: 14px; letter-spacing: .03em; }
.bam-ui .bam-month__day.is-schoolday { background: var(--ui-soft); }
.bam-ui .bam-month__day.is-today .bam-month__num { background: var(--ui-green); }
.bam-ui .bam-cal__list { margin-top: 18px; }

/* ---------------------------------------------------------- Registration */
.bam-ui.bam-registration, .bam-ui.bam-registration-closed { max-width: 900px; margin-top: 0; text-align: left; }
.bam-ui .bam-intro { margin: 0 0 18px; padding: 16px 20px; background: var(--ui-gold-soft); border: 1px solid #f2d98a; border-left: 5px solid var(--ui-gold); border-radius: 12px; }
.bam-ui .bam-intro > :last-child { margin-bottom: 0; }
.bam-ui .bam-fieldset { margin: 0 0 18px; padding: 22px 24px; background: #fff; border: 1px solid var(--ui-line); border-radius: var(--ui-r); box-shadow: var(--ui-shadow); }
.bam-ui .bam-fieldset legend { padding: 0 10px; color: var(--ui-navy); font-size: 1.05rem; font-weight: 800; }
.bam-ui .bam-fees { background: var(--ui-soft); border: 1px solid var(--ui-line2); border-radius: 12px; }
.bam-ui .bam-tuition-option { border: 1.5px solid var(--ui-line); border-radius: var(--ui-r); transition: border-color .15s, background .15s, box-shadow .15s; }
.bam-ui .bam-tuition-option:hover { border-color: var(--ui-green); }
.bam-ui .bam-tuition-option:has(input:checked) { border-color: var(--ui-green); background: var(--ui-soft); box-shadow: 0 0 0 3px rgba(29, 122, 76, .13); }
.bam-ui .bam-tuition-option__price { color: var(--ui-green-ink); }
.bam-ui .bam-sibling-block, .bam-ui .bam-second-guardian, .bam-ui .bam-sms-optin { border-color: var(--ui-line); border-radius: 12px; background: var(--ui-soft); }
.bam-ui .bam-terms { border-color: var(--ui-line); border-radius: 10px; }
.bam-ui .bam-card--success { border-left: 6px solid var(--ui-green); background: #edf9f1; }
.bam-ui .bam-total, .bam-ui .bam-price__amount { color: var(--ui-green-ink); }
.bam-ui.bam-registration-closed .bam-notice-card__body p { margin: 0 0 10px; font-size: 1.05rem; }
.bam-ui.bam-registration-closed .bam-notice-card__body p:last-child { margin-bottom: 0; }

/* option cards and tick-box lines read as normal text, not as bold form labels */
.bam-ui .bam-form .bam-tuition-option, .bam-ui .bam-form .bam-choice, .bam-ui .bam-form label.bam-check { font-weight: 400; font-size: 14px; color: var(--ui-ink); }
.bam-ui .bam-tuition-option strong { font-weight: 800; font-size: 15px; }
.bam-ui .bam-tuition-option .bam-note { display: block; margin-top: 4px; font-weight: 400; }
.bam-ui .bam-tuition-options > p, .bam-ui .bam-tuition-options > .bam-note { grid-column: 1 / -1; margin: 2px 0 0; }
/* the payment block is forced to black text for legibility; keep its heading and prices on-brand */
.bam-ui .bam-payment-black legend { color: var(--ui-navy) !important; }
.bam-ui .bam-payment-black .bam-tuition-option__price { color: var(--ui-green-ink) !important; }

/* ------------------------------------- behaviour sheet: rating buttons */
.bam-ui .bam-table--behavior td.bam-seg-cell { min-width: 0; }
.bam-ui .bam-seg--rate { gap: 4px; }
.bam-ui .bam-seg--rate .bam-seg__opt span { padding: 6px 9px; font-size: 12px; }
.bam-ui .bam-table--behavior th:first-child { width: 16%; }
.bam-ui .bam-table--behavior th:last-child { width: 21%; }
.bam-ui .bam-table--behavior .bam-input--wide { min-width: 150px; }
.bam-ui .bam-seg__opt--none input:checked + span { background: #eef2ef; border-color: #aab7b0; color: #46524b; }
.bam-ui .bam-seg__opt--none input:checked + span::before { content: none; }
.bam-ui .bam-seg__opt--r5 input:checked + span { background: #e3f5ea; border-color: #2f9e5a; color: #0f5b2b; }
.bam-ui .bam-seg__opt--r4 input:checked + span { background: #e3f3ef; border-color: #3a9d8f; color: #17625a; }
.bam-ui .bam-seg__opt--r3 input:checked + span { background: #fff1cf; border-color: #d9a21b; color: #7a5200; }
.bam-ui .bam-seg__opt--r2 input:checked + span { background: #ffe8d6; border-color: #e07b2a; color: #8a3d05; }
.bam-ui .bam-seg__opt--r1 input:checked + span { background: #fde5e5; border-color: #d14b4b; color: #8f1f26; }

/* ---------------------------------------------- homework: who it is for */
.bam-ui .bam-homework-form label { display: block; margin: 0 0 14px; }
.bam-ui .bam-hw-mode { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.bam-ui .bam-hw-mode legend { padding: 0; margin: 0 0 8px; color: var(--ui-muted); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.bam-ui .bam-hw-mode__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bam-ui .bam-form .bam-hw-mode__opt { position: relative; display: block; margin: 0; font-size: 14px; font-weight: 400; color: var(--ui-ink); cursor: pointer; }
.bam-ui .bam-hw-mode__opt input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; margin: 0; }
.bam-ui .bam-hw-mode__opt > span {
	display: block; height: 100%; padding: 14px 16px; background: #fff;
	border: 1.5px solid var(--ui-line); border-radius: var(--ui-r); transition: border-color .15s, background .15s, box-shadow .15s;
}
.bam-ui .bam-hw-mode__opt strong { display: block; color: var(--ui-navy); font-size: 15px; font-weight: 800; }
.bam-ui .bam-hw-mode__opt small { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 13px; font-weight: 400; }
.bam-ui .bam-hw-mode__opt:hover > span { border-color: var(--ui-green); }
.bam-ui .bam-hw-mode__opt input:checked + span { border-color: var(--ui-green); background: var(--ui-soft); box-shadow: 0 0 0 3px rgba(29, 122, 76, .13); }
.bam-ui .bam-hw-mode__opt input:focus-visible + span { outline: 3px solid rgba(29, 122, 76, .4); outline-offset: 2px; }
.bam-ui .bam-hw-dates { display: flex; flex-wrap: wrap; gap: 0 18px; }
.bam-ui .bam-hw-dates label { flex: 0 1 200px; }
.bam-ui .bam-hw-pick__head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.bam-ui .bam-checklist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.bam-ui .bam-homework-form .bam-check-pill { position: relative; display: inline-block; margin: 0; font-size: 14px; font-weight: 600; color: var(--ui-muted); cursor: pointer; }
.bam-ui .bam-check-pill input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; margin: 0; }
.bam-ui .bam-check-pill span { display: inline-block; padding: 8px 16px; background: #fff; border: 1.5px solid var(--ui-line); border-radius: 999px; transition: background .12s, border-color .12s, color .12s; }
.bam-ui .bam-check-pill:hover span { border-color: var(--ui-green); color: var(--ui-green-ink); }
.bam-ui .bam-check-pill input:checked + span { background: #e3f5ea; border-color: #2f9e5a; color: #0f5b2b; }
.bam-ui .bam-check-pill input:checked + span::before { content: "\2713\00a0"; font-weight: 800; }
.bam-ui .bam-check-pill input:focus-visible + span { outline: 3px solid rgba(29, 122, 76, .4); outline-offset: 2px; }
.bam-ui .bam-table--each td textarea { min-height: 44px; resize: vertical; }
.bam-ui .bam-homework-block { margin: 0 0 20px; padding: 16px 18px; background: var(--ui-soft); border: 1px solid var(--ui-line2); border-radius: var(--ui-r); }
.bam-ui .bam-homework-block h4 { margin: 0 0 8px; color: var(--ui-navy); font-size: 1.05rem; font-weight: 800; }
.bam-ui .bam-homework-block .bam-table { background: #fff; }
.bam-ui .bam-hw-for { display: inline-block; margin-left: 8px; padding: 3px 11px; border-radius: 999px; background: var(--ui-soft2); color: var(--ui-green-ink); font-size: 12px; font-weight: 700; vertical-align: middle; }
.bam-ui .bam-hw-for--some { background: var(--ui-gold-soft); color: #7a5200; }
.bam-ui .bam-due-badge { margin-left: 8px; padding: 3px 11px; border-radius: 999px; background: #e8eefc; color: #233f8c; font-size: 12px; font-weight: 700; vertical-align: middle; }

/* phones: the password box and its "New" button stay inside the card */
@media (max-width: 782px) {
	.bam-ui .bam-logins__pw { flex: 1 1 auto; min-width: 0; max-width: 64%; }
	.bam-ui .bam-logins__pw input { flex: 1 1 0; min-width: 0; width: 100%; }
	.bam-ui .bam-table--logins td input[type="text"] { min-width: 0; }
}
/* phones: the notes / excuse cell stacks (its content is several pieces, so it must not be laid out sideways) */
@media (max-width: 782px) {
	.bam-ui table.bam-table td.bam-ta-notes-cell[data-label] { display: block; }
	.bam-ui table.bam-table td.bam-ta-notes-cell::before { display: block; margin-bottom: 6px; }
	.bam-ui .bam-ta-notes input[type="text"] { width: 100%; max-width: none; }
	.bam-ui table.bam-table td[data-label] .bam-ta-notes input[type="text"] { max-width: none; }
}

/* --------------------------------------------------------------- phones */
@media (max-width: 782px) {
	.bam-ui { padding: 14px 14px 44px; }
	.bam-ui .bam-hero { flex-wrap: wrap; padding: 18px; gap: 14px; }
	.bam-ui .bam-hero__badge { width: 58px; height: 58px; border-radius: 15px; }
	.bam-ui .bam-hero__logo { width: 46px; height: 46px; }
	.bam-ui .bam-hero__text { flex: 1 1 0; }
	.bam-ui .bam-hero__account { flex: 1 1 100%; margin-left: 0; display: flex; justify-content: flex-end; }
	.bam-ui .bam-panel, .bam-ui .bam-card { padding: 16px; }
	.bam-ui .bam-child { flex-wrap: wrap; gap: 12px 14px; padding: 14px 16px; }
	.bam-ui .bam-child__info { flex: 1 1 0; }
	.bam-ui .bam-child__name { font-size: 1.15rem; }
	.bam-ui .bam-child .bam-btn { flex: 1 1 100%; }
	.bam-ui .bam-stat { padding: 14px 16px 12px; }
	.bam-ui .bam-stat__value { font-size: 1.6rem; }

	/* the tab bar scrolls sideways instead of wrapping into rows */
	.bam-ui .bam-tabs, .bam-ui .bam-office__nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		border-radius: 999px;
	}
	.bam-ui .bam-tabs::-webkit-scrollbar, .bam-ui .bam-office__nav::-webkit-scrollbar { display: none; }
	.bam-ui .bam-class-picker select { min-width: 0; width: 100%; }
	.bam-ui .bam-class-picker label, .bam-ui .bam-date-picker label { flex: 1 1 100%; }

	/* tables become cards (rules in bam-public.css) — refined here */
	.bam-ui table.bam-table { border: 0; border-radius: 0; background: transparent; overflow: visible; }
	.bam-ui table.bam-table tr {
		border: 1px solid var(--ui-line);
		border-radius: 12px;
		margin: 0 0 12px;
		padding: 6px 14px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(20, 83, 45, .05);
	}
	.bam-ui table.bam-table td, .bam-ui table.bam-table tbody tr:nth-child(even) td, .bam-ui table.bam-table tbody tr:hover td {
		background: transparent; border: 0; padding: 8px 0;
	}
	.bam-ui table.bam-table td[data-label]::before { color: var(--ui-muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
	/* the first cell of each card is its title, so it needs no repeated label */
	.bam-ui table.bam-table td:first-child { padding-top: 10px; font-size: 1.05rem; font-weight: 800; color: var(--ui-navy); }
	.bam-ui table.bam-table td:first-child[data-label] { display: block; }
	.bam-ui table.bam-table td:first-child[data-label]::before { display: none; }
	.bam-ui .bam-cell-val { flex: 1 1 auto; min-width: 0; text-align: right; }
	.bam-ui table.bam-table td.bam-seg-cell[data-label] { display: block; min-width: 0; }
	.bam-ui table.bam-table td.bam-seg-cell::before { display: block; margin-bottom: 8px; }
	.bam-ui .bam-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.bam-ui .bam-hw-mode__options { grid-template-columns: 1fr; }
	.bam-ui .bam-hw-dates label { flex: 1 1 140px; }
	.bam-ui .bam-seg__opt span { width: 100%; justify-content: center; padding: 11px 10px; white-space: normal; text-align: center; }
	.bam-ui table.bam-table td[data-label] input[type="number"], .bam-ui table.bam-table td[data-label] .bam-input--wide { width: 100% !important; min-width: 0; max-width: 58%; }
	.bam-ui.bam-portal--login { margin: 20px 14px 44px; max-width: none; }
	.bam-ui .bam-stat-row { grid-template-columns: 1fr; }
	/* the older stylesheet forces one column here with !important, so this must too */
	.bam-ui.bam-admin-portal .bam-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.bam-ui .bam-card form { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
	.bam-ui .bam-hero__title { font-size: 1.45rem; }
	.bam-ui.bam-portal--login > *:not(.bam-login__brand) { margin-left: 20px; margin-right: 20px; }
	.bam-ui .bam-login__brand { padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.bam-ui .bam-btn, .bam-ui .bam-tab, .bam-ui .bam-chip, .bam-ui .bam-seg__opt span { transition: none; }
	.bam-ui .bam-btn:hover { transform: none; }
}
@media print {
	.bam-ui .bam-hero, .bam-ui .bam-tabs, .bam-ui .bam-class-picker, .bam-ui .bam-chips { display: none; }
	.bam-ui .bam-panel, .bam-ui .bam-card, .bam-ui .bam-stat { box-shadow: none; }
	body.bam-portal-page { background: #fff; }
}