:root {
	--pico-font-size: 16px;

	/* Admin shell tunables. Pico's container caps at 1450px; admin pages
	 * have wide tables and dense data, so we let them breathe further. */
	--admin-shell-max: 1600px;
	--admin-shell-pad-x: 1rem;
	--admin-tap-min: 44px;
}

@media (min-width: 768px) {
	:root {
		--admin-shell-pad-x: 1.5rem;
	}
}

@media (min-width: 1280px) {
	:root {
		--admin-shell-pad-x: 2rem;
	}
}

/* Fluid admin container: uses full viewport up to --admin-shell-max,
 * with horizontal padding that scales with viewport width. Replaces
 * Pico's narrower `.container` for /ui/* pages. */
.admin-shell {
	width: 100%;
	max-width: var(--admin-shell-max);
	margin-inline: auto;
	padding-inline: var(--admin-shell-pad-x);
	box-sizing: border-box;
}

/* ---------- top bar + responsive nav ---------- */

.admin-header {
	background: var(--pico-card-background-color);
	border-bottom: 1px solid var(--pico-muted-border-color);
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.admin-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}
}

.admin-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.75rem;
}

.admin-brand {
	color: var(--pico-primary);
	text-decoration: none;
	font-size: 1.1rem;
	margin-right: auto;
}

.admin-brand strong {
	color: var(--pico-primary);
}

/* CSS-only hamburger: checkbox holds state, ~ selector reveals the nav. */
.admin-nav-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Scope the burger's display under .admin-header so it beats Pico's
 * `[type=checkbox]~label { display:inline-block }` (specificity 0,1,1):
 * the burger label is a sibling of the toggle checkbox, so the bare
 * `.admin-nav-burger` (0,1,0) rule lost and the burger showed at desktop. */
.admin-header .admin-nav-burger {
	display: none;
}
.admin-nav-burger {
	width: var(--admin-tap-min);
	height: var(--admin-tap-min);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	border-radius: 6px;
}

.admin-nav-burger:hover {
	background: var(--pico-muted-border-color);
}

.admin-nav-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--pico-color);
	border-radius: 1px;
	transition: transform 0.15s, opacity 0.15s;
}

.admin-nav-toggle:focus-visible + .admin-nav-burger {
	outline: 2px solid var(--pico-primary);
	outline-offset: 2px;
}

.admin-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	align-items: center;
}

.admin-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--admin-tap-min);
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	color: var(--pico-color);
	text-decoration: none;
	white-space: nowrap;
}

.admin-nav a:hover,
.admin-nav a:focus-visible {
	background: var(--pico-muted-border-color);
	color: var(--pico-primary);
}

@media (max-width: 767.98px) {
	.admin-header .admin-nav-burger {
		display: flex;
	}
	.admin-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: 0.5rem;
		border-top: 1px solid var(--pico-muted-border-color);
	}
	.admin-nav-toggle:checked ~ .admin-nav {
		display: flex;
	}
	.admin-nav a {
		width: 100%;
	}
	.admin-nav-toggle:checked ~ .admin-nav-burger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.admin-nav-toggle:checked ~ .admin-nav-burger span:nth-child(2) {
		opacity: 0;
	}
	.admin-nav-toggle:checked ~ .admin-nav-burger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

.admin-main {
	padding-bottom: 2rem;
}

.admin-footer {
	margin-top: 2rem;
	padding-block: 1rem;
	border-top: 1px solid var(--pico-muted-border-color);
	color: var(--pico-muted-color);
}

nav ul li strong {
	color: var(--pico-primary);
}
.badge {
	display: inline-block;
	padding: 0.15em 0.5em;
	border-radius: 4px;
	font-size: 0.85em;
	font-weight: 600;
}
.badge-active {
	background: var(--pico-ins-color);
	color: #fff;
}
.badge-suspended {
	background: var(--pico-del-color);
	color: #fff;
}
.badge-label {
	background: var(--pico-primary-background);
	color: var(--pico-primary-inverse);
}
.badge-label-negated {
	background: var(--pico-muted-border-color);
	color: var(--pico-muted-color);
	text-decoration: line-through;
}
.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}
@media (max-width: 359.98px) {
	.stat-grid {
		grid-template-columns: 1fr;
	}
}
.stat-card {
	text-align: center;
	padding: 1.5rem 1rem;
}
.stat-card h2 {
	margin-bottom: 0.25rem;
	font-size: 2.5rem;
}
.stat-card p {
	margin: 0;
	color: var(--pico-muted-color);
}
a.stat-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.stat-card-pending {
	background: color-mix(in oklch, var(--pico-primary) 10%, transparent);
	border: 1px solid var(--pico-primary);
}
.stat-card-pending h2 {
	color: var(--pico-primary);
}
.stat-card-pending p {
	color: var(--pico-primary);
	font-weight: 600;
}
.htmx-indicator {
	display: none;
}
.htmx-request .htmx-indicator {
	display: inline;
}
.htmx-request.htmx-indicator {
	display: inline;
}

/* ---- Feature-flags page (internal ref) ---- */

/* Pill badges: one consistent shape, never wrap (so "off · unset" stays one
   line). Colour by modifier rather than per-call inline styles. */
.fbadge {
	display: inline-block;
	white-space: nowrap;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}
