/* Oracle Portals — Spectrum (RF) — themable styles layered on oracle.css.
   Colors come from oracle.css variables (--bg-card, --text-primary, etc.)
   so dark/light mode flips with themeManager.toggle().  The few RF-specific
   accents (alert / warn / ok chip colors) reuse the shared semantic tokens. */

/* ── Status chips in the header ───────────────────────────────────────── */
.rf-status {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: var(--space-md);
}
.rf-chip {
  background: var(--bg-elevated, var(--bg-card));
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rf-chip.alert {
  color: var(--text-danger, #ef4444);
  border-color: var(--border-danger, #ef4444);
  animation: rfPulse 1.4s ease-in-out infinite;
}
.rf-chip.warn { color: var(--text-warning, #f59e0b); border-color: var(--border-warning, #f59e0b); }
.rf-chip.ok   { color: var(--text-success, #10b981); }
@keyframes rfPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Hide chip strip on narrow viewports so the header stays single-row. */
@media (max-width: 900px) {
  .rf-status { display: none; }
}

/* ── Dashboard grid ───────────────────────────────────────────────────── */
.rf-main-content {
  max-width: min(1840px, calc(100vw - 48px));
}

.rf-page[data-page="dashboard"] {
  container-type: inline-size;
}

.rf-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "stage stage stage stage stage stage stage stage stage focus focus focus"
    "stage stage stage stage stage stage stage stage stage sensors sensors sensors"
    "skyline skyline skyline skyline skyline skyline skyline skyline skyline skyline skyline skyline"
    "events events events events events events peaks peaks peaks peaks peaks peaks";
  gap: clamp(12px, 1vw, 20px);
  align-items: start;
}
.rf-spectrum-hero { grid-area: stage; }
.rf-card-focus   { grid-area: focus; }
.rf-card-skyline { grid-area: skyline; }
.rf-card-events  { grid-area: events; }
.rf-card-peaks   { grid-area: peaks; }
.rf-card-sensors { grid-area: sensors; }

@container (max-width: 1180px) {
  .rf-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "stage stage stage stage stage stage"
      "focus focus focus sensors sensors sensors"
      "skyline skyline skyline skyline skyline skyline"
      "events events events peaks peaks peaks";
  }
}

@media (max-width: 900px) {
  .rf-main-content {
    max-width: none;
  }
  .rf-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "focus"
      "sensors"
      "skyline"
      "events"
      "peaks";
  }
}

/* ── Live spectrum stage ──────────────────────────────────────────────── */
.rf-spectrum-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 42vw, 740px);
  padding: var(--space-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 34%),
    linear-gradient(135deg, rgba(34,211,238,0.10), transparent 34%),
    linear-gradient(315deg, rgba(198,142,96,0.12), transparent 42%),
    var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.rf-spectrum-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.3;
  mask-image: linear-gradient(180deg, #000 0%, transparent 86%);
}
.rf-hero-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.rf-eyebrow {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rf-hero-head h2 {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}
.rf-scan-status {
  --scan-progress: 0%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background:
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    conic-gradient(var(--cyan) var(--scan-progress), transparent 0) border-box;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rf-scan-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(34,211,238,0.75);
}
.rf-scan-status.rf-stale .rf-scan-dot {
  background: var(--amber);
  box-shadow: 0 0 14px rgba(245,158,11,0.7);
}
.rf-stage-wrap {
  position: relative;
  z-index: 1;
  height: clamp(380px, 31vw, 560px);
  margin-top: var(--space-md);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,9,14,0.30), rgba(8,9,14,0.02)),
    var(--bg-input, var(--bg-elevated));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
canvas#spectrumStage {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
.rf-spectrum-tooltip {
  position: absolute;
  z-index: 4;
  max-width: min(320px, calc(100% - 24px));
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  box-shadow: 0 14px 42px rgba(0,0,0,0.34);
  font-size: 0.76rem;
  pointer-events: none;
  background: var(--bg-elevated);
  background: color-mix(in srgb, var(--bg-elevated) 92%, black);
}
.rf-tooltip-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.rf-tooltip-sub {
  margin-top: 3px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-metric-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.rf-metric {
  min-width: 0;
  padding: 12px;
  background: var(--bg-elevated);
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.rf-metric span,
.rf-focus-grid span {
  display: block;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rf-metric strong {
  display: block;
  margin-top: 4px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.15;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rf-metric small {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .rf-spectrum-hero { padding: var(--space-md); min-height: 0; }
  .rf-hero-head { flex-direction: column; align-items: stretch; }
  .rf-hero-head h2 { font-size: 1.25rem; }
  .rf-stage-wrap { height: 320px; }
  .rf-metric-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Signal focus ────────────────────────────────────────────────────── */
.rf-focus-lockup {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
}
.rf-focus-orbit {
  position: relative;
  width: 74px;
  height: 74px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--accent-dim) 0 16%, transparent 17%),
    repeating-radial-gradient(circle at center, transparent 0 13px, rgba(255,255,255,0.08) 14px, transparent 15px);
}
.rf-focus-orbit::before,
.rf-focus-orbit::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(34,211,238,0.3);
  border-radius: 50%;
}
.rf-focus-orbit::after {
  inset: 24px;
  border-color: rgba(198,142,96,0.45);
}
.rf-focus-orbit span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(34,211,238,0.7);
  transform-origin: 4px 29px;
  animation: rfOrbit 4s linear infinite;
}
.rf-focus-orbit.is-drone span {
  background: var(--red);
  box-shadow: 0 0 16px rgba(239,68,68,0.76);
}
@keyframes rfOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.rf-focus-freq {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1.16rem;
  line-height: 1.25;
}
.rf-focus-summary {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.35;
}
.rf-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(126px, 100%), 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.rf-focus-grid div {
  min-width: 0;
  padding: 10px;
  background: var(--bg-input, var(--bg-elevated));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.rf-focus-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .rf-focus-orbit span,
  .rf-chip.alert {
    animation: none;
  }
}

/* Skyline canvases inherit card body width and stay themable via
   --bg-input-dim, a slightly darker surface than the surrounding panel. */
.rf-skyline-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
  gap: var(--space-md);
}
.rf-mini-skyline {
  min-width: 0;
}
.rf-mini-title {
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rf-band-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
@media (max-width: 760px) {
  .rf-skyline-pair { grid-template-columns: 1fr; }
  .rf-band-chips { justify-content: flex-start; }
}
canvas#skyline24,
canvas#skyline5,
canvas#skyline24Full,
canvas#skyline5Full {
  width: 100%;
  min-height: 150px;
  display: block;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent),
    var(--bg-input-dim, var(--bg-elevated, var(--bg-card)));
  border-radius: var(--radius-sm);
}

/* ── Lists (events, peaks, sensors) ───────────────────────────────────── */
.rf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: clamp(320px, 24vw, 520px);
  overflow-y: auto;
}
.rf-card-sensors .rf-list {
  max-height: clamp(240px, 20vw, 430px);
}
.rf-list.rf-list-full {
  max-height: none;
}
.rf-list li {
  position: relative;
  padding: 10px 8px 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}
.rf-list li:last-child { border-bottom: none; }
.rf-list li.is-drone {
  color: var(--text-danger, #ef4444);
  background: linear-gradient(90deg, var(--red-dim), transparent 58%);
}
.rf-list li.is-new {
  background: linear-gradient(90deg, var(--cyan-dim), transparent 58%);
}
.rf-list .rf-cls       { color: var(--text-warning, #f59e0b); font-weight: 600; }
.rf-list .rf-conf      { color: var(--accent); font-variant-numeric: tabular-nums; }
.rf-list .rf-verdict   { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-row-main,
.rf-peak-main,
.rf-sensor-main,
.rf-event-main {
  min-width: 0;
}
.rf-row-title,
.rf-peak-title,
.rf-sensor-title,
.rf-event-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text-primary);
  font-weight: 600;
}
.rf-row-title span,
.rf-peak-title span,
.rf-sensor-title span,
.rf-event-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rf-row-sub,
.rf-peak-sub,
.rf-sensor-sub,
.rf-event-sub {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rf-meter {
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  background: var(--bg-input, rgba(255,255,255,0.05));
  border-radius: 999px;
}
.rf-meter span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--accent-light));
  border-radius: inherit;
}
.rf-list li.is-drone .rf-meter span {
  background: linear-gradient(90deg, var(--amber), var(--red));
}
.rf-row-stat {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rf-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}
.rf-status-dot.ok { background: var(--green); box-shadow: 0 0 12px rgba(74,222,128,0.45); }
.rf-status-dot.warn { background: var(--amber); box-shadow: 0 0 12px rgba(245,158,11,0.42); }
.rf-status-dot.alert { background: var(--red); box-shadow: 0 0 12px rgba(239,68,68,0.45); }
.rf-event-main {
  padding-left: 12px;
  border-left: 2px solid var(--border-strong);
}
.rf-list li.is-drone .rf-event-main {
  border-left-color: var(--red);
}

/* RF page wrappers — sized to match the airspace-admin main-content
   padding so the dashboard sits flush with sibling portals. */
.rf-page > .card + .card { margin-top: var(--space-md); }

/* Inline channel chip ("Wi-Fi 5 ch 36", "FPV Raceband R3") shown in
   front of the frequency in each peak row. */
.rf-chip-inline {
  display: inline-block;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
  margin-right: 6px;
  vertical-align: middle;
}

.rf-chip-inline.rf-chip-strong {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.card-header .rf-chip-inline,
.rf-band-chips .rf-chip-inline {
  margin-right: 0;
}

/* Bands & Models reference page tables. */
.rf-ref-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-sm);
  font-size: 0.82rem;
}
.rf-ref-table th,
.rf-ref-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.rf-ref-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rf-ref-table tr:hover td { background: var(--bg-hover); }

/* Click-affordance on event and peak rows. */
.rf-list li.rf-clickable {
  cursor: pointer;
}
.rf-list li.rf-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.rf-list li:hover { background: var(--bg-hover); }
.rf-list li.rf-empty-row {
  color: var(--text-muted);
  cursor: default;
}
.rf-list li.rf-empty-row:hover {
  background: transparent;
}

.rf-event-detail-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px 14px;
  font-size: 0.84rem;
  margin-bottom: 14px;
}
.rf-kv-label {
  color: var(--text-muted);
}
.rf-kv-value {
  color: var(--text-primary);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
.rf-event-detail-note {
  padding: 10px 12px;
  margin: 0 0 12px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.rf-event-modal h4 {
  margin: 14px 0 6px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rf-json-block {
  max-height: 280px;
  overflow: auto;
  margin: 0;
  padding: 10px 12px;
  color: var(--text-secondary);
  background: var(--bg-input-dim, var(--bg-input));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .rf-event-detail-grid {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .rf-kv-value {
    margin-bottom: 6px;
  }
}