/*
 * Appearance for the ghettoVCB status pages, matched to the central nearback
 * server that links here.
 *
 * Nearback loads Bootstrap 5.3 from a CDN.  This does not: the Cube is a
 * diagnostic tool on the backup network, often reached from a remote site or a
 * jump host, and a page that needs the internet to be readable is worst exactly
 * when it is needed most.  These are four tables; the palette and metrics below
 * are Bootstrap's, applied by hand.
 *
 * Light is the default and dark follows the browser, until the toggle is used,
 * after which the choice is remembered - same localStorage key and values as
 * nearback, though a different origin so the two do not share it.
 */

:root {
	--bg:          #f4f6f9;
	--surface:     #ffffff;
	--text:        #212529;
	--muted:       #6c757d;
	--border:      #dee2e6;
	--stripe:      #f8f9fa;
	--hover:       #eef2f7;
	--link:        #0d6efd;
	--head-bg:     #212529;
	--head-text:   #ffffff;
	--accent:      #0dcaf0;
	--th-bg:       #e9ecef;
	--warn:        #997404;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:        #1a1d23;
		--surface:   #212529;
		--text:      #dee2e6;
		--muted:     #adb5bd;
		--border:    #495057;
		--stripe:    #262b31;
		--hover:     #2c3238;
		--link:      #6ea8fe;
		--head-bg:   #16191d;
		--head-text: #f8f9fa;
		--accent:    #0dcaf0;
		--th-bg:     #2c3136;
		--warn:      #ffda6a;
	}
}

:root[data-theme="dark"] {
	--bg:        #1a1d23;
	--surface:   #212529;
	--text:      #dee2e6;
	--muted:     #adb5bd;
	--border:    #495057;
	--stripe:    #262b31;
	--hover:     #2c3238;
	--link:      #6ea8fe;
	--head-bg:   #16191d;
	--head-text: #f8f9fa;
	--accent:    #0dcaf0;
	--th-bg:     #2c3136;
	--warn:      #ffda6a;
}

html {
	color-scheme: light dark;
}

body {
	margin: 0;
	background-color: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		     Arial, "Noto Sans", sans-serif;
	font-size: 0.875rem;
	line-height: 1.5;
}

a {
	color: var(--link);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Top bar, matching nearback's fixed dark navbar */
.navbar {
	background-color: var(--head-bg);
	color: var(--head-text);
	padding: 0.6rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.navbar .brand {
	font-weight: 600;
	font-size: 1rem;
	color: var(--head-text);
}

.navbar .brand .accent {
	color: var(--accent);
}

.navbar a {
	color: rgba(255, 255, 255, .75);
}

.navbar a:hover {
	color: #ffffff;
	text-decoration: none;
}

/*
 * Theme toggle, top right.  Nearback shows a moon while light and a sun while
 * dark - the icon is what you get if you click it.  Its icons come from the
 * Bootstrap Icons webfont over a CDN; these are drawn from primitives instead,
 * for the same reason the rest of this file does not use the CDN.
 *
 * Which icon shows is decided in CSS, so it follows the theme without script.
 */
.theme-toggle {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: transparent;
	color: rgba(255, 255, 255, .75);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: .25rem;
	cursor: pointer;
}

.theme-toggle:hover {
	background-color: rgba(255, 255, 255, .12);
	color: #ffffff;
	border-color: rgba(255, 255, 255, .6);
}

.theme-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.theme-toggle svg {
	width: 1rem;
	height: 1rem;
	display: block;
}

/* Light: offer the moon.  Dark: offer the sun. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
	:root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
}

:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }

main {
	padding: 1.5rem;
}

/* The tables themselves */
table.mytable {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: .375rem;
	border-collapse: collapse;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
}

table.mytable caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 .75rem 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
}

table.mytable caption a {
	font-weight: 400;
}

table.mytable th,
table.mytable td {
	padding: .5rem .75rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

/* Header row */
table.mytable tr:first-child th {
	background-color: var(--th-bg);
	color: var(--text);
	font-weight: 600;
	white-space: nowrap;
}

/* Row striping.  The CGI emits these classes per row. */
th.spec,
th.specalt {
	font-weight: 400;
	color: var(--muted);
	white-space: nowrap;
}

th.specalt,
td.alt {
	background-color: var(--stripe);
}

table.mytable tr:hover th.spec,
table.mytable tr:hover th.specalt,
table.mytable tr:hover td,
table.mytable tr:hover td.alt {
	background-color: var(--hover);
}

table.mytable tr:last-child th,
table.mytable tr:last-child td {
	border-bottom: 0;
}

th.nobg {
	background-color: var(--th-bg);
}

/* A backup older than a fortnight has missed at least one weekly run. */
.stale {
	color: var(--warn);
	font-weight: 600;
}

.age {
	color: var(--muted);
	font-weight: 400;
	white-space: nowrap;
}

.stale .age {
	color: inherit;
	font-weight: 400;
}

@media (max-width: 40rem) {
	main { padding: .75rem; }
	.navbar { padding: .6rem .75rem; gap: 1rem; }
	table.mytable th,
	table.mytable td { padding: .4rem .5rem; }
}