/* ── Pole Survey Tool ────────────────────────────────────── */
body { overflow: hidden; height: 100vh; }

#layout {
  position: fixed; top: 50px; left: 0; right: 0; bottom: 0;
  display: flex;
}

/* ── Left column: map + pole list ── */
#left-col {
  width: 360px; min-width: 260px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
}

#map { flex: 1 1 0; min-height: 140px; }
.maplibregl-ctrl-group { background:var(--bg-panel) !important; border:1px solid var(--border) !important; }
.maplibregl-ctrl-group button { background:transparent !important; }
.maplibregl-ctrl-icon { filter: invert(0.7); }

/* ── Tabbed left column: one panel at a time ── */
.left-tabs {
  display: flex; flex-shrink: 0;
  background: var(--bg-panel); border-top: 1px solid var(--border);
}
.ltab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 4px; background: transparent; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.5px; transition: var(--t);
}
.ltab i { width: 13px; height: 13px; }
.ltab:hover  { color: var(--text-2); background: var(--bg-hover); }
.ltab.active { color: var(--text); border-bottom-color: var(--red); }
.ltab-badge {
  font-size: 9px; font-weight: 700; min-width: 15px; text-align: center;
  padding: 1px 5px; border-radius: 9px;
  background: var(--bg-card); color: var(--text-2); border: 1px solid var(--border);
}
.ltab.active .ltab-badge { background: var(--red-dim); color: var(--red-h); border-color: var(--red-border); }

#left-panels {
  flex: 1 1 0; min-height: 160px;
  display: flex; flex-direction: column;
}
/* in the tabbed container the active panel fills the height; the rest are hidden */
#left-panels > .lpanel { display: none; flex: 1 1 0; min-height: 0; max-height: none; height: auto; border-top: none; }
#left-panels > .lpanel.active { display: flex; }

/* Pole list panel */
#pole-list-panel {
  height: 240px; flex-shrink: 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.panel-header {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.panel-header h3 {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.6px; flex: 1;
}
#pole-list { flex: 1; overflow-y: auto; padding: 6px; }
.pole-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--r);
  cursor: pointer; transition: var(--t);
  border: 1px solid transparent; margin-bottom: 2px;
}
.pole-row:hover  { background: var(--bg-hover); border-color: var(--border); }
.pole-row.active { background: var(--bg-card);  border-color: var(--border-2); }
/* selection landed from the map — pulse the row so the eye finds it */
.pole-row.cand-flash { animation: cand-row-flash 0.9s ease-out 1; }
@keyframes cand-row-flash {
  0%   { background: rgba(245, 158, 11, 0.45); border-color: #f59e0b; }
  100% { background: var(--bg-card); border-color: var(--border-2); }
}

.pole-type-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.pt-wood     { background: var(--p-wood); }
.pt-double   { background: var(--p-double); }
.pt-steel    { background: var(--p-steel); }
.pt-concrete { background: var(--p-concrete); }

.pole-row-name { font-size: 12px; font-weight: 500; flex: 1; min-width: 0; }
.pole-row-meta { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.pole-row-del {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-3); cursor: pointer; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: var(--t);
}
.pole-row:hover .pole-row-del { opacity: 1; }
.pole-row-del:hover { color: var(--danger); background: var(--danger-dim); }

.pole-row-edit {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-3); cursor: pointer; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: var(--t);
}
.pole-row:hover .pole-row-edit { opacity: 1; }
.pole-row-edit:hover { color: var(--accent-h, #60a5fa); background: var(--bg-hover); }

/* double-wood toggle: indicator + human-override control in one — always lit
   when set, revealed on hover when not */
.pole-row-dw {
  border: 1px solid transparent; background: transparent; color: var(--text-3);
  font-size: 9px; font-weight: 700; letter-spacing: 0.4px; line-height: 1.4;
  padding: 2px 6px; border-radius: 9px; cursor: pointer;
  opacity: 0; transition: var(--t); flex-shrink: 0;
}
.pole-row:hover .pole-row-dw { opacity: 1; }
.pole-row-dw:hover { color: #f97316; border-color: rgba(249,115,22,0.5); }
.pole-row-dw.on {
  opacity: 1; color: #f97316;
  border-color: rgba(249,115,22,0.6); background: rgba(249,115,22,0.15);
}

.panel-empty {
  text-align: center; color: var(--text-3);
  padding: 24px 12px; font-size: 11px; line-height: 1.7;
}

/* ── Resize handle ── */
#resize-handle {
  width: 5px; cursor: col-resize; background: var(--border);
  flex-shrink: 0; transition: background var(--t);
}
#resize-handle:hover, #resize-handle.drag { background: var(--red-h); }

/* ── Right column: 360 viewer + obs panel ── */
#right-col {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}

/* Mode bar */
#mode-bar {
  height: 42px; flex-shrink: 0;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 14px; gap: 10px;
}
#btn-mark-mode {
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-2); border-radius: var(--r);
  font-size: 12px; font-weight: 500; cursor: pointer; transition: var(--t);
}
#btn-mark-mode:hover { border-color: var(--border-2); color: var(--text); }
#btn-mark-mode.on {
  background: var(--red-dim); border-color: var(--red-border); color: var(--red-h);
}
#btn-measure-mode {
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-2); border-radius: var(--r);
  font-size: 12px; font-weight: 500; cursor: pointer; transition: var(--t);
}
#btn-measure-mode:hover { border-color: var(--border-2); color: var(--text); }
#btn-measure-mode.on {
  background: rgba(34, 211, 238, 0.12); border-color: rgba(34, 211, 238, 0.5); color: #22d3ee;
}

