* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #F3F4F7;
  --surface: #FFFFFF;
  --surface-hi: #EEF0F5;
  --border: rgba(0,0,0,0.07);
  --border-hi: rgba(0,0,0,0.13);
  --text: #1C2033;
  --muted: #6B7385;
  --accent: #4F8EF7;
  --accent-dk: #2563EB;
  --success: #22C55E;
  --warn: #F59E0B;
  --danger: #EF4444;
  --sidebar-w: 304px;
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  display: block;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

/* ── SIDEBAR ─────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hi) transparent;
}

.sidebar-top {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.tool-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--accent);
  margin-bottom: 7px;
}

.tool-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.5px;
}

.tool-name em {
  color: var(--accent);
  font-style: normal;
}

.tool-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 5px;
  font-weight: 400;
}

.sidebar-body {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 1;
}

/* ── SECTION ─────────────────────────────────────── */
.section { display: flex; flex-direction: column; gap: 9px; }

.sec-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── BUTTONS ──────────────────────────────────────── */
.btn-row { display: flex; gap: 6px; }

.btn-primary {
  flex: 1;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 9px;
  padding: 11px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, box-shadow 0.14s;
  text-align: left;
}
.btn-primary:hover { background: #3B78D4; box-shadow: 0 0 0 3px rgba(79,142,247,0.18); }
.btn-primary.active { background: var(--warn); color: #1A1000; }

.btn-ghost {
  background: var(--surface-hi);
  color: var(--muted);
  border: 1px solid var(--border-hi);
  border-radius: 9px;
  padding: 11px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.14s;
}
.btn-ghost:hover { color: var(--text); border-color: rgba(0,0,0,0.28); }

/* ── FORMAT PICKER ───────────────────────────────── */
.format-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.fmt-btn {
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  border-radius: 9px;
  padding: 8px 4px 7px;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  line-height: 1.1;
}

.fmt-icon {
  background: var(--border-hi);
  border-radius: 2px;
  transition: background 0.14s;
  display: block;
}

.fmt-btn[data-key="A4-portrait"] .fmt-icon  { width: 17px; height: 24px; }
.fmt-btn[data-key="A4-landscape"] .fmt-icon { width: 24px; height: 17px; }
.fmt-btn[data-key="A3-portrait"] .fmt-icon  { width: 17px; height: 24px; }
.fmt-btn[data-key="A3-landscape"] .fmt-icon { width: 24px; height: 17px; }

.fmt-btn:hover { border-color: var(--accent); color: var(--text); }
.fmt-btn:hover .fmt-icon { background: rgba(79,142,247,0.2); }
.fmt-btn.active { border-color: var(--accent); color: var(--text); background: rgba(79,142,247,0.08); }
.fmt-btn.active .fmt-icon { background: rgba(79,142,247,0.3); }

.format-chooser {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}
.orientation-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.orient-btn {
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  border-radius: 9px;
  padding: 9px 8px;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.orient-btn:hover { border-color: var(--accent); color: var(--text); }
.orient-btn.active { border-color: var(--accent); color: var(--text); background: rgba(79,142,247,0.08); }
.orient-icon { display:block; background: var(--border-hi); border-radius: 2px; }
.orient-btn.active .orient-icon { background: rgba(79,142,247,0.3); }
.orient-icon.portrait { width: 12px; height: 18px; }
.orient-icon.landscape { width: 18px; height: 12px; }


.export-style-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.export-style-btn {
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  border-radius: 9px;
  padding: 9px 8px;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s;
  text-align: center;
}
.export-style-btn:hover { border-color: var(--accent); color: var(--text); }
.export-style-btn.active { border-color: var(--accent); color: var(--text); background: rgba(79,142,247,0.08); }
.export-style-help {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

/* ── FORM ─────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }

.form-group label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

input[type="text"] {
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.14s;
  width: 100%;
}
input[type="text"]:focus { border-color: var(--accent); }
input[type="text"]::placeholder { color: var(--muted); }

select {
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  outline: none;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.14s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7385' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select:focus { border-color: var(--accent); }

input[type="file"] {
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  width: 100%;
  cursor: pointer;
}

/* ── LAYER SELECTS ─────────────────────────────────── */
.layer-selects {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.layer-selects .form-group { gap: 4px; }
select option:disabled { color: #9CA3AF; }
.ahn-check-note {
  background: rgba(79,142,247,0.07);
  border: 1px solid rgba(79,142,247,0.16);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: rgba(37,99,235,0.86);
  line-height: 1.45;
}
.ahn-check-note.warn {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.22);
  color: #92400E;
}
.ahn-check-note.error {
  background: rgba(239,68,68,0.09);
  border-color: rgba(239,68,68,0.22);
  color: #B91C1C;
}

/* ── CLASSES GRID ─────────────────────────────────── */
.classes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.cls-btn {
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  border-radius: 7px;
  padding: 7px 4px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s;
  text-align: center;
}
.cls-btn:hover { border-color: var(--accent); color: var(--text); }
.cls-btn.active { border-color: var(--accent); background: rgba(79,142,247,0.1); color: var(--text); }

.palette-bar {
  height: 7px;
  border-radius: 3.5px;
  margin-top: 4px;
}

/* ── TOGGLE ───────────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
}

.toggle-text {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}

.toggle-sw {
  position: relative;
  width: 38px;
  height: 21px;
}
.toggle-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-sw .sl {
  position: absolute;
  inset: 0;
  background: var(--border-hi);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-sw .sl::before {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-sw input:checked + .sl { background: var(--accent); }
.toggle-sw input:checked + .sl::before { transform: translateX(17px); }

/* ── AREA INFO ────────────────────────────────────── */
.area-info {
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.75;
}
.area-info strong { color: var(--text); }

.instruction {
  background: rgba(79,142,247,0.07);
  border: 1px solid rgba(79,142,247,0.18);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 11.5px;
  color: rgba(79,142,247,0.85);
  line-height: 1.5;
}


/* ── PROJECTGEBIED ───────────────────────────────── */
.project-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.project-style-grid .form-group { gap: 4px; }
input[type="color"] {
  width: 100%;
  height: 34px;
  padding: 2px;
  border: 1.5px solid var(--border-hi);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.range-val {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
}
.project-style-grid.is-hidden { display: none; }
.project-edit-marker {
  width: 11px; height: 11px; border-radius: 50%;
  background: #FFFFFF; border: 2px solid var(--accent);
  box-shadow: 0 1px 5px rgba(0,0,0,0.35);
}
.project-edit-midmarker {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.88); border: 2px dashed var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* ── STATUS ───────────────────────────────────────── */
.status-box {
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}
.status-box.loading { background: rgba(79,142,247,0.09); color: #1D4ED8; border: 1px solid rgba(79,142,247,0.22); }
.status-box.error   { background: rgba(239,68,68,0.09); color: #B91C1C; border: 1px solid rgba(239,68,68,0.22); }
.status-box.success { background: rgba(34,197,94,0.09); color: #15803D; border: 1px solid rgba(34,197,94,0.22); }

/* ── GENERATE BTN ─────────────────────────────────── */
.btn-generate {
  width: 100%;
  background: linear-gradient(135deg, #4F8EF7 0%, #2563EB 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: all 0.15s;
  box-shadow: 0 4px 18px rgba(37,99,235,0.3);
}
.btn-generate:hover:not(:disabled) { box-shadow: 0 6px 24px rgba(37,99,235,0.45); transform: translateY(-1px); }
.btn-generate:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn-generate:disabled { background: var(--surface-hi); color: var(--muted); box-shadow: none; cursor: not-allowed; }

/* ── PREVIEW ──────────────────────────────────────── */
.preview-frame {
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-hi);
  position: relative;
}
#previewCanvas {
  display: block;
  width: 100%;
  height: auto;
}
.preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-hi);
  font-family: 'DM Mono', monospace;
}

/* ── PAKKET MODAL ─────────────────────────────────── */
#pakketModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
#pakketModal.vis { display: flex; }

.pakket-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pakket-controls { display: flex; gap: 6px; }

.pakket-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
  user-select: none;
}
.pakket-item:hover { background: var(--surface-hi); }
.pakket-item input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--accent);
  width: 15px; height: 15px;
  flex-shrink: 0;
}

.pakket-sub {
  padding-left: 34px;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: -6px;
}

.progress-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 3px 0;
  color: var(--text);
}
.progress-item .prog-msg {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
}

/* ── MAP ──────────────────────────────────────────── */
/* Kaart vult het volledige scherm. Sidebar is verborgen. */
#map { position: fixed; inset: 0; z-index: 0; }

/* ── LEAFLET EXTRA CONTROLS: zoeken, basemap, overzichtskaart ───────── */
.leaflet-top.leaflet-left { top: 58px; }
.p2k-search-control {
  position: relative;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.20);
  border-radius: 4px;
  box-shadow: none;
  padding: 0;
  display: flex;
  gap: 5px;
  align-items: center;
  width: 34px;
  min-height: 34px;
  overflow: visible;
  transition: width 0.16s ease, box-shadow 0.16s ease;
}
.p2k-search-control.is-open { width: min(340px, calc(100vw - 30px)); }
@media (hover: hover) and (pointer: fine) {
  .p2k-search-control:hover { width: min(340px, calc(100vw - 30px)); }
}
.p2k-search-toggle {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 3px;
  background: #fff;
  color: #111827;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 32px;
  text-align: center;
  padding: 0;
}
.p2k-search-control input {
  flex: 1;
  min-width: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 7px;
  padding: 8px 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  outline: none;
  transition: opacity 0.12s ease;
}
.p2k-search-control.is-open input { width: auto; opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .p2k-search-control:hover input { width: auto; opacity: 1; pointer-events: auto; }
}
.p2k-search-submit {
  border: 0;
  border-radius: 3px;
  background: #1e3a8a;
  color: #fff;
  padding: 8px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: none;
}
.p2k-search-control.is-open .p2k-search-submit { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .p2k-search-control:hover .p2k-search-submit { display: inline-block; }
}
.p2k-search-control .p2k-search-msg {
  position: absolute;
  left: 4px;
  right: 4px;
  top: calc(100% + 4px);
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  color: var(--muted);
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  display: none;
}
.p2k-overview-control {
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.16);
  padding: 6px;
}
#p2kOverviewMap {
  width: 176px;
  height: 116px;
  border-radius: 7px;
  overflow: hidden;
  background: #EEF0F5;
}
#p2kOverviewMap .leaflet-control-container { display: none; }
.p2k-overview-rect {
  fill: rgba(79,142,247,0.12);
  stroke: #2563EB;
  stroke-width: 2;
}
@media (max-width: 760px) {
  .p2k-search-control { width: 34px; padding: 0; }
  .p2k-search-control.is-open { width: min(320px, calc(100vw - 22px)); }
  .p2k-search-control input { font-size: 13px; padding: 7px 8px; }
  #p2kOverviewMap { width: 132px; height: 88px; }
}


