/* Statistieken-app. Kleuren en lettertypen zijn tokens: deze standaard is de huisstijl van FRYSK makelaars,
   elk kantoor zet zijn eigen tokens in klanten/<klant>/thema.css (maak die met tools/nieuwe_klant.py).
   merk = kop en getallen, accent = links en informatie, cta = alleen de knop die het werk afmaakt,
   groen/oranje/rood = goed / let op / actie nodig (vast, voor elk kantoor gelijk). */
:root {
  --merk: #582a8a; --merk-d: #3f1171; --merk-l: #7244a4; --merk-licht: #f0e9f7;
  --accent: #007dbe; --accent-licht: #e3f1fa; --cta: #ec6226; --cta-d: #d3490d; --extra: #ca9063;
  --grijs: #f6f3f9; --rand: #e3dbec; --tekst: #24172f; --stil: #6d6178;
  --groen: #1b7f48; --groen-licht: #e2f4ea; --oranje: #b45f0a; --oranje-licht: #fdf0e1; --rood: #b42318; --rood-licht: #fde8e6;
  --signaal: #d92d20;
  --f-tekst: "Almarai", "Segoe UI", system-ui, Arial, sans-serif; --f-kop: "Roboto", "Arial Narrow", Arial, sans-serif;
  --kop-stijl: italic; --kop-gewicht: 900;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: var(--f-tekst); color: var(--tekst); background: var(--grijs); line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 8px; }
