/* ============================================================================
   deck.css — owns #truck-canvas, .grid-overlay, .section-panel/divider/label,
   and the .dim-label-top / .dim-label-side dimension captions.
   No other folder should override these rules.
   ============================================================================ */

/* ── Dimension captions (beside the canvas) ─────────────────────────────── */
.dim-label-top, .dim-label-side {
  position: absolute;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-500);
  font-feature-settings: 'tnum';
  pointer-events: none;
  white-space: nowrap;
}
.dim-label-top  { top: -22px; left: 50%; transform: translateX(-50%); }
.dim-label-side { right: -8px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }

/* ── Truck bed canvas ───────────────────────────────────────────────────── */
.truck-canvas {
  position: relative;
  background:
    linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 2px rgba(15,23,42,.04),
    var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* ── Grid overlay ───────────────────────────────────────────────────────── */
.grid-overlay {
  position: absolute;
  inset: 0;
  /* Minor grid + every-5 major lines (background-size uses --grid-step from JS) */
  background-image:
    linear-gradient(to right, rgba(15,23,42,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.12) 1px, transparent 1px),
    linear-gradient(to right, rgba(15,23,42,.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.2) 1px, transparent 1px);
  background-size:
    var(--grid-step, 20px) var(--grid-step, 20px),
    var(--grid-step, 20px) var(--grid-step, 20px),
    calc(var(--grid-step, 20px) * 5) calc(var(--grid-step, 20px) * 5),
    calc(var(--grid-step, 20px) * 5) calc(var(--grid-step, 20px) * 5);
  pointer-events: none;
}

/* Section panels — one per trailer section in the overhead view. Replaces
   the single .grid-overlay when the active trailer type has multiple sections,
   communicating that a link/drawbar combo is two physically separate decks. */
.truck-canvas.has-section-panels .grid-overlay { display: none; }

.section-panel {
  background-color: #f7fafc;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.14) 1px, transparent 1px),
    linear-gradient(to right, rgba(15,23,42,.24) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.24) 1px, transparent 1px);
  background-size:
    var(--grid-step, 20px) var(--grid-step, 20px),
    var(--grid-step, 20px) var(--grid-step, 20px),
    calc(var(--grid-step, 20px) * 5) calc(var(--grid-step, 20px) * 5),
    calc(var(--grid-step, 20px) * 5) calc(var(--grid-step, 20px) * 5);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow:
    inset 0 1px 2px rgba(15,23,42,.06),
    0 1px 3px rgba(15,23,42,.06);
}

/* Physical gap between coupled trailer decks (top view, multi-section only) */
.section-gap {
  position: absolute;
  background: #d9dee5;
  border-left: 2px solid rgba(71,85,105,.68);
  border-right: 2px solid rgba(71,85,105,.68);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
}

/* Section dividers / labels drawn by deck/deckSections.js */
.section-divider {
  position: absolute;
  background: rgba(15,23,42,.18);
  pointer-events: none;
  z-index: 2;
}
.section-label {
  position: absolute;
  padding: 1px 6px;
  background: rgba(15,23,42,.7);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: var(--r-xs);
  pointer-events: none;
  z-index: 2;
  text-transform: uppercase;
}