/* ── MODAL ────────────────────────────────────────── */
#modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
#modal.vis { display: flex; }

.modal-inner {
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-hi);
  animation: popIn 0.28s cubic-bezier(.22,1,.36,1);
}
@keyframes popIn { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-hdr {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}

.modal-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  color: var(--text);
}

.modal-actions { display: flex; gap: 8px; align-items: center; }

.btn-dl {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 15px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s;
  white-space: nowrap;
}
.btn-dl:hover { background: var(--accent-dk); }

.modal-close {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--muted);
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.14s;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--text); border-color: rgba(0,0,0,0.28); }

.modal-canvas-wrap {
  overflow: auto;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  background: #D8DCE6;
}

#exportCanvas {
  display: block;
  max-width: 100%;
  height: auto;
  box-shadow: 0 8px 48px rgba(0,0,0,0.6);
}

.modal-canvas-wrap.fit-height {
  align-items: center;
}

.modal-canvas-wrap.fit-height #exportCanvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(92vh - 150px);
  cursor: zoom-in;
}

.modal-canvas-wrap.zoomed {
  align-items: flex-start;
  justify-content: flex-start;
}

.modal-canvas-wrap.zoomed #exportCanvas {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

.modal-ftr {
  padding: 11px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
}

.modal-stats {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.7;
}
.modal-stats strong { color: var(--text); }

.info-toggle {
  width: 32px;
  flex: 0 0 32px;
  text-align: center;
  font-weight: 700;
}
.file-hidden { display: none; }
.project-actions .btn-primary,
.project-actions .btn-ghost { text-align: center; }

.exact-toggle-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inline-info-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  background: var(--surface-hi);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.14s;
}
.inline-info-btn:hover,
.inline-info-btn.active {
  color: var(--text);
  border-color: rgba(0,0,0,0.28);
  background: var(--surface);
}
.extent-help {
  background: rgba(79,142,247,0.07);
  border: 1px solid rgba(79,142,247,0.18);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 11.5px;
  color: rgba(37,99,235,0.88);
  line-height: 1.5;
}


/* ── PROGRESSIEVE DISCLOSURE ──────────────────────── */
.step-dots { display:flex; gap:6px; margin-bottom:2px; }
.step-dot { width:7px; height:7px; border-radius:50%; background:var(--border-hi); transition:background .2s; }
.step-dot.active { background:var(--accent); }
.step-dot.done { background:var(--success); }

.step-summary {
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border-hi);
  border-radius:9px; padding:9px 12px;
}
.step-summary-title { font-size:12px; font-weight:600; color:var(--text); }
.step-summary-sub { font-size:11px; color:var(--muted); margin-top:2px; }
.step-edit-btn {
  background:none; border:none; color:var(--muted); font-size:14px;
  cursor:pointer; padding:2px 4px; flex-shrink:0; transition:color .12s;
}
.step-edit-btn:hover { color:var(--text); }

/* ── MEER-MENU ─────────────────────────────────────── */
.more-btn { min-width:44px; text-align:center; font-size:16px; letter-spacing:2px; flex-shrink:0; }
.more-menu {
  background:var(--surface); border:1px solid var(--border-hi);
  border-radius:9px; overflow:hidden; margin-top:4px;
}
.more-menu-item {
  display:block; width:100%; background:none; border:none;
  text-align:left; padding:10px 14px;
  font-family:'DM Sans', sans-serif; font-size:12.5px; color:var(--text);
  cursor:pointer; transition:background .1s;
}
.more-menu-item:hover { background:var(--surface-hi); }
.more-menu-item:disabled { color:var(--muted); cursor:not-allowed; }
.more-menu-divider { height:1px; background:var(--border); margin:2px 0; }

/* ── LAAG BEVESTIG BTN ─────────────────────────────── */
#btnConfirmLaag { display:flex; justify-content:center; }


/* ── MOBIEL ─────────────────────────────────────────
   Mobiel = kaart blijft hoofdbeeld, instellingen als bottom sheet.
   Dit voorkomt dat de 304px sidebar de kaart wegdrukt op kleine schermen. */
/* ── MOBIEL ─────────────────────────────────────────
   Sidebar is verborgen; layout is altijd full-screen kaart.
   Alleen modal krijgt iets kleinere randen op mobiel.    */
@media (max-width: 760px) {
  .modal-inner {
    max-width: 96vw;
    max-height: 94dvh;
    border-radius: 12px;
  }
  .modal-hdr,
  .modal-ftr {
    padding: 10px 12px;
    flex-wrap: wrap;
  }
  .modal-title { font-size: 15px; }
  .modal-actions { gap: 6px; flex-wrap: wrap; }
  .btn-dl { font-size: 12px; padding: 8px 10px; }
  .modal-canvas-wrap { padding: 8px; align-items: flex-start; }
  #exportCanvas { max-width: none; width: auto; max-height: none; }
}

/* Blok 12: printframe-handles */
.print-frame-resize-handle {
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid #2563EB;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
}
.print-frame-resize-handle {
  border-radius: 3px;
  cursor: nwse-resize;
}
.print-frame-resize-handle.ne,
.print-frame-resize-handle.sw {
  cursor: nesw-resize;
}
.print-frame-resize-handle.nw,
.print-frame-resize-handle.se {
  cursor: nwse-resize;
}
.print-frame-extent-path {
  cursor: grab;
}
.leaflet-container.is-print-frame-moving,
.leaflet-container.is-print-frame-moving .print-frame-extent-path {
  cursor: move;
}
.print-frame-drag-hint {
  color: #1E3A8A;
  font-size: 12px;
  font-weight: 600;
}
.print-frame-delete-handle {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid #2563EB;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1E3A8A;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.32);
}
.print-frame-delete-handle:hover {
  transform: scale(1.06);
}


/* Blok 12b: schaalweergave op het printframe */
.print-frame-scale-label {
  display: inline-block;
  max-width: 620px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #2563EB;
  background: rgba(255, 255, 255, 0.94);
  color: #1E3A8A;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  pointer-events: none;
  transform: translateY(-2px);
}


.print-frame-preview-note {
  font-size: 11px;
  opacity: 0.8;
  font-weight: 400;
}

.print-frame-scale-label {
  line-height: 1.35;
}


/* Blok 12g: schematische kaartblad-preview binnen het printframe */
.print-frame-layout-preview-box {
  pointer-events: none;
}

.print-frame-layout-preview-label {
  min-width: 54px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(30, 64, 175, 0.26);
  color: #1E3A8A;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  white-space: nowrap;
  pointer-events: none;
}

.print-frame-layout-preview-label.north-zone {
  min-width: 18px;
  width: 22px;
  height: 22px;
  padding: 2px;
  border-radius: 999px;
  font-size: 13px;
}

.print-frame-layout-preview-label.margin {
  display: none;
}

/* Blok 12h-fix: echte layout-preview als SVG binnen het printframe.
   Dit voorkomt dat losse Leaflet-rectangles achter een transparante plaat verdwijnen. */
.print-frame-layout-svg-overlay,
.print-frame-layout-svg {
  pointer-events: none;
}

.print-frame-layout-svg-rect {
  fill: rgba(255, 255, 255, 0.18);
  stroke: rgba(30, 64, 175, 0.68);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.print-frame-layout-svg-rect.margin {
  fill: none;
  stroke: rgba(30, 64, 175, 0.45);
}

.print-frame-layout-svg-rect.header-zone {
  fill: rgba(255, 255, 255, 0.22);
  stroke: rgba(30, 64, 175, 0.30);
}

.print-frame-layout-svg-rect.legend-zone,
.print-frame-layout-svg-rect.north-scale-zone,
.print-frame-layout-svg-rect.title-zone,
.print-frame-layout-svg-rect.logo-zone {
  fill: rgba(255, 255, 255, 0.38);
  stroke: rgba(30, 64, 175, 0.78);
}

.print-frame-layout-svg-text {
  fill: #1E3A8A;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(255,255,255,0.9);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.print-frame-layout-svg-text.north-scale-zone {
  font-size: 10px;
}

/* Blok 12j: compacte layoutschakelaars */
.layout-mini-controls {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.58);
}

.mini-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.layout-swap-btn {
  width: 100%;
  justify-content: center;
  font-size: 12px;
  padding: 7px 8px;
}

.layout-align-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 5px;
  align-items: center;
  font-size: 12px;
}

.layout-title-align-btn {\n  padding: 6px 6px;\n  font-size: 11px;\n}\n\n.layout-carto-style-row {\n  display: grid;\n  grid-template-columns: auto 1fr 1fr 1fr;\n  gap: 5px;\n  align-items: center;\n  font-size: 12px;\n}\n\n.layout-carto-style-label {\n  font-size: 11px;\n  color: var(--muted);\n  white-space: nowrap;\n}\n\n.layout-carto-style-btn {\n  padding: 6px 4px;\n  font-size: 11px;\n}\n\n.layout-carto-style-btn.active {\n  border-color: var(--accent);\n  background: rgba(37, 99, 235, 0.10);\n  color: var(--accent);\n}