/* ground-ranged measurement result bar (Measure mode) */
#measure-apply {
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%);
  display: none; align-items: center; gap: 8px;
  padding: 6px 10px; z-index: 20;
  background: rgba(8, 14, 26, 0.92); border: 1px solid rgba(34, 211, 238, 0.45);
  border-radius: 10px; font-size: 11px; color: var(--text-2); white-space: nowrap;
}
#measure-apply.show { display: flex; }

#btn-viewer-focus {
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-2); border-radius: var(--r);
  font-size: 12px; font-weight: 500; cursor: pointer; transition: var(--t);
}
#btn-viewer-focus:hover { border-color: var(--border-2); color: var(--text); }
#btn-viewer-focus.on {
  background: var(--success-dim); border-color: var(--success-border); color: var(--success);
}
.mode-hint { font-size: 11px; color: var(--text-3); }

/* ── Focus mode: maximize the viewer while annotating ──────
   Left column collapses to a compact map (the aim link + highlights
   stay visible for orientation); the observations panel and pano
   strip get out of the way. Entered automatically with the audit
   Annotate/Midspan modes, or manually via the Focus button / F. */
body.viewer-focus #left-col { width: 240px !important; min-width: 240px; }
body.viewer-focus #left-tabs,
body.viewer-focus #left-panels,
body.viewer-focus #pole-list-panel,
body.viewer-focus #cand-panel,
body.viewer-focus #audit-panel { display: none; }
body.viewer-focus #resize-handle { pointer-events: none; }
body.viewer-focus #obs-panel,
body.viewer-focus #pano-strip { display: none; }

#baseline-chip {
  display: none; align-items: center; gap: 5px;
  font-size: 10px; padding: 3px 9px; border-radius: 20px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-2);
}
#baseline-chip.show { display: flex; }
#baseline-chip.good { color: var(--success); border-color: var(--success-border); background: var(--success-dim); }
#baseline-chip.warn { color: #f59e0b;        border-color: var(--warning-border); background: var(--warning-dim); }
#baseline-chip.bad  { color: var(--danger);  border-color: var(--danger-border);  background: var(--danger-dim); }

/* 360 pano area */
#pano-area {
  flex: 1; position: relative; background: #000; overflow: hidden; min-height: 0;
}
#pano-canvas-wrap  { width: 100%; height: 100%; cursor: grab; }   /* drag to look around */
#pano-canvas-wrap:active { cursor: grabbing; }
#pano-area.marking #pano-canvas-wrap { cursor: crosshair; }       /* mark/audit: precise tap */

