/* WerfHero klantenpaneel – Werven (app.werfhero.be): werven, klachten & schade, foto's, dagrapporten en documenten
   rechtstreeks uit de Microsoft 365 van de klant. Zelfde tokens als panel.css (licht en donker), geel met mate,
   zwarte pictogramvakken met een geel teken, rood enkel voor gevaar. NOOIT blauw. Klassen beginnen met "ww-";
   het rapport om af te drukken met "rp-" (onderaan). */

/* ---------- Zwart blok met gevarenstreep (Overzicht en Werven): inloggen met Microsoft, of de cijfers live ---------- */
.ww-blok { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 40px;
  padding: 28px 32px 36px; border-radius: var(--hoek-lg); background: #141414; color: #FFFFFF; }
[data-thema="donker"] .ww-blok { background: #161616; box-shadow: inset 0 0 0 1px #262626; }
.ww-blok::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--strepen); }
.ww-blok .ww-blok__boven { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; }
.ww-blok h2 { font-family: var(--display); font-stretch: 112%; font-size: 26px; line-height: 1.15; max-width: 30ch; text-wrap: balance; }
.ww-blok p { margin: 10px 0 0; color: #BDBDBD; font-size: 15px; max-width: 64ch; }
.ww-blok p small { display: block; margin-top: 8px; color: #8F8F8F; font-size: 13px; }
.ww-blok :focus-visible { outline-color: #FFC20E; }
.ww-blok__acties { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 240px; }
.ww-blok__acties .link { color: #FFFFFF; justify-self: center; text-align: center; }
.ww-blok__acties .ww-live { justify-content: center; }
.ww-blok__fout { color: #FF8A3D !important; }
.ww-blok .knop--rand { background: transparent; border-color: #3A3A3A; color: #FFFFFF; }
.ww-blok .knop--rand:hover:not(:disabled) { border-color: #FFFFFF; }
.ww-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 8px 64px; margin-top: 18px; }
.ww-cijfer { display: grid; gap: 2px; min-width: 0; }
.ww-cijfer b { font-family: var(--display); font-stretch: 112%; font-size: 40px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.ww-cijfer span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #A8A8A8; }
.ww-cijfer--gevaar b { color: #FF6B7D; }
.ww-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--tekst-2); white-space: nowrap; }
.ww-blok .ww-live { color: #A8A8A8; }
.ww-live__stip { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-tekst); flex: none; }
.ww-live--fout .ww-live__stip { background: var(--let-tekst); }
.ww-blok .ww-live__stip { background: #32D583; }

/* ---------- Werkbalk, zoeken en filters ---------- */
.ww-kaartkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ww-kaartkop > .sectie-kop { margin: 0; }
.ww-kaartkop .knop--klein { min-height: 36px; }
.ww-kop-acties { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; justify-content: flex-end; }
.ww-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ww-balk__rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ww-zoek { position: relative; flex: 1 1 280px; max-width: 420px; }
.ww-zoek svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--tekst-2); pointer-events: none; }
.ww-zoek input { padding-left: 42px; }
.ww-seg { flex-wrap: wrap; }
.ww-seg button { display: inline-flex; align-items: center; gap: 6px; }
.ww-seg button .ww-n { font-weight: 700; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.ww-seg button[aria-pressed="true"] { box-shadow: var(--seg-schaduw), inset 0 -3px 0 var(--accent); }
.ww-sorteer { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; }
.ww-sorteer > span { font-size: 13px; font-weight: 700; color: var(--tekst-2); white-space: nowrap; }
.ww-sorteer select { min-height: 40px; padding: 0 34px 0 12px; font-size: 14px; font-weight: 700; }
.ww-bron { margin: 16px 0 0; font-size: 13px; color: var(--tekst-2); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.ww-bron b { color: var(--tekst); font-weight: 700; }
.ww-bron .link { font-size: 13px; padding: 0; }

.chip[aria-pressed="true"] .zacht { color: inherit; opacity: .7; }

/* ---------- Lijst van werven: tabel op de computer, kaarten op de gsm ---------- */
.ww-werven { list-style: none; margin: 0; padding: 0; }
.ww-werven__kop, .ww-werf { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.4fr) minmax(110px, .8fr) minmax(0, 1.7fr) minmax(110px, .8fr); gap: 16px; align-items: center; }
.ww-werven__kop { padding: 0 12px 10px; border-bottom: 1px solid var(--rand); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-2); font-weight: 800; }
.ww-werf { position: relative; padding: 14px 12px; border-bottom: 1px solid var(--rand-zacht); transition: background-color var(--t1) ease; }
.ww-werf:last-child { border-bottom: 0; }
.ww-werf__naam { min-width: 0; }
.ww-werf__naam a { font-weight: 800; font-size: 15px; text-decoration: none; overflow-wrap: anywhere; }
.ww-werf__naam a::after { content: ""; position: absolute; inset: 0; }
.ww-werf__naam a:focus-visible { outline: none; }
.ww-werf__naam a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.ww-werf__nr { display: block; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.ww-werf small { display: block; color: var(--tekst-2); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.ww-werf__cel { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.ww-werf__label { display: none; }
.ww-tel { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-weight: 700; }
.ww-tel--gevaar { color: var(--gevaar-tekst); }
.ww-blokkeert { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--gevaar-tekst); }
.ww-werf__meldingen .ww-blokkeert { display: flex; }
.ww-blokkeert::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gevaar-vlak); }
@media (hover: hover) { .ww-werf:hover { background: var(--oppervlak-hover); } }

/* ---------- Eén vorm voor elke toestand: inloggen, sessie verlopen, toestemming, fout, leeg ----------
   Kaart met pictogramvak, titel, tekst en knoppen (werven.js: toestand()). --binnen: in een kaart, zonder eigen rand. */
.ww-toestand { display: flex; align-items: flex-start; gap: 18px; padding: 26px 28px; border-radius: var(--hoek-lg); background: var(--oppervlak); border: 1px solid var(--rand); }
.ww-toestand .ikoonvak { width: 48px; height: 48px; border-radius: var(--hoek-md); }
.ww-toestand .ikoonvak svg { width: 24px; height: 24px; }
.ww-toestand__tekst { min-width: 0; flex: 1; }
.ww-toestand h2 { margin: 0; font-family: var(--display); font-stretch: 108%; font-size: 21px; font-weight: 900; line-height: 1.2; text-wrap: balance; }
.ww-toestand p { margin: 6px 0 0; color: var(--tekst-2); font-size: 15px; max-width: 68ch; }
.ww-toestand .ww-toestand__klein { font-size: 13px; }
.ww-toestand .fout { margin-top: 12px; }
.ww-toestand__knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ww-toestand--binnen { padding: 18px; border: 0; border-radius: var(--hoek-md); background: var(--oppervlak-2); }
.ww-toestand--binnen .ikoonvak { width: 40px; height: 40px; }
.ww-toestand--binnen h2 { font-family: var(--font); font-stretch: normal; font-size: 16px; font-weight: 800; }
.ww-toestand--binnen p { font-size: 14px; }
.ww-toestand--gevaar { border-color: var(--gevaar-vlak); box-shadow: inset 4px 0 0 var(--gevaar-vlak); }

/* ---------- Overzicht: cijfers, "Vandaag op de werven" ---------- */
.ww-ov { display: grid; gap: 16px; }
.ww-ov:empty { display: none; }
.ww-act .ww-kaartkop { margin-bottom: 14px; }
.ww-act .ww-live { font-weight: 600; }
.ww-act__fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ww-act__foto { display: block; color: var(--tekst); text-decoration: none; border-radius: var(--hoek-md); }
.ww-act__foto .ww-foto__beeld { aspect-ratio: 4 / 3; }
.ww-act__foto b { display: block; margin-top: 6px; font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-act__foto small { display: block; color: var(--tekst-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-act__foto:focus-visible { outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .ww-act__foto:hover .ww-foto__beeld img { transform: scale(1.03); } }
.ww-act__sub { margin: 20px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-2); }
.ww-act__lijst small { display: block; color: var(--tekst-2); font-size: 13px; overflow-wrap: anywhere; }
.ww-act__lijst .naar { margin-top: 2px; min-height: 28px; font-size: 13px; }
.ww-act__niets { margin: 14px 0 0; font-size: 13px; }

/* ---------- Leeg, fout en toestemming ---------- */
.ww-leeg { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: var(--hoek-md); background: var(--oppervlak-2); }
.ww-leeg b { display: block; font-weight: 800; }
.ww-leeg p { margin: 4px 0 0; color: var(--tekst-2); font-size: 14px; max-width: 70ch; }
.ww-leeg .knop { margin-top: 12px; }
.ww-leeg__knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ww-leeg__knoppen .knop { margin: 0; }
.ww-consent { margin-top: 12px; display: grid; gap: 8px; text-align: left; }
.ww-consent.fout b { display: block; font-size: 15px; }
.ww-consent.fout p { margin: 0; color: var(--tekst); font-weight: 500; font-size: 14px; }
.ww-consent__knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ww-consent__knoppen .knop { flex: 1 1 auto; }
.ww-consent .zacht { text-align: left; margin: 0; font-size: 13px; }
.ww-consent code { display: block; padding: 10px 12px; border-radius: var(--hoek-xs); background: var(--oppervlak); border: 1px solid var(--rand); font-size: 12px; overflow-wrap: anywhere; color: var(--tekst); }

/* ---------- Werf: kop, tabbladen ---------- */
.ww-kop-status { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.ww-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rand); overflow-x: auto; scrollbar-width: none; margin-bottom: -8px; }
.ww-tabs::-webkit-scrollbar { display: none; }
.ww-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 800; color: var(--tekst-2); cursor: pointer; white-space: nowrap; border-radius: var(--hoek-sm) var(--hoek-sm) 0 0; }
.ww-tab:hover { color: var(--tekst); }
.ww-tab[aria-selected="true"] { color: var(--tekst); }
.ww-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 4px; border-radius: 2px 2px 0 0; background: var(--accent); }
.ww-tab .pill { min-height: 20px; padding: 0 8px; font-size: 11px; }
.ww-tab .pill--gevaar, .pill--gevaar { background: var(--gevaar-vlak); color: #FFFFFF; }
.ww-tab:focus-visible { outline-offset: -3px; }

/* ---------- Klachten & schade: lijst links, detail rechts ---------- */
.ww-md { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.ww-md > .kaart { min-width: 0; }
.ww-detail { position: sticky; top: calc(var(--balk-h) + var(--boven) + 16px); }
.ww-meldingen { list-style: none; margin: 0 -8px; padding: 0; display: grid; gap: 2px; }
.ww-melding { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 8px; border: 0; border-radius: var(--hoek-sm); background: none; color: var(--tekst); font: inherit; cursor: pointer; }
.ww-melding:hover { background: var(--oppervlak-hover); }
.ww-melding[aria-current="true"] { background: var(--oppervlak-2); box-shadow: inset 4px 0 0 var(--accent); }
.ww-melding__tekst { min-width: 0; flex: 1; }
.ww-melding__tekst b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 800; font-size: 14px; overflow-wrap: anywhere; }
.ww-melding__tekst small { display: block; color: var(--tekst-2); font-size: 13px; margin-top: 3px; }
.ww-melding__status { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.ww-melding__fotos { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--tekst-2); flex: none; margin-top: 2px; }
.ww-melding__fotos svg { width: 15px; height: 15px; }
.ww-d-kop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ww-d-titel, .kaart > h2.ww-d-titel { display: block; min-height: 0; font-family: var(--display); font-stretch: 108%; font-size: 24px; font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; text-transform: none; overflow-wrap: anywhere; margin: 0 0 16px; }
.kaart > h2.ww-d-titel::before { content: none; }
button.terug { border: 0; background: none; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px 0; }
.ww-todo { background: var(--oppervlak-2); border-left: 4px solid var(--accent); border-radius: 0 var(--hoek-xs) var(--hoek-xs) 0; padding: 10px 14px 12px; margin: 0 0 16px; }
.ww-todo span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-2); }
.ww-todo b { display: block; margin-top: 2px; font-size: 16px; overflow-wrap: anywhere; white-space: pre-line; }
.ww-waar { display: flex; gap: 8px; align-items: flex-start; font-weight: 800; font-size: 15px; margin: 0 0 4px; overflow-wrap: anywhere; }
.ww-waar svg { width: 18px; height: 18px; margin-top: 1px; color: var(--tekst-2); }
.ww-waar-sub { margin: 0 0 16px 26px; font-size: 13px; color: var(--tekst-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ww-sectie { margin-top: 22px; }
.ww-sectie > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ww-sectie > h3::before { content: ""; width: 14px; height: 4px; border-radius: 2px; background: var(--accent); flex: none; }
.ww-sectie > h3 small { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--tekst-2); }
.ww-tijdlijn { list-style: none; margin: 0; padding: 0; }
.ww-tijdlijn li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rand-zacht); font-size: 14px; }
.ww-tijdlijn li:last-child { border-bottom: 0; }
.ww-tijdlijn time, .ww-tijdlijn .ww-wanneer { color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.ww-tijdlijn b { font-weight: 800; }
.ww-tijdlijn small { display: block; color: var(--tekst-2); font-size: 13px; white-space: pre-line; }
.ww-tijdlijn .ww-stop b { color: var(--gevaar-tekst); }
.ww-mini-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ww-d-acties { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rand-zacht); }
.ww-d-acties .zacht { font-size: 13px; }
.ww-intern { margin-top: 22px; padding: 14px 16px; border-radius: var(--hoek-md); border: 1.5px dashed var(--rand); }
.ww-intern .gegevens { font-size: 13px; }
.ww-terug-lijst { display: none; }

/* Nieuwe melding */
.ww-form .veld { margin-bottom: 16px; }
.ww-form-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.ww-form__knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.ww-form__uitleg { font-size: 13px; color: var(--tekst-2); margin: 0 0 16px; }
.ww-keuze { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--hoek-sm); background: var(--seg-baan); border: 0; margin: 0 0 16px; min-width: 0; }
.ww-keuze legend { padding: 0; margin-bottom: 6px; font-weight: 700; font-size: 14px; float: left; width: 100%; }
.ww-keuze-wrap { display: grid; gap: 6px; margin-bottom: 16px; }
.ww-keuze-wrap > span { font-weight: 700; font-size: 14px; }
.ww-keuze-wrap .ww-keuze { margin: 0; justify-self: start; }
.ww-keuze label { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 9px; font-weight: 800; font-size: 14px; color: var(--tekst-2); cursor: pointer; }
.ww-keuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ww-keuze label:has(input:checked) { background: var(--seg-actief); color: var(--tekst); box-shadow: var(--seg-schaduw), inset 0 -3px 0 var(--accent); }
.ww-keuze label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }

/* ---------- Foto's ---------- */
.ww-dag { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ww-dag:first-child { margin-top: 0; }
.ww-dag small { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--tekst-2); }
.ww-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ww-foto { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--tekst); font: inherit; text-align: left; cursor: zoom-in; border-radius: var(--hoek-md); }
.ww-foto__beeld { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--hoek-md); overflow: hidden; background: var(--oppervlak-2); }
.ww-foto__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t3) var(--ease); }
.ww-foto__fase { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: var(--hoek-pil); background: rgba(20, 20, 20, .82); color: #FFFFFF; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.ww-foto__fase--schade { background: var(--gevaar-vlak); }
.ww-foto__onder { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; }
.ww-foto__onder b { font-weight: 800; font-variant-numeric: tabular-nums; }
.ww-foto__onder span { color: var(--tekst-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-foto__leeg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--tekst-2); }
.ww-foto__leeg svg { width: 28px; height: 28px; }
.ww-foto:focus-visible { outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .ww-foto:hover .ww-foto__beeld img { transform: scale(1.03); } }
.ww-meer { margin-top: 16px; }

/* Lichtbak: neutraal zwart (geen blauwe tint), foto zo groot mogelijk, gegevens eronder. */
.ww-licht { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0A0A0A; color: #F5F5F5; }
.ww-licht[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ww-licht::backdrop { background: #0A0A0A; }
.ww-licht__kop { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.ww-licht__kop h2 { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ww-licht__kop .knop--rand { background: transparent; border-color: #333333; color: #F5F5F5; }
.ww-licht__kop .knop--rand:hover { border-color: #F5F5F5; }
.ww-licht__kop .knop--ikoon, .ww-licht__nav { color: #F5F5F5; }
.ww-licht__kop .knop--ikoon:hover { background: #1E1E1E; color: #FFFFFF; }
.ww-licht__vak { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 72px; }
.ww-licht__vak img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.ww-licht__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: #1E1E1E; display: grid; place-items: center; cursor: pointer; }
.ww-licht__nav:hover:not(:disabled) { background: #333333; }
.ww-licht__nav:disabled { opacity: .3; cursor: default; }
.ww-licht__nav--vorige { left: 12px; }
.ww-licht__nav--volgende { right: 12px; }
.ww-licht__nav svg { width: 22px; height: 22px; }
.ww-licht__onder { padding: 14px 20px 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 14px; color: #BDBDBD; }
.ww-licht__onder b { color: #FFFFFF; }
.ww-licht__onder a { color: #FFFFFF; text-decoration-color: #FFC20E; }
.ww-licht__onder .ww-teller { margin-left: auto; font-variant-numeric: tabular-nums; }
.ww-licht :focus-visible { outline-color: #FFC20E; }

/* ---------- Dagrapporten ---------- */
.ww-dagen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ww-dagrapport { border: 1px solid var(--rand); border-radius: var(--hoek-md); background: var(--oppervlak); }
.ww-dagrapport__kop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; }
.ww-dagrapport__open { display: contents; }
.ww-dagrapport__knop { grid-column: 1 / 3; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--hoek-sm); }
.ww-datum { width: 56px; height: 56px; border-radius: var(--hoek-sm); background: var(--merkdoos); color: #FFFFFF; display: grid; place-content: center; text-align: center; line-height: 1; flex: none; }
.ww-datum b { font-family: var(--display); font-stretch: 112%; font-size: 22px; font-weight: 900; color: var(--accent); }
.ww-datum span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.ww-dagrapport__tekst { min-width: 0; }
.ww-dagrapport__tekst b { display: block; font-weight: 800; font-size: 15px; }
.ww-dagrapport__tekst small { display: block; color: var(--tekst-2); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.ww-dagrapport__labels { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; }
.ww-dagrapport__rechts { display: flex; gap: 6px; align-items: center; }
.ww-chevron { width: 18px; height: 18px; color: var(--tekst-2); transition: transform var(--t2) var(--ease); }
[aria-expanded="true"] .ww-chevron { transform: rotate(180deg); }
.ww-dagrapport__inhoud { padding: 4px 18px 18px 84px; display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ww-dagrapport__inhoud .ww-sectie { margin: 0; }
.ww-dagrapport__inhoud p { margin: 0; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.ww-hoev { width: 100%; font-size: 14px; }
.ww-hoev td { height: auto; padding: 6px 0; border-bottom: 1px solid var(--rand-zacht); }
.ww-hoev td:last-child { text-align: right; font-weight: 800; white-space: nowrap; padding-left: 12px; }
.ww-ploeg { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.ww-ploeg li { display: flex; justify-content: space-between; gap: 12px; }
.ww-ploeg li span:last-child { font-weight: 800; font-variant-numeric: tabular-nums; }
.ww-ploeg .ww-afwezig { color: var(--tekst-2); }

/* ---------- Documenten (KLIP, LMRA, leidingen) ---------- */
.ww-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ww-bestanden { list-style: none; margin: 0; padding: 0; }
.ww-bestanden li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rand-zacht); font-size: 14px; }
.ww-bestanden li:last-child { border-bottom: 0; }
.ww-bestanden a { font-weight: 800; overflow-wrap: anywhere; }
.ww-bestanden small { display: block; color: var(--tekst-2); font-size: 12px; margin-top: 2px; }
.ww-bestanden .ww-mini { width: 44px; height: 44px; border-radius: var(--hoek-xs); object-fit: cover; flex: none; background: var(--oppervlak-2); }
.ww-klip { display: grid; gap: 4px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--hoek-sm); background: var(--oppervlak-2); font-size: 14px; }
.ww-klip b { font-weight: 800; }

/* ---------- Inloggen met Microsoft op het inlogscherm ---------- */
.ww-ms-login { display: grid; gap: 8px; margin: 6px 0 20px; }
.ww-ms-login .zacht { margin: 0; font-size: 13px; text-align: center; }
.ww-of { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; font-size: 13px; font-weight: 700; color: var(--tekst-2); }
.ww-of::before, .ww-of::after { content: ""; flex: 1; height: 1px; background: var(--rand); }

/* ---------- Start van nul: Start je bedrijf, Aan de slag, Waar komen je werven?, Nieuwe werf ---------- */
/* Start je bedrijf (nog bij geen bedrijf): in de kaart van de melding, één gele knop over de volle breedte. */
.start { display: grid; gap: 14px; margin: 22px 0 16px; }
.start .veld { margin: 0; }
.start .fout { margin: 0; }
.start__vink { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--tekst-2); cursor: pointer; }
.start__vink input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--tekst); }
.start__vink a { color: var(--tekst); font-weight: 700; }
.start__ploeg { margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--rand); font-size: 14px; color: var(--tekst-2); }
/* Nog geen plaats: de vraag aan de beheerder met het e-mailadres, dan Opnieuw controleren (geel) en een eigen bedrijf (omlijnd). */
.seat__vraag { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--hoek-md); background: var(--oppervlak-2); }
.seat__vraag p { margin: 0; font-size: 15px; color: var(--tekst); overflow-wrap: anywhere; }
.seat__kopieer { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 14px; }
.seat__kopieer svg { width: 16px; height: 16px; flex: none; }
.melding__keuzes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.melding__keuzes [hidden] { display: none; }
/* Uitnodigen: het Microsoft 365-adres van het werk, onder het e-mailveld over de hele breedte van het formulier. */
.uitnodig__m365 { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.uitnodig__m365 svg { width: 14px; height: 14px; flex: none; }
.start input[aria-invalid="true"], .ww-ob input[aria-invalid="true"] { border-color: var(--gevaar-vlak); }

/* Aan de slag · x van 5 (Overzicht): zoals de stappenlijst op Start in de app; titels en uitleg in twee vaste kolommen. */
.ob-plek:empty { display: none; }
.ob > h2 .meer { background: none; border: 0; font-family: inherit; cursor: pointer; }
.ob > h2 .meer:hover, .ob > h2 .meer:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ob__stappen { list-style: none; margin: 0; padding: 0; }
.ob__stappen > li + li { border-top: 1px solid var(--rand-zacht); }
.ob__stap { display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; align-items: center; gap: 16px; min-height: 56px; padding: 10px 12px; margin: 0 -12px;
  border-radius: var(--hoek-sm); color: var(--tekst); text-decoration: none; transition: background-color var(--t1) ease; }
a.ob__stap:hover { background: var(--oppervlak-hover); }
.ob__stap > svg { width: 18px; height: 18px; color: var(--tekst-2); }
.ob__nr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--rand); font-size: 14px; font-weight: 800; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.ob__nr svg { width: 16px; height: 16px; }
.ob__stap--klaar .ob__nr { background: var(--merkdoos); border-color: var(--merkdoos); color: var(--accent); }
.ob__stap--nu .ob__nr { background: var(--accent); border-color: var(--accent); color: var(--op-accent); }
.ob__tekst { display: grid; grid-template-columns: minmax(0, 16em) minmax(0, 1fr); align-items: baseline; gap: 2px 24px; min-width: 0; }
.ob__tekst b { font-size: 15px; font-weight: 800; }
.ob__tekst small { font-size: 14px; color: var(--tekst-2); }
/* Afgewerkt: gedempt (nog aan te klikken), zodat de open stappen eruit springen. */
.ob__stap--klaar .ob__tekst b { color: var(--tekst-2); font-weight: 700; }
.ob-terug { margin: 14px 0 0; font-size: 14px; }

/* Waar komen je werven? en Nieuwe werf (Werven › Klaarzetten, Werven › Nieuwe werf). Zelfde kop en opvulling als de
   toestanden (Klaar, toestemming, zonder Microsoft): pictogram en titel staan in de hele stroom op dezelfde plaats. */
.ww-ob { display: grid; gap: 22px; }
.kaart.ww-ob { padding: 26px 28px; }
.ww-ob__kop { display: flex; align-items: flex-start; gap: 18px; }
.ww-ob__kop .ikoonvak { width: 48px; height: 48px; border-radius: var(--hoek-md); }
.ww-ob__kop .ikoonvak svg { width: 24px; height: 24px; }
.ww-ob__kop h2 { margin: 0; font-family: var(--display); font-stretch: 108%; font-size: 21px; font-weight: 900; line-height: 1.2; text-wrap: balance; }
.ww-ob__kop p { margin: 6px 0 0; color: var(--tekst-2); font-size: 15px; max-width: 68ch; }
.ww-ob__form { display: grid; gap: 18px; }
.ww-ob__keuzes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ww-ob__keuze { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 2px solid var(--rand); border-radius: var(--hoek-md); background: var(--oppervlak); cursor: pointer;
  transition: border-color var(--t1) ease; }
.ww-ob__keuze:hover { border-color: var(--tekst-2); }
.ww-ob__keuze:has(input:checked) { border-color: var(--tekst); }
.ww-ob__keuze:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ww-ob__keuze input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tekst); }
.ww-ob__keuze input:focus-visible { outline: none; }
.ww-ob__keuze b { font-size: 15px; font-weight: 800; }
.ww-ob__keuze .pill { margin-left: 8px; vertical-align: 2px; }
.ww-ob__keuze small { display: block; margin-top: 4px; font-size: 13px; color: var(--tekst-2); }
.ww-ob__velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ww-ob__velden .veld { margin: 0; }
.ww-ob__velden .fout { margin: 0; }
.ww-ob__voor { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.ww-ob__voor svg { width: 16px; height: 16px; flex: none; }
.ww-ob__form .fout { margin: 0; }
.ww-ob__form .fout .naar { margin: 0 0 0 6px; min-height: 0; }
.ww-ob__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
/* Klaar: waar de werven nu staan, met de link naar SharePoint rechts (op de gsm eronder, het pictogram blijft bij de tekst). */
.ww-toestand .ww-ob__plaats { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; max-width: none; margin: 14px 0 0;
  padding: 12px 16px; border-radius: var(--hoek-md); background: var(--oppervlak-2); color: var(--tekst); }
.ww-ob__plaats > svg { width: 18px; height: 18px; color: var(--tekst-2); }
.ww-ob__plaats b { font-weight: 800; overflow-wrap: break-word; min-width: 0; }
.ww-ob__plaats .naar { margin: 0; }
@media (max-width: 900px) {
  .ob__tekst { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .start { margin-top: 18px; }
  .ob__stap { gap: 12px; }
  .ww-ob { gap: 18px; }
  .kaart.ww-ob { padding: 20px; }
  /* Op de gsm: pictogram (40 px) en titel op één rij, de uitleg eronder over de volle breedte (zoals de toestanden). */
  .ww-ob__kop { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; align-items: center; }
  .ww-ob__kop > div { display: contents; }
  .ww-ob__kop .ikoonvak { width: 40px; height: 40px; }
  .ww-ob__kop .ikoonvak svg { width: 20px; height: 20px; }
  .ww-ob__kop h2 { grid-column: 2; grid-row: 1; font-size: 19px; }
  .ww-ob__kop p { grid-column: 1 / -1; margin-top: 12px; }
  .ww-ob__keuzes, .ww-ob__velden { grid-template-columns: minmax(0, 1fr); }
  .ww-ob__knoppen .knop { flex: 1 1 auto; }
  .ww-toestand .ww-ob__plaats { grid-template-columns: 18px minmax(0, 1fr); }
  .ww-ob__plaats b { font-size: 14px; }
  .ww-ob__plaats .naar { grid-column: 2; justify-self: start; }
}

/* ---------- Responsief ---------- */
@media (max-width: 1180px) {
  .ww-md { grid-template-columns: minmax(0, 1fr); }
  .ww-md--detail > .ww-lijstkaart { display: none; }
  .ww-md:not(.ww-md--detail) > .ww-detail { display: none; }
  .ww-detail { position: static; }
  .ww-terug-lijst { display: inline-flex; margin-bottom: 14px; }
  .ww-docs { grid-template-columns: minmax(0, 1fr); }
  .ww-werven__kop, .ww-werf { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.6fr); }
  .ww-werven__kop > :nth-child(2), .ww-werven__kop > :nth-child(5), .ww-werf > .ww-werf__client, .ww-werf > .ww-werf__tijd { display: none; }
}
@media (max-width: 900px) {
  .ww-blok { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 32px; }
  .ww-blok__acties { min-width: 0; }
  .ww-dagrapport__inhoud { grid-template-columns: minmax(0, 1fr); padding-left: 18px; }
}
@media (max-width: 640px) {
  .ww-blok h2 { font-size: 22px; }
  .ww-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; align-items: start; }
  .ww-cijfer span { min-height: 2.6em; }
  /* Zelfde kop als Waar komen je werven? en Nieuwe werf: pictogram (40 px) en titel op één rij, uitleg en knoppen eronder
     over de volle breedte (geen knop die uit de kaart loopt). */
  .ww-toestand { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 20px; }
  .ww-toestand__tekst { display: contents; }
  .ww-toestand__tekst > h2 { grid-column: 2; grid-row: 1; }
  .ww-toestand__tekst > :not(h2) { grid-column: 1 / -1; }
  .ww-toestand__tekst > h2 + p { margin-top: 12px; }
  .ww-toestand .ikoonvak { width: 40px; height: 40px; }
  .ww-toestand .ikoonvak svg { width: 20px; height: 20px; }
  .ww-toestand:not(.ww-toestand--binnen) h2 { font-size: 19px; }
  .ww-toestand--binnen { padding: 16px; }
  /* Knoppen onder elkaar over de volle breedte; een lange tekst breekt binnen de knop af, nooit buiten de kaart. */
  .ww-toestand__knoppen .knop { display: block; flex: 1 1 100%; min-width: 0; padding: 11px 14px; white-space: normal; text-align: center; }
  .ww-toestand__knoppen .knop svg { display: inline-block; vertical-align: -3px; margin-right: 8px; }
  .ww-sorteer { margin-left: 0; width: 100%; }
  .ww-sorteer select { flex: 1; }
  .ww-act__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ww-cijfer b { font-size: 32px; }
  .ww-cijfer span { font-size: 10.5px; letter-spacing: .06em; }
  .ww-werven__kop { display: none; }
  .ww-werf { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 4px; }
  .ww-werf > .ww-werf__naam { grid-column: 1 / -1; }
  .ww-werf > .ww-werf__meldingen { grid-column: 1 / -1; }
  .ww-werf > .ww-werf__status { grid-row: 1; grid-column: 2; align-self: start; }
  .ww-werf > .ww-werf__naam { grid-column: 1; grid-row: 1; }
  .ww-werf__meldingen:empty { display: none; }
  .ww-zoek { max-width: none; flex-basis: 100%; }
  .ww-balk__rechts { margin-left: 0; width: 100%; }
  .ww-balk__rechts .knop { flex: 1; }
  .ww-seg--rol { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .ww-seg--rol::-webkit-scrollbar { display: none; }
  .ww-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ww-foto__onder { font-size: 12px; }
  .ww-licht__vak { padding: 0; }
  .ww-licht__nav { top: auto; bottom: 8px; transform: none; width: 44px; height: 44px; }
  .ww-form-rij { grid-template-columns: minmax(0, 1fr); }
  .ww-tijdlijn li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* Dagrapport: datum en titel op de eerste rij, de gegevens over de volle breedte eronder; PDF als pictogram (44 px). */
  .ww-dagrapport__kop { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; }
  .ww-dagrapport__knop { grid-column: 1; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: center; }
  .ww-dagrapport__tekst { display: contents; }
  .ww-dagrapport__tekst > b { grid-column: 2; }
  .ww-dagrapport__tekst > small, .ww-dagrapport__labels { grid-column: 1 / -1; margin-top: 0; }
  .ww-dagrapport__rechts { align-self: start; }
  .ww-pdf { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .ww-pdf span:not(.sr-only) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ww-datum { width: 48px; height: 48px; }
  .ww-datum b { font-size: 19px; }
  .ww-dagrapport__inhoud { padding: 4px 14px 16px; }
  .ww-kop-acties { justify-content: flex-start; }
  .ww-kop-status { flex-basis: 100%; }
  .kop-pagina__actie .ww-kop-acties .knop { width: auto; flex: 1 1 auto; }
  /* Vernieuwen enkel als pictogram (het label blijft voor schermlezers), Openen in SharePoint vult de rest. */
  .kop-pagina__actie .ww-kop-acties [data-ww-vernieuw] { flex: none; width: 46px; padding: 0; }
  .ww-kop-acties [data-ww-vernieuw] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ww-tabs, .ww-seg--rol { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 28px; }
  .ww-kaartkop .knop { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .ww-live__stip { animation: ww-live 2.4s ease-out infinite; }
  @keyframes ww-live { 0% { box-shadow: 0 0 0 0 rgba(50, 213, 131, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(50, 213, 131, 0); } }
  .ww-live--fout .ww-live__stip { animation: none; }
}

/* =====================================================================================================================
   Rapport om af te drukken (rapport.js): zelfde opmaak als de PDF's uit de app (src/lib/melding-export.ts). Op het
   scherm onzichtbaar; tijdens het afdrukken (html.rp-afdrukken) is het het enige wat op papier komt. A4 zonder marge,
   pagina van 595 × 841 px vergroot met 4/3 (96 dpi). ================================================================ */
#afdruk { display: none; }
@page rapport { size: A4; margin: 0; }
@media print {
  html.rp-afdrukken, html.rp-afdrukken body { background: #FFFFFF !important; }
  html.rp-afdrukken body > *:not(#afdruk) { display: none !important; }
  html.rp-afdrukken #afdruk { display: block !important; }
  html.rp-afdrukken .rp-doc { zoom: 1.3333; }
}
#afdruk, #afdruk * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#afdruk .rp-doc { font-family: -apple-system, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; color: #121212; font-size: 12px; line-height: 1.4; font-weight: 400; background: #FFFFFF; -webkit-text-size-adjust: none; text-size-adjust: none; }
#afdruk .rp-page { page: rapport; position: relative; width: 595px; height: 841px; padding: 36px 40px 62px; overflow: hidden; display: flex; flex-direction: column; break-after: page; page-break-after: always; background: #FFFFFF; }
#afdruk .rp-page:last-child { break-after: auto; page-break-after: auto; }
#afdruk .rp-page > * { flex: none; }
#afdruk b { font-weight: 700; }
#afdruk img { display: block; max-width: none; }
#afdruk svg { flex: none; }
#afdruk .rp-pin { width: 11px; height: 14px; margin-top: 3px; }
#afdruk .rp-camera { width: 13px; height: 11px; }
#afdruk .rp-bar { height: 8px; background: repeating-linear-gradient(-45deg, #FFC20E 0 14px, #141414 14px 28px); margin-bottom: 18px; }
#afdruk .rp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; line-height: 17px; height: 17px; }
#afdruk .rp-company { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; }
#afdruk .rp-muted { color: #5E5E5E; }
#afdruk h1 { font-family: inherit; font-stretch: normal; letter-spacing: 0; font-size: 21px; line-height: 26px; margin: 4px 0 0; font-weight: 800; overflow-wrap: anywhere; color: #121212; }
#afdruk .rp-todo { margin-top: 14px; background: #F2F1EE; border-left: 4px solid #FFC20E; padding: 8px 12px 9px; }
#afdruk .rp-lbl { font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5E5E5E; }
#afdruk .rp-txt { margin-top: 2px; font-size: 14px; line-height: 19px; font-weight: 700; overflow-wrap: anywhere; }
#afdruk .rp-where { margin-top: 14px; font-size: 14px; line-height: 20px; font-weight: 700; display: flex; gap: 7px; align-items: flex-start; }
#afdruk .rp-where span { min-width: 0; overflow-wrap: anywhere; }
#afdruk .rp-sub { margin-top: 4px; line-height: 17px; overflow-wrap: anywhere; }
#afdruk .rp-where + .rp-sub, #afdruk .rp-where + .rp-sub + .rp-sub { padding-left: 18px; }
#afdruk .rp-map { color: #5E5E5E; }
#afdruk .rp-badges { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; height: 22px; overflow: hidden; }
#afdruk .rp-badge { font-weight: 700; font-size: 11px; line-height: 14px; padding: 3px 9px; border-radius: 6px; border: 1px solid #121212; white-space: nowrap; }
#afdruk .rp-badge.rp-stop { background: #C4320A; border-color: #C4320A; color: #FFFFFF; }
#afdruk .rp-badge.rp-ok { background: #0F7A56; border-color: #0F7A56; color: #FFFFFF; }
#afdruk .rp-kv { display: flex; }
#afdruk .rp-kv.rp-first { margin-top: 16px; }
#afdruk .rp-k { width: 30%; flex: none; padding: 8px; background: #F2F1EE; font-weight: 700; }
#afdruk .rp-v { flex: 1; padding: 8px; border-bottom: 1px solid #E4E2DC; min-width: 0; overflow-wrap: anywhere; }
#afdruk .rp-v .rp-note { color: #5E5E5E; }
#afdruk a { color: #121212; text-decoration: underline; }
#afdruk h2 { font-family: inherit; font-stretch: normal; letter-spacing: 0; font-size: 13px; line-height: 18px; margin: 0; padding: 18px 0 6px; display: flex; align-items: center; gap: 8px; font-weight: 700; color: #121212; }
#afdruk h2::before { content: ""; width: 14px; height: 4px; border-radius: 2px; background: #FFC20E; }
#afdruk h2 .rp-muted { font-weight: 400; }
#afdruk .rp-text { line-height: 17px; overflow-wrap: anywhere; }
#afdruk .rp-ev { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px solid #F2F1EE; line-height: 17px; }
#afdruk .rp-when { width: 108px; flex: none; color: #5E5E5E; font-variant-numeric: tabular-nums; white-space: nowrap; }
#afdruk .rp-what { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#afdruk .rp-ev .rp-note { color: #5E5E5E; font-size: 11px; line-height: 15px; margin-top: 1px; }
#afdruk .rp-ev.rp-stop .rp-what b { color: #C4320A; }
#afdruk .rp-run { display: flex; justify-content: space-between; gap: 16px; font-size: 10px; line-height: 14px; color: #5E5E5E; padding-bottom: 8px; border-bottom: 1px solid #E4E2DC; margin-bottom: 6px; }
#afdruk .rp-run span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#afdruk .rp-run span:first-child { flex: none; max-width: 60%; }
#afdruk .rp-run span:last-child { flex: 1; min-width: 0; text-align: right; }
#afdruk .rp-run b { color: #121212; }
#afdruk .rp-photo { margin-top: 12px; align-self: center; max-width: 100%; }
#afdruk .rp-photo img { display: block; border-radius: 4px; object-fit: contain; }
#afdruk .rp-cap { margin-top: 6px; height: 15px; font-size: 10.5px; line-height: 15px; color: #5E5E5E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#afdruk .rp-cap b { color: #121212; }
#afdruk .rp-voet { position: absolute; left: 40px; right: 40px; bottom: 20px; height: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 9.5px; line-height: 13px; color: #5E5E5E; border-top: 1px solid #E4E2DC; }
#afdruk .rp-by { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#afdruk .rp-voet img { height: 16px; width: auto; }
#afdruk .rp-thead, #afdruk .rp-row { display: flex; }
#afdruk .rp-thead { font-size: 10px; line-height: 14px; font-weight: 700; color: #5E5E5E; border-bottom: 1.5px solid #121212; padding: 6px 0 5px; margin-top: 14px; }
#afdruk .rp-row { border-bottom: 1px solid #E4E2DC; padding: 5px 0; font-size: 10.5px; line-height: 13.5px; overflow: hidden; }
#afdruk .rp-ghead { margin-top: 10px; background: #F2F1EE; font-size: 11px; line-height: 15px; padding: 6px 8px; overflow: hidden; overflow-wrap: anywhere; }
#afdruk .rp-ghead b { font-weight: 700; }
#afdruk .rp-c { padding: 0 6px; min-width: 0; overflow: hidden; flex: none; }
#afdruk .rp-c:first-child { padding-left: 0; }
#afdruk .rp-c:last-child { padding-right: 0; }
#afdruk .rp-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#afdruk .rp-one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#afdruk .rp-num { text-align: right; font-variant-numeric: tabular-nums; }
#afdruk .rp-600 { font-weight: 600; }
#afdruk .rp-st-stop { color: #C4320A; font-weight: 700; }
#afdruk .rp-st-ok { color: #0F7A56; font-weight: 700; }