.fbadge--on { background: #15803d; }
.fbadge--off { background: #475569; }
.fbadge--unset { background: #b45309; }
.fbadge--rollout { background: #2563eb; }
.fbadge--override { background: #7c3aed; }
.fbadge--danger { background: #b00020; }
.fbadge--warn { background: #b45309; }
.fbadge--muted { color: var(--pico-muted-color); font-weight: 500; }

/* Flag table: roomy rows, top-aligned, a sensible column rhythm. */
.flags-table td { vertical-align: top; }
.flags-table th:nth-child(1), .flags-table td:nth-child(1) { width: 34%; }
.flags-table code.flag-key { font-size: 0.95rem; font-weight: 600; }
.flags-table .flag-env { color: var(--pico-muted-color); }
.flags-table .flag-desc { display: block; margin-top: 0.15rem; color: var(--pico-muted-color); }

/* Live controls: compact, colour-coded, two tidy rows. Overrides Pico's
   large default buttons so the cluster fits one cell without shouting. */
.flag-controls { display: flex; flex-direction: column; gap: 0.4rem; min-width: 15rem; }
.flag-controls .row { display: flex; gap: 0.4rem; align-items: stretch; margin: 0; }
.flag-controls button {
	padding: 0.3rem 0.7rem;
	font-size: 0.82rem;
	margin: 0;
	width: auto;
	white-space: nowrap;
}
.flag-controls .btn-on { --pico-background-color: #15803d; --pico-border-color: #15803d; }
.flag-controls .btn-off { --pico-background-color: #475569; --pico-border-color: #475569; }
.flag-controls .rollout-input { max-width: 5.5rem; margin: 0; padding: 0.3rem 0.5rem; }
.flag-controls-note { color: var(--pico-muted-color); font-size: 0.82rem; }

/* "How this works" disclosure keeps the page lead short. */
.flags-help { color: var(--pico-muted-color); }
.flags-help summary { cursor: pointer; color: var(--pico-color); font-weight: 600; }

/* ---------- responsive table primitives (used across admin pages) ---------- */

/* Wrap any wide table that we'd rather scroll than reflow.
 * Apply to a containing element (often a <figure>). */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Card-reflow opt-in. At phone widths each <tr> becomes a card; each
 * <td> uses its `data-label="…"` as a small caption. Tables opt in by
 * adding class="table-cards" to the <table>. */
@media (max-width: 639.98px) {
	.table-cards,
	.table-cards thead,
	.table-cards tbody,
	.table-cards tr,
	.table-cards td,
	.table-cards th {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.table-cards thead {
		position: absolute;
		left: -10000px;
	}
	.table-cards tr {
		margin-bottom: 0.75rem;
		padding: 0.75rem;
		border: 1px solid var(--pico-muted-border-color);
		border-radius: 8px;
		background: var(--pico-card-background-color);
	}
	.table-cards td {
		padding: 0.35rem 0;
		border: 0;
		text-align: left !important;
		white-space: normal !important;
	}
	.table-cards td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 0.75rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--pico-muted-color);
		margin-bottom: 0.15rem;
	}
	.table-cards td.row-actions {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		padding-top: 0.5rem;
	}
	.table-cards td.row-actions > * {
		width: 100%;
		min-height: var(--admin-tap-min);
		margin: 0 !important;
	}
}

/* Column visibility helpers. */
@media (max-width: 767.98px) {
	.hide-mobile {
		display: none !important;
	}
}
@media (min-width: 768px) {
	.hide-desktop {
		display: none !important;
	}
}

/* Tablet-only column hide: drop secondary table columns in the narrow
 * table range (640–1023px) to keep rows readable, while still showing
 * them in the phone card reflow (<640px) and the full desktop table
 * (≥1024px). */
@media (min-width: 640px) and (max-width: 1023.98px) {
	.col-wide {
		display: none !important;
	}
}

/* Filter bar: stack on phone, side-by-side on tablet+. */
.filter-bar {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
@media (min-width: 576px) {
	.filter-bar {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}
.filter-bar select,
.filter-bar button,
.filter-bar input {
	min-height: var(--admin-tap-min);
}

/* Tap-target floor for phone-sized viewports. */
@media (max-width: 639.98px) {
	button,
	[role="button"],
	a[role="button"] {
		min-height: var(--admin-tap-min);
	}
}

/* ---------- member-detail page ---------- */

/* Long codes (DIDs, webhook URLs, recipient addresses) must wrap inside
 * the reflowed cards rather than forcing horizontal scroll. */
@media (max-width: 639.98px) {
	.table-cards code {
		word-break: break-all;
	}
}

/* In-page section jump bar. Desktop keeps the compact inline "·"-separated
 * look; on phones it becomes a wrap of tappable chips with the separators
 * hidden. */
@media (max-width: 639.98px) {
	.member-section-nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4rem;
	}
	.member-section-nav .nav-sep {
		display: none;
	}
	.member-section-nav a {
		display: inline-flex;
		align-items: center;
		min-height: var(--admin-tap-min);
		padding: 0.4rem 0.7rem;
		border: 1px solid var(--pico-muted-border-color);
		border-radius: 6px;
		text-decoration: none;
	}
}

/* ---------- review-queue page ---------- */

/* The keep-suspended / reactivate action forms: inline with a roomy
 * reason input on desktop, stacked full-width on phones so the input
 * doesn't overflow its old fixed 20rem width. */
.review-action-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.5rem;
}
.review-action-form input {
	flex: 1 1 12rem;
	max-width: 20rem;
	margin: 0;
}
@media (max-width: 639.98px) {
	.review-action-form input {
		max-width: none;
	}
	.review-action-form button {
		width: 100%;
	}
}