/* Modern look (2026) - loaded after default.css, only overrides it.
   Remove the modern.css <link> in Headers::NormalHeaders() to roll back. */
:root {
	--brand: #005e96;
	--brand-dark: #00476f;
	--brand-ring: rgba(0, 94, 150, .18);
	--bg: #eef2f6;
	--card: #ffffff;
	--text: #1f2933;
	--muted: #6b7785;
	--border: #d5dde5;
}

body {
	background: var(--bg);
	color: var(--text);
}

body, td, div, input {
	font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

#logo {
	height: 110px;
	margin-top: 32px;
	background-size: auto 100%;
}

#main {
	top: 0;
	width: min(420px, calc(100% - 32px));
	margin: 16px auto 40px;
	padding: 4px 0 24px;
	border: 0;
	border-top: 4px solid var(--brand);
	border-radius: 12px;
	background: var(--card);
	box-shadow: 0 10px 30px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .06);
}

body#loggedin #main {
	width: min(640px, calc(100% - 32px));
}

#userinfo {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	height: auto;
	padding: 12px 16px 0;
	font-size: 14px;
	color: var(--muted);
}

input#logout {
	opacity: .6;
	transition: opacity .15s;
}

input#logout:hover {
	opacity: 1;
}

/* status / error messages (filled by showMessage()) */
#message {
	width: auto;
	max-width: none;
	margin: 0 32px;
	font-size: 14px;
}

#message:not(:empty) {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #e8f1f8;
	color: var(--brand-dark);
}

#message.error:not(:empty) {
	background: #fdecec;
	color: #b42318;
}

/* login + change password forms: labels above full-width fields */
table.loginform {
	width: 100%;
	max-width: none;
	padding: 20px 32px 4px;
	box-sizing: border-box;
	border-collapse: collapse;
}

table.loginform, table.loginform tbody, table.loginform tr, table.loginform td {
	display: block;
}

table.loginform tr {
	margin-bottom: 16px;
}

table.loginform td, table.loginform td.text {
	padding: 0;
	text-align: left;
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
}

table.loginform td:first-child {
	margin-bottom: 6px;
}

/* spacer rows / cells from the old two-column layout */
table.loginform tr:not(:has(input)) {
	display: none;
}

table.loginform tr:has(input[type=submit]) td:first-child,
table.loginform tr:has(input[type=submit]) br {
	display: none;
}

table.loginform input[type=text],
table.loginform input[type=password] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 15px;
	font-weight: 400;
	color: var(--text);
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: 8px;
	transition: border-color .15s, box-shadow .15s;
}

table.loginform input[type=text]:focus,
table.loginform input[type=password]:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-ring);
}

table.loginform input[readonly] {
	background: #f4f6f8;
	color: var(--muted);
}

table.loginform input[type=submit] {
	width: 100%;
	margin-top: 4px;
	padding: 11px 16px;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background: var(--brand);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s;
}

table.loginform input[type=submit]:hover {
	background: var(--brand-dark);
}

table.loginform input[type=submit]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--brand-ring);
}

table td.fulltext {
	padding: 0 32px;
	font-size: 13px;
	color: var(--muted);
}

/* logged in: service tiles */
#button_toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding: 24px 16px 4px;
}

input.changepwd, input.rdp, input.owa {
	border-radius: 12px;
	font-size: 14px;
	color: var(--text);
	background-position: center 12px;
	transition: background-color .15s, box-shadow .15s;
}

input.changepwd:hover, input.rdp:hover, input.owa:hover {
	text-decoration: none;
	background-color: #f4f7fa;
	box-shadow: 0 0 0 1px var(--border);
}

/* --- fixes after first review --- */

/* logout icon was white-on-blue-bar; render it dark on the white card */
input#logout {
	filter: brightness(0);
	opacity: .45;
}

/* uniform service tiles: icon on top, label below */
input.changepwd, input.rdp, input.owa {
	width: 150px;
	height: 150px;
	padding-top: 116px;
	background-size: auto 96px;
	background-position: center 10px;
}

/* change password form sits inside the flex toolbar: give it the full row */
#button_toolbar > form:has(table.loginform) {
	flex: 1 1 100%;
}

#button_toolbar table.loginform {
	max-width: 380px;
	margin: 0 auto;
	padding: 0;
}

/* --- RUN brand (colours + logo from run.se) --- */
:root {
	--brand: #22F2A7;
	--brand-dark: #12d18d;
	--brand-ring: rgba(34, 242, 167, .35);
	--ink: #002C2D;
	--bg: #002C2D;
}

#logo {
	height: 64px;
	margin: 48px auto 28px;
	background-image: url('../images/run-logo.svg');
	background-size: auto 100%;
}

#main {
	margin-top: 0;
	border-top-color: var(--brand);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

table.loginform input[type=submit] {
	color: var(--ink);
	background: var(--brand);
	font-weight: 700;
}

table.loginform input[type=submit]:hover {
	background: var(--brand-dark);
}

table.loginform input[type=text]:focus,
table.loginform input[type=password]:focus {
	border-color: #0fa978;
}

#message:not(:empty) {
	background: #e3fbf2;
	color: var(--ink);
}