.layout-title-align-btn.active,
.layout-swap-btn.active {
  border-color: var(--accent);
  background: rgba(37, 99, 235, 0.10);
  color: var(--accent);
}

/* Blok 12k: printframe-toolbar en status in het frame */
.print-frame-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(37,99,235,0.28);
  box-shadow: 0 8px 24px rgba(15,23,42,0.16);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  pointer-events: auto;
}
.pf-tool-btn,
.pf-export-btn {
  appearance: none;
  border: 1px solid rgba(37,99,235,0.24);
  background: rgba(255,255,255,0.86);
  color: #1E3A8A;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}
.pf-tool-btn:hover,
.pf-export-btn:hover {
  background: #EFF6FF;
  border-color: rgba(37,99,235,0.5);
}
.pf-tool-btn.active {
  background: #2563EB;
  color: #fff;
  border-color: #2563EB;
}
.pf-tool-icon {
  width: 26px;
  padding-left: 0;
  padding-right: 0;
}
.pf-export-btn {
  background: #111827;
  color: #fff;
  border-color: #111827;
  padding-left: 13px;
  padding-right: 13px;
}
.pf-export-btn:hover { background: #0F172A; }
.pf-tool-label {
  font-size: 11px;
  color: #475569;
  font-weight: 700;
  padding: 0 2px 0 4px;
}

.pf-title-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #475569;
  font-weight: 700;
}
.pf-title-inline input {
  width: 132px;
  border: 1px solid rgba(37,99,235,0.22);
  background: rgba(248,250,252,0.95);
  color: #0F172A;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
  outline: none;
}
.pf-title-inline input:focus {
  border-color: rgba(37,99,235,0.65);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
  background: #fff;
}

.pf-tool-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(100,116,139,0.25);
  margin: 0 2px;
}
.print-frame-status-overlay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(15,23,42,0.82);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 32px rgba(15,23,42,0.22);
  backdrop-filter: blur(7px);
  text-align: center;
}
.print-frame-status-overlay.error { background: rgba(127,29,29,0.88); }
.print-frame-status-overlay.success { background: rgba(20,83,45,0.88); }
.pf-status-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  animation: pfSpin 0.8s linear infinite;
  flex: 0 0 auto;
}
.print-frame-status-overlay.success .pf-status-spinner,
.print-frame-status-overlay.error .pf-status-spinner {
  display: none;
}
@keyframes pfSpin { to { transform: rotate(360deg); } }

/* De oude zijpaneel-layoutknoppen blijven technisch bestaan, maar de primaire
   bediening hangt vanaf 12k aan het printframe. */
.layout-mini-controls {
  display: none;
}

/* Blok 13a: compacte definitieve frame-toolbar */
.print-frame-toolbar.pf-toolbar-v2 {
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  max-width: min(820px, calc(100vw - 32px));
  white-space: nowrap;
}
.pf-select {
  appearance: none;
  border: 1px solid rgba(37,99,235,0.24);
  background: rgba(255,255,255,0.9);
  color: #1E3A8A;
  border-radius: 999px;
  padding: 5px 24px 5px 10px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.pf-select:hover,
.pf-select:focus {
  border-color: rgba(37,99,235,0.55);
  outline: none;
  background-color: #EFF6FF;
}
.pf-select-paper { min-width: 74px; }
.pf-select-mode { min-width: 104px; }
.pf-orientation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(241,245,249,0.9);
  border: 1px solid rgba(148,163,184,0.22);
}
.pf-orientation-toggle .pf-tool-icon {
  width: auto;
  min-width: 50px;
  padding-left: 8px;
  padding-right: 8px;
}
.pf-orientation-toggle.is-disabled {
  opacity: .55;
}
.print-frame-toolbar.pf-toolbar-v2 .pf-tool-sep {
  width: 1px;
  height: 22px;
  background: rgba(148,163,184,0.35);
  margin: 0 2px;
}
@media (max-width: 760px) {
  .print-frame-toolbar.pf-toolbar-v2 {
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 12px;
  }
  .pf-select-mode { min-width: 92px; }
  .pf-orientation-toggle .pf-tool-icon { min-width: 42px; }
}

/* Blok 13b: frame als primaire werkplek */
.pf-toolbar-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
}
.print-frame-toolbar.pf-toolbar-v2 {
  max-width: min(980px, calc(100vw - 32px));
}
.pf-select-layer { min-width: 168px; }
.pf-ahn-toolbar {
  transform: scale(.96);
  transform-origin: top center;
  background: rgba(255,255,255,0.86);
}
.print-frame-topbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(37,99,235,0.22);
  box-shadow: 0 8px 28px rgba(15,23,42,0.16);
  pointer-events: auto;
  white-space: nowrap;
}
.pf-title-top-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(248,250,252,0.96);
  font-size: 11px;
  font-weight: 800;
  color: #334155;
}
.pf-title-top-input input {
  width: 190px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
  color: #0f172a;
}
.print-frame-side-toolbar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(37,99,235,0.22);
  box-shadow: 0 8px 28px rgba(15,23,42,0.16);
  pointer-events: auto;
}
.pf-side-btn {
  border: 1px solid rgba(148,163,184,0.32);
  background: rgba(248,250,252,.96);
  color: #334155;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  padding: 6px 7px;
  cursor: pointer;
}
.pf-side-btn:hover,
.pf-side-btn.active {
  background: #EFF6FF;
  border-color: rgba(37,99,235,0.45);
  color: #1E3A8A;
}
.pf-export-menu {
  position: relative;
}
.pf-export-menu summary {
  list-style: none;
}
.pf-export-menu summary::-webkit-details-marker { display: none; }
.pf-export-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 190px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 14px 36px rgba(15,23,42,0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 99999;
}
.pf-export-popover label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}
.pf-export-popover select {
  border: 1px solid rgba(148,163,184,0.45);
  border-radius: 8px;
  padding: 4px 7px;
  font-size: 11px;
  background: #fff;
}
.pf-export-action {
  border: 0;
  border-radius: 10px;
  background: #2563EB;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

.pf-export-action-secondary {
  background: #fff;
  color: #1e3a8a;
  border: 1px solid rgba(30,58,138,0.28);
}
.pf-export-action-secondary:hover {
  background: rgba(30,58,138,0.07);
}
.pf-export-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #E5E7EB;
  color: #64748B;
  border-color: rgba(100,116,139,0.20);
}

@media (max-width: 900px) {
  .pf-select-layer { min-width: 132px; }
  .print-frame-topbar { max-width: calc(100vw - 20px); overflow-x: auto; }
  .pf-title-top-input input { width: 140px; }
}

