/* Assetmanager — huisstijl SustVarius: paars en olijfgroen uit het logo,
   mintgroen als accent, Averia Sans Libre voor koppen, Roboto voor tekst.
   Olijf en mint alleen decoratief: op wit is hun contrast te laag voor tekst. */

:root {
	--bg: #f4f6f9;
	--vlak: #ffffff;
	--tekst: #2b2d2f;
	--kop: #56585a;
	--stil: #5f6b78;
	--rand: #dde3e9;
	--primair: #8c1c7b;
	--primair-donker: #6c1460;
	--primair-licht: #f6e9f4;
	--olijf: #bcbc1f;
	--olijf-licht: #f6f6dd;
	--mint: #4fc3a3;
	--mint-licht: #e5f6f1;
	--rood: #b3261e;
	--rood-licht: #fbe9e7;
	--oranje: #a25a00;
	--oranje-licht: #fff3e0;
	--groen: #1e7a3c;
	--groen-licht: #e6f4ea;
	--blauw-licht: #e8f0fb;
	--radius: 8px;
	--schaduw: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
	--zijbalk: 220px;
	font-size: 15px;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--tekst);
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.5;
}
a { color: var(--primair); }
a:hover { color: var(--primair-donker); }
h1, h2 { font-family: "Averia Sans Libre", Roboto, sans-serif; color: var(--kop); font-weight: 700; }
h1 { font-size: 1.75rem; margin: 0 0 1rem; line-height: 1.25; }
h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
code { background: #eef1f4; padding: .1em .35em; border-radius: 4px; font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--rand); margin: 1rem 0; }
[hidden] { display: none !important; }

/* ---- Indeling ---- */
.topbalk {
	position: fixed; inset: 0 0 auto 0; height: 56px; z-index: 20;
	display: flex; align-items: center; gap: 1rem;
	padding: 0 1rem; background: #fff; color: var(--tekst);
	border-bottom: 4px solid var(--olijf); box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.merk { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex-shrink: 0; min-width: calc(var(--zijbalk) - 2rem); margin-right: 1rem; color: var(--primair); }
.merk img { height: 30px; width: auto; display: block; }
.merk span { font-family: "Averia Sans Libre", sans-serif; font-weight: 700; font-size: .95rem; color: var(--kop); border-left: 2px solid var(--olijf); padding-left: .6rem; line-height: 1.1; white-space: nowrap; }
.merk:hover { color: var(--primair); }
.snelzoek { flex: 1; max-width: 520px; }
.snelzoek input { width: 100%; border: 1px solid var(--rand); background: var(--bg); border-radius: 99px; padding: .5rem 1rem; font-size: 1rem; }
.menuknop { display: none; background: none; border: 0; color: var(--primair); font-size: 1.5rem; cursor: pointer; }

.zijbalk {
	position: fixed; top: 60px; bottom: 0; left: 0; width: var(--zijbalk);
	overflow-y: auto; padding: 1rem .5rem 2rem; background: var(--vlak); border-right: 1px solid var(--rand);
	display: flex; flex-direction: column; gap: 2px;
}
.zijbalk a, .zijbalk button.link {
	display: block; padding: .45rem .75rem; border-radius: 6px; color: var(--tekst); text-decoration: none; text-align: left;
}
.zijbalk a:hover, .zijbalk button.link:hover { background: var(--bg); }
.zijbalk a.actief { background: var(--primair-licht); color: var(--primair-donker); font-weight: 600; box-shadow: inset 3px 0 0 var(--primair); }
.navkop { margin: 1rem .75rem .25rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--stil); }

.app .inhoud { margin-left: var(--zijbalk); padding: calc(60px + 1.5rem) 2rem 3rem; max-width: calc(1280px + var(--zijbalk)); }
.kaal .inhoud { padding: 10vh 1rem 2rem; }

@media (max-width: 900px) {
	.menuknop { display: block; }
	.zijbalk { transform: translateX(-100%); transition: transform .2s; z-index: 15; box-shadow: var(--schaduw); }
	.zijbalk.open { transform: none; }
	.app .inhoud { margin-left: 0; padding: calc(60px + 1rem) 1rem 2rem; }
	.merk span { display: none; }
	.merk img { height: 24px; }
}

/* ---- Bouwstenen ---- */
.kaart {
	background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius);
	box-shadow: var(--schaduw); padding: 1.25rem; margin-bottom: 1.25rem;
}
.kaart.smal { max-width: 460px; margin-left: auto; margin-right: auto; }
.kaal .kaart.smal { margin-top: 0; }
.kaart.waarschuwing { border-left: 4px solid var(--rood); }
.kaal .kaart.smal { border-top: 4px solid var(--olijf); }
.loginlogo { display: block; height: 44px; width: auto; margin: 0 auto 1rem; }
details.kaart > summary { cursor: pointer; font-weight: 600; }
details.kaart[open] > summary { margin-bottom: .75rem; }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.raster > .kaart { margin-bottom: 0; }
@media (max-width: 420px) { .raster { grid-template-columns: 1fr; } }