h1 { font-family: var(--f-kop); font-style: var(--kop-stijl); font-weight: var(--kop-gewicht); font-size: 1.9rem; color: var(--merk); margin: 4px 0 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; line-height: 1.15; }
h1 .stil { font-family: var(--f-tekst); font-style: normal; font-weight: 400; font-size: 1rem; }
h2 { font-size: 1.1rem; font-weight: 800; margin: 24px 0 8px; }
h3 { font-size: .95rem; font-weight: 800; margin: 16px 0 6px; color: var(--merk); }
.stil { color: var(--stil); font-weight: 400; font-size: .92em; }
.leeg { color: var(--stil); font-style: italic; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* kop */
.top { background: var(--merk); color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 12px color-mix(in srgb, var(--merk-d) 25%, transparent); }
.top-in { max-width: 1200px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.merk { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: .95rem; }
.merk:hover { text-decoration: none; }
.merk img { height: 30px; width: auto; display: block; }
.merk span { opacity: .8; font-weight: 400; border-left: 1px solid rgba(255,255,255,.35); padding-left: 10px; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.top nav a { padding: 7px 12px; border-radius: 9px; color: #fff; opacity: .82; font-weight: 700; font-size: .95rem; }
.top nav a:hover { opacity: 1; background: rgba(255,255,255,.12); text-decoration: none; }
.top nav a.actief { opacity: 1; background: rgba(255,255,255,.2); }
.zoek { margin-left: auto; }
.zoek input { width: 190px; padding: 8px 12px; border: 0; border-radius: 9px; font: inherit; font-size: .9rem; background: rgba(255,255,255,.16); color: #fff; }
.zoek input::placeholder { color: rgba(255,255,255,.75); }
.zoek input:focus { background: #fff; color: var(--tekst); outline: none; }
.top .knop.nieuw { background: transparent; border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.top .knop.nieuw:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* belletje promotiesignaal + gebruikersmenu (details-dropdowns) */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.bel { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.14); position: relative; }
.bel:hover { background: rgba(255,255,255,.24); }
.bel svg { width: 18px; height: 18px; }
.rondje { position: absolute; top: -4px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--signaal); color: #fff; font-size: .74rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--merk); }
.paneel { position: absolute; right: 0; top: calc(100% + 10px); width: min(440px, calc(100vw - 32px)); background: #fff; color: var(--tekst); border-radius: 14px; box-shadow: 0 18px 50px rgba(36,23,47,.28); overflow: hidden; z-index: 30; }
.paneel-kop { padding: 12px 16px; border-bottom: 1px solid var(--rand); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.paneel-kop b { font-size: .98rem; }
.paneel-lijst { max-height: 60vh; overflow-y: auto; }
.prow { padding: 11px 16px; border-bottom: 1px solid var(--rand); display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.prow:last-child { border-bottom: 0; }
.prow .wat { font-size: .82rem; color: var(--stil); grid-column: 1; }
.prow form { grid-row: 1 / span 2; grid-column: 2; }
.prow.gezien { background: var(--grijs); }
.prow.gezien .adresregel { color: var(--stil); }
.stip-rood { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--signaal); margin-right: 6px; }
.menu-naam { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: .92rem; padding: 6px 10px; border-radius: 9px; }
.menu-naam:hover { background: rgba(255,255,255,.12); }
.menu-naam .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--extra); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.paneel.menu { width: 240px; padding: 6px; }
.paneel.menu a, .paneel.menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--tekst); font: inherit; font-size: .93rem; background: none; border: 0; cursor: pointer; }
.paneel.menu a:hover, .paneel.menu button:hover { background: var(--merk-licht); text-decoration: none; }
.paneel.menu hr { border: 0; border-top: 1px solid var(--rand); margin: 6px 0; }

footer { text-align: center; color: var(--stil); font-size: .82rem; padding: 24px 16px 32px; }

/* knoppen */
.knop { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1.5px solid var(--rand); border-radius: var(--knop-hoek, 999px); background: #fff; color: var(--tekst); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; line-height: 1.2; text-transform: var(--knop-letters, none); letter-spacing: var(--knop-spatie, normal); }
.knop:hover { border-color: var(--merk); text-decoration: none; }
.knop.primair { background: var(--merk); border-color: var(--merk); color: #fff; }
.knop.primair:hover { background: var(--merk-d); }
.knop.doe { background: var(--cta); border-color: var(--cta); color: var(--cta-tekst, #fff); }
.knop.doe:hover { background: var(--cta-d); border-color: var(--cta-d); }
.knop.gevaar { color: var(--rood); }
.knop.klein { padding: 6px 12px; font-size: .85rem; }
button.link { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
button.link.klein { font-size: .85rem; }
button.link.gevaar { color: var(--rood); }
form.inline { display: inline; }

/* meldingen */
.melding { padding: 11px 15px; border-radius: 10px; margin: 0 0 12px; background: var(--accent-licht); border-left: 4px solid var(--accent); }
.melding.ok { background: var(--groen-licht); border-color: var(--groen); }
.melding.fout { background: var(--rood-licht); border-color: var(--rood); }
.melding.let { background: var(--oranje-licht); border-color: var(--oranje); }
.melding.demo { background: color-mix(in srgb, var(--cta) 12%, #fff); border-color: var(--cta); }
.melding ul { margin: 0; padding-left: 18px; }

/* kaarten en tegels */
.kaart { background: #fff; border-radius: 14px; padding: 16px 18px; margin: 0 0 14px; border: 1px solid var(--rand); }
.kaart h2:first-child { margin-top: 0; }
.kaart.smal { max-width: 480px; }
.kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.kolommen > * { min-width: 0; }
@media (max-width: 860px) { .kolommen { grid-template-columns: 1fr; } }
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.tegels.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .tegels.drie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tegels.drie { grid-template-columns: 1fr; } }
.tegel { background: #fff; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--rand); color: var(--tekst); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tegel .t { font-size: .8rem; color: var(--stil); font-weight: 700; }
.tegel .w { font-family: var(--f-kop); font-style: var(--kop-stijl); font-weight: var(--kop-gewicht); font-size: 2rem; color: var(--merk); line-height: 1.1; }
.tegel .norm { font-size: .8rem; color: var(--stil); }
.tegel svg { display: block; width: 100%; height: 36px; margin-top: 6px; }

/* Vandaag: takenkaarten */
.groet { font-family: var(--f-kop); font-style: var(--kop-stijl); font-weight: var(--kop-gewicht); color: var(--merk); font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 6px 0 4px; line-height: 1.15; text-wrap: balance; }
.ondertitel { color: var(--stil); margin: 0 0 18px; }
.vandaag-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .vandaag-raster { grid-template-columns: 1fr; } }
.taken { display: grid; gap: 12px; }
.taak { background: #fff; border-radius: 16px; padding: 15px 18px; border: 1px solid var(--rand); display: grid; gap: 4px; }
.taak .soort { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--stil); display: flex; gap: 8px; align-items: center; }
.taak .soort i { width: 8px; height: 8px; border-radius: 50%; background: var(--merk-l); display: inline-block; }
.taak.s-opvolgen .soort i { background: var(--rood); } .taak.s-uitkomst .soort i { background: var(--cta); }
.taak.s-courtage .soort i, .taak.s-transport .soort i { background: var(--oranje); }
.taak .adresregel { font-weight: 800; font-size: 1.08rem; }
.taak .adresregel a { color: var(--tekst); }
.taak .adresregel span { color: var(--stil); font-weight: 400; font-size: .92rem; margin-left: 4px; }
.taak .wat { font-size: .9rem; color: var(--stil); margin-bottom: 6px; }
.taakknoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.taakknoppen form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.taakknoppen input, .taakknoppen select { padding: 8px 12px; border: 1.5px solid var(--rand); border-radius: 999px; font: inherit; font-size: .9rem; background: #fff; color: var(--tekst); }
.taakknoppen input[type=text], .taakknoppen input[inputmode] { width: 170px; }
details.nietakkoord > summary, details.uitklap > summary { list-style: none; }
details.nietakkoord > summary::-webkit-details-marker, details.uitklap > summary::-webkit-details-marker { display: none; }
details.uitklap[open] { flex-basis: 100%; }
details.uitklap form { margin-top: 10px; }
form.bedragen { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; background: var(--grijs); border-radius: 12px; padding: 10px 12px; }
form.bedragen label { display: grid; gap: 3px; font-size: .78rem; color: var(--stil); font-weight: 700; }
form.bedragen input, form.bedragen select { width: 150px; }
form.bedragen label.breed { flex: 1 1 260px; }
form.bedragen label.breed input { width: 100%; }
details.nietakkoord[open], details.uitklap[open] { flex-basis: 100%; }
details.nietakkoord[open] > summary { border-color: var(--rood); color: var(--rood); }
details.nietakkoord form { margin-top: 8px; }
.klaar { background: #fff; border-radius: 16px; padding: 28px; text-align: center; border: 1px dashed var(--rand); }
.klaar b { font-family: var(--f-kop); font-style: var(--kop-stijl); font-weight: var(--kop-gewicht); color: var(--merk); font-size: 1.4rem; display: block; }
.verder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.verder a { background: #fff; border: 1px solid var(--rand); border-radius: 999px; padding: 6px 12px; font-size: .88rem; color: var(--tekst); }
.verder a b { color: var(--merk); }
.zijkant .kaart h2 { font-size: 1rem; margin: 0 0 8px; }

/* Pijplijn */
.pijp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 4px 0 20px; }
.stap { display: block; padding: 14px 14px 12px; background: #fff; border: 1px solid var(--rand); border-right-width: 0; color: var(--tekst); position: relative; min-width: 0; }
.stap:first-child { border-radius: 14px 0 0 14px; }
.stap:last-child { border-radius: 0 14px 14px 0; border-right-width: 1px; }
.stap:hover { background: var(--merk-licht); text-decoration: none; }
.stap.aan { background: var(--merk); color: #fff; border-color: var(--merk); }
.stap .naam { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--stil); }
.stap .n { font-family: var(--f-kop); font-style: var(--kop-stijl); font-weight: var(--kop-gewicht); font-size: 2.2rem; color: var(--merk); line-height: 1.05; }
.stap .geld { font-size: .82rem; color: var(--stil); font-variant-numeric: tabular-nums; }
.stap.aan .naam, .stap.aan .geld, .stap.aan .n { color: #fff; }
@media (max-width: 820px) { .pijp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .stap, .stap:first-child, .stap:last-child { border-radius: 12px; border-right-width: 1px; } }
@media (max-width: 460px) { .pijp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chip { display: inline-block; margin-top: 8px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.chip.let { background: var(--oranje-licht); color: var(--oranje); } .chip.goed { background: var(--groen-licht); color: var(--groen); } .chip.mis { background: var(--rood-licht); color: var(--rood); }
.meterbalk { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.meterbalk i { display: inline-block; height: 8px; border-radius: 4px; background: var(--merk-l); min-width: 3px; }
.meterbalk.laag i { background: var(--rood); } .meterbalk.hoog i { background: var(--groen); }

/* Woningen */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; align-items: center; }
.filters a { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--rand); background: #fff; color: var(--tekst); font-size: .88rem; font-weight: 700; }
.filters a.aan { background: var(--merk); color: #fff; border-color: var(--merk); }
.filters form { margin-left: auto; }
.filters input { padding: 7px 12px; border: 1px solid var(--rand); border-radius: 999px; font: inherit; font-size: .9rem; width: 220px; }

/* woningkaart */
.objectkop { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; }
.objectkop .foto { width: 120px; height: 86px; object-fit: cover; border-radius: 12px; }
.objectkop p { margin: 2px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tijdlijn { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--rand); display: grid; gap: 10px; }
.tijdlijn li { position: relative; font-size: .92rem; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.tijdlijn li::before { content: ""; position: absolute; left: -27px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--merk-l); border: 2px solid #fff; }
.tijdlijn li.toekomst::before { background: #fff; border-color: var(--merk-l); }
.tijdlijn .d { color: var(--stil); font-size: .82rem; min-width: 84px; font-variant-numeric: tabular-nums; }
.bron { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--merk-licht); color: var(--merk); white-space: nowrap; }
.bron.b-team { background: var(--oranje-licht); color: var(--oranje); }
.meter { background: var(--grijs); border-radius: 12px; padding: 14px; }
.meter .rij { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meter b { font-family: var(--f-kop); font-style: var(--kop-stijl); font-weight: var(--kop-gewicht); font-size: 1.7rem; color: var(--merk); }
.schaal { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--rood-licht), var(--oranje-licht), var(--groen-licht)); margin: 10px 0 4px; }
.schaal i { position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 2px; background: var(--tekst); }
.schaal em { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--stil); opacity: .6; }
.leg { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--stil); }
.zelfveld input { border-color: var(--cta) !important; }
.zelfveld { color: var(--oranje) !important; font-weight: 700; }

/* Cijfers */
.maanden { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 170px; margin-top: 10px; }
.maand { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; text-align: center; font-size: .72rem; color: var(--stil); min-width: 0; }
.maand .zuil { background: var(--merk); border-radius: 6px 6px 0 0; min-height: 2px; }
.maand.toekomst .zuil { background: var(--merk-l); opacity: .55; }
.maand b { color: var(--tekst); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .maand b { display: none; } }

/* lijsten */
.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li { padding: 7px 0; border-bottom: 1px solid var(--grijs); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.lijst li:last-child { border-bottom: none; }
.lijst.klein li { font-size: .88rem; padding: 4px 0; }
.wanneer { font-variant-numeric: tabular-nums; color: var(--merk); font-weight: 700; min-width: 48px; }
.lijst.klein .wanneer { min-width: 118px; color: var(--stil); font-weight: 400; }
.lijst em { color: var(--stil); font-style: normal; font-size: .88em; }
.plaats { color: var(--stil); font-size: .88em; margin-left: 6px; }

/* tabellen */
.scroll { overflow-x: auto; background: #fff; border-radius: 14px; border: 1px solid var(--rand); }
.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabel th, .tabel td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--grijs); vertical-align: top; }
.tabel th { background: var(--merk-licht); color: var(--merk); font-weight: 700; white-space: nowrap; position: sticky; top: 0; font-size: .82rem; }
.tabel tbody tr:hover { background: #faf7fd; }
.tabel tfoot td { font-weight: 700; background: var(--grijs); }
.tabel .num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel .nr { color: var(--stil); width: 1%; }
.tabel.compact th, .tabel.compact td { padding: 6px 9px; font-size: .88rem; }
.tabel .tekst { color: var(--stil); font-size: .88em; }
.nowrap { white-space: nowrap; }
a.adres { font-weight: 700; color: var(--tekst); }
a.adres:hover { color: var(--merk); }
@media (max-width: 720px) { .opt { display: none; } }

/* badges per fase */
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--grijs); color: var(--stil); }
.f-gesprek, .f-offerte { background: var(--accent-licht); color: var(--accent); }
.f-akkoord, .f-aanmelding { background: var(--merk-licht); color: var(--merk); }
.f-beschikbaar { background: var(--groen-licht); color: var(--groen); }
.f-onder_bod, .f-vov { background: var(--oranje-licht); color: var(--oranje); }
.f-verkocht { background: var(--merk); color: #fff; }
.f-getransporteerd { background: #ebe6f0; color: #4a4356; }
.f-niet_akkoord, .f-ingetrokken { background: var(--rood-licht); color: var(--rood); }
.f-geparkeerd { background: var(--grijs); color: var(--stil); }

/* formulieren */
.formulier label { display: block; font-size: .85rem; color: var(--stil); margin: 8px 0; }
.formulier label small { color: var(--stil); font-weight: 400; }
.formulier input, .formulier select, .formulier textarea { display: block; width: 100%; margin-top: 3px; padding: 9px 11px; border: 1.5px solid var(--rand); border-radius: 10px; font: inherit; font-size: 1rem; color: var(--tekst); background: #fff; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.formulier input:disabled { background: var(--grijs); color: var(--stil); border-style: dashed; }
.formulier .vink { display: flex; align-items: center; gap: 8px; }
.formulier .vink input { width: auto; margin: 0; }
.rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.rij3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
@media (max-width: 600px) { .rij2, .rij3 { grid-template-columns: 1fr; } }
.knoppen { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.formulier.compact label { margin: 4px 0; }
.filter { display: flex; gap: 14px; margin: 8px 0 12px; flex-wrap: wrap; }
.filter select { padding: 5px 8px; font: inherit; border: 1px solid var(--rand); border-radius: 8px; }
details summary { cursor: pointer; }
.actieknoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
details.actie summary { list-style: none; }
details.actie summary::-webkit-details-marker { display: none; }
details.actie[open] summary { background: var(--merk-licht); }
.actieform { margin-top: 8px; padding: 12px; border: 1px solid var(--rand); border-radius: 12px; background: var(--grijs); display: grid; gap: 8px; min-width: 240px; }
.actieform label { font-size: .85rem; color: var(--stil); }
.actieform input, .actieform select { display: block; width: 100%; padding: 8px 10px; border: 1.5px solid var(--rand); border-radius: 10px; font: inherit; margin-top: 3px; background: #fff; }

/* login */
.loginvlak { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--merk); background-image: radial-gradient(circle at 85% 110%, rgba(255,255,255,.08) 0 180px, transparent 181px); }
.login { width: 100%; max-width: 380px; background: #fff; padding: 30px; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login .logo { background: var(--merk); border-radius: 12px; padding: 14px; display: flex; justify-content: center; margin-bottom: 18px; }
.login .logo img { height: 40px; }
.login h1 { margin: 0 0 4px; font-size: 1.5rem; }
.login label { display: block; margin: 12px 0; font-size: .9rem; color: var(--stil); }
.login input { display: block; width: 100%; padding: 11px; margin-top: 4px; border: 1.5px solid var(--rand); border-radius: 10px; font: inherit; font-size: 1rem; }
.login button { width: 100%; margin-top: 10px; justify-content: center; }

@media (max-width: 1220px) {
  .merk span { display: none; }
  .zoek input { width: 150px; }
  .top .knop.nieuw { display: none; }
  .menu-naam .naamtekst { display: none; }
}
@media (max-width: 760px) {
  .top-in { gap: 8px 10px; }
  .merk span { display: none; }
  .zoek { order: 9; margin-left: 0; width: 100%; }
  .zoek input { width: 100%; }
  .top .knop.nieuw { display: none; }
  .top nav { order: 8; width: 100%; justify-content: space-between; }
  .top nav a { flex: 1; text-align: center; padding: 7px 4px; }
  .rechts { margin-left: auto; }
  main { padding: 14px 12px 8px; }
  .filters form { margin-left: 0; width: 100%; } .filters input { width: 100%; }
}
@media (max-width: 760px) { .paneel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; } .paneel.menu { left: auto; width: 240px; } }
@media (prefers-reduced-motion: no-preference) { .knop.doe { transition: background .15s, transform .15s; } .knop.doe:hover { transform: translateY(-1px); } }

/* bedragcontrole: hoe de app een bedrag leest, en waarschuwing bij een ongebruikelijk bedrag */
.bedraghint { display: block; font-size: .8rem; font-weight: 400; color: var(--stil); min-height: 1.2em; margin-top: 3px; }
.bedraghint.let { color: var(--oranje); font-weight: 700; }
.bedraghint.fout { color: var(--rood); font-weight: 700; }
.bedraghint:empty { display: none; }
/* rekenhulp courtage: eerst de vraag, dan percentage + btw-keuze + de berekening */
.rekenhulp { grid-column: 1 / -1; margin: 8px 0 4px; padding: 10px 12px; border: 1px dashed var(--cta); border-radius: 10px; background: #fff; display: grid; gap: 8px; }
.rekenhulp .vink { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .92rem; color: var(--tekst); font-weight: 700; cursor: pointer; }
.rekenhulp .vink input { width: auto; margin: 0; accent-color: var(--oranje); }
.rekenhulp .rekenvelden { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.rekenhulp .pctveld { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .85rem; color: var(--stil); font-weight: 400; }
.rekenhulp .pct { display: inline-flex; align-items: center; gap: 4px; }
.rekenhulp .pct input { width: 5em; margin: 0; padding: 7px 9px; border: 1.5px solid var(--rand); border-radius: 10px; font: inherit; }
.rekenhulp .btwkeuze { display: inline-flex; gap: 12px; }
.rekenhulp .btwkeuze .vink { font-weight: 400; }
.rekenhulp .rekenuitleg { flex-basis: 100%; font-size: .8rem; color: var(--stil); }
.rekenhulp .rekenuitleg:empty { display: none; }
.rekenhulp .rekenuitleg.let { color: var(--oranje); font-weight: 700; }
.alleen-lezen .rekenhulp { display: none; }
.bedragok { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; background: var(--oranje-licht); border-radius: 9px; padding: 8px 12px; font-weight: 700; color: var(--oranje); }
.bedragok[hidden] { display: none !important; }
.bedragok input { width: auto !important; margin: 0; padding: 0; }
.bedragok.knipper { animation: knipper .5s 2; }
@keyframes knipper { 50% { background: var(--oranje); color: #fff; } }
@media (prefers-reduced-motion: reduce) { .bedragok.knipper { animation: none; outline: 3px solid var(--oranje); } }

/* rol 'alleen bekijken': geen knoppen om iets te wijzigen (de server weigert het ook) */
.alleen-lezen main form[method=post]:not([data-mag-altijd]) button, .alleen-lezen main details.uitklap, .alleen-lezen main details.nietakkoord,
.alleen-lezen main details.actie, .alleen-lezen .knop.nieuw, .alleen-lezen main a.knop.primair[href*="nieuw"],
.alleen-lezen main .acties { display: none !important; }
.alleen-lezen main form[method=post]:not([data-mag-altijd]) :is(input, select, textarea) { background: var(--grijs); }

/* updates aan verkopers */
.updatetekst { width: 100%; font: inherit; font-size: .92rem; padding: 10px 12px; border: 1.5px solid var(--rand); border-radius: 12px; background: var(--grijs); color: var(--tekst); margin: 6px 0 8px; resize: vertical; }
.taak.s-update .soort i, .taak.s-herlancering .soort i { background: var(--accent); }

/* kennisbank */
.top nav a.help { opacity: .6; font-size: .85rem; padding: 7px 10px; }
.help-zoek { display: flex; gap: 8px; margin: 0 0 16px; }
.help-zoek input { flex: 1; padding: 11px 14px; border: 1.5px solid var(--rand); border-radius: 999px; font: inherit; font-size: 1rem; }
.help-zoek input:focus { outline: 2px solid var(--merk); border-color: var(--merk); }
.help-groepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.help-groepen .kaart { margin: 0; }
.help-groep.actief { border-color: var(--merk); box-shadow: 0 0 0 2px var(--merk-licht); }
.help-res li { flex-direction: column; gap: 2px; align-items: flex-start; }
.help-res .frag { font-size: .9rem; color: var(--stil); }
mark { background: #ffe9a8; color: inherit; padding: 0 2px; border-radius: 3px; }
.help-tekst { max-width: 760px; line-height: 1.55; }
.help-tekst h2 { font-size: 1.15rem; margin: 18px 0 6px; }
.help-tekst table { border-collapse: collapse; width: 100%; margin: 8px 0 12px; font-size: .92rem; }
.help-tekst th, .help-tekst td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--grijs); vertical-align: top; }
.help-tekst th { color: var(--merk); }
.help-vraag textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--rand); border-radius: 10px; font: inherit; margin: 4px 0 10px; }
.kruimel { color: var(--stil); font-size: .9rem; margin: 0 0 4px; }
/* promotie: meerdere kanalen aanvinken */
.actieform .kanalen { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.actieform .kanalen legend { font-size: .85rem; color: var(--stil); padding: 0; margin-bottom: 4px; }
.actieform .vink { display: flex; align-items: center; gap: 8px; color: var(--tekst); font-size: .92rem; cursor: pointer; }
.actieform .vink input { width: auto; margin: 0; accent-color: var(--merk); }