/* The operator's console: type, hairlines and whitespace, and nothing else.

   The rule the whole sheet follows is that colour has to earn its place. The
   planner is where the colour lives — here a hue only appears when it is
   carrying a state somebody has to act on, and even then it is one dot beside
   a word that says the same thing. Everything structural is a hairline; there
   are no cards, no shadows and no fills. */

.admin {
	/* One hairline, defined once, so every rule on the page is the same weight
	   and the grid reads as a grid rather than a set of boxes. */
	--admin-rule: color-mix(in srgb, var(--color-text-subtle) 40%, transparent);
	--admin-gutter: clamp(1.25rem, 5vw, 3rem);

	/* The only three hues on the page. Darker than the planner's equivalents:
	   these are drawn at half a line-height across, and a small mark needs 3:1
	   against the page where a block of colour does not. */
	--admin-failing: #8f3535;
	--admin-stale: #8a5c12;
	--admin-waiting: #2f5cb0;

	color: var(--color-text);
	font-size: 0.9375rem;
}

/* Header ------------------------------------------------------------------ */

.admin-bar {
	align-items: baseline;
	border-bottom: 1px solid var(--admin-rule);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	padding: var(--space-md) var(--admin-gutter);
}

/* The public page's wordmark, borrowed whole: small, letterspaced, the name
   itself picked out in weight rather than colour. */
.admin-mark {
	color: var(--color-text-muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	strong {
		color: var(--color-text);
		font-weight: 700;
	}
}

.admin-nav {
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.admin-nav-link {
	color: var(--color-text-muted);
	font-size: 0.875rem;
	padding-bottom: 0.15em;
	text-decoration: none;
	transition: color 0.15s ease;

	&:hover {
		color: var(--color-text);
	}

	/* The current page is marked by weight and a rule under the word, not by a
	   pill — one less filled shape on a page that is trying not to have any. */
	&.is-current {
		border-bottom: 2px solid var(--color-accent);
		color: var(--color-text);
		font-weight: 600;
	}
}

.admin-leave {
	color: var(--color-text-subtle);
	font-size: 0.8125rem;
	margin-left: auto;
	text-decoration: none;

	&:hover {
		color: var(--color-text);
	}
}

.admin-main {
	margin: 0 auto;
	max-width: 84rem;
	padding: var(--space-xl) var(--admin-gutter) var(--space-2xl);
	width: 100%;
}

/* Headings ---------------------------------------------------------------- */

.admin-title {
	font-size: 1.5rem;
	font-weight: 650;
	letter-spacing: -0.025em;
	margin: 0 0 0.2em;
}

.admin-crumb {
	font-size: 0.8125rem;
	margin: 0 0 var(--space-sm);

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

		&:hover {
			color: var(--color-text);
		}
	}
}

.admin-lede {
	color: var(--color-text-muted);
	margin: 0 0 var(--space-lg);
	max-width: 60ch;

	a {
		color: var(--color-text);
		text-decoration-color: var(--admin-rule);
		text-underline-offset: 0.2em;

		&:hover {
			text-decoration-color: var(--color-accent);
		}
	}
}

.admin-section {
	margin-top: var(--space-xl);
}

.admin-section-title {
	align-items: center;
	display: flex;
	font-size: 1rem;
	font-weight: 650;
	gap: 0.5em;
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-sm);
}

.admin-subtitle {
	color: var(--color-text-subtle);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin: var(--space-lg) 0 var(--space-xs);
	text-transform: uppercase;
}

/* A count or a qualifier trailing a heading, in the heading's shadow. */
.admin-note {
	color: var(--color-text-subtle);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
}

/* The tally above the sync table, which is also its key. */
.admin-key {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
}

/* Figures ----------------------------------------------------------------- */

/* The counts, across the full width. No border and no fill — the whitespace is
   the container, and a rule under the row closes it.

   Every tile is the same four stacked parts, so the row is laid out as one
   grid and each tile takes four of its rows with `subgrid`. That is what makes
   the five numbers, the five labels and the five sparklines sit on the same
   lines as each other, rather than each tile packing itself and the row coming
   out ragged. */
.admin-figures {
	border-bottom: 1px solid var(--admin-rule);
	column-gap: var(--space-xl);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	grid-template-rows: auto auto auto auto;
	margin: 0 0 var(--space-xl);
	/* No row gap: the parts space themselves with padding instead. A gap here
	   would have to be both the rhythm inside a tile and the separation between
	   two rows of tiles when the row wraps, and those want different numbers. */
	row-gap: 0;
}

.admin-figure {
	display: grid;
	grid-row: span 4;
	grid-template-areas:
		"value"
		"label"
		"spark"
		"note";
	grid-template-rows: subgrid;
}

/* The value leads and the label sits under it, which is the reverse of the
   order a description list has to be written in. */
.admin-figure-value {
	font-size: 2.5rem;
	font-weight: 600;
	grid-area: value;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0;
	/* Proportional, not tabular: application.css puts tabular figures on the
	   body, which at this size spaces a number like 121 out until it falls
	   apart. Tabular is for the columns further down, where digits must align. */
	font-variant-numeric: proportional-nums;
}

.admin-figure-label {
	align-self: start;
	color: var(--color-text-muted);
	grid-area: label;
	padding-bottom: var(--space-sm);
}

/* The note closes a tile, so its padding is what separates one row of tiles
   from the next when the row wraps. */
.admin-figure-note {
	align-self: end;
	color: var(--color-text-subtle);
	font-size: 0.8125rem;
	grid-area: note;
	padding: 0.4em 0 var(--space-lg);
}

