/* ============================================================
   PRINTVEL — de werkplek van print/vel.html
   ------------------------------------------------------------
   Links kies je wat je print en hoe, rechts staan de vellen op ware
   grootte, met bovenaan hoeveel het er zijn en de knop om te printen.
   Dit is alleen de schil eromheen (.no-print): de vellen zelf staan in
   css/print.css en gaan de printer in zoals je ze hier ziet.

   Eén kleur voor wat aan staat: de accentkleur. Vol voor de soort
   printwerk en de printknop, als zachte tint voor de keuzes eronder.
   ============================================================ */
:root{ --pv-zij:376px; --pv-aan:color-mix(in srgb, var(--ui-accent) 22%, var(--ui-bg-2)); }

.pv{ display:grid; grid-template-columns:var(--pv-zij) minmax(0, 1fr); align-items:start; }

/* ---------- Links: wat en hoe ---------- */
.pv__zij{
  position:sticky; top:var(--topbar-h, 56px);
  max-height:calc(100vh - var(--topbar-h, 56px)); overflow:auto;
  padding:20px 20px 32px; border-right:1px solid var(--ui-line);
  display:flex; flex-direction:column; gap:22px;
}
.pv__paneel{ display:flex; flex-direction:column; gap:16px; }

/* De soort printwerk */
.pv-modus{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; padding:4px;
  background:var(--ui-bg-2); border:1px solid var(--ui-line); border-radius:12px;
}
.pv-modus button{
  appearance:none; border:0; background:none; cursor:pointer;
  padding:10px 6px; border-radius:9px; color:var(--ui-text-dim);
  font:600 13.5px/1.15 var(--font-body);
}
.pv-modus button:hover{ color:var(--ui-text); }
.pv-modus button[aria-pressed="true"]{ background:var(--ui-accent); color:#1a0d03; }

/* Een kopje boven een groep velden, met een lijn tot de rand */
.pv-kop{
  display:flex; align-items:center; gap:10px; margin:6px 0 -2px;
  font:600 11px/1 var(--font-body); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ui-text-dim);
}
.pv-kop::after{ content:""; flex:1; height:1px; background:var(--ui-line); }

/* Een lijst om er één uit te kiezen, met hoeveel er in zitten */
.pv-lijst{ display:flex; flex-direction:column; gap:2px; }
.pv-lijst button{
  appearance:none; cursor:pointer; width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; border:1px solid transparent; border-radius:9px;
  background:none; color:var(--ui-text-dim); font:600 14px/1.25 var(--font-body);
}
.pv-lijst button:hover{ background:var(--ui-bg-2); color:var(--ui-text); }
.pv-lijst button[aria-pressed="true"]{
  background:var(--ui-bg-2); border-color:var(--ui-line); color:var(--ui-text);
  box-shadow:inset 3px 0 0 var(--ui-accent);
}
.pv-lijst__aantal{ font:600 12px/1 var(--font-body); color:var(--ui-text-dim); }

/* Een veld: het label erboven, rechts eventueel "alle · geen" */
.pv-veld{ display:flex; flex-direction:column; gap:7px; }
.pv-veld__label{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font:600 12px/1.2 var(--font-body); color:var(--ui-text-dim);
}
.pv-veld__snel{ display:flex; gap:2px; }
.pv-veld__snel button{
  appearance:none; border:0; background:none; cursor:pointer; padding:0 4px;
  color:var(--ui-text-dim); font:600 11.5px/1.2 var(--font-body);
}
.pv-veld__snel button:hover{ color:var(--ui-accent); }

/* Knoppen naast elkaar: één aan (pv-seg), of elk los aan en uit (pv-chips) */
.pv-seg, .pv-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.pv-seg button, .pv-chip{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 11px; border:1px solid var(--ui-line); border-radius:8px;
  background:var(--ui-bg-2); color:var(--ui-text-dim);
  font:600 12.5px/1.15 var(--font-body);
}
.pv-seg button:hover, .pv-chip:hover{ color:var(--ui-text); border-color:#3d465b; }
.pv-seg button[aria-pressed="true"], .pv-chip[aria-pressed="true"]{
  background:var(--pv-aan); border-color:color-mix(in srgb, var(--ui-accent) 65%, transparent);
  color:#fff;
}
.pv-seg button:disabled{ opacity:.4; cursor:default; }
/* Een stip in de kleur van een speler of een kamer (die kleur zet
   .hq--blauw of .hq-kamer--biodome uit css/hoofdkantoor.css in --speler). */
.pv-stip{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--speler); box-shadow:0 0 0 1px rgba(255,255,255,.3);
}

