/* =====================================================================
   Kira Customer Graph — SelesAI light theme (design/system.md v3).
   Light-only, navy #102f3a, teal #087f8c, DM Sans, hairline borders,
   no emojis, 200ms transform+opacity motion, prefers-reduced-motion.
   ===================================================================== */

.kira-cg{
  --navy:#102f3a; --text2:#5b6b76; --text3:#84939c;
  --accent:#087f8c; --accent-hover:#06697e; --accent-soft:#e3f3f5;
  --paper:#ffffff; --bg-alt:#f8fafb; --border:#e2e8ed; --border-em:#c6d2d9;
  --green:#0f9d78; --amber:#e5a000; --red:#d64545; --grey:#84939c;
  --raised:#f2f6f8;
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  color:var(--navy); background:var(--paper);
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.kira-cg *{box-sizing:border-box}
.kira-cg .cg-mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.kira-cg button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.kira-cg .hidden{display:none!important}

/* --- top bar --- */
.kira-cg .cg-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px; border-bottom:1px solid var(--border); background:var(--paper);
}
.kira-cg .cg-stats{display:flex; gap:22px; flex-wrap:wrap; align-items:center}
.kira-cg .cg-stat{text-align:left}
.kira-cg .cg-num{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:600;color:var(--navy);line-height:1.2}
.kira-cg .cg-lab{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.kira-cg .cg-back{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:8px 14px; border:1px solid var(--border); border-radius:8px;
  font-size:13px; font-weight:600; color:var(--text2); transition:background .15s,color .15s,border-color .15s;
}
.kira-cg .cg-back:hover{background:var(--bg-alt);color:var(--navy);border-color:var(--border-em)}
.kira-cg .cg-ic{display:inline-flex;color:var(--accent)}

/* --- canvas --- */
.kira-cg .cg-canvas{position:relative;background:var(--paper)}
.kira-cg .cg-canvas svg{display:block;width:100%;height:auto}

/* --- legend --- */
.kira-cg .cg-legend{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  padding:10px 18px; border-top:1px solid var(--border); background:var(--bg-alt);
}
.kira-cg .cg-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text2)}
.kira-cg .cg-legend-note{color:var(--text3)}
.kira-cg .cg-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}

/* --- hint --- */
.kira-cg .cg-hint{
  padding:8px 18px; font-size:12px; color:var(--text3); border-top:1px solid var(--border);
  text-align:center; background:var(--paper);
}

/* --- node labels --- */
.kira-cg .cg-node-core{transition:stroke-width .2s,fill-opacity .2s}
.kira-cg .cg-sub-core{transition:stroke-width .2s,fill .2s}
.kira-cg .cg-sub-ic svg{width:20px;height:20px}

/* --- detail panel (drill-down replaces the old alert) --- */
.kira-cg .cg-detail{
  border-top:1px solid var(--border); background:var(--paper);
}
.kira-cg .cg-detail-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border); background:var(--bg-alt);
}
.kira-cg .cg-detail-title{display:flex; align-items:center; gap:10px}
.kira-cg .cg-detail-ic{display:inline-flex;flex:none}
.kira-cg .cg-detail-h1{font-size:15px;font-weight:700;color:var(--navy);line-height:1.3}
.kira-cg .cg-detail-sub{font-size:12px;color:var(--text3);font-family:'JetBrains Mono',monospace}
.kira-cg .cg-detail-close{color:var(--text3);font-size:20px;line-height:1;padding:2px 8px;border-radius:8px}
.kira-cg .cg-detail-close:hover{background:var(--raised);color:var(--navy)}
.kira-cg .cg-detail-body{padding:18px}
.kira-cg .cg-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
@media(max-width:560px){.kira-cg .cg-metrics{grid-template-columns:1fr}}
.kira-cg .cg-metric{background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;padding:12px}
.kira-cg .cg-m-val{font-size:18px;font-weight:700;color:var(--navy)}
.kira-cg .cg-m-l{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-top:2px}
.kira-cg .cg-note{font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;margin:8px 0 2px}
.kira-cg .cg-note-sub{font-size:13px;color:var(--text2);line-height:1.5}
.kira-cg .cg-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eef1f4;font-size:13.5px}
.kira-cg .cg-row-l{color:var(--text2)}
.kira-cg .cg-flag{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:8px;margin-bottom:8px;background:var(--bg-alt);border:1px solid var(--border)}
.kira-cg .cg-flag .cg-dot{margin-top:3px}
.kira-cg .cg-flag-t{font-size:13.5px;font-weight:700;color:var(--navy)}
.kira-cg .cg-brief{
  background:var(--accent-soft); border:1px solid #bfe1e6; border-radius:8px;
  padding:14px 16px; font-size:14px; line-height:1.6; color:var(--navy);
}

