/* ============================================================
   FireSight – Observed Fires tab (fire-finder)
   ============================================================
   Styles for the top-level view switch and the Observed view.
   Everything here is scoped to .view-tabs / .finder-* so it can
   never reach into the Forecast view's markup.
   ============================================================ */

/* ---------- Top-level view switch (header) ---------- */
.view-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 18px;
  padding: 3px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
}

.view-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: #4b5563;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.view-tab:hover {
  color: #111827;
}

.view-tab.active {
  background: #ffffff;
  color: var(--color-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ---------- View switching ----------
   Both views stay mounted (Mapbox keeps its WebGL context and the loaded
   data); only one is displayed. observed.js calls map.resize() on show,
   because Mapbox cannot measure a display:none container. */
#app.view-observed .main-row {
  display: none;
}

#app.view-observed .finder-row {
  display: flex;
}

/* The location search drives the Forecast map only — hide it rather than
   leave a control that silently moves an off-screen map. */
#app.view-observed .header-center {
  visibility: hidden;
}

/* ---------- Observed view layout ---------- */
.finder-row {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

.finder-row.hidden {
  display: none;
}

.finder-map-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

#finder-map {
  width: 100%;
  height: 100%;
}

.finder-map-controls {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-63px);
  z-index: 50;
}

/* ---------- FIRMS sensor switches ----------
   Bottom-left of the map, opposite the timeline card at bottom-right. */
.finder-sensors {
  position: absolute;
  left: 16px;
  bottom: 20px;
  z-index: 50;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.finder-sensors.hidden {
  display: none;
}

.finder-sensors-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 2px;
}

/* How much FIRMS history the playhead draws. */
.finder-window {
  display: flex;
  gap: 2px;
  background: #f3f4f6;
  border-radius: 7px;
  padding: 2px;
  margin-bottom: 4px;
}

.finder-window-btn {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 5px;
  padding: 3px 7px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  white-space: nowrap;
}

.finder-window-btn:hover {
  color: #23262e;
}

.finder-window-btn.active {
  background: #ffffff;
  color: #23262e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.finder-sensor {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #23262e;
  cursor: pointer;
  user-select: none;
}

.finder-sensor input {
  width: 13px;
  height: 13px;
  margin: 0;
  cursor: pointer;
  accent-color: #ff3b30;
}

/* The swatch is the layer's own fill over its own outline, so the key cannot
   drift from the map: both are set from CFG.firmsSensors. */
.finder-sensor-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid;
  flex-shrink: 0;
}

/* FEDS and WFIGS share the card with the FIRMS sensors but are different
   products (perimeters, not detections), so each gets a divider and a title. */
.finder-sensors-title.feds,
.finder-sensors-title.section {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.finder-sensor input.feds {
  accent-color: #8b5cf6;
}

.finder-sensor input.wfigs {
  accent-color: #3d8bff;
}

/* ---------- Timeline ---------- */
.finder-timeline {
  width: 400px;
}

.finder-timeline-note {
  font-size: 11px;
  line-height: 1.45;
  color: #6b7280;
  text-align: center;
  margin-top: -4px;
}

/* ---------- Sidebar ---------- */
.finder-sidebar {
  width: 330px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  overflow: hidden;
}

.finder-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #f0f1f3;
}

.finder-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.2px;
}

.finder-sidebar-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.finder-showall {
  appearance: none;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.finder-showall:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.finder-showall.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

.finder-search-wrap {
  padding: 12px 16px 0;
}

.finder-search {
  width: 100%;
  font-family: var(--font-family);
  font-size: 13px;
  color: #111827;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.finder-search:focus {
  border-color: var(--color-accent);
  background: #ffffff;
}

.finder-filter-row {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
}

/* Toggle chip: off = outline, on = filled accent. */
.finder-chip {
  appearance: none;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.finder-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.finder-chip.active {
  background: #23262e;
  border-color: #23262e;
  color: #ffffff;
}

/* A chip that has nothing to say on the current tab ("Has front" on a WFIGS
   list, "Show inactive" on Historical) is taken away, not greyed. */
.finder-chip.hidden {
  display: none;
}

.finder-sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid #f0f1f3;
}

.finder-sort-row label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
}

