/* ═══════════════════════════════════════════════════════════════════════
   DEVELOPER CONSOLE (dvc-1) — public/js/pages/developer_console.js
   Self-dual-theme: local --dcx-* tokens carry dark defaults on .dcx-shell;
   html[data-mode="light"] swaps ONLY the tokens (reminders.css pattern —
   no tools/theme-main regeneration needed for this file).
   Lane palette is CVD-validated per mode (dataviz six-checks):
     dark : client #3b82f6 · edge #059669 · api #8b5cf6 · data #d97706 · ext #ec4899
     light: client #2563eb · edge #059669 · api #7c3aed · data #d97706 · ext #e11d48
   Every diagram node carries a text label — identity is never color-alone.
   ═══════════════════════════════════════════════════════════════════════ */

.dcx-shell{
  /* surfaces */
  --dcx-bg:        transparent;
  --dcx-card:      rgba(255,255,255,.03);
  --dcx-card-2:    rgba(255,255,255,.05);
  --dcx-line:      rgba(148,163,184,.18);
  --dcx-line-2:    rgba(148,163,184,.30);
  --dcx-ink:       var(--text, #e8eeff);
  --dcx-ink-2:     #b9c4d8;
  --dcx-muted:     #8595ad;
  --dcx-accent:    var(--mx-accent, #C9A84C);
  --dcx-accent-soft: rgba(201,168,76,.14);
  --dcx-focus:     0 0 0 3px rgba(201,168,76,.28);
  --dcx-shadow:    0 10px 30px rgba(0,0,0,.35);
  --dcx-radius:    14px;

  /* status (reserved — never used as lane identity) */
  --dcx-ok:        #34d399;
  --dcx-warn:      #fbbf24;
  --dcx-danger:    #fb7185;
  --dcx-info:      #93c5fd;
  --dcx-ok-bg:     rgba(52,211,153,.12);
  --dcx-warn-bg:   rgba(251,191,36,.12);
  --dcx-danger-bg: rgba(251,113,133,.13);
  --dcx-info-bg:   rgba(147,197,253,.12);
  --dcx-neutral-bg: rgba(148,163,184,.14);

  /* diagram lanes (dark set — validated) */
  --dcx-lane-client:   #3b82f6;
  --dcx-lane-edge:     #059669;
  --dcx-lane-api:      #8b5cf6;
  --dcx-lane-data:     #d97706;
  --dcx-lane-external: #ec4899;
  --dcx-lane-security: #94a3b8;
  --dcx-diag-line:     rgba(148,163,184,.55);
  --dcx-diag-label:    #9aa8bf;
  --dcx-node-fill:     rgba(255,255,255,.03);

  color: var(--dcx-ink);
  padding: 18px 22px 40px;
  min-height: 100%;
  font-size: 14px;
}

/* ── LIGHT MODE: token swap only ─────────────────────────────────────── */
:where(html[data-mode="light"]) .dcx-shell{
  --dcx-card:      #ffffff;
  --dcx-card-2:    #f7f9fc;
  --dcx-line:      #e3e8f2;
  --dcx-line-2:    #cdd6e6;
  --dcx-ink:       #16213a;
  --dcx-ink-2:     #3c4763;
  --dcx-muted:     #64708c;
  --dcx-accent:    #8a6c22;
  --dcx-accent-soft: rgba(138,108,34,.10);
  --dcx-focus:     0 0 0 3px rgba(91,110,245,.22);
  --dcx-shadow:    0 10px 30px rgba(20,28,56,.10);

  --dcx-ok:        #128a52;
  --dcx-warn:      #b06e0a;
  --dcx-danger:    #dc2626;
  --dcx-info:      #2563eb;
  --dcx-ok-bg:     rgba(18,138,82,.10);
  --dcx-warn-bg:   rgba(176,110,10,.10);
  --dcx-danger-bg: rgba(220,38,38,.08);
  --dcx-info-bg:   rgba(37,99,235,.08);
  --dcx-neutral-bg: rgba(100,112,140,.10);

  --dcx-lane-client:   #2563eb;
  --dcx-lane-edge:     #059669;
  --dcx-lane-api:      #7c3aed;
  --dcx-lane-data:     #d97706;
  --dcx-lane-external: #e11d48;
  --dcx-lane-security: #64708c;
  --dcx-diag-line:     rgba(71,85,105,.5);
  --dcx-diag-label:    #5a6784;
  --dcx-node-fill:     #ffffff;
}

/* ── HEADER ──────────────────────────────────────────────────────────── */
.dcx-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.dcx-head-l{ min-width:260px; }
.dcx-title{ display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; letter-spacing:.3px; margin:0; }
.dcx-title .dcx-ico{ width:26px; height:26px; color:var(--dcx-accent); }
.dcx-sub{ margin:6px 0 0; color:var(--dcx-muted); max-width:860px; line-height:1.5; }
.dcx-badges{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.dcx-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid var(--dcx-line-2); color:var(--dcx-ink-2); background:var(--dcx-card); }
.dcx-badge--live{ border-color:rgba(52,211,153,.4); color:var(--dcx-ok); }
.dcx-badge--live .dcx-pulse{ width:7px; height:7px; border-radius:50%; background:var(--dcx-ok); }
.dcx-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; position:relative; }

.dcx-btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:10px; cursor:pointer; user-select:none;
  border:1px solid var(--dcx-line-2); background:var(--dcx-card); color:var(--dcx-ink); font-weight:600; font-size:13px; }
