/* Proposal designer overlays created from JavaScript. Colours come from --surux-proposal-* tokens. */

.surux-proposal-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  outline: none;
}

.surux-proposal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.surux-proposal-marker {
  --surux-proposal-marker-fill: var(--surux-proposal-kind-fixed);
  position: relative;
  width: 24px;
  height: 24px;
  overflow: visible;
  cursor: pointer;
}

.surux-proposal-marker-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surux-proposal-marker-fill);
  border: 2px solid #ffffff;
}

.surux-proposal-marker-leader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--leader-length);
  height: 1px;
  background: var(--surux-proposal-marker-fill);
  box-shadow: 0 0 0 1px var(--surux-proposal-halo);
  transform-origin: left center;
  transform: rotate(var(--leader-angle));
  pointer-events: none;
}

.surux-proposal-marker-label {
  position: absolute;
  left: calc(50% + var(--label-x));
  top: calc(50% + var(--label-y));
  transform: translateY(-50%);
  padding: .25rem .5rem;
  border-radius: var(--surux-radius-sm);
  border: 1px solid var(--surux-proposal-marker-fill);
  background: var(--surux-surface);
  color: var(--surux-text);
  box-shadow: 0 1px 3px var(--surux-proposal-ink);
  font-size: .75rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.surux-proposal-marker-label:active { cursor: grabbing; }
.surux-proposal-marker-label:focus-visible {
  outline: 2px solid var(--surux-primary);
  outline-offset: 3px;
}
.surux-proposal-marker.is-selected .surux-proposal-marker-dot {
  box-shadow: 0 0 0 3px var(--surux-primary), 0 0 0 5px var(--surux-proposal-halo);
}
.surux-proposal-marker.is-selected .surux-proposal-marker-label {
  border: 2px solid var(--surux-primary);
  background: color-mix(in srgb, var(--surux-primary) 16%, var(--surux-surface));
}
.surux-proposal-marker.hide-label .surux-proposal-marker-label,
.surux-proposal-marker.hide-label .surux-proposal-marker-leader { display: none; }

.surux-proposal-marker[data-surux-proposal-kind="pole"] { --surux-proposal-marker-fill: var(--surux-proposal-kind-pole); }
.surux-proposal-marker[data-surux-proposal-kind="wall"] { --surux-proposal-marker-fill: var(--surux-proposal-kind-wall); }
.surux-proposal-marker[data-surux-proposal-kind="fixed"] { --surux-proposal-marker-fill: var(--surux-proposal-kind-fixed); }
.surux-proposal-marker[data-surux-proposal-kind="ptz"] { --surux-proposal-marker-fill: var(--surux-proposal-kind-ptz); }
.surux-proposal-marker[data-surux-proposal-kind="tandemvu"] { --surux-proposal-marker-fill: var(--surux-proposal-kind-tandemvu); }
.surux-proposal-marker[data-surux-proposal-kind="multisensor"] { --surux-proposal-marker-fill: var(--surux-proposal-kind-multisensor); }
.surux-proposal-marker[data-surux-proposal-kind="anpr"] { --surux-proposal-marker-fill: var(--surux-proposal-kind-anpr); }
.surux-proposal-marker[data-surux-proposal-kind="terminal"] { --surux-proposal-marker-fill: var(--surux-proposal-kind-terminal); }
.surux-proposal-marker[data-surux-proposal-kind="nvr"] { --surux-proposal-marker-fill: var(--surux-proposal-kind-nvr); }
.surux-proposal-marker[data-surux-proposal-kind="switch"] { --surux-proposal-marker-fill: var(--surux-proposal-kind-switch); }
.surux-proposal-marker[data-surux-proposal-kind="bridge"] { --surux-proposal-marker-fill: var(--surux-proposal-kind-bridge); }

.surux-proposal-dori {
  --surux-proposal-dori-stroke: var(--surux-proposal-dori-observe);
  color: var(--surux-proposal-dori-stroke);
  fill: color-mix(in srgb, var(--surux-proposal-dori-stroke) 18%, transparent);
  stroke: var(--surux-proposal-dori-stroke);
}

.surux-proposal-dori[data-surux-proposal-dori="detect"] { --surux-proposal-dori-stroke: var(--surux-proposal-dori-detect); }
.surux-proposal-dori[data-surux-proposal-dori="observe"] { --surux-proposal-dori-stroke: var(--surux-proposal-dori-observe); }
.surux-proposal-dori[data-surux-proposal-dori="recognise"] { --surux-proposal-dori-stroke: var(--surux-proposal-dori-recognise); }
.surux-proposal-dori[data-surux-proposal-dori="identify"] { --surux-proposal-dori-stroke: var(--surux-proposal-dori-identify); }

.surux-proposal-line {
  fill: none;
  stroke: var(--surux-proposal-line-stroke);
}

.surux-proposal-line[data-surux-proposal-line="cable"] { --surux-proposal-line-stroke: var(--surux-proposal-line-cable); }
.surux-proposal-line[data-surux-proposal-line="trench"] { --surux-proposal-line-stroke: var(--surux-proposal-line-trench); }
.surux-proposal-line[data-surux-proposal-line="fibre"] { --surux-proposal-line-stroke: var(--surux-proposal-line-fibre); }
.surux-proposal-line[data-surux-proposal-line="power"] { --surux-proposal-line-stroke: var(--surux-proposal-line-power); }
.surux-proposal-line[data-surux-proposal-line="poe"] { --surux-proposal-line-stroke: var(--surux-proposal-line-poe); }
.surux-proposal-line[data-surux-proposal-line="power-dc"] { --surux-proposal-line-stroke: var(--surux-proposal-line-power-dc); }
.surux-proposal-line[data-surux-proposal-line="wireless"] { --surux-proposal-line-stroke: var(--surux-proposal-line-wireless); }
.surux-proposal-line[data-surux-proposal-line="measure"] { --surux-proposal-line-stroke: var(--surux-proposal-line-measure); }
.surux-proposal-line[data-surux-proposal-line="boundary"] { --surux-proposal-line-stroke: var(--surux-proposal-line-boundary); }
.surux-proposal-line[data-surux-proposal-line="sheet"] { --surux-proposal-line-stroke: var(--surux-proposal-line-sheet); }
.surux-proposal-line[data-surux-proposal-line="inset"] { --surux-proposal-line-stroke: var(--surux-proposal-line-inset); }

.surux-proposal-stage-stack {
  display: flex;
  flex-direction: column;
  gap: var(--surux-page-panel-gap);
  min-height: 0;
  height: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

.surux-proposal-map-host {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  min-height: 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.surux-proposal-map-host > .surux-proposal-stage {
  flex: 1 1 auto;
}

@media (max-width: 991.98px) {
  .surux-proposal-map-host {
    min-height: clamp(18rem, 55dvh, 36rem);
  }
}

.surux-proposal-items {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: 0;
  overflow: auto;
}

.surux-proposal-item-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.surux-proposal-item-tree .surux-proposal-item-tree,
.surux-proposal-item-unmounted {
  margin-inline-start: 1.15rem;
}

.surux-proposal-item {
  display: flex;
  width: 100%;
  margin: 0;
  padding: .35rem .6rem;
  text-align: left;
  color: var(--surux-text);
  background: var(--surux-surface);
  border: 1px solid var(--surux-border, currentColor);
  border-radius: var(--surux-radius-sm);
}

.surux-proposal-item.is-selected {
  border-color: var(--surux-primary);
  background: color-mix(in srgb, var(--surux-primary) 16%, var(--surux-surface));
  box-shadow: inset 3px 0 0 var(--surux-primary);
  font-weight: 600;
}

.surux-proposal-item.is-selected::after {
  content: '\2713';
  margin-inline-start: auto;
  padding-inline-start: .5rem;
}

.surux-proposal-item.is-selected:has(.surux-proposal-item-summary)::after {
  margin-inline-start: .5rem;
}

.surux-proposal-item-label {
  min-width: 0;
}

.surux-proposal-item-summary {
  margin-inline-start: auto;
  padding-inline-start: .75rem;
  color: var(--surux-muted, var(--surux-text));
  font-size: .8125rem;
  font-weight: 400;
}

.surux-proposal-item.is-related {
  font-weight: 650;
  outline: 2px solid var(--surux-text);
  outline-offset: -3px;
}

.surux-proposal-item.is-related::before {
  content: '\2192';
  margin-inline-end: .35rem;
  font-weight: 700;
}

.surux-proposal-item:focus-visible {
  outline: 2px solid var(--surux-primary);
  outline-offset: -2px;
}

.surux-proposal-item-muted {
  color: var(--surux-muted, var(--surux-text));
}

.surux-proposal-bom-table {
  width: 100%;
  border-collapse: collapse;
}

.surux-proposal-bom-table th,
.surux-proposal-bom-table td {
  padding: .4rem .5rem;
  text-align: left;
  border-bottom: 1px solid var(--surux-border);
}

/* Preserve label/selection readability while fading the item's location and leader. */
.surux-proposal-marker-dot,
.surux-proposal-marker-leader { opacity: var(--surux-proposal-item-opacity, 1); }
.surux-proposal-marker.is-selected .surux-proposal-marker-dot { opacity: 1; }