/* =====================================================================
   POP-OUT OVERLAY (sub-node drill) — fixed modal, same mechanic as the
   main dashboard's detail-overlay. Lives on <body> (outside .kira-cg), so
   it carries its own design tokens + content styles.
   ===================================================================== */
.cg-overlay{
  --navy:#102f3a; --text2:#5b6b76; --text3:#84939c;
  --accent:#087f8c; --accent-hover:#06697e; --accent-soft:#e3f3f5;
  --paper:#ffffff; --bg-alt:#f8fafb; --border:#e2e8ed; --border-em:#c6d2d9;
  --green:#0f9d78; --amber:#e5a000; --red:#d64545; --grey:#84939c; --raised:#f2f6f8;
  position:fixed; inset:0; background:rgba(16,47,58,0.45); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; z-index:950;
  padding:40px 20px; overflow-y:auto;
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  color:var(--navy); -webkit-font-smoothing:antialiased;
}
.cg-overlay.open{display:flex}
.cg-overlay-panel{background:var(--paper);border-radius:12px;width:min(680px,96vw);
  border:1px solid var(--border);box-shadow:0 24px 60px rgba(16,47,58,.25);
  animation:cgpop .2s cubic-bezier(.16,1,.3,1)}
@keyframes cgpop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.cg-overlay-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border);background:var(--paper);
  border-radius:12px 12px 0 0;position:sticky;top:0;z-index:2}
.cg-overlay-title{display:flex;align-items:center;gap:10px}
.cg-overlay-h1{font-size:16px;font-weight:700;color:var(--navy);line-height:1.3}
.cg-overlay-sub{font-size:11.5px;color:var(--text3);font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;margin-top:2px}
.cg-overlay-close{background:var(--bg-alt);border:1px solid var(--border);border-radius:50%;
  width:32px;height:32px;cursor:pointer;color:var(--text3);font-size:16px;line-height:1}
.cg-overlay-close:hover{background:var(--raised);color:var(--navy)}
.cg-overlay-body{padding:20px;color:var(--text2);font-size:13px}

