/* Admin-omgeving: bouwt verder op style.css (tokens + .panel/.btn/.badge/.form
   worden hergebruikt), dit bestand voegt enkel dashboard-specifieke layout toe. */

.admin-shell { padding: 2rem 0 4rem; }

/* Gegroepeerde tabbalk boven elk beheerpaneel: Sollicities / Vragen / Gebruikers */
.admin-tabs {
	display: flex;
	gap: 0.4rem;
	border-bottom: 1px solid var(--hairline);
	margin-bottom: 1.5rem;
	overflow-x: auto;
}

.admin-tab {
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	padding: 0 0.2rem;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--ink-dim);
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.active { color: var(--ink); border-color: var(--accent); }
.admin-tab + .admin-tab { margin-left: 1.1rem; }

/* Sub-tabbalk per dienst (politie/ambulance/pechhulp), binnen een sectie */
.dept-tabs {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

.dept-tab {
	display: inline-flex;
	align-items: center;
	height: 2.15rem;
	padding: 0 0.9rem;
	border-radius: 999px;
	background: var(--panel);
	border: 1px solid var(--hairline-strong);
	color: var(--ink-dim);
	font-size: 0.82rem;
	font-weight: 700;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dept-tab:hover { color: var(--ink); }
.dept-tab.active { color: var(--tone, var(--ink)); background: var(--tone-tint, var(--panel-hover)); border-color: var(--tone, var(--hairline-strong)); }
.dept-tab--politie   { --tone: var(--bank);   --tone-tint: var(--bank-tint); }
.dept-tab--ambulance { --tone: var(--dirty);  --tone-tint: var(--dirty-tint); }
.dept-tab--pechhulp  { --tone: var(--hunger); --tone-tint: var(--hunger-tint); }

.groep-item { padding: 1.25rem 1.5rem; max-width: 38rem; }
.groep-item__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.groep-naam-input {
	background: transparent;
	border: none;
	border-bottom: 1px solid transparent;
	padding: 0.2rem 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink);
	max-width: 16rem;
}
.groep-naam-input:focus { outline: none; border-bottom-color: var(--accent); }

.groep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1rem; }
.groep-grid h5 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint); margin-bottom: 0.6rem; }
.groep-grid label.checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 500; color: var(--ink); margin-bottom: 0.55rem; }
.groep-grid label.checkbox input { width: auto; }
.groep-grid label.checkbox:has(input:disabled) { opacity: 0.45; }

.groep-item__actions { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); }

.mode-toggle { display: flex; gap: 1.25rem; margin: 1.1rem 0 1rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); }
.mode-toggle label.checkbox { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; margin-bottom: 0; }
.mode-toggle input { width: auto; }

@media (max-width: 640px) {
	.groep-grid { grid-template-columns: 1fr; }
}

.status-toggle { padding: 1.25rem 1.5rem; max-width: 38rem; }
.status-toggle__info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.status-toggle__info h4 { font-size: 0.95rem; font-weight: 700; }
.status-toggle__form .form-row { margin-bottom: 0.75rem; max-width: 30rem; }
.status-toggle__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Vragen-editor */
.vraag-item {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	padding: 1.1rem 1.25rem;
}
.vraag-item + .vraag-item { margin-top: 0.75rem; }
.vraag-item form.vraag-edit-form { flex: 1; }
.vraag-item .vraag-order { display: flex; flex-direction: column; gap: 0.3rem; }
.vraag-item .vraag-order button {
	width: 1.8rem; height: 1.8rem;
	border-radius: 0.4rem;
	border: 1px solid var(--hairline-strong);
	background: var(--bg-alt);
	color: var(--ink-dim);
	cursor: pointer;
	font-size: 0.8rem;
	line-height: 1;
}
.vraag-item .vraag-order button:hover { color: var(--ink); background: var(--panel-hover); }
.vraag-item .vraag-order button:disabled { opacity: 0.3; cursor: default; }

.vraag-row-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.6rem; }
.vraag-row-actions label.checkbox { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-dim); margin-bottom: 0; }
.vraag-row-actions input[type="checkbox"] { width: auto; }

.admin-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.75rem;
}
.admin-head h1 { font-size: 1.6rem; font-weight: 800; }
.admin-head .who { color: var(--ink-dim); font-size: 0.85rem; margin-top: 0.25rem; }

.filter-bar {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}
.filter-bar select { width: auto; min-width: 10rem; }

.table-wrap {
	overflow-x: auto;
	border-radius: var(--radius-lg);
}

table.solliciteren-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--panel);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.solliciteren-table th, .solliciteren-table td {
	text-align: left;
	padding: 0.85rem 1rem;
	font-size: 0.86rem;
	border-bottom: 1px solid var(--hairline);
	white-space: nowrap;
}

.solliciteren-table th {
	color: var(--ink-faint);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
}

.solliciteren-table tr:last-child td { border-bottom: none; }
.solliciteren-table tbody tr { transition: background-color 0.15s ease; }
.solliciteren-table tbody tr:hover { background: var(--panel-hover); }
.solliciteren-table tr.clickable-row { cursor: pointer; }
.solliciteren-table td.code { font-family: var(--font-mono); color: var(--accent); }
.solliciteren-table .empty-row td { color: var(--ink-faint); text-align: center; padding: 2.5rem 1rem; white-space: normal; }

.detail-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1.5rem;
	align-items: start;
}

.answer-block { margin-bottom: 1.25rem; }
.answer-block h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint); margin-bottom: 0.4rem; }
.answer-block p { line-height: 1.6; white-space: pre-wrap; }

.meta-list { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.88rem; }
.meta-list .row { display: flex; justify-content: space-between; gap: 1rem; }
.meta-list .row span:first-child { color: var(--ink-faint); }

.auth-shell {
	position: relative;
	min-height: calc(100vh - 4rem - 5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.25rem;
	overflow: hidden;
}

/* Zachte gloed achter de kaart, zelfde accentkleur als de rest van de site -
   puur decoratief, geeft de verder vrij kale loginpagina wat diepte. */
.auth-shell::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26rem;
	height: 26rem;
	transform: translate(-50%, -55%);
	background: radial-gradient(circle, rgba(125, 179, 255, 0.14), transparent 70%);
	pointer-events: none;
}

.auth-card {
	position: relative;
	width: 100%;
	max-width: 22rem;
	padding: 2rem;
	text-align: center;
}

.auth-icon {
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 auto 0.9rem;
	border-radius: 0.7rem;
	background: var(--accent-tint);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.auth-icon svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.auth-card .eyebrow {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 0.3rem;
}

.auth-card h1 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.25rem; }
.auth-card p.text-dim { margin-bottom: 1.3rem; font-size: 0.85rem; }
.auth-card .form-row { text-align: left; margin-bottom: 0.9rem; }
.auth-card label { font-size: 0.8rem; margin-bottom: 0.35rem; }
.auth-card input { height: 2.4rem; font-size: 0.9rem; }
.auth-card .btn { height: 2.4rem; font-size: 0.88rem; margin-top: 0.2rem; }
.auth-card form { display: flex; flex-direction: column; gap: 0; }

@media (max-width: 860px) {
	.detail-grid { grid-template-columns: 1fr; }
}