/* Kampgebonden printmap — selectie, voorvertoning en afdrukwachtrij. */
.camp-printmap {
  --pm-accent: var(--kc, #6d5ce7);
  margin: clamp(1rem, 3vw, 2.25rem) 0 2.5rem;
  color: #202642;
}

.pm-shell {
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--pm-accent) 25%, #dce2f2);
  border-radius: 26px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pm-accent) 8%, white), white 38%), #fff;
  box-shadow: 0 20px 55px rgba(38, 45, 82, .12);
}

.pm-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: end;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid #e2e7f3;
}
.pm-kicker { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .45rem; color: var(--pm-accent); font-size: .75rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.pm-head h2 { margin: 0; color: #202642; font-size: clamp(1.75rem, 4vw, 3rem); line-height: .98; letter-spacing: -.045em; }
.pm-head p { max-width: 68ch; margin: .75rem 0 0; color: #5a6385; font-size: 1rem; }
.pm-master { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .8rem 1rem; border: 1px solid var(--pm-accent); border-radius: 14px; background: var(--pm-accent); color: #fff; font-weight: 850; text-decoration: none; box-shadow: 0 8px 20px color-mix(in srgb, var(--pm-accent) 26%, transparent); }
.pm-master:hover { filter: brightness(.96); transform: translateY(-1px); }

.pm-tabs { display: flex; gap: .45rem; overflow-x: auto; padding: .85rem clamp(1rem, 3vw, 2rem) 0; scrollbar-width: thin; }
.pm-tab { flex: 0 0 auto; padding: .66rem .9rem; border: 1px solid #d8deed; border-radius: 999px; background: #fff; color: #4c5577; font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; }
.pm-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--pm-accent) 55%, #d8deed); background: color-mix(in srgb, var(--pm-accent) 11%, #fff); color: color-mix(in srgb, var(--pm-accent) 86%, #202642); }

.pm-toolbar { position: sticky; top: .5rem; z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: .8rem clamp(1rem, 3vw, 2rem) 1rem; padding: .7rem; border: 1px solid #dce2ef; border-radius: 17px; background: rgba(255,255,255,.95); box-shadow: 0 10px 30px rgba(42,49,82,.12); backdrop-filter: blur(12px); }
.pm-tool { min-height: 40px; padding: .58rem .78rem; border: 1px solid #d7ddea; border-radius: 11px; background: #fff; color: #35405f; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.pm-tool:hover { border-color: var(--pm-accent); color: var(--pm-accent); }
.pm-tool:disabled { cursor: not-allowed; opacity: .45; }
.pm-tool.primary { border-color: var(--pm-accent); background: var(--pm-accent); color: #fff; }
.pm-tool.primary:hover { color: #fff; filter: brightness(.96); }
.pm-count { display: inline-flex; align-items: center; min-height: 40px; margin-left: auto; padding: .55rem .75rem; border-radius: 11px; background: #f1f4fa; color: #4b5474; font-size: .83rem; font-weight: 850; white-space: nowrap; }

.pm-list { display: grid; gap: 1.2rem; padding: 0 clamp(1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); }
.pm-section[hidden], .pm-doc[hidden] { display: none !important; }
.pm-section { padding: clamp(1rem, 2vw, 1.35rem); border: 1px solid #e0e5f1; border-radius: 20px; background: rgba(247,249,253,.88); }
.pm-section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: .85rem; }
.pm-section h3 { margin: 0; color: #232a47; font-size: 1.22rem; }
.pm-section-head p { margin: .3rem 0 0; color: #68718e; font-size: .88rem; }
.pm-section-badge { flex: 0 0 auto; padding: .36rem .58rem; border-radius: 999px; background: color-mix(in srgb, var(--pm-accent) 10%, #fff); color: var(--pm-accent); font-size: .72rem; font-weight: 900; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,285px),1fr)); gap: .85rem; }

.pm-doc { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid #dce2ef; border-radius: 16px; background: #fff; box-shadow: 0 7px 18px rgba(47,55,88,.06); }
.pm-doc:has(.pm-check:checked) { border-color: color-mix(in srgb, var(--pm-accent) 60%, #dce2ef); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-accent) 10%, transparent),0 10px 24px rgba(47,55,88,.09); }
.pm-doc-main { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .8rem; padding: 1rem; }
.pm-check { width: 1.22rem; height: 1.22rem; margin: .1rem 0 0; accent-color: var(--pm-accent); }
.pm-doc h4 { margin: 0; color: #252c49; font-size: 1rem; line-height: 1.22; }
.pm-doc-desc { margin: .35rem 0 0; color: #68718e; font-size: .84rem; line-height: 1.45; }
.pm-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.pm-meta span { padding: .25rem .42rem; border-radius: 7px; background: #f0f3f9; color: #59627e; font-size: .68rem; font-weight: 800; }
.pm-meta .pm-camp-tag { background: color-mix(in srgb, var(--pm-accent) 11%, #fff); color: var(--pm-accent); }
.pm-meta .pm-general-tag { background: #fff3d6; color: #8a5a00; }

.pm-cover {
  position: relative;
  display: grid;
  place-items: center;
  height: 220px;
  margin: 0 .75rem .85rem;
  overflow: hidden;
  border: 1px solid #e0e5ef;
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #f1f4f9);
}
.pm-cover img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; background: #fff; }
.pm-cover-fallback { display: none; max-width: 20ch; color: #68718e; text-align: center; font-size: .78rem; font-weight: 750; }
.pm-cover.is-missing img { display: none; }
.pm-cover.is-missing .pm-cover-fallback { display: block; }

.pm-actions { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: auto; padding: 0 1rem 1rem 3rem; }
.pm-action { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: .45rem .62rem; border: 1px solid #d8deeb; border-radius: 9px; background: #fff; color: #3e4869; font-size: .75rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.pm-action:hover { border-color: var(--pm-accent); color: var(--pm-accent); }
.pm-action.preview-open { background: #f5f7fb; }

.pm-preview { margin: 0 .75rem .75rem; padding: .55rem; border: 1px solid #dfe4ef; border-radius: 12px; background: #edf1f7; }
.pm-preview[hidden] { display: none; }
.pm-preview iframe { display: block; width: 100%; height: min(62vh,520px); min-height: 360px; border: 0; border-radius: 8px; background: #fff; }
.pm-preview-note { margin: .45rem .2rem 0; color: #68718e; font-size: .72rem; }
.pm-general-note { margin: .1rem 0 0; padding: .75rem .9rem; border-left: 4px solid #e8ad31; border-radius: 8px; background: #fff8e8; color: #6e5929; font-size: .82rem; }

.pm-dialog { width: min(760px,calc(100vw - 2rem)); max-height: min(86vh,850px); padding: 0; border: 0; border-radius: 22px; background: #fff; color: #202642; box-shadow: 0 24px 80px rgba(20,26,52,.3); }
.pm-dialog::backdrop { background: rgba(24,29,53,.64); backdrop-filter: blur(5px); }
.pm-dialog-head { display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid #e1e6f1; }
.pm-dialog-head h2 { margin: 0; font-size: 1.35rem; }
.pm-dialog-close { width: 38px; height: 38px; border: 1px solid #d8deeb; border-radius: 10px; background: #fff; font-size: 1.25rem; cursor: pointer; }
.pm-dialog-body { overflow: auto; max-height: calc(86vh - 78px); padding: 1.15rem 1.25rem 1.35rem; }
.pm-dialog-body>p { margin-top: 0; color: #5d6685; }
.pm-queue { display: grid; gap: .55rem; margin: 1rem 0; padding: 0; list-style: none; }
.pm-queue li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .7rem; border: 1px solid #e0e5f0; border-radius: 12px; }
.pm-queue-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eef1f7; font-weight: 900; font-size: .75rem; }
.pm-queue li.done { opacity: .58; }
.pm-queue li.done .pm-queue-num { background: #dff5e8; color: #137a42; }
.pm-queue b { display: block; font-size: .87rem; }
.pm-queue small { display: block; margin-top: .18rem; color: #6b7490; }
.pm-queue-open { padding: .45rem .62rem; border: 1px solid var(--pm-accent); border-radius: 9px; background: #fff; color: var(--pm-accent); font: inherit; font-size: .75rem; font-weight: 850; cursor: pointer; }
.pm-queue-controls { display: flex; flex-wrap: wrap; gap: .55rem; padding-top: .3rem; }
.pm-queue-help { padding: .75rem .9rem; border-radius: 10px; background: #eef5ff; color: #405b7e; font-size: .8rem; }
.pm-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; max-width: min(430px,calc(100vw - 2rem)); padding: .8rem 1rem; border-radius: 12px; background: #202642; color: #fff; box-shadow: 0 12px 35px rgba(22,27,52,.28); font-size: .85rem; font-weight: 750; }

@media (max-width:760px) {
  .pm-head { grid-template-columns: 1fr; }
  .pm-master { width: 100%; }
  .pm-count { order: -1; width: 100%; margin-left: 0; justify-content: center; }
  .pm-toolbar { top: .25rem; }
  .pm-tool { flex: 1 1 auto; }
  .pm-section-head { display: block; }
  .pm-section-badge { display: inline-flex; margin-top: .5rem; }
  .pm-actions { padding-left: 1rem; }
  .pm-preview iframe { min-height: 310px; }
  .pm-queue li { grid-template-columns: auto minmax(0,1fr); }
  .pm-queue-open { grid-column: 2; justify-self: start; }
}
@media print { .camp-printmap,.pm-dialog,.pm-toast { display: none !important; } }
@media (prefers-reduced-motion:no-preference) { .pm-master,.pm-doc,.pm-tool,.pm-action { transition: border-color .16s ease,color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease; } }