/* Participant traffic & flow band (admin-only). Pairs with traffic-charts.js
 * and the vendored uPlot CSS. Uses the portal palette via CSS custom properties
 * so charts read as native, not embedded. */

.nd-tf-band .nd-lband-body { display: flex; flex-direction: column; gap: 1.25rem; }

/* Network-wide peer-traffic section at the top of the page (admin-only). */
.nd-tf-section {
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent);
  border-radius: 8px; padding: 1rem 1.25rem 1.25rem; margin-bottom: 1.5rem; background: #fffdf9;
}
/* Public (non-admin) sections, e.g. the exchange-wide statistics page: drop the
   amber admin accent/tint for a neutral, on-brand card. */
.nd-tf-section.nd-tf-public { border-left-color: var(--color-primary-light); background: #fff; }
.nd-tf-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.nd-tf-section-title { font-size: 1rem; font-weight: 600; color: var(--color-primary); margin: 0; display: flex; align-items: center; gap: .5rem; }
.nd-tf-scope-tag {
  font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 3px; padding: .05rem .3rem;
}
.nd-tf-section > .nd-tf-sub { display: block; margin: .2rem 0 1rem; }

/* Per-port throughput nested inside the L2 band. It has no layer header of its
   own, so the amber admin accent marks it as admin-only (L2 itself is public). */
.nd-ops-panel {
  margin-top: .75rem;
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent);
  border-radius: 8px; padding: .75rem .9rem .9rem; background: #fffdf9;
}
.nd-ops-panel > .nd-tf-sub { display: block; margin: .2rem 0 .75rem; }
.nd-ops-panel .nd-tf-section-title { font-size: .92rem; }

/* Range picker — mirrors the wireframe's tab control. */
.nd-tf-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.nd-tf-range { display: inline-flex; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; }
.nd-tf-range button {
  font: inherit; font-size: .78rem; padding: .25rem .7rem; background: #fff;
  border: 0; border-left: 1px solid var(--color-border); color: var(--color-text-light); cursor: pointer;
}
.nd-tf-range button:first-child { border-left: 0; }
.nd-tf-range button.on { background: var(--color-primary-light); color: #fff; font-weight: 600; }

/* Time-zone toggle (SF Time / UTC) — injected next to each range picker by
   traffic-charts.js. Mirrors the range picker so the two read as a pair. */
.nd-tf-tz { display: inline-flex; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; margin-left: .5rem; }
.nd-tf-tz button {
  font: inherit; font-size: .78rem; padding: .25rem .7rem; background: #fff;
  border: 0; border-left: 1px solid var(--color-border); color: var(--color-text-light); cursor: pointer;
}
.nd-tf-tz button:first-child { border-left: 0; }
.nd-tf-tz button.on { background: var(--color-primary-light); color: #fff; font-weight: 600; }

/* Full-width charts, one per row. min-width:0 lets the grid track shrink below
   the chart canvas's intrinsic width (default min-width:auto would otherwise
   pin the track open and overflow the page); the chart's ResizeObserver then
   compresses the canvas to fit. */
.nd-tf-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; min-width: 0; }

.nd-tf-panel { border: 1px solid var(--color-border); border-radius: 8px; padding: .9rem 1rem 1rem; background: #fff; min-width: 0; overflow: hidden; }
.nd-tf-panel-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.nd-tf-title { font-size: .92rem; font-weight: 600; color: var(--color-primary); margin: 0; }
.nd-tf-sub { font-size: .74rem; color: var(--color-text-light); }

.nd-tf-panel sfmix-chart { display: block; width: 100%; min-width: 0; min-height: 240px; }
/* uPlot renders its root at an explicit pixel width; clamp it so a transient
   over-wide canvas (before the ResizeObserver fires) can't push the page out. */
.nd-tf-panel .uplot { max-width: 100%; }

/* Loading / empty skeleton. */
.nd-tf-skel {
  height: 240px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--color-text-light); background: var(--color-bg-alt);
}

/* Custom legend for the stacked peer chart. Items are clickable buttons that
   isolate/add their series; the crosshair updates each value + the time line. */
.nd-tf-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .75rem; }
/* Point-in-time readout (full-width row above the swatches): tracks the
   crosshair, shows "latest" when idle. */
