/* Timeline Period Colors (matching Event::PERIODS) */
.vis-item.period-prehistoric {
  background-color: #6B7280 !important; /* gray */
  border-color: #4B5563 !important;
  color: white !important;
}

.vis-item.period-ancient {
  background-color: #F59E0B !important; /* amber */
  border-color: #D97706 !important;
  color: white !important;
}

.vis-item.period-roman {
  background-color: #DC2626 !important; /* red */
  border-color: #B91C1C !important;
  color: white !important;
}

.vis-item.period-medieval_early {
  background-color: #059669 !important; /* emerald */
  border-color: #047857 !important;
  color: white !important;
}

.vis-item.period-medieval_high {
  background-color: #10B981 !important; /* green */
  border-color: #059669 !important;
  color: white !important;
}

.vis-item.period-ottoman {
  background-color: #7C3AED !important; /* violet */
  border-color: #6D28D9 !important;
  color: white !important;
}

.vis-item.period-yugoslav {
  background-color: #8B5CF6 !important; /* purple */
  border-color: #7C3AED !important;
  color: white !important;
}

.vis-item.period-modern {
  background-color: #3B82F6 !important; /* blue */
  border-color: #2563EB !important;
  color: white !important;
}

/* Vis-Timeline Custom Styling (Map page theme - slate) */
.vis-timeline {
  border: none !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background: transparent !important;
}

.vis-panel {
  background: transparent !important;
}

.vis-time-axis {
  background: rgba(30, 41, 59, 0.3) !important; /* slate-800 with transparency */
}

.vis-time-axis .vis-text {
  color: #D1D5DB !important; /* gray-300 */
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.vis-time-axis .vis-grid.vis-minor {
  border-color: rgba(71, 85, 105, 0.2) !important; /* slate-600 */
}

.vis-time-axis .vis-grid.vis-major {
  border-color: rgba(71, 85, 105, 0.4) !important; /* slate-600 */
}

/* Timeline items styling */
/* .vis-item {
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
  border-width: 2px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
} */

.vis-item {
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 300 !important;
  padding: 4px 0.5px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
  border: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Connecting lines between year and event */
.vis-item.vis-line {
  border-left-width: 2px !important;
  width: 1px !important;
}

.vis-item.vis-point {
  border-width: 2px !important;
}

.vis-item.vis-dot {
  border-width: 6px !important;
}

/* Hover effect - darken background for events and edges */
.vis-item:hover {
  cursor: pointer;
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.2) !important;
}

/* Darken connecting lines on hover */
.vis-item.vis-line:hover {
  filter: brightness(0.7) !important;
}

.vis-item.vis-selected {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5) !important;
}

.vis-item .vis-item-content {
  padding: 2px 4px !important;
}

.vis-current-time {
  background-color: #3B82F6 !important; /* blue-500 */
  width: 2px !important;
}

/* Custom scrollbar for timeline (Map-style) */
.vis-timeline::-webkit-scrollbar {
  height: 8px;
}

.vis-timeline::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.5); /* slate-800 */
  border-radius: 4px;
}

.vis-timeline::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.6); /* blue-500 */
  border-radius: 4px;
}

.vis-timeline::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.8);
}

/* Tooltip styling (Map-style) */
.timeline-hover-tooltip {
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10000;
}

/* Year 0 marker styling */
.vis-custom-time.year0 {
  background-color: #F59E0B !important; /* amber */
  width: 3px !important;
  z-index: 2 !important;
  box-shadow: 0 0 10px #F59E0B !important;
}

.vis-custom-time.year0 > .vis-custom-time-marker {
  background-color: #F59E0B !important;
  color: #1E293B !important; /* slate-800 */
  font-weight: bold !important;
  padding: 5px 8px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .vis-item {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }

  .vis-time-axis .vis-text {
    font-size: 11px !important;
  }
}

/* Loading spinner animation - simple and clean */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}