/* Pano info overlay */
#pano-infobar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 42px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
  display: flex; align-items: center; padding: 0 12px; gap: 10px; z-index: 10;
}
.info-chip {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; padding: 2px 8px; border-radius: 20px;
  background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: 'SF Mono','Fira Code',monospace;
}

/* Crosshair */
#crosshair {
  position: absolute; pointer-events: none; z-index: 20;
  display: none; transform: translate(-50%, -50%);
}
#crosshair.show { display: block; }
.ch-h, .ch-v {
  position: absolute; background: rgba(255,220,0,0.8);
  box-shadow: 0 0 4px rgba(255,220,0,0.5);
}
.ch-h { width: 40px; height: 1px; top: 0; left: -20px; }
.ch-v { width: 1px; height: 40px; top: -20px; left: 0; }
.ch-ring {
  position: absolute; width: 12px; height: 12px;
  border: 2px solid #ffdc00; border-radius: 50%;
  top: -6px; left: -6px;
  background: rgba(255,220,0,0.12);
  box-shadow: 0 0 6px rgba(255,220,0,0.5);
}
.ch-label {
  position: absolute; top: -22px; left: 10px;
  font-size: 10px; font-weight: 700; color: #ffdc00;
  background: rgba(0,0,0,0.7); padding: 2px 6px;
  border-radius: 4px; white-space: nowrap;
  font-family: 'SF Mono','Fira Code',monospace;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

/* Live bearing bar */
#live-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 10px; pointer-events: none; z-index: 10;
}
.live-chip {
  font-size: 11px; font-weight: 600; font-family: 'SF Mono','Fira Code',monospace;
  color: rgba(255,255,255,0.6);
}
.live-chip span { color: #ffdc00; }

/* ── Observations panel ── */
#obs-panel {
  flex-shrink: 0;
  background: var(--bg-panel); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; max-height: 180px;
}
.obs-header {
  display: flex; align-items: center; padding: 8px 12px; gap: 8px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.obs-header h3 {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.6px; flex: 1;
}
#obs-conf-badge {
  font-size: 10px; padding: 2px 9px; border-radius: 20px;
  border: 1px solid transparent; color: var(--text-3);
}
#obs-conf-badge.rtk_fix { background:rgba(22,163,74,0.12); color:var(--success); border-color:var(--success-border); }
#obs-conf-badge.high    { background:rgba(22,163,74,0.1);  color:var(--success); border-color:var(--success-border); }
#obs-conf-badge.med     { background:var(--warning-dim);    color:#f59e0b;        border-color:var(--warning-border); }
#obs-conf-badge.low     { background:var(--danger-dim);     color:var(--danger);  border-color:var(--danger-border);  }

#geom-warn {
  font-size: 10px; padding: 4px 12px; display: none;
  border-bottom: 1px solid var(--border);
}
#geom-warn.show { display: block; }
#geom-warn.good    { background:var(--success-dim); color:var(--success); }
#geom-warn.warning { background:var(--warning-dim); color:#f59e0b; }
#geom-warn.bad     { background:var(--danger-dim);  color:var(--danger); }

#obs-list { flex: 1; overflow-y: auto; padding: 6px 8px; min-height: 32px; }
.obs-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; padding: 5px 8px;
  background: var(--bg-card); border-radius: var(--r);
  border-left: 2px solid var(--accent); margin-bottom: 3px;
}
.obs-item.outlier { border-left-color: var(--danger); opacity: 0.6; }
.obs-num { font-weight: 700; color: var(--accent); min-width: 16px; font-size: 10px; }
.obs-info { flex: 1; color: var(--text-2); font-family:'SF Mono','Fira Code',monospace; font-size: 10px; }
.obs-bearing  { color: #ffdc00; font-weight: 600; }
.obs-residual { color: var(--success); margin-left: 4px; }
.obs-residual.bad { color: var(--danger); }
.obs-baseline { color: var(--accent-h); margin-left: 4px; }
.obs-del-btn {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; font-size: 10px; padding: 1px 4px;
  border-radius: 3px; transition: var(--t);
}
.obs-del-btn:hover { color: var(--danger); }

#obs-actions {
  display: flex; gap: 6px; padding: 8px 10px;
  border-top: 1px solid var(--border); flex-shrink: 0;
}

