/* Base Typography for Visualization Elements Only */
.viz-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#canvas {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

/* SVG and D3 Elements */
.skill-node text,
.skill-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  fill: var(--text-primary, #2c3e50);
}

html.dark .skill-node text,
html.dark .skill-label {
  fill: var(--text-primary, #ecf0f1);
}

.skill-label-bg {
  fill: var(--bg-primary, rgba(255, 255, 255, 0.9));
  stroke: var(--border-light, rgba(0, 0, 0, 0.1));
  stroke-width: 1;
}

html.dark .skill-label-bg {
  fill: var(--bg-primary, rgba(30, 30, 30, 0.9));
  stroke: var(--border-light, rgba(255, 255, 255, 0.1));
}

.link {
  fill: none;
  stroke-opacity: 0.6;
}

.link.highlight {
  stroke-opacity: 1.0;
}

.skill-node.highlight text {
  fill: #d62728;
  font-weight: bold;
}

/* Experience Node Highlighting */
.experience-node.highlight foreignObject div {
  outline: 2pt solid #20603d;
  background-color: #eafaf1;
}

html.dark .experience-node.highlight foreignObject div {
  background-color: rgba(30, 100, 60, 0.3);
}

.hover-active .link:not(.highlight) {
  stroke-opacity: 0.1;
}

.hover-active .skill-node:not(.highlight) text {
  opacity: 0.8;
}

/* Experience Paragraph Spacing */
.experience-node foreignObject div p {
  margin-top: 2pt;
  margin-bottom: 4pt;
}

/* Visualization-specific elements */
#detail-info,
#disclaimer {
  position: fixed;
  z-index: 1000;
}

/* Visualization-specific styles */
.exp-card {
  fill: rgba(255, 255, 255, 0.95);
  stroke: #ddd;
  stroke-width: 1;
  rx: 8;
}

html.dark .exp-card {
  fill: rgba(34, 31, 34, 0.95);
  stroke: #403e41;
}

.exp-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #2c3e50;
  padding: 12px;
  font-size: 14px;
  line-height: 1.4;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

html.dark .exp-content {
  color: #ecf0f1;
}

.exp-title {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 16px;
  line-height: 1.2;
}

.exp-company {
  font-weight: 600;
  color: #7f8c8d;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.2;
}

html.dark .exp-company {
  color: #bdc3c7;
}

.exp-details {
  color: #34495e;
  font-size: 14px;
  line-height: 1.4;
}

html.dark .exp-details {
  color: #95a5a6;
}

/* === DETAIL PANEL AND DISCLAIMER DARK MODE === */
html.dark #detail-info {
  background: rgba(34, 31, 34, 0.98);
  border-color: #403e41;
  color: #c9d1d9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

html.dark #disclaimer {
  background: rgba(34, 31, 34, 0.9);
  border-color: #403e41;
  color: #939293;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  padding: 10px 15px;
  font-size: 12px;
  border-radius: 8px;
}

/* Experience card backgrounds in dark mode */
html.dark .exp-card {
  fill: rgba(34, 31, 34, 0.95);
  stroke: #403e41;
}

/* Adjust spacing to prevent overlap */
#detail-info {
  max-height: calc(100vh - 120px); /* Prevent overlap with disclaimer */
  overflow-y: auto;
}

#disclaimer {
  bottom: 20px;
  right: 20px;
  position: fixed;
}

/* === DETAIL PANEL DARK MODE TEXT === */
html.dark #detail-info {
  color: #c9d1d9; /* Light blue/white-ish text color */
}

html.dark #detail-info h3 {
  color: #c9d1d9; /* Ensure headers match the main text color */
}

html.dark #detail-info div {
  color: #c9d1d9; /* Ensure all div text matches the theme */
}

/* Detail panel text in light mode */
#detail-info {
  background: rgba(255, 255, 255, 0.98); /* Light background */
  border-color: #ddd; /* Light border */
  color: #34495e; /* Darker text color for better readability */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

#detail-info h3 {
  color: #34495e; /* Match header text color to main text */
}

#detail-info div {
  color: #34495e; /* Ensure all div text matches the darker theme */
}

/* Highlighted experience card */
.exp-node.highlighted rect {
  stroke: #60a076;
  stroke-width: 3px;
  opacity: 1;
}

/* Dimmed experience card */
.exp-node.dimmed rect {
  opacity: 0.6;
}

/* Define text-primary for light mode */
html:not(.dark) {
  --text-primary: #34495e; /* Darker text color for better readability in light mode */
}

/* Define text-primary for dark mode */
html.dark {
  --text-primary: #ecf0f1; /* Light text color for dark mode */
}