.finder-sort-row select {
  appearance: none;
  flex: 1;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
}

/* ---------- Fire list ---------- */
.finder-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 12px;
  min-height: 0;
}

.finder-item {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  font-family: var(--font-family);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.finder-item:hover {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.finder-item.selected {
  background: rgba(255, 95, 5, 0.07);
  border-color: var(--color-accent);
}

.finder-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.finder-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-item-state {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 4px;
  padding: 2px 6px;
}

.finder-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: #6b7280;
}

.finder-item-dot {
  color: #d1d5db;
}

/* Observation dates: a quiet label so "Last obs" / "First obs" can never be
   mistaken for one another. */
.finder-obs {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.finder-obs-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #9ca3af;
}

.finder-obs-value {
  color: #6b7280;
}

/* Freshness of the newest observed perimeter. The colour is set inline from
   the same ramp the map pins use (see rampColor in observed.js), so a row and
   its pin can never disagree: red = still spreading, degrading to yellow, and
   black once inactive. */
.finder-age {
  font-weight: 600;
}

/* "not in latest cycle" — about the national incident report, not age. */
.finder-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
}

.finder-sidebar-foot {
  padding: 10px 16px;
  border-top: 1px solid #f0f1f3;
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.5;
}

/* ---------- Loading / error overlay ---------- */
.finder-loading {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(15, 23, 42, 0.85);
  color: var(--color-text);
  transition: opacity var(--transition-normal);
}

.finder-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

/* index.css styles .loading-text for a light panel; this overlay is dark. */
.finder-loading .loading-text {
  margin-top: 0;
  color: #cbd5e1;
}

.finder-loading.error .loading-spinner {
  display: none;
}

.finder-loading.error .loading-text {
  max-width: 460px;
  text-align: center;
  line-height: 1.6;
}

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .view-tabs {
    margin-left: 10px;
  }

  .view-tab {
    padding: 6px 10px;
    font-size: 12px;
  }

  .finder-row {
    flex-direction: column;
  }

  .finder-sidebar {
    width: 100%;
    height: 42%;
    border-left: none;
    border-top: 1px solid #e5e7eb;
  }

  .finder-timeline {
    width: calc(100% - 32px);
    right: 16px;
    bottom: 12px;
    padding: 14px;
  }

  /* The timeline goes full width down here, so the bottom-left corner is no
     longer free: move the switches to the top of the map and lay them out in
     a row. */
  .finder-sensors {
    top: 12px;
    left: 12px;
    bottom: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
  }

  .finder-sensors-title {
    margin-bottom: 0;
  }

  /* In the row layout the section dividers run vertically. */
  .finder-sensors-title.feds,
  .finder-sensors-title.section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid #e5e7eb;
    padding-left: 12px;
  }
}

/* ---------- Map pin hover card ----------
   index.css already styles every .mapboxgl-popup-content dark (padding: 0,
   min-width: 220px) and colours the tips to match. Overriding only the text
   colour here put dark text on that dark card, which is why the bubble looked
   empty. Inherit the app's popup styling and just size it for a short label. */
.finder-popup .mapboxgl-popup-content {
  padding: 9px 13px;
  /* index.css forces min-width: 220px and overflow: hidden on every popup,
     which clipped this card. Size it to its own text instead. */
  min-width: 0;
  width: max-content;
  max-width: 260px;
  font-family: var(--font-family);
}

.finder-popup-name {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.1px;
  white-space: nowrap;
}

.finder-popup-meta {
  margin-top: 3px;
  font-size: 11px;
  color: #94a3b8;
}