/* The only hand-written CSS in the console. Pico dresses the semantic HTML; this
   covers the few things it can't know about — chiefly the environment banner. */

.env {
	position: sticky;
	top: 0;
	z-index: 10;
	padding: 0.25rem 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
}

/* Production is meant to be uncomfortable to look at. */
.env-production { background: #b3261e; }
.env-staging    { background: #8a6d00; }
.env-local      { background: #3a4a5a; }

.flash {
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
	border-left: 4px solid;
}
.flash.error  { border-color: #b3261e; }
.flash.notice { border-color: #2e7d32; }

/* Operational tables are for scanning, so trade Pico's comfortable spacing for
   density and keep wide ones scrollable rather than letting the page scroll. */
table { font-size: 0.9rem; }
table :where(th, td) { padding: 0.4rem 0.6rem; }
.scroll { overflow-x: auto; }

td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.muted, .muted { color: var(--pico-muted-color); }

/* Destructive submits. Pico has no danger variant. */
button.danger {
	--pico-background-color: #b3261e;
	--pico-border-color: #b3261e;
	--pico-color: #fff;
}

/* Sign-out sits in the nav; strip the form's block layout so it reads as a link. */
header nav form { margin: 0; }
header nav button { padding: 0.25rem 0.6rem; font-size: 0.8rem; }

/* Confirmation panels: the operator types the target to arm the button. */
.confirm { border: 1px solid #b3261e; padding: 1rem; }
.confirm code { user-select: all; }