/* Wi-Fi tab (js/views/event-wifi.js, flag wifi_monitor).
   Scoped under .wifi. Tokens already in the app. No new colours. */

.wifi {
  min-width: 0;
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  color: var(--text-1);
  overflow: visible;
  font-family: var(--font-ui);
}
/* Stale tint lives here, not in components.css: that file's colour guard
   treats every is-stale rule as a neutral Channel Health state. */
.event-toolbar > .wifi-status.is-stale { background: var(--warn-soft); color: var(--warn); }
.event-toolbar > .wifi-status.is-neutral { background: var(--bg-2); color: var(--text-2); }
.wifi-head { padding: 12px 16px 10px; border-bottom: 1px solid var(--border); flex: none; }
.wifi-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.wifi-title { margin: 0; font-size: 15px; font-weight: 600; }
.wifi-band-label { font-size: 12px; color: var(--text-2); }
.wifi-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 16px 24px;
}
.wifi-body > * + * { margin-top: 14px; }
.wifi-sec { min-width: 0; }
.wifi-h { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.wifi-band { margin: 10px 0 6px; font-size: 12px; color: var(--text-2); font-family: var(--font-mono); }
.wifi-note, .wifi-node, .wifi-stale {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-2);
}
.wifi-stale { margin: 8px 0 0; color: var(--warn); }
.wifi-nets { min-width: 0; }
.wifi-nets-summary { cursor: pointer; list-style: none; }
.wifi-nets-summary::-webkit-details-marker { display: none; }
.wifi-nets-summary::marker { content: ''; }
.wifi-nets-summary::before {
  content: '\25b8\00a0';
  color: var(--text-2);
  font-weight: 400;
}
.wifi-nets[open] > .wifi-nets-summary::before { content: '\25be\00a0'; }
.wifi-nets-body { min-width: 0; max-width: 100%; }
.wifi-nets-body > div { max-width: 100%; min-width: 0; }
.wifi-node-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wifi-nodes { width: max-content; min-width: 100%; }
.wifi-nodes th,
.wifi-nodes td { white-space: nowrap; }
.wifi-ssid { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wifi-power { display: inline-flex; flex-wrap: wrap; column-gap: 8px; align-items: baseline; }
.wifi-power-limit { color: var(--text-2); }
.wifi-spark { color: var(--text-2); display: inline-block; min-width: 84px; min-height: 22px; }
.wifi-occ {
  display: flex;
  gap: 6px;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.wifi-occ-col {
  width: 92px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-2);
  font-family: var(--font-mono);
}
.wifi-occ-psc {
  /* Rendered only in a band row that has a PSC column (6 GHz); see renderOccupancy. */
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wifi-occ-ch { color: var(--text-1); font-size: 12px; }
.wifi-occ-freq { text-align: center; line-height: 1.2; }
.wifi-occ-regdom { max-width: 100%; }
.wifi-occ-regdom .badge {
  white-space: normal;
  text-align: center;
  height: auto;
}
.wifi-occ-plot {
  height: 72px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--bg-2);
  border-radius: var(--r-sm);
}
.wifi-occ-bar {
  width: 70%;
  background: var(--text-1);
  border-radius: 2px 2px 0 0;
}
.wifi-occ-gap {
  min-height: 72px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-family: var(--font-ui);
  line-height: 1.25;
  background: transparent;
}
.wifi-occ-power, .wifi-occ-hit { text-align: center; line-height: 1.2; }
.wifi-rssi {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 1280px sits above the tablet nowrap rule. A 20-character SSID and the
   RSSI value stay on one text line; the DataTable wrapper scrolls. */
@media (min-width: 1100px) {
  .wifi-nets .dt {
    width: max-content;
    min-width: 100%;
  }
  .wifi-nets .dt td,
  .wifi-nets .wifi-ssid,
  .wifi-nets .wifi-power {
    white-space: nowrap;
  }
  .wifi-nets .wifi-ssid,
  .wifi-nets .wifi-power {
    flex-wrap: nowrap;
  }
}

/* Channel graph. Chrome follows the tokens. SSID hues are a fixed palette:
   lighter on the dark shell, darker when a light theme is set, so the name
   stays readable on both. One index per SSID (see assignColorIndices). */
.wifi-graph { min-width: 0; }
.wifi-charts {
  --wg-0:#6cb4ff; --wg-1:#e2b340; --wg-2:#ee7399; --wg-3:#3dbe8f;
  --wg-4:#c4a0f6; --wg-5:#f0a04e; --wg-6:#4ec8d4; --wg-7:#ddd04a;
  --wg-8:#f08484; --wg-9:#9ed45f; --wg-10:#e7a4ea; --wg-11:#9bb4f5;
  --wg-12:#e89a78; --wg-13:#5ed0aa; --wg-14:#e0a8d0; --wg-15:#7ecae4;
  --wg-16:#f0c27a; --wg-17:#8fd0e8; --wg-18:#d4dc6a; --wg-19:#f0a0b8;
  --wg-20:#7ed4c0; --wg-21:#c8b4f0; --wg-22:#f0b89a; --wg-23:#90c4f0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}
.wifi-charts.is-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.wifi-chart { min-width: 0; position: relative; }
.wifi-chart.is-wide { grid-column: 1 / -1; }
/* The scrollport stays the column width. The SVG is sized in CSS pixels by the
   view (viewBox width = rendered width), so it must not be scaled to 100%. */
.wifi-chart-scroll { max-width: 100%; min-width: 0; overflow-x: hidden; }
.wifi-chart svg { display: block; }
.wifi-grid { stroke: var(--border); stroke-width: 1; pointer-events: none; }
.wifi-group-line { stroke: var(--border-strong); stroke-width: 1; pointer-events: none; }
.wifi-ylab, .wifi-tick {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  pointer-events: none;
}
.wifi-band-title {
  fill: var(--text-2);
  font-family: var(--font-ui);
  font-size: 12px;
  pointer-events: none;
}
.wifi-shape {
  fill: var(--wc);
  stroke: var(--wc);
  fill-opacity: 0.14;
  stroke-width: 1.6;
  cursor: pointer;
}
.wifi-shape.is-unknown { stroke-dasharray: 4 3; }
.wifi-c-0 { --wc: var(--wg-0); } .wifi-c-1 { --wc: var(--wg-1); }
.wifi-c-2 { --wc: var(--wg-2); } .wifi-c-3 { --wc: var(--wg-3); }
.wifi-c-4 { --wc: var(--wg-4); } .wifi-c-5 { --wc: var(--wg-5); }
.wifi-c-6 { --wc: var(--wg-6); } .wifi-c-7 { --wc: var(--wg-7); }
.wifi-c-8 { --wc: var(--wg-8); } .wifi-c-9 { --wc: var(--wg-9); }
.wifi-c-10 { --wc: var(--wg-10); } .wifi-c-11 { --wc: var(--wg-11); }
.wifi-c-12 { --wc: var(--wg-12); } .wifi-c-13 { --wc: var(--wg-13); }
.wifi-c-14 { --wc: var(--wg-14); } .wifi-c-15 { --wc: var(--wg-15); }
.wifi-c-16 { --wc: var(--wg-16); } .wifi-c-17 { --wc: var(--wg-17); }
.wifi-c-18 { --wc: var(--wg-18); } .wifi-c-19 { --wc: var(--wg-19); }
.wifi-c-20 { --wc: var(--wg-20); } .wifi-c-21 { --wc: var(--wg-21); }
.wifi-c-22 { --wc: var(--wg-22); } .wifi-c-23 { --wc: var(--wg-23); }
.wifi-names { position: relative; min-width: 0; }
.wifi-name, .wifi-name-probe {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}
.wifi-name {
  position: absolute;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wc, var(--text-1));
  cursor: pointer;
}
.wifi-name.is-strong, .wifi-name-probe.is-strong { font-weight: 700; }
/* Level fade. 0.82 is the floor that keeps the weakest palette hue at 3:1
   on both shells. Lower than that, and a light-theme name disappears. */
.wifi-name.is-mid { opacity: 0.9; }
.wifi-name.is-weak { opacity: 0.82; }
.wifi-name.is-open { text-decoration: underline; }
.wifi-name-probe {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}
.wifi-name-tip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

/* A selected network keeps its hue. The rest switch to a token, not a low
   opacity: 0.15 of an SSID colour is about 1.3:1 on the light shell. */
.wifi-charts.is-dim .wifi-name:not(.is-on) { color: var(--text-2); opacity: 1; }
.wifi-charts.is-dim .wifi-name.is-weak:not(.is-on) { color: var(--text-muted); }
.wifi-charts.is-dim .wifi-shape:not(.is-on) {
  stroke: var(--text-muted);
  fill: var(--text-muted);
  opacity: 1;
}
.wifi-detail { margin-top: 10px; min-width: 0; }
.wifi-detail-hint, .wifi-detail-sub {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-2);
}
.wifi-detail-ssid {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wc, var(--text-1));
}
.wifi-detail-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wifi-detail-table { width: max-content; min-width: 100%; }
.wifi-detail-table th,
.wifi-detail-table td { white-space: nowrap; }
.wifi-detail-more { color: var(--text-2); }
@media (max-width: 767px) {
  .wifi-charts.is-pair { grid-template-columns: minmax(0, 1fr); }
  .wifi-chart.is-wide { grid-column: auto; }
  /* 2.4 stays readable from 360px, 5 and 6 GHz from 640px. The chart scrolls;
     .wifi-body does not, so the page itself stays put. */
  .wifi-chart.is-scroll > .wifi-chart-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Light theme is opt-in (html[data-theme=light]). The shell stays dark.
   These overrides cover the Wi-Fi tab only, hues included. */
html[data-theme="light"] .wifi,
[data-theme="light"] .wifi {
  color-scheme: light;
  --bg-0:#f5f6f8; --bg-1:#ffffff; --bg-2:#eef0f3; --bg-card:#ffffff;
  --bg-raised:#f0f2f5; --bg-input:#ffffff;
  --border-subtle:rgba(0,0,0,0.06); --border:rgba(0,0,0,0.12); --border-strong:rgba(0,0,0,0.22);
  --text-1:#1a1c22; --text-2:#3e4553; --text-muted:#5b6270; --text-faint:#6b7280;
  --accent:#4450b8; --accent-strong:#3944a3; --accent-text:#3946a8;
  --accent-soft:rgba(68,80,184,0.14);
}
html[data-theme="light"] .wifi-charts,
[data-theme="light"] .wifi-charts {
  --wg-0:#1a56b0; --wg-1:#8a5a00; --wg-2:#a12658; --wg-3:#0d7a4f;
  --wg-4:#6938b5; --wg-5:#b35a12; --wg-6:#0e6e78; --wg-7:#746400;
  --wg-8:#b42323; --wg-9:#3f7a14; --wg-10:#8a2c84; --wg-11:#2c4aa0;
  --wg-12:#9a4a30; --wg-13:#0f6a50; --wg-14:#7a3a64; --wg-15:#1a6884;
  --wg-16:#8a5e18; --wg-17:#1a6080; --wg-18:#5c6408; --wg-19:#9a3050;
  --wg-20:#0e6858; --wg-21:#5838a0; --wg-22:#8a4030; --wg-23:#1a5090;
}