/* Beheerlijsten: "mijn baksels", "mijn thuisbakkerijen". Zie inc/tb-beheer.php. */

.tb-beheer-actie { margin: 0 0 1.5rem; }

.tb-btn-groot {
	font-size: 1.05rem;
	padding: 0.9rem 1.5rem;
}

.tb-beheer-aantal {
	color: var(--tb-muted);
	margin: 0 0 1rem;
}

.tb-beheer-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.tb-beheer-item {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	gap: 1rem;
	align-items: center;
	padding: 1rem;
	background: var(--tb-surface);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-card);
}

.tb-beheer-beeld img,
.tb-beheer-geenbeeld {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--tb-r-img);
	background: var(--tb-ground-alt);
}

.tb-beheer-titel {
	margin: 0 0 0.25rem;
	font-size: 1.1rem;
	line-height: 1.3;
}

.tb-beheer-status {
	margin: 0;
	font-size: 0.9rem;
}

/* Kleur is hier nooit het enige signaal: de status staat er voluit in woorden,
   en de kleuren komen uit de tokens zodat ze de contrastdrempel halen. */
.tb-status-goed    { color: var(--tb-ok); }
.tb-status-wacht   { color: var(--tb-warn-ink); }
.tb-status-concept { color: var(--tb-muted); }
.tb-status-fout    { color: var(--tb-bad-ink); }

.tb-beheer-knoppen {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Elke knop noemt in de toegankelijkheidsboom het baksel waar hij bij hoort;
   een rij knoppen die allemaal "Wijzigen" heet is met een schermlezer niet te
   volgen. */
.tb-vb {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.tb-beheer-item { grid-template-columns: 72px 1fr; }
	.tb-beheer-beeld img, .tb-beheer-geenbeeld { width: 72px; height: 72px; }
	.tb-beheer-knoppen { grid-column: 1 / -1; }
	.tb-beheer-knoppen .tb-btn { flex: 1 1 auto; text-align: center; }
}