/* Blok 13c echt: toolbar-hiërarchie en strakkere vormgeving */
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean {
  align-items: flex-end;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  max-width: min(1160px, calc(100vw - 28px));
  background: rgba(255,255,255,0.95);
  border-color: rgba(100,116,139,0.32);
}
.pf-tool-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.pf-tool-group-label {
  font-size: 9px;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-weight: 800;
  color: #64748B;
  padding-left: 1px;
}
.pf-tool-group-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-select,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-export-btn {
  border-radius: 4px;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-orientation-toggle {
  border-radius: 4px;
  padding: 0;
  gap: 0;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-orientation-toggle .pf-tool-btn {
  border-radius: 3px;
  margin: 1px;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn {
  padding: 6px 8px;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-select {
  padding-top: 6px;
  padding-bottom: 6px;
}
.pf-group-overlays .pf-tool-group-controls {
  padding: 3px;
  border: 1px solid rgba(148,163,184,0.26);
  background: rgba(248,250,252,0.72);
  border-radius: 5px;
}
.pf-group-overlays .pf-tool-btn {
  border-color: rgba(148,163,184,0.32);
  color: #334155;
}
.pf-preview-floating {
  border: 1px solid rgba(100,116,139,0.32);
  background: rgba(255,255,255,0.92);
  color: #334155;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(15,23,42,0.15);
  cursor: pointer;
  pointer-events: auto;
}
.pf-preview-floating.active {
  background: #EFF6FF;
  border-color: rgba(37,99,235,0.48);
  color: #1D4ED8;
}
.print-frame-side-toolbar {
  border-radius: 6px;
  align-items: stretch;
}
.pf-side-heading,
.pf-side-subheading {
  font-size: 9px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 900;
  color: #64748B;
  text-align: center;
  padding: 2px 0 1px;
}
.pf-side-subheading {
  margin-top: 4px;
}
.pf-side-btn {
  border-radius: 4px;
  min-width: 56px;
}
.pf-export-popover {
  border-radius: 6px;
}
.pf-export-action {
  border-radius: 4px;
}
.pf-project-toolbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(100,116,139,0.30);
  box-shadow: 0 8px 24px rgba(15,23,42,0.15);
  font-size: 11px;
  font-weight: 800;
  color: #334155;
}
.pf-project-toolbox label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #475569;
}
.pf-project-toolbox input[type="color"] {
  width: 28px;
  height: 24px;
  border: 1px solid rgba(148,163,184,0.45);
  border-radius: 4px;
  padding: 0;
  background: #fff;
}
.pf-project-toolbox select {
  border: 1px solid rgba(148,163,184,0.45);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  background: #fff;
}
@media (max-width: 1050px) {
  .print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean {
    align-items: flex-end;
    overflow-x: auto;
    justify-content: flex-start;
  }
}

/* 13c reparatie: spacing, consistente states en frame-bediening */
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 8px 10px;
  width: min(1160px, calc(100vw - 30px));
  max-width: min(1160px, calc(100vw - 30px));
  white-space: normal;
  overflow: visible;
  padding: 8px 10px;
}
.pf-toolbar-stack {
  width: min(1180px, calc(100vw - 30px));
  align-items: center;
}
.pf-tool-group {
  flex: 0 0 auto;
  margin: 0;
}
.pf-tool-group-controls {
  flex-wrap: nowrap;
}
.pf-group-layer .pf-select-layer { min-width: 190px; }
.pf-group-format .pf-select-paper { min-width: 76px; }
.pf-group-mode .pf-select-mode { min-width: 132px; }

.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-select,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-export-btn,
.pf-side-btn,
.pf-preview-inline,
.pf-preview-floating,
.print-frame-topbar .pf-tool-btn,
.pf-project-toolbox .pf-tool-btn {
  border-radius: 3px;
}

/* Eén actieve stijl, zonder witte tekst, zodat knoppen niet meer door elkaar ogen. */
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn.active,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-icon.active,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-select:focus,
.pf-side-btn.active,
.pf-preview-inline.active,
.pf-preview-floating.active,
.print-frame-topbar .pf-tool-btn.active,
.pf-project-toolbox .pf-tool-btn.active {
  background: rgba(30,58,138,0.10);
  border-color: rgba(30,58,138,0.58);
  color: #1E3A8A;
  box-shadow: inset 0 0 0 1px rgba(30,58,138,0.08);
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn:hover,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-select:hover,
.pf-side-btn:hover,
.pf-preview-inline:hover,
.print-frame-topbar .pf-tool-btn:hover,
.pf-project-toolbox .pf-tool-btn:hover {
  border-color: rgba(30,58,138,0.45);
  color: #1E3A8A;
  background: rgba(239,246,255,0.95);
}

.print-frame-scale-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 740px;
  padding: 5px 7px 5px 10px;
  border-radius: 4px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(30,58,138,0.22);
  box-shadow: 0 6px 18px rgba(15,23,42,0.14);
  pointer-events: auto;
}
.pf-scale-label-text {
  min-width: 0;
  color: #1E3A8A;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}
.pf-preview-inline {
  flex: 0 0 auto;
  border: 1px solid rgba(100,116,139,0.32);
  background: rgba(255,255,255,0.92);
  color: #334155;
  padding: 5px 8px;
  font-size: 10.5px;
  font-weight: 900;
  cursor: pointer;
}
.print-frame-preview-note {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #64748B;
}

/* De losse preview-knop is vervangen door de knop in de infobalk. */
.pf-preview-floating { display: none; }

.pf-ahn-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(680px, calc(100vw - 30px));
}
.pf-ahn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 7px 9px;
  border-radius: 4px;
  transform: none;
}
.pf-ahn-toolbar .pf-tool-group-label {
  color: #64748B;
}
.pf-palette-preview {
  width: min(520px, calc(100vw - 80px));
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(100,116,139,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 3px 10px rgba(15,23,42,0.10);
}

.pf-project-toolbox {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
}
.pf-project-toolbox.is-visible {
  display: inline-flex;
}

@media (max-width: 760px) {
  .print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean,
  .pf-toolbar-stack {
    width: calc(100vw - 18px);
  }
  .print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .print-frame-scale-label {
    max-width: calc(100vw - 28px);
  }
  .pf-scale-label-text {
    font-size: 10px;
  }
}

/* 13c-fix-2: toolbar uitlijning, consistente actieve states en strakkere groepen */
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean {
  align-items: stretch !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  overflow: visible !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-group {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 4px !important;
  align-self: stretch !important;
  margin: 0 !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-group-label {
  height: 14px !important;
  line-height: 14px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: block !important;
  color: #5f7192 !important;
  letter-spacing: .055em !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-group-controls {
  min-height: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px !important;
  border: 1px solid #d7e2f4 !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.88) !important;
  box-sizing: border-box !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-orientation-toggle {
  display: flex !important;
  gap: 4px !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  min-height: unset !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-select,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-export-btn,
.pf-project-toolbox .pf-tool-btn,
.pf-preview-inline {
  border-radius: 3px !important;
  min-height: 28px !important;
  height: 28px !important;
  line-height: 1.1 !important;
  box-sizing: border-box !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn.active,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-select:focus,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-icon.active,
.pf-project-toolbox .pf-tool-btn.active,
.pf-preview-inline.active {
  background: #1f4f9a !important;
  border-color: #1f4f9a !important;
  color: #fff !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn.active *,
.pf-project-toolbox .pf-tool-btn.active * { color: #fff !important; }
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-select {
  background-color: #fff !important;
  color: #173b76 !important;
}
.pf-ahn-stack { margin-top: 5px !important; }
.pf-palette-preview {
  display: block !important;
  height: 12px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(35,55,90,.22) !important;
  margin: 3px 2px 0 !important;
}
.print-frame-side-toolbar {
  border-radius: 4px !important;
  gap: 5px !important;
}
.pf-side-heading,
.pf-side-subheading {
  color: #5f7192 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
}
.pf-side-btn {
  border-radius: 3px !important;
}
.pf-side-btn.active {
  background: #1f4f9a !important;
  border-color: #1f4f9a !important;
  color: #fff !important;
}
.pf-project-toolbox {
  border-radius: 4px !important;
  align-items: center !important;
}

/* 13c-reparatie-3: consistente toolbar, compacte menu's en betere dropdownruimte */
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean {
  align-items: stretch !important;
  gap: 8px !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-group {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-self: stretch !important;
  gap: 4px !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-group-label {
  height: 15px !important;
  min-height: 15px !important;
  line-height: 15px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: block !important;
  white-space: nowrap !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-group-controls {
  height: 34px !important;
  min-height: 34px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn.active,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-icon.active,
.pf-side-btn.active,
.pf-preview-inline.active,
.pf-project-toolbox .pf-tool-btn.active,
.pf-mode-choice.active {
  background: rgba(30,58,138,0.12) !important;
  border-color: rgba(30,58,138,0.62) !important;
  color: #1E3A8A !important;
  box-shadow: inset 0 0 0 1px rgba(30,58,138,0.08) !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn.active *,
.pf-project-toolbox .pf-tool-btn.active * { color: #1E3A8A !important; }

.pf-scale-label-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.print-frame-scale-label {
  gap: 8px !important;
}

.pf-toolbar-initial {
  width: auto !important;
  min-width: 280px;
}
.pf-toolbar-initial .pf-group-layer .pf-select-layer {
  min-width: 240px;
}

.pf-mode-menu,
.pf-export-menu {
  position: relative;
  overflow: visible;
}
.pf-mode-summary,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-export-btn {
  list-style: none;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(148,163,184,.55);
  background: #fff;
  color: #173b76;
  border-radius: 3px;
  min-height: 28px;
  height: 28px;
  padding: 6px 28px 6px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  box-sizing: border-box;
  position: relative;
}
.pf-mode-summary::after,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-export-btn::after {
  content: '▾';
  position: absolute;
  right: 8px;
  top: 6px;
  font-size: 10px;
  color: #1E3A8A;
}
.pf-mode-summary::-webkit-details-marker,
.pf-export-btn::-webkit-details-marker { display:none; }
.pf-mode-popover,
.pf-export-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 5000;
  min-width: 220px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(100,116,139,.35);
  box-shadow: 0 12px 30px rgba(15,23,42,.18);
  border-radius: 4px;
  padding: 8px;
}
.pf-export-popover {
  min-width: 190px;
}
.pf-mode-choice {
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  border: 1px solid rgba(148,163,184,.42);
  background: #fff;
  color: #1e293b;
  border-radius: 3px;
  padding: 8px;
  cursor: pointer;
  margin: 0 0 6px 0;
}
.pf-mode-choice:last-child { margin-bottom: 0; }
.pf-mode-choice strong { font-size: 12px; color: #173b76; }
.pf-mode-choice span { font-size: 10.5px; color: #64748b; font-weight: 700; }
.pf-export-popover label {
  display: grid;
  gap: 4px;
  margin: 0 0 8px 0;
  color: #475569;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pf-export-popover select {
  width: 100%;
  min-height: 28px;
  border: 1px solid rgba(148,163,184,.55);
  border-radius: 3px;
  background: #fff;
  color: #173b76;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 6px;
}
.pf-export-action {
  width: 100%;
  min-height: 30px;
  border-radius: 3px !important;
}

/* A4 kan geen inline legenda dragen; als de knop verdwijnt blijft de overlaygroep netjes compact. */
.pf-group-overlays .pf-tool-group-controls {
  min-width: max-content;
}

/* Projectgrens-toolbox moet echt bij de frame-toolbar horen, niet bij de zijbalk. */
.pf-project-toolbox.is-visible {
  display: inline-flex !important;
}
.pf-project-toolbox span {
  color: #5f7192;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 10px;
  font-weight: 900;
}

@media (max-width: 900px) {
  .pf-mode-popover,
  .pf-export-popover {
    left: auto;
    right: 0;
  }
}

/* Blok 14b: toolbars als gewone HTML-overlay boven de kaart, niet meer als Leaflet divIcon. */
/* #map is position:fixed (zie boven) — absolute children zijn ten opzichte van die container. */
.pf-map-overlay {
  position: absolute;
  z-index: 6000;
  pointer-events: auto;
  overflow: visible;
  max-width: min(1180px, calc(100vw - 32px));
}
.pf-map-overlay.is-empty {
  display: none !important;
}
.pf-map-overlay-toolbar {
  width: max-content;
}
.pf-map-overlay-topbar {
  width: max-content;
}
.pf-map-overlay-side {
  width: max-content;
}
.pf-map-overlay .pf-toolbar-stack,
.pf-map-overlay .print-frame-topbar,
.pf-map-overlay .print-frame-side-toolbar {
  pointer-events: auto;
}
.pf-map-overlay .pf-export-popover,
.pf-map-overlay .pf-mode-popover {
  z-index: 1300;
  top: auto;
  bottom: calc(100% + 6px);
}

/* Blok 14c: rustiger frame-UI met iconen en minimale eerste stap. */
.pf-map-overlay-overlays {
  width: max-content;
}
.print-frame-overlay-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 8px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148,163,184,0.55);
  box-shadow: 0 8px 22px rgba(15,23,42,0.16);
  border-radius: 6px;
  backdrop-filter: blur(8px);
}
.print-frame-overlay-toolbar .pf-side-heading {
  margin-bottom: 2px;
  text-align: center;
  font-size: 9px;
}
.pf-icon-btn {
  width: 32px !important;
  min-width: 32px !important;
  height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  border-radius: 4px !important;
  line-height: 1;
}
.pf-icon-btn.is-disabled,
.pf-icon-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.pf-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  color: currentColor;
}
.pf-icon-portrait::before,
.pf-icon-landscape::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 2px solid currentColor;
  border-radius: 2px;
}
.pf-icon-portrait::before { left: 5px; right: 5px; }
.pf-icon-landscape::before { top: 5px; bottom: 5px; }
.pf-icon-reference {
  background:
    linear-gradient(currentColor,currentColor) 50% 0/1px 100% no-repeat,
    linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat;
  border: 1px solid currentColor;
  opacity: .9;
}
.pf-icon-relief::before,
.pf-icon-relief::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  border-top: 2px solid currentColor;
  border-radius: 50%;
}
.pf-icon-relief::before { top: 5px; transform: rotate(-8deg); }
.pf-icon-relief::after { top: 11px; transform: rotate(7deg); }
.pf-icon-water {
  font-size: 25px;
  line-height: 14px;
  font-weight: 700;
  transform: translateY(-1px);
}
.pf-icon-buildings {
  font-size: 20px;
  line-height: 18px;
  font-weight: 700;
}
.pf-icon-legend::before {
  content: '';
  position: absolute;
  inset: 2px 1px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background:
    linear-gradient(currentColor,currentColor) 5px 4px/9px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 5px 8px/9px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 5px 12px/9px 1px no-repeat;
}
.pf-icon-legend::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 5px;
  width: 3px;
  height: 3px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-group-format .pf-tool-group-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-orientation-toggle {
  display: inline-flex;
  gap: 3px;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-mode-summary {
  min-width: 72px;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-group-label,
.print-frame-side-toolbar .pf-side-heading,
.print-frame-overlay-toolbar .pf-side-heading {
  color: #1E3A8A;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-select,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-export-btn,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-mode-summary,
.print-frame-side-toolbar .pf-side-btn,
.print-frame-overlay-toolbar .pf-tool-btn {
  border-radius: 4px !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-initial {
  padding: 10px 12px;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-initial .pf-tool-group {
  border: 0;
  background: transparent;
  padding: 0;
}
.print-frame-side-toolbar .pf-side-subheading {
  margin-top: 8px;
}
.print-frame-side-toolbar .pf-side-btn {
  min-width: 64px;
}
.print-frame-side-toolbar .pf-side-text-btn {
  min-width: 0;
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 4px;
  letter-spacing: 0.01em;
}

/* Blok 14d echt: overlaybalk verfijnd, DPI naar hoofdtoolbar en rustiger stijl. */
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean,
.print-frame-topbar,
.print-frame-side-toolbar,
.print-frame-overlay-toolbar,
.pf-project-toolbox,
.print-frame-scale-label {
  font-family: inherit !important;
  color: #213451;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean,
.print-frame-topbar,
.print-frame-side-toolbar,
.print-frame-overlay-toolbar {
  background: rgba(255,255,255,0.965) !important;
  border-color: rgba(121, 142, 171, 0.38) !important;
  box-shadow: 0 8px 22px rgba(25,39,65,0.13) !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-group-label,
.print-frame-side-toolbar .pf-side-heading,
.print-frame-side-toolbar .pf-side-subheading,
.print-frame-overlay-toolbar .pf-side-heading,
.pf-project-toolbox span {
  color: #60708a !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-select,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-export-btn,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-mode-summary,
.print-frame-side-toolbar .pf-side-btn,
.print-frame-overlay-toolbar .pf-tool-btn,
.pf-project-toolbox .pf-tool-btn,
.pf-preview-inline {
  border-color: rgba(130,148,174,.46) !important;
  color: #173b76 !important;
  background-color: #fff !important;
  font-weight: 800 !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-btn.active,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-icon.active,
.print-frame-side-toolbar .pf-side-btn.active,
.print-frame-overlay-toolbar .pf-tool-btn.active,
.pf-project-toolbox .pf-tool-btn.active,
.pf-preview-inline.active,
.pf-mode-choice.active {
  background: rgba(30,58,138,0.12) !important;
  border-color: rgba(30,58,138,0.62) !important;
  color: #1E3A8A !important;
  box-shadow: inset 0 0 0 1px rgba(30,58,138,0.08) !important;
}
.print-frame-overlay-toolbar {
  gap: 6px !important;
  padding: 7px !important;
}
.print-frame-overlay-toolbar .pf-icon-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 32px !important;
}
.pf-overlay-separator {
  height: 1px;
  margin: 3px 2px;
  background: rgba(100,116,139,.28);
}
.pf-icon-relief::before,
.pf-icon-relief::after {
  border-top-width: 2px !important;
  border-radius: 999px 999px 0 0 !important;
  transform: none !important;
}
.pf-icon-relief::before {
  left: 1px !important;
  right: 1px !important;
  top: 4px !important;
  height: 7px !important;
  border-top: 2px solid currentColor !important;
  border-left: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
}
.pf-icon-relief::after {
  left: 3px !important;
  right: 3px !important;
  top: 11px !important;
  height: 5px !important;
  border-top: 2px solid currentColor !important;
}
.pf-icon-project::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 2px;
  width: 4px;
  height: 16px;
  background: currentColor;
  border-radius: 2px;
  transform: rotate(38deg);
  transform-origin: center;
}
.pf-icon-project::after {
  content: '';
  position: absolute;
  left: 4px;
  bottom: 1px;
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 3px;
  transform: rotate(-20deg);
}
.pf-group-dpi .pf-select-dpi {
  min-width: 72px;
}
.pf-export-popover .pf-jpg-quality-row {
  margin-top: 0 !important;
}

/* Blok 14e: toolbars blijven binnen de zichtbare kaart en titel/logo worden framevelden. */
.pf-map-overlay-label {
  width: max-content;
  max-width: calc(100vw - 16px);
}
.pf-map-overlay-label .print-frame-scale-label {
  pointer-events: auto !important;
}
.pf-map-overlay-topbar {
  max-width: calc(100vw - 16px);
}
.print-frame-corner-fields {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  pointer-events: auto;
  width: 100%;
}
.pf-frame-title-chip,
.pf-frame-logo-chip {
  position: relative;
  min-height: 30px;
  max-width: min(280px, 42vw);
}
.pf-frame-chip-main,
.pf-frame-title-input {
  min-height: 30px;
  border: 1px solid rgba(121,142,171,.44);
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  color: #173b76;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(25,39,65,.12);
}
.pf-frame-chip-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  cursor: pointer;
}
.pf-frame-chip-main:hover,
.pf-frame-title-input:focus {
  border-color: rgba(30,58,138,.62);
  outline: none;
  box-shadow: 0 0 0 2px rgba(30,58,138,.10), 0 5px 14px rgba(25,39,65,.12);
}
.pf-frame-title-chip.has-value .pf-frame-chip-main,
.pf-frame-logo-chip.has-value .pf-frame-chip-main {
  background: rgba(30,58,138,.09);
  border-color: rgba(30,58,138,.50);
}
.pf-frame-title-input {
  width: min(270px, 42vw);
  padding: 5px 8px;
  background: rgba(255,255,255,.98);
}
.pf-chip-edit {
  opacity: .7;
  font-size: 12px;
  line-height: 1;
}
.pf-frame-logo-thumb {
  display: inline-block;
  width: 38px;
  height: 18px;
  border-radius: 2px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255,255,255,.8);
}
.pf-frame-logo-placeholder {
  display: inline-block;
}
.pf-frame-chip-clear {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(121,142,171,.55);
  background: #fff;
  color: #173b76;
  font-size: 13px;
  font-weight: 900;
  line-height: 14px;
  padding: 0;
  cursor: pointer;
}
.pf-frame-chip-clear:hover {
  background: #f8fafc;
  border-color: rgba(30,58,138,.62);
}

/* Blok 14f: kleine fixes titel/logo, dropdownlagen en verticale project-toolbox. */
.pf-map-overlay-toolbar { z-index: 1240; }
.pf-map-overlay-overlays { z-index: 1230; }
.pf-map-overlay-side { z-index: 1220; }
.pf-map-overlay-label { z-index: 1250; }
.pf-map-overlay-topbar { z-index: 1260; }


/* Blok 16i UI-fix: render-preview is alleen beeld, nooit interactielaag. */
.print-frame-render-preview,
.print-frame-render-preview img,
.leaflet-image-layer.print-frame-render-preview {
  pointer-events: none !important;
}

.pf-mode-menu[open],
.pf-export-menu[open] {
  z-index: 8000 !important;
}
.pf-mode-popover,
.pf-export-popover {
  z-index: 8100 !important;
}
.pf-ahn-stack,
.pf-ahn-toolbar,
.pf-palette-preview {
  position: relative;
  z-index: 1;
}

.print-frame-corner-fields {
  min-height: 32px;
}
.pf-frame-title-chip,
.pf-frame-logo-chip {
  display: inline-flex !important;
  align-items: flex-start;
}
.pf-frame-title-chip.has-value .pf-frame-chip-main,
.pf-frame-logo-chip.has-value .pf-frame-chip-main {
  width: 30px;
  min-width: 30px;
  height: 30px;
  justify-content: center;
  padding: 0;
}
.pf-frame-logo-chip.has-value .pf-frame-chip-main .pf-chip-edit,
.pf-frame-title-chip.has-value .pf-frame-chip-main .pf-chip-edit {
  opacity: .78;
  font-size: 14px;
}
.pf-frame-logo-placeholder,
.pf-frame-title-chip .pf-frame-chip-main span:not(.pf-chip-edit) {
  font-size: 12px;
  font-weight: 800;
}

.print-frame-overlay-toolbar .pf-project-toolbox-vertical {
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(100,116,139,.28);
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  align-items: stretch !important;
}
.pf-project-toolbox-vertical .pf-tool-btn,
.pf-project-toolbox-vertical .pf-project-icon-control {
  width: 34px !important;
  min-width: 34px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(121,142,171,.42) !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #173b76 !important;
  box-shadow: inset 0 0 0 1px rgba(30,58,138,0.08) !important;
  cursor: pointer;
  box-sizing: border-box;
}
.pf-project-toolbox-vertical .pf-tool-btn:hover,
.pf-project-toolbox-vertical .pf-project-icon-control:hover {
  background: #f8fbff !important;
  border-color: rgba(30,58,138,.48) !important;
}
.pf-project-toolbox-vertical .pf-tool-btn.active,
.pf-project-toolbox-vertical .pf-project-icon-control.active {
  background: rgba(30,58,138,0.12) !important;
  border-color: rgba(30,58,138,0.62) !important;
  color: #1E3A8A !important;
}
.pf-project-icon-control {
  position: relative;
  overflow: hidden;
}
.pf-project-icon-control input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
}
.pf-project-icon-control select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.pf-icon-draw,
.pf-icon-color,
.pf-icon-weight,
.pf-icon-edit,
.pf-icon-clear,
.pf-icon-upload {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-weight: 900;
}
.pf-icon-draw::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 1px;
  width: 4px;
  height: 15px;
  background: currentColor;
  border-radius: 2px;
  transform: rotate(38deg);
}
.pf-icon-draw::after {
  content: '';
  position: absolute;
  left: 3px;
  bottom: 1px;
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 3px;
  transform: rotate(-20deg);
}
.pf-icon-color::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.pf-icon-weight::before,
.pf-icon-weight::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  background: currentColor;
  border-radius: 999px;
}
.pf-icon-weight::before { top: 5px; height: 2px; }
.pf-icon-weight::after { top: 11px; height: 4px; }

/* Blok 14g: polish iconen, titel/logo timing en legenda-layout. */
.print-frame-overlay-toolbar .pf-tool-btn,
.print-frame-overlay-toolbar .pf-icon-btn,
.pf-project-toolbox-vertical .pf-tool-btn,
.pf-project-toolbox-vertical .pf-project-icon-control,
.print-frame-side-toolbar .pf-side-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.print-frame-overlay-toolbar .pf-icon,
.print-frame-side-toolbar .pf-icon,
.pf-project-toolbox-vertical .pf-icon {
  margin: 0 auto !important;
}

/* Projectgrens: hoofdknop als vijfhoek, tekentool blijft pennetje. */
.pf-icon-project::before,
.pf-icon-project::after {
  content: none !important;
}
.pf-icon-project {
  width: 20px !important;
  height: 20px !important;
}
.pf-icon-project::before {
  content: '' !important;
  position: absolute;
  left: 3px;
  top: 2px;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  background: transparent;
  border-radius: 2px;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  transform: none !important;
}

/* Project-toolbox: grotere symbolen in het vakje. */
.pf-project-toolbox-vertical .pf-icon-edit,
.pf-project-toolbox-vertical .pf-icon-clear,
.pf-project-toolbox-vertical .pf-icon-upload,
.pf-project-toolbox-vertical .pf-icon-draw,
.pf-project-toolbox-vertical .pf-icon-weight,
.pf-project-toolbox-vertical .pf-icon-color {
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  font-size: 22px !important;
}
.pf-project-toolbox-vertical .pf-icon-clear {
  font-size: 26px !important;
  line-height: 20px !important;
}
.pf-project-toolbox-vertical .pf-icon-upload {
  font-size: 24px !important;
  line-height: 20px !important;
}

/* Kleurknop toont de ingestelde projectkleur zelf. */
.pf-project-color-control .pf-icon-color::before {
  content: '' !important;
  position: absolute;
  inset: 3px;
  border-radius: 3px;
  border: 1px solid rgba(17,24,39,.35);
  background: var(--project-color, #000000) !important;
  transform: none !important;
}

/* Titel/logo: na invullen alleen een potloodje, geen woordlabel. */
.pf-frame-title-chip.has-value .pf-frame-chip-main,
.pf-frame-logo-chip.has-value .pf-frame-chip-main {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
}
.pf-chip-edit-only {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Layout-toolblok met iconen. */
.print-frame-side-toolbar .pf-side-icon-row {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.print-frame-side-toolbar .pf-side-btn.pf-icon-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  font-size: 15px !important;
}
.pf-icon-layout-split::before,
.pf-icon-layout-split::after,
.pf-icon-layout-compact::before,
.pf-icon-layout-compact::after,
.pf-icon-title-left::before,
.pf-icon-title-center::before,
.pf-icon-title-right::before {
  content: '';
  position: absolute;
  border: 1.8px solid currentColor;
  background: transparent;
  border-radius: 2px;
}
.pf-icon-layout-split::before { left: 1px; top: 4px; width: 6px; height: 10px; }
.pf-icon-layout-split::after { right: 1px; top: 4px; width: 6px; height: 10px; }
.pf-icon-layout-compact::before { left: 4px; top: 1px; width: 10px; height: 6px; }
.pf-icon-layout-compact::after { left: 4px; bottom: 1px; width: 10px; height: 7px; }
.pf-icon-title-left::before,
.pf-icon-title-center::before,
.pf-icon-title-right::before { top: 5px; width: 10px; height: 8px; }
.pf-icon-title-left::before { left: 1px; }
.pf-icon-title-center::before { left: 4px; }
.pf-icon-title-right::before { right: 1px; }

/* ══════════════════════════════════════════════════════════
   BLOK 15: Floating tekenbalk + advanced popover + mobile sheet
   ══════════════════════════════════════════════════════════ */

/* ── Floating tekenbalk (linksboven) ──────────────────── */
#map-draw-control {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 1200;
  display: flex;
  gap: 5px;
  align-items: center;
}
.map-draw-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(30,58,138,0.35);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.13s, box-shadow 0.13s;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(15,30,65,0.18);
}
.map-draw-btn--primary {
  background: #1e3a8a;
  color: #fff;
  border-color: rgba(15,23,42,0.25);
}
.map-draw-btn--primary:hover,
.map-draw-btn--primary.active {
  background: #0f2f6f;
  border-color: rgba(15,23,42,0.35);
}
.map-draw-btn--primary.active {
  color: #991b1b;
  border-color: rgba(153,27,27,0.55);
  background: rgba(254,226,226,0.9);
}
.map-draw-btn--ghost {
  background: rgba(255,255,255,0.92);
  color: #475569;
  padding: 0 10px;
}
.map-draw-btn--ghost:hover {
  background: rgba(255,255,255,1);
  color: #1e3a8a;
}

/* ── Floating instructie-overlay (centraal onderaan) ──── */
#map-instruction {
  position: fixed;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  z-index: 1210;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(148,163,184,0.45);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #1e3a8a;
  box-shadow: 0 6px 18px rgba(15,30,65,0.18);
  pointer-events: none;
  white-space: nowrap;
}

/* ── ⚙ Advanced menu (details/summary in toolbar) ──────── */
.pf-advanced-menu {
  position: relative;
}
.pf-advanced-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid rgba(130,148,174,.46);
  background: #fff;
  color: #173b76;
  cursor: pointer;
  font-weight: 800;
}
.pf-advanced-summary::-webkit-details-marker { display: none; }
.pf-advanced-summary:hover,
.pf-advanced-menu[open] .pf-advanced-summary {
  background: rgba(30,58,138,0.1);
  border-color: rgba(30,58,138,0.62);
  color: #1e3a8a;
}
.pf-advanced-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 220px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(100,116,139,.35);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15,23,42,.18);
  padding: 10px;
  z-index: 8200;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-adv-heading {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .055em;
  color: #60708a;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pf-adv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
.pf-adv-row--btns {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin-top: 2px;
}
.pf-adv-label {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
}
.pf-adv-toggle {
  height: 24px;
  min-width: 42px;
  border-radius: 5px;
  border: 1px solid rgba(130,148,174,.5);
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  padding: 0 8px;
}
.pf-adv-toggle.active {
  background: rgba(30,58,138,0.12);
  border-color: rgba(30,58,138,0.55);
  color: #1e3a8a;
}
.pf-adv-select {
  height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(130,148,174,.5);
  background: #fff;
  font-size: 11px;
  color: #1e293b;
  padding: 0 6px;
}
.pf-adv-sep {
  height: 1px;
  background: rgba(100,116,139,.22);
  margin: 4px 0;
}
.pf-adv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(130,148,174,.45);
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.pf-adv-btn:hover {
  background: rgba(30,58,138,0.07);
  border-color: rgba(30,58,138,0.4);
  color: #1e3a8a;
}

/* ── Mobile bottom sheet (alleen zichtbaar op mobiel) ── */
@media (min-width: 761px) {
  #mobile-sheet { display: none !important; }
}

#mobile-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1400;
  border-radius: 20px 20px 0 0;
  background: rgba(245,246,250,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 -12px 40px rgba(15,23,42,0.18);
  display: flex;
  flex-direction: column;
  transition: transform 0.32s cubic-bezier(.22,1,.36,1);
  touch-action: none;
  /* verberg frame-toolbars op mobiel via sibling trick niet nodig —
     ze worden via JS verborgen */
}

#mobile-sheet-handle {
  width: 40px; height: 5px;
  background: rgba(100,116,139,0.35);
  border-radius: 3px;
  margin: 10px auto 0;
  cursor: grab;
  flex-shrink: 0;
}

.msht-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  flex-shrink: 0;
}

.msht-brand {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  color: var(--text);
}
.msht-brand em { font-style: italic; color: var(--accent-dk); }

.msht-adv-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(130,148,174,.45);
  background: #fff;
  color: #334155;
  cursor: pointer;
  flex-shrink: 0;
}
.msht-adv-btn.active {
  background: rgba(30,58,138,0.1);
  border-color: rgba(30,58,138,0.55);
  color: #1e3a8a;
}

.msht-section {
  padding: 6px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.msht-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #60708a;
}

/* Grote tekenbalk-knop */
.msht-draw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  border-radius: 12px;
  border: 2px dashed rgba(30,58,138,0.4);
  background: rgba(30,58,138,0.06);
  color: #1e3a8a;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.msht-draw-btn:hover,
.msht-draw-btn.active {
  background: rgba(30,58,138,0.13);
  border-color: rgba(30,58,138,0.7);
}
.msht-draw-btn.active {
  color: #991b1b;
  border-color: rgba(153,27,27,0.5);
  background: rgba(254,226,226,0.7);
}

/* Horizontale chip-rij voor kaartlagen */
.msht-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.msht-chips::-webkit-scrollbar { display: none; }

.msht-chip {
  flex-shrink: 0;
  height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1.5px solid rgba(130,148,174,.4);
  background: #fff;
  color: #334155;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.msht-chip.active {
  background: rgba(30,58,138,0.12);
  border-color: rgba(30,58,138,0.65);
  color: #1e3a8a;
}
.msht-chip:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Rij formaat + dpi */
.msht-row {
  display: flex;
  gap: 12px;
}
.msht-seg-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

/* Segmented control */
.msht-seg {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid rgba(130,148,174,.4);
  background: #fff;
}
.msht-seg-btn {
  flex: 1;
  height: 34px;
  border: none;
  background: transparent;
  color: #475569;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-left: 1px solid rgba(130,148,174,.4);
  transition: background 0.12s, color 0.12s;
}
.msht-seg-btn:first-child { border-left: none; }
.msht-seg-btn.active {
  background: rgba(30,58,138,0.11);
  color: #1e3a8a;
}
.msht-seg--sm .msht-seg-btn { height: 30px; font-size: 11px; }

/* Export knop */
.msht-export-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: none;
  background: #2563EB;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.14s;
  margin-top: 2px;
}
.msht-export-btn:hover { background: #1d4ed8; }
.msht-export-btn:disabled {
  background: rgba(148,163,184,0.35);
  color: rgba(71,85,105,0.55);
  cursor: not-allowed;
}

.msht-export-btn--secondary {
  background: rgba(255,255,255,0.96);
  color: #1e3a8a;
  border: 1px solid rgba(30,58,138,0.25);
  height: 40px;
  margin-top: 8px;
}
.msht-export-btn--secondary:hover { background: #fff; }
.msht-export-btn--secondary:disabled {
  background: rgba(255,255,255,0.55);
  color: rgba(71,85,105,0.45);
  border-color: rgba(148,163,184,0.25);
}

/* Geavanceerd paneel */
.msht-adv-panel {
  border-top: 1px solid rgba(148,163,184,0.3);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 38dvh;
}
.msht-adv-inner {
  padding: 10px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msht-adv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.msht-adv-label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
.msht-adv-toggle {
  height: 28px;
  min-width: 44px;
  border-radius: 6px;
  border: 1.5px solid rgba(130,148,174,.45);
  background: #f8fafc;
  color: #64748b;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  padding: 0 10px;
  transition: background 0.12s, color 0.12s;
}
.msht-adv-toggle.active {
  background: rgba(30,58,138,0.12);
  border-color: rgba(30,58,138,0.55);
  color: #1e3a8a;
}
.msht-adv-recipe-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(130,148,174,.45);
  background: #fff;
  color: #334155;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}

/* Op mobiel: frame-toolbars verbergen (JS doet dit ook, CSS als fallback) */
@media (max-width: 760px) {
  .pf-map-overlay { display: none !important; }
  #map-draw-control { display: none !important; }
}


/* Stap 15k: receptknoppen bij teken-uitsnede en losse legenda onder export */
.pf-export-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 7px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.pf-export-check input { width: 14px; height: 14px; margin: 0; cursor: pointer; }

/* Blok 22D/22E: GIS-sidecars staan zichtbaar en klikbaar in de export-popover, niet meer in de legacy-zijbalk. */
.pf-export-check.pf-export-gis-check {
  padding-top: 2px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
}

.msht-recipe-row { display: flex; gap: 8px; }
.msht-recipe-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(30,58,138,0.22);
  background: rgba(255,255,255,0.94);
  color: #1e3a8a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
}
.msht-export-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
}
.msht-export-check input { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .leaflet-top.leaflet-left { top: 10px; }
}

/* Stap 16b: zichtbare kaartensetknop naast gewone export */
.btn-generate-secondary {
  background: var(--surface-hi);
  color: var(--text);
  border: 1.5px solid var(--border-hi);
  box-shadow: none;
}
.btn-generate-secondary:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-1px);
}

/* Stap 16f: overlay-matrix voor kaartenset en PowerPoint */
.pakket-layer-group{border-bottom:1px solid rgba(148,163,184,.25);padding:5px 0 8px}
.pakket-layer-group:last-child{border-bottom:0}
.pakket-layer-main{font-weight:650}
.pakket-overlay-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 10px;margin:0 0 2px 28px;padding:2px 0 2px;color:#516174;font-size:11.5px}
.pakket-overlay-item{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap}
.pakket-overlay-item input{margin:0}

/* 16g: compacte overlay-matrix met dezelfde iconentaal als de viewer */
.pakket-overlay-matrix{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:4px 0 6px 28px;
  padding:0;
}
.pakket-overlay-item{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(55,73,96,.18);
  border-radius:8px;
  background:#fff;
  color:#334155;
  cursor:pointer;
  position:relative;
}
.pakket-overlay-item input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.pakket-overlay-item .pakket-overlay-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
}
.pakket-overlay-item .pakket-overlay-label{display:none}
.pakket-overlay-item:has(input:checked){
  background:#e8f0ff;
  border-color:#7da2d6;
  color:#1e4778;
  box-shadow:0 0 0 1px rgba(125,162,214,.18) inset;
}
.pakket-overlay-item:has(input:focus-visible){outline:2px solid #7da2d6;outline-offset:2px}

/* AHN handmatig hoogtebereik */
#ahnRangeInputs input,
.pf-input-mini {
  min-width: 0;
  height: 28px;
  border: 1px solid var(--border, #ccd3dd);
  border-radius: 8px;
  padding: 0 7px;
  font-size: 12px;
  background: var(--surface, #fff);
  color: var(--text, #1d2630);
}
.ahn-range-toggle { margin-top: 4px; }
.pf-mini-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 6px;
  font-size: 12px;
  white-space: nowrap;
}
.pf-group-ahn-range .pf-tool-body {
  gap: 5px;
}
.pf-group-ahn-range .pf-input-mini {
  width: 58px;
}

/* 17e: eerste kaartlaagkeuze centraal in de uitsnede */
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-initial {
  background: #1e3a8a !important;
  border-color: rgba(15,23,42,0.28) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 28px rgba(15,30,65,0.28) !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-initial .pf-tool-label {
  color: rgba(255,255,255,0.82) !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-initial .pf-select-layer {
  background: #fff !important;
  border-color: rgba(255,255,255,0.72) !important;
  color: #0f172a !important;
  min-width: 260px !important;
}


/* FIX6: printframe-bediening blijft klikbaar, ook wanneer de bbox er visueel onderdoor loopt. */
.pf-map-overlay-toolbar,
.pf-map-overlay-topbar,
.pf-map-overlay-side,
.pf-map-overlay-overlays,
.pf-map-overlay-label {
  z-index: 9200 !important;
  pointer-events: auto !important;
}
.pf-map-overlay * {
  pointer-events: auto;
}

/* FIX6: noordpijlstijl als echte SVG-preview in plaats van Std/Kls/Min tekst. */
.print-frame-side-toolbar .pf-north-style-row {
  gap: 5px;
}
.print-frame-side-toolbar .pf-north-style-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 3px !important;
}
.pf-north-style-img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin: auto;
  pointer-events: none;
}

/* FIX6: verticale toolbar-iconen exact centreren. */
.print-frame-overlay-toolbar .pf-tool-btn,
.print-frame-overlay-toolbar .pf-icon-btn,
.pf-project-toolbox-vertical .pf-tool-btn,
.pf-project-toolbox-vertical .pf-project-icon-control,
.print-frame-side-toolbar .pf-side-btn,
.print-frame-side-toolbar .pf-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.print-frame-overlay-toolbar .pf-icon,
.print-frame-side-toolbar .pf-icon,
.pf-project-toolbox-vertical .pf-icon,
.pf-icon-water,
.pf-icon-buildings {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  line-height: 1 !important;
  transform: none !important;
}


/* FIX7: zoom/preview-knoppen boven het frame winnen altijd van titel/logo-chips en bbox-lagen. */
.pf-map-overlay { z-index: 12000 !important; }
.pf-map-overlay-label { z-index: 12400 !important; pointer-events: auto !important; }
.pf-map-overlay-label .print-frame-scale-label,
.pf-map-overlay-label .pf-preview-inline,
.pf-map-overlay-label button { pointer-events: auto !important; }
.pf-map-overlay-topbar { z-index: 12200 !important; }
.pf-map-overlay-toolbar { z-index: 12100 !important; }
.pf-map-overlay-overlays { z-index: 12100 !important; }
.pf-map-overlay-side { z-index: 12100 !important; }

/* FIX7: overlay-iconen exact in het midden van hun knop houden. */
.print-frame-overlay-toolbar .pf-tool-btn,
.print-frame-overlay-toolbar .pf-icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  padding: 0 !important;
}
.print-frame-overlay-toolbar .pf-tool-btn > svg,
.print-frame-overlay-toolbar .pf-icon-btn > svg,
.print-frame-side-toolbar .pf-side-btn > svg,
.print-frame-side-toolbar .pf-icon-btn > svg,
.pf-project-toolbox-vertical .pf-tool-btn > svg {
  display: block !important;
  margin: auto !important;
  align-self: center !important;
  justify-self: center !important;
  flex: 0 0 auto !important;
}
.print-frame-overlay-toolbar .pf-tool-btn > .pf-icon,
.print-frame-overlay-toolbar .pf-icon-btn > .pf-icon {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: auto !important;
}

/* 17i: professionele overlays achter één hoofdknop, met tekstuele keuzes. */
.pf-prof-overlays {
  position: relative;
  width: 32px;
}
.pf-prof-overlays > summary {
  list-style: none;
  cursor: pointer;
}
.pf-prof-overlays > summary::-webkit-details-marker { display: none; }
.pf-prof-overlay-panel {
  position: absolute;
  right: calc(100% + 8px);
  top: 0;
  min-width: 188px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(121, 142, 171, 0.42);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.18);
  z-index: 1500;
}
.pf-prof-overlay-row {
  appearance: none;
  border: 1px solid rgba(121, 142, 171, 0.34);
  background: rgba(248,250,252,0.94);
  color: #213451;
  border-radius: 6px;
  padding: 7px 9px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
}
.pf-prof-overlay-row:hover {
  background: rgba(235,241,249,0.98);
}
.pf-prof-overlay-row.active {
  background: #213451;
  color: #fff;
  border-color: #213451;
}
.pf-prof-overlay-row span::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  vertical-align: 1px;
}
.pf-prof-overlay-row.active span::before {
  background: currentColor;
}

/* 17l: mobiele bottom-sheet layoutfix
   Voorkomt dat kaartlaagchips en formaat/DPI-balken over elkaar heen vallen.
   De configuratie-sectie krijgt op mobiel de beschikbare hoogte en scrolt netjes. */
@media (max-width: 760px) {
  #mobile-sheet {
    z-index: 16000 !important;
    max-height: 92dvh;
    overflow: hidden;
  }

  #mobile-sheet.is-configuring {
    height: min(440px, 78dvh) !important;
  }

  #mobile-sheet .msht-header,
  #mobile-sheet-handle {
    flex: 0 0 auto;
  }

  #msht-step-draw,
  #msht-step-config {
    min-height: 0;
  }

  #mobile-sheet.is-configuring #msht-step-draw {
    flex: 0 0 auto;
    padding-top: 4px;
    padding-bottom: 4px;
    gap: 6px;
    border-bottom: 1px solid rgba(148,163,184,0.25);
  }

  #mobile-sheet.is-configuring #msht-step-draw .msht-draw-btn {
    height: 38px;
    font-size: 13px;
    border-radius: 10px;
  }

  #mobile-sheet.is-configuring #msht-step-draw .msht-recipe-row {
    display: none;
  }

  #mobile-sheet.is-configuring #msht-step-config {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 8px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    gap: 12px;
  }

  #msht-step-config .msht-label,
  #msht-step-config .msht-chips,
  #msht-step-config .msht-row,
  #msht-step-config .msht-export-btn,
  #msht-step-config .msht-export-check {
    flex: 0 0 auto;
  }

  #msht-step-config .msht-chips {
    min-height: 42px;
    align-items: center;
    margin-bottom: 2px;
  }

  #msht-step-config .msht-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 10px;
    align-items: start;
  }

  #msht-step-config .msht-seg-group {
    min-width: 0;
  }

  #msht-step-config .msht-seg {
    width: 100%;
  }

  #msht-step-config .msht-seg-btn {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
  }

  #msht-step-config .msht-export-btn {
    margin-top: 4px;
  }

  #mobile-sheet .msht-adv-panel {
    flex: 0 1 auto;
    max-height: 42dvh;
  }

  /* Desktop-framebediening nooit boven de mobiele sheet laten zweven. */
  .pf-map-overlay,
  .pf-map-overlay-toolbar,
  .pf-map-overlay-topbar,
  .pf-map-overlay-side,
  .pf-map-overlay-overlays,
  .pf-map-overlay-label,
  #map-draw-control {
    display: none !important;
  }
}


