:root {
  --bulma-primary-h: 145deg;
  --bulma-primary-s: 33%;
  --bulma-primary-l: 27%;
  --bulma-link-h: 145deg;
  --bulma-link-s: 33%;
  --bulma-link-l: 27%;
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

 
input[type="checkbox"] { width: 1.5em; height: 1.5em; vertical-align: middle;
  margin-right: .35em; }

 
.navbar.is-pp { border-bottom: 1px solid var(--bulma-border);
  min-height: 3.75rem; position: sticky; top: 0; z-index: 30; }
.navbar.is-pp .navbar-brand { align-items: center; }
.navbar.is-pp .navbar-item.pp-logo { padding-top: .4rem; padding-bottom: .4rem; }
 
.navbar.is-pp .pp-logo img { height: 38px; max-height: 38px; width: auto;
  display: block; }
 
html[data-theme="dark"] .navbar.is-pp .pp-logo img {
  filter: brightness(0) invert(1); }
 
.navbar.is-pp .navbar-item.is-merk { font-weight: 700; font-size: 1.05rem;
  min-width: 8.5rem; }
.navbar.is-pp .navbar-item.is-wie { color: var(--bulma-text-weak);
  font-size: .8rem; }
 
@media screen and (max-width: 1023px) {
  .navbar.is-pp .navbar-menu {
    background: var(--pp-navy);
    box-shadow: 0 10px 18px rgba(20, 37, 60, .35);
    padding: .4rem .75rem .9rem;
  }
   
  .navbar.is-pp .navbar-end { border-top: 1px solid rgba(255,255,255,.12);
    margin-top: .4rem; padding-top: .4rem; }

   
  .container.is-fluid { padding-left: .75rem; padding-right: .75rem; }
   
  .field.is-grouped { flex-wrap: wrap; row-gap: .5rem; }
   
  .balkje .button, .balkje .select select { height: 2.75em; font-size: .95rem; }
  .balkje .select { height: auto; }
  table.orders .kies { width: 1.35rem; height: 1.35rem; }
   
  .navbar.is-pp .navbar-brand .navbar-item:not(.pp-logo):not(.is-merk) { display: none; }
}
.navbar.is-pp .navbar-burger { color: #fff; margin-left: auto; }

 
.tabelbak { overflow-x: auto; }

 
tr.stappen td { background: rgba(0,0,0,.03); }
.stapregel { display: grid; grid-template-columns: 130px 90px 1fr;
  gap: .5rem; padding: 2px 0; font-size: .78rem; }
.uitklap { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.uitklap .kop { font-size: .68rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--bulma-text-weak); margin-bottom: .4rem; }
.uitklap-regel { display: flex; gap: .5rem; align-items: flex-start;
  padding: 3px 0; }
@media (max-width: 720px) { .uitklap { grid-template-columns: 1fr; } }

 
 
.pp-balk { display: flex; gap: .75rem; flex-wrap: wrap;
  align-items: flex-end; margin-bottom: 1rem; }
.pp-balk .field { margin-bottom: 0; }
.pp-balk .label { margin-bottom: .25rem; }

 
.klein { font-size: .75rem; color: var(--bulma-text-weak); }
 
.referenties { margin-top: .25rem; line-height: 1.35;
  font-variant-numeric: tabular-nums; }
.nr { font-weight: 600; font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.leeg { color: var(--bulma-text-weak); padding: 2rem; text-align: center; }
.melding:empty { display: none; }
.melding { color: var(--bulma-warning-on-scheme); font-size: .8rem;
  margin: .6rem 0; }

 
.strip { display: flex; gap: 3px; flex-wrap: wrap; }
.strip img { width: 32px; height: 32px; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--bulma-border); }
.preview { width: 58px; height: 58px; object-fit: cover; border-radius: 5px;
  border: 1px solid var(--bulma-border); background: var(--bulma-background); }
 
td .strip { display: grid; grid-template-columns: repeat(2, 46px);
  gap: 3px; width: max-content; }
td .strip .preview { width: 46px; height: 46px; }
 
.strip.strip-order { display: flex; flex-wrap: wrap; width: auto; }
.strip.strip-order img { width: 27px; height: 27px; }
 
.strip.strip-order.is-enkel img { width: auto; height: auto;
  max-width: 80px; max-height: 80px; object-fit: contain; }
.preview.leeg { display: flex; align-items: center; justify-content: center;
  padding: 0; font-size: .55rem; color: var(--bulma-text-weak);
  text-align: center; }

 
.dagbadge { display: inline-block; padding: 2px 8px; border-radius: 5px;
  border: 1px solid var(--bulma-border); font-variant-numeric: tabular-nums;
  white-space: nowrap; font-size: .75rem; }
.dagbadge.besteld { border-style: dashed; color: var(--bulma-text-weak); }

 
.dagbadge.tweeregelig { display: inline-flex; flex-direction: column;
  align-items: center; line-height: 1.3; padding: 3px 7px; gap: 0; }
.dagbadge.tweeregelig .regel2 { font-size: .66rem; opacity: .8; }

 
.lev-logo { height: 16px; max-width: 60px; vertical-align: middle;
  margin-right: 4px; }

 
.dagbadge.dag-ma { border-width: 1.5px; border-color: #d1b300; color: #d1b300; }
.dagbadge.dag-di { border-width: 1.5px; border-color: #c9408b; color: #c9408b; }
.dagbadge.dag-wo { border-width: 1.5px; border-color: #53a045; color: #53a045; }
.dagbadge.dag-do { border-width: 1.5px; border-color: #d3711c; color: #d3711c; }
.dagbadge.dag-vr { border-width: 1.5px; border-color: #0087cc; color: #0087cc; }
 
.dagbadge.dag-za, .dagbadge.dag-zo { border-style: dashed;
  color: var(--bulma-text-weak); }

 
.dagbadge.telaat { border-width: 1.5px; border-style: solid;
  border-color: var(--bulma-danger); color: var(--bulma-danger);
  font-weight: 600; }

 
.ic { width: 14px; height: 14px; margin-right: 5px; flex: 0 0 auto; }
.merkknop img { height: 15px; width: auto; margin-right: 5px; }

 
 
.pp-meldingen { position: fixed; top: 1rem; left: 50%;
  transform: translateX(-50%); z-index: 60; width: min(640px, 92vw);
  display: flex; flex-direction: column; gap: .5rem; }
.pp-meldingen .notification { box-shadow: 0 6px 22px rgba(10,10,10,.18);
  margin: 0; padding: .8rem 2.5rem .8rem 1rem; }

 
.balkje { position: sticky; bottom: 12px; z-index: 4; }

 
 
dialog.pp-dialog { border: 0; padding: 0; border-radius: 8px;
  max-width: 560px; width: calc(100% - 2rem); background: transparent; }
dialog.pp-dialog::backdrop { background: rgba(10,10,10,.55); }
dialog.pp-dialog label { display: block; font-weight: 600;
  font-size: .8rem; margin: .85rem 0 .25rem; }
dialog.pp-dialog input, dialog.pp-dialog select,
dialog.pp-dialog textarea { width: 100%; }
dialog.pp-dialog input, dialog.pp-dialog textarea,
dialog.pp-dialog select { border: 1px solid var(--bulma-border);
  border-radius: 5px; padding: .45em .7em; font: inherit;
  background: var(--bulma-scheme-main); color: var(--bulma-text); }

 
.treffer { border: 1px solid var(--bulma-border); border-radius: 6px;
  padding: .5rem .65rem; margin-bottom: .4rem; display: flex; gap: .65rem;
  align-items: center; }
.treffer .button { margin-left: auto; }

 
 
table.pp-invoer td { vertical-align: middle; }
table.pp-invoer .input, table.pp-invoer .select select {
  border-color: transparent; background: transparent; box-shadow: none; }
table.pp-invoer tr:hover .input,
table.pp-invoer tr:hover .select select { border-color: var(--bulma-border); }
table.pp-invoer .input:focus, table.pp-invoer .select select:focus {
  border-color: var(--bulma-link); background: var(--bulma-scheme-main); }
table.pp-invoer .select, table.pp-invoer .select select { width: 100%; }
 
table.pp-invoer .select select { min-width: 13em; }


 
 
 
 
table.orders { width: 100%; table-layout: fixed;
  border-collapse: separate; border-spacing: 0;
  background: transparent; }
table.orders thead th { background: transparent; }
tbody.order { display: table-row-group; }
tbody.order::after { content: ''; display: table-row; height: 12px; }

 
tbody.order td:first-child { border-left: 3px solid transparent; }
tbody.order tr:first-child > td { border-top: 1px solid var(--bulma-border); }
tbody.order tr:last-child > td { border-bottom: 1px solid var(--bulma-border); }
tbody.order tr:first-child > td:first-child { border-top-left-radius: 10px; }
tbody.order tr:first-child > td:last-child { border-top-right-radius: 10px; }
tbody.order tr:last-child > td:first-child { border-bottom-left-radius: 10px; }
tbody.order tr:last-child > td:last-child { border-bottom-right-radius: 10px; }
tbody.order tr > td:last-child { border-right: 1px solid var(--bulma-border); }
 
tbody.order:not(.open) tr.orderacties > td {
  border-bottom: 1px solid var(--bulma-border); }
tbody.order:not(.open) tr.orderacties > td:first-child {
  border-bottom-left-radius: 10px; }
tbody.order:not(.open) tr.orderacties > td:last-child {
  border-bottom-right-radius: 10px; }
table.orders th { font-size: .68rem; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; }
table.orders th.sorteer, table.zendingen th.sorteer { cursor: pointer; user-select: none; }
table.orders th.sorteer:hover, table.zendingen th.sorteer:hover { color: var(--bulma-link); }
table.orders th.sorteer.actief::after, table.zendingen th.sorteer.actief::after { content: ' \2191'; }
table.orders th.sorteer.actief.omlaag::after, table.zendingen th.sorteer.actief.omlaag::after { content: ' \2193'; }
table.orders td { vertical-align: top; font-size: .82rem; }
 
tr.orderkop > td { background: var(--bulma-scheme-main-bis); }
tr.orderkop { cursor: pointer; }
tr.leveringen > td, tr.orderacties.heeft-zending > td {
  background: rgba(127,127,127,.08);
  padding-top: .35rem; padding-bottom: .55rem; }
 
tr.orderregel > td { background: rgba(127,127,127,.17); }
tbody.order tr.orderregel > td:first-child { padding-left: 8px; }
tbody.order tr.orderregel > td:last-child { padding-right: 13px; }

 
tr.orderacties > td { padding: .2rem .6rem .55rem; }
.actiestrook { position: sticky; left: .5rem; display: flex;
  flex-wrap: wrap; gap: 4px; align-items: center;
  width: max-content; max-width: calc(100vw - 3.5rem);
   
  min-width: min(100%, calc(100vw - 3.5rem)); }
 
 
.actiestrook .acties-rechts { margin-left: auto; display: flex;
  flex-wrap: wrap; gap: 4px; align-items: center; }
@media (max-width: 900px) {
  .actiestrook .acties-rechts { margin-left: 0; }
}

.gewichtinfo { color: var(--pp-tekst-muted); font-size: .74rem;
  margin-left: .4rem; white-space: nowrap; }
.gewichtinfo:empty { display: none; }

 
tr.orderregel > td.regelbak { padding: .3rem .6rem; }
.regelkaart { display: flex; gap: 12px; align-items: flex-start;
  flex-wrap: wrap; background: var(--bulma-scheme-main);
  border: 1px solid var(--bulma-border); border-radius: 8px;
  padding: .5rem .65rem;
   
  position: sticky; left: .5rem; max-width: calc(100vw - 3.5rem); }
 
.regelkaart .regelstatus { display: flex; flex-direction: column;
  gap: 4px; align-items: flex-start; flex: 0 0 132px; }
 
.regelkaart .regel-leverancier { display: inline-flex; align-items: center;
  gap: 5px; color: var(--pp-tekst-muted); }
.regelkaart .regel-leverancier .lev-logo { height: 14px; width: auto; }
.regelkaart .kern { flex: 1; min-width: 260px; }
 
.regelkaart .strip { display: flex; flex-wrap: wrap; gap: 4px;
  width: auto; max-width: 194px; flex: none; align-content: flex-start; }
.regelkaart .strip .preview { width: auto; height: auto;
  max-width: 90px; max-height: 90px; object-fit: contain;
  background: var(--bulma-scheme-main-bis); }
.regelkaart .strip .preview.is-vierkant { max-width: 75px; max-height: 75px; }
.regelkaart .preview.leeg { width: 75px; height: 75px; flex: none; }
.regelkaart .acties { display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: .45rem; align-items: center; }
 
.regelkaart .besteldkolom { flex: none; width: 92px; line-height: 1.25; }
.regelkaart .opmvak { width: 240px; flex: none; display: flex;
  flex-direction: column; gap: 4px; }
@media screen and (max-width: 700px) {
  .regelkaart .opmvak { width: 100%; }
  .regelkaart .besteldkolom { width: auto; }
}


 
 
.pp-vergroot { position: fixed; inset: 0; z-index: 80; cursor: zoom-out;
  background: rgba(10, 10, 10, .82); display: flex; align-items: center;
  justify-content: center; padding: 3vh 3vw; }
.pp-vergroot figure { margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.pp-vergroot img { max-width: 100%; max-height: 88vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  background: #fff; }
.pp-vergroot figcaption { color: #fff; font-size: .85rem; opacity: .85; }
 
.strip img, img.preview { cursor: zoom-in; }


 
 
 
.pp-blokkade { position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 10, 10, .45); display: flex; align-items: center;
  justify-content: center; cursor: progress; opacity: 0;
  animation: pp-blokkade-in .2s ease .25s forwards; }
@keyframes pp-blokkade-in { to { opacity: 1; } }
.pp-blokkade-doos { background: var(--bulma-scheme-main, #fff);
  color: var(--bulma-text, #1a1a1a); border-radius: 12px;
  padding: 1.3rem 1.8rem; display: flex; align-items: center; gap: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35); font-size: .95rem;
  min-width: min(22rem, 90vw); max-width: min(34rem, 92vw); }
.pp-blokkade-inhoud { display: flex; flex-direction: column; gap: .3rem;
  min-width: 0; flex: 1; }
.pp-blokkade-tekst { font-weight: 600; }
.pp-blokkade-sub { font-size: .82rem; color: var(--bulma-text-weak, #69748c); }
.pp-blokkade-sub:empty { display: none; }
.pp-blokkade-balk { display: block; height: 5px; border-radius: 3px;
  background: var(--bulma-scheme-main-ter, #eee); overflow: hidden; }
.pp-blokkade-balk[hidden] { display: none; }
.pp-blokkade-balk > span { display: block; height: 100%; width: 0;
  background: var(--pp-groen, #2f5d3f); transition: width .3s ease; }
.pp-blokkade-spinner { width: 1.3rem; height: 1.3rem; flex: none;
  border-radius: 50%; border: 3px solid var(--bulma-border, #dbdbdb);
  border-top-color: var(--pp-groen, #2f5d3f); animation: pp-draaien .7s linear infinite; }
@keyframes pp-draaien { to { transform: rotate(360deg); } }
 
.pp-mini-spinner { display: inline-block; width: .8rem; height: .8rem;
  vertical-align: -.1rem; margin-right: .3rem; border-radius: 50%;
  border: 2px solid var(--bulma-border, #dbdbdb);
  border-top-color: var(--pp-groen, #2f5d3f); animation: pp-draaien .7s linear infinite; }
.pp-mini-balk { display: block; height: 4px; max-width: 16rem; margin-top: .3rem;
  border-radius: 2px; background: var(--bulma-scheme-main-ter, #eee); overflow: hidden; }
.pp-mini-balk > span { display: block; height: 100%; width: 0;
  background: var(--pp-groen, #2f5d3f); transition: width .3s ease; }

 
.pp-uitgelogd { position: fixed; top: .75rem; left: 50%; transform: translateX(-50%);
  z-index: 1001; display: flex; align-items: center; gap: 1rem;
  width: max-content; max-width: calc(100vw - 32px); padding: .7rem 1rem;
  border-radius: 10px; font-size: .9rem;
  background: var(--bulma-warning-light, #fff6d6);
  color: var(--bulma-warning-dark, #5c4400);
  border: 1px solid var(--bulma-warning, #ffb70f);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
 
.pp-uitgelogd strong { color: inherit; }
.pp-uitgelogd .button { flex: none; border-color: transparent;
  background: var(--bulma-warning, #ffb70f);
  color: var(--bulma-warning-invert, #291d00); font-weight: 600; }
@media (max-width: 560px) {
  .pp-uitgelogd { flex-direction: column; align-items: stretch; gap: .5rem; } }

 
.zendingknop { font-size: .68rem; height: auto; padding: .15em .5em;
  justify-content: flex-start; }

 
tr.leveringen.licht-op > td,
tr.orderacties.licht-op > td { animation: pp-oplichten 1.6s ease-out; }
@keyframes pp-oplichten {
  0%, 40% { background: rgba(47, 93, 63, .22); }
  100%    { background: inherit; }
}

 

:root {
   
  --pp-navy: #001C36;
   
  --pp-navy-tekst: var(--pp-navy);
  --pp-navy-tint: #D5E2F2;
  --pp-navy-tint2: #ECF5FF;
  --pp-groen: #2E7D4F;
  --pp-groen-hover: #266A42;
   
  --pp-groen-tekst: var(--pp-groen);
  --pp-goud: #C9A227;
  --pp-goud-tint: #FBF5E3;
  --pp-tekst: #001C36;
  --pp-tekst-zwak: #3A4658;
  --pp-tekst-muted: #6B7789;
  --pp-rand: #D5E2F2;
  --pp-vlak: #ECF5FF;
  --pp-vlak2: #F7FAFD;
}

 
html[data-theme="dark"] {
  --pp-navy-tekst: hsl(213, 55%, 62%);
  --pp-groen-tekst: hsl(145, 40%, 55%);
  --pp-navy-tint: hsl(213, 22%, 18%);
  --pp-navy-tint2: hsl(213, 20%, 15%);
  --pp-goud-tint: hsl(42, 30%, 16%);
  --pp-tekst: var(--bulma-text);
  --pp-tekst-zwak: var(--bulma-text-weak);
  --pp-tekst-muted: var(--bulma-text-weak);
  --pp-rand: var(--bulma-border);
  --pp-vlak: var(--bulma-scheme-main);
  --pp-vlak2: var(--bulma-scheme-main-bis);
}

body {
  font-family: var(--pp-font, system-ui, sans-serif);
  background: var(--pp-vlak);
  color: var(--pp-tekst);
}
h1, h2, h3, .title { font-family: var(--pp-font, system-ui, sans-serif); }
.title.is-4, .title.is-5, h1 { color: var(--pp-navy-tekst); font-weight: 700; letter-spacing: -.01em; }
 
html[data-theme="dark"] .has-text-grey { color: var(--bulma-text-weak) !important; }

.navbar.is-pp {
  background: var(--pp-navy) !important;
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.navbar.is-pp .navbar-item.is-merk { color: #fff; }
.navbar.is-pp .navbar-item.is-wie { color: #8fa0b5; }
.navbar.is-pp .navbar-item:not(.pp-logo) { color: rgba(255,255,255,.78); border-radius: 8px; }
.navbar.is-pp .navbar-item:not(.pp-logo):hover {
  color: #fff; background: rgba(255,255,255,.08);
}
.navbar.is-pp .navbar-item.has-text-weight-bold {
  color: #fff; background: rgba(255,255,255,.14);
}
.navbar.is-pp .pp-logo img { filter: brightness(0) invert(1); }

.box {
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(20,37,60,.05);
  border: 1px solid var(--pp-rand);
}
.box.is-gevaar { border-left: 4px solid var(--bulma-danger); }

.button { border-radius: 10px; font-weight: 500; }
 
.button.is-primary { background: var(--pp-groen); border-color: var(--pp-groen); color: #fff; }
.button.is-primary:hover { background: var(--pp-groen-hover); border-color: var(--pp-groen-hover); color: #fff; }
.input, .textarea, .select select { border-radius: 10px; }
 
.button.is-rounded { border-radius: 999px; }
.button.is-primary.is-light {
  background: var(--pp-navy); color: #fff; border: 0; font-weight: 600;
}
.button.is-primary.is-light:hover { background: var(--pp-navy); color: #fff; }
.tag { border-radius: 999px; }

table.orders th, table th {
  color: var(--pp-tekst-muted); font-size: .68rem;
}
 
tr.orderkop > td, tr.orderacties > td {
  background: var(--bulma-scheme-main); }
tr.leveringen > td, tr.orderacties.heeft-zending > td {
  background: var(--pp-navy-tint2); }
tr.orderregel > td { background: var(--pp-navy-tint2); }

 
table.orders input[type="checkbox"] { width: 1.25em; height: 1.25em;
  accent-color: var(--pp-navy); margin-right: 0; }

 
table.orders .button.is-small:not(.is-danger):not(.is-primary) {
  font-size: .72rem; height: auto; padding: .38em .8em; font-weight: 600;
  color: var(--pp-tekst); border-color: #c9d2dc; }
table.orders .button.is-small:not(.is-danger):not(.is-primary):hover {
  border-color: var(--pp-navy-tekst); color: var(--pp-navy-tekst); }
table.orders .button.is-small.is-danger { font-size: .72rem; height: auto;
  padding: .38em .8em; font-weight: 600; }
 
table.orders .zendingbalk-deel { font-size: .72rem; font-weight: 600;
  padding: .38em .8em; }
table.orders a.button.is-danger.is-light,
table.orders .button.is-danger.is-light { font-size: .72rem; height: auto;
  padding: .38em .8em; }

.dagbadge { border-radius: 999px; }

 
 
.statusflow { display: flex; gap: 3px; align-items: center; }
.statusflow span { width: 17px; height: 5px; border-radius: 3px;
  flex: none; background: var(--pp-rand); }
.statusflow-naam { display: block; font-size: .72rem; font-weight: 700;
  margin-top: 4px;
   
  overflow-wrap: anywhere; }
.statuslegenda { display: flex; gap: 14px; flex-wrap: wrap;
  align-items: center; font-size: .72rem; color: var(--pp-tekst-zwak); }
.statuslegenda:empty { display: none; }
.legenda-kop { font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: .66rem; color: var(--pp-tekst-muted); }
.legenda-item { display: inline-flex; gap: 5px; align-items: center; }
.legenda-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
 
.filterkeuze { display: none; align-items: center; gap: .5rem;
  margin-bottom: .5rem; }
 
.filterkeuze > span { flex: 0 0 5.5rem; }
.filterkeuze .select { flex: 1 1 auto; }
.filterkeuze select { width: 100%; }
@media (max-width: 768px) {
  .filterrij, .statuslegenda { display: none !important; }
  .filterkeuze { display: flex; }
  .filterkeuze[hidden] { display: none !important; }
}
 
tbody.order.is-aandacht > tr.orderkop > td,
tbody.order.is-aandacht > tr.orderacties > td { background: #fdf6f7; }
tbody.order.is-aandacht > tr.orderkop > td:first-child,
tbody.order.is-aandacht > tr.orderacties > td:first-child {
  box-shadow: inset 3px 0 0 #c23b4b; }

.klein, .subtitle.is-6 { color: var(--pp-tekst-muted); }
 
.tabs li.is-active .klein { color: inherit; }

 
 
.statuskiezer { display: flex; flex-direction: column; gap: 6px; }
.statusgroepkop { font-size: .66rem; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; color: var(--pp-tekst-muted);
  margin: 8px 0 -2px; }
.statusgroepkop:first-child { margin-top: 0; }
.statuskeuzeknop { display: flex; align-items: center; gap: 12px;
  width: 100%; background: var(--bulma-scheme-main);
  border: 1px solid var(--pp-rand); border-radius: 10px;
  padding: 9px 12px; cursor: pointer; font-family: inherit;
  text-align: left; font-size: .88rem; }
.statuskeuzeknop:hover { background: var(--pp-vlak2); }
.statuskeuzeknop.actief { border-width: 2px; padding: 8px 11px; }
.statusbalkjes { display: flex; gap: 3px; align-items: center;
  flex: none; width: 112px; }

 
 
.pp-dropzone { position: relative; transition: background-color .12s ease; }
.pp-dropzone.is-droppen {
  background: color-mix(in srgb, var(--pp-navy) 7%, transparent); }
 
.pp-dropzone.is-droppen::after {
  content: ''; position: absolute; inset: -2px; pointer-events: none;
  border: 2px dashed var(--pp-navy); border-radius: 10px; }
 
.pp-dropzone-notitie { grid-column: 1 / -1; margin: .4rem 0 0;
  font-size: .78rem; font-weight: 600; color: var(--pp-tekst); }
 
.pp-dropzone-notitie::before { content: '\26A0\FE0E  '; color: var(--pp-goud); }

 
.pp-naam-kort { display: inline-flex; max-width: 100%; min-width: 0;
  vertical-align: bottom; }
.pp-naam-kort-begin { white-space: pre; overflow: hidden; text-overflow: ellipsis;
  min-width: 2em; flex: 0 1 auto; }
.pp-naam-kort-vast { white-space: pre; flex: 0 0 auto; }

 
.pp-venster-doos { position: relative; }
.pp-venster-kruis { position: sticky; top: 0; float: right; z-index: 6;
  margin: -10px -12px 4px 10px; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--pp-line, #d9e2ec); border-radius: 50%;
  background: #fff; color: var(--pp-navy, #001C36); font: inherit;
  font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 4px rgba(7, 27, 52, .12); }
.pp-venster-kruis:hover { background: var(--pp-blue-50, #ECF5FF); }
.pp-venster-kruis:focus-visible { outline: 2px solid #C81F87; outline-offset: 2px; }
.pp-venster-doos--los > .pp-venster-kruis { position: absolute; top: 12px;
  right: 14px; float: none; margin: 0; }