/* ── Pano strip ── */
/* ── Route scrubber: a video-style timeline for the whole drive ── */
#pano-strip {
  height: 46px; flex-shrink: 0;
  background: rgba(0,0,0,0.8);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
}
#scrub-date, #scrub-label {
  font-size: 11px; color: var(--text-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#scrub-label { min-width: 64px; text-align: right; }
#scrub-wrap {
  position: relative; flex: 1; height: 100%;
  cursor: pointer; touch-action: none;
}
#scrub-track { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#scrub-handle {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  padding: 3px 8px; border-radius: 9px;
  background: #e2e8f0; color: #111827;
  font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap;
  border: 2px solid #ffdc00;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  font-variant-numeric: tabular-nums;
}
#scrub-handle.preview { background: #fff; }

/* ── Annotation modal ── */
.modal-box.annotate { max-width: 460px; }

.annot-accuracy {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px 13px;
  font-size: 11px; line-height: 1.9;
  margin-bottom: 16px; font-family: 'SF Mono','Fira Code',monospace;
  color: var(--text-2);
}
.annot-accuracy .acc-good { color: var(--success); }
.annot-accuracy .acc-warn { color: #f59e0b; }
.annot-accuracy .acc-bad  { color: var(--danger); }

.type-selector { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 14px; }
.type-btn {
  padding: 8px 4px; border: 1px solid var(--border);
  border-radius: var(--r); background: transparent;
  cursor: pointer; transition: var(--t); text-align: center;
  font-size: 10px; font-weight: 500; color: var(--text-2);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.type-btn:hover { border-color: var(--border-2); color: var(--text); }
.type-btn.sel.wood     { border-color:var(--p-wood);     background:rgba(59,130,246,0.12);  color:var(--p-wood); }
.type-btn.sel.double   { border-color:var(--p-double);   background:rgba(249,115,22,0.12);  color:var(--p-double); }
.type-btn.sel.steel    { border-color:var(--p-steel);    background:rgba(148,163,184,0.12); color:var(--p-steel); }
.type-btn.sel.concrete { border-color:var(--p-concrete); background:rgba(139,92,246,0.12);  color:var(--p-concrete); }
.type-btn-icon { width: 20px; height: 20px; }

/* Attachments */
.attach-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 5px; margin-bottom: 12px;
}
.attach-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-2); cursor: pointer;
}
.attach-item input { accent-color: var(--red); cursor: pointer; }

/* double wood alert */
.dw-alert {
  background: var(--p-double); background: rgba(249,115,22,0.15);
  border: 1px solid rgba(249,115,22,0.4); border-radius: var(--r);
  padding: 7px 11px; font-size: 11px; color: var(--p-double);
  display: none; margin-bottom: 12px; align-items: center; gap: 7px;
}
.dw-alert.show { display: flex; }

/* height estimate chip */
.height-chip {
  background: var(--gold-dim); border: 1px solid var(--gold-border);
  border-radius: var(--r); padding: 6px 11px;
  font-size: 11px; color: var(--gold);
  display: none; margin-bottom: 12px;
  font-family: 'SF Mono','Fira Code',monospace;
}
.height-chip.show { display: block; }

/* Export panel */
#export-panel {
  position: absolute; bottom: 0; right: 0; z-index: 30;
  background: var(--bg-panel); border: 1px solid var(--border-2);
  border-radius: var(--r-lg) 0 0 0; padding: 14px 16px;
  min-width: 200px; display: none;
  box-shadow: -4px -4px 20px rgba(0,0,0,0.4);
}
#export-panel.show { display: block; }
.export-title { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; }
.export-item {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 0; border-bottom: 1px solid var(--border); cursor: pointer;
  font-size: 12px; color: var(--text-2); transition: var(--t);
}
.export-item:last-child { border-bottom: none; }
.export-item:hover { color: var(--text); }