/* Blok 19C: first-paint hardening.
   Soms werden toolbars tijdens de eerste render kort half-transparant getoond
   doordat meerdere oudere regels met rgba/backdrop-filter elkaar pas na laden
   overschrijven. Deze laatste regel geeft de hoofdgroepen direct een vaste basis. */
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean,
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-tool-group-controls,
.print-frame-side-toolbar,
.print-frame-topbar,
.pf-project-toolbox,
.pf-preview-floating {
  background-color: rgba(255,255,255,.96) !important;
}

/* BLOK20C2 — externe SVG-iconen voor toolbars
   Reparatie: geen CSS-mask gebruiken. In file:// en sommige browserinstellingen
   kan mask:url(...) naar losse SVG's onzichtbaar blijven. Gewone <img>-iconen
   zijn robuuster en blijven makkelijk vervangbaar in img/icons/. */
.p2k-icon {
  --p2k-icon-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--p2k-icon-size);
  height: var(--p2k-icon-size);
  flex: 0 0 auto;
  vertical-align: middle;
  color: inherit;
}
.p2k-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.map-draw-btn .p2k-icon,
.msht-draw-btn .p2k-icon,
.msht-recipe-btn .p2k-icon,
.msht-export-btn .p2k-icon {
  --p2k-icon-size: 15px;
}
.pf-icon-btn .p2k-icon,
.pf-tool-icon .p2k-icon {
  --p2k-icon-size: 18px;
}

