/* Line layout builder tab styles */

.ll-page-header {
  margin-bottom: 6px;
}

.ll-page-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx1);
}

.ll-empty {
  padding: 24px;
  color: var(--tx3);
  font-size: 13px;
}

.ll-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ll-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 12px;
}

.ll-toolbar-primary {
  border-bottom: 1px solid var(--border);
}

.ll-toolbar-options {
  background: var(--bg1);
  padding-top: 10px;
  padding-bottom: 10px;
}

.ll-toolbar-options[hidden] {
  display: none;
}

.ll-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.ll-toolbar-spacer {
  flex: 1;
  min-width: 8px;
}

.ll-toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  flex-shrink: 0;
}

.ll-toolbar-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
  white-space: nowrap;
}

.ll-options-toggle {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx2);
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.ll-options-toggle:hover {
  background: var(--bg2);
  color: var(--tx1);
}

.ll-options-toggle.is-open {
  color: var(--accent);
  border-color: var(--accent);
}

.ll-layer-pills {
  gap: 3px;
}

.ll-layer-pills .btn {
  font-size: 11px;
  padding: 3px 8px;
  min-height: 0;
  line-height: 1.3;
}

.ll-options-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
}

.ll-options-section + .ll-options-section {
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.ll-sync-inline {
  gap: 6px;
  font-size: 11px;
}

.ll-sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ll-sync-dot.ok { background: var(--tx-ok); }
.ll-sync-dot.stale { background: var(--tx-warn); }

.ll-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--tx2);
  cursor: pointer;
  user-select: none;
}

.ll-toggle input { accent-color: var(--accent); }

.ll-export-group { flex-wrap: nowrap; }

.ll-sync-ok { color: var(--tx-ok); }
.ll-sync-stale { color: var(--tx-warn); font-weight: 600; }

.ll-versions .ll-version-select {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg1);
  color: var(--tx1);
  max-width: 220px;
}

.ll-tip-meta { font-size: 11px; color: var(--tx3); }
.ll-tip-flag { font-size: 11px; color: var(--tx-warn); font-weight: 600; }
.ll-tip-title { font-size: 12px; color: var(--tx2); }

/* Canvas + legend side-by-side */
.ll-main {
  display: flex;
  gap: 0;
  align-items: stretch;
  min-height: 640px;
  height: calc(100vh - 168px);
  max-height: 960px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #f8f9fb;
}

.ll-main.ll-legend-right {
  flex-direction: row;
}

.ll-main.ll-legend-left {
  flex-direction: row-reverse;
}


.ll-legend {
  flex: 0 0 300px;
  width: 300px;
  max-width: 34vw;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg1);
  border-left: 1px solid var(--border);
  scrollbar-width: thin;
}

.ll-main.ll-legend-left .ll-legend {
  border-left: none;
  border-right: 1px solid var(--border);
}

.ll-legend-inner {
  padding: 12px 14px 16px;
}

.ll-legend-header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.ll-legend-heading {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tx1);
}

.ll-legend-hint {
  margin: 0;
  font-size: 11px;
  color: var(--tx3);
  line-height: 1.35;
}

.ll-layer-info {
  margin: 6px 0 10px;
  border: 0.5px solid var(--bd3);
  border-radius: 5px;
  background: var(--bg2);
  font-size: 11px;
}
.ll-layer-info-summary {
  padding: 5px 9px;
  cursor: pointer;
  color: var(--tx3);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  user-select: none;
  list-style: none;
}
.ll-layer-info-summary::-webkit-details-marker { display: none; }
.ll-layer-info[open] .ll-layer-info-summary { color: var(--tx2); border-bottom: 0.5px solid var(--bd3); }
.ll-layer-info-list {
  margin: 0;
  padding: 7px 10px 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--tx2);
  font-size: 11px;
  line-height: 1.45;
}
.ll-layer-info-list b { color: var(--tx1); font-weight: 600; }

.ll-legend-section {
  margin-bottom: 14px;
}

.ll-legend-section-title {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx3);
}

