/* Server Status Page - own stylesheet.
 *
 * Loaded AFTER assets/vendor/bootstrap-4.6.2.min.css. Bootstrap provides the reset, grid, typography and form controls; everything
 * specific to this page lives here. The vendored Bootstrap file is a generated artifact and must never be edited.
 *
 * Colours are AID's own palette (desk_layout/modernaviator/assets/scss/_variable.scss), with one deliberate exception: "--spg-orange-darkest"
 * below is not in that palette - see the status icons block for why. Every text/background/icon pair on this page was checked against WCAG
 * AA (4.5:1 for text, 3:1 for borders and graphics); the ratios are recorded in the WI #1630 implementation notes.
 *
 * No JavaScript ships with this site (CSP script-src 'none'), and inline style attributes are blocked as well, so any visual change
 * has to happen in this file.
 */

:root
{
	--spg-black: #2d353c;			/* $black */
	--spg-bg: #CFD8DC;			/* $bg_body */
	--spg-muted: #5c656b;			/* desaturated $black, AA on white */
	--spg-blue: #1E88E5;			/* $blue */
	--spg-blue-dark: #1976D2;		/* $blue_darker */
	--spg-blue-darkest: #1565C0;
	--spg-green: #009688;			/* $green */
	--spg-green-dark: #00796B;		/* $green_darker */
	--spg-green-text: #00695C;
	--spg-orange: #FF9800;			/* $orange */
	--spg-orange-dark: #F57C00;		/* $orange_darker */
	--spg-orange-darkest: #A15C00;		/* not in AID's palette - added for the per-service status icon, see the status icon block below */
	--spg-red: #F44336;			/* $red */
	--spg-red-dark: #D32F2F;		/* $red_darker */
	--spg-red-text: #B71C1C;
	--spg-white: #fff;
}

body
{
	background: var(--spg-bg);
	color: var(--spg-black);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ---------------------------------------------------------------- page chrome */

.spg-header,
.spg-footer
{
	background: var(--spg-black);
	color: var(--spg-white);
}

.spg-header
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
	padding: .75rem 1.5rem;
}

.spg-logo
{
	/* Same rendered size as the AID application header (desk_layout/modernaviator/modernaviator_layout.php: 151x55). */
	height: 55px;
	width: auto;
}

/* The logo is the only in-flow child of the header, so justify-content centres it at every screen width. The page title is taken out of flow
   and pinned right - mirroring the AID application header (logo dead centre, flanking items left and right) - so the length of the title can
   never push the logo off centre. Below 576px it returns to the flow as a centred second row; see the media query at the end of this file. */
.spg-page-title
{
	position: absolute;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: .9375rem;
	letter-spacing: .02em;
}

