/* RefCal Operator Console -- main stylesheet. Companion to index.html + app.js,
   served by the FastAPI read-API in refcal/api/app.py. */

/* Disabled affordances (search, settings): visible but clearly inert so they
   do not promise interaction that is not wired yet. */
.is-disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "Inter Tight", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #1A252B;
  color: #1A252B;
}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cfc8b6; border-radius: 6px; border: 2px solid #FBF8F1; }
::-webkit-scrollbar-thumb:hover { background: #b9b09a; }

/* ===== TOP BAR ===== */
#topbar {
  height: 54px;
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 16px;
  background: rgba(251,248,241,0.96);
  border-bottom: 1px solid #D8D2C2;
  z-index: 30;
  position: relative;
}

.topbar-left { display: flex; align-items: center; gap: 14px; }

.logo-mark {
  width: 22px; height: 22px;
  border-radius: 3px;
  background: #1A252B;
  display: flex; align-items: center; justify-content: center;
}
.logo-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: linear-gradient(120deg,#5B3FA0,#1E8AA8,#2F8A4F,#C68923,#B83A2B);
}

.topbar-title { display: flex; align-items: baseline; gap: 8px; }
.brand {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.16em; color: #1A252B;
}
.sep {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.14em; color: #8B949A;
}
.product {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.13em;
  color: #3B4A52; text-transform: uppercase;
}

.topbar-search {
  flex: 1; max-width: 440px;
  margin: 0 24px;
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: #FFFFFF;
  border: 1px solid #D8D2C2;
  border-radius: 3px;
}
.search-icon {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #B4BABE;
}
.search-hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #8B949A;
  letter-spacing: 0.04em;
}

.topbar-right { display: flex; align-items: center; gap: 18px; }

.tenant-info {
  display: flex; flex-direction: column;
  align-items: flex-end; line-height: 1.2;
}
.tenant-info .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.1em;
  color: #6E7980; text-transform: uppercase;
}
.tenant-info .value {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #1A252B;
}

.divider-v { width: 1px; height: 26px; background: #D8D2C2; }

.engine-status { display: flex; align-items: center; gap: 8px; }
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #8B949A;
  box-shadow: 0 0 0 3px rgba(139,148,154,0.16);
  transition: background 0.3s, box-shadow 0.3s;
}
.status-dot.ok {
  background: #2F8A4F;
  box-shadow: 0 0 0 3px rgba(47,138,79,0.16);
}
.status-dot.err {
  background: #B83A2B;
  box-shadow: 0 0 0 3px rgba(184,58,43,0.16);
}
.engine-text {
  display: flex; flex-direction: column; line-height: 1.2;
}
#engineLabel {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #1A252B;
}
.clock {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #8B949A;
}

.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #1A252B; color: #FBF8F1;
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.04em;
}

/* ===== WORKSPACE LAYOUT ===== */
#workspace {
  display: flex;
  height: calc(100vh - 54px);
  overflow: hidden;
}

/* ===== LEFT LENS RAIL ===== */
#lensRail {
  width: 62px; flex: 0 0 62px;
  background: #FFFFFF;
  border-right: 1px solid #D8D2C2;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 12px 0; gap: 4px;
}

.lens-btn {
  width: 44px; height: 44px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #8B949A;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; gap: 3px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lens-btn:hover { background: #F5F2EA; color: #1A252B; }
.lens-btn.active {
  background: #F5F2EA;
  border-color: #D8D2C2;
  color: #1A252B;
}
.lens-btn .glyph { font-size: 16px; line-height: 1; }
.lens-btn .short {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase;
}

.rail-spacer { flex: 1; }

/* ===== MAP VIEWPORT ===== */
#mapViewport {
  flex: 1; min-width: 0;
  position: relative;
  background: #0a1013;
}

#map {
  position: absolute; inset: 0;
  /* Establish a stacking context so Leaflet's internal panes (z-index
     200-700) stay contained below the map-overlay chrome (z-index 20).
     Without this, the map layers paint OVER the legend/switchers -- they
     flash in on load, then the map covers them. */
  z-index: 0;
}