.ll-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ll-legend-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: default;
  transition: background 0.12s, border-color 0.12s;
}

.ll-legend-item[data-ll-node] {
  cursor: pointer;
}

.ll-legend-item:hover,
.ll-legend-item-active {
  background: var(--bg2);
  border-color: var(--border);
}

.ll-legend-item-active {
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.25);
}

.ll-legend-swatch {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.ll-legend-body {
  flex: 1;
  min-width: 0;
}

.ll-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ll-legend-tag {
  font-size: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--tx1);
}

.ll-legend-flag {
  font-size: 10px;
  font-weight: 600;
  color: var(--tx-warn);
  background: var(--bg-warn);
  padding: 1px 5px;
  border-radius: 3px;
}

.ll-legend-title,
.ll-legend-meta,
.ll-legend-detail {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ll-legend-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx1);
  line-height: 1.35;
  margin-top: 2px;
}

.ll-legend-meta {
  font-size: 11px;
  color: var(--tx3);
  line-height: 1.35;
  margin-top: 2px;
}

.ll-legend-detail {
  font-size: 11px;
  color: var(--tx2);
  line-height: 1.4;
  margin-top: 4px;
}

.ll-mflow-key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 2px;
}
.ll-mflow-key-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--tx2);
}
.ll-mflow-key-line {
  flex-shrink: 0;
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
}
.ll-mflow-key-inline {
  background: #6366f1;
}
.ll-mflow-key-staged {
  background: repeating-linear-gradient(
    90deg,
    #6366f1 0, #6366f1 4px,
    transparent 4px, transparent 8px
  );
  opacity: 0.55;
}
.ll-mflow-key-note {
  font-size: 10px;
  color: var(--tx3);
  padding-top: 2px;
}

.ll-canvas-host {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: none;
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: #f8f9fb;
}

.ll-zoom-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ll-zoom-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx2);
  min-width: 42px;
  text-align: center;
}

.ll-canvas-host.ll-edit-mode {
  border-color: #2563eb;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.ll-canvas-host.ll-edit-mode .ll-canvas {
  cursor: grab;
}

.ll-canvas-host.ll-resizing .ll-canvas {
  cursor: nwse-resize;
}

.ll-canvas-host.ll-dragging:not(.ll-resizing) .ll-canvas {
  cursor: grabbing;
}

.ll-canvas-host.ll-dragging .ll-canvas {
  cursor: grabbing;
}

.ll-canvas-host.ll-drag-blocked .ll-canvas {
  cursor: not-allowed;
}

.ll-toolbar .btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.ll-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* SVG renderer (ll_svg=1 flag). Visual parity with .ll-canvas while we
   port the remaining layers. */
.ll-svg {
  display: block;
  width: 100%;
  height: 100%;
  background: #f8f9fb;
  user-select: none;
  font-family: system-ui, -apple-system, sans-serif;
}

.ll-svg-station-rect {
  fill: #ffffff;
  stroke: #94a3b8;
  stroke-width: 1.2;
  transition: stroke 0.12s, fill 0.12s;
}

.ll-svg-station:hover .ll-svg-station-rect,
.ll-svg-station.is-selected .ll-svg-station-rect {
  fill: #eff6ff;
  stroke: #2563eb;
  stroke-width: 2.5;
  cursor: pointer;
}

.ll-svg-station-tag {
  fill: #0b1527;
  font-family: 'JetBrains Mono', system-ui, monospace;
  font-weight: 700;
  font-size: 20px;
  pointer-events: none;
}

/* Concise mode (Material/Operator/Quality/Safety/Logistics/Utilities views).
   No description, marginally larger centered tag. */
.ll-svg-station-tag-lg {
  font-size: 24px;
}

.ll-svg-station-desc {
  fill: #475569;
  font-weight: 600;
  font-size: 11px;
  pointer-events: none;
}

.ll-svg-station:hover .ll-svg-station-tag,
.ll-svg-station.is-selected .ll-svg-station-tag {
  fill: #1d4ed8;
}

