/**
 * Cortex Graph View — Phase 9
 * D3.js force-directed knowledge graph styles.
 */

/* ========================================
   GRAPH CONTAINER
   ======================================== */

#graphSection {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background-color: var(--color-canvas);
}

#graphSection.active {
  display: flex;
}

/* Controls bar above canvas */
.graph-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.graph-controls input[type="text"] {
  flex: 1;
  min-width: 160px;
  max-width: 260px;
  background: var(--color-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: var(--font-size-xs);
}

.graph-controls select {
  background: var(--color-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.graph-stat {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  padding: 4px 8px;
  background: var(--color-raised);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

.graph-toggle-btn {
  font-size: var(--font-size-xs);
  padding: 5px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-raised);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.graph-toggle-btn:hover {
  background: var(--color-overlay);
  color: var(--color-text-primary);
}

.graph-toggle-btn.active {
  border-color: var(--color-accent-muted);
  color: var(--color-accent);
  background: var(--color-accent-light);
}

/* ========================================
   SVG CANVAS
   ======================================== */

#graphCanvas {
  flex: 1;
  width: 100%;
  height: 100%;
  cursor: grab;
  background-color: var(--color-canvas);
}

#graphCanvas:active {
  cursor: grabbing;
}

/* ========================================
   D3 NODE STYLES
   ======================================== */

/* Memory nodes (hexagonal shape via SVG polygon) */
.graph-node {
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.graph-node:hover .node-shape {
  filter: brightness(1.3);
}

.graph-node.dimmed {
  opacity: 0.15;
}

.graph-node.highlighted .node-shape {
  filter: drop-shadow(0 0 6px currentColor);
}

/* Node shape fill colors — match memory type */
.node-semantic   { fill: var(--memory-semantic);   stroke: rgba(59,130,246,0.4); }
.node-episodic   { fill: var(--memory-episodic);   stroke: rgba(139,92,246,0.4); }
.node-procedural { fill: var(--memory-procedural); stroke: rgba(245,158,11,0.4); }
.node-policy     { fill: var(--memory-policy);     stroke: rgba(244,63,94,0.4); }
.node-document   { fill: #4b5563; stroke: rgba(255,255,255,0.2); }

/* Superseded nodes: 40% opacity + dashed border */
.node-superseded {
  opacity: 0.4;
}
.node-superseded .node-shape {
  stroke-dasharray: 4 2;
}

/* Node labels (hidden by default, shown on hover) */
.node-label {
  font-size: 10px;
  fill: var(--color-text-secondary);
  pointer-events: none;
  display: none;
  text-anchor: middle;
}
.graph-node:hover .node-label {
  display: block;
}

/* ========================================
   D3 EDGE STYLES
   ======================================== */

.graph-link {
  fill: none;
  pointer-events: none;
}

/* Edge styles by relationship type */
.link-relates    { stroke: rgba(0,0,0,0.15); stroke-width: 1; }
.link-extends    { stroke: var(--memory-semantic); stroke-width: 1.5; opacity: 0.6; }
.link-derives    { stroke: var(--color-success); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.6; }
.link-updates    { stroke: var(--color-error); stroke-width: 2; stroke-dasharray: 5 3; opacity: 0.7; }

/* ========================================
   GRAPH TOOLTIP
   ======================================== */

.graph-tooltip {
  position: fixed;
  background: var(--color-overlay);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  pointer-events: none;
  z-index: var(--z-dropdown);
  max-width: 240px;
  box-shadow: var(--shadow-lg);
}

/* ========================================
   GRAPH DETAIL PANEL (right sidebar)
   ======================================== */

#graphDetailPanel {
  width: 300px;
  min-width: 300px;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#graphDetailPanel.open {
  display: flex;
}

.graph-detail-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.graph-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.graph-detail-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.graph-detail-connections {
  margin-top: var(--space-4);
}

.graph-detail-connections h4 {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.connection-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-size: var(--font-size-xs);
}

.connection-item:hover {
  background: var(--color-raised);
}