/* detail-body content classes, scoped to the overlay (replicates .kira-cg) */
.cg-overlay-body .cg-mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.cg-overlay-body .cg-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
@media(max-width:560px){.cg-overlay-body .cg-metrics{grid-template-columns:1fr}}
.cg-overlay-body .cg-metric{background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;padding:12px}
.cg-overlay-body .cg-m-val{font-size:18px;font-weight:700;color:var(--navy)}
.cg-overlay-body .cg-m-l{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-top:2px}
.cg-overlay-body .cg-note{font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;margin:8px 0 2px}
.cg-overlay-body .cg-note-sub{font-size:13px;color:var(--text2);line-height:1.5}
.cg-overlay-body .cg-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eef1f4;font-size:13.5px}
.cg-overlay-body .cg-row-l{color:var(--text2)}
.cg-overlay-body .cg-flag{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:8px;margin-bottom:8px;background:var(--bg-alt);border:1px solid var(--border)}
.cg-overlay-body .cg-flag .cg-dot{margin-top:3px}
.cg-overlay-body .cg-flag-t{font-size:13.5px;font-weight:700;color:var(--navy)}
.cg-overlay-body .cg-brief{background:var(--accent-soft);border:1px solid #bfe1e6;border-radius:8px;padding:14px 16px;font-size:14px;line-height:1.6;color:var(--navy)}
/* document history tables (PO / invoice / payment sub-node drill-downs) */
.cg-overlay-body .cg-doc{width:100%;border-collapse:collapse;font-size:13px;color:var(--text2);min-width:420px}
.cg-overlay-body .cg-doc th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);text-align:left;padding:7px 10px;border-bottom:1px solid var(--border)}
.cg-overlay-body .cg-doc th.num,.cg-overlay-body .cg-doc td.num{text-align:right}
.cg-overlay-body .cg-doc td{padding:8px 10px;border-bottom:1px solid #eef1f4;white-space:nowrap}
.cg-overlay-body .cg-doc tr:last-child td{border-bottom:none}
.cg-overlay-body .cg-doc td .cg-mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.cg-overlay-body .cg-doc tbody tr:hover{background:var(--bg-alt)}

/* =====================================================================
   Kira Inventory Map — SelesAI light theme (matches kira-cg).
   Node size = stock value · colour = stock state · dashed ring + ▲N/mo =
   velocity · supplier products cluster together.
   ===================================================================== */
.kira-iv{
  --navy:#102f3a; --text2:#5b6b76; --text3:#84939c;
  --accent:#087f8c; --accent-hover:#06697e; --accent-soft:#e3f3f5;
  --paper:#ffffff; --bg-alt:#f8fafb; --border:#e2e8ed; --border-em:#c6d2d9;
  --green:#0f9d78; --amber:#e5a000; --red:#d64545; --blue:#3b82f6; --grey:#84939c;
  --raised:#f2f6f8;
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  color:var(--navy); background:var(--paper);
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.kira-iv *{box-sizing:border-box}
.kira-iv .iv-mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.kira-iv button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.kira-iv .hidden{display:none!important}

.kira-iv .iv-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--border); background:var(--paper);
}
.kira-iv .iv-stats{display:flex; gap:20px; flex-wrap:wrap; align-items:center}
.kira-iv .iv-stat{text-align:left}
.kira-iv .iv-num{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:600;color:var(--navy);line-height:1.2}
.kira-iv .iv-lab{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.kira-iv .iv-legend{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:11px; color:var(--text2)}
.kira-iv .iv-legend-item{display:inline-flex;align-items:center;gap:6px}
.kira-iv .iv-legend-note{color:var(--text3);font-style:italic}
.kira-iv .iv-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.kira-iv .iv-canvas{position:relative;background:var(--paper)}
.kira-iv .iv-hint{font-size:11.5px;color:var(--text3);padding:10px 18px;border-top:1px solid var(--border);text-align:center;background:var(--bg-alt)}

.kira-iv .iv-node-core{transition:stroke-width .15s,fill-opacity .15s}
.kira-iv .iv-node-name{font-weight:600}
.kira-iv .iv-node-sub{font-family:'JetBrains Mono',monospace}

/* True landed margin panel (money makers vs sinks) — light SelesAI */
.kira-iv .iv-margin{padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg-alt)}
.kira-iv .m-head{font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:10px;letter-spacing:.01em}
.kira-iv .m-cols{display:flex;gap:28px;flex-wrap:wrap}
.kira-iv .m-col{flex:1;min-width:220px}
.kira-iv .m-title{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:6px}
.kira-iv .m-title.m-pos{color:var(--success)}
.kira-iv .m-title.m-neg{color:var(--error)}
.kira-iv .m-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 0;font-size:12px}
.kira-iv .m-name{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kira-iv .m-pct{font-family:'JetBrains Mono',monospace;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.kira-iv .m-pct.m-pos{color:var(--success)}
.kira-iv .m-pct.m-thin{color:var(--warning)}
.kira-iv .m-pct.m-neg{color:var(--error)}
.kira-iv .m-empty{font-size:11.5px;color:var(--text3);font-style:italic}
.kira-iv .m-note{margin-top:10px;padding-top:8px;border-top:1px solid var(--border);font-size:10.5px;color:var(--text3);line-height:1.5}

/* detail overlay (product drill) */
.iv-overlay{position:fixed;inset:0;background:rgba(16,47,58,0.45);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;z-index:980;padding:40px 20px;overflow-y:auto}
.iv-overlay-panel{background:#fff;border-radius:14px;width:min(520px,96vw);border:1px solid var(--border);
  box-shadow:0 24px 60px rgba(16,47,58,.25);animation:ivpop .2s cubic-bezier(.16,1,.3,1);overflow:hidden}
@keyframes ivpop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.iv-overlay-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;
  border-bottom:1px solid var(--border);background:#fff}
.iv-overlay-h1{font-size:17px;font-weight:700;color:var(--navy)}
.iv-overlay-sub{font-size:12px;color:var(--text3);margin-top:2px;font-family:'JetBrains Mono',monospace}
.iv-overlay-close{background:var(--bg-alt);border:1px solid var(--border);border-radius:50%;width:32px;height:32px;
  cursor:pointer;color:var(--text2);font-size:15px;line-height:1}
.iv-overlay-close:hover{background:var(--raised);color:var(--navy)}
.iv-overlay-body{padding:20px 22px;color:var(--text2);font-size:13px}
.iv-ov-metric{font-family:'JetBrains Mono',monospace;font-size:2.2rem;font-weight:600;margin-bottom:14px;line-height:1}
.iv-ov-m-l{display:block;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;font-family:'DM Sans',sans-serif;font-weight:600;margin-top:3px}
.iv-ov-rows{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.iv-row{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--border);font-size:13px}
.iv-row:last-child{border-bottom:none}
.iv-row-l{color:var(--text2);font-weight:500}
.iv-mono{font-family:'JetBrains Mono',monospace;color:var(--navy);font-variant-numeric:tabular-nums;text-align:right}
.iv-note{margin-top:16px;padding:12px 16px;background:var(--bg-alt);border-left:3px solid var(--accent);
  border-radius:8px;font-size:12.5px;color:var(--text2);line-height:1.55}
.iv-note strong{color:var(--navy)}