/* The totals that only ever accumulate: a quiet row, not a set of tiles. */
.admin-tallies {
	border-top: 1px solid var(--admin-rule);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xl);
	margin: 0 0 var(--space-lg);
	padding-top: var(--space-md);
}

.admin-tally {
	display: flex;
	flex-direction: column-reverse;

	dt {
		color: var(--color-text-muted);
		font-size: 0.8125rem;
	}

	dd {
		font-size: 1.25rem;
		font-weight: 600;
		letter-spacing: -0.02em;
		margin: 0;
	}
}

/* Sparkline --------------------------------------------------------------- */

.admin-spark {
	align-self: end;
	display: block;
	grid-area: spark;
	height: 2.25rem;
	width: 100%;
}

.admin-spark-bar {
	fill: var(--color-text-muted);

	/* The day just gone, picked out — it is the one bar you are looking for.
	   The hover step of the accent, not the accent itself: at 2px wide a mark
	   needs the darker one to clear 3:1 against the page. */
	&.is-latest {
		fill: var(--color-accent-hover);
	}
}

.admin-spark-axis {
	stroke: var(--admin-rule);
	stroke-width: 1;
}

/* Tables ------------------------------------------------------------------ */

.admin-columns {
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.admin-table {
	border-collapse: collapse;
	width: 100%;

	th,
	td {
		border-bottom: 1px solid var(--admin-rule);
		padding: 0.65em 1em 0.65em 0;
		text-align: left;
		vertical-align: baseline;
	}

	/* The last rule would be a line under the section with nothing beneath it. */
	tbody tr:last-child td {
		border-bottom: 0;
	}

	th {
		color: var(--color-text-subtle);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.09em;
		text-transform: uppercase;
	}

	td:last-child,
	th:last-child {
		padding-right: 0;
	}

	/* Beats `.admin-table th, td` on specificity, which the bare class does not.
	   The extra right padding keeps a right-aligned number off the column that
	   follows it, which a left-aligned one is never in danger of touching. */
	.admin-num {
		padding-right: 2.5em;
		text-align: right;
	}

	a {
		color: var(--color-text);
		text-decoration-color: var(--admin-rule);
		text-underline-offset: 0.2em;

		&:hover {
			text-decoration-color: var(--color-accent);
		}
	}
}

/* Two tables that are read as figures rather than lists, so they take only the
   width their contents need instead of stretching across the page. */
.admin-table--breakdown,
.admin-table--engagement {
	width: auto;
	min-width: min(100%, 22rem);
}

/* A proportion, drawn once in the muted ink. One colour: these are shares of
   the same whole, not four things that need telling apart. */
/* The one action in the console, so it is a link in button's clothing rather
   than anything that looks like it might do damage. */
.admin-action {
	background: none;
	border: 0;
	color: var(--color-text);
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
	text-decoration-color: var(--admin-rule);
	text-underline-offset: 0.2em;

	&:hover {
		text-decoration-color: var(--color-accent);
	}
}

.admin-flash {
	border-left: 2px solid var(--color-accent);
	color: var(--color-text);
	margin: 0 0 var(--space-lg);
	padding-left: var(--space-sm);
}

.admin-meter-cell {
	width: 60%;
}

.admin-meter {
	background: var(--admin-rule);
	border-radius: 1px;
	display: block;
	height: 0.4em;
	overflow: hidden;
	width: 100%;
}

.admin-meter-fill {
	background: var(--color-text-muted);
	display: block;
	height: 100%;
}

/* Counts line up on their last digit, which is the only way to compare a
   column of them at a glance. */
.admin-num {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* The second line in a cell: the address under the name, the host under the
   calendar. Present, but never competing with the thing it qualifies. */
.admin-sub {
	color: var(--color-text-subtle);
	display: block;
	font-size: 0.8125rem;
	overflow-wrap: anywhere;
}

.admin-nil {
	color: var(--color-text-subtle);
}

/* A timestamp is one thing to read, so it never breaks across lines — the
   column widens for it instead. */
.admin-table time {
	white-space: nowrap;
}

.admin-error {
	color: var(--color-destroy);
	max-width: 32rem;
	overflow-wrap: anywhere;
}

.admin-empty {
	color: var(--color-text-subtle);
	margin: 0;
}

/* State ------------------------------------------------------------------- */

/* A dot and a word. The word is the label — the dot only repeats it in colour,
   so nothing on the page is said in hue alone. Ink stays ink: the text beside
   the dot never takes the state's colour, or the table turns into a rainbow. */
.admin-state {
	align-items: center;
	color: var(--color-text-muted);
	display: inline-flex;
	gap: 0.45em;
	white-space: nowrap;
}

.admin-state-dot {
	background: var(--color-text-subtle);
	border-radius: 50%;
	display: inline-block;
	flex: none;
	height: 0.5em;
	width: 0.5em;
}

/* Four states, three colours — in a row or in the heading above it, the dot
   means the same thing. "Healthy" is the state of almost every row, so
   colouring it would tint the whole page to say "nothing to see"; it keeps the
   neutral dot instead, and the eye is left free for the other three. */
.admin-state--failing .admin-state-dot,
.admin-section-title--failing .admin-state-dot {
	background: var(--admin-failing);
}

.admin-state--stale .admin-state-dot,
.admin-section-title--stale .admin-state-dot {
	background: var(--admin-stale);
}

.admin-state--waiting .admin-state-dot,
.admin-section-title--waiting .admin-state-dot {
	background: var(--admin-waiting);
}