.ll-svg-belt {
  /* fill: none + stroke handled inline */
}

.ll-svg-rail-center {
  stroke-dasharray: 0;
}

/* overlay layers: bins, flow arrows, pallets, cranes */
.ll-svg-bin {
  fill: #ffffff;
  stroke-width: 2;
  cursor: pointer;
}
.ll-svg-bin-label { font: 600 13px system-ui; pointer-events: none; }
.ll-svg-bin-sub { font: 500 11px system-ui; fill: #334155; pointer-events: none; }
.ll-svg-pallet-tower { fill: #cbd5e1; stroke: #64748b; }
.ll-svg-pallet-label { font: 600 11px system-ui; fill: #475569; text-anchor: middle; }
.ll-svg-crane-tower { fill: #6b7280; }
.ll-svg-crane-arm { stroke: #d97706; stroke-width: 5; stroke-linecap: round; }
.ll-svg-crane-arm-secondary { stroke: #9ca3af; }
.ll-svg-crane-pivot { fill: #374151; }
.ll-svg-flow-edge { fill: none; stroke-linecap: round; }
.ll-svg-flow-edge-staged { stroke-dasharray: 5 5; opacity: 0.4; }
.ll-svg-flow-edge-online { stroke-width: 2.5; opacity: 0.8; }

/* Quality markers + reject flows */
.ll-svg-quality-marker {
  cursor: pointer;
}
.ll-svg-quality-marker-bg {
  stroke-width: 1;
}
.ll-svg-quality-marker-text {
  font: 600 11px system-ui;
  pointer-events: none;
}
.ll-svg-reject-line {
  fill: none;
  stroke: #dc2626;
  stroke-opacity: 0.7;
  stroke-width: 2;
  stroke-dasharray: 5 3;
}
.ll-svg-reject-label {
  font: 700 11px system-ui;
  fill: #dc2626;
  text-anchor: middle;
  pointer-events: none;
}

.ll-canvas-host.ll-edit-mode .ll-svg-station {
  cursor: grab;
}
.ll-canvas-host.ll-edit-mode .ll-svg-station:active {
  cursor: grabbing;
}

.ll-tooltip {
  position: fixed;
  z-index: 9000;
  pointer-events: none;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.45;
  max-width: 320px;
  color: var(--tx1);
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.ll-props-panel,
.ll-utilities-editor {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ll-props-panel label,
.ll-utilities-editor label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tx3);
  margin-top: 6px;
  margin-bottom: 2px;
}
.ll-props-panel input[type="text"],
.ll-props-panel textarea,
.ll-utilities-editor input[type="text"],
.ll-utilities-editor textarea,
.ll-utilities-editor select {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg0);
  color: var(--tx1);
}
.ll-props-panel textarea,
.ll-utilities-editor textarea {
  min-height: 32px;
  resize: vertical;
}
.ll-props-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--tx1);
  margin-bottom: 4px;
}
.ll-props-meta {
  font-size: 11px;
  color: var(--tx3);
  margin: 4px 0;
}
.ll-props-empty {
  margin: 8px 0;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--tx3);
  background: var(--bg0);
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.ll-utilities-table {
  border-collapse: collapse;
  font-size: 12px;
}
.ll-utilities-table th,
.ll-utilities-table td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ll-utilities-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tx3);
}

@media print {
  .ll-canvas-host { height: auto; min-height: 400px; }
}

/* ── SVG zone + operator overlay layers ─────────────────────────────────── */
.ll-svg-zone-rect {
  fill-opacity: 1;
  stroke-width: 1.5;
  cursor: pointer;
  transition: stroke-width 0.12s;
}
.ll-svg-zone:hover .ll-svg-zone-rect,
.ll-svg-zone.is-selected .ll-svg-zone-rect {
  stroke-width: 2.5;
}
.ll-svg-zone-label {
  font: 600 11px system-ui;
  pointer-events: none;
}
.ll-svg-zone-note {
  font: 400 10px system-ui;
  fill: #1e40af;
  pointer-events: none;
}
.ll-svg-op-path {
  fill: none;
  stroke: #0891b2;
  stroke-width: 2.5;
  stroke-dasharray: 8 6;
}
.ll-svg-op-path-label {
  font: 600 12px system-ui;
  fill: #0e7490;
}
.ll-svg-op-path-label-bg {
  fill: #ffffff;
}
.ll-svg-staff-badge-bg {
  fill: #ffffff;
  stroke: #0891b2;
  stroke-width: 1.2;
}
.ll-svg-staff-badge-text {
  font: 600 10px system-ui;
  fill: #0f766e;
  text-anchor: middle;
  pointer-events: none;
}
.ll-svg-mhandler-trail {
  fill: none;
  stroke-dasharray: 6 4;
  stroke-width: 1.5;
}

/* Utility paths + drops (SVG) */
.ll-svg-util-path {
  fill: none;
  stroke-width: 2.5;
}
.ll-svg-util-label {
  font: 600 11px system-ui;
  text-anchor: middle;
  pointer-events: none;
}
.ll-svg-util-drop-bg {
  fill-opacity: 0.2;
  stroke-width: 1.5;
}
.ll-svg-util-drop-letter {
  font: 700 10px system-ui;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.ll-svg-util-drop-label {
  font: 400 9px system-ui;
  text-anchor: middle;
  pointer-events: none;
}

/* Logistics paths (SVG) */
.ll-svg-logistics-path {
  fill: none;
  pointer-events: none;
}
.ll-svg-logistics-label {
  font: 600 11px system-ui;
  fill: #047857;
  text-anchor: middle;
  pointer-events: none;
}
.ll-svg-logistics-desc {
  font: 400 9px system-ui;
  fill: #047857;
  text-anchor: middle;
  pointer-events: none;
}

/* Callout pills (SVG) */
.ll-svg-callout {
  pointer-events: none;
}
.ll-svg-callout-leader {
  stroke: rgba(100, 116, 139, 0.35);
  stroke-width: 1;
}
.ll-svg-callout-pill {
  fill: #ffffff;
  stroke: #cbd5e1;
  stroke-width: 1;
}
.ll-svg-callout-pill-dark {
  fill: #0b1527;
  stroke: rgba(255, 255, 255, 0.2);
}
.ll-svg-callout-tag-disc {
  fill: #0b1527;
}
.ll-svg-callout-tag-text {
  font: 700 11px 'JetBrains Mono', system-ui, monospace;
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: middle;
}
.ll-svg-callout-tag-top {
  font: 700 14px 'JetBrains Mono', system-ui, monospace;
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: middle;
}
.ll-svg-callout-title-line {
  font: 600 11px system-ui;
  fill: rgba(255, 255, 255, 0.92);
}
.ll-svg-callout-sub {
  font: 600 11px system-ui;
  fill: #475569;
}

/* Worker sprite + headcount badge (SVG) */
/* Regular station workers — no pointer events (interact via station). */
.ll-svg-worker { pointer-events: none; }
/* Special workers — freely draggable, pointer events on their group. */
.ll-svg-sw { pointer-events: all; cursor: move; }
.ll-svg-sw-ring {
  fill: rgba(251,191,36,0.15);
  stroke: #f59e0b;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.ll-svg-sw-sprite { opacity: 0.92; }
.ll-svg-sw-label-bg { fill: #f59e0b; rx: 3; }
.ll-svg-sw-label {
  font: 600 9px system-ui, sans-serif;
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: middle;
}
.ll-svg-worker-sprite {
  /* Image element — no fill/stroke needed. */
}
.ll-svg-worker-badge {
  fill: #0891b2;
  stroke: #ffffff;
  stroke-width: 1.5;
}
.ll-svg-worker-count {
  font: 700 11px system-ui;
  fill: #ffffff;
}

/* Mode badge (top-left in-canvas label) */
.ll-svg-badge {
  font: 600 12px system-ui;
  fill: #6b7280;
}

/* Dim production layer when a non-process overlay is active. */
.ll-svg.ll-svg-dim-process .ll-svg-layer-stations,
.ll-svg.ll-svg-dim-process .ll-svg-layer-workers,
.ll-svg.ll-svg-dim-process .ll-svg-layer-conveyors {
  opacity: 0.42;
}

/* Edit-mode resize handles + selection outline (SVG) */
.ll-svg-handle {
  fill: #ffffff;
  stroke: #2563eb;
  stroke-width: 1.5;
  cursor: crosshair;
}
.ll-svg-handle:hover { fill: #dbeafe; }
.ll-svg-handle-nw, .ll-svg-handle-se { cursor: nwse-resize; }
.ll-svg-handle-ne, .ll-svg-handle-sw { cursor: nesw-resize; }
.ll-svg-handle-outline {
  pointer-events: none;
}

/* Selection outline applied to any node group with [data-node-id]. */
.ll-svg .is-selected > rect:first-child,
.ll-svg .is-selected > .ll-svg-station-rect,
.ll-svg .is-selected > .ll-svg-zone-rect,
.ll-svg .is-selected > .ll-svg-bin {
  stroke: #2563eb;
  stroke-width: 2.5;
}

/* While dragging, suppress hover transitions to keep motion smooth. */
.ll-canvas-host.ll-dragging .ll-svg-station-rect,
.ll-canvas-host.ll-dragging .ll-svg-zone-rect {
  transition: none;
}

/* ── Material layer — per-station panel in sidebar legend ── */
.ll-mat-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ll-mat-station-block {
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--border);
}
.ll-mat-station-block:last-child { border-bottom: none; }

.ll-mat-station-hdr {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 5px;
}

.ll-mat-tag {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--tx1);
  flex-shrink: 0;
}

.ll-mat-station-title {
  font-size: 10px;
  color: var(--tx2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ll-mat-group {
  margin-bottom: 4px;
}

.ll-mat-group-hdr {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.ll-mat-in   { color: #0369a1; }
.ll-mat-out  { color: #b91c1c; }
.ll-mat-rep  { color: #065f46; }
.ll-mat-tool { color: #9ca3af; }
.ll-mat-flow { color: #6d28d9; }

.ll-mat-items {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ll-mat-items li {
  font-size: 10px;
  color: var(--tx2);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ll-mat-items-tool li {
  color: var(--tx3);
  font-size: 9.5px;
}

/* SVG material chip text */
.ll-svg-mat-chip-text {
  font-family: system-ui, sans-serif;
  pointer-events: none;
}

/* ── Operator layer — left panel ── */
.ll-op-visual-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.ll-op-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--tx2);
  line-height: 1.35;
}

.ll-op-legend-swatch {
  flex-shrink: 0;
  display: block;
  width: 22px;
  height: 12px;
  border-radius: 3px;
}

.ll-op-swatch-zone {
  background: rgba(59, 130, 246, 0.18);
  border: 1.5px dashed #3b82f6;
}

.ll-op-swatch-worker {
  background: #0891b2;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  align-self: center;
}

.ll-op-swatch-path {
  background: none;
  border-bottom: 2.5px dashed #0891b2;
  border-radius: 0;
  height: 0;
  align-self: center;
}

.ll-op-staffing-hdr {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: 4px;
}

.ll-op-staff-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 2px;
}

.ll-op-staff-count {
  font-size: 15px;
  font-weight: 700;
  color: #0891b2;
  line-height: 1;
  min-width: 14px;
}

.ll-op-staff-role {
  font-size: 11px;
  font-weight: 500;
  color: var(--tx1);
}

.ll-op-staff-skills {
  font-size: 10px;
  color: var(--tx3);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ── Tool Maintenance layer — legend panel content ───────────────────────── */
.ll-tools-empty {
  font-size: 12px;
  color: var(--tx3);
  padding: 8px 4px;
}
.ll-tools-station {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ll-tools-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--tx1);
  background: #f1f5f9;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ll-tools-sub {
  font-weight: 400;
  color: var(--tx3);
  font-size: 10px;
}
.ll-tools-list {
  list-style: none;
  margin: 0;
  padding: 4px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ll-tools-item {
  font-size: 11px;
  color: var(--tx2);
  line-height: 1.4;
  padding-left: 10px;
  position: relative;
}
.ll-tools-item::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: #94a3b8;
}

/* ── Tool Maintenance layer — SVG per-station boxes ──────────────────────── */
.ll-svg-tool-box {
  fill: #ffffff;
  stroke: #bfdbfe;
  stroke-width: 1;
}
.ll-svg-tool-connector {
  stroke: #bfdbfe;
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
.ll-svg-tool-header {
  font: 700 12px system-ui, sans-serif;
  fill: #1e40af;
  dominant-baseline: auto;
}
.ll-svg-tool-divider {
  stroke: #bfdbfe;
  stroke-width: 0.75;
}
.ll-svg-tool-item {
  font: 400 11px system-ui, sans-serif;
  fill: #334155;
  dominant-baseline: auto;
}
.ll-svg-tool-more {
  fill: #94a3b8;
  font-style: italic;
}

/* ── Grouped legend panels (quality, utilities, logistics) ───────────────── */
.ll-layer-hint{font-size:11px;color:var(--tx3);font-style:italic;padding:4px 0;}
.ll-grouped-panel{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.ll-grouped-station{display:flex;flex-direction:column;gap:3px;}
.ll-grouped-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tx2);}
.ll-grouped-chips{display:flex;flex-wrap:wrap;gap:3px;}
.ll-grouped-chip{font-size:9px;font-weight:600;border-radius:3px;padding:1px 6px;white-space:nowrap;}
.ll-grouped-section-label{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin-top:6px;}

/* ── Logistics legend ────────────────────────────────────────────────────── */
.ll-logistics-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tx2);padding:2px 0;}
.ll-logistics-swatch{display:inline-block;width:18px;height:4px;border-radius:2px;flex-shrink:0;}
.ll-logistics-swatch-dock{background:#059669;}
.ll-logistics-swatch-rep{background:#d97706;}
.ll-logistics-swatch-fork{background:#f59e0b;}
.ll-logistics-swatch-agv{background:#06b6d4;}
.ll-logistics-stop-tag{font-weight:600;font-size:10px;}
.ll-logistics-stop-meta{font-size:10px;color:var(--tx3);}

/* ── Utility dot swatch ──────────────────────────────────────────────────── */
.ll-util-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* ── SVG replenishment stop label ────────────────────────────────────────── */
.ll-svg-rep-stop-label{pointer-events:none;font:600 10px system-ui,sans-serif;}

/* ── Safety zone color key ───────────────────────────────────────────────── */
.ll-safety-color-key{display:flex;flex-direction:column;gap:5px;margin-top:4px;}
.ll-safety-key-row{display:flex;align-items:baseline;gap:6px;font-size:11px;}
.ll-safety-key-dot{display:inline-block;width:10px;height:10px;border-radius:2px;flex-shrink:0;opacity:0.55;margin-top:1px;}
.ll-safety-key-label{font-weight:600;color:var(--tx1);white-space:nowrap;min-width:80px;}
.ll-safety-key-desc{color:var(--tx3);font-size:10px;line-height:1.4;}

/* ── Replenishment waypoint drag handle ──────────────────────────────────── */
.ll-svg-rep-wp{cursor:grab;}
.ll-edit-mode .ll-svg-rep-wp:hover{opacity:1;stroke:#92400e;stroke-width:2;}
.ll-svg-rep-wp.is-selected{stroke:#2563eb;stroke-width:2;opacity:1;}

/* ── Replenishment legend stop details ───────────────────────────────────── */
.ll-rep-stop-block{margin-bottom:6px;}
.ll-rep-stop-items{margin:2px 0 0 24px;padding:0;list-style:disc;font-size:10px;color:var(--tx2);line-height:1.5;}