/* ─── BE INHOUSE TOOLBOX · app-schermen (collecties, collectie, beheer) ─────────
   Volgt het ontwerp (prototype "Toolbox — Nieuwe collectie"). */
.bi-app {
  --i: #171A21; --i2: #3A3E47; --mu: #6B625A; --lijn: #DCDDD8; --lijn2: #ECECE8; --achter: #F0F1EF;
  --zand: #E0E1DD; --taupe: #A99F96; --groen: #3FAC78; --groen-bg: #E7F6EE; --groen-rand: #B4E1CA;
  --rood: #A6402F; --rood-bg: #FBEDEA; --rood-rand: #E8C2BA; --oranje: #9A5B13;
  --warm-bg: #FBF1E3; --warm-rand: #EBD3AE; --warm-tekst: #7A4710; --blauw-bg: #E8EEF7; --blauw: #284B7A;
  background: var(--achter); color: var(--i); font-family: 'TT Hoves Pro', 'Helvetica Neue', sans-serif;
  height: 100vh; overflow: hidden;
}
.bi-app.active { display: flex; flex-direction: column; }
.bi-app label { text-transform: none; letter-spacing: 0; color: inherit; font-size: inherit; margin: 0; }
.bi-app h1, .bi-app h2, .bi-app h3 { font-weight: 400; margin: 0; }
.bi-app button { font-family: inherit; }
.bi-app a { color: var(--i); } .bi-app a:hover { color: var(--mu); }

