/* ==========================================================================
   GenoFun - Genogram SVG & Node Styles
   ========================================================================== */

/* Main SVG canvas */
svg.genogram-canvas {
  background-color: transparent;
  width: 100%;
  height: 100%;
}

/* Layering Groups */
.layer-grid { pointer-events: none; }
.layer-households { pointer-events: all; }
.layer-freelines { pointer-events: all; }
.layer-relationships { pointer-events: all; }
.layer-comments { pointer-events: all; }
.layer-nodes { pointer-events: all; }
.layer-overlay { pointer-events: none; }

/* Node Base Style */
.geno-node {
  cursor: grab;
  transition: filter var(--trans-fast);
}

.geno-node:active {
  cursor: grabbing;
}

.geno-node.selected .node-shape {
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.geno-node.selected .node-selection-ring {
  opacity: 1;
}

.node-selection-ring {
  fill: none;
  stroke: var(--accent-primary);
  stroke-width: 2.5;
  stroke-dasharray: 4 4;
  opacity: 0;
  transition: opacity var(--trans-fast);
  pointer-events: none;
}

/* Central Figure - Double Border & Warm Accent Glow */
.geno-node.central-figure .node-central-ring {
  display: block;
}

.node-central-ring {
  display: none;
  fill: none;
  stroke: #f59e0b;
  stroke-width: 2.5;
  stroke-dasharray: 6 3;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.45));
  animation: rotate-central 20s linear infinite;
  transform-origin: center;
}