/* Hoeveel exemplaren: min, getal, plus */
.pv-stap{
  display:inline-flex; align-items:stretch; width:max-content;
  border:1px solid var(--ui-line); border-radius:8px; overflow:hidden; background:var(--ui-bg-2);
}
.pv-stap button{
  appearance:none; border:0; background:none; cursor:pointer;
  width:34px; color:var(--ui-text); font:500 17px/1 var(--font-body);
}
.pv-stap button:hover{ background:var(--ui-bg-3); }
.pv-stap button:disabled{ opacity:.35; cursor:default; background:none; }
.pv-stap input{
  width:46px; height:32px; border:0; border-inline:1px solid var(--ui-line);
  background:var(--ui-bg-3); color:var(--ui-text); text-align:center;
  font:600 14px/1 var(--font-body); -moz-appearance:textfield; appearance:textfield;
}
.pv-stap input::-webkit-inner-spin-button,
.pv-stap input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }

/* Een schakelaar */
.pv-schakel{
  display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none;
  font:500 13.5px/1.3 var(--font-body); color:var(--ui-text);
}
.pv-schakel input{
  appearance:none; -webkit-appearance:none; position:relative; flex:0 0 auto; margin:0; cursor:pointer;
  width:36px; height:21px; border-radius:99px;
  background:var(--ui-bg-3); border:1px solid var(--ui-line);
  transition:background .15s, border-color .15s;
}
.pv-schakel input::after{
  content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:var(--ui-text-dim); transition:transform .15s, background .15s;
}
.pv-schakel input:checked{ background:var(--ui-accent); border-color:var(--ui-accent); }
.pv-schakel input:checked::after{ transform:translateX(15px); background:#1a0d03; }

/* ---------- De bundel: per soort een kaart om aan te vinken ---------- */
.pv-deel{ border:1px solid var(--ui-line); border-radius:12px; background:var(--ui-bg-2); }
.pv-deel__kop{
  display:flex; align-items:center; gap:11px; padding:12px 14px;
  cursor:pointer; user-select:none;
}
.pv-deel__kop input{ width:17px; height:17px; margin:0; flex:0 0 auto; accent-color:var(--ui-accent); cursor:pointer; }
.pv-deel__naam{ flex:1; min-width:0; font:600 14px/1.25 var(--font-body); color:var(--ui-text); }
.pv-deel__aantal{ font:600 12px/1 var(--font-body); color:var(--ui-text-dim); white-space:nowrap; }
.pv-deel__body{
  display:flex; flex-direction:column; gap:14px;
  padding:13px 14px 15px; border-top:1px solid var(--ui-line);
}
.pv-deel--uit{ background:none; }
.pv-deel--uit .pv-deel__naam{ color:var(--ui-text-dim); }
.pv-deel--leeg .pv-deel__kop{ cursor:default; opacity:.5; }
.pv-deel--leeg .pv-deel__kop input{ cursor:default; }

/* Printtips onderaan */
.pv-tip{
  padding:13px 15px; border-radius:10px;
  background:var(--ui-bg-2); border:1px solid var(--ui-line);
  font-size:12.5px; line-height:1.55; color:var(--ui-text-dim);
}
.pv-tip p{ margin:0 0 7px; }
.pv-tip p:last-child{ margin:0; }
.pv-tip b{ color:var(--ui-text); font-weight:600; }

/* ---------- Rechts: de vellen ---------- */
.pv__hoofd{ min-width:0; min-height:calc(100vh - var(--topbar-h, 56px)); background:#0c0e13; }
.pv__balk{
  position:sticky; top:var(--topbar-h, 56px); z-index:30;
  display:flex; align-items:center; gap:20px; padding:14px 24px;
  background:rgba(16,18,24,.92); border-bottom:1px solid var(--ui-line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.pv__telling{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.pv__aantal{
  font:600 21px/1.1 var(--font-display); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ui-text);
}
.pv__info{ font-size:13px; line-height:1.45; color:var(--ui-text-dim); }
.pv__info b{ color:var(--ui-text); font-weight:600; }
.pv__info button{
  appearance:none; border:0; background:none; padding:0; cursor:pointer;
  color:var(--ui-accent); font:inherit; text-decoration:underline; text-underline-offset:2px;
}
.pv__letop{ display:block; color:#e9a467; }
.pv__balk .btn{ padding:11px 24px; font-size:15px; flex:0 0 auto; }

/* Terwijl de bundel meet en verdeelt, staan de oude vellen even op de achtergrond. */
.sheets--bezig .sheet{ opacity:.35; transition:opacity .2s; }

/* ---------- Smal scherm: alles onder elkaar ---------- */
@media (max-width:1100px){
  .pv{ grid-template-columns:minmax(0, 1fr); }
  .pv__zij{ position:static; max-height:none; overflow:visible; border-right:0; border-bottom:1px solid var(--ui-line); }
}

/* ---------- Printen: alleen de vellen ---------- */
@media print{
  .pv{ display:block; }
  .pv__hoofd{ min-height:0; background:none; }
}