/* Blok 20F: rustiger kaartenset/PowerPoint-modal. Overlays volgen de huidige kaart. */
.pakket-info {
  margin: 0 0 10px 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
  font-size: 12px;
  line-height: 1.35;
}

/* Blok 21H: AHN-bereik als directe invoer met resetknop */
.pf-mini-reset {
  font-size: 11px;
  padding: 4px 7px;
  min-width: auto;
}
.pf-mini-reset:disabled {
  opacity: .45;
  cursor: default;
}

/* Blok 24B: export busy/progress overlay */
.export-busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0 18px 28px;
  pointer-events: auto;
  cursor: progress;
}
.export-busy-card {
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(440px, calc(100vw - 36px));
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.30);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}
.export-busy-cancel {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
.export-busy-cancel:hover { background: rgba(255,255,255,0.20); }
.export-busy-cancel:disabled { opacity: .55; cursor: progress; }
.export-busy-overlay.is-success .export-busy-cancel,
.export-busy-overlay.is-error .export-busy-cancel { display: none !important; }
.export-busy-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: pfSpin 0.85s linear infinite;
  flex: 0 0 auto;
}
.export-busy-text {
  min-width: 0;
  flex: 1 1 auto;
}
.export-busy-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}
.export-busy-detail {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,0.80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.export-busy-meter {
  margin-top: 9px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  overflow: hidden;
}
.export-busy-meter > span {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255,255,255,0.90);
  transition: width 0.18s ease;
}
.export-busy-overlay.is-indeterminate .export-busy-meter > span {
  animation: exportBusyPulse 1.25s ease-in-out infinite;
}
.export-busy-overlay.is-success .export-busy-card { background: rgba(20,83,45,0.90); }
.export-busy-overlay.is-error .export-busy-card { background: rgba(127,29,29,0.92); }
.export-busy-overlay.is-success .export-busy-spinner,
.export-busy-overlay.is-error .export-busy-spinner { display: none; }
body.export-is-busy { cursor: progress; }
body.export-is-busy .export-busy-cancel { cursor: pointer; }
@keyframes exportBusyPulse {
  0% { transform: translateX(-120%); }
  50% { transform: translateX(30%); }
  100% { transform: translateX(260%); }
}
@media (max-width: 720px) {
  .export-busy-overlay { align-items: flex-start; padding-top: 14px; }
  .export-busy-card { border-radius: 16px; }
}