.spg-main
{
	flex: 1 0 auto;
	max-width: 850px;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.spg-page-heading
{
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------- overall status banner */

/* Combined status derived from all 6 services (SPG_deriveOverallStatus()). Capped at the same 850px the page column itself uses (.spg-main),
   so it never grows wider than the content it summarises. The bad states reuse the .spg-status--* background/color pairs already contrast-
   verified for the pills below - no new colour is introduced here. */
.spg-overall-banner
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem;
	max-width: 850px;
	width: 100%;
	margin: 0 auto 1.5rem;
	padding: 1rem 1.5rem;
	border-radius: .5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	font-size: 1.125rem;
	font-weight: 600;
	text-align: center;
}

.spg-overall-banner-glyph
{
	font-size: 1.25em;
	line-height: 1;
}

.spg-overall--good
{
	background: var(--spg-green-dark);
	color: var(--spg-white);
}

.spg-footer
{
	flex-shrink: 0;
	padding: .75rem 1.5rem;
	font-size: .8125rem;
}

.spg-footer p
{
	margin: 0;
}

/* ---------------------------------------------------------------- public status list */

.spg-service-list
{
	background: var(--spg-white);
	border-radius: .5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	margin-bottom: 0;
	overflow: hidden;
}

.spg-service-row
{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.spg-service-row:last-child
{
	border-bottom: 0;
}

/* Fixed width so every row's icon lines up on the same vertical edge regardless of that icon's own intrinsic aspect ratio (check.svg and
   xmark.svg are narrower than the square icons at a fixed 30px height - see the status icons block). */
.spg-service-status
{
	display: flex;
	justify-content: center;
	width: 30px;
	flex-shrink: 0;
	padding-top: 2px;
}

.spg-service-subtitle
{
	margin: .25rem 0 0;
	font-size: .8125rem;
	color: var(--spg-muted);
}

.spg-service-info
{
	/* Lives in the name column, directly under the service name, so it is left aligned with it while the pill stays top right. */
	margin: .5rem 0 0;
	white-space: normal;
	max-width: 40rem;
	font-size: .875rem;
}

/* ---------------------------------------------------------------- status icons */

/* Each service row shows one vendored FontAwesome Pro SVG icon (public/assets/vendor/font-awesome/, sourced from
 * desk_layout/_assets/font-awesome/svgs/solid/ under AID's commercial FontAwesome licence - see ARCHITECTURE.md Section T "Vendored assets").
 * The icon is not wrapped in a coloured pill any more: colour is carried by the icon's own foreground (fill: currentColor, set via colour on
 * each ".spg-status-icon--*" class below), and shape by which icon is used - so the signal still survives colour blindness even without a
 * background chip. The full text label lives in an adjacent ".sr-only" span (index.php), so the accessible name is unchanged.
 *
 * Contrast is against this row's white card background (.spg-service-list), not a coloured background as it was for the pill, so the pairs
 * had to be re-verified for their new role (WCAG non-text/graphic minimum is 3:1; the figures below clear it with margin):
 *   Running       #00796B on #fff = 5.32:1
 *   Info          #1976D2 on #fff = 4.60:1
 *   Degraded      #A15C00 on #fff = 5.19:1
 *   Intermittent  #A15C00 on #fff = 5.19:1
 *   Major         #D32F2F on #fff = 4.98:1
 * Running/Info/Major reuse the same "_dark(er)" tokens already used elsewhere on this page - they clear 3:1 against white too, so no new
 * colour was needed. Degraded and Intermittent could not: AID's palette has no orange shade dark enough to clear 3:1 on white (the base
 * $orange is 2.16:1, $orange_darker is 2.70:1 - both were tuned to pair with dark text ON TOP of an orange background, not to stand alone
 * on white). "--spg-orange-darkest" (#A15C00) is a new token added specifically for this - it exists only in this file, not in AID's shared
 * SCSS palette, since the two independence directions in ARCHITECTURE.md Section T forbid this page depending on desk_layout/ at runtime,
 * and this shade is not needed anywhere else in the main application. Degraded and Intermittent intentionally share this one colour: the two
 * icons already differ by shape (a downward trend chart vs. a triangle with "!"), so colour does not also need to tell them apart. */

.spg-status-icon
{
	display: inline-block;
	height: 30px;
	width: auto;
	vertical-align: middle;
	fill: currentColor;
}

.spg-status-icon--running
{
	color: var(--spg-green-dark);
}

.spg-status-icon--info
{
	color: var(--spg-blue-dark);
}

.spg-status-icon--degraded,
.spg-status-icon--intermittent
{
	color: var(--spg-orange-darkest);
}

.spg-status-icon--major
{
	color: var(--spg-red-dark);
}

.spg-status--running
{
	background: var(--spg-green-dark);
}

.spg-status--info
{
	background: var(--spg-blue-dark);
}

.spg-status--degraded
{
	background: var(--spg-orange);
	color: var(--spg-black);
}

.spg-status--intermittent
{
	background: var(--spg-orange-dark);
	color: var(--spg-black);
}

.spg-status--major
{
	background: var(--spg-red-dark);
}

/* ---------------------------------------------------------------- banners */

.spg-banner
{
	border-radius: .25rem;
	padding: .75rem 1rem;
	margin-bottom: 1rem;
}

.spg-banner--error
{
	background: #FDECEA;
	color: var(--spg-red-text);
	border: 1px solid var(--spg-red);
}

.spg-banner--success
{
	background: #E6F4F1;
	color: var(--spg-green-text);
	border: 1px solid var(--spg-green);
}

.spg-banner-icon
{
	margin-right: .25rem;
}

/* ---------------------------------------------------------------- login / 2FA */

.spg-auth-card
{
	max-width: 22rem;
	margin: 3rem auto;
	background: var(--spg-white);
	padding: 2rem;
	border-radius: .5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.spg-auth-card h1
{
	font-size: 1.25rem;
	margin-bottom: 1.25rem;
}

.spg-auth-hint
{
	font-size: .875rem;
	color: var(--spg-muted);
}

/* ---------------------------------------------------------------- admin editor */

.spg-admin-topbar
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.spg-admin-topbar h1
{
	font-size: 1.5rem;
	margin: 0;
}

.spg-logout-form
{
	margin: 0;
}

.spg-admin-row
{
	background: var(--spg-white);
	border-radius: .5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	padding: 1rem;
	margin-bottom: 1rem;
}

.spg-admin-row > label
{
	display: block;
	font-weight: 600;
	margin-bottom: .5rem;
}

.spg-admin-row-hint
{
	display: block;
	font-weight: 400;
	font-size: .8125rem;
	color: var(--spg-muted);
}

.spg-admin-row select
{
	margin-bottom: .5rem;
}

/* ---------------------------------------------------------------- admin: status level legend */

/* Reference card, directly below .spg-admin-topbar, for the operator's own house rules on when to use each of the 5 levels. Same "one card,
   divided rows" shape as .spg-service-list on the public page. The icon markup and its 30px column are the exact same ones used there
   (.spg-status-icon / .spg-service-status), so the icon-to-level mapping stays reinforced in both places. The description per level is
   deliberately left blank in the markup - it is written directly into admin.php, not entered through any form. */
.spg-status-legend
{
	background: var(--spg-white);
	border-radius: .5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.spg-status-legend-item
{
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.spg-status-legend-item:last-child
{
	border-bottom: 0;
}

.spg-status-legend-text strong
{
	display: block;
}

.spg-status-legend-text p
{
	margin: .25rem 0 0;
	font-size: .875rem;
	color: var(--spg-muted);
}

/* ---------------------------------------------------------------- Bootstrap overrides (AID colours, AA contrast) */

a
{
	color: var(--spg-blue-darkest);
}

a:hover,
a:focus
{
	color: var(--spg-blue-dark);
}

.btn-primary
{
	background-color: var(--spg-blue-dark);
	border-color: var(--spg-blue-dark);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active
{
	background-color: var(--spg-blue-darkest);
	border-color: var(--spg-blue-darkest);
}

/* Bootstrap's default secondary grey reaches only 3.24:1 on the page background; #495057 reaches 5.65:1. */
.btn-outline-secondary
{
	color: #495057;
	border-color: #495057;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active
{
	background-color: #495057;
	border-color: #495057;
	color: var(--spg-white);
}

.form-control:focus,
.custom-select:focus,
.btn:focus
{
	border-color: var(--spg-blue);
	box-shadow: 0 0 0 .2rem rgba(30, 136, 229, .35);
}

/* ---------------------------------------------------------------- small screens */

@media (max-width: 576px)
{
	.spg-service-row
	{
		flex-direction: column;
	}

	.spg-header
	{
		gap: .5rem;
	}

	.spg-page-title
	{
		position: static;
		transform: none;
		width: 100%;
		text-align: center;
	}
}