/* =============================================================================
   Ecorem — application styling
   =============================================================================
   Built entirely on the tokens in theme.css. There are no literal colours in
   this file, so a preset change restyles everything.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--canvas);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: 1.55;
	font-feature-settings: 'cv05' 1, 'cv08' 1; /* single-storey l, upright 6/9 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--weight-semibold);
	letter-spacing: -0.011em;
	color: var(--text);
	margin: 0;
}

h1 { font-size: var(--text-2xl); letter-spacing: -0.019em; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

a {
	color: var(--accent);
	text-decoration: none;
	font-weight: var(--weight-medium);
}

a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Numbers in tables must line up. */
.table,
.tabular {
	font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.app-nav {
	position: sticky;
	top: 0;
	z-index: 1030;
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--navbar-height);
	background-color: var(--surface);
	/* De huisstijlkleur van de corporatie, over de volle breedte en op elke
	   pagina. Zonder dit zat het accent alleen in kleine dingen — een actief
	   menu-item, een knop — en leken twee corporaties op elkaar. */
	border-top: 3px solid var(--accent);
	border-bottom: 1px solid var(--border);
	padding: 0 1.25rem;
}

/* Op een breed scherm bestaat het paneel niet: zijn kinderen doen gewoon mee in
   de balk. `order` bepaalt de volgorde, zodat het zoekveld tussen de links en de
   gebruiker staat terwijl het in de HTML erachter komt — daar hoort het buiten
   het inklapbare deel te staan. */
.app-nav__paneel {
	display: contents;
}

.app-nav__brand   { order: 0; }
.app-nav__links   { order: 1; }
.app-nav__spacer  { order: 2; }
.app-search       { order: 3; }
.app-nav__user    { order: 4; }

/* De knop en zijn schakelaar bestaan alleen op een smal scherm. */
.app-nav__schakelaar,
.app-nav__knop {
	display: none;
}

.app-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	letter-spacing: -0.02em;
	color: var(--text);
	padding: 0.75rem 0;
}

.app-nav__brand:hover {
	color: var(--text);
	text-decoration: none;
}

.app-nav__mark {
	width: 26px;
	height: 26px;
	object-fit: contain;
	flex: none;
}

/* De corporatie hoort naast het merk, niet weggestopt bij de uitlogknop: het is
   het antwoord op "waar ben ik nu". Het streepje ervoor scheidt het product van
   de corporatie — Ecorem is niet van Eigen Haard. */
.app-nav__corporatie,
.app-nav__logo {
	flex: none;
	padding-left: 0.85rem;
	border-left: 1px solid var(--border);
}

.app-nav__corporatie {
	padding: 0.2rem 0.55rem;
	margin-left: 0.85rem;
	border-left: 0;
	border-radius: var(--radius-pill);
	background-color: var(--accent-subtle);
	color: var(--accent);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0;
	white-space: nowrap;
}

/* Op hoogte geschaald, niet op breedte: een logo met de naam erin is breed, een
   los beeldmerk vierkant, en beide horen even hoog naast het merk te staan. De
   balk is 58 pixels hoog, dus 32 kan ruim - en dat scheelt: bij 26 was het
   woordmerk in beide logo's een veeg. */
.app-nav__logo {
	height: 32px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
}

.app-nav__links {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.app-nav__link {
	display: block;
	padding: 0.4rem 0.7rem;
	border-radius: var(--radius);
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	white-space: nowrap;
}

.app-nav__link:hover {
	background-color: var(--surface-sunken);
	color: var(--text);
	text-decoration: none;
}

.app-nav__link[aria-current='page'] {
	background-color: var(--accent-subtle);
	color: var(--accent);
}

.app-nav__spacer {
	flex: 1 1 auto;
}

.app-nav__user {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-left: 0.75rem;
	margin-left: 0.25rem;
	border-left: 1px solid var(--border);
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.app-nav__avatar {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-pill);
	background-color: var(--accent-subtle);
	color: var(--accent);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.app-search {
	position: relative;
	width: min(320px, 34vw);
}

.app-search__input {
	width: 100%;
	height: 34px;
	padding: 0 0.75rem 0 2rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background-color: var(--surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23808b95' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0.6rem center;
	background-size: 14px;
	color: var(--text);
	font-size: var(--text-sm);
	font-family: inherit;
}

.app-search__input::placeholder {
	color: var(--text-subtle);
}

.app-search__input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--focus-ring);
}

.app-search__results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 1040;
	max-height: 340px;
	overflow-y: auto;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}