@keyframes rotate-central {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Central Star Badge */
.central-badge {
  font-size: 13px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Node Shape Styles */
.node-shape {
  transition: stroke var(--trans-fast), fill var(--trans-fast), stroke-width var(--trans-fast);
  stroke-linejoin: round;
  stroke-linecap: round;
}

.node-shape.male {
  rx: 6px;
  ry: 6px;
}

.node-shape.female {
  /* Circle */
}

.node-shape.diverse {
  /* Diamond */
  transform-origin: center;
}

.node-shape.unknown {
  stroke-dasharray: 5 3;
}

.node-shape.unborn {
  stroke-dasharray: 4 2;
}

.node-shape.adopted {
  stroke-dasharray: 6 3;
}

/* Deceased strike-through diagonal */
.node-deceased-slash {
  stroke: var(--color-danger);
  stroke-width: 2.5;
  stroke-linecap: round;
  pointer-events: none;
}

/* Direction of Gaze (Hellinger Nase / Direction Pointer) */
.node-direction-pointer {
  fill: var(--accent-primary);
  stroke: var(--bg-surface);
  stroke-width: 1.5;
  cursor: pointer;
  transition: transform var(--trans-fast);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

.node-direction-pointer:hover {
  transform: scale(1.3);
  fill: var(--fun-primary);
}

/* Labels below node */
.node-label-group {
  pointer-events: none;
  text-anchor: middle;
  font-family: var(--font-sans);
}

.node-label-name {
  font-weight: 700;
  font-size: 13px;
  fill: var(--text-primary);
}

.node-label-sub {
  font-size: 11px;
  font-weight: 500;
  fill: var(--text-secondary);
}

.node-label-detail {
  font-size: 10px;
  fill: var(--text-muted);
}

/* Connection Handle on Node (For drag-to-connect relationship) */
.node-connect-handle {
  fill: var(--accent-primary);
  stroke: #ffffff;
  stroke-width: 2;
  cursor: crosshair;
  opacity: 0;
  transition: opacity var(--trans-fast), transform var(--trans-fast);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}

.geno-node:hover .node-connect-handle {
  opacity: 1;
}

.node-connect-handle:hover {
  transform: scale(1.3);
  fill: var(--fun-primary);
}

/* ==========================================================================
   Relationship Lines
   ========================================================================== */
.geno-relationship {
  cursor: pointer;
}

.geno-relationship:hover .rel-line-hover-zone {
  stroke: rgba(99, 102, 241, 0.2);
}

.geno-relationship.selected .rel-path {
  stroke: var(--accent-primary) !important;
  stroke-width: 3.5 !important;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.rel-line-hover-zone {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  cursor: pointer;
  stroke-linecap: round;
}

.rel-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--trans-fast), stroke-width var(--trans-fast);
}

/* Relationship Badge in Center */
.rel-badge-group {
  cursor: pointer;
  transition: transform var(--trans-spring);
}

.rel-badge-group:hover {
  transform: scale(1.2);
}

.rel-badge-bg {
  fill: var(--bg-card);
  stroke: var(--border-medium);
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}

.rel-badge-text {
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 12px;
  user-select: none;
}

/* Relationship text annotation */
.rel-text-label {
  font-size: 10px;
  font-weight: 600;
  fill: var(--text-muted);
  text-anchor: middle;
  dominant-baseline: central;
  background: var(--bg-surface);
  user-select: none;
}

/* Separation / Divorce Cross slashes */
.rel-slash {
  stroke: var(--color-danger);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* Child & Parenthood Branching Lines */
.tree-branch-line {
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tree-branch-line.adopted {
  stroke-dasharray: 6 3;
}

.tree-branch-line.foster {
  stroke-dasharray: 3 3;
}

/* Twin connecting bar */
.twin-bridge-line {
  fill: none;
  stroke: var(--accent-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* Household Container */
.geno-household {
  cursor: move;
}

.household-box {
  fill: rgba(99, 102, 241, 0.04);
  stroke: var(--accent-primary);
  stroke-width: 2;
  stroke-dasharray: 8 5;
  rx: 16px;
  ry: 16px;
  transition: fill var(--trans-fast), stroke var(--trans-fast);
}

.geno-household:hover .household-box {
  fill: rgba(99, 102, 241, 0.08);
  stroke-width: 2.5;
}

.household-badge-bg {
  fill: var(--accent-primary);
  rx: 12px;
  ry: 12px;
}

.household-badge-text {
  fill: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

.household-resize-handle {
  fill: var(--accent-primary);
  stroke: #ffffff;
  stroke-width: 2;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity var(--trans-fast);
}

.geno-household:hover .household-resize-handle,
.geno-household.selected .household-resize-handle {
  opacity: 1;
}

/* Sticky Note / Comments */
.geno-comment {
  cursor: move;
  user-select: none;
}

.comment-card {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
  transition: transform var(--trans-fast);
}

.geno-comment:hover .comment-card {
  transform: translateY(-2px);
}

.comment-pin {
  font-size: 16px;
}

.comment-title {
  font-weight: 700;
  font-size: 12px;
  fill: #1e293b;
}

.comment-body {
  font-size: 11px;
  fill: #334155;
  font-family: var(--font-sans);
}

/* Freehand Lines & Annotations */
.geno-freeline {
  cursor: pointer;
}

.geno-freeline:hover .freeline-path {
  stroke-width: 4 !important;
}

.geno-freeline.selected .freeline-path {
  stroke: var(--accent-primary) !important;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* Temporary Live Connection Line while dragging */
.live-drag-connection {
  stroke: var(--accent-primary);
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
  fill: none;
  pointer-events: none;
  animation: dash-move 1s linear infinite;
}

@keyframes dash-move {
  to { stroke-dashoffset: -20; }
}

/* Dimmed elements when filter is active */
.geno-node.dimmed,
.geno-relationship.dimmed,
.geno-household.dimmed,
.tree-branch-line.dimmed {
  opacity: 0.15;
  filter: grayscale(1);
  transition: opacity var(--trans-normal);
}

/* Search Highlight Pulse */
.search-highlight-ring {
  fill: none;
  stroke: var(--fun-primary);
  stroke-width: 3;
  animation: pulse-search 1.5s ease-out infinite;
  pointer-events: none;
}

@keyframes pulse-search {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}