/* FDTC Students: My Account, sign-up and the staff Students screen.
   Colours follow the fdtc theme palette (theme.json), with fallbacks for WP Admin. */

.fdtc-st {
	--st-blue: var(--wp--preset--color--brand-blue, #283090);
	--st-blue-dark: var(--wp--preset--color--brand-blue-dark, #1c2268);
	--st-red: var(--wp--preset--color--brand-red-dark, #b8121a);
	--st-ink: var(--wp--preset--color--contrast, #1b1d3a);
	--st-muted: var(--wp--preset--color--muted, #4a4e6b);
	--st-line: var(--wp--preset--color--line, #d9dcea);
	--st-panel: var(--wp--preset--color--panel, #eef0f8);
	--st-sand: var(--wp--preset--color--sand, #f7f1e8);
	color: var(--st-ink);
}

.fdtc-st .screen-reader-text,
.fdtc-st-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Logged-in bar and tabs */
.fdtc-st-bar {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1rem;
}
.fdtc-st-bar p { margin: 0; }

.fdtc-st-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 2px solid var(--st-line);
}
.fdtc-st-tabs a {
	display: block;
	padding: .6rem 1rem;
	margin-bottom: -2px;
	border-bottom: 3px solid transparent;
	color: var(--st-muted);
	font-weight: 600;
	text-decoration: none;
}
.fdtc-st-tabs a:hover { color: var(--st-blue); }
.fdtc-st-tabs a[aria-current="page"] {
	color: var(--st-blue);
	border-bottom-color: var(--wp--preset--color--brand-red, #e81820);
}
.fdtc-st-count {
	display: inline-block;
	min-width: 1.4em;
	padding: 0 .35em;
	border-radius: 1em;
	background: var(--st-panel);
	font-size: .8em;
	text-align: center;
}
.fdtc-st-panel { padding: 1.5rem 0; }
.fdtc-st .fdtc-st-heading { margin: 0 0 1rem; font-size: 1.35rem; } /* outranks the theme's .fdtc-content h2 margin */
.fdtc-st .fdtc-st-heading:not(:first-child) { margin-top: 2rem; }

/* Forms */
.fdtc-st-form { max-width: 46rem; }
.fdtc-st-group {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem 1.25rem;
	border: 1px solid var(--st-line);
	border-radius: 8px;
}
.fdtc-st-group legend { padding: 0 .4rem; font-weight: 700; }
.fdtc-st-group--office { background: var(--st-sand); }
.fdtc-st-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem 1.25rem;
}
.fdtc-st-field { display: flex; flex-direction: column; gap: .3rem; }
.fdtc-st-field--wide { grid-column: 1 / -1; }
.fdtc-st-field > label { font-weight: 600; }
.fdtc-st-field--bool > label { font-weight: 400; display: flex; gap: .5rem; align-items: center; }
.fdtc-st-field--bool { justify-content: flex-end; }
.fdtc-st-field[hidden] { display: none; }
.fdtc-st-req { color: var(--st-red); }
.fdtc-st-help { color: var(--st-muted); font-size: .875rem; }
.fdtc-st input:not([type="checkbox"]):not([type="hidden"]):not([type="submit"]),
.fdtc-st select,
.fdtc-st textarea,
.fdtc-st-auth .login-username input,
.fdtc-st-auth .login-password input {
	width: 100%;
	box-sizing: border-box;
	padding: .55rem .7rem;
	border: 1px solid #8a8fb0;
	border-radius: 6px;
	background: #fff;
	color: inherit;
	font: inherit;
}
.fdtc-st input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--st-blue); }
.fdtc-st :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--st-blue);
	outline-offset: 1px;
}

/* Buttons and links */
.fdtc-st-btn,
.fdtc-st-auth input[type="submit"] {
	display: inline-block;
	padding: .65rem 1.3rem;
	border: 2px solid var(--st-blue);
	border-radius: 999px;
	background: var(--st-blue);
	color: #fff;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.fdtc-st-btn:hover,
.fdtc-st-btn:focus-visible,
.fdtc-st-auth input[type="submit"]:hover {
	background: var(--st-blue-dark);
	border-color: var(--st-blue-dark);
	color: #fff;
}
.fdtc-st-btn--quiet { background: transparent; color: var(--st-blue); }
.fdtc-st-btn--quiet:hover { color: #fff; }
.fdtc-st-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1rem; }
.fdtc-st-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--st-blue);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.fdtc-st-link--danger { color: var(--st-red); }
.fdtc-st-inline { display: inline; margin: 0; }

/* Notices */
.fdtc-st-notice {
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	border-left: 4px solid;
	border-radius: 4px;
}
.fdtc-st-notice p, .fdtc-st-notice ul { margin: 0; }
.fdtc-st-notice ul { margin-top: .35rem; padding-left: 1.25rem; }
.fdtc-st-notice--success { border-color: #1e7a3c; background: #e8f5ec; }
.fdtc-st-notice--error { border-color: var(--st-red); background: #fdecec; }

/* Lists */
.fdtc-st-table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.fdtc-st-table :is(th, td) {
	padding: .6rem .75rem;
	border-bottom: 1px solid var(--st-line);
	text-align: left;
	vertical-align: top;
}
.fdtc-st-table thead th { background: var(--st-panel); font-size: .9rem; }
.fdtc-st-table tr.is-deceased td { color: var(--st-muted); }
.fdtc-st-row-actions { white-space: nowrap; text-align: right !important; }
.fdtc-st-row-actions > * + * { margin-left: .75rem; }
.fdtc-st-empty { color: var(--st-muted); }

@media (max-width: 700px) {
	.fdtc-st-table thead { display: none; }
	.fdtc-st-table, .fdtc-st-table tbody, .fdtc-st-table tr, .fdtc-st-table td { display: block; }
	.fdtc-st-table tr { padding: .5rem 0; border-bottom: 1px solid var(--st-line); }
	.fdtc-st-table td { padding: .2rem 0; border: 0; }
	.fdtc-st-table td[data-label]:not(:empty)::before {
		content: attr(data-label) ": ";
		font-weight: 600;
	}
	.fdtc-st-table td[data-label]:empty { display: none; }
	.fdtc-st-row-actions { text-align: left !important; padding-top: .4rem !important; }
}

/* Logged-out page */
.fdtc-st-auth {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 2rem;
}
.fdtc-st-auth > .fdtc-st-notice { grid-column: 1 / -1; }
.fdtc-st-auth-col {
	padding: 1.5rem 0;
}
.fdtc-st-auth-col--new {
	padding: 1.5rem;
	border-radius: 8px;
	background: var(--st-panel);
}
.fdtc-st-auth form p { margin: 0 0 1rem; }
.fdtc-st-auth form label { display: block; margin-bottom: .3rem; font-weight: 600; }
.fdtc-st-auth .login-remember label { font-weight: 400; }

/* WP Admin */
.wp-admin .fdtc-st { max-width: 70rem; }
.wp-admin .fdtc-st-tabs a { font-size: 14px; }
.fdtc-st-meta { color: #50575e; }
.fdtc-st-inactive { color: #b32d2e; }

/* ------------------------------------------------------------------
   Compact layout (account and sign-up pages)
   ------------------------------------------------------------------ */

/* Smaller title band and a wider working area on pages with the account forms. */
.fdtc-account-page .fdtc-title-band {
	padding-top: 1.1rem !important;
	padding-bottom: 1.1rem !important;
}
.fdtc-account-page .fdtc-title-band .wp-block-post-title {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.fdtc-account-page .fdtc-page-body {
	padding-top: 1.25rem !important;
}
.fdtc-account-page .fdtc-content.is-layout-constrained > .fdtc-st,
.fdtc-account-page .fdtc-content.is-layout-constrained > .fdtc-st-auth {
	max-width: 64rem;
}

.fdtc-st { font-size: .95rem; }
.fdtc-st-bar { align-items: center; margin-bottom: .5rem; }
.fdtc-st-bar p { display: flex; align-items: center; gap: .5rem; }

/* Tabs wrap to a second line when they don't fit (no hidden sideways scrolling). */
.fdtc-st-tabs ul {
	gap: 0;
}
.fdtc-st-tabs li { flex: none; }
.fdtc-st-tabs a { padding: .45rem .8rem; white-space: nowrap; }
.fdtc-st-panel { padding: 1rem 0; }
.fdtc-st .fdtc-st-heading { margin-bottom: .6rem; font-size: 1.2rem; }
.fdtc-st .fdtc-st-heading:not(:first-child) { margin-top: 1.25rem; }

.fdtc-st-form { max-width: none; }
.fdtc-st-group {
	margin: 0 0 .9rem;
	padding: .5rem 1rem .85rem;
}
.fdtc-st-group legend { font-size: .95rem; }
.fdtc-st-grid {
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: .6rem 1rem;
}
.fdtc-st-field { gap: .2rem; }
.fdtc-st-field > label { font-size: .9rem; }
.fdtc-st-help { font-size: .8rem; line-height: 1.3; }
.fdtc-st input:not([type="checkbox"]):not([type="hidden"]):not([type="submit"]),
.fdtc-st select,
.fdtc-st textarea {
	padding: .4rem .6rem;
}
.fdtc-st textarea { min-height: 4.5rem; }
.fdtc-st-actions { margin-top: .5rem; }
.fdtc-st-btn,
.fdtc-st-auth input[type="submit"] { padding: .5rem 1.15rem; }
.fdtc-st-table :is(th, td) { padding: .45rem .6rem; vertical-align: middle; }
.fdtc-st-auth { gap: 1.25rem; }
.fdtc-st-auth-col { padding: .5rem 0; }
.fdtc-st-auth-col--new { padding: 1.1rem 1.25rem; }
.fdtc-st-auth form p { margin-bottom: .75rem; }

/* ------------------------------------------------------------------
   Photos
   ------------------------------------------------------------------ */
.fdtc-st-photo {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: var(--st-panel);
}
.fdtc-st-photo--none {
	display: grid;
	place-items: center;
	color: var(--st-muted);
	font-size: 1.6em;
}
.fdtc-st-photo--bar {
	width: 2rem;
	height: 2rem;
	font-size: 1rem;
}
.fdtc-st-photo--list {
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.1rem;
}
.fdtc-st-table td[data-label="Photo"] { width: 3.5rem; }

.fdtc-st-photobox {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 .9rem;
	padding: .75rem 1rem;
	border: 1px solid var(--st-line);
	border-radius: 8px;
}
.fdtc-st-photobox-img {
	flex: none;
	width: 5.5rem;
	height: 5.5rem;
}
.fdtc-st-photobox-img .fdtc-st-photo--none { font-size: 2.25rem; }
.fdtc-st-photobox-body p { margin: 0; }
.fdtc-st-photobox-title { font-weight: 700; }
.fdtc-st-photobox-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: .4rem !important;
}
.fdtc-st-photobox-status { min-height: 1.2em; margin-top: .3rem !important; color: var(--st-muted); font-size: .85rem; }
.fdtc-st-photobox-status.is-error { color: var(--st-red); }
.fdtc-st-photobox.is-busy .fdtc-st-photobox-img { opacity: .5; }
.fdtc-st-photobox.is-busy button { pointer-events: none; opacity: .6; }
.fdtc-st-btn--small { padding: .35rem .9rem; font-size: .9rem; }

/* Webcam window (computers). */
.fdtc-st-cam {
	width: min(36rem, 94vw);
	padding: 1rem;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(27, 29, 58, .35);
}
.fdtc-st-cam::backdrop { background: rgba(27, 29, 58, .55); }
.fdtc-st-cam video,
.fdtc-st-cam canvas {
	display: block;
	width: 100%;
	border-radius: 6px;
	background: #000;
}
.fdtc-st-cam [hidden] { display: none !important; }
.fdtc-st-cam-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .75rem 0 0;
}

@media (max-width: 700px) {
	.fdtc-st-table td[data-label="Photo"] { width: auto; }
	.fdtc-st-table td[data-label="Photo"]::before { display: none; }
	.fdtc-st-photobox { padding: .6rem .75rem; gap: .75rem; }
	.fdtc-st-photobox-img { width: 4.5rem; height: 4.5rem; }
}

.fdtc-st-photo--none svg { width: 55%; height: 55%; }
.fdtc-st-cam { font-size: 1rem; }

/* Phones: every section visible at once as wrapped pill buttons (no sideways scrolling). */
@media (max-width: 700px) {
	.fdtc-st-tabs ul {
		flex-wrap: wrap;
		gap: .4rem;
		overflow: visible;
		padding-bottom: .75rem;
	}
	.fdtc-st-tabs a {
		margin: 0;
		padding: .35rem .75rem;
		border: 1.5px solid var(--st-line);
		border-radius: 999px;
		background: #fff;
		font-size: .9rem;
	}
	.fdtc-st-tabs a[aria-current="page"] {
		border-color: var(--st-blue);
		background: var(--st-blue);
		color: #fff;
	}
	.fdtc-st-tabs a[aria-current="page"] .fdtc-st-count {
		background: rgba(255, 255, 255, .25);
		color: #fff;
	}
}