.leaflet-container {
  background: #0a1013;
  font-family: "JetBrains Mono", monospace;
}
.leaflet-bar,
.leaflet-control-attribution { display: none !important; }

/* Brighten the near-black CARTO dark basemap so land + coastlines read.
   Only in dark mode (#map.basemap-dark); satellite imagery needs no filter.
   Targets the tile pane (raster basemap only); the data hexes live in the
   overlay pane and are unaffected. Tune brightness to taste. */
#map.basemap-dark .leaflet-tile-pane {
  filter: brightness(2.1) contrast(0.92) saturate(1.1);
}

/* Basemap switcher (mirrors #encodingSwitcher, bottom-left). */
#basemapSwitcher {
  /* Stacked under the encoding switcher (top-left); bottom-left is taken by
     the census stats, which it used to overlap. */
  position: absolute; top: 158px; left: 14px; z-index: 20;
  padding: 9px 10px 10px;
}
#basemapButtons { display: flex; flex-direction: column; gap: 3px; }

/* Atmosphere group in the tile dossier (retrieved AOD/WV/O3). */
.kv-row.kv-atmo-head {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(214,210,194,0.14);
}
.kv-row.kv-atmo-head .key { color: #1E8AA8; letter-spacing: 0.12em; text-transform: uppercase; font-size: 9px; }

/* Swath polygon animation */
@keyframes rc-dash { to { stroke-dashoffset: -1000; } }
.rc-swath-path {
  stroke-dasharray: 6 8;
  animation: rc-dash 26s linear infinite;
}

/* H3 hex tiles */
.rc-hex {
  transition: fill-opacity 240ms ease, stroke-opacity 240ms ease;
  cursor: pointer;
}
.rc-hex:hover { stroke-opacity: 1 !important; }

/* ===== MAP OVERLAYS ===== */
.map-overlay {
  /* Near-opaque so the panel (and the legend ramp) stays clearly visible even
     if the backdrop-filter fails to paint over the map's compositing layer --
     it only enhances, it is not relied on for legibility. */
  background: rgba(11,18,21,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(214,210,194,0.22);
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

#encodingSwitcher {
  position: absolute; top: 14px; left: 14px; z-index: 20;
  padding: 9px 10px 10px;
}
.overlay-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.16em;
  color: #7d8a90; text-transform: uppercase;
  margin-bottom: 8px;
}
.overlay-label-inline {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.14em;
  color: #7d8a90; text-transform: uppercase;
}

#encButtons {
  display: flex; flex-direction: column; gap: 3px;
}
.enc-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #8b979d;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.enc-btn:hover { background: rgba(255,255,255,0.07); color: #cdd8dc; }
.enc-btn.active {
  background: rgba(255,255,255,0.1);
  border-color: rgba(214,210,194,0.25);
  color: #eaf1f3;
}
.enc-btn .swatch {
  width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px;
}

#mapControls {
  position: absolute; top: 14px; right: 14px; z-index: 20;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}