/* knoppen */
.bi-btn, .bi-btn-o, .bi-btn-g { font-family: inherit; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; border-radius: 2px; padding: 0 20px; height: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.bi-btn { border: 1px solid var(--i); background: var(--i); color: #fff; }
.bi-btn:hover:not(:disabled) { background: var(--i2); }
.bi-btn-o { border: 1px solid #C9CAC5; background: #fff; color: var(--i); }
.bi-btn-o:hover:not(:disabled) { border-color: var(--i); }
.bi-btn-g { border: 1px solid var(--groen); background: var(--groen); color: #fff; }
.bi-btn-g:hover:not(:disabled) { background: #355C42; }
.bi-btn:disabled, .bi-btn-g:disabled { background: #C9CAC5; border-color: #C9CAC5; color: #5B5F66; cursor: not-allowed; }
.bi-btn-o:disabled { color: #A9ACB0; cursor: not-allowed; }
.bi-sm { height: 36px; padding: 0 14px; font-size: 12px; }
.bi-tekstknop { background: none; border: none; padding: 0; cursor: pointer; color: var(--mu); font-size: 13px; }
.bi-tekstknop:hover { color: var(--i); }

/* basis */
.bi-lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.bi-card { background: #fff; border: 1px solid var(--lijn); border-radius: 2px; }
.bi-in { font-family: inherit; font-size: 13px; border: 1px solid var(--lijn); border-radius: 2px; padding: 0 10px; height: 36px; background: #fff; color: var(--i); width: 100%; box-sizing: border-box; outline: none; }
.bi-in:focus { border-color: var(--i); }
textarea.bi-in { height: auto; padding: 10px; line-height: 1.5; resize: vertical; }
.bi-veld { display: flex; flex-direction: column; gap: 6px; }
.bi-th.bi-sort { cursor: pointer; user-select: none; }
.bi-th.bi-sort:hover, .bi-th.bi-sort.aan { color: var(--i); }
.bi-th.bi-sort .pijl { margin-left: 5px; opacity: .35; }
.bi-th.bi-sort.aan .pijl { opacity: 1; }
.bi-th { padding: 8px 10px; border-bottom: 1px solid var(--lijn); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); font-weight: 400; text-align: left; white-space: nowrap; }
.bi-td { padding: 8px 10px; border-bottom: 1px solid var(--lijn2); font-size: 13px; vertical-align: middle; }
.bi-table { width: 100%; border-collapse: collapse; }
.bi-table tr:last-child .bi-td { border-bottom: 0; }
.bi-tag { font-size: 12px; padding: 6px 12px; border: 1px solid var(--lijn); border-radius: 2px; background: var(--achter); color: var(--i); font-family: inherit; cursor: pointer; }
.bi-tag:hover { border-color: var(--i); }
.bi-tag.aan { border-color: var(--i); background: var(--i); color: #fff; }
.bi-pill { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; white-space: nowrap; display: inline-block; }
.bi-pill.in_bewerking { background: var(--warm-bg); color: var(--warm-tekst); }
.bi-pill.ter_controle { background: var(--blauw-bg); color: var(--blauw); }
.bi-pill.goedgekeurd, .bi-pill.geexporteerd { background: var(--groen-bg); color: #1F7A50; }
.bi-mu { color: var(--mu); font-size: 12px; }
.bi-h2 { font-size: 20px; }
.bi-melding { background: var(--warm-bg); border: 1px solid var(--warm-rand); padding: 12px 16px; font-size: 13px; line-height: 1.6; }
.bi-melding.rood { background: var(--rood-bg); border-color: var(--rood-rand); color: #7E2F22; }
.bi-melding.groen { background: var(--groen-bg); border-color: var(--groen-rand); color: #1F7A50; }
.bi-melding ul { margin: 4px 0 0 18px; }
.bi-status { display: none; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; border: 1px solid var(--lijn); background: #fff; border-radius: 2px; }
.bi-status.aan { display: flex; }
.bi-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--taupe); flex-shrink: 0; }
.bi-status.ok { border-color: var(--groen-rand); background: var(--groen-bg); color: #1F7A50; } .bi-status.ok::before { background: var(--groen); }
.bi-status.error { border-color: var(--rood-rand); background: var(--rood-bg); color: #7E2F22; } .bi-status.error::before { background: var(--rood); }
.bi-status.processing::before { background: var(--i); animation: bi-puls 1s infinite; }
@keyframes bi-puls { 50% { opacity: .25; } }

/* header */
.bi-header { height: 64px; background: var(--i); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; flex-shrink: 0; }
.bi-header .l { display: flex; align-items: center; gap: 40px; }
.bi-header img.logo { height: 22px; display: block; }
.bi-acties-menu, .bi-rijmenu { position: absolute; z-index: 40; min-width: 220px; padding: 6px 0; display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(23,26,33,.12); }
.bi-acties-menu { top: calc(100% + 6px); left: 0; }
.bi-acties-menu button, .bi-rijmenu button { background: none; border: 0; text-align: left; padding: 8px 14px; font: inherit; font-size: 13px; color: var(--i); cursor: pointer; }
.bi-acties-menu button:hover, .bi-rijmenu button:hover { background: var(--achter); }
.bi-acties-menu .rood, .bi-rijmenu .rood { color: var(--rood); }
.bi-acties-menu .sep { border-top: 1px solid var(--lijn2); margin: 4px 0; }
.bi-toewijs-info { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit; font-size: 13px; color: var(--mu); cursor: pointer; padding: 4px 6px; }
.bi-toewijs-info.mij { color: #1F7A50; }
.bi-toewijs-info .av { width: 20px; height: 20px; border-radius: 50%; background: var(--taupe); color: var(--i); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.bi-rijknop { background: none; border: 1px solid transparent; font: inherit; font-size: 16px; line-height: 1; padding: 6px 8px; cursor: pointer; color: var(--mu); margin-left: 4px; }
.bi-rijknop:hover { border-color: var(--lijn); color: var(--i); }
.bi-logoknop { background: none; border: 0; padding: 0; cursor: pointer; display: block; }
.bi-logoknop:focus-visible { outline: 2px solid var(--groen); outline-offset: 4px; }
.bi-header nav { display: flex; gap: 20px; }
.bi-link { background: none; border: none; font-family: inherit; color: var(--zand); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 8px 4px; height: 44px; border-bottom: 2px solid transparent; }
.bi-link:hover { color: #fff; }
.bi-link.actief { color: #fff; border-bottom-color: var(--taupe); }
.bi-ik { position: relative; display: flex; align-items: center; gap: 12px; color: var(--zand); font-size: 13px; }
.bi-av { width: 32px; height: 32px; border-radius: 50%; background: var(--taupe); color: var(--i); display: flex; align-items: center; justify-content: center; font-size: 12px; border: none; cursor: pointer; padding: 0; overflow: hidden; }
.bi-av img { width: 100%; height: 100%; object-fit: cover; }
.bi-menu { position: absolute; right: 0; top: 44px; background: #fff; border: 1px solid var(--lijn); border-radius: 2px; min-width: 200px; z-index: 50; display: none; box-shadow: 0 6px 24px rgba(23,26,33,.12); }
.bi-menu.open { display: block; }
.bi-menu div { padding: 12px 14px; font-size: 12px; color: var(--mu); border-bottom: 1px solid var(--lijn2); }
.bi-menu button { display: block; width: 100%; text-align: left; padding: 12px 14px; background: none; border: none; font-size: 13px; cursor: pointer; color: var(--i); }
.bi-menu button:hover { background: var(--achter); }

/* overzicht / beheer */
.bi-pagina { flex-grow: 1; overflow: auto; padding: 40px 48px; display: flex; flex-direction: column; gap: 24px; }
.bi-paginakop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.bi-paginakop h1 { margin-top: 6px; font-size: 30px; }
.bi-soorten { display: flex; gap: 28px; border-bottom: 1px solid var(--lijn); margin-top: -4px; }
.bi-soorten button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 0 10px; font: inherit; font-size: 14px; color: var(--mu); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.bi-soorten button:hover { color: var(--i); }
.bi-soorten button.aan { color: var(--i); border-bottom-color: var(--i); }
.bi-soorten .n { font-size: 12px; color: var(--mu); }
.bi-soorten .taak { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--i); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.bi-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.bi-balk { width: 140px; height: 6px; background: var(--lijn2); border-radius: 3px; overflow: hidden; }
.bi-balk > div { height: 100%; background: var(--i); }
.bi-rij-klik { cursor: pointer; } .bi-rij-klik:hover .bi-td { background: #FAFAF8; }
.bi-nieuw { display: flex; gap: 12px; align-items: flex-end; padding: 18px; flex-wrap: wrap; }
.bi-leeg { padding: 48px 24px; text-align: center; color: var(--mu); font-size: 14px; line-height: 1.7; }
.bi-beheer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-content: start; }
@media (max-width: 1100px) { .bi-beheer { grid-template-columns: 1fr; } }

/* ── collectie ── */
.bi-ckop { background: #fff; border-bottom: 1px solid var(--lijn); padding: 18px 48px 0; flex-shrink: 0; }
.bi-ckop .r1 { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bi-ckop .r1 .l { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.bi-ckop h1 { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-aanw { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mu); text-align: right; }
.bi-aanw .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--groen); flex-shrink: 0; }
.bi-steps { display: flex; gap: 4px; margin-top: 16px; overflow-x: auto; }
.bi-step { flex: 1 1 0; min-width: 120px; display: flex; align-items: center; gap: 10px; padding: 10px 12px 14px; background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; color: var(--i); text-align: left; }
.bi-step:disabled { cursor: default; opacity: .5; }
.bi-step.actief { border-bottom-color: var(--i); }
.bi-step .nr { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; background: var(--zand); color: var(--i2); }
.bi-step.klaar .nr { background: var(--groen); color: #fff; }
.bi-step.actief .nr { background: var(--i); color: #fff; }
.bi-step .t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.bi-step .t span:first-child { font-size: 13px; }
.bi-step .sub { font-size: 11px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bi-step.klaar .sub { color: var(--groen); } .bi-step.open .sub { color: var(--rood); }
.bi-step.voorstel .sub { color: var(--oranje); } .bi-step.wacht .sub, .bi-step.later .sub { color: var(--mu); }

.bi-cbody { flex-grow: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.bi-cmain { overflow: auto; padding: 28px 48px; display: flex; flex-direction: column; gap: 16px; }
.bi-caside { border-left: 1px solid var(--lijn); background: #fff; padding: 0; overflow: auto; display: flex; flex-direction: column; }
.bi-as-blok { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.bi-as-blok + .bi-as-blok { border-top: 1px solid var(--lijn); }
.bi-as-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bi-as-n { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--achter); color: var(--i2); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.bi-as-n:empty { display: none; }
.bi-as-notities { background: #FAF9F7; }
.bi-as-notities .bi-bericht, .bi-as-notities .bi-bericht.ik { background: #fff; }
.bi-as-notities .bi-as-n { background: var(--i); color: #fff; }
.bi-as-act .bi-act { color: var(--mu); }
.bi-as-act .bi-act span { color: var(--mu); opacity: .8; }
@media (max-width: 1180px) { .bi-cbody { grid-template-columns: 1fr; } .bi-caside { display: none; } .bi-cmain, .bi-ckop { padding-left: 24px; padding-right: 24px; } }
.bi-todo { text-align: left; background: var(--achter); border: none; border-radius: 2px; padding: 10px 12px; font-size: 13px; color: var(--i); cursor: pointer; display: flex; justify-content: space-between; gap: 8px; width: 100%; }
.bi-todo:hover { background: var(--zand); }
.bi-todo span:last-child { color: var(--mu); white-space: nowrap; }
.bi-act { font-size: 12px; line-height: 1.5; }
.bi-act span { color: var(--mu); }
.bi-notitieform { display: flex; flex-direction: column; gap: 6px; }
.bi-notitieform textarea { resize: vertical; min-height: 54px; font: inherit; font-size: 13px; line-height: 1.5; padding: 8px 10px; height: auto; }
.bi-notitievoet { display: flex; justify-content: space-between; align-items: center; }
.bi-notitievoet .bi-mu { font-size: 11px; }
.bi-bericht { background: #fff; border: 1px solid var(--lijn, #E2DED8); border-left: 3px solid #A89E95; padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; }
.bi-bericht.terug { border-left-color: var(--rood, #A33A2E); }
.bi-bericht.goed { border-left-color: #3FAC78; }
.bi-bericht.ik { background: #F7F5F2; }
.bi-bericht .kop { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--mu); }
.bi-bericht .kop b { font-weight: 500; color: var(--i, #171A21); }
.bi-bericht .txt { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.bi-bericht.voormij { border-left-color: var(--i); box-shadow: 0 0 0 1px var(--i) inset; }
.bi-bericht .kop i { font-style: normal; font-weight: 400; color: var(--mu); margin-left: 4px; }
.bi-vermeld { background: #ECE8E3; padding: 0 3px; border-radius: 2px; }
.bi-vermeld.ik { background: var(--i); color: #fff; }
.bi-vlijst { display: none; position: absolute; left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--lijn); box-shadow: 0 6px 24px rgba(23,26,33,.12); }
.bi-vlijst button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; background: #fff; font: inherit; font-size: 13px; color: var(--i); cursor: pointer; text-align: left; }
.bi-vlijst button.aan, .bi-vlijst button:hover { background: var(--achter); }
.bi-av.klein { width: 22px; height: 22px; font-size: 9px; flex: none; }
.bi-vmelding { font-size: 12px; color: var(--i); background: #ECE8E3; padding: 3px 8px; margin: 4px 0 2px; max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-vmelding b { font-weight: 500; }
.bi-bericht .ctx { font-size: 11px; color: var(--mu); }
.bi-nav { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.bi-paneelkop { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* start */
.bi-2kol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bi-4kol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; font-size: 13px; }
.bi-4kol .k { color: var(--mu); font-size: 12px; }

/* bronnen */
.bi-bronnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 1100px) { .bi-bronnen { grid-template-columns: 1fr; } }
.bi-qr { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; }
.bi-qr .code { width: 112px; height: 112px; background: #fff; padding: 6px; outline: 1px solid var(--lijn); box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: var(--mu); font-size: 11px; text-align: center; }
.bi-qr .code svg { width: 100%; height: 100%; display: block; }
.bi-qr .t { font-size: 13px; line-height: 1.6; } .bi-qr .t b { display: block; font-size: 15px; font-weight: 400; }
.bi-drop { border: 1px dashed var(--taupe); border-radius: 2px; background: #fff; padding: 18px; text-align: center; font-size: 13px; color: var(--mu); cursor: pointer; position: relative; }
.bi-drop.over { border-color: var(--i); background: var(--achter); color: var(--i); }
.bi-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.bi-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bi-thumb { aspect-ratio: 3 / 4; background: var(--zand) center / cover no-repeat; border-radius: 2px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
.bi-thumb .naam { background: linear-gradient(transparent, rgba(23,26,33,.72)); color: #fff; padding: 18px 8px 7px; font-size: 11px; line-height: 1.3; word-break: break-word; }
.bi-thumb.pdf { background: #fff; border: 1px solid var(--lijn); align-items: center; justify-content: center; }
.bi-thumb.pdf .naam { position: absolute; bottom: 0; left: 0; right: 0; }
.bi-thumb .x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: var(--i); cursor: pointer; font-size: 12px; display: none; }
.bi-thumb:hover .x { display: block; }
.bi-thumb .via { position: absolute; top: 6px; left: 6px; font-size: 10px; background: rgba(255,255,255,.9); padding: 2px 6px; border-radius: 2px; }
.bi-thumb .via.slecht { background: var(--rood); color: #fff; }
.bi-gids { padding: 20px; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.bi-gids-rij { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--lijn2); align-items: start; }
.bi-gids-rij .ic { font-size: 16px; line-height: 1.3; }
.bi-gids-rij .ic.ok { color: var(--groen); } .bi-gids-rij .ic.no { color: var(--rood); font-weight: 700; padding-left: 4px; }
.bi-gids-rij .ic.opt { color: #C9CAC5; } .bi-gids-rij .ic.skip { color: var(--warm-tekst); }
.bi-gids-rij .tt { font-size: 14px; } .bi-gids-rij .dd { font-size: 12px; color: var(--mu); line-height: 1.5; }
.bi-gids-rij select { font-size: 11px; height: 28px; width: auto; padding: 0 6px; }
.bi-tip { background: var(--achter); padding: 12px; font-size: 12px; line-height: 1.6; color: var(--i2); }

/* artikelen */
.bi-art-wrap { overflow: auto; max-height: calc(100vh - 330px); }
.bi-art { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12px; }
.bi-art th { position: sticky; top: 0; background: #fff; z-index: 2; }
.bi-art td { padding: 4px 6px; border-bottom: 1px solid var(--lijn2); vertical-align: middle; }
.bi-art tr.groep td { background: #F7F7F5; padding-top: 10px; padding-bottom: 10px; }
.bi-art tr.groep .gnaam { font-size: 14px; white-space: nowrap; }
.bi-art tr.groep .gnaam small { color: var(--mu); margin-left: 6px; font-size: 11px; }
.bi-art input, .bi-art select { font-family: inherit; font-size: 12px; border: 1px solid transparent; border-radius: 2px; padding: 0 6px; height: 30px; background: transparent; color: var(--i); width: 100%; min-width: 60px; outline: none; }
.bi-art input:hover, .bi-art select:hover { border-color: var(--lijn); background: #fff; }
.bi-art input:focus, .bi-art select:focus { border-color: var(--i); background: #fff; }
.bi-art tr.groep input, .bi-art tr.groep select { border-color: var(--lijn); background: #fff; }
.bi-art td.leeg input, .bi-art td.leeg select { border-color: var(--rood); background: var(--rood-bg); }
.bi-art td.profiel input, .bi-art td.profiel select { font-style: italic; color: var(--mu); }
.bi-art td.ro { color: var(--mu); white-space: nowrap; font-size: 11px; line-height: 1.4; }
.bi-art td.ro.leeg { color: var(--rood); }
.bi-art .w-xs { width: 74px; } .bi-art .w-s { width: 96px; } .bi-art .w-m { width: 130px; } .bi-art .w-a { width: 150px; } .bi-art .w-mat { width: 130px; } .bi-art .w-l { width: 210px; }
.bi-del { background: none; border: none; color: #C9CAC5; cursor: pointer; font-size: 12px; padding: 4px; }
.bi-del:hover { color: var(--rood); }
.bi-noot { cursor: help; color: #C9CAC5; } .bi-noot.has { color: var(--oranje); }
.bi-legenda { display: flex; gap: 18px; font-size: 12px; color: var(--mu); flex-wrap: wrap; }
.bi-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -2px; }

/* patroon & kleuren */
.bi-dessin { padding: 18px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
.bi-dessin.af { border-color: var(--groen-rand); }
.bi-swatch { border-radius: 2px; min-height: 120px; background-size: cover; background-position: center; }
.bi-dessin .kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bi-dessin .naam { font-size: 17px; }
.bi-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bi-tags .bi-lbl { width: 70px; }
.bi-tags.leeg .bi-tag { border-color: var(--rood-rand); }
.bi-kleuren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1300px) { .bi-kleuren { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bi-kleur { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 8px; background: var(--achter); min-height: 36px; }
.bi-kleur.leeg { background: var(--rood-bg); }
.bi-kleur .dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--lijn); }
.bi-kleur .art { flex-grow: 1; white-space: nowrap; }
.bi-kleur select { font-family: inherit; font-size: 12px; border: none; background: transparent; color: var(--i2); padding: 0 2px; height: 28px; max-width: 108px; cursor: pointer; text-align: right; }
.bi-kleur select:hover, .bi-kleur select:focus { background: #fff; outline: 1px solid var(--lijn); }
.bi-kleur .st { width: 16px; text-align: center; font-size: 12px; color: var(--groen); flex-shrink: 0; }
.bi-kleur .st.vs { color: var(--oranje); font-size: 10px; }

/* teksten */
.bi-tekstkaart { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.bi-tekstkaart .kop { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.bi-tekstkaart .body p { margin: 0 0 10px; font-size: 14px; line-height: 1.75; }
.bi-tekstkaart .body p:last-child { margin: 0; }
.bi-tekstkaart textarea { min-height: 220px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.bi-knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bi-tlijst { padding: 6px 0; }
.bi-tlijst .g { padding: 12px 18px 6px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bi-tlijst .g b { font-weight: 400; font-size: 14px; }
.bi-trij { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 18px; font-size: 13px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; color: var(--i); }
.bi-trij:hover { background: var(--achter); } .bi-trij.huidig { background: var(--achter); }
.bi-trij .ic { color: #C9CAC5; } .bi-trij .ic.ok { color: var(--groen); } .bi-trij .ic.lees { color: var(--oranje); }
.bi-trij span:last-child { color: var(--mu); font-size: 12px; }
details.bi-lev summary { cursor: pointer; font-size: 12px; color: var(--mu); }
details.bi-lev textarea { margin-top: 8px; min-height: 90px; }
details.bi-lev.nodig { border: 1px solid #E8B4A8; background: #FDF4F1; border-radius: 2px; padding: 10px 12px; }
details.bi-lev.nodig summary { color: #B4442C; font-weight: 500; }
details.bi-lev.nodig textarea { background: #fff; }
.bi-geenlev { display: flex; gap: 8px; align-items: center; justify-content: flex-start; width: fit-content; font-size: 12px; color: var(--mu); margin-top: 8px; cursor: pointer; }
.bi-geenlev input { width: auto; height: auto; margin: 0; flex: none; }
.bi-tekstknop.bi-uit { color: var(--mu); }
.bi-tlijst .g .bi-btn-g.bi-sm { height: 32px; padding: 0 14px; font-size: 12px; }

/* controle / export */
.bi-check { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--lijn2); }
.bi-check:last-child { border-bottom: 0; }
.bi-check .ic { font-size: 16px; } .bi-check .ic.ok { color: var(--groen); } .bi-check .ic.no { color: var(--rood); font-weight: 700; padding-left: 4px; } .bi-check .ic.later { color: #C9CAC5; }
.bi-check .tt { font-size: 14px; } .bi-check .dd { font-size: 12px; color: var(--mu); }
.bi-cijfers { padding: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bi-cijfers b { display: block; font-size: 28px; font-weight: 400; }
.bi-cijfers span { font-size: 12px; color: var(--mu); }
.bi-pro { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.bi-seg { display: inline-flex; border: 1px solid var(--lijn); }
.bi-seg button { border: 0; border-left: 1px solid var(--lijn); background: #fff; font: inherit; font-size: 13px; padding: 8px 16px; cursor: pointer; color: var(--i); }
.bi-seg button:first-child { border-left: 0; }
.bi-seg button.aan { background: var(--i); color: #fff; }
.bi-vink { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; cursor: pointer; }
.bi-vink input { width: auto; margin-top: 3px; }
.bi-matrix td:not(:first-child), .bi-matrix th:not(:first-child) { text-align: center; }

/* artikelen per dessin */
.bi-wissel { display: inline-flex; border: 1px solid #C9CAC5; border-radius: 2px; overflow: hidden; }
.bi-wissel button { height: 34px; padding: 0 12px; border: none; background: #fff; font-size: 12px; cursor: pointer; color: var(--mu); }
.bi-wissel button.aan { background: var(--i); color: #fff; }
.bi-algemeen { background: var(--warm-bg); border: 1px solid var(--warm-rand); border-radius: 2px; padding: 10px 14px; font-size: 13px; }
.bi-algemeen summary { cursor: pointer; color: var(--warm-tekst); }
.bi-algemeen ul { margin: 8px 0 2px 18px; line-height: 1.6; }
.bi-dk { overflow: hidden; }
.bi-dk.dicht { background: #FAFAF8; }
.bi-dk-kop { display: grid; grid-template-columns: 22px auto auto minmax(0, 1fr) 16px; gap: 12px; align-items: baseline; width: 100%; padding: 14px 18px; background: none; border: none; cursor: pointer; text-align: left; color: var(--i); }
.bi-dk-kop:hover { background: #F7F7F5; }
.bi-dk-kop .ic { font-size: 15px; } .bi-dk-kop .ic.ok { color: var(--groen); } .bi-dk-kop .ic.no { color: var(--rood); font-weight: 700; padding-left: 4px; }
.bi-dk-kop .naam { font-size: 17px; }
.bi-dk-kop .sam { font-size: 13px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.bi-dk-kop .pijl { color: var(--mu); font-size: 12px; }
.bi-dk-body { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.bi-web { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.bi-web .kop { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.bi-web .kop b { font-weight: 500; }
.bi-web .rij { display: flex; gap: 8px; }
.bi-web .rij .bi-in { flex: 1; }
.bi-mk { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn2); display: flex; flex-direction: column; gap: 8px; }
.bi-mk-rij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bi-mk-rij select, .bi-mk-rij input { height: 32px; border: 1px solid var(--lijn); padding: 0 8px; font: inherit; font-size: 13px; background: #fff; }
.bi-mk-rij input { width: 110px !important; flex: none; }
.bi-mk-rij input.lev { width: 90px !important; }
.bi-mk-rij select { width: 160px !important; flex: none; }
.bi-dk-noot { background: var(--warm-bg); border-left: 3px solid var(--warm-rand); padding: 8px 12px; font-size: 12px; line-height: 1.6; color: var(--i2); display: flex; flex-direction: column; gap: 4px; }
.bi-dk-velden { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 12px; }
@media (max-width: 1250px) { .bi-dk-velden { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bi-dk-veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bi-dk-veld.breed { grid-column: span 2; }
.bi-dk-veld > span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-dk-veld > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--oranje); }
.bi-dk-veld input, .bi-dk-veld select { font-family: inherit; font-size: 13px; border: 1px solid var(--lijn); border-radius: 2px; padding: 0 8px; height: 36px; background: #fff; color: var(--i); width: 100%; outline: none; }
.bi-dk-veld input:focus, .bi-dk-veld select:focus { border-color: var(--i); }
.bi-dk-veld.leeg input, .bi-dk-veld.leeg select { border-color: var(--rood); background: var(--rood-bg); }
.bi-dk-veld.profiel input, .bi-dk-veld.profiel select { font-style: italic; color: var(--mu); }
.bi-dk-veld.anders input, .bi-dk-veld.anders select { border-color: var(--oranje); }
.bi-dk-uitz { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 12px; }
.bi-dk-uitz .bi-tekstknop { font-size: 12px; color: var(--oranje); text-decoration: underline; text-underline-offset: 2px; }
.bi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bi-chip { font-size: 12px; padding: 6px 10px; border: 1px solid var(--lijn); border-radius: 2px; background: var(--achter); color: var(--i); cursor: pointer; white-space: nowrap; }
.bi-chip b { font-weight: 400; }
.bi-chip:hover { border-color: var(--i); }
.bi-chip.aan { background: var(--i); color: #fff; border-color: var(--i); }
.bi-chip.leeg { border-color: var(--rood); background: var(--rood-bg); }
.bi-chip .stip { color: var(--oranje); font-size: 9px; vertical-align: 1px; }
.bi-chip .noot { color: var(--oranje); }
.bi-chip.aan .stip, .bi-chip.aan .noot { color: #fff; }
.bi-dk-editor { border: 1px solid var(--i); border-radius: 2px; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.bi-dk-editor .kop { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.bi-dk-editor .kop b { font-weight: 400; }
.bi-dk-voet { font-size: 11px; color: var(--mu); border-top: 1px solid var(--lijn2); padding-top: 10px; }

/* patroon & kleuren — ruimer, met kopjes */
.bi-dessin { padding: 22px; gap: 24px; }
.bi-dessin-inhoud { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.bi-swatch { min-height: 160px; align-self: stretch; }
.bi-sectie { display: flex; flex-direction: column; gap: 10px; }
.bi-sectie + .bi-sectie { border-top: 1px solid var(--lijn2); padding-top: 20px; }
.bi-sectiekop { display: flex; align-items: center; gap: 14px; min-height: 36px; }
.bi-sectiekop .bi-btn-o { margin-left: auto; }
.bi-tags { gap: 8px; }
.bi-kleuren { gap: 10px; }
.bi-kleur { display: grid; grid-template-columns: 16px minmax(64px, auto) minmax(0, 1fr) auto; gap: 10px; padding: 8px 12px; min-height: 52px; border: 1px solid transparent; }
.bi-kleur.ok { background: #F4F7F4; }
.bi-kleur .art { display: flex; flex-direction: column; line-height: 1.25; }
.bi-kleur .art b { font-weight: 400; font-size: 13px; }
.bi-kleur .art small { font-size: 11px; color: var(--mu); }
.bi-kleur .keuze { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.bi-kleur .keuze select { max-width: 100%; height: 22px; }
.bi-kleur .keuze select + select { color: var(--mu); font-size: 11px; }
.bi-kleur .st { width: auto; min-width: 16px; }
.bi-kleur .st.vs { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; background: var(--warm-bg); color: var(--warm-tekst); padding: 2px 6px; border-radius: 2px; }
.bi-kleur .st.leeg { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--rood); }
.bi-swatch { border: 1px solid var(--lijn); }

/* afbeeldingen */
.bi-beeld-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1250px) { .bi-beeld-grid { grid-template-columns: 1fr; } }
.bi-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.bi-tegel { padding: 8px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.bi-tegel:hover { border-color: var(--i); }
.bi-tegel.aan { border-color: var(--i); box-shadow: 0 0 0 1px var(--i); }
.bi-tegel.leeg { border-color: var(--rood-rand); background: #FFFBFA; }
.bi-tegel.over, .bi-groot.over { outline: 2px dashed var(--i); outline-offset: 2px; }
.bi-tegel .dumbs { display: flex; gap: 4px; }
.bi-tegel .dumb { flex: 1 1 0; aspect-ratio: 4 / 3; border-radius: 2px; background: var(--zand) center / cover no-repeat; }
.bi-tegel .dumb.hoofd { outline: 2px solid var(--i); outline-offset: 1px; flex-grow: 1.6; }
.bi-tegel .dumb.leeg { background: var(--achter); }
.bi-tegel .t { font-size: 12px; } .bi-tegel .t b { font-weight: 400; }
.bi-tegel .bi-mu { font-size: 11px; }
.bi-merknieuw { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 16px 18px; border-top: 1px solid var(--lijn); }
.bi-merknieuw .bi-veld:first-child { flex: 1; min-width: 200px; }
.bi-merkedit { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.bi-merkedit > .kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bi-merkedit section { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--lijn2); }
.bi-merkedit h3 { font-size: 14px; font-weight: 500; margin: 0; }
.bi-merkedit h3 .bi-mu { font-weight: 400; font-size: 12px; }
.bi-merkedit .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.bi-merkedit .grid.klein { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.bi-merkedit .bi-veld.breed { grid-column: 1 / -1; }
.bi-merkedit textarea.bi-in { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; font-size: 13px; }
.bi-merkedit .bi-veld { display: flex; flex-direction: column; gap: 4px; }
.bi-rijvink { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; align-items: center; min-height: 36px; }
.bi-rijvink label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.bi-rijvink input { width: auto; }
.bi-fotorij { display: grid; grid-template-columns: 1.2fr 1.4fr 1.4fr auto auto; gap: 8px; align-items: center; }
.bi-fotorij input:not([type=checkbox]) { height: 32px; border: 1px solid var(--lijn); padding: 0 8px; font: inherit; font-size: 13px; min-width: 0; }
@media (max-width: 1100px) { .bi-fotorij { grid-template-columns: 1fr 1fr; } }
.bi-merkedit .bi-meer > summary { cursor: pointer; font-size: 13px; color: var(--i2); padding: 12px 0 4px; border-top: 1px solid var(--lijn2); }
.bi-merkedit .bi-meer[open] > summary { margin-bottom: 8px; }
.bi-merkedit .bi-meer section { margin-top: 14px; }
.bi-merkedit .v { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--lijn2); font-size: 13px; }
.bi-promptbeheer { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.bi-prompt { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.bi-promptkop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bi-prompt textarea { height: 460px; padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.6; resize: vertical; }
.bi-promptgesch summary { cursor: pointer; font-size: 13px; color: var(--mu); }
.bi-promptgesch .v { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--lijn2); font-size: 13px; }
.bi-beheer-beeld { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-color: var(--i); }
.bi-beheer-beeld .kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; } .bi-beheer-beeld .kop b { font-weight: 400; }
.bi-rij-beelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.bi-groot { position: relative; cursor: grab; display: flex; flex-direction: column; gap: 6px; }
.bi-groot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; display: block; background: var(--zand); }
.bi-groot .lab { position: absolute; top: 6px; left: 6px; background: var(--i); color: #fff; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; }
.bi-groot .naam { font-size: 11px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-groot .acties { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.bi-groot .acties button { background: none; border: none; padding: 0; font-size: 11px; color: var(--i2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bi-groot .acties button.rood { color: var(--rood); }
.bi-los { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--lijn2); cursor: grab; }
.bi-los img { width: 72px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: var(--zand); }
.bi-los .naam { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.bi-los select { height: 30px; font-size: 12px; margin-bottom: 2px; }
.bi-modal { position: fixed; inset: 0; background: rgba(23,26,33,.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.bi-modal-in { width: min(920px, 100%); padding: 22px; display: flex; flex-direction: column; gap: 16px; max-height: 100%; overflow: auto; }
.bi-crop { position: relative; align-self: center; max-width: 100%; line-height: 0; user-select: none; touch-action: none; }
.bi-crop img { max-width: 100%; max-height: 62vh; display: block; }
.bi-crop .kader { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(23,26,33,.55); cursor: move; box-sizing: border-box; }
.bi-crop { overflow: hidden; }
.bi-kleur .mini { width: 40px; height: 30px; border-radius: 2px; background: var(--zand) center / cover no-repeat; position: relative; flex-shrink: 0; }
.bi-kleur .mini i { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; }
.bi-kleur:has(.mini) { grid-template-columns: 40px minmax(64px, auto) minmax(0, 1fr) auto; }
.st-voorstel { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; background: var(--warm-bg); color: var(--warm-tekst); padding: 2px 6px; border-radius: 2px; }
.bi-kleuren { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 1300px) { .bi-kleuren { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.bi-kleur .keuze select { max-width: 130px; }

/* toewijzen */
.bi-toewijs-wrap { position: relative; align-self: center; display: inline-flex; align-items: center; gap: 6px; }
.bi-toewijs { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 12px; border: 1px solid var(--lijn); border-radius: 15px; background: #fff; font-size: 12px; color: var(--i2); cursor: pointer; white-space: nowrap; }
.bi-toewijs:hover { border-color: var(--i); }
.bi-toewijs.mij { border-color: var(--groen-rand); background: var(--groen-bg); color: #1F7A50; }
.bi-toewijs .av { width: 20px; height: 20px; border-radius: 50%; background: var(--taupe); color: var(--i); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.bi-toewijs .pijl { font-size: 9px; color: var(--mu); }
.bi-toewijs-pop { position: absolute; top: 38px; left: 0; z-index: 40; width: 320px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 28px rgba(23,26,33,.14); }

.bi-kv { display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: var(--i2); background: var(--achter); padding: 8px 12px; border-radius: 2px; }
.bi-kv .ic { color: var(--mu); }

/* dessins indelen */
.bi-ig-melding { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bi-ig-uitleg { padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; max-width: 1100px; }
.bi-ig-lijst { padding: 0; max-width: 1100px; }
.bi-ig { padding: 14px 18px; border-bottom: 1px solid var(--lijn2); }
.bi-ig:last-child { border-bottom: 0; }
.bi-ig .kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bi-ig .kop .bi-in { width: 240px; max-width: 100%; height: 38px; }
.bi-ig .reden { font-size: 12px; color: var(--oranje); margin-top: 6px; }
.bi-ig-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bi-igc { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid var(--lijn); background: #fff; padding: 4px; border-radius: 2px; cursor: pointer; font: inherit; font-size: 12px; color: var(--i); }
.bi-igc .m { width: 64px; height: 64px; background: var(--achter) center/cover no-repeat; display: block; }
.bi-igc .m.leeg { background: repeating-linear-gradient(45deg, var(--achter), var(--achter) 6px, #fff 6px, #fff 12px); }
.bi-igc:not(.eerste):hover { border-color: var(--groen); box-shadow: inset 3px 0 0 var(--groen); }
.bi-igc.eerste { cursor: default; }

.bi-meta { font-size: 12px; color: var(--i2); background: var(--achter); padding: 8px 10px; border-radius: 2px; margin-top: 4px; }
.bi-meta .bi-lbl { margin-right: 6px; }
.bi-meta .kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.bi-meta .t { color: #1a0dab; font-size: 14px; }
.bi-meta .d { font-size: 12px; color: var(--i2); }
.bi-meta-edit { display: flex; flex-direction: column; gap: 8px; }
.bi-meta-edit textarea { font-family: inherit; font-size: 13px; }
.bi-meta-auto { display: block; font-size: 11px; color: var(--oranje); margin-top: 2px; }
.bi-cpagina { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.bi-cpagina textarea { font-family: inherit; font-size: 13px; line-height: 1.5; }
.bi-pagina-voorbeeld { border: 1px solid var(--lijn); padding: 14px 18px; font-size: 14px; line-height: 1.6; max-height: 520px; overflow: auto; background: #fff; }
.bi-pagina-voorbeeld h2 { font-size: 18px; font-weight: 500; margin: 16px 0 6px; }
.bi-pagina-voorbeeld h3 { font-size: 15px; font-weight: 500; margin: 12px 0 4px; }
.bi-pagina-voorbeeld a { color: var(--groen); }
.bi-pg-beelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bi-pg-beeld { aspect-ratio: 4 / 3; border: 1px solid var(--lijn); background: var(--achter) center/cover no-repeat; cursor: pointer; position: relative; border-radius: 2px; font: inherit; font-size: 13px; color: var(--i); padding: 0; }
.bi-pg-beeld:hover { border-color: var(--groen); }
.bi-pg-beeld.gekozen { outline: 3px solid var(--groen); outline-offset: -3px; }
.bi-pg-beeld span { position: absolute; left: 6px; bottom: 6px; background: var(--groen); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 2px; }
.bi-pg-beeld.geen { background: #fff; }
.bi-pg-beeld.geen span { position: static; background: none; color: var(--mu); padding: 0; }
.bi-vast { height: 44px; display: flex; align-items: center; padding: 0 14px; background: var(--achter); border: 1px solid var(--lijn2); font-size: 14px; color: var(--i2); }
.bi-kiesbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; position: sticky; top: 0; z-index: 5; font-size: 13px; }
.bi-btn.rood { background: var(--rood); border-color: var(--rood); }
.bi-kiesbeelden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.bi-kiesbeelden button { aspect-ratio: 4 / 3; border: 1px solid var(--lijn); background: var(--zand) center / cover no-repeat; cursor: pointer; position: relative; padding: 0; border-radius: 2px; }
.bi-kiesbeelden button span { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.9); border: 1px solid var(--lijn); font-size: 12px; line-height: 16px; color: #fff; }
.bi-kiesbeelden button.gekozen { outline: 3px solid var(--rood); outline-offset: -3px; }
.bi-kiesbeelden button.gekozen span { background: var(--rood); border-color: var(--rood); }
.bi-tegel.kies { cursor: default; }
.bi-los.gekozen img { outline: 3px solid var(--rood); outline-offset: -3px; }
.bi-pg-afb summary { cursor: pointer; display: flex; align-items: center; gap: 10px; list-style: none; }
.bi-pg-afb summary::-webkit-details-marker { display: none; }
.bi-pg-afb summary::before { content: '▸'; color: var(--mu); }
.bi-pg-afb[open] summary::before { content: '▾'; }
.bi-pg-mini { width: 64px; height: 48px; border-radius: 2px; background: var(--achter) center / cover no-repeat; border: 1px solid var(--lijn); }
.bi-pagina-voorbeeld.kort { max-height: none; }
.bi-pagina-voorbeeld p { margin: 0 0 12px; }