/* === FIX: laatste boekingskaart volledig zichtbaar ========================
   Plaats/laat laden NA je bestaande styles. Werkt met jouw DOM:
   .dock-body-wrap > .dock-body.grid.grid--cells + .dock-overlay.grid.grid--overlay
============================================================================ */

/* Scrollcontainer extra "lucht" onderaan zodat laatste rij niet wegvalt */
.dock-body-wrap{
  box-sizing: border-box;
  overflow-y: auto !important;
  /* 1 slothoogte + 1 gap + extra marge, zodat onder de footer niets wordt afgesneden */
  padding-bottom: calc(var(--slot-h, 48px) + var(--slot-gap, 8px) + 64px) !important;
}

/* Voeg één extra grid-rij toe (spacer) aan zowel de cell-grid als de overlay-grid */
.dock-body.grid::after,
.dock-overlay.grid::after{
  content: "";
  grid-column: 1 / -1;
  /* het ::after element telt als extra item → door grid-auto-rows krijg je 1 extra rij */
}

/* Zorg dat het overlay-element nooit de rand/box-shadow "afknipt" */
.dock-overlay.grid{
  overflow: visible !important;
  pointer-events: none; /* overlay blokkeert geen klikken */
}

/* === NIEUW: Toon grijze "geblokkeerde" vrije cellen (buiten het effectieve venster) === */
.card-cell.free-old{
  position: relative;
}
.card-cell.free-old::before{
  content: "";
  position: absolute; inset: 2px;
  border-radius: 8px;
  background: repeating-linear-gradient(
    135deg,
    rgba(148,163,184,.18),
    rgba(148,163,184,.18) 8px,
    rgba(148,163,184,.10) 8px,
    rgba(148,163,184,.10) 16px
  );
  pointer-events: none;
}

/* === Outbound COMBI-kaart (zelfde referentie) ========================= */

/* Geef gecombineerde outbound-kaarten een iets opvallendere rand en relatieve positie */
.slot-card.outbound-combi{
  position: relative;
  box-shadow: 0 0 0 2px rgba(56,189,248,0.9);
}

/* Badge rechtsboven in de kaart met COMBI-label */
.slot-card.outbound-combi .badge-combi{
  position: absolute;
  top: 4px;
  right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(15,23,42,0.95);
  border: 1px solid rgba(56,189,248,0.9);
  color: #e0f2fe;
  pointer-events: none;
}

/* === Booking popup: checkbox sizing (Afkoppelen / Afwijking) =============
   In sommige browsers negeren checkboxes width/height.
   Daarom gebruiken we een scale zodat ze ~50% kleiner zijn en strak uitlijnen.
============================================================================ */
#bmDetachCheck,
#bmDeviationCheck,
#obDetachCheck{
  transform: scale(0.6);
  transform-origin: left center;
  margin: 0;
}

/* Labels + checkbox netjes onder elkaar (strakker) */
#bookingModal .bm-row{
  align-items: center;
}

/* === Wachtrij dialoog in dockplanner-stijl (C2) ========================= */
#dlgQueue::backdrop{
  background: rgba(0,0,0,0.6);
}

#dlgQueue{
  border: none;
  padding: 0;
  background: transparent;
}

#dlgExpired::backdrop{
  background: rgba(0,0,0,0.6);
}

#dlgExpired{
  border: none;
  padding: 0;
  background: transparent;
}

/* Afgeronde transporten: zelfde modal-stijl als Vervallen */
#dlgCompleted::backdrop{
  background: rgba(0,0,0,0.6);
}

#dlgCompleted{
  border: none;
  padding: 0;
  background: transparent;
}

.queue-panel{
  background: #021322;
  color: #f5f7ff;
  border-radius: 16px;
  padding: 20px 24px;
  min-width: 520px;
  max-width: 820px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  border: 1px solid #123648;
  font-family: inherit;
}

