/* Dark theme with high contrast */
body { 
  background: #0b1220; 
  color: #e5e7eb; 
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

/* Card styles */
.card { 
  background: #0f172a; 
  border: 1px solid #1f2937; 
  border-radius: 0.75rem; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.35); 
  padding: 1rem; 
}

.chart-card { 
  min-height: 360px; 
}

/* Dynamic chart cards for equal sizing */
.chart-card-dynamic {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
}

.chart-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0.5rem 0;
}

.chart-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}

/* Responsive layout for Companies & Positions charts */
@media (min-width: 768px) {
  .chart-content {
    flex-direction: row;
    gap: 1rem;
  }
  
  .chart-section {
    flex: 1;
    min-height: 220px;
  }
  
  .chart-container {
    padding: 1.5rem;
  }
}

.chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 120px;
  width: 100%;
}

.stats-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
}

.projects-content {
  flex: 1;
  overflow-y: auto;
  max-height: calc(100vh - 8rem);
}

.chart-card-compact {
  min-height: 280px;
  max-height: 280px;
  height: 280px;
}

.projects-panel { 
  max-height: calc(100vh - 8rem); 
  overflow-y: auto; 
}

/* Text styles */
.muted { 
  color: #94a3b8; 
}

.title { 
  font-weight: 700; 
}

/* Button styles */
.toolbar button { 
  border: 1px solid #334155; 
  padding: 0.3rem 0.6rem; 
  border-radius: 0.375rem; 
  background: #0b1220; 
  color: #e5e7eb;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toolbar button:hover {
  background: #1f2937;
  border-color: #475569;
}

/* Link styles */
.link { 
  color: #93c5fd; 
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

/* Circular chart styles */
.chart-segment {
  transition: opacity 0.3s ease;
}

.chart-segment:hover {
  opacity: 0.8 !important;
}

.chart-segment path {
  transition: stroke-width 0.2s ease;
}

.chart-segment:hover path {
  stroke-width: 20px;
}

/* Stacked chart layout */
.chart-card .flex {
  min-height: 400px;
}

.chart-card svg {
  max-width: 100%;
  height: auto;
}

/* Pie chart hover effects */
.pie-segment:hover path {
  opacity: 0.9 !important;
  stroke-width: 2;
}

.pie-segment path {
  transition: opacity 0.2s ease, stroke-width 0.2s ease;
}

/* Timeline card */
.timeline-card {
  min-height: 260px;
}

/* Improved layout for circular charts */
.chart-card-compact {
  display: flex;
  flex-direction: column;
}

/* Better alignment for timeline */
.timeline-card {
  width: 100%;
}

/* Enhanced chart sizing for Companies & Positions section - now full width */
.chart-card-dynamic .chart-section {
  min-height: 160px;
}

.chart-card-dynamic .chart-container {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Companies & Positions chart gets more height for the larger charts */
.chart-card-dynamic:first-child {
  min-height: 400px;
}

/* Ensure charts don't get too cramped on any screen size */
.chart-card-dynamic {
  min-height: 300px;
}

/* Ensure circular charts are properly centered and sized */
.chart-container svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  overflow: visible;
}

/* Ensure chart containers can accommodate external labels */
.chart-container {
  overflow: visible;
  padding: 1rem;
}

/* Projects panel adjustments */
.projects-panel {
  height: 100%;
  min-height: 100%;
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
}

.projects-content {
  flex: 1;
  overflow-y: auto;
}

/* Responsive design for mobile and tablet */
@media (max-width: 1023px) {
  /* On tablets and mobile, adjust chart heights */
  .chart-card-dynamic {
    min-height: 250px;
  }
  
  .timeline-card {
    min-height: 200px;
  }
  
  .stats-card {
    min-height: 150px;
  }
  
  /* Ensure charts are properly sized on smaller screens */
  .chart-container {
    min-height: 100px;
  }
  
  .chart-section {
    min-height: 120px;
  }
  
  /* Companies & Positions chart gets more space on medium screens */
  .chart-card-dynamic:first-child {
    min-height: 320px;
  }
  
  /* Ensure vertical stacking on tablets and mobile */
  .chart-content {
    flex-direction: column;
    gap: 0.75rem;
  }
}

@media (max-width: 767px) {
  /* On mobile phones, further reduce heights */
  .chart-card-dynamic {
    min-height: 200px;
  }
  
  .timeline-card {
    min-height: 180px;
  }
  
  .stats-card {
    min-height: 120px;
  }
  
  .chart-container {
    min-height: 80px;
  }
  
  .chart-section {
    min-height: 100px;
  }
  
  /* Adjust spacing for mobile */
  .card {
    padding: 0.75rem;
  }
  
  /* Make projects panel full height on mobile */
  .projects-panel {
    max-height: none;
    position: static;
  }
  
  /* Companies & Positions chart gets more space on mobile for better readability */
  .chart-card-dynamic:first-child {
    min-height: 320px;
  }
  
  /* Ensure vertical stacking on mobile */
  .chart-content {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Ensure left column content flows properly */
.visual-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Ensure right column matches left column height */
.projects-aside {
  height: fit-content;
  min-height: 100%;
}