:root {
    --oranje: #e8731a;
    --oranje-donker: #c85f0f;
    --grijs: #5f5a5a;
    --licht: #f4f2f0;
    --rand: #e3dfdc;
}

body { background: var(--licht); color: #2b2828; font-family: Arial, Helvetica, sans-serif; }
a { color: var(--oranje-donker); }
code { color: var(--oranje-donker); }

.prototype-balk { background: #2b2828; color: #fff; text-align: center; font-size: .8rem; padding: .3rem 1rem; }

.btn-oranje { background: var(--oranje); border-color: var(--oranje); color: #fff; }
.btn-oranje:hover, .btn-oranje:focus, .btn-oranje.active { background: var(--oranje-donker); border-color: var(--oranje-donker); color: #fff; }

/* topbar */
.topbar { background: #fff; border-bottom: 3px solid var(--oranje); }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding-top: .6rem; padding-bottom: .6rem; }
.topbar-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--grijs); font-weight: bold; font-size: 1.1rem; }
.topbar-brand img { height: 38px; }
.topbar-links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar-links a:not(.btn) { color: var(--grijs); text-decoration: none; font-weight: bold; padding: .2rem 0; border-bottom: 2px solid transparent; }
.topbar-links a:not(.btn).active { color: var(--oranje-donker); border-bottom-color: var(--oranje); }
.topbar-links .uitloggen { font-weight: normal !important; font-size: .9rem; }

.kaart { background: #fff; border: 1px solid var(--rand); border-radius: .5rem; padding: 1.25rem; }
.terug { color: var(--grijs); text-decoration: none; font-size: .9rem; }
.zoek { max-width: 300px; }

.melding-ok { background: #e7f5ea; border-left: 4px solid #2e9e4f; padding: .75rem 1rem; border-radius: .25rem; }
.melding-info { background: #fff4e8; border-left: 4px solid var(--oranje); padding: .75rem 1rem; border-radius: .25rem; font-size: .95rem; }

/* tabellen */
.table th { color: var(--grijs); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; background: #faf9f8; }
.table td, .table th { padding: .8rem 1rem; vertical-align: middle; }
.rapporten a.fw-bold { text-decoration: none; }
.voortgang-cel { min-width: 170px; }

.voortgang { flex: 1; height: 8px; background: #ebe7e4; border-radius: 4px; overflow: hidden; min-width: 80px; }
.voortgang.groot { height: 12px; border-radius: 6px; }
.voortgang-balk { height: 100%; width: 0; background: var(--oranje); transition: width .4s; }
.voortgang-balk.compleet { background: #2e9e4f; }

/* login */
.login-box { max-width: 380px; margin: 3rem auto; background: #fff; border: 1px solid var(--rand); border-radius: .5rem; padding: 2rem; }
.login-logo { width: 180px; margin-bottom: 1rem; }

/* upload */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; border: 2px dashed #cfc8c3; border-radius: .5rem; padding: 2rem 1rem; text-align: center; cursor: pointer; color: var(--grijs); background: #faf9f8; }
.dropzone:hover, .dropzone.over { border-color: var(--oranje); background: #fff4e8; }
.dropzone input { display: none; }
.dropzone-bestand { color: var(--oranje-donker); font-weight: bold; margin-top: .3rem; }
.uitleg ol { padding-left: 1.2rem; }
.uitleg li { margin-bottom: .4rem; }
.word-voorbeeld { border: 1px solid var(--rand); border-radius: .25rem; font-size: .85rem; overflow: hidden; }
.word-kop { background: #2b579a; color: #fff; padding: .3rem .6rem; font-size: .8rem; }
.word-voorbeeld table { width: 100%; }
.word-voorbeeld td { padding: .25rem .6rem; vertical-align: top; }
.word-voorbeeld td:first-child { color: var(--grijs); width: 35%; }
.word-voorbeeld mark { background: #fff3a0; font-weight: bold; }

/* detail */
.filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.filter { border: 1px solid var(--rand); background: #fff; border-radius: 2rem; padding: .25rem .9rem; font-size: .9rem; }
.filter.actief { background: var(--grijs); border-color: var(--grijs); color: #fff; }
.punten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.punt { background: #fff; border: 1px solid var(--rand); border-radius: .5rem; overflow: hidden; display: flex; flex-direction: column; }
.punt.is-ontvangen { border-color: #b9dfc3; }
.punt-foto { position: relative; aspect-ratio: 4 / 3; background: #ebe7e4; }
.punt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.punt-leeg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #9b9491; font-size: .9rem; border-bottom: 1px dashed #cfc8c3; }
.punt-nr { position: absolute; top: .5rem; left: .5rem; background: var(--oranje); color: #fff; font-weight: bold; border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; }
.punt-tekst { padding: .8rem 1rem; display: flex; flex-direction: column; flex: 1; }
.punt-tekst p { font-size: .9rem; margin: .3rem 0 .6rem; flex: 1; }
.punt-status { display: flex; justify-content: space-between; font-size: .85rem; }
.klasse { font-size: .75rem; padding: .1rem .45rem; border-radius: .25rem; white-space: nowrap; align-self: flex-start; }
.klasse-1 { background: #d9302c; color: #fff; }
.klasse-2 { background: #f5b400; }
.klasse-3 { background: #fff200; }

/* pdf-voorbeeld */
.pdf-pagina { background: #fff; max-width: 820px; margin: 0 auto; padding: 2.5rem 3rem; box-shadow: 0 2px 12px rgba(0,0,0,.12); font-size: .85rem; }
.pdf-kop { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #bbb; padding-bottom: .8rem; margin-bottom: 1.5rem; font-size: .75rem; gap: 1rem; }
.pdf-kop img { height: 34px; }
.pdf-h { font-size: 1rem; text-decoration: underline; font-weight: bold; margin-bottom: 1rem; }
.pdf-blok { width: 100%; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; margin-bottom: 1.5rem; break-inside: avoid; }
.pdf-blok td { padding: .15rem .4rem; vertical-align: top; }
.pdf-blok td:first-child { width: 30%; }
.pdf-blok td:nth-child(2) { width: 1rem; }
.pdf-blok .grijs td { background: #eee; }
.klasse-rij-1 td:last-child { background: #d9302c; color: #fff; }
.klasse-rij-2 td:last-child { background: #f5b400; }
.klasse-rij-3 td:last-child { background: #fff200; }
.pdf-qr { display: flex; gap: 1rem; align-items: center; color: inherit; text-decoration: none; padding: .5rem 0; }
.pdf-qr:hover strong { color: var(--oranje-donker); }
.pdf-qr .qr { width: 96px; height: 96px; flex-shrink: 0; border: 1px solid #ddd; }
.pdf-qr strong { display: block; font-size: 1rem; }
.pdf-qr small { color: #777; }

/* mail */
.mail { background: #fff; max-width: 640px; border: 1px solid var(--rand); border-radius: .5rem; overflow: hidden; }
.mail-kop { background: #faf9f8; border-bottom: 1px solid var(--rand); padding: .8rem 1.2rem; font-size: .9rem; }
.mail-kop span { display: inline-block; width: 90px; color: var(--grijs); }
.mail-body { padding: 1.5rem 1.2rem; }
.mail-logo { height: 40px; margin-bottom: 1rem; }

/* klantpagina (mobiel) */
.klant { background: var(--licht); }
.klant-kop { background: #fff; border-bottom: 3px solid var(--oranje); padding: .7rem 1rem; text-align: center; }
.klant-kop img { height: 40px; }
.klant-main { max-width: 480px; margin: 0 auto; padding: 1rem; }
.klant-kaart { background: #fff; border-radius: .75rem; padding: 1.25rem; border: 1px solid var(--rand); }
.klant-meta { color: var(--grijs); font-size: .85rem; }
.klant-titel { font-size: 1.6rem; font-weight: bold; margin: .2rem 0 1rem; }
.klant-titel span { font-size: 1rem; color: var(--grijs); font-weight: normal; }
.klant-punt { background: #faf9f8; border-radius: .5rem; padding: .9rem; margin-bottom: 1rem; font-size: .95rem; }
.klant-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #8a8380; }
.klant-inspectie { display: flex; gap: .5rem; overflow-x: auto; margin-top: .3rem; }
.klant-inspectie img { height: 90px; border-radius: .3rem; }
.klant-preview { margin-bottom: .8rem; }
.klant-preview img { width: 100%; border-radius: .5rem; max-height: 340px; object-fit: cover; }
.klant-knop { cursor: pointer; }
.klant-vinkje { width: 64px; height: 64px; margin: .5rem auto 0; border-radius: 50%; background: #2e9e4f; color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center; }
.klant-voet { text-align: center; color: #8a8380; font-size: .8rem; padding: 1rem; }

@media print {
    .prototype-balk, .topbar, .no-print { display: none !important; }
    body { background: #fff; }
    main.container { max-width: none; padding: 0 !important; }
    .pdf-pagina { box-shadow: none; padding: 0; max-width: none; }
}

h1 .badge { font-size: .8rem; font-weight: normal; }
@media (max-width: 575px) {
    .topbar-links { gap: .7rem; font-size: .95rem; }
    .pdf-pagina { padding: 1.25rem; }
}