/* ── Topotijdreis dynamische jaarselectie ───────────────────────────── */
.topotijdreis-controls,
.msht-topotijdreis {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.topotijdreis-controls label,
.msht-topotijdreis .msht-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.topotijdreis-controls input[type="number"],
.msht-topotijdreis input[type="number"] {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  font: 600 13px/1 var(--font-sans);
  background: #fff;
  color: var(--ink);
}
.pf-topotijdreis-year-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pf-topotijdreis-range {
  width: 120px;
  accent-color: var(--accent);
}
.pf-topotijdreis-year-input {
  width: 72px;
  height: 30px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 10px;
  padding: 0 8px;
  font: 700 12px/1 var(--font-sans);
  color: var(--ink);
  background: rgba(255,255,255,.92);
}
@media (max-width: 760px) {
  .pf-topotijdreis-range { width: 88px; }
  .pf-topotijdreis-year-input { width: 64px; }
}


/* Topotijdreis jaarveld: geen browser-spinner/pijltjes. De slider is de primaire bediening. */
input[data-topotijdreis-year-input]::-webkit-outer-spin-button,
input[data-topotijdreis-year-input]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[data-topotijdreis-year-input] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* BLOK25C — Topotijdreis jaarbediening compact houden in printframe-toolbar.
   Algemene inputregels zetten range/text standaard op 100%; daardoor blies de
   jaarselector de onderste toolbar op en schoof de kaartlaag links uit beeld. */
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-group-topotijdreis .pf-tool-group-controls {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-topotijdreis-year-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-topotijdreis-range {
  width: 150px !important;
  min-width: 120px !important;
  max-width: 150px !important;
  flex: 0 0 150px !important;
}
.print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-topotijdreis-year-input {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  flex: 0 0 72px !important;
  box-sizing: border-box !important;
  padding: 0 8px !important;
}
@media (max-width: 900px) {
  .print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-topotijdreis-range {
    width: 112px !important;
    min-width: 96px !important;
    max-width: 112px !important;
    flex-basis: 112px !important;
  }
  .print-frame-toolbar.pf-toolbar-v2.pf-toolbar-clean .pf-topotijdreis-year-input {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    flex-basis: 64px !important;
  }
}

/* Fase 11: kaartenset-regels - kaartvinkje vooraan, uitgevinkte kaart grijs. */
.pakket-layer-main{
  justify-content:space-between;
}
.pakket-map-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  flex:1 1 auto;
  cursor:pointer;
}
.pakket-layer-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pakket-extra-controls{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-size:12px;
}
.pakket-layer-unchecked .pakket-layer-title{
  color:var(--muted);
  font-weight:550;
}
.pakket-layer-disabled .pakket-layer-title{
  color:var(--muted);
}