/* RHKEARTH visual reset v1
   Final presentation pass loaded after the native/OSIRIS styles. The goal is
   hierarchy and legibility, not another neon theme: graphite glass, warm neutral
   text, restrained sage/amber state accents, and less visual noise. */

:root {
  --rhk-bg: #0a0c0b;
  --rhk-panel: rgba(10, 12, 11, 0.84);
  --rhk-panel-2: rgba(15, 18, 16, 0.88);
  --rhk-line: #303630;
  --rhk-line-soft: rgba(183, 189, 177, 0.15);
  --rhk-accent: #d8ddd3;
  --rhk-text: #e8e8e0;
  --rhk-muted: #999d95;
  --rhk-dim: #686d67;
  --rhk-live: #9caf88;
  --rhk-info: #b8bcb4;
  --rhk-warn: #d0aa63;
  --rhk-critical: #c97864;
  --rhk-off: #747a73;
}

/* Keep the map as the visual subject. Panels should frame it, not black it out. */
#data-panel,
#cctv-panel,
#global-context-panel,
#radio-panel,
#style-indicator,
#global-loading-status,
#traffic-sync-chip,
#cctv-sync-chip,
#toast {
  background: rgba(10, 12, 11, 0.82) !important;
  border-color: rgba(183, 189, 177, 0.15) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(8px) saturate(0.9) !important;
}

#data-panel {
  background: rgba(8, 10, 9, 0.86) !important;
}

#title-bar {
  background: linear-gradient(180deg, rgba(7, 9, 8, 0.67), rgba(7, 9, 8, 0.24), transparent) !important;
}

/* The previous cleanup flattened every operational state to white. Restore a
   small semantic hierarchy without going back to bright cyber/neon colors. */
.status-live,
.status-nominal,
[data-status="live"],
[data-status="nominal"],
#data-panel .data-toggle-btn.feed-nominal,
#data-panel .data-toggle-btn[data-feed-state="nominal"] {
  color: var(--rhk-live) !important;
}

.status-warning,
.status-degraded,
.status-stale,
.status-fallback,
[data-status="warning"],
[data-status="degraded"],
[data-status="stale"],
[data-status="fallback"],
#data-panel .data-toggle-btn.feed-degraded,
#data-panel .data-toggle-btn.feed-stale,
#data-panel .data-toggle-btn.feed-fallback,
#data-panel .data-toggle-btn[data-feed-state="degraded"],
#data-panel .data-toggle-btn[data-feed-state="stale"],
#data-panel .data-toggle-btn[data-feed-state="fallback"] {
  color: var(--rhk-warn) !important;
}

.status-critical,
.status-error,
[data-status="critical"],
[data-status="error"] {
  color: var(--rhk-critical) !important;
}

.status-offline,
.status-unavailable,
[data-status="offline"],
[data-status="unavailable"] {
  color: var(--rhk-off) !important;
}

/* Active controls get a quiet sage edge rather than a bright blue/white block. */
#data-panel .data-toggle-btn.active,
#data-panel .data-toggle-chip.active,
.panel-layer-toggle[aria-pressed="true"],
button[aria-pressed="true"] {
  color: var(--rhk-text) !important;
  border-color: rgba(156, 175, 136, 0.42) !important;
  background: rgba(156, 175, 136, 0.09) !important;
}

#data-panel .data-toggle-row:hover,
.data-layer-item:hover,
.layer-item:hover,
[class*="layer-row"]:hover {
  background: rgba(190, 195, 184, 0.035) !important;
  border-color: rgba(183, 189, 177, 0.23) !important;
}

/* Pull back the inherited glow pass. Do not desaturate map geometry or imagery. */
.title-glow,
.panel-glow {
  opacity: 0.10 !important;
  filter: none !important;
}

[class*="neon"] {
  filter: saturate(0.72) !important;
}

/* Slightly soften controls without turning the console into a rounded-card UI. */
button,
select,
input,
.data-layer-item,
.layer-item,
[class*="layer-row"] {
  border-radius: 2px !important;
}

/* Reduce the wall-of-white effect while preserving primary readouts. */
#data-panel .data-toggle-meta,
#data-panel .data-count,
#data-panel .data-toggle-legend-item,
#style-indicator .indicator-label,
[class*="meta"],
[class*="secondary"] {
  color: rgba(153, 157, 149, 0.74) !important;
}

#data-panel .data-name,
.panel-title,
#title-bar h1,
#style-indicator .indicator-value {
  color: var(--rhk-text) !important;
}

/* Keep imagery and the Cesium canvas untouched by CSS-level effects. */
#cesiumContainer,
#cesiumContainer canvas,
.cesium-widget,
.cesium-widget canvas {
  filter: none !important;
}

/* CCTV presentation should feel like a sensor feed, not a glowing card. */
#cctv-frame-wrap {
  box-shadow: none !important;
  border-color: rgba(183, 189, 177, 0.17) !important;
  background: rgba(0, 0, 0, 0.42) !important;
}

#cctv-source-badge,
#cctv-quality-chip {
  color: rgba(216, 221, 211, 0.76) !important;
  border-color: rgba(183, 189, 177, 0.15) !important;
  background: rgba(14, 17, 15, 0.72) !important;
}

/* Keep scrollbar chrome subdued on dense panels. */
#data-panel,
#cctv-panel,
#global-context-panel {
  scrollbar-color: rgba(183, 189, 177, 0.26) transparent;
}