.app-search__results:empty {
	display: none;
}

.app-search__result {
	display: block;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--border);
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: var(--weight-normal);
	line-height: 1.3;
}

.app-search__result:last-child {
	border-bottom: 0;
}

.app-search__result:hover,
.app-search__result:focus {
	background-color: var(--accent-subtle);
	color: var(--accent);
	text-decoration: none;
}

/* -----------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.page {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 1.75rem 1.25rem 4rem;
}

.page--wide {
	max-width: none;
}

.page__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.page__eyebrow {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--text-subtle);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.page__subtitle {
	margin: 0.3rem 0 0;
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.section {
	margin-top: 2rem;
}

.section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

/* -----------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.card-surface {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.card-surface__body {
	padding: 1.25rem;
}

.card-surface__footer {
	padding: 0.85rem 1.25rem;
	background-color: var(--surface-sunken);
	border-top: 1px solid var(--border);
}

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

.table-wrap {
	overflow-x: auto;
}

.table {
	--bs-table-bg: transparent;
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--text-sm);
}

.table > thead > tr > th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 0.6rem 0.85rem;
	background-color: var(--surface-sunken);
	border-bottom: 1px solid var(--border);
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.table > tbody > tr > td {
	padding: 0.6rem 0.85rem;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}

.table > tbody > tr:last-child > td {
	border-bottom: 0;
}

.table > tbody > tr:hover > td {
	background-color: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* The category column spans many rows; keep it quiet and readable. */
.table td[rowspan] {
	background-color: var(--surface-sunken);
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.02em;
	vertical-align: top;
	white-space: nowrap;
}

.table__empty {
	padding: 2rem 0.85rem !important;
	color: var(--text-subtle);
	text-align: center;
}

/* Status tinting. These override Bootstrap's table variants so the meaning is
   preserved but the surface stays calm. */
.table > tbody > tr > td.table-success,
.table > tbody > tr:hover > td.table-success {
	background-color: var(--success-subtle);
	color: var(--success);
	font-weight: var(--weight-medium);
}

.table > tbody > tr > td.table-warning,
.table > tbody > tr:hover > td.table-warning {
	background-color: var(--warning-subtle);
	color: var(--warning);
	font-weight: var(--weight-medium);
}

.table > tbody > tr > td.table-danger,
.table > tbody > tr:hover > td.table-danger {
	background-color: var(--danger-subtle);
	color: var(--danger);
	font-weight: var(--weight-medium);
}

.table > tbody > tr > td.table-secondary,
.table > tbody > tr:hover > td.table-secondary {
	background-color: var(--neutral-subtle);
	color: var(--neutral);
	font-style: italic;
}

/* A danger cell is empty by definition (no document, so no date). Give it a
   dash so the cell reads as "none" instead of looking unfinished. */
.table > tbody > tr > td.table-danger:empty::after {
	content: '—';
	color: var(--danger);
}

.filter-row > td {
	padding: 0.5rem 0.6rem !important;
	background-color: var(--surface);
}

/* -----------------------------------------------------------------------------
   Legend
   -------------------------------------------------------------------------- */

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: var(--text-xs);
	color: var(--text-muted);
}

.legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.legend__swatch {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex: none;
}

.legend__swatch--success { background-color: var(--map-success); }
.legend__swatch--warning { background-color: var(--map-warning); }
.legend__swatch--danger  { background-color: var(--map-danger); }
.legend__swatch--neutral { background-color: var(--neutral); }

/* -----------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.5rem;
	border-radius: var(--radius-pill);
	background-color: var(--neutral-subtle);
	color: var(--neutral);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	white-space: nowrap;
}

.pill--accent  { background-color: var(--accent-subtle);  color: var(--accent); }
.pill--success { background-color: var(--success-subtle); color: var(--success); }
.pill--warning { background-color: var(--warning-subtle); color: var(--warning); }
.pill--danger  { background-color: var(--danger-subtle);  color: var(--danger); }

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
	--bs-btn-font-family: var(--font-sans);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.42rem 0.85rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: 1.4;
	white-space: nowrap;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.btn-primary {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--accent-contrast);
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--accent-contrast);
}

.btn-primary:active {
	background-color: var(--accent-active) !important;
	border-color: var(--accent-active) !important;
}

/* The application uses btn-success for "add" actions. Keep them consistent with
   the accent instead of introducing a second primary colour. */
