/* visitor-intelligence/assets/css/vi-radar.css — Live Radar (B2). Scoped to .gs-vrad.
 *
 * REWRITTEN. Same root cause as vi-segview.css: the whole pane was styled for a dark page that the
 * app does not have, so on the light surface every card lost its fill and border and the radar
 * itself lost the dark field its white rings and green sweep were drawn for.
 *
 * The split is now the one /dashboard?view=radar already uses and that Martijn asked for: the radar
 * canvas is DARK (the same #0C1421 -> #16233A gradient, white rings, #5C6E88 ring labels), and every
 * surrounding panel is a normal light .vi2-card. A radar reads as an instrument; a table does not.
 */
.gs-vrad{
  --vr-line:#E7ECF2; --vr-line2:#DFE4EB; --vr-ink:#1B2733; --vr-ink2:#42505E; --vr-mut:#8C95A1;
  --vr-bg:#F6F8FB; --vr-track:#EDF1F6; --vr-sh:0 1px 2px rgba(20,30,45,.04);
  --vr-good:#1FA463; --vr-warn:#D97706; --vr-bad:#DC2626; --vr-blue:#2A6FE8;
  /* dark-canvas-only tokens */
  --vr-dline:rgba(255,255,255,.07); --vr-dmut:#7E90AB; --vr-dlab:#5C6E88;
  color:var(--vr-ink);
}
.gs-vrad .vr-muted{color:var(--vr-mut);font-size:12px}
.gs-vrad .vr-i{font-size:11.5px;color:var(--vr-mut);cursor:help;margin-left:4px;vertical-align:1px}

/* ── light panels ────────────────────────────────────────────────────────────────────────────── */
.gs-vrad .vr-card{background:#fff;border:1px solid var(--vr-line);border-radius:12px;padding:16px;
  box-shadow:var(--vr-sh);min-width:0}
.gs-vrad .vr-h{font-size:13px;font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:6px;color:var(--vr-ink)}
.gs-vrad .vr-h > i.bi:first-child{color:var(--vr-good);font-size:13px}
.gs-vrad .vr-wide{margin-top:14px}

