/* src/styles/main.css - CSS tùy chỉnh cho Gia Phả Điện Tử */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,300&display=swap');

:root {
  --primary-color: #15803d;
  --secondary-color: #047857;
  --bg-color: #f8fafc;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-color);
  color: #0f172a;
  margin: 0;
  padding: 0;
}

.font-serif {
  font-family: 'Merriweather', Georgia, serif;
}

/* Sơ đồ đồ thị SVG */
#family-tree-svg {
  width: 100%;
  height: calc(100vh - 70px);
  background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
  background-size: 24px 24px;
  cursor: grab;
}

#family-tree-svg:active {
  cursor: grabbing;
}

/* Stylings cho D3 Nodes */
.tree-node {
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.tree-node:hover {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));
}

.tree-node.deceased rect {
  opacity: 0.85;
}

/* Links */
.tree-link {
  transition: stroke 0.3s ease;
}

.tree-link:hover {
  stroke-width: 4px;
}

/* Glassmorphism Modal */
.modal-backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
}