/* CA Route Optimizer - structural classes match ca-postcode-mapper.css
   (.tool-section, .results-list, .result-item, .summary-box,
   .result-failed) so the two CA tools feel consistent; new classes
   below are specific to route optimization: start/end inputs, the
   route-level precision banner, per-stop precision badges by tier. */

/* Layout: same !important override as ca-postcode-mapper.css/
   zip-mapper.css, same documented reason - global.css's .tool-container
   grid loads after this file and wins on equal specificity without it.
   Without this, a long results list just grows the whole row's height
   to match the sidebar, leaving a column of white space under the
   map's fixed 600px - found 2026-09-09 testing the preview. This caps
   the row at 700px and makes the sidebar scroll independently instead. */
.tool-container {
  display: flex !important;
  height: 700px !important;
  max-height: 700px !important;
  overflow: hidden !important;
  background-color: var(--bg);
}

.tool-sidebar {
  width: 400px;
  background-color: var(--card);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}

.map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 500px;
  max-height: 700px;
}

.map {
  width: 100%;
  height: 100%;
  min-height: 500px;
}

#map .leaflet-container {
  width: 100% !important;
  height: 100% !important;
}

.sidebar-content {
  padding: 20px;
}

@media (max-width: 900px) {
  .tool-container {
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
  }
  .tool-sidebar {
    width: 100%;
    max-height: 400px;
  }
  .map-container .map {
    height: 400px;
  }
}

#startInput,
#endInput,
#stopsInput {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 10px;
}

#stopsInput {
  min-height: 160px;
  resize: vertical;
}

.cro-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

/* .btn/.btn-success/.btn-secondary are global (src/styles/global.css);
   .button-group, .btn-full, .btn-outline are not - each tool defines
   its own copy, matching route-optimizer.css and postcode-mapper.css. */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: white;
}

.cro-error {
  display: none;
  font-size: 13px;
  color: var(--danger);
  margin: 8px 0;
}

.cro-progress {
  display: none;
  font-size: 13px;
  color: var(--text-muted);
  margin: 8px 0;
}

/* Route-level precision banner - shown once above the results, not
   buried per-row, per Dan's instruction (2026-09-08): a driver scanning
   twenty rows should not have to spot the risky ones themselves. */
.route-precision-banner {
  display: none;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Results list - reuses ca-postcode-mapper.css's .results-list/.result-item
   shape (list-style:none, border-bottom rows, max-height scroll). */
.results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 340px;
  overflow-y: auto;
}

.result-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.result-item:last-child {
  border-bottom: none;
}

.result-role {
  display: inline-block;
  min-width: 52px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
}

.result-input {
  color: var(--text);
  font-weight: 500;
}

.result-note {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

.result-failed {
  color: var(--text-muted);
  font-size: 12px;
}

/* Scoped, not a blanket .result-failed rule: the summary box's own use
   of .result-failed ("Could not place N line(s): ...") already sits
   after a <br>, so it doesn't need this - but the per-row failed item
   ran the input text and the reason together with no gap at all
   ("...Ottawa, ONThat street name..."), found 2026-09-09 testing the
   preview. Same block-on-its-own-line treatment .result-note already
   gets for a successful row. Covers both real failures and ambiguous
   matches - both render through the same .result-failed span. */
.result-item.status-failed .result-failed,
.result-item.status-ambiguous .result-failed {
  display: block;
  margin-top: 2px;
  line-height: 1.5;
}

/* An ambiguous match (found, but more than one candidate) is not the
   same thing as a real failure (not found at all) - found 2026-09-09
   rendering identically to a not-found row, same muted styling, same
   "Not placed" label. Amber tint, not muted/faded, matching
   ca-postcode-mapper.css's own .status-ambiguous convention (a real
   found-but-undecided result reads differently from a dead end). */
.status-ambiguous {
  background: rgba(217, 119, 6, 0.06);
}

.status-ambiguous .result-role {
  color: #d97706;
}

.status-failed {
  opacity: 0.75;
}

.summary-box {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Driver-precision badges - tiered colour, same traffic-light logic the
   School Finder markers already use (green / amber / red), extended
   with a distinct exact-address green so "exact" and "low-risk
   approximate" don't read identically. */
.driver-precision-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.driver-precision-badge.tier-exact {
  background: rgba(22, 163, 74, 0.14);
  color: #16a34a;
}

.driver-precision-badge.tier-low-risk {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}

.driver-precision-badge.tier-moderate-risk {
  background: rgba(217, 119, 6, 0.14);
  color: #d97706;
}

.driver-precision-badge.tier-high-risk {
  background: rgba(220, 38, 38, 0.14);
  color: #dc2626;
}

/* Map markers */
.cro-marker-dot {
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  font-size: 12px;
}

.cro-marker-start {
  background: #16a34a;
}

.cro-marker-end {
  background: #dc2626;
}

.cro-marker-stop {
  background: #2563eb;
}

/* Cluster bubbles - same clustering mechanism as dark-sky-finder, real
   stop labels instead of a bare count (a "5" here would collide with
   an actual stop numbered 5), coloured by the worst precision tier any
   member holds, not decoration - see clusterIconCreateFunction's own
   comment in ca-route-optimizer.js. Custom iconCreateFunction bypasses
   the library's own MarkerCluster.Default.css entirely, so this is a
   full replacement, not an override. */
.cro-cluster-bubble {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 12px;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.popup-precision {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
}

.popup-precision.tier-exact,
.popup-precision.tier-low-risk {
  color: #16a34a;
}

.popup-precision.tier-moderate-risk {
  color: #d97706;
}

.popup-precision.tier-high-risk {
  color: #dc2626;
}

/* Cross-link box to the other CA tools, same style as
   ca-postcode-mapper.css's .tool-distinction. */
.tool-distinction {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.tool-distinction a {
  color: var(--primary);
}