.dcx-btn:hover{ border-color:var(--dcx-accent); box-shadow:0 0 0 1px var(--dcx-accent) inset; }
.dcx-btn:focus-visible{ outline:none; box-shadow:var(--dcx-focus); }
.dcx-btn .dcx-ico{ width:15px; height:15px; }
.dcx-btn--primary{ background:var(--dcx-accent-soft); border-color:var(--dcx-accent); color:var(--dcx-ink); }
.dcx-btn[disabled]{ opacity:.55; cursor:wait; }

.dcx-menu{ position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:250px; padding:6px;
  background:var(--dcx-card); border:1px solid var(--dcx-line-2); border-radius:12px; box-shadow:var(--dcx-shadow); }
:where(html[data-mode="dark"]) .dcx-menu, .dcx-menu{ backdrop-filter: blur(10px); }
.dcx-menu-it{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 10px; border:0; background:transparent;
  color:var(--dcx-ink); border-radius:8px; cursor:pointer; font-size:13px; }
.dcx-menu-it:hover{ background:var(--dcx-accent-soft); }
.dcx-menu-sep{ height:1px; background:var(--dcx-line); margin:5px 6px; }
.dcx-menu-cap{ font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--dcx-muted); padding:6px 10px 2px; }

/* ── KPI ROW (stat tiles — text tokens, small colored dot only) ──────── */
.dcx-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr)); gap:10px; margin:14px 0; }
.dcx-kpi{ background:var(--dcx-card); border:1px solid var(--dcx-line); border-radius:var(--dcx-radius); padding:12px 14px; }
.dcx-kpi-lab{ font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--dcx-muted); display:flex; align-items:center; gap:6px; }
.dcx-kpi-val{ font-size:26px; font-weight:800; margin-top:4px; color:var(--dcx-ink); font-variant-numeric:tabular-nums; }
.dcx-kpi-sub{ font-size:11.5px; color:var(--dcx-muted); margin-top:2px; }
.dcx-kpi-sevrow{ display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; }

/* ── BODY: RAIL + PANEL ──────────────────────────────────────────────── */
.dcx-body{ display:grid; grid-template-columns:218px minmax(0,1fr); gap:16px; align-items:start; }
.dcx-rail{ position:sticky; top:12px; display:flex; flex-direction:column; gap:4px;
  background:var(--dcx-card); border:1px solid var(--dcx-line); border-radius:var(--dcx-radius); padding:8px; }
.dcx-rail-btn{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; border:1px solid transparent;
  background:transparent; color:var(--dcx-ink-2); cursor:pointer; font-size:13px; font-weight:600; text-align:left; width:100%; }
.dcx-rail-btn .dcx-ico{ width:16px; height:16px; flex:0 0 auto; opacity:.9; }
.dcx-rail-btn:hover{ background:var(--dcx-card-2); color:var(--dcx-ink); }
.dcx-rail-btn.active{ background:var(--dcx-accent-soft); border-color:var(--dcx-accent); color:var(--dcx-ink); }
.dcx-rail-btn .dcx-count{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--dcx-muted);
  background:var(--dcx-neutral-bg); border-radius:999px; padding:2px 8px; font-variant-numeric:tabular-nums; }
.dcx-rail-btn.active .dcx-count{ color:var(--dcx-ink); }

.dcx-panel{ min-width:0; display:flex; flex-direction:column; gap:14px; }

