/* Load.Live 1.6.1 (item 22) — Labels printen (A4-stickervellen) en Instellingen › Labels en printers. Cyaan = gekozen/te printen,
 * amber = "niet ingesteld", rood enkel voor fouten en Verwijderen (stijl 1.6.0). Het voorbeeld van het vel is een SVG in mm. */
.lb-twee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lb-rij { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.lb-rij > .veld { flex: 1 1 140px; }
.lb-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-sub { margin: 0; font: 600 14px/1.3 var(--body); }
.lb-codes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow: auto; }
.lb-codes li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: var(--r-pil); background: var(--vak); font-size: 14px; }
.lb-codes li b { font: 400 18px/1 var(--display); letter-spacing: .02em; }
.lb-codes .icoonknop { width: 28px; height: 28px; min-width: 28px; font-size: 18px; }
.lb-toevoegen { display: flex; gap: 8px; margin-top: 6px; }
.lb-toevoegen input { flex: 1; min-width: 0; }
.lb-vel { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.lb-blad { fill: #fff; stroke: var(--lijn-sterk); stroke-width: .6; }
.lb-plaats { cursor: pointer; }
.lb-plaats rect { fill: #fff; stroke: #9DB3AE; stroke-width: .5; }
.lb-plaats.druk rect { fill: color-mix(in srgb, var(--accent) 22%, #fff); stroke: var(--accent); stroke-width: .8; }
.lb-plaats.start rect { stroke-width: 1.6; }
.lb-plaats.over rect { stroke: #9DB3AE; }
.lb-arc-lijn { stroke: #9DB3AE; stroke-width: 1.2; }
.lb-plaats text { fill: #0C1816; font-family: var(--display); pointer-events: none; }
.lb-plaats text.lb-nr { fill: #6b7f7b; font-family: var(--body); }
.lb-plaats:focus { outline: none; }
.lb-plaats:focus-visible rect, .lb-plaats:hover rect { stroke: var(--focus); stroke-width: 1.4; }
.lb-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; justify-content: center; }
.lb-l { display: inline-block; width: 14px; height: 10px; border-radius: 2px; border: 1px solid #9DB3AE; background: #fff; vertical-align: middle; }
.lb-l.druk { background: color-mix(in srgb, var(--accent) 22%, #fff); border-color: var(--accent); }
.lb-l.over { background: repeating-linear-gradient(45deg, #9DB3AE 0 1.5px, #fff 1.5px 4px); }
.lb-reeksen { margin-top: 20px; }
.lb-kal { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.lb-kal legend { font: 600 14px/1.3 var(--body); padding: 0; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.lb-pijlen { width: 60px; height: 60px; flex: none; }
.lb-pijl-vak { fill: none; stroke: var(--lijn-sterk); stroke-width: 1.5; }
.lb-pijl { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lb-pijl-t { fill: var(--zacht); font-family: var(--body); }
.lb-nadruk { margin: 0; font-weight: 600; }
.lb-inst { margin-bottom: 20px; }
@media (max-width: 860px) { .lb-twee { grid-template-columns: 1fr; } }

/* 1.6.2.2 — opmaak van de labels en logo (Instellingen › Labels en printers). Cyaan = gekozen; amber = melding; rood enkel fouten. */
#lb-opmaak { display: grid; gap: 16px; }
.lo-kaart { display: grid; gap: 12px; }
.lo-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.lo-pillen .pil { min-height: 36px; padding: 6px 14px; border-radius: var(--r-pil); border: 1px solid var(--lijn-sterk); background: var(--vak); color: var(--tekst); font: 600 14px/1.2 var(--body); cursor: pointer; }
.lo-pillen .pil.actief { background: var(--accent-zacht); border-color: var(--accent); }
.lo-pillen .pil:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lo-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .lo-twee { grid-template-columns: minmax(0, 1fr); } }
.lo-velden { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.lo-velden li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 8px; padding: 6px 8px; border-radius: 8px; background: var(--vak); }
.lo-velden li.uit { opacity: .6; }
.lo-velden li.lo-qr { grid-template-columns: minmax(0, 1fr) auto; }
.lo-velden .vink { margin: 0; min-width: 0; }
.lo-velden select { width: auto; min-width: 92px; }
.lo-velden .lo-tekst { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.lo-kaart input[type="range"] { accent-color: var(--accent); width: 100%; }
.lo-naam { font-weight: 600; }
.lo-pijlen { display: inline-flex; gap: 4px; }
.lo-pijlen .icoonknop { width: 32px; height: 32px; min-width: 32px; }
.lo-voorbeeld { margin: 0; padding: 12px; border-radius: 10px; background: var(--vak); display: grid; gap: 8px; justify-items: center; }
.lo-png { display: block; height: auto; image-rendering: pixelated; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px var(--lijn-sterk); }
.lo-pdf { width: 100%; aspect-ratio: 70 / 37; min-height: 160px; border: 0; background: #fff; border-radius: 4px; }
.lo-melding { margin: 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--let) 14%, transparent); }
/* 1.6.2.3 — los label: het tekstveld staat vóór de grootte */
#ll-form .lo-velden li { grid-template-columns: minmax(0, 1fr) auto auto; }
#ll-form .lo-velden .lo-tekst { grid-column: auto; grid-row: auto; }