/* ── header line ─────────────────────────────────────────────────────────────────────────────── */
.gs-vrad .vr-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.gs-vrad .vr-live{font-size:13.5px;color:var(--vr-ink2);display:flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--vr-line);border-radius:20px;padding:6px 14px;box-shadow:var(--vr-sh)}
.gs-vrad .vr-live b{font-size:19px;font-weight:800;color:var(--vr-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.gs-vrad .vr-dot{width:9px;height:9px;border-radius:50%;background:var(--vr-good);
  box-shadow:0 0 0 0 rgba(31,164,99,.6);animation:vrBeat 2s infinite;flex:none}
@keyframes vrBeat{0%{box-shadow:0 0 0 0 rgba(31,164,99,.5)}70%{box-shadow:0 0 0 9px rgba(31,164,99,0)}100%{box-shadow:0 0 0 0 rgba(31,164,99,0)}}
.gs-vrad .vr-top .vr-muted:last-child{margin-left:auto}

/* ── layout ──────────────────────────────────────────────────────────────────────────────────── */
.gs-vrad .vr-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:14px;align-items:start}
@media(max-width:1199.98px){.gs-vrad .vr-wrap{grid-template-columns:minmax(0,1fr)}}
.gs-vrad .vr-col{display:flex;flex-direction:column;gap:14px;min-width:0}

/* ── THE DARK CANVAS ─────────────────────────────────────────────────────────────────────────── */
.gs-vrad .vr-canvas{position:relative;overflow:hidden;border-radius:16px;padding:14px 16px 16px;
  background:
    radial-gradient(circle at 50% 46%,rgba(31,164,99,.10),transparent 62%),
    linear-gradient(170deg,#0C1421 0%,#111C2E 60%,#16233A 100%);
  box-shadow:0 1px 2px rgba(20,30,45,.10)}
.gs-vrad .vr-svg{width:100%;height:auto;display:block;max-height:520px;position:relative;z-index:1}
.gs-vrad .vr-legend{display:flex;flex-wrap:wrap;gap:11px;margin-top:8px;font-size:11px;color:var(--vr-dmut);
  position:relative;z-index:1}
.gs-vrad .vr-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.gs-vrad .vr-canvas .vr-muted{color:var(--vr-dlab)}

/* radar internals — drawn on the dark field, so these stay white-on-dark */
.gs-vrad .vr-ring{fill:none;stroke:var(--vr-dline);stroke-width:1}
.gs-vrad .vr-ringlab{font-size:8px;fill:var(--vr-dlab);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.gs-vrad .vr-sweep{transform-origin:230px 230px;animation:vrSweep 3s linear infinite}
@keyframes vrSweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.gs-vrad .vr-node{cursor:pointer;transition:r .35s ease,opacity .25s ease}
.gs-vrad .vr-node:hover,.gs-vrad .vr-node.hot{stroke:#fff;stroke-width:1.6}
.gs-vrad .vr-halo{fill:none;opacity:.35}
.gs-vrad .vr-frust{fill:none;stroke:var(--vr-bad);stroke-width:1.4;opacity:.75;animation:vrFr 1.6s ease-out infinite}
@keyframes vrFr{0%{opacity:.7;r:7}100%{opacity:0;r:14}}
.gs-vrad .vr-trail{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1}

/* ── triad ───────────────────────────────────────────────────────────────────────────────────── */
.gs-vrad .vr-triad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.gs-vrad .vr-t{border:1px solid var(--vr-line);background:#fff;border-radius:10px;padding:10px 6px;
  text-align:center;text-decoration:none;color:inherit;display:block;
  transition:border-color .12s ease,transform .12s ease,box-shadow .12s ease}
.gs-vrad .vr-t:hover{transform:translateY(-1px);border-color:var(--vr-blue);box-shadow:0 2px 6px rgba(16,24,40,.09)}
.gs-vrad .vr-t.pulse{animation:vrPulse .85s ease}
@keyframes vrPulse{0%{box-shadow:0 0 0 0 rgba(42,111,232,.35)}70%{box-shadow:0 0 0 9px rgba(42,111,232,0)}100%{box-shadow:0 0 0 0 rgba(42,111,232,0)}}
.gs-vrad .vr-t-v{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.02em}
.gs-vrad .vr-t-l{font-size:10.5px;color:var(--vr-mut);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-top:3px}

/* ── momentum ────────────────────────────────────────────────────────────────────────────────── */
.gs-vrad .vr-spark{width:100%;height:74px;display:block}

/* ── lists ───────────────────────────────────────────────────────────────────────────────────── */
.gs-vrad .vr-item{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--vr-line);
  font-size:12.5px;color:var(--vr-ink2);min-width:0}
.gs-vrad .vr-item:last-child{border-bottom:0}
.gs-vrad .vr-item a{color:var(--vr-ink);text-decoration:none;font-weight:600}
.gs-vrad .vr-item a:hover{color:var(--vr-good)}
.gs-vrad .vr-pill{min-width:32px;text-align:center;border-radius:20px;padding:2px 8px;font-size:11px;
  font-weight:700;color:#fff;font-variant-numeric:tabular-nums;flex:none}
.gs-vrad .vr-sub{font-size:11px;color:var(--vr-mut)}
.gs-vrad a.vr-sub{text-decoration:none}
.gs-vrad a.vr-sub:hover{color:var(--vr-good)}
.gs-vrad .vr-row{margin-bottom:9px}.gs-vrad .vr-row:last-child{margin-bottom:0}
.gs-vrad .vr-row > div:first-child{color:var(--vr-ink2);text-transform:capitalize}
.gs-vrad .vr-bar{height:7px;border-radius:4px;background:var(--vr-track);margin-top:4px;overflow:hidden}
.gs-vrad .vr-bar>i{display:block;height:100%;border-radius:4px;transition:width .45s ease}

/* ── stream table ────────────────────────────────────────────────────────────────────────────── */
.gs-vrad .vr-streamwrap{width:100%;overflow-x:auto}
.gs-vrad .vr-stream{width:100%;border-collapse:collapse;font-size:12.5px}
.gs-vrad .vr-stream th{text-align:left;font-weight:700;color:var(--vr-mut);font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--vr-line);white-space:nowrap}
.gs-vrad .vr-stream td{padding:9px 10px;border-bottom:1px solid var(--vr-line);vertical-align:middle;color:var(--vr-ink2)}
.gs-vrad .vr-stream tbody tr{cursor:pointer;transition:background .12s ease}
.gs-vrad .vr-stream tbody tr:hover,.gs-vrad .vr-stream tbody tr.hot{background:var(--vr-bg)}
.gs-vrad .vr-num{text-align:right;font-variant-numeric:tabular-nums}
.gs-vrad .vr-trunc{display:inline-block;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

/* ── anomalies ───────────────────────────────────────────────────────────────────────────────── */
.gs-vrad .vr-an{display:block;padding:11px 13px;margin-bottom:9px;border:1px solid var(--vr-line);
  border-left:4px solid var(--vr-line2);border-radius:10px;background:#fff}
.gs-vrad .vr-an:last-child{margin-bottom:0}
.gs-vrad .vr-an b{display:block;font-size:12.5px;margin-bottom:3px;color:var(--vr-ink)}
.gs-vrad .vr-an span{font-size:12px;color:var(--vr-ink2);line-height:1.5}
.gs-vrad .vr-an.good{border-left-color:var(--vr-good);background:#F4FBF7}
.gs-vrad .vr-an.warn{border-left-color:var(--vr-warn);background:#FFFAF2}
.gs-vrad .vr-an.bad{border-left-color:var(--vr-bad);background:#FEF6F6}
.gs-vrad .vr-an.info{border-left-color:var(--vr-blue);background:#F5F8FE}

@media(prefers-reduced-motion:reduce){
  .gs-vrad .vr-sweep,.gs-vrad .vr-frust,.gs-vrad .vr-dot,.gs-vrad .vr-t.pulse{animation:none}
}