/* ── CARDS / SECTIONS ────────────────────────────────────────────────── */
.dcx-card-b{ background:var(--dcx-card); border:1px solid var(--dcx-line); border-radius:var(--dcx-radius); padding:18px 20px; }
.dcx-h2{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:800; letter-spacing:.3px; margin:0 0 10px; color:var(--dcx-ink); }
.dcx-h2 .dcx-ico{ width:17px; height:17px; color:var(--dcx-accent); }
.dcx-h3{ font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--dcx-muted); margin:16px 0 8px; }
.dcx-p{ color:var(--dcx-ink-2); line-height:1.6; margin:0 0 8px; }
.dcx-note{ background:var(--dcx-accent-soft); border:1px solid var(--dcx-accent); border-radius:10px; padding:10px 14px; color:var(--dcx-ink); font-size:13px; line-height:1.55; }
.dcx-ul{ margin:6px 0 4px; padding-left:20px; color:var(--dcx-ink-2); line-height:1.65; }
.dcx-ul li{ margin:3px 0; }
.dcx-grid2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:12px; }

/* ── TABLES ──────────────────────────────────────────────────────────── */
.dcx-tablewrap{ overflow:auto; max-height:62vh; border:1px solid var(--dcx-line); border-radius:10px; }
.dcx-table{ width:100%; border-collapse:collapse; font-size:12.8px; min-width:640px; }
.dcx-table th{ position:sticky; top:0; z-index:2; text-align:left; font-size:10.5px; letter-spacing:.7px; text-transform:uppercase;
  color:var(--dcx-muted); background:var(--dcx-card-2); padding:9px 12px; border-bottom:1px solid var(--dcx-line-2); white-space:nowrap; }
.dcx-table td{ padding:8px 12px; border-bottom:1px solid var(--dcx-line); color:var(--dcx-ink-2); vertical-align:top; line-height:1.5; }
.dcx-table tr:last-child td{ border-bottom:0; }
.dcx-table tr:hover td{ background:var(--dcx-card-2); }
.dcx-td-strong{ color:var(--dcx-ink); font-weight:600; }
.dcx-mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }

/* ── CHIPS ───────────────────────────────────────────────────────────── */
.dcx-chip{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; border:1px solid var(--dcx-line-2); color:var(--dcx-ink-2); background:var(--dcx-neutral-bg); white-space:nowrap; }
.dcx-chip--ok{      color:var(--dcx-ok);      background:var(--dcx-ok-bg);      border-color:var(--dcx-ok); }
.dcx-chip--warn{    color:var(--dcx-warn);    background:var(--dcx-warn-bg);    border-color:var(--dcx-warn); }
.dcx-chip--danger{  color:var(--dcx-danger);  background:var(--dcx-danger-bg);  border-color:var(--dcx-danger); }
.dcx-chip--info{    color:var(--dcx-info);    background:var(--dcx-info-bg);    border-color:var(--dcx-info); }
.dcx-chip--accent{  color:var(--dcx-ink);     background:var(--dcx-accent-soft); border-color:var(--dcx-accent); }

/* ── FILTER TOOLBAR ──────────────────────────────────────────────────── */
.dcx-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.dcx-search{ position:relative; flex:1 1 240px; max-width:420px; }
.dcx-search .dcx-ico{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--dcx-muted); }
.dcx-input{ width:100%; padding:9px 12px 9px 34px; border-radius:10px; border:1px solid var(--dcx-line-2);
  background:var(--dcx-card); color:var(--dcx-ink); font-size:13px; }
.dcx-input:focus{ outline:none; box-shadow:var(--dcx-focus); border-color:var(--dcx-accent); }
.dcx-filters{ display:flex; gap:6px; flex-wrap:wrap; }
.dcx-fchip{ padding:6px 12px; border-radius:999px; border:1px solid var(--dcx-line-2); background:transparent; color:var(--dcx-ink-2);
  cursor:pointer; font-size:12px; font-weight:600; }
.dcx-fchip:hover{ border-color:var(--dcx-accent); }
.dcx-fchip.active{ background:var(--dcx-accent-soft); border-color:var(--dcx-accent); color:var(--dcx-ink); }
.dcx-result-count{ font-size:12px; color:var(--dcx-muted); margin-left:auto; }

/* ── FEATURE CARDS ───────────────────────────────────────────────────── */
.dcx-fgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(295px,1fr)); gap:12px; }
.dcx-fcard{ background:var(--dcx-card); border:1px solid var(--dcx-line); border-radius:var(--dcx-radius); padding:15px 16px;
  cursor:pointer; text-align:left; color:inherit; display:flex; flex-direction:column; gap:8px; }