.scale-bar {
  padding: 8px 11px;
  display: flex; align-items: center; gap: 12px;
}
#zoomTiers { display: flex; align-items: center; gap: 7px; }
.zoom-tier {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #4a5a62;
}
.zoom-tier.active { color: #eaf1f3; }
.mono {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #9fb0b6;
}

.legend-box {
  padding: 9px 11px 11px;
  width: 188px;
}
#legendTitle { margin-bottom: 8px; }
#legendRamp {
  height: 7px; border-radius: 2px;
  background: linear-gradient(to right, #2C56A3, #C68923, #B83A2B);
}
.legend-range {
  display: flex; justify-content: space-between;
  margin-top: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; color: #8b979d;
}

#zoomBtns {
  position: absolute; bottom: 18px; right: 14px; z-index: 20;
  display: flex; flex-direction: column; gap: 5px;
}
.zoom-btn {
  width: 34px; height: 34px; border-radius: 5px;
  border: 1px solid rgba(214,210,194,0.18);
  background: rgba(11,18,21,0.84);
  backdrop-filter: blur(10px);
  color: #cdd8dc; font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.zoom-btn:hover { background: rgba(11,18,21,0.96); }

.census {
  position: absolute; bottom: 18px; left: 14px; z-index: 20;
  padding: 11px 14px;
  display: flex; gap: 20px;
}
.stat-cell { display: flex; flex-direction: column; gap: 3px; }
.stat-cell-link { cursor: pointer; }
.stat-cell-link:hover .stat-value { color: #eaf1f3; }
.stat-cell-link:hover .stat-label { color: #1E8AA8; }
.stat-value {
  font-family: "Source Serif 4", serif;
  font-size: 21px; font-weight: 400;
  color: #eaf1f3; line-height: 1;
}
.stat-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.1em;
  color: #8b979d; text-transform: uppercase;
}

.no-tiles-notice {
  position: absolute; bottom: 80px; left: 14px; z-index: 20;
  padding: 6px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.08em;
  color: #8b979d;
}

/* ===== RIGHT INSPECTOR ===== */
#inspector {
  width: 384px; flex: 0 0 384px;
  background: #FFFFFF;
  border-left: 1px solid #D8D2C2;
  overflow-y: auto; overflow-x: hidden;
}

.panel-section {
  padding: 16px 20px;
}
.panel-section.border-b {
  border-bottom: 1px solid #E5E0D2;
}

.section-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.14em;
  color: #6E7980; text-transform: uppercase;
  margin-bottom: 10px;
}
.section-label-row {
  display: flex; justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.section-label-row .section-label { margin-bottom: 0; }
.section-label-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.1em;
  color: #B4BABE; text-transform: uppercase;
}

.serif-heading {
  font-family: "Source Serif 4", serif;
  font-weight: 400; font-size: 24px;
  line-height: 1.15; letter-spacing: -0.01em;
  margin: 0 0 10px; color: #1A252B;
}
.serif-heading.small { font-size: 20px; }

.body-text {
  font-size: 13px; line-height: 1.55;
  color: #3B4A52; margin: 0;
}

.loading-placeholder {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #B4BABE;
}

.empty-state {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #8B949A;
  padding: 8px 0;
  font-style: italic;
}

/* ===== SENSOR LIST ===== */
.sensor-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 1px solid #EDE9DD;
}
.sensor-id-wrap {
  display: flex; align-items: center; gap: 9px;
}
.sensor-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.sensor-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: #1A252B;
}
.sensor-cfm-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #8B949A;
}

/* ===== CFM CATALOGUE TABLE ===== */
.sensor-group { margin-bottom: 18px; }
.sensor-group-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: #1A252B; text-transform: uppercase;
  padding: 6px 0 4px;
  border-bottom: 1px solid #EDE9DD;
  margin-bottom: 4px;
}
.cfm-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px 10px;
  padding: 8px 0;
  border-bottom: 1px solid #F5F2EA;
  align-items: start;
}
.cfm-row:last-child { border-bottom: none; }
.cfm-key {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #1A252B;
  font-weight: 500;
}
.cfm-cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.08em;
  color: #8B949A; text-transform: uppercase;
  grid-column: 1;
}
.cfm-version {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #6E7980;
  grid-row: 1; grid-column: 2;
  white-space: nowrap;
}
.cfm-sigma {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #C68923;
  grid-row: 1; grid-column: 3;
  white-space: nowrap;
}
.cfm-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; color: #B4BABE;
  grid-column: 1 / -1;
}

/* ===== COMPOSITION LIST ===== */
.comp-row {
  display: flex; align-items: baseline;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid #EDE9DD;
  gap: 10px;
}
.comp-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #1A252B;
  word-break: break-all;
}
.comp-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #8B949A;
  white-space: nowrap;
}

/* ===== SWATH LIST ===== */
.swath-row {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid #EDE9DD;
  cursor: pointer;
}
.swath-row:hover { background: #FDFCF8; margin: 0 -20px; padding: 10px 20px; }
.swath-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #1A252B;
  font-weight: 500;
}
.swath-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #8B949A;
}

