:root {
  --dp-closed-bg: #4b5563;
  --dp-past-bg: #374151;
  --dp-hold-stripe: rgba(250, 204, 21, .50);
  --dp-hold-gap: rgba(0,0,0,0);
}
.dp-slot-past { filter: grayscale(50%); opacity: .65; }
.dp-slot-closed { background: var(--dp-closed-bg) !important; color: #e5e7eb !important; cursor: not-allowed !important; position: relative; }
.dp-slot-closed::after { content: "Geblokkeerd"; position: absolute; inset: 4px; font-size: 11px; text-align: center; line-height: 1.2; opacity: .9; }
.dp-slot-free .dp-close-button { position:absolute; top:4px; right:4px; width:18px; height:18px; border-radius:50%; border:1px solid #fff; background: rgba(31,41,55,.85); color:#fff; font-weight:700; display:none; align-items:center; justify-content:center; cursor:pointer; user-select:none; }
.dp-slot-free:hover .dp-close-button { display:flex; }
.dp-hold-span { background: repeating-linear-gradient(45deg,var(--dp-hold-stripe),var(--dp-hold-stripe) 8px,var(--dp-hold-gap) 8px,var(--dp-hold-gap) 14px); border: 1px dashed #facc15; color:#111827; }


/* === Afkoppelen / Trailer-hold stripes on slot cards ===
   quick_booking_painter.js adds: .slot-card.detached.detached-<mode>
   We style inbound as geel gestreept, outbound as blauw gestreept.
*/
.slot-card.detached.detached-inbound,
.slot-card.detached.detached-nonfood {
  background-color: rgba(250, 204, 21, .18) !important;
  background-image: repeating-linear-gradient(45deg,
    rgba(250, 204, 21, .55) 0px,
    rgba(250, 204, 21, .55) 7px,
    rgba(0, 0, 0, 0) 7px,
    rgba(0, 0, 0, 0) 14px
  ) !important;
  border: 1px dashed rgba(250, 204, 21, .95) !important;
  color: #111827 !important;
}

/* Stronger override (beats injected .slot-card.busy.mode-... background shorthand) */
.slot-card.busy.detached.detached-inbound,
.slot-card.busy.detached.detached-nonfood {
  background: repeating-linear-gradient(45deg,
    rgba(250, 204, 21, .55) 0px,
    rgba(250, 204, 21, .55) 7px,
    rgba(0, 0, 0, 0) 7px,
    rgba(0, 0, 0, 0) 14px
  ), rgba(250, 204, 21, .18) !important;
  background-color: rgba(250, 204, 21, .18) !important;
  background-image: repeating-linear-gradient(45deg,
    rgba(250, 204, 21, .55) 0px,
    rgba(250, 204, 21, .55) 7px,
    rgba(0, 0, 0, 0) 7px,
    rgba(0, 0, 0, 0) 14px
  ) !important;
  border: 1px dashed rgba(250, 204, 21, .95) !important;
}

.slot-card.detached.detached-outbound {
  background-color: rgba(59, 130, 246, .14) !important;
  background-image: repeating-linear-gradient(45deg,
    rgba(59, 130, 246, .50) 0px,
    rgba(59, 130, 246, .50) 7px,
    rgba(0, 0, 0, 0) 7px,
    rgba(0, 0, 0, 0) 14px
  ) !important;
  border: 1px dashed rgba(59, 130, 246, .85) !important;
}

/* Stronger override for outbound detached */
.slot-card.busy.detached.detached-outbound {
  background: repeating-linear-gradient(45deg,
    rgba(59, 130, 246, .50) 0px,
    rgba(59, 130, 246, .50) 7px,
    rgba(0, 0, 0, 0) 7px,
    rgba(0, 0, 0, 0) 14px
  ), rgba(59, 130, 246, .14) !important;
  background-color: rgba(59, 130, 246, .14) !important;
  background-image: repeating-linear-gradient(45deg,
    rgba(59, 130, 246, .50) 0px,
    rgba(59, 130, 246, .50) 7px,
    rgba(0, 0, 0, 0) 7px,
    rgba(0, 0, 0, 0) 14px
  ) !important;
  border: 1px dashed rgba(59, 130, 246, .85) !important;
}

/* === Trailer afkoppelen / hold (main grid) ===
   script.js adds: .slot-card.slot-hold when has_trailer_hold=1
   Desired UX: inbound/nonfood = geel gestreept kaartje (niet rood), outbound = blauw gestreept.
*/
.slot-card.slot-hold.mode-inbound,
.slot-card.slot-hold.mode-nonfood {
  /*
    Belangrijk: script.js injecteert later een rule met
      .slot-card.busy.mode-inbound { background: ... !important; }
    De shorthand 'background' overschrijft óók background-image.
    Daarom zetten we hier óók een eigen shorthand met hogere specificiteit
    (.slot-hold extra class) zodat de gele strepen altijd winnen.
  */
  background: repeating-linear-gradient(135deg,
    rgba(250, 204, 21, .55) 0px,
    rgba(250, 204, 21, .55) 8px,
    rgba(0, 0, 0, 0) 8px,
    rgba(0, 0, 0, 0) 16px
  ), rgba(250, 204, 21, .18) !important;
  background-color: rgba(250, 204, 21, .18) !important;
  background-image: repeating-linear-gradient(135deg,
    rgba(250, 204, 21, .55) 0px,
    rgba(250, 204, 21, .55) 8px,
    rgba(0, 0, 0, 0) 8px,
    rgba(0, 0, 0, 0) 16px
  ) !important;
  border-color: rgba(250, 204, 21, .95) !important;
}

.slot-card.slot-hold.mode-outbound {
  background: repeating-linear-gradient(135deg,
    rgba(59, 130, 246, .50) 0px,
    rgba(59, 130, 246, .50) 8px,
    rgba(0, 0, 0, 0) 8px,
    rgba(0, 0, 0, 0) 16px
  ), rgba(37, 99, 235, .14) !important;
  background-color: rgba(37, 99, 235, .14) !important;
  background-image: repeating-linear-gradient(135deg,
    rgba(59, 130, 246, .50) 0px,
    rgba(59, 130, 246, .50) 8px,
    rgba(0, 0, 0, 0) 8px,
    rgba(0, 0, 0, 0) 16px
  ) !important;
  border-color: rgba(59, 130, 246, .90) !important;
}

/* If a status explicitly sets background-image inline, that can override this.
   The painter now uses background-color to avoid clobbering stripes. */


/* =========================
   Dock watermark (scroll context)
   =========================
   Zodat je bij verticaal scrollen altijd ziet in welke dock-kolom je zit,
   zonder sticky headers.
   Wordt gezet door script.js op .dock-body-wrap[data-dock-label="DOCK X"].
*/
.dock-body-wrap{ position: relative; }

.dock-body-wrap[data-dock-label]::before{
  /* PATCH-44: uitgezet — dock-headers zijn nu sticky, watermerk is overbodig. */
  display: none !important;
  content: attr(data-dock-label);
  position: absolute;
  /*
    Default centered in the column.
    script.js updates --dock-wm-top so the watermark stays around the middle
    of the viewport while you scroll.
  */
  top: var(--dock-wm-top, 50%);
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* iets beter leesbaar */
  color: rgba(255,255,255,.12);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Extra subtiel op small screens */
@media (max-width: 1100px){
  .dock-body-wrap[data-dock-label]::before{ font-size: 34px; color: rgba(255,255,255,.10); }
}