.btn-success,
.btn-outline-secondary {
	background-color: var(--surface);
	border-color: var(--border-strong);
	color: var(--text);
}

.btn-success:hover,
.btn-success:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
	background-color: var(--surface-sunken);
	border-color: var(--border-strong);
	color: var(--text);
}

.btn-sm {
	padding: 0.24rem 0.55rem;
	font-size: var(--text-xs);
}

.btn-block {
	width: 100%;
}

/* -----------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.form-control,
.form-select {
	width: 100%;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background-color: var(--surface);
	color: var(--text);
	font-family: inherit;
	font-size: var(--text-sm);
	line-height: 1.5;
}

.form-control::placeholder {
	color: var(--text-subtle);
}

.form-control:focus,
.form-select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--focus-ring);
}

.form-control:disabled,
.form-select:disabled {
	background-color: var(--surface-sunken);
	color: var(--text-subtle);
}

.form-text {
	margin-top: 0.3rem;
	color: var(--text-subtle);
	font-size: var(--text-xs);
}

.form-select-sm {
	padding: 0.2rem 1.5rem 0.2rem 0.45rem;
	font-size: var(--text-xs);
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.form-grid__full {
	grid-column: 1 / -1;
}

.form-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
}

input[type='checkbox'] {
	width: 15px;
	height: 15px;
	accent-color: var(--accent);
	cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.alert {
	padding: 0.7rem 0.9rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: var(--text-sm);
}

.alert-danger {
	background-color: var(--danger-subtle);
	border-color: color-mix(in srgb, var(--danger) 25%, transparent);
	color: var(--danger);
}

.alert-success {
	background-color: var(--success-subtle);
	border-color: color-mix(in srgb, var(--success) 25%, transparent);
	color: var(--success);
}

/* -----------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */

.map {
	height: clamp(360px, 60vh, 720px);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--surface-sunken);
}

.map--compact {
	height: clamp(300px, 45vh, 520px);
}

.leaflet-container {
	font-family: var(--font-sans);
	background-color: var(--surface-sunken);
}

.leaflet-popup-content-wrapper {
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}

.leaflet-popup-content {
	margin: 0.7rem 0.9rem;
	font-size: var(--text-sm);
}

.leaflet-control-layers,
.leaflet-bar {
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow) !important;
}

/* -----------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.message {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.75rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--border);
}

.message:last-of-type {
	border-bottom: 0;
}

.message__avatar {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pill);
	background-color: var(--accent-subtle);
	color: var(--accent);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
}

.message__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	font-size: var(--text-xs);
	color: var(--text-subtle);
}

.message__author {
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

.message__body {
	color: var(--text);
	overflow-wrap: anywhere;
}

.message-form {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
}

.message-form .form-control {
	flex: 1 1 auto;
}

/* -----------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.empty {
	padding: 2.5rem 1rem;
	color: var(--text-subtle);
	font-size: var(--text-sm);
	text-align: center;
}

/* -----------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.login {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	min-height: 100vh;
}

.login__intro {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.25rem;
	padding: 4rem clamp(2rem, 6vw, 6rem);
	background-color: var(--surface-inverse);
	color: var(--text-inverse);
	overflow: hidden;
}

/* Een rasterveld en een gloed in de accentkleur.
 *
 * Het paneel was een zwart vlak met tekst in het midden en veel niets eromheen.
 * Dit geeft het diepte en verwijst naar waar de applicatie over gaat — een kaart
 * met vlakken erop — zonder een foto die op elk scherm anders uitpakt en zonder
 * een extra bestand om te laden.
 *
 * Alles uit de tokens: onder een andere preset kleurt de gloed vanzelf mee. */
.login__intro::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(60rem 40rem at 15% 10%,
			color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
		repeating-linear-gradient(0deg,
			color-mix(in srgb, var(--text-inverse) 5%, transparent) 0 1px,
			transparent 1px 5rem),
		repeating-linear-gradient(90deg,
			color-mix(in srgb, var(--text-inverse) 5%, transparent) 0 1px,
			transparent 1px 5rem);
	pointer-events: none;
}