.kopregel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kopregel h1 { margin: 0; }
.acties { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.stil { color: var(--stil); }
.rood { color: var(--rood); font-weight: 600; }
.oranje { color: var(--oranje); font-weight: 600; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.nummer { font-family: ui-monospace, "SF Mono", Consolas, monospace; background: var(--primair-licht); color: var(--primair-donker); padding: .05em .4em; border-radius: 6px; }
.opmerking { background: var(--bg); padding: .5rem .75rem; border-radius: 6px; margin: .5rem 0; }
form.inline { display: inline; }

/* ---- Knoppen ---- */
.knop, button.knop {
	display: inline-block; padding: .5rem 1rem; border-radius: 6px; border: 1px solid var(--rand);
	background: var(--vlak); color: var(--tekst); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
}
.knop:hover { background: var(--bg); color: var(--tekst); }
.knop.primair { background: var(--primair); border-color: var(--primair); color: #fff; }
.knop.primair:hover { background: var(--primair-donker); color: #fff; }
.knop.klein { padding: .25rem .6rem; font-size: .9rem; }
.knop.gevaar { color: var(--rood); border-color: #e6b3ae; }
.knop.gevaar:hover { background: var(--rood-licht); color: var(--rood); }
p.klein { font-size: .88rem; margin-top: -.75rem; }
.knop.groot { padding: .75rem 1.5rem; font-size: 1.05rem; }
button.link { background: none; border: 0; padding: 0; color: var(--primair); font: inherit; cursor: pointer; text-decoration: underline; }
.knoppen { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }

/* ---- Formulieren ---- */
.formulier label { display: block; margin-bottom: .9rem; font-weight: 500; }
.formulier label small { font-weight: 400; color: var(--stil); }
input, select, textarea {
	font: inherit; color: inherit; background: #fff;
	border: 1px solid #c4ccd5; border-radius: 6px; padding: .5rem .6rem;
}
.formulier input:not([type=checkbox]):not([type=radio]):not([type=file]), .formulier select, .formulier textarea {
	display: block; width: 100%; margin-top: .25rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primair); outline-offset: 0; border-color: var(--primair); }
input.groot, code.groot { font-size: 1.4rem; font-family: ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .03em; }
textarea { resize: vertical; }
fieldset { border: 0; border-top: 1px solid var(--rand); padding: 1rem 0 0; margin: 0 0 1rem; }
legend { font-weight: 700; padding-right: .5rem; }
.velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 1.25rem; }
.velden .breed, .formulier > .breed { grid-column: 1 / -1; }
.formulier label.vink, label.vink { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; margin-bottom: .5rem; }
label.vink input { margin-top: .3rem; flex-shrink: 0; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filters input[type=search] { min-width: 260px; flex: 1; }

/* ---- Meldingen en labels ---- */
.melding { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid transparent; }
.melding-ok { background: var(--groen-licht); border-color: #b7dfc3; }
.melding-fout { background: var(--rood-licht); border-color: #f2c1bb; }
.melding-info { background: var(--blauw-licht); border-color: #c5d7f2; }

.badge { display: inline-block; padding: .15em .6em; border-radius: 99px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.badge-op_voorraad { background: var(--groen-licht); color: var(--groen); }
.badge-uitgegeven { background: var(--blauw-licht); color: #1f4f99; }
.badge-in_reparatie { background: var(--oranje-licht); color: var(--oranje); }
.badge-verloren { background: var(--rood-licht); color: var(--rood); }
.badge-afgeschreven { background: #eceff2; color: var(--stil); }
.chip { display: inline-block; margin: .25rem .25rem 0 0; padding: .15rem .6rem; border-radius: 99px; background: var(--bg); border: 1px solid var(--rand); font-size: .85rem; text-decoration: none; color: var(--tekst); font-family: inherit; cursor: pointer; }
.chip a { color: inherit; text-decoration: none; }

/* ---- Tegels ---- */
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.tegel {
	display: flex; flex-direction: column; padding: 1rem; border-radius: var(--radius); background: var(--vlak);
	border: 1px solid var(--rand); border-top: 4px solid var(--mint); text-decoration: none; color: var(--tekst); box-shadow: var(--schaduw);
}
.tegel:hover { color: var(--tekst); border-color: var(--primair); }
.tegel .getal { font-size: 1.8rem; font-weight: 700; line-height: 1.1; font-family: "Averia Sans Libre", Roboto, sans-serif; color: var(--kop); }
.tegel .getal.klein { font-size: 1.15rem; }
.tegel .label { color: var(--stil); font-size: .9rem; }
.tegel-op_voorraad { border-top-color: var(--groen); }
.tegel-uitgegeven { border-top-color: #1f4f99; }
.tegel-in_reparatie { border-top-color: var(--oranje); }
.tegel-verloren { border-top-color: var(--rood); }
.tegel-afgeschreven { border-top-color: #9aa5b1; }

/* ---- Tabellen ---- */
.tabelwrap { overflow-x: auto; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); }
.tabelwrap .tabel { margin: 0; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabel th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--stil); font-weight: 600; background: #fafbfc; border-bottom: 2px solid var(--olijf-licht); }
.tabel.compact th, .tabel.compact td { padding: .35rem .5rem; }
.tabel tr.groep th { background: none; padding-top: .9rem; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--tekst); }
.tabel td.getal, .tabel th.getal { text-align: right; font-variant-numeric: tabular-nums; }
.tabel tr.inactief td { color: var(--stil); }
.tabel tr.rij-fout td { background: var(--rood-licht); }
.tabel tr.rij-let-op td { background: var(--oranje-licht); }
.tabel tr.nieuw td { background: #fafbfc; }
.tabel td input:not([type=checkbox]), .tabel td select { width: 100%; padding: .3rem .4rem; }
.tabel.log td { font-size: .88rem; }
.kaart > .tabel:last-child { margin-bottom: 0; }

dl.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.gegevens dt { color: var(--stil); }
dl.gegevens dd { margin: 0; overflow-wrap: anywhere; }
ul.lijst { padding-left: 1.1rem; margin: 0; }
ul.lijst li { margin-bottom: .35rem; }

/* ---- Tijdlijn ---- */
.tijdlijn { list-style: none; padding: 0 0 0 1.25rem; margin: 0; border-left: 2px solid var(--rand); }
.tijdlijn li { position: relative; padding: 0 0 1.25rem .75rem; }
.tijdlijn li::before {
	content: ""; position: absolute; left: -1.25rem; top: .35rem; width: 12px; height: 12px; margin-left: -7px;
	border-radius: 50%; background: var(--vlak); border: 2px solid #9aa5b1;
}
.tijdlijn li.lopend::before { background: var(--mint); border-color: var(--mint); }
.tijdlijn-kop { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }

/* ---- Overeenkomst en tekenen ---- */
.overeenkomst { border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; background: #fcfdfd; }
.overeenkomst h3 { margin-top: 0; }
.overeenkomst .overeenkomst-tekst { max-height: 22rem; overflow-y: auto; padding-right: .5rem; border-bottom: 1px solid var(--rand); margin-bottom: .75rem; }
.overeenkomst-tekst h3, .overeenkomst-tekst h4, .overeenkomst-tekst h5 { margin: 1rem 0 .35rem; }
.overeenkomst-tekst ul { padding-left: 1.25rem; }
label.vink.akkoord { font-weight: 600; background: var(--primair-licht); padding: .6rem .75rem; border-radius: 6px; margin: 0; }

.tekenvlak { position: relative; max-width: 560px; margin: .5rem 0 1rem; }
.tekenvlak canvas {
	display: block; width: 100%; height: 200px; background: #fff; border: 2px dashed #9aa5b1; border-radius: var(--radius);
	touch-action: none; cursor: crosshair;
}
.tekenvlak.getekend canvas { border-style: solid; border-color: var(--primair); }
.tekenvlak [data-wissen] { position: absolute; top: .5rem; right: .75rem; }
.tekenvlak::after { content: "Teken hier"; position: absolute; left: 1rem; bottom: .5rem; color: #9aa5b1; font-size: .85rem; pointer-events: none; }
.tekenvlak.getekend::after { content: ""; }

.qr { text-align: center; }
.qr img { border: 1px solid var(--rand); border-radius: var(--radius); padding: .5rem; background: #fff; }
.telinvoer { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.telinvoer label { flex: 1; min-width: 220px; margin: 0; }
.exportkaart h2 { margin-bottom: .25rem; }
.paginering { display: flex; gap: .75rem; margin-top: 1rem; }

/* ---- Administratie ---- */
.kiezer { display: flex; gap: .5rem; flex: 1; max-width: 560px; }
.kiezer select { flex: 1; min-width: 0; border-radius: 99px; background: var(--bg); padding: .45rem .9rem; font-weight: 500; }
.kiezer select[name=jaar] { flex: 0 0 auto; }
@media (max-width: 600px) { .kiezer select[name=adm] { max-width: 150px; } }
.groen { color: var(--groen); font-weight: 600; }
.nummerkolom { width: 5rem; font-variant-numeric: tabular-nums; color: var(--stil); }
h2 .klein, .kopregel .klein { font-size: .8rem; font-family: Roboto, sans-serif; font-weight: 400; }
.kopregel h2 { margin: 0; }
.kaart > .kopregel { margin-bottom: .5rem; }

input.bedrag { text-align: right; font-variant-numeric: tabular-nums; width: 100%; min-width: 7rem; }
.boektabel td { padding: .35rem .4rem; vertical-align: middle; }
.boektabel select[data-rekening] { min-width: 14rem; }
.boektabel select[data-btwcode] { min-width: 9rem; }
.boektabel tr.ongeldig td { background: var(--rood-licht); }
.boektabel tfoot td { border-bottom: 0; font-weight: 600; }
.boektabel input::placeholder { color: #9aa5b1; }
.totaalregel td { font-weight: 700; border-top: 2px solid var(--rand); }
tr.btwregel td { color: var(--stil); font-size: .92rem; }

.plakvoet { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; z-index: 5; border-top: 3px solid var(--olijf); }
.plakvoet .knop { margin-left: auto; }

.filters .filterveld { display: flex; flex-direction: column; font-size: .8rem; color: var(--stil); gap: .15rem; }
.filters .filterveld input, .filters .filterveld select { font-size: 1rem; color: var(--tekst); }
.filters { align-items: flex-end; }

.rapportkaart { display: block; text-decoration: none; color: var(--tekst); }
.rapportkaart:hover { border-color: var(--primair); color: var(--tekst); }
.rapportkaart.uit { opacity: .6; }
.tabel.rapport td { padding: .4rem .75rem; }
.tabel.rapport tr.r-kop td { font-weight: 700; color: var(--kop); padding-top: 1rem; border-bottom: 2px solid var(--olijf-licht); }
.tabel.rapport tr.r-subtotaal td { font-weight: 700; border-top: 1px solid #9aa5b1; }
.tabel.rapport tr.r-totaal td { font-weight: 700; background: var(--olijf-licht); border-top: 2px solid var(--kop); }
.tabel.rapport tr.r-leeg td { border: 0; padding: .3rem; }
.tabel.rapport tr.r-melding td { color: var(--rood); font-style: italic; }
[data-beginbalans] td.getal { width: 11rem; }

/* ---- Bank ---- */
.teller { display: inline-block; min-width: 1.4em; padding: 0 .45em; border-radius: 99px; background: var(--primair); color: #fff; font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.5; margin-left: .25rem; }
.tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--rand); margin: 0 0 1rem; }
.tab { padding: .55rem 1rem; text-decoration: none; color: var(--stil); border-bottom: 3px solid transparent; margin-bottom: -2px; font-weight: 500; }
.tab.actief { color: var(--primair-donker); border-bottom-color: var(--primair); }
.tab:not(.actief) .teller { background: var(--stil); }
.bulkbalk { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; padding: .9rem 1.25rem; position: sticky; top: 64px; z-index: 6; border-left: 4px solid var(--olijf); }
.bulkdeel { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.bulkbalk select { max-width: 18rem; }
.bulkbalk label.vink { margin: 0; }
input.bedrag.kort { min-width: 0; width: 7rem; }
.tabel.bankregels td.omschrijving { max-width: 32rem; font-size: .92rem; overflow-wrap: anywhere; }
.voorstel { display: inline-block; background: var(--mint-licht); border-radius: 6px; padding: .1rem .5rem; }
p.voorstel { display: block; padding: .5rem .75rem; margin: .75rem 0 0; }
.bankkaart { display: grid; grid-template-columns: auto 1fr; gap: .5rem 2rem; align-items: start; }
.bankkaart > p { grid-column: 1 / -1; }
.bankbedrag { font-family: "Averia Sans Libre", Roboto, sans-serif; font-size: 2rem; font-weight: 700; color: var(--kop); white-space: nowrap; }
.bankbedrag.groen { color: var(--groen); }
td.klein { font-size: .88rem; }
span.klein, .stil.klein { font-size: .82rem; }
@media (max-width: 700px) { .bankkaart { grid-template-columns: 1fr; } }

/* ---- Btw en jaarafsluiting ---- */
.badge-ok { background: var(--groen-licht); color: var(--groen); }
.badge-let-op { background: var(--oranje-licht); color: var(--oranje); }
.tegel-ok { border-top-color: var(--groen); }
.controlelijst { list-style: none; padding: 0; margin: 0; }
.controlelijst li { padding: .5rem .75rem; border-radius: 6px; margin-bottom: .35rem; }
.controlelijst li.goed { background: var(--groen-licht); }
.controlelijst li.fout { background: var(--rood-licht); font-weight: 600; }
.controlelijst li.let-op { background: var(--oranje-licht); }
.inline-form { display: inline-flex; gap: .4rem; align-items: center; }
.inline-form input { padding: .25rem .5rem; font-size: .9rem; }
.boektabel select[data-rekening] { min-width: 12rem; }
.boektabel select[data-btwcode] { min-width: 7.5rem; }
.boektabel input.bedrag { min-width: 5.5rem; }
.boektabel select[name$="[kostenplaats_id]"] { min-width: 6rem; max-width: 10rem; }