.nd-tf-leg-time {
  flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
  font-size: .72rem; color: var(--color-text-light);
  font-variant-numeric: tabular-nums; margin-bottom: .15rem; min-height: 1em;
}
.nd-tf-leg-pin { color: var(--color-text); font-weight: 600; }
.nd-tf-leg-cursor { color: var(--color-text-light); }
/* Secondary live value shown beside the pinned value while a pin is held. */
.nd-tf-leg-live { color: var(--color-text-light); font-variant-numeric: tabular-nums; opacity: .8; }
.nd-tf-leg-item {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--color-text);
  font: inherit; font-size: .78rem; background: none; border: 0; padding: .1rem .25rem;
  border-radius: 4px; cursor: pointer;
}
.nd-tf-leg-item:hover { background: var(--color-bg-alt); }
.nd-tf-leg-item:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 1px; }
/* Series toggled out of the isolated view: dimmed but still clickable to re-add. */
.nd-tf-leg-item.nd-tf-off { opacity: .4; }
.nd-tf-sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.nd-tf-leg-name { color: var(--color-text); }
.nd-tf-leg-asn { color: var(--color-text-light); font-family: var(--font-mono, ui-monospace); font-size: .72rem; }
.nd-tf-leg-val { color: var(--color-text-light); font-variant-numeric: tabular-nums; }

/* Held ("pinned") point. A bold solid accent crosshair + a filled point on each
   series mark the pinned time (vs the live cursor's faint blue-grey dashed line),
   while the readout freezes on its values and the live cursor keeps roaming. */
/* No z-index: inserted as over's first child, so it paints behind the live
   cursor/points by DOM order — a true "background" marker. */
.nd-tf-pin-marker { position: absolute; inset: 0; pointer-events: none; }
.nd-tf-pin-xline {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 2px solid var(--color-accent);
}
.nd-tf-pin-dot {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--color-accent); box-sizing: border-box;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 1px #fff;
}
/* Small ✕ that clears the pin (used in the stacked legend's time line). */
.nd-tf-pin-clear {
  font: inherit; font-size: .72rem; line-height: 1; padding: .05rem .3rem; cursor: pointer;
  background: none; border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text-light);
}
.nd-tf-pin-clear:hover { background: var(--color-bg-alt); }

/* When a point is pinned on a non-stacked chart we drive uPlot's own legend to
   the held values and flag it here so the values read in the accent colour. */
.u-legend.nd-tf-leg-pinned .u-value { color: var(--color-accent); font-weight: 600; }

/* uPlot tweaks to match the portal type scale. */
.uplot, .uplot * { font-family: var(--font-sans, system-ui); }
.u-legend { font-size: .76rem; color: var(--color-text-light); }
.u-legend .u-marker { width: 10px; height: 10px; }

/* ── Mobile: reclaim horizontal real-estate for the canvas ────────────
   Charts sit inside several nested cards — section / layer-band body /
   ops panel / chart panel — and on a narrow screen their stacked horizontal
   padding (≈3.75–4.15rem per side) squeezes the plot to roughly a third of
   the viewport. Collapse the *horizontal* insets only (keep the vertical
   rhythm) so the canvas runs nearly edge-to-edge; matches the 768px
   breakpoint used elsewhere in the portal. */
@media (max-width: 768px) {
  /* Halve the outer page gutter on the chart pages (traffic.css isn't loaded
     elsewhere, so global chrome is untouched). base.html's <main> uses
     Tailwind's px-6 (1.5rem); main.w-full out-specifies that .px-6 utility and
     overrides the same padding-inline property, so the cards start ~0.75rem
     closer to each edge. */
  main.w-full { padding-inline: .75rem; }
  .nd-tf-section { padding-left: .45rem; padding-right: .45rem; }
  .nd-ops-panel { padding-left: .4rem; padding-right: .4rem; }
  .nd-tf-panel { padding-left: .35rem; padding-right: .35rem; }
  /* Only layer-band bodies that actually wrap a chart get tightened; text
     bands (L1/L3/L4 details) keep their normal inset. */
  .nd-lband-body:has(.nd-tf-band) { padding-left: .3rem; padding-right: .3rem; }
  /* Keep heads/captions off the very edge so labels still read as a card,
     while the canvas itself runs wider beneath them. */
  .nd-tf-section-head,
  .nd-tf-head,
  .nd-tf-section > .nd-tf-sub,
  .nd-ops-panel > .nd-tf-sub,
  .nd-tf-panel-head { padding-left: .2rem; padding-right: .2rem; }
}