/* Overgenomen uit de bestaande stylesheet en de themabestanden van de app. */
:root {
  --kleur1: #1B3BF2;
  --kleur1-hover: #3D58F2;
  --kleur2: #8193f8;
  --gray: #EEF1FF;
  --gray-input: #dbdff8;
  --white: #ffffff;
  --black: #0d0d0d;
  --grey-text: #6B7185;
  --font-text: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-title: "Segoe UI Semibold", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* statuskleuren uit de badge-helper */
  --st-visit: #FFA500;
  --st-open: #1E90FF;
  --st-review: #9a1eff;
  --st-approved: #32CD32;
  --st-denied: #DC143C;
  --st-signed: #228B22;
  --st-done: #808080;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--gray); font-family: var(--font-text); font-weight: 300;
  color: var(--black); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------- demobalk ---------------- */
.demobar {
  background: var(--black); color: #fff; font-size: 12px; padding: 8px 20px;
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.demobar b { font-weight: 600; }
.demobar .right { display: flex; gap: 8px; align-items: center; }

/* beheerscherm */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--gray);
        border-radius: 25px; padding: 4px 6px 4px 12px; font-size: 13px; }
.chipx, .iconbtn {
  border: 0; background: var(--gray-input); color: #4A5170; border-radius: 50%;
  width: 18px; height: 18px; line-height: 1; font-size: 11px; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.chipx:hover, .iconbtn:hover { background: #FBE0E0; color: #8E1D1D; }
.iconbtn { width: 22px; height: 22px; font-size: 12px; }
.inlineform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inlineform input, .inlineform select {
  padding: 8px 12px; font: inherit; font-size: 14px; border: 1px solid var(--gray-input);
  border-radius: 12px; background: var(--white); color: var(--black);
}
.inlineform input { flex: 1; min-width: 150px; }
.inlineform input:focus, .inlineform select:focus { outline: 2px solid var(--kleur1);
                                                    outline-offset: -1px; }
.pickrow { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 5px 0;
           cursor: pointer; }
.pickrow input { accent-color: var(--kleur1); width: auto; margin: 0; }
.picklist { max-height: 260px; overflow: auto; border: 1px solid var(--gray-input);
            border-radius: 12px; padding: 4px 12px; margin-bottom: 14px; }
.picklist:empty { display: none; }
/* Meerdere sjablonen onder elkaar: buiten en binnen horen in dezelfde
   plaatsbeschrijving, dus ze staan in een lijst en niet in een keuzelijst. */
.pickgroep + .pickgroep { border-top: 1px solid var(--gray); margin-top: 6px; }
.picktop { display: flex; align-items: center; gap: 10px; font-size: 12px;
           color: var(--grey-text); padding: 8px 0 4px; }
.linkbtn { background: none; border: 0; color: var(--kleur1); font: inherit; font-size: 12px;
           cursor: pointer; padding: 0; }
.linkbtn:hover { text-decoration: underline; }
.modal-box.narrow { width: min(400px, 100%); }
.demobar button {
  background: transparent; color: #fff; border: 1px solid #45454f; border-radius: 25px;
  font: inherit; font-size: 11px; padding: 5px 14px; cursor: pointer;
}
.demobar button[aria-pressed="true"] { background: var(--kleur1); border-color: var(--kleur1); }
.demobar button:focus-visible { outline: 2px solid var(--kleur2); outline-offset: 2px; }

/* ---------------- schil ---------------- */
.shell { display: flex; min-height: calc(100vh - 33px); }

.sidebar {
  width: 280px; min-width: 280px; background: var(--gray);
  display: flex; flex-direction: column;
}
.sidebar.collapsed { width: 74px; min-width: 74px; }
.sidebar.collapsed .wordmark,
.sidebar.collapsed .sidebar-link span,
.sidebar.collapsed .grouplabel span { display: none; }
.sidebar.collapsed .grouplabel { height: 1px; background: #DDE2F5; margin: 14px 16px; padding: 0; }
.sidebar.collapsed .sidebar-top { flex-direction: column; align-items: flex-start; gap: 6px; }

.sidebar-top { display: flex; align-items: center; padding: 18px 8px 10px; gap: 4px; }
.toggle-btn {
  background: none; border: 0; padding: 12px; cursor: pointer; color: var(--black);
  display: grid; place-items: center;
}
.toggle-btn svg { fill: currentColor; }
.toggle-btn:focus-visible { outline: 2px solid var(--kleur1); outline-offset: -2px; }
.brand { display: flex; align-items: center; gap: 9px; min-height: 50px; }
.emblem { width: 34px; height: 34px; display: block; }
.wordmark {
  font-family: var(--font-title); font-weight: 700; font-size: 22px; letter-spacing: .06em;
  color: var(--kleur1);
}

.nav { display: flex; flex-direction: column; flex: 1; padding-top: 6px; }
.sidebar-link {
  padding: 10px; display: flex; align-items: center; gap: 4px;
  border-left: 8px solid transparent; font-size: 15px; color: var(--black); cursor: pointer;
}
.sidebar-link:hover { background: rgba(255, 255, 255, .5); }
.sidebar-link.active { border-left: 8px solid var(--kleur1); }
.sidebar-link .ic { min-width: 30px; display: grid; place-items: center; }
.sidebar-link .ic svg { width: 16px; height: 16px; }
.sidebar-link .ic svg rect { fill: currentColor; }
.sidebar-link:focus-visible { outline: 2px solid var(--kleur1); outline-offset: -2px; }
.grouplabel {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-text);
  font-weight: 600; padding: 18px 18px 6px;
}
/* Een plaatsbeschrijving hangt onder haar pand of haar werf. Het haakje maakt
   dat zichtbaar, zodat de twee gelijknamige items niet door elkaar lopen. */
.sidebar-link.sub { padding-left: 24px; font-size: 14px; }
.sidebar-link.sub .tak { width: 14px; height: 14px; flex: none; margin-right: 2px;
                         border-left: 1.5px solid #B7BCCB; border-bottom: 1.5px solid #B7BCCB;
                         border-bottom-left-radius: 4px; margin-bottom: 5px; }
.sidebar.collapsed .sidebar-link.sub { padding-left: 10px; }
.sidebar.collapsed .sidebar-link.sub .tak { display: none; }
.navspace { flex: 1; min-height: 10px; }
.sidebar-bottom { padding-bottom: 14px; }

main { flex: 1; background: var(--white); min-width: 0; }
.inner { padding: 26px 32px 60px; }

/* ---------------- kop ---------------- */
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 16px;
            flex-wrap: wrap; margin-bottom: 6px; }
h1.page { font-family: var(--font-title); font-weight: 700; font-size: 32px; margin: 0;
          letter-spacing: -.01em; }
.results { color: var(--kleur1); font-size: 14px; margin-bottom: 22px; }
.crumbs { font-size: 13px; color: var(--grey-text); margin-bottom: 10px; }
.crumbs button { background: none; border: 0; font: inherit; color: var(--kleur1);
                 cursor: pointer; padding: 0; }
.crumbs button:hover { text-decoration: underline; }
.crumbs .sep2::before { content: "  /  "; color: #B7BCCB; }
.crumbs b { font-weight: 600; color: var(--black); }

.btn {
  padding: 10px 20px; border-radius: 25px; background: var(--kleur1); color: var(--white);
  border: 0; font-family: var(--font-title); font-weight: 700; font-size: 12px;
  text-transform: uppercase; cursor: pointer; transition: .3s ease all; letter-spacing: .02em;
}
.btn:hover { background: var(--kleur1-hover); }
.btn.ghost { background: var(--white); color: var(--kleur1); border: 1px solid var(--kleur1); }
.btn.small { padding: 7px 15px; font-size: 11px; }
.btn:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
/* Verwijderen valt op zonder de eerste plaats op te eisen. */
.btn.gevaar { background: var(--white); color: #8E1D1D; border: 1px solid #E8B4B4; }
.btn.gevaar:hover { background: #FBE0E0; border-color: #8E1D1D; }
.wisknop { width: 100%; margin-top: 10px; border: 1px solid #E8B4B4; background: #fff;
           color: #8E1D1D; border-radius: 12px; padding: 14px; font: inherit; font-size: 15px;
           font-weight: 600; cursor: pointer; }
.wisknop:hover { background: #FBE0E0; }

.filterbar {
  background: var(--white); border: 1px solid var(--gray); border-radius: 15px;
  padding: 12px 18px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; font-size: 14px;
}
.pagechip { background: var(--kleur1); color: #fff; border-radius: 8px; padding: 3px 11px;
            font-size: 13px; font-weight: 600; }

/* ---------------- kaarten ---------------- */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pand {
  background: var(--white); border-radius: 15px; overflow: hidden; height: 100%;
  display: block; color: var(--black); border: 1px solid var(--gray);
  transition: .3s ease all; cursor: pointer;
}
.pand:hover { background: var(--gray); }
.pand .pand-text { padding: 15px; }
.pand .pand-text-title { font-weight: 700; font-size: 16px; font-family: var(--font-title); }
.pand .pand-overview-small { font-size: 14px; color: var(--kleur1); margin-top: 5px; }

/* ---------------- kanban ---------------- */
.board { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 22px 26px; }
.pcr-column { display: flex; flex-direction: column; min-width: 0; }
.pcr-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pcr-head h4 { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: 17px;
               display: flex; align-items: center; gap: 9px; }
.color-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.bg-color-length { background: var(--gray); border-radius: 25px; padding: 2px 11px;
                   font-size: 13px; color: var(--grey-text); }
.pcr-list { display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow: auto;
            padding-right: 4px; }
.pcr-list::-webkit-scrollbar { width: 8px; }
.pcr-list::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 8px; }
.pcr-list::-webkit-scrollbar-thumb { background: #b8bcc7; border-radius: 8px;
                                     border: 2px solid #f3f4f6; }
.pcr-empty { color: var(--grey-text); text-align: center; padding: 14px; font-size: 13px;
             border: 1px solid var(--gray); border-radius: 15px; }
.plaatsbeschrijving {
  background: var(--white); border-radius: 15px; border: 1px solid var(--gray);
  padding: 15px; display: block; cursor: pointer; transition: .3s ease all;
}
.plaatsbeschrijving:hover { background: var(--gray); }
.pcr-top { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.title-bold { font-weight: 700; font-size: 16px; font-family: var(--font-title); }
.pcr-hr { border: 0; border-top: 1px solid var(--gray); margin: 10px 0; }
.pcr-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pcr-line strong { font-weight: 700; text-align: right; }
.badge {
  border-radius: 25px; padding: 3px 10px; font-size: 11px; font-weight: 700; color: #fff;
  white-space: nowrap; font-family: var(--font-title);
}

/* ---------------- detail ---------------- */
.grid2 { display: grid; grid-template-columns: 1.35fr .9fr; gap: 22px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.background-white { background: var(--white); border-radius: 15px; border: 1px solid var(--gray);
                    padding: 18px 20px; }
.background-white h3 { font-family: var(--font-title); font-weight: 700; font-size: 17px;
                       margin: 0 0 14px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 14px; margin: 0; }
.kv dt { color: var(--grey-text); }
.kv dd { margin: 0; }
.cardtext { font-size: 14px; line-height: 1.65; color: #3F4457; }
.lbl { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--grey-text);
       font-weight: 600; margin-bottom: 6px; }
.tag { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 25px;
       background: var(--gray-input); color: var(--kleur1); font-weight: 700; }

.subject { display: flex; gap: 14px; align-items: center; padding: 14px 0;
           border-top: 1px solid var(--gray); }
.subject:first-of-type { border-top: 0; }
.stype { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid;
         place-items: center; font-size: 10px; font-weight: 700; }
.st-pand { background: var(--gray-input); color: var(--kleur1); }
.st-od { background: #E4F0E6; color: #1B7A34; }
.st-voorstel { background: #EEF1FA; color: #6B7185; border: 1px dashed #B7BCCB; }
.subject .who { flex: 1; min-width: 0; }
.subject .who b { display: block; font-weight: 700; font-size: 15px; }
.subject .who span { font-size: 13px; color: var(--grey-text); }

.zonegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.zone { background: var(--white); border: 1px solid var(--gray); border-radius: 15px;
        padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.zone .zt { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.zone .zn { font-weight: 700; font-size: 15px; font-family: var(--font-title); }
.zone .zm { font-size: 13px; color: var(--grey-text); }
.thumbs { display: flex; gap: 5px; }
.thumbs img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; }
.thumbs .more { width: 42px; height: 42px; border-radius: 8px; background: var(--gray-input);
                display: grid; place-items: center; font-size: 12px; color: var(--kleur1);
                font-weight: 700; }

.photo-row { display: grid; grid-template-columns: 230px 1fr; gap: 22px; padding: 22px 0;
             border-top: 1px solid var(--gray); }
.photo-row img { width: 100%; border-radius: 15px; display: block; }
.photo-meta { font-size: 12px; color: var(--grey-text); margin-top: 8px; line-height: 1.55; }
.aitext { font-size: 14px; line-height: 1.65; color: #3F4457; background: var(--gray);
          border-radius: 15px; padding: 13px 15px; }
.corrected { font-size: 14px; line-height: 1.65; border: 1px solid var(--gray-input);
             border-radius: 15px; padding: 13px 15px; background: var(--white); }
.corrected.edited { border-color: var(--kleur1); }
.summary { background: var(--gray); border-radius: 15px; padding: 18px 20px; }
.summary p { font-size: 15px; line-height: 1.7; }
.failbox { background: #FBE0E0; border-radius: 15px; padding: 16px 18px; font-size: 14px;
           color: #8E1D1D; line-height: 1.6; }
.warnbox { background: #FFF1D6; border-radius: 15px; padding: 16px 18px; font-size: 14px;
           color: #7A4E00; line-height: 1.6; }

/* versietabel in het blok Rapporten */
.vtable { font-size: 14px; }
.vrow { display: grid; grid-template-columns: 1.5fr repeat(var(--parties, 2), .8fr) 1.2fr .5fr;
        align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--gray); }
.vrow.vhead { border-top: 0; color: var(--grey-text); font-size: 13px; padding-top: 0; }
.vrow .mid { text-align: center; }
.party { display: inline-grid; place-items: center; width: 22px; height: 22px; }
.party svg { width: 15px; height: 15px; }
.party.good { color: #228B22; }
.party.bad { color: #DC143C; }
.party.wait { color: var(--grey-text); }
.party.none { font-size: 11px; color: #B7BCCB; width: auto; }
.pdf { display: inline-grid; place-items: center; color: var(--kleur1); cursor: pointer; }
.pdf svg { width: 16px; height: 16px; }
.back-to-prev { font-size: 14px; font-weight: 300; color: var(--kleur1); background: none;
                border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center;
                gap: 7px; margin-bottom: 10px; }
.back-to-prev:hover { color: var(--kleur1-hover); text-decoration: underline; }
.back-to-prev svg { width: 15px; height: 15px; }

/* dashboard */
.creditscard {
  background: var(--kleur1); border-radius: 15px; padding: 12px 14px;
  display: flex; align-items: center; gap: 14px;
}
.creditcount { color: #fff; font-family: var(--font-title); font-weight: 700; font-size: 15px; }
.btn.white { background: var(--white); color: var(--kleur1); }
.btn.white:hover { background: var(--gray); }
hr.rule { border: 0; border-top: 1px solid var(--gray); margin: 26px 0; }
.sectionhead { display: flex; align-items: center; justify-content: space-between;
               gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.sectionhead h2 { font-family: var(--font-title); font-weight: 700; font-size: 24px; margin: 0; }
.seeall { background: none; border: 0; font: inherit; font-size: 14px; color: var(--kleur1);
          cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 0; }
.seeall:hover { color: var(--kleur1-hover); text-decoration: underline; }
.seeall svg { width: 16px; height: 16px; }
.listrow { display: flex; align-items: center; gap: 14px; justify-content: space-between;
           padding: 13px 0; border-top: 1px solid var(--gray); }
.listrow:first-of-type { border-top: 0; }
.listrow b { font-weight: 700; font-size: 15px; display: block; }
.rowsub { font-size: 13px; color: var(--grey-text); }
.subblock { border-top: 1px solid var(--gray); padding-top: 12px; margin-top: 12px; }
.subhead { display: flex; justify-content: space-between; align-items: center; gap: 10px;
           margin-bottom: 10px; font-size: 15px; font-weight: 700; }
.grouphead { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 12px; }
.grouphead b { font-family: var(--font-title); font-size: 17px; font-weight: 700; }
.grouphead span { font-size: 13px; color: var(--grey-text); }
.switcher { display: flex; gap: 6px; flex-wrap: wrap; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.phase { border-radius: 15px; padding: 16px 18px; border: 1px solid var(--gray); }
.phase.before { background: var(--gray); }
.phase.after { background: var(--white); border-color: var(--kleur1); }
.phase .ph { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
             margin-bottom: 8px; }
.phase.before .ph { color: var(--grey-text); }
.phase.after .ph { color: var(--kleur1); }
.phase p { font-size: 14px; line-height: 1.65; color: #3F4457; }
.keyline { font-size: 13px; color: var(--grey-text); margin-bottom: 8px; }

/* ---------------- modaal ---------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(13, 13, 13, .45); display: grid;
  place-items: center; padding: 20px; z-index: 1000;
}
/* De toegangscode komt boven een formulier dat eronder open blijft staan. */
#modal-unlock { z-index: 1100; }
/* Het hidden-attribuut moet winnen van de display hierboven. */
.modal-backdrop[hidden] { display: none; }
.modal-box {
  background: var(--white); border-radius: 15px; padding: 26px 28px; width: min(560px, 100%);
  max-height: 90vh; overflow: auto;
}
.modal-box h2 { font-family: var(--font-title); font-weight: 700; font-size: 24px; margin: 0 0 18px; }
.modal-box label { display: block; font-size: 13px; color: var(--grey-text); margin-bottom: 14px; }
.modal-box input, .modal-box select {
  display: block; width: 100%; margin-top: 5px; padding: 10px 13px; font: inherit; font-size: 14px;
  border: 1px solid var(--gray-input); border-radius: 12px; background: var(--white);
  color: var(--black);
}
.modal-box input:focus, .modal-box select:focus { outline: 2px solid var(--kleur1);
                                                  outline-offset: -1px; }
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Nummer en bus zijn korte velden, die hoeven de halve breedte niet. */
.formrow.smal { grid-template-columns: 140px 140px; }
/* Elke partij in een eigen blok, want het zijn er nu vijf velden per stuk. */
.partij { border: 1px solid var(--gray-input); border-radius: 12px; padding: 14px 14px 2px;
          margin-bottom: 14px; }
.partijkop { font-family: var(--font-title); font-weight: 700; font-size: 14px;
             margin-bottom: 10px; }
.partijkaart { border: 1px solid var(--gray); border-radius: 12px; padding: 12px 14px;
               margin-bottom: 10px; }
.partijrol { font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
             color: var(--grey-text); font-weight: 600; margin-bottom: 4px; }
.partijkaart b { font-family: var(--font-title); font-weight: 700; font-size: 15px; }
.partijregel { font-size: 13px; color: var(--grey-text); margin-top: 3px; }
.kv-sub { font-size: 12px; color: var(--grey-text); font-weight: 400; }
.formrow.smal[hidden] { display: none; }
.modalintro { font-size: 13px; color: var(--grey-text); line-height: 1.6; margin: -8px 0 18px; }
.modal-box label[hidden] { display: none; }
.checkline { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--black); }
.checkline input { width: auto; margin: 0; accent-color: var(--kleur1); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.formhint { font-size: 13px; color: #8E1D1D; margin-top: 10px; min-height: 18px; }

/* ---------------- app-weergave ---------------- */
/* De balk volgt die van de app: witte achtergrond, pijl terug links, titel
   ernaast, en rechts de initialen van wie aangemeld is. */
.appbar { display: none; background: var(--white); color: var(--black);
          border-bottom: 1px solid var(--gray); padding: 12px 14px;
          align-items: center; gap: 10px; }
.appbar .apptitle { flex: 1; min-width: 0; text-align: center; }
.appbar .t { font-family: var(--font-title); font-weight: 700; font-size: 17px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .s { font-size: 12px; color: var(--grey-text); margin-top: 1px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .back { background: none; border: 0; color: var(--black); padding: 6px; flex: none;
                display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.appbar .back:hover { background: var(--gray); }
/* Verborgen maar wel plaats houden, anders springt de titel uit het midden. */
.appbar .back[hidden] { display: grid; visibility: hidden; }
.appbar .avatar { width: 32px; height: 32px; border-radius: 50%; border: 0; flex: none;
                  background: var(--gray); color: var(--kleur1); font: inherit;
                  font-size: 12px; font-weight: 600; cursor: pointer; }
.appbar .avatar:hover { background: var(--gray-input); }

/* Het toestel heeft een vaste maat, zoals een telefoon. Alles wat niet past
   schuift binnen het kader, niet erbuiten. */
body.mobile { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
body.mobile .shell { flex: 1; min-height: 0; justify-content: center;
                     padding: 26px 16px 34px; background: #E7EAF7; }
body.mobile .sidebar { display: none; }
body.mobile main {
  flex: none; width: 390px; max-width: 100%;
  height: 100%; max-height: 844px; min-height: 0;
  display: flex; flex-direction: column;
  border: 8px solid #10142b; border-radius: 38px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 24, 64, .3); align-self: flex-start;
}
body.mobile .appbar { display: flex; flex: none; }
/* Witte balk, daaronder een lichte achtergrond met witte kaarten, zoals de app. */
body.mobile .inner { padding: 16px; flex: 1; min-height: 0; overflow-y: auto;
                     background: #F2F4FA; font-size: 15px;
                     overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.mobile .appbar .t { font-size: 21px; font-weight: 600; }
body.mobile .appbar .s { font-size: 13px; }
body.mobile .appbar .back svg { width: 21px; height: 18px; }
body.mobile .appbar .avatar { width: 38px; height: 38px; font-size: 13px;
                              background: #E4E8FB; }
body.mobile .board, body.mobile .grid2, body.mobile .pair,
body.mobile .formrow, body.mobile .photo-row { grid-template-columns: 1fr; }
/* Een venster blijft binnen de maat van het toestel. */
body.mobile .modal-box { width: min(358px, 100%); max-height: 70vh; padding: 20px; }
body.mobile h1.page { font-size: 22px; }
body.mobile .pcr-list { max-height: none; }

@media (max-width: 1280px) { .board { grid-template-columns: repeat(2, minmax(240px, 1fr)); } }
@media (max-width: 1000px) {
  .sidebar { display: none; }
  .grid2, .pair, .board { grid-template-columns: 1fr; }
  .inner { padding: 20px 16px 50px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* uploaden en analyse */
.uploadbox { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
             background: var(--gray); border-radius: 15px; padding: 14px 18px; margin-bottom: 20px; }
.uploadhint { font-size: 13px; color: var(--grey-text); }
.spinner { display: inline-block; width: 13px; height: 13px; margin-left: 8px;
           border: 2px solid rgba(122, 78, 0, .25); border-top-color: #7A4E00;
           border-radius: 50%; animation: spin 900ms linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ---------------- appschermen ---------------- */
.obar { display: flex; align-items: center; gap: 9px; border-radius: 12px; padding: 9px 12px;
        font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.obar.on { background: #DEFBE6; color: #006400; }
.obar.off { background: #FFF1D6; color: #7A4E00; }
.obar .odot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.obar .linkbtn { margin-left: auto; color: inherit; font-weight: 600; }
.mnote { background: var(--gray); border-radius: 12px; padding: 12px 14px; font-size: 13px;
         color: var(--grey-text); line-height: 1.55; margin-bottom: 10px; }
.mwarn { background: #FFF1D6; color: #7A4E00; border-radius: 12px; padding: 12px 14px;
         font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.mfail { background: #FBE0E0; color: #8E1D1D; border-radius: 12px; padding: 12px 14px;
         font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.msummary { background: var(--gray); border-radius: 14px; padding: 13px 14px; margin-bottom: 10px; }
.msummary p { font-size: 13px; line-height: 1.6; }
.mbtn { background: var(--kleur1); color: #fff; border: 0; border-radius: 25px; padding: 13px;
        font-family: var(--font-title); font-weight: 700; font-size: 12px; text-transform: uppercase;
        width: 100%; cursor: pointer; }
.mbtn.ghost { background: #fff; color: var(--kleur1); border: 1px solid var(--kleur1); }
.mbtn:disabled { opacity: .45; cursor: not-allowed; }
.mhint { font-size: 12px; color: var(--grey-text); margin-top: 9px; line-height: 1.5; }

/* De onderdelen die de app-opbouw volgen: tabbladen boven een lijst, kaarten met
   een pin en een datum, een takenlijst, zones als tegels en foto's in een raster. */
/* De tabbladen staan gecentreerd boven de lijst, met de streep over de volle breedte. */
.atabs { display: flex; justify-content: center; border-bottom: 1px solid #DFE3F0;
         margin: 0 -4px 16px; }
.atab { width: 130px; border: 0; background: none; font: inherit; font-size: 16px;
        color: var(--grey-text); padding: 10px 0 12px; cursor: pointer;
        border-bottom: 3px solid transparent; margin-bottom: -1px; }
.atab.on { color: var(--kleur1); font-weight: 600; border-bottom-color: var(--kleur1); }
.acount { font-size: 15px; color: #3F4457; margin-bottom: 12px; }
.acard { background: #fff; border-radius: 16px; padding: 18px 20px; margin-bottom: 14px;
         cursor: pointer; }
.acard:hover { box-shadow: 0 3px 12px rgba(16, 24, 64, .1); }
.acard b { font-family: var(--font-title); font-weight: 700; font-size: 19px;
           display: block; margin-bottom: 12px; }
.acard .atop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.acard .stype { width: auto; height: auto; padding: 3px 9px; border-radius: 25px; font-size: 10px; }
.arow { display: flex; align-items: center; gap: 11px; font-size: 15px; color: #4A5170;
        margin-top: 9px; }
.arow svg { width: 17px; height: 17px; flex: none; color: var(--kleur1); }
.aphase { font-size: 14px; color: var(--grey-text); margin-bottom: 14px; }

.task { display: flex; align-items: center; gap: 15px; background: #fff; border-radius: 16px;
        padding: 16px 18px; margin-bottom: 14px; }
.task[onclick] { cursor: pointer; }
.task[onclick]:hover { box-shadow: 0 3px 12px rgba(16, 24, 64, .1); }
.taskico { width: 46px; height: 46px; border-radius: 50%; background: var(--kleur1); color: #fff;
           display: grid; place-items: center; flex: none; }
.taskico svg { width: 21px; height: 21px; }
.tasktxt { flex: 1; min-width: 0; }
.tasktxt b { display: block; font-family: var(--font-title); font-weight: 700; font-size: 17px; }
.tasktxt span { display: block; font-size: 14px; color: var(--grey-text); margin-top: 3px;
                line-height: 1.35; }
.pill { flex: none; border: 1px solid #DFE3F0; border-radius: 25px; padding: 7px 14px;
        font-size: 14px; color: #4A5170; white-space: nowrap; }
.pill.ok { background: #DEFBE6; border-color: #BDEECB; color: #0F6D2B; font-weight: 600; }

.roomgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.roomcard { background: #fff; border: 0; border-radius: 16px; padding: 12px; font: inherit;
            text-align: left; cursor: pointer;
            display: flex; flex-direction: column; gap: 10px; }
.roomcard:hover { box-shadow: 0 3px 12px rgba(16, 24, 64, .1); }
.roomthumb { position: relative; display: block; border-radius: 12px; overflow: hidden;
             aspect-ratio: 4 / 3; background: #EEF1FA; }
.roomthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.roomleeg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--kleur2); }
.roomleeg svg { width: 28px; height: 28px; }
.roomnaam { font-family: var(--font-title); font-weight: 700; font-size: 16px; }
.roomcard.leeg, .ptile.leeg { background: #EDF0FB; border: 2px dashed #C9D0EC;
                              align-items: center; justify-content: center; min-height: 112px; }
.roomcard.leeg:hover, .ptile.leeg:hover { border-color: var(--kleur1); }
.plus { font-size: 30px; color: #8A93B5; line-height: 1; font-weight: 300; }
.addcard { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
           background: #EDF0FB; border: 2px dashed #C9D0EC; border-radius: 16px; padding: 16px;
           font: inherit; font-size: 15px; font-weight: 600; color: var(--kleur1);
           cursor: pointer; margin-bottom: 14px; }
.addcard:hover { border-color: var(--kleur1); }
.addcard .plus { font-size: 22px; color: var(--kleur1); }
.ahint { display: flex; align-items: center; justify-content: space-between; gap: 12px;
         font-size: 15px; color: #4A5170; margin-bottom: 14px; }
.ahead { font-family: var(--font-title); font-weight: 700; font-size: 18px; margin: 4px 0 12px; }

/* De iconenband onder de balk, zoals de stappen van een plaatsbeschrijving in de app. */
.stripe { display: flex; gap: 4px; background: #fff; border-bottom: 1px solid #DFE3F0;
          margin: -16px -16px 16px; padding: 0 8px; overflow-x: auto; }
.stripe button { flex: 1; min-width: 92px; border: 0; background: none; font: inherit;
                 font-size: 13px; color: #4A5170; padding: 10px 4px 0; cursor: pointer;
                 display: flex; flex-direction: column; align-items: center; gap: 5px; }
.stripe button svg { width: 22px; height: 22px; }
.stripe button i { display: block; height: 4px; width: 60%; border-radius: 4px 4px 0 0;
                   background: transparent; margin-top: 7px; }
.stripe button.on { color: var(--kleur1); }
.stripe button.on i { background: var(--kleur1); }

.subtabs { display: flex; justify-content: center; border-bottom: 1px solid #DFE3F0;
           margin: 0 -4px 18px; }
.subtab { width: 120px; border: 0; background: none; font: inherit; font-size: 15px;
          color: var(--grey-text); padding: 9px 0 11px; cursor: pointer;
          border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subtab.on { color: var(--kleur1); font-weight: 600; border-bottom-color: var(--kleur1); }

.pgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.ptile { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1;
         display: block; padding: 0; border: 0; background: #EEF1FA; cursor: default; }
.ptile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptile.leeg { min-height: 0; cursor: pointer; display: grid; place-items: center; }
.okdot { position: absolute; top: 6px; right: 6px; width: 21px; height: 21px;
         background: #fff; border-radius: 50%; display: grid; place-items: center; }
.okdot svg { width: 21px; height: 21px; }
.ptilex { position: absolute; bottom: 6px; right: 6px; width: 22px; height: 22px; border: 0;
          border-radius: 50%; background: rgba(13, 13, 13, .55); color: #fff; font-size: 11px;
          cursor: pointer; display: grid; place-items: center; padding: 0; }

.pblok { background: #fff; border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.pblok img { width: 100%; border-radius: 12px; display: block; margin-bottom: 12px;
             max-height: 230px; object-fit: cover; }
.pblok .lbl { color: var(--kleur1); font-weight: 600; font-size: 15px; margin-bottom: 8px;
              text-transform: none; letter-spacing: 0; }
.ptekst { border: 1px solid #DFE3F0; border-radius: 12px; padding: 13px 15px;
          font-size: 15px; line-height: 1.6; color: #2A2F42; }
.suggestie { margin-top: 12px; width: 100%; text-align: left; background: #F4F6FF;
             border: 1px solid var(--kleur2); border-radius: 12px; padding: 14px 15px;
             font: inherit; font-size: 15px; color: var(--kleur1); cursor: pointer; }
.suggestie:hover { background: #E9EDFF; }

/* De onderbalk van een zone: fotograferen, afronden, uitleg. */
.abalk { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.abalk .mbtn { border-radius: 12px; padding: 14px 10px; font-family: var(--font-text);
               font-weight: 600; font-size: 15px; text-transform: none; letter-spacing: 0; }
/* Lijst met partijen, voor de aanwezigheden en de handtekeningen. */
.lijst { background: #fff; border-radius: 16px; padding: 4px 18px; margin-bottom: 14px; }
.lijstrij { display: flex; align-items: center; justify-content: space-between; gap: 14px;
            padding: 15px 0; border-bottom: 1px solid #EEF1FA; }
.lijstrij:last-child { border-bottom: 0; }
.lijsttxt b { display: block; font-family: var(--font-title); font-weight: 700; font-size: 16px; }
.lijsttxt span { display: block; font-size: 14px; color: var(--grey-text); margin-top: 2px; }
.lijstrij input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--kleur1);
                                   margin: 0; flex: none; }
.minibtn { flex: none; border: 1px solid var(--kleur1); background: #fff; color: var(--kleur1);
           border-radius: 25px; padding: 8px 16px; font: inherit; font-size: 14px;
           font-weight: 600; cursor: pointer; }
.minibtn.uit { border-color: #DFE3F0; color: var(--grey-text); }
.minibtn:hover { background: var(--gray); }
.leegvak { background: #EDF0FB; border: 2px dashed #C9D0EC; border-radius: 16px; padding: 40px 20px;
           display: flex; flex-direction: column; align-items: center; gap: 12px;
           color: var(--grey-text); font-size: 15px; margin-bottom: 14px; }
.leegvak svg { width: 34px; height: 34px; color: #8A93B5; }
.fotokop { position: relative; }
.penbtn { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0;
          border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--kleur1);
          cursor: pointer; display: grid; place-items: center; }
.penbtn svg { width: 16px; height: 16px; }

.ibtn { flex: none; width: 44px; height: 44px; border: 1px solid #DFE3F0;
        background: #fff; border-radius: 50%; color: var(--kleur1); cursor: pointer;
        display: grid; place-items: center; }
.ibtn svg { width: 20px; height: 20px; }
body.mobile .mbtn { border-radius: 12px; font-family: var(--font-text); font-weight: 600;
                    font-size: 15px; text-transform: none; letter-spacing: 0; padding: 14px; }
body.mobile .mnote, body.mobile .mwarn, body.mobile .mfail { font-size: 14px; }
body.mobile .mnote { background: #fff; }
body.mobile .obar { font-size: 13px; background: #fff; color: #4A5170; }
body.mobile .obar.on .odot { background: #0F9D3A; }
body.mobile .obar.off { color: #7A4E00; }
body.mobile .msummary { background: #fff; border-radius: 16px; padding: 16px; }
body.mobile .msummary p { font-size: 15px; }
body.mobile .msummary .lbl { color: var(--kleur1); font-weight: 600; font-size: 15px;
                             margin-bottom: 8px; text-transform: none; letter-spacing: 0; }
body.mobile .cmtbox { margin-top: 0; }
body.mobile .cmt { background: #fff; border-radius: 16px; padding: 14px 16px; }
body.mobile .cmt.filled { background: #FBE0E0; }
body.mobile .cmtlabel { font-size: 15px; text-transform: none; letter-spacing: 0;
                        color: var(--kleur1); }
body.mobile .cmt p { font-size: 15px; }
body.mobile .linkbtn { font-size: 14px; }

/* correcties, commentaar en zonestatus */
.lblrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          margin-bottom: 6px; }
.lblrow .lbl { margin-bottom: 0; }
.cmtbox { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.cmt { background: #FBE0E0; border-radius: 12px; padding: 10px 13px; }
.cmt:not(.filled) { background: var(--gray); }
.cmtlabel { font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
            color: var(--grey-text); font-weight: 600; }
.cmt.filled .cmtlabel { color: #8E1D1D; }
.cmt p { font-size: 13px; line-height: 1.6; color: #3F4457; }
.cmtdate { font-size: 11px; color: var(--grey-text); }
.zoneactions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               background: var(--gray); border-radius: 15px; padding: 12px 16px; margin-bottom: 20px; }
.chipbtn { border: 1px solid var(--gray-input); background: #fff; color: var(--black);
           border-radius: 25px; padding: 6px 14px; font: inherit; font-size: 12px; cursor: pointer; }
.chipbtn:hover { border-color: var(--kleur1); color: var(--kleur1); }
.chipbtn.on { background: var(--kleur1); border-color: var(--kleur1); color: #fff; font-weight: 600; }

/* hoofdfoto en bijkomende foto */
.roletoggle { display: flex; gap: 6px; margin-top: 9px; }
.roletoggle .chipbtn { padding: 4px 10px; font-size: 11px; }
.photo-row.extra img { opacity: .78; }
.extranote { background: var(--gray); border-radius: 12px; padding: 12px 14px; font-size: 13px;
             line-height: 1.6; color: var(--grey-text); }

/* kaart */
.mapwrap { background: #fff; border: 1px solid var(--gray); border-radius: 15px;
           overflow: hidden; margin-bottom: 22px; }
.maparea { height: 380px; width: 100%; background: #f2f3f7; }
.mapcap { padding: 11px 16px; font-size: 13px; color: var(--grey-text);
          border-top: 1px solid var(--gray); display: flex; align-items: center;
          gap: 16px; flex-wrap: wrap; }
.mlegend { display: inline-flex; align-items: center; gap: 7px; color: var(--black); }
.mlegend .sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block;
               border: 2px solid; }
.sw.werf { border-color: #0d0d0d; background: rgba(13, 13, 13, .18); }
.sw.voorstel { border-color: #6B7185; border-style: dashed; background: rgba(107, 113, 133, .12); }
/* Openbaar domein is een lijn op de kaart, dus ook in de legende. */
.sw.segment { width: 16px; height: 0; border: 0; border-top: 5px solid var(--grey-text);
              border-radius: 3px; }
.mapnote { margin-left: auto; max-width: 46ch; line-height: 1.5; }
.pin { display: grid; place-items: center; width: 26px; height: 26px;
       border-radius: 50% 50% 50% 0; transform: rotate(-45deg); color: #fff;
       font-family: var(--font-title); font-weight: 700; font-size: 12px;
       box-shadow: 0 2px 6px rgba(13, 13, 13, .35); border: 2px solid #fff; }
.pin > * { transform: rotate(45deg); }
/* Een teller past niet op een speld van 26 pixels. */
.pin.teller { width: 34px; height: 34px; font-size: 11px; border-radius: 50% 50% 50% 4px; }
.popuprij { display: flex; justify-content: space-between; gap: 14px; margin-top: 4px;
            border-top: 1px solid #EEF1FA; padding-top: 4px; }
.leaflet-container { font: inherit; }
.leaflet-container a.leaflet-popup-close-button { color: var(--grey-text); }
.leaflet-popup-content { font-size: 13px; line-height: 1.55; }
.popuplink { color: var(--kleur1); font-weight: 600; }
.leaflet-tooltip { font-size: 12px; font-weight: 600; border-radius: 8px; border: 0;
                   box-shadow: 0 2px 8px rgba(13, 13, 13, .18); }
path.vlak.werf { stroke-dasharray: 6 4; }
path.vlak.voorstel { stroke-dasharray: 5 5; }
/* De gebouwen rondom staan er alleen om de rij leesbaar te maken. */
path.vlak.context { stroke-opacity: .55; }
.popupnote { color: var(--grey-text); font-size: 12px; }
path.leaflet-interactive:hover { stroke-width: 4; }

/* Een stuk openbaar domein aanduiden. Zolang dat loopt zet een klik een punt en
   opent hij geen dossier, dus alles wat op de kaart ligt laat de muis door. */
.tekenbalk { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
             padding: 11px 16px; font-size: 13px; background: #E9F5F5;
             border-bottom: 1px solid var(--gray); color: var(--black); }
.tekenbalk[hidden] { display: none; }
.tekenknoppen { margin-left: auto; display: flex; gap: 8px; }
.maparea.tekenmodus { cursor: crosshair; }
.maparea.tekenmodus .leaflet-overlay-pane path,
.maparea.tekenmodus .leaflet-marker-pane { pointer-events: none; }
.tag.waarschuwing { background: #FFF1DB; color: #9A5B00; }
/* Welke fasen van een object opgenomen zijn, in de plaats van een zoneteller. */
.fase { font-size: 13px; color: var(--grey-text); white-space: nowrap; }

/* De analyse-API per spoor, in het beheerscherm. */
.apispoor { border: 1px solid var(--gray); border-radius: 12px; padding: 12px 14px;
            margin-bottom: 10px; }
.apikop { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.apikop span { font-size: 12px; color: var(--grey-text); }
.apiregel { font-size: 13px; color: var(--black); margin-top: 4px; word-break: break-all; }
.apiregel.zacht { color: var(--grey-text); line-height: 1.5; }

/* Voorstellen per adres: een gebouw met zijn bussen eronder. */
.busgroep { border-top: 1px solid var(--gray); padding: 14px 0 6px; }
.busadres { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
            margin-bottom: 6px; cursor: pointer; }
.busgroep summary::marker { color: var(--grey-text); }
.busadres span { font-size: 13px; color: var(--grey-text); }
.busrij { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          padding: 6px 0 6px 16px; font-size: 14px; border-left: 2px solid var(--gray);
          margin-left: 2px; }

/* Voortgang van de analyse over alle zones samen. */
.voortgang { background: #fff; border: 1px solid var(--gray); border-radius: 15px;
             padding: 16px 18px; margin-bottom: 22px; }
.voortgangkop { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
                margin-bottom: 12px; }
.voortgangkop .num { font-size: 13px; color: var(--grey-text); }
.voortgangbalk { display: flex; gap: 3px; height: 9px; border-radius: 5px; overflow: hidden;
                 background: var(--gray); }
.voortgangbalk i { display: block; }
.voortgangtellers { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px;
                    font-size: 13px; color: var(--grey-text); }
.voortgangtellers span { display: inline-flex; align-items: center; gap: 7px; }
.voortgangtellers i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* Het document van een plaatsbeschrijving, zoals het op papier komt. */
.docbalk { display: flex; align-items: center; justify-content: space-between; gap: 16px;
           margin-bottom: 18px; }
.doc { max-width: 820px; }
.docblad { background: #fff; border: 1px solid var(--gray); border-radius: 15px;
           padding: 34px 38px; margin-bottom: 18px; }
.dockop { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
          border-bottom: 2px solid var(--black); padding-bottom: 16px; margin-bottom: 22px; }
.dockop h1 { font-family: var(--font-title); font-size: 26px; margin: 4px 0 6px; }
.docsoort { font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
            color: var(--grey-text); }
.docsub { color: var(--grey-text); font-size: 14px; }
.docref { text-align: right; font-size: 13px; color: var(--grey-text); white-space: nowrap; }
.docgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 34px; margin-bottom: 22px; }
.dockopje { font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
            color: var(--kleur1); font-weight: 700; margin-bottom: 10px; }
.docregel { display: flex; justify-content: space-between; gap: 18px; font-size: 13.5px;
            line-height: 1.6; padding: 5px 0; border-bottom: 1px solid #F2F4FB; }
.docregel span { color: var(--grey-text); }
.docregel b { text-align: right; }
.docregel + .dockopje { margin-top: 26px; }
.docmerk { margin-top: 10px; font-size: 13px; background: #FFF1DB; color: #9A5B00;
           border-radius: 10px; padding: 9px 12px; }
.docsamen { font-size: 14.5px; line-height: 1.65; margin-bottom: 18px; }
.docsamen.leeg { color: var(--grey-text); font-style: italic; }
.docfoto { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 16px 0;
           border-top: 1px solid var(--gray); }
.docfoto img { width: 100%; border-radius: 10px; display: block; }
.docfoto p { font-size: 13.5px; line-height: 1.6; }
.docfotokop { font-size: 12px; color: var(--grey-text); margin-bottom: 6px; }
.doccommentaar { margin-top: 10px; background: var(--gray); border-radius: 10px;
                 padding: 9px 12px; font-size: 13px; }
.docnoot { font-size: 12.5px; color: var(--grey-text); line-height: 1.55; margin-top: 8px; }

/* Afdrukken: alleen het blad, en een zone begint op een nieuwe pagina. */
@media print {
  body { background: #fff; }
  #nav, .topbar, .docbalk, .spoorband, .back-to-prev { display: none !important; }
  #view, main, .content { margin: 0 !important; padding: 0 !important; }
  .doc { max-width: none; }
  .docblad { border: 0; border-radius: 0; padding: 0 0 18px; margin: 0 0 18px;
             break-inside: avoid; }
  .docblad + .docblad { break-before: page; }
  .docfoto { break-inside: avoid; }
  .maparea { height: 320px; }
}

/* De brug tussen de twee fasen van hetzelfde object. */
.fasebalk { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px;
            margin-bottom: 18px; border-radius: 15px; background: #E9F5F5; font-size: 13px;
            line-height: 1.55; border: 1px solid #C9E4E4; }
.fasebalk.rustig { background: var(--gray); border-color: var(--gray);
                   color: var(--grey-text); }

body.mobile .maparea { height: 240px; }
body.mobile .mapnote { margin-left: 0; }

/* filter op werf boven de kanban */
.werffilter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
              margin-bottom: 22px; }
.filterlabel { font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
               color: var(--grey-text); font-weight: 600; margin-right: 4px; }
.werffilter .chipbtn { display: inline-flex; align-items: center; gap: 8px; }
.werffilter .chipbtn .num { background: var(--gray); border-radius: 25px; padding: 1px 7px;
                            font-size: 11px; color: var(--grey-text); }
.werffilter .chipbtn.on .num { background: rgba(255, 255, 255, .25); color: #fff; }

/* De twee sporen uit elkaar houden. Panden en werken lijken sterk op elkaar,
   dus elk spoor heeft een eigen kleur en een eigen naam boven de pagina. */
/* De spoorkleur mag met geen enkele statuskleur botsen. Oranje was Bezoek,
   blauw Te verzenden, paars In beoordeling, groen Goedgekeurd en Getekend,
   grijs Klaar, rood Geweigerd. Blijft teal over. */
:root { --spoor-props: #1B3BF2; --spoor-works: #0F7B7B; }
.spoorband { display: inline-flex; align-items: center; gap: 9px; font-size: 12px;
             font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
             border-radius: 25px; padding: 6px 15px 6px 12px; margin-bottom: 14px; }
.spoorband i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.spoorband.props { background: #EEF1FF; color: var(--spoor-props); }
.spoorband.props i { background: var(--spoor-props); }
.spoorband.works { background: #E2F1F1; color: #0B5C5C; }
.spoorband.works i { background: var(--spoor-works); }
.sectie { border-top: 1px solid var(--gray); padding-top: 22px; margin-top: 26px; }
.sectie .sectionhead h2 { display: flex; align-items: center; gap: 11px; }
.spoordot { width: 10px; height: 10px; border-radius: 50%; display: block; flex: none; }
.sectie.props .spoordot { background: var(--spoor-props); }
.sectie.works .spoordot { background: var(--spoor-works); }
/* In de app kies je bovenaan welk spoor je bekijkt. */
.spoorkeuze { display: flex; gap: 6px; background: #E6EAF6; border-radius: 25px; padding: 4px;
              margin-bottom: 14px; }
.spoor { flex: 1; border: 0; background: none; border-radius: 25px; padding: 9px 0;
         font: inherit; font-size: 15px; font-weight: 600; color: #4A5170; cursor: pointer; }
.spoor.on { background: #fff; color: var(--kleur1); box-shadow: 0 1px 3px rgba(16, 24, 64, .12); }
/* Een kaart op het overzicht draagt de kleur van haar spoor aan de zijkant. */
.board.props .plaatsbeschrijving { border-left: 4px solid var(--spoor-props); }
.board.works .plaatsbeschrijving { border-left: 4px solid var(--spoor-works); }

/* beheer */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--gray-input); margin-bottom: 22px;
        flex-wrap: wrap; }
.tab { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
       color: var(--grey-text); padding: 10px 18px; cursor: pointer;
       border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--kleur1); }
.tab.on { color: var(--kleur1); border-bottom-color: var(--kleur1); }
.uitleg { font-size: 13px; line-height: 1.6; color: var(--grey-text); max-width: 72ch;
          margin-bottom: 20px; }
.beheergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
              gap: 20px; align-items: start; }
.kamerlijst { display: flex; flex-direction: column; }
.kamerrij { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
            padding: 9px 0; border-bottom: 1px solid var(--gray); font-size: 14px; }
.kamerrij:last-child { border-bottom: 0; }
.kamertype { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
             color: var(--grey-text); margin-left: 8px; }
.kameritems { font-size: 12px; color: var(--grey-text); line-height: 1.5; margin-top: 3px; }
body.mobile .beheergrid { grid-template-columns: 1fr; }