/*
//============================================================+
// File name   : serene2.css
// Begin       : 2026-10-08
//
// Description : "Serene 2" theme for TCExam public area.
//               SERENE v2 = v1 + rebuilt login screen.
//               Everything except the login page is imported
//               untouched from serene.css (v1), so both versions
//               stay visually identical everywhere else.
//               The login rebuild is pure CSS, scoped to
//               body:has(#form_login) - on browsers without
//               :has() support the login page simply falls back
//               to the v1 appearance (graceful degradation).
//
// License:
//    Can be freely used with TCExam (GNU AGPL context).
//============================================================+
*/

@import url("serene.css");

/* ============================================================
   v2 LOGIN SCREEN REBUILD
   Scope: body:has(#form_login) - the login form only exists on
   the authentication screen (anonymous users), so logged-in
   pages are untouched.
   ============================================================ */

/* soft tinted backdrop for the auth screen */
body:has(#form_login) {
	background:
		radial-gradient(1100px 480px at 50% -180px, rgba(47, 107, 166, 0.16), rgba(47, 107, 166, 0) 60%),
		var(--sr-page-bg);
}

/* drop the navigation chrome: no menu, no user bar on auth screen */
body:has(#form_login) div.scrollmenu,
body:has(#form_login) div.userbar {
	display: none;
}

/* page title becomes the heading above the card */
body:has(#form_login) h1 {
	text-align: center;
	border-bottom: 0;
	font-size: 20px;
	margin: 42px auto 16px auto;
	max-width: 420px;
	padding: 0 16px;
}

body:has(#form_login) h1 + div.container {
	max-width: 420px;
	margin: 0 auto;
	padding: 0 16px 8px 16px;
}

/* registration link above the card becomes a soft pill */
body:has(#form_login) div.container > small {
	display: block;
	text-align: center;
	margin: 0 0 14px 0;
}

body:has(#form_login) div.container > small a {
	display: inline-block;
	background: var(--sr-surface);
	border: 1px solid var(--sr-border);
	border-radius: 999px;
	color: var(--sr-text-muted);
	font-size: 12.5px;
	font-weight: 500;
	padding: 5px 16px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body:has(#form_login) div.container > small a:hover {
	background: var(--sr-primary-soft);
	border-color: var(--sr-primary);
	color: var(--sr-primary);
	text-decoration: none;
}

/* the auth card */
body:has(#form_login) div.tceformbox {
	background: var(--sr-surface);
	border: 1px solid var(--sr-border);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(20, 40, 64, 0.05), 0 12px 32px rgba(20, 40, 64, 0.10);
	padding: 0 28px 20px 28px;
	overflow: hidden;
	text-align: left;
}

/* gradient accent strip across the top of the card */
body:has(#form_login) div.tceformbox::before {
	content: "";
	display: block;
	height: 4px;
	margin: 0 -28px 24px -28px;
	background: linear-gradient(90deg, var(--sr-primary), #7fa9cf 60%, #b9cfe4);
}

/* stacked modern fields: label above the input */
#form_login .row {
	margin: 0 0 16px 0;
	text-align: left;
}

#form_login .row span.label,
#form_login .row span.formw {
	float: none;
	display: block;
	width: 100%;
	text-align: left;
	padding: 0;
	box-sizing: border-box;
}

#form_login .row span.label {
	font-size: 13px;
	margin: 0 0 6px 0;
	color: var(--sr-text-strong);
}

#form_login .row span.formw input,
#form_login .row span.formw select {
	font-size: 15px;
	padding: 10px 12px;
}

/* the forgot-password link sits under the password field */
#form_login .row span.formw a {
	font-size: 13px;
}

/* full-width primary sign-in button */
#form_login #login {
	width: 100%;
	font-size: 15px;
	font-weight: 600;
	padding: 11px 16px;
	margin: 4px 0 0 0;
	border-radius: var(--sr-radius);
}

/* help note below the card */
body:has(#form_login) div.pagehelp {
	background: transparent;
	border: 0;
	border-radius: 0;
	text-align: center;
	padding: 14px 6px 0 6px;
	margin: 0;
	font-size: 12px;
}

/* smaller screens */
@media (max-width: 760px) {
	body:has(#form_login) h1 {
		margin: 24px auto 12px auto;
		font-size: 18px;
	}

	body:has(#form_login) div.tceformbox {
		padding: 0 20px 16px 20px;
	}

	body:has(#form_login) div.tceformbox::before {
		margin: 0 -20px 20px -20px;
	}
}

//============================================================+
// END OF FILE
//============================================================+