/* hover = geometry-stable (shadow + border only, no transforms) */
.dcx-fcard:hover{ border-color:var(--dcx-accent); box-shadow:var(--dcx-shadow); }
.dcx-fcard:focus-visible{ outline:none; box-shadow:var(--dcx-focus); }
.dcx-fcard-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dcx-fcard-name{ font-size:14px; font-weight:800; color:var(--dcx-ink); line-height:1.3; }
.dcx-fcard-sum{ font-size:12.6px; color:var(--dcx-ink-2); line-height:1.55; flex:1; }
.dcx-fcard-meta{ display:flex; gap:12px; font-size:11px; color:var(--dcx-muted); border-top:1px solid var(--dcx-line); padding-top:9px; }
.dcx-fcard-meta b{ color:var(--dcx-ink-2); font-variant-numeric:tabular-nums; }

/* ── FEATURE DETAIL ──────────────────────────────────────────────────── */
.dcx-back{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:0; color:var(--dcx-muted);
  cursor:pointer; font-size:12.5px; font-weight:700; padding:4px 2px; margin-bottom:8px; }
.dcx-back:hover{ color:var(--dcx-ink); }
.dcx-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.dcx-kv{ display:grid; grid-template-columns:130px 1fr; gap:4px 12px; font-size:12.8px; }
.dcx-kv dt{ color:var(--dcx-muted); font-weight:700; }
.dcx-kv dd{ margin:0; color:var(--dcx-ink-2); }
.dcx-files li, .dcx-endpoints li{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }

/* ── DIAGRAM ─────────────────────────────────────────────────────────── */
.dcx-diagwrap{ overflow-x:auto; border:1px solid var(--dcx-line); border-radius:12px; background:var(--dcx-card-2); padding:10px; }
.dcx-diag{ display:block; font-family:inherit; }
.dcx-diag .dcx-lanehead{ font-size:10.5px; font-weight:800; letter-spacing:1px; }
.dcx-diag .dcx-nlabel{ font-size:12px; font-weight:700; fill:var(--dcx-ink); }
.dcx-diag .dcx-nsub{ font-size:10px; fill:var(--dcx-diag-label); }
.dcx-diag .dcx-edge{ stroke:var(--dcx-diag-line); fill:none; stroke-width:1.6; }
.dcx-diag .dcx-edge--dashed{ stroke-dasharray:5 4; }
.dcx-diag .dcx-elabel{ font-size:9.5px; fill:var(--dcx-diag-label); font-weight:600; }
.dcx-diag .dcx-elabel-bg{ fill:var(--dcx-card-2); }
.dcx-diag .dcx-arrow{ fill:var(--dcx-diag-line); }
.dcx-diag .dcx-node{ fill:var(--dcx-node-fill); }
/* lane-typed node borders + header pills (labels always present — never color-alone) */
.dcx-diag .dcx-n--client   { stroke:var(--dcx-lane-client); }
.dcx-diag .dcx-n--edge     { stroke:var(--dcx-lane-edge); }
.dcx-diag .dcx-n--api      { stroke:var(--dcx-lane-api); }
.dcx-diag .dcx-n--data     { stroke:var(--dcx-lane-data); }
.dcx-diag .dcx-n--external { stroke:var(--dcx-lane-external); }
.dcx-diag .dcx-n--security { stroke:var(--dcx-lane-security); }
.dcx-diag .dcx-lh--client   { fill:var(--dcx-lane-client); }
.dcx-diag .dcx-lh--edge     { fill:var(--dcx-lane-edge); }
.dcx-diag .dcx-lh--api      { fill:var(--dcx-lane-api); }
.dcx-diag .dcx-lh--data     { fill:var(--dcx-lane-data); }
.dcx-diag .dcx-lh--external { fill:var(--dcx-lane-external); }
.dcx-diag .dcx-lh--security { fill:var(--dcx-lane-security); }
.dcx-diag .dcx-tint{ opacity:.10; }
.dcx-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:11.5px; color:var(--dcx-muted); }
.dcx-legend .dot{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:-1px; }