/* ===== DOSSIER PANEL ===== */
.dossier-header { background: #FBF8F1; }
.back-btn {
  background: transparent; border: none;
  padding: 0; margin-bottom: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.1em;
  color: #6E7980; text-transform: uppercase;
  cursor: pointer;
}
.back-btn:hover { color: #1A252B; }

.state-badge {
  display: inline-block;
  padding: 2px 7px; border-radius: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
}

.kv-grid {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 8px;
}
.kv-row {
  display: flex; justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; line-height: 1.7;
}
.kv-row .key { color: #8B949A; }
.kv-row .val { color: #1A252B; }

.ci-headline {
  display: flex; align-items: flex-end;
  gap: 6px; margin-top: 6px;
}
.ci-number {
  font-family: "Source Serif 4", serif;
  font-size: 38px; font-weight: 400;
  line-height: 1; color: #1A252B;
}
.ci-unit {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; color: #6E7980;
  padding-bottom: 6px;
}

/* CI component bar */
.ci-comp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #F5F2EA;
}
.ci-comp-row:last-child { border-bottom: none; }
.ci-swatch {
  width: 9px; height: 9px; border-radius: 2px; flex: 0 0 9px;
}
.ci-comp-label {
  flex: 1; font-size: 12.5px; color: #283238;
}
.ci-comp-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #1A252B; width: 54px; text-align: right;
}

/* Active factors table */
.factor-row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #F5F2EA;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}
.factor-row .fkey { color: #1A252B; }
.factor-row .fmeta { color: #8B949A; }

/* Version history */
.version-row {
  display: flex; gap: 12px; padding-bottom: 14px;
}
.version-date {
  flex: 0 0 56px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #8B949A; padding-top: 1px;
}
.version-body { flex: 1; }
.version-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #1A252B;
}
.version-state {
  display: inline-block; margin-left: 8px;
  padding: 1px 6px; border-radius: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ===== EVENTS PANEL ===== */
.event-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 0; border-top: 1px solid #EDE9DD;
}
.event-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: #1A252B;
}
.event-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #8B949A;
}

/* ===== REVIEW PANEL ===== */
.review-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 32px 16px; text-align: center;
}
.review-empty-icon {
  font-size: 28px; color: #2F8A4F; line-height: 1;
}
.review-empty-text {
  font-family: "Source Serif 4", serif;
  font-size: 16px; color: #1A252B;
}
.review-empty-sub {
  font-size: 12px; color: #8B949A; line-height: 1.55;
  max-width: 260px;
}

.proposal-card {
  border: 1px solid #D8D2C2;
  border-radius: 6px;
  margin-bottom: 16px;
  background: #FEFCF8;
  overflow: hidden;
}
.card-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid #EDE9DD;
  display: flex; flex-direction: column; gap: 3px;
}
.card-sensor {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; font-weight: 500; color: #1A252B;
}
.card-footprint {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #5B3FA0;
}
.card-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #8B949A;
}

.card-facts {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.fact-block {}
.fact-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8B949A;
  margin-bottom: 4px;
}
.fact-body {
  font-size: 12px; color: #1A252B; line-height: 1.5;
}
.rp-delta {
  margin-bottom: 6px;
}
.rp-factors { display: flex; flex-direction: column; gap: 3px; }
.rp-factor-row {
  display: flex; gap: 8px; align-items: baseline;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
}
.rp-fk { color: #1A252B; min-width: 100px; }
.rp-arrow { color: #3B4A52; }
.rp-pair {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: #1A252B; margin-top: 4px;
}
.rp-muted { color: #8B949A; font-size: 11px; }

.card-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 10px 14px 12px;
  border-top: 1px solid #EDE9DD;
  gap: 10px;
}
.card-id {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.approve-btn {
  flex: 0 0 auto;
  background: #2F8A4F;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 7px 14px;
  font-family: "Inter Tight", sans-serif;
  font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.approve-btn:hover:not(:disabled) { background: #267A44; }
.approve-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.card-approved {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 14px;
}
.approved-tick {
  font-size: 22px; color: #2F8A4F; line-height: 1;
}
.approved-label {
  font-family: "Source Serif 4", serif;
  font-size: 15px; color: #1A252B;
}
.approved-event {
  margin-top: 4px; color: #8B949A;
}

/* ===== MISC ===== */
button { outline: none; }
button:focus-visible { outline: 2px solid #1E8AA8; outline-offset: 2px; }