/* De tekst hoort bovenop dat raster te liggen, niet eronder. */
.login__intro > * {
	position: relative;
	z-index: 1;
}

.login__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	letter-spacing: -0.02em;
	color: var(--text-inverse);
}

.login__tagline {
	max-width: 34rem;
	margin: 0;
	color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
	font-size: var(--text-sm);
	line-height: 1.7;
}

.login__tagline p + p {
	margin-top: 0.9rem;
}

/* Groeit mee met het venster in plaats van op één maat te blijven staan, en
   breekt zelf op een plek die de regels ongeveer even lang maakt — dat laatste
   deed voorheen een <br>, en die staat op precies één schermbreedte goed. */
.login__lead {
	max-width: 24ch;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight: var(--weight-semibold);
	line-height: 1.15;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.login__points {
	display: grid;
	gap: 1.1rem;
	max-width: 34rem;
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
}

/* Het streepje links stond in een grijs dat niets betekende. Nu is het de
   accentkleur: het enige beetje huisstijl in een verder donker paneel. */
.login__points li {
	padding-left: 1rem;
	border-left: 2px solid color-mix(in srgb, var(--accent) 65%, var(--text-inverse) 35%);
	color: color-mix(in srgb, var(--text-inverse) 74%, transparent);
	font-size: var(--text-sm);
	line-height: 1.6;
}

.login__points strong {
	display: block;
	margin-bottom: 0.1rem;
	color: var(--text-inverse);
	font-weight: var(--weight-semibold);
}

.login__colofon {
	margin: 0.5rem 0 0;
	color: color-mix(in srgb, var(--text-inverse) 55%, transparent);
	font-size: var(--text-xs);
}

/* The accent has no contrast against the intro panel, so links there are drawn
   from the panel's own foreground colour. */
.login__colofon a {
	color: color-mix(in srgb, var(--text-inverse) 80%, transparent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.login__colofon a:hover,
.login__colofon a:focus-visible {
	color: var(--text-inverse);
}

.login__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1.5rem;
	background-color: var(--canvas);
}

.login__card {
	width: min(420px, 100%);
	padding: 2.25rem 2.25rem 2rem;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	/* Een kaart die op een egale ondergrond zweeft mag ook zweven; de zachte
	   schaduw hield hem tegen de achtergrond aan geplakt. */
	box-shadow: var(--shadow-lg);
}

/* The logo artwork is drawn for a white ground. Both lockups sit on a plate of
   that colour: on a light surface it is invisible, and under the donker preset
   it keeps the purple half of the mark legible. One rule, no per-preset case. */
.login__plate {
	background-color: var(--logo-plate);
	border-radius: var(--radius);
	flex: none;
}

/* Small lockup, next to the wordmark on the intro panel. */
.login__plate--mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	box-shadow: var(--shadow-sm);
}

.login__plate--mark img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

/* Full logo at the top of the login card. Kleiner dan eerst: op 76 pixels was
   het logo het grootste ding in de kaart, terwijl het formulier de reden is dat
   iemand hier komt. */
.login__plate--logo {
	display: inline-block;
	padding: 0.5rem 0.7rem;
	margin-bottom: 1.5rem;
}

.login__logo {
	display: block;
	width: auto;
	height: 58px;
}

.login__card h2 {
	margin-bottom: 1.25rem;
}

.login__footer {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
	color: var(--text-subtle);
	font-size: var(--text-xs);
}

@media (max-width: 860px) {
	.login {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.login__intro {
		padding: 2.5rem 1.5rem;
	}

	/* Almost every visitor comes here to sign in, so on a phone the marketing
	   copy makes way for the form instead of pushing it below the fold. */
	.login__tagline,
	.login__points,
	.login__colofon {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
   Utilities and responsive behaviour
   -------------------------------------------------------------------------- */

.text-muted-sm {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.stack > * + * {
	margin-top: 1rem;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 900px) {
	.app-nav {
		flex-wrap: wrap;
		gap: 0.5rem;
		padding: 0 0.75rem 0.6rem;
	}

	.app-nav__brand       { order: 0; min-width: 0; }
	.app-nav__corporatie  { order: 0; min-width: 0; }
	.app-nav__logo        { order: 0; }
	.app-nav__knop        { order: 1; }

	/* "Woningstichting Eigen Haard" past niet naast merk én menuknop; liever
	   afgekapt dan een balk die over twee regels loopt. */
	.app-nav__corporatie {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.app-nav__logo {
		height: 26px;
		max-width: 40vw;
		padding-left: 0.6rem;
	}
	.app-search      { order: 2; width: 100%; }
	.app-nav__paneel { order: 3; }

	/* De knop. Een label en geen button, omdat de schakelaar een checkbox is en
	   dit dus zonder een regel JavaScript werkt. */
	.app-nav__knop {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin-left: auto;
		padding: 0.4rem 0.7rem;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		color: var(--text-muted);
		font-size: var(--text-sm);
		font-weight: var(--weight-medium);
		cursor: pointer;
		user-select: none;
	}

	/* Drie streepjes, getekend met randen: geen extra afbeelding om te laden.
	   De doos is zo hoog als het icoon, anders steken de onderste twee lijnen
	   eruit en staat het geheel scheef naast het woord Menu. */
	.app-nav__streepjes {
		position: relative;
		display: block;
		width: 16px;
		height: 12px;
		border-top: 2px solid currentColor;
	}

	.app-nav__streepjes::before,
	.app-nav__streepjes::after {
		content: '';
		position: absolute;
		left: 0;
		width: 16px;
		border-top: 2px solid currentColor;
	}

	.app-nav__streepjes::before { top: 5px; }
	.app-nav__streepjes::after  { top: 10px; }

	/* Uit beeld maar niet display:none: een verborgen checkbox is niet met het
	   toetsenbord te bereiken, en dan is het menu alleen met een muis te openen.
	   De focusring hoort daarom op het label. */
	.app-nav__schakelaar {
		display: block;
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	.app-nav__schakelaar:focus-visible + .app-nav__knop {
		outline: 2px solid var(--accent);
		outline-offset: 2px;
	}

	.app-nav__schakelaar:checked + .app-nav__knop {
		background-color: var(--accent-subtle);
		color: var(--accent);
		border-color: var(--accent-border);
	}

	/* Ingeklapt tenzij de knop aanstaat. */
	.app-nav__paneel {
		display: none;
		width: 100%;
	}

	.app-nav__schakelaar:checked ~ .app-nav__paneel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--border);
	}

	.app-nav__links {
		flex-direction: column;
		align-items: stretch;
	}

	.app-nav__spacer {
		display: none;
	}

	/* De naam van de corporatie mag hier wél breken: in het paneel is daar
	   ruimte voor, in de balk duwde hij alles uit elkaar. */
	.app-nav__user {
		flex-wrap: wrap;
		padding: 0.5rem 0 0;
		margin: 0;
		border-left: 0;
		border-top: 1px solid var(--border);
	}
}

/* Beheer
   -------------------------------------------------------------------------- */

.beheer-kaarten {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.beheer-kaart {
	display: block;
	padding: 1.25rem;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.beheer-kaart:hover,
.beheer-kaart:focus-visible {
	border-color: var(--accent-border);
	box-shadow: var(--shadow-md);
}

.beheer-kaart h2 {
	margin: 0 0 0.4rem;
	font-size: 1.15rem;
}

.beheer-kaart p {
	margin: 0 0 0.75rem;
}

/* Een ingetrokken lidmaatschap blijft staan zodat een vergissing te zien en
   terug te draaien is; het hoort alleen niet als gewone regel te lezen. */
.rij--uit {
	color: var(--text-subtle);
	background-color: var(--surface-sunken);
}

/* De handmatige weg naar een begrenzing staat ingeklapt: tekenen is wat je
   normaal doet, plakken is voor de exacte export die je al hebt. */
.geometrie-plakken {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--border);
}

.geometrie-plakken > summary {
	cursor: pointer;
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.geometrie-plakken > summary:hover {
	color: var(--accent);
}

.wijzigingen {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.wijzigingen li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-muted);
}

.wijzigingen li:last-child {
	border-bottom: 0;
}

.wijzigingen strong {
	color: var(--text);
}

@media (max-width: 640px) {
	.page {
		padding: 1.25rem 0.85rem 3rem;
	}
}

@media print {
	.app-nav,
	.page__actions,
	.message-form,
	.filter-row {
		display: none !important;
	}

	body {
		background: var(--print-bg);
		color: var(--print-text);
	}
}