/* ── CHANGELOG TIMELINE ──────────────────────────────────────────────── */
.dcx-tl{ display:flex; flex-direction:column; gap:10px; }
.dcx-tl-date{ font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--dcx-muted); margin:10px 0 2px; }
.dcx-tl-it{ display:flex; gap:12px; background:var(--dcx-card); border:1px solid var(--dcx-line); border-radius:12px; padding:12px 14px; }
.dcx-tl-rail{ width:4px; border-radius:4px; flex:0 0 4px; background:var(--dcx-line-2); }
.dcx-tl-it[data-cl="ADDED"]    .dcx-tl-rail{ background:var(--dcx-ok); }
.dcx-tl-it[data-cl="REMOVED"]  .dcx-tl-rail{ background:var(--dcx-danger); }
.dcx-tl-it[data-cl="CHANGED"]  .dcx-tl-rail{ background:var(--dcx-info); }
.dcx-tl-it[data-cl="SECURITY"] .dcx-tl-rail{ background:var(--dcx-warn); }
.dcx-tl-body{ min-width:0; }
.dcx-tl-title{ font-weight:700; color:var(--dcx-ink); font-size:13.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dcx-tl-det{ color:var(--dcx-ink-2); font-size:12.6px; line-height:1.55; margin-top:4px; }
.dcx-tl-area{ font-size:11px; color:var(--dcx-muted); }

/* ── VULNERABILITIES ─────────────────────────────────────────────────── */
.dcx-vsum{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:12px; }
.dcx-vcard{ background:var(--dcx-card); border:1px solid var(--dcx-line); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.dcx-vcard-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.dcx-vid{ font-family:ui-monospace, Menlo, Consolas, monospace; font-weight:800; color:var(--dcx-ink); font-size:13px; }
.dcx-vtitle{ font-weight:700; color:var(--dcx-ink); font-size:13.5px; flex:1 1 280px; }
.dcx-vmeta{ display:flex; gap:14px; font-size:11.5px; color:var(--dcx-muted); margin:7px 0 6px; flex-wrap:wrap; }
.dcx-vrem{ margin:6px 0 0; padding-left:18px; color:var(--dcx-ink-2); font-size:12.6px; line-height:1.6; }
.dcx-vrem li{ margin:2px 0; }
.dcx-vrem-cap{ font-size:10.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--dcx-muted); margin-top:8px; }

/* ── RECOMMENDATIONS ─────────────────────────────────────────────────── */
.dcx-rec{ display:flex; gap:12px; align-items:flex-start; background:var(--dcx-card); border:1px solid var(--dcx-line);
  border-radius:12px; padding:13px 15px; margin-bottom:10px; }
.dcx-rec-pr{ flex:0 0 auto; font-weight:800; font-size:12px; padding:4px 10px; border-radius:8px; border:1px solid var(--dcx-line-2); font-variant-numeric:tabular-nums; }
.dcx-rec-pr[data-p="P0"]{ color:var(--dcx-danger); background:var(--dcx-danger-bg); border-color:var(--dcx-danger); }
.dcx-rec-pr[data-p="P1"]{ color:var(--dcx-warn);   background:var(--dcx-warn-bg);   border-color:var(--dcx-warn); }
.dcx-rec-pr[data-p="P2"]{ color:var(--dcx-info);   background:var(--dcx-info-bg);   border-color:var(--dcx-info); }
.dcx-rec-t{ font-weight:700; color:var(--dcx-ink); font-size:13.5px; }
.dcx-rec-why{ color:var(--dcx-ink-2); font-size:12.6px; line-height:1.55; margin-top:3px; }
.dcx-rec-meta{ font-size:11.5px; color:var(--dcx-muted); margin-top:5px; }

/* ── STATES ──────────────────────────────────────────────────────────── */
.dcx-state{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:70px 20px; text-align:center; color:var(--dcx-muted); }
.dcx-state .dcx-ico{ width:38px; height:38px; opacity:.7; }
.dcx-state-t{ font-size:16px; font-weight:800; color:var(--dcx-ink); }
.dcx-spin{ width:26px; height:26px; border-radius:50%; border:3px solid var(--dcx-line-2); border-top-color:var(--dcx-accent); animation:dcxspin .8s linear infinite; }
@keyframes dcxspin{ to{ transform:rotate(360deg); } }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .dcx-body{ grid-template-columns:1fr; }
  .dcx-rail{ position:static; flex-direction:row; flex-wrap:wrap; }
  .dcx-rail-btn{ width:auto; }
  .dcx-rail-btn .dcx-count{ margin-left:6px; }
}
@media (max-width: 640px){
  .dcx-shell{ padding:12px 12px 30px; }
  .dcx-kpi-val{ font-size:21px; }
}