.queue-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.queue-header h2{
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.queue-close{
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.queue-body{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 65vh;
  overflow-y: auto;
}

.queue-row{
  display: grid;
  grid-template-columns: 64px minmax(140px,1fr) minmax(140px,1fr) minmax(180px,1fr) 88px;
  column-gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(4,32,49,0.92);
  border: 1px solid #164258;
  font-size: 13px;
}

.queue-row:nth-child(even){
  background: rgba(4,32,49,0.98);
}

.queue-time{ font-weight: 600; }

.queue-ref{
  all: unset;
  cursor: pointer;
  color: #4ecbff;
  font-weight: 600;
}
.queue-ref:hover{ text-decoration: underline; }

.queue-carrier{ opacity: 0.92; }
.queue-subtle{ font-size: 11px; opacity: 0.75; margin-top: 2px; }

.queue-eta{
  font-size: 11px;
  opacity: 0.85;
}

.queue-actions{
  display: flex;
  justify-content: flex-end;
}

.queue-approve{
  border: 1px solid rgba(78,203,255,.55);
  background: rgba(78,203,255,.14);
  color: #d9f3ff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.queue-approve:hover{
  background: rgba(78,203,255,.22);
}

.queue-approve.disabled,
.queue-approve:disabled{
  opacity: .4;
  cursor: not-allowed;
}

.queue-approve.busy{
  opacity: .65;
}

/* Explain regels onder de rij */
.queue-explain{
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.queue-explain .qe-item{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 860px){
  .queue-panel{ min-width: 0; width: calc(100vw - 40px); }
  .queue-row{
    grid-template-columns: 64px minmax(140px,1fr) minmax(140px,1fr);
    grid-template-rows: auto auto auto;
    row-gap: 4px;
  }
  .queue-eta{ grid-column: 2 / -1; }
  .queue-actions{ grid-column: 2 / -1; justify-content: flex-start; }
}


/* KPI's boven inbound/non-food docks */
.dock-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  /* PATCH-44: sticky blijft geldig — deze selector overrulet style_base.css. */
  position: sticky;
  top: 96px;
  z-index: 20;
  background: var(--panel);
}
.time-col-card .dock-header{ position: static; }
/* Dock-title: één regel, ellipsis bij overflow, zodat KPI-tegels ruimte houden. */
.dock-header .dock-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}
.dock-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  line-height:1;
  opacity:0.95;
}
.dock-kpi{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:10px;
  background: rgba(15,23,42,.35);
}
.dock-kpi .kpi-ico{ opacity:0.9; }
.dock-kpi .kpi-val{
  font-weight:700;
  color: rgba(226,232,240,.95);
  letter-spacing:0.2px;
}
.dock-kpi .kpi-suf{ opacity:0.75; }

/* ==============================
   Lite profile (feature flags)
   When superadmin disables the advanced modules, we hide the UI parts here.
   Activated by: body.dp-lite (set by /api/features.php + features_boot.js)
   ============================== */
body.dp-lite #btnQueueToggle,
body.dp-lite #queueBadge,
body.dp-lite #btnExpiredToggle,
body.dp-lite #dlgExpired,
body.dp-lite #cmChooseBlock,
body.dp-lite #cmBlock,
body.dp-lite #bmDetachRow,
body.dp-lite #bmDetachControls,
body.dp-lite #bmDetachSection,
body.dp-lite #bmDetachCheck,
body.dp-lite #obDetachRow,
body.dp-lite #obDetachControls,
body.dp-lite #obDetachCheck{
  display:none !important;
}

/* Booking modal: hide the detach/block sections if present */
body.dp-lite .bm-detach,
body.dp-lite .bm-block,
body.dp-lite .block-controls,
body.dp-lite .queue-controls,
body.dp-lite .expired-controls{
  display:none !important;
}

/* ==============================
   Lite profile (feature flags)
   Advanced modules hidden when superadmin turns them off.
   Activated by: body.dp-lite (set by features_boot.js)
   ============================== */
body.dp-lite #btnQueueToggle,
body.dp-lite #queueBadge,
body.dp-lite #btnExpiredToggle,
body.dp-lite #dlgExpired,
body.dp-lite #cmChooseBlock,
body.dp-lite #cmBlock,
body.dp-lite #bmDetachCheck,
body.dp-lite label[for="bmDetachCheck"],
body.dp-lite #bmDetachFields,
body.dp-lite #obDetachCheck,
body.dp-lite label[for="obDetachCheck"],
body.dp-lite #obDetachFields {
  display: none !important;
}