/*
 * viewer.css — interactive report-viewer layout (ADR-013).
 *
 * Consumed by app/views/reports/show.html.erb. Uses ONLY the brand tokens
 * defined in app/assets/tailwind/brand.css (available as CSS custom properties
 * on :root). No new colors, no SCSS. Orange appears only on the .report-cta
 * primary control (the share-link button), per the brand orange rule.
 *
 * Layout: a flex row of [map | side panel] that collapses to a column (panel
 * below the map) under 800px, per the responsive acceptance criterion.
 */

/* Full-bleed shell: the report viewer opts out of the centered, top-margined
   app container (layouts/application.html.erb) so the map can span the viewport
   and hug the top. */
.report-shell {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.viewer-page {
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--color-brand-charcoal, #1c1c1e);
  background: var(--color-brand-white, #fff);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Thin breadcrumb across the very top (contractor view only) — a way back to
   the jobs list. Quiet by default; the link darkens on hover. */
.viewer-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1.25rem;
  font-size: var(--text-body-sm, 0.75rem);
  border-bottom: 1px solid var(--color-brand-gray-100, #f3f4f6);
  background: var(--color-brand-gray-50, #f9fafb);
}

.viewer-breadcrumb__link {
  color: var(--color-brand-gray-500, #6b7280);
  text-decoration: none;
}

.viewer-breadcrumb__link:hover {
  color: var(--color-brand-charcoal, #1c1c1e);
  text-decoration: underline;
}

.viewer-breadcrumb__sep {
  color: var(--color-brand-gray-300, #d1d5db);
}

.viewer-breadcrumb__current {
  color: var(--color-brand-gray-700, #374151);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header chrome — tight, hugs the top */
.viewer-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--color-brand-gray-200, #e5e7eb);
  flex-wrap: wrap;
}

.viewer-header .viewer-wordmark {
  height: 28px;
  width: auto;
}

.viewer-header-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.viewer-address {
  font-weight: 600;
  font-size: var(--text-heading-md, 1rem);
}

.viewer-generated {
  font-size: var(--text-body-sm, 0.75rem);
  color: var(--color-brand-gray-500, #6b7280);
}

/* Main body: map + side panel. Bounded height so the map is a shorter, wider
   band and the panel scrolls internally instead of pushing the tables far below
   the fold. */
.viewer-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  height: min(68vh, 600px);
}

/* The map takes all width the fixed-width panel doesn't, and is now wider
   relative to the panel than before (panel trimmed from a 0 0 360 share). */
.viewer-map {
  flex: 1 1 auto;
  position: relative;
  min-height: 360px;
  background: var(--color-brand-gray-100, #f3f4f6);
}

.viewer-map [data-controller~="viewer"] {
  position: absolute;
  inset: 0;
  display: block;
}

.viewer-panel {
  flex: 0 0 420px;
  max-width: 420px;
  overflow-y: auto;
  padding: 1.1rem 1.25rem;
  border-left: 1px solid var(--color-brand-gray-200, #e5e7eb);
}

/* Summary metrics — grouped as a quiet card grid so the four readings read as a
   set, with a consistent vertical rhythm. */
.viewer-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.viewer-metric {
  background: var(--color-brand-gray-50, #f9fafb);
  border: 1px solid var(--color-brand-gray-100, #f3f4f6);
  border-radius: 0.375rem;
  padding: 0.55rem 0.7rem;
}

/* Full-width metrics span both columns (overall source & confidence). */
.viewer-metric.viewer-metric-wide {
  grid-column: 1 / -1;
}

.viewer-metric-label {
  font-size: var(--text-body-sm, 0.75rem);
  color: var(--color-brand-gray-500, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.viewer-metric-value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-mono-lg, 1rem);
  color: var(--color-brand-charcoal, #1c1c1e);
  margin: 0.1rem 0;
}

/* Low-confidence visual marker — dashed outline (matches the map line) */
.viewer-low-confidence {
  outline: 1px dashed var(--color-confidence-low, #9ca3af);
  outline-offset: -1px;
}

/* Facet-breakdown table fit (Item 2): fixed layout so the 5 columns share the
   panel width without horizontal scroll. The facet id is a full UUID — clamp it
   and let the long Source label wrap rather than force a scrollbar. */
.viewer-panel .report-table {
  table-layout: fixed;
  width: 100%;
}

.viewer-panel .report-table th,
.viewer-panel .report-table td {
  padding: 0.4rem 0.5rem;
  /* Fixed layout + hidden overflow: no cell's content can bleed into the next
     column (the pitch value and the long source label both used to overrun). */
  overflow: hidden;
}

/* Column widths for the 5-col facet table: Facet | Area | Pitch | Source | Conf */
.viewer-panel .report-table col.col-facet { width: 22%; }
.viewer-panel .report-table col.col-area { width: 13%; }
.viewer-panel .report-table col.col-pitch { width: 28%; }
.viewer-panel .report-table col.col-source { width: 22%; }
.viewer-panel .report-table col.col-conf { width: 15%; }

/* Truncate the UUID to a single line with an ellipsis; full id in title=. */
.viewer-panel .report-facet-name {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-mono-sm, 0.75rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* In the narrow panel, the pitch value must not force overflow — let it shrink
   slightly and stay on one clipped line rather than bleed into Source. */
.viewer-panel .report-measurement {
  font-size: var(--text-mono-sm, 0.75rem);
  white-space: nowrap;
}

/* The long methodology label ("from LiDAR + imagery") wraps inside its cell
   rather than forcing a horizontal scrollbar. */
.viewer-panel .report-source {
  white-space: normal;
  word-break: break-word;
  font-size: var(--text-body-sm, 0.7rem);
}

/* Map <-> table cross-highlight (Item 4) + general row hover (Item 5). */
.report-facet-row {
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.report-facet-row:hover,
.report-facet-row.is-active td,
.report-facet-row.is-pinned td {
  background-color: var(--color-brand-gray-100, #f3f4f6);
}

.report-facet-row.is-active td:first-child,
.report-facet-row.is-pinned td:first-child {
  box-shadow: inset 3px 0 0 0 var(--color-brand-charcoal, #1c1c1e);
}

/* Pinned (clicked) row: stays selected until click-away or re-select. A light tint
   of the map's selected-facet blue (deck.gl highlight navy) so the two surfaces
   read as one selection. */
.report-facet-row.is-pinned td {
  background-color: #e6e6f2;
}

/* Footer */
.viewer-footer {
  border-top: 1px solid var(--color-brand-gray-200, #e5e7eb);
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.viewer-download[disabled],
.viewer-download.is-disabled {
  background: var(--color-brand-gray-100, #f3f4f6);
  color: var(--color-brand-gray-400, #9ca3af);
  border: 1px solid var(--color-brand-gray-200, #e5e7eb);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: var(--text-body, 0.875rem);
  cursor: not-allowed;
  text-decoration: none;
}

.viewer-download {
  background: var(--color-brand-charcoal, #1c1c1e);
  color: var(--color-brand-white, #fff);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: var(--text-body, 0.875rem);
  text-decoration: none;
  display: inline-block;
}

.viewer-attribution {
  width: 100%;
  font-size: var(--text-body-sm, 0.75rem);
  color: var(--color-brand-gray-500, #6b7280);
  margin-top: 0.5rem;
}

.viewer-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.viewer-share-url {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-mono-sm, 0.75rem);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-brand-gray-300, #d1d5db);
  border-radius: 0.375rem;
  min-width: 260px;
}

.viewer-not-ready {
  margin: 4rem auto;
  max-width: 40rem;
  text-align: center;
  color: var(--color-brand-gray-500, #6b7280);
  padding: 2rem;
}

/* Responsive: collapse to a column under 800px — panel below the map. The
   desktop fixed body height is released so the stacked map + panel each take
   their natural height. */
@media (max-width: 799px) {
  .viewer-body {
    flex-direction: column;
    height: auto;
  }

  .viewer-panel {
    flex: 1 1 auto;
    max-width: 100%;
    border-left: none;
    border-top: 1px solid var(--color-brand-gray-200, #e5e7eb);
  }

  .viewer-map {
    flex: 0 0 50vh;
    min-height: 320px;
  }
}