/* ── #141 — Quick-action split panels (right-click on map) ─────── */

/* Wrapper holding the left (compact) + right (detail) panels.
   Positioned absolute at the cursor; the two panels sit side-by-
   side with a small gap.  Same drop-shadow / rounded family as
   the search-pin popover and the pending "Add this slice" pill. */
.qa-root {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1900;
  display: flex;
  align-items: stretch;
  /* No gap — the panels look like ONE surface that expanded.  The
     shared vertical border between them reads as an internal
     divider rather than two floating cards. */
  gap: 0;
  pointer-events: none;
  visibility: hidden;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
}
.qa-root.open {
  pointer-events: auto;
  visibility: visible;
}

.quick-action-panel.qa-left {
  min-width: 260px;
  max-width: 260px;
  background: #ffffff;
  border: 1px solid #1a1a2e;
  border-radius: 12px;
  /* Panel-level shadow moved to the wrapper so left + right share
     one soft drop-shadow instead of two overlapping ones. */
  box-shadow: none;
  padding: 8px 8px 6px;
  font-size: 12px;
  color: var(--fg);
}
/* When the right panel is open, flatten the shared inner edge so
   the two look like one continuous surface with an internal
   divider.  Left panel keeps its border-right, right panel drops
   its border-left. */
.qa-root:has(.qa-right.open) .quick-action-panel.qa-left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.qa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 6px;
}
.qa-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qa-close {
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 14px;
  line-height: 1;
}
.qa-close:hover { color: var(--fg); }
.qa-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg);
  color: var(--fg);
}
.qa-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.qa-divider {
  margin: 8px 4px 4px;
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.qa-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
}
.qa-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.qa-action-row:hover:not(:disabled),
.qa-action-row.armed {
  background: var(--hover-bg);
  color: var(--accent);
}
.qa-action-row:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.qa-action-icon {
  width: 16px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}
.qa-action-label { flex: 1; }
.qa-action-chev {
  color: var(--fg-muted);
  font-size: 12px;
  flex-shrink: 0;
}

/* Right / detail panel — same visual family, slightly wider so
   Generate settings + search results fit comfortably. */
.qa-right {
  display: none;
  min-width: 300px;
  max-width: 340px;
  background: #ffffff;
  border: 1px solid #1a1a2e;
  /* Share the divider with the left panel — drop the left edge so
     the two panels present as one continuous surface with a single
     internal border. */
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: none;
  padding: 8px 8px 6px;
  font-size: 12px;
  color: var(--fg);
}
.qa-right.open { display: block; }
.qa-right-head {
  padding: 2px 4px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.qa-right-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qa-right-body {
  max-height: 460px;
  overflow-y: auto;
}
.qa-search-body {
  padding: 0;
}

/* Search rows — same shape as the topbar search dropdown. */
.qa-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.qa-result-row:hover,
.qa-result-row.active { background: var(--hover-bg); }
.qa-result-icon {
  width: 16px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px;
  flex-shrink: 0;
}
.qa-result-body { flex: 1 1 auto; min-width: 0; }
.qa-result-name {
  font-size: 12px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa-result-meta {
  font-size: 11px;
  color: var(--fg-muted);
}
.qa-result-dist {
  font-size: 11px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.qa-empty {
  padding: 8px;
  color: var(--fg-muted);
  font-size: 12px;
  text-align: center;
}

/* Generate detail: label + control rows. */
.qa-field { margin-bottom: 10px; }
.qa-field-label {
  display: block;
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.qa-radio-row {
  display: flex;
  gap: 4px;
}
.qa-radio {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font-size: 12px;
  cursor: pointer;
}
.qa-radio:hover { background: var(--hover-bg); }
.qa-radio.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.qa-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qa-checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 6px;
  cursor: pointer;
}
.qa-checkbox-row input {
  margin: 0;
  cursor: pointer;
}
/* #167 threshold grid — three compact number cells side-by-side. */
.qa-threshold-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 60px;
  gap: 8px;
  margin: 8px 0 4px;
}
.qa-threshold-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qa-threshold-label {
  font-size: 11px;
  color: var(--fg-muted);
}
.qa-input-mini {
  width: 100%;
  font-size: 12px;
  padding: 3px 6px;
}
/* #174 — 3-way elevation-preference segmented control. */
.qa-segmented {
  display: flex;
  gap: 0;
  margin: 6px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qa-elev-btn {
  flex: 1 1 0;
  padding: 4px 6px;
  border: 0;
  background: var(--bg);
  color: var(--fg-muted);
  font-size: 12px;
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.qa-elev-btn:last-child { border-right: 0; }
.qa-elev-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.qa-input {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
}
.qa-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.qa-input-unit {
  font-size: 12px;
  color: var(--fg-muted);
}
.qa-pill-btn {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.qa-pill-btn:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.qa-pill-primary {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.qa-help {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 2px;
  font-weight: 400;
}
.qa-primary-btn {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--fg-inverse);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.qa-primary-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.qa-primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* #152 — secondary "Find gravel in view" action below the primary
   Generate button.  Muted tone so it reads as a related-but-optional
   discovery flow, not a competing CTA. */
.qa-secondary-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 0 8px;
}
.qa-secondary-btn {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.qa-secondary-btn:hover {
  background: var(--hover-bg);
}

/* Match the app's light palette instead of Bootstrap's default
   dark toast.  Same look as the popovers and search dropdown so
   the "Generating route…" banner reads as a first-class app
   surface, not a foreign notification. */
#auto-route-toast {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}
#auto-route-toast .toast-header {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--border) !important;
  border-top-left-radius: var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
  font-weight: 600;
}
#auto-route-toast .toast-header .btn-close {
  filter: none;
  opacity: 0.55;
}
#auto-route-toast .toast-header .btn-close:hover { opacity: 1; }
#auto-route-toast .toast-body {
  color: var(--fg) !important;
  background: var(--bg) !important;
  border-bottom-left-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
}

/* While the auto-route Generate is grinding through retries, the
   toast body pulses gently so the user can tell we're still working
   on it and haven't stalled.  Class is added by quick_action.js on
   Generate-click and removed when the toast body's text flips. */
@keyframes auto-route-toast-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
#auto-route-toast.auto-route-toast-loading .toast-body {
  animation: auto-route-toast-pulse 1.4s ease-in-out infinite;
}

/* Small grey pin dropped where the right-click landed — subtle
   marker, doesn't compete with the coloured search / auto-route
   pins.  Cleaned up when the panel closes. */
.quick-action-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(50, 50, 50, 0.9);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1499;
}