/**
 * @file
 * FAI Event Timeline Styles
 */

/* Timeline container styles */
.events-timeline-display {
  width: 100%;
  margin: 20px 0;
}

.timeline-container {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
}

#events-timeline {
  width: 100%;
  min-height: 600px;
  background: #fafafa;
}

/* Timeline message window styles (instructions and legend) */
.timeline-message-window {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
  font-size: 14px;
}

.timeline-message-window strong {
  font-weight: bold;
}

.timeline-message-window .colors {
  margin-top: 10px;
    display: grid;
    gap: 0px;
}

.timeline-message-window .colors span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.timeline-message-window .colors span:before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

.timeline-message-window .colors span.blue:before {
  background-color: #2196F3;
}

.timeline-message-window .colors span.gray:before {
  background-color: #9E9E9E;
}

/* Timeline controls */
.timeline-controls {
  text-align: center;
  margin-top: 15px;
}

.timeline-controls .btn {
  background: #007cba;
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 0 5px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.timeline-controls .btn:hover {
  background: #005a87;
}

.timeline-controls .btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Custom timeline item styles */
.vis-timeline .vis-item {
  border-radius: 3px;
  font-size: 12px;
  font-weight: normal;
}

.vis-timeline .vis-item.indicator-blue {
  background-color: #2196F3;
  border-color: #1976D2;
  color: white;
}

.vis-timeline .vis-item.indicator-grey {
  background-color: #9E9E9E;
  border-color: #757575;
  color: white;
}

.vis-timeline .vis-item.cat-1 {
  background-color: #2196F3;
  border-color: #1976D2;
}

.vis-timeline .vis-item.cat-2 {
  background-color: #9E9E9E;
  border-color: #757575;
}

/* Selected item styles */
.vis-timeline .vis-item.event-selected {
  box-shadow: 0 0 8px rgba(33, 150, 243, 0.6);
  z-index: 999;
}

/* Timeline item hover effects */
.vis-timeline .vis-item:hover {
  opacity: 0.9;
  transform: scale(1.02);
  transition: all 0.2s ease;
}

/* Timeline tooltip customization */
.vis-tooltip {
  max-width: 300px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* No events message */
.timeline-container .no-events {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  font-style: italic;
  background: #f9f9f9;
  border-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #events-timeline {
    min-height: 400px;
  }
  
  .timeline-message-window .colors {
    flex-direction: column;
    gap: 10px;
  }
  
  .timeline-controls .btn {
    padding: 6px 12px;
    font-size: 12px;
    margin: 0 2px;
  }
}

/* Timeline axis customization - Force visibility */
.vis-timeline .vis-time-axis {
  border-top: 1px solid #bfbfbf !important;
  background: #f5f5f5 !important;
  height: 100% !important;
  min-height: 40px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.vis-timeline .vis-time-axis .vis-text {
  font-size: 12px;
  color: #333;
  font-weight: normal;
  padding: 3px;
}

.vis-timeline .vis-time-axis .vis-text.vis-major {
  font-weight: bold;
  font-size: 13px;
  color: #000;
}

.vis-timeline .vis-time-axis .vis-grid.vis-minor {
  border-color: #e0e0e0;
  border-width: 1px;
}

.vis-timeline .vis-time-axis .vis-grid.vis-major {
  border-color: #bfbfbf;
  border-width: 1px;
}

/* Timeline labels - major (months) and minor (days) */
.vis-timeline .vis-labelset .vis-vlabel {
  border-right: 1px solid #bfbfbf;
  background: #f5f5f5;
}

.vis-timeline .vis-labelset .vis-vlabel .vis-inner {
  padding: 5px;
}

.vis-timeline .vis-labelset .vis-vlabel.vis-major {
  background: #e6e6e6;
  border-bottom: 1px solid #bfbfbf;
}

.vis-timeline .vis-labelset .vis-vlabel.vis-minor {
  background: #f5f5f5;
}

/* Current time line */
.vis-timeline .vis-current-time {
  background-color: #ff5722;
  width: 2px;
}

/* Ensure timeline has proper height to show axis */
.vis-timeline .vis-panel.vis-bottom {
  height: auto !important;
  min-height: 40px;
}

/* Timeline text formatting */
.vis-timeline .vis-panel.vis-center,
.vis-timeline .vis-panel.vis-top,
.vis-timeline .vis-panel.vis-bottom {
  border: 1px solid #bfbfbf;
}

/* Force timeline to show grid lines - override external CSS */
#events-timeline.vis-timeline {
  position: relative;
}

/* Create custom grid overlay using CSS */
#events-timeline.vis-timeline .vis-itemset {
  background-image: 
    repeating-linear-gradient(
      to right,
      transparent 0px,
      transparent 59px,
      rgba(224, 224, 224, 0.3) 59px,
      rgba(224, 224, 224, 0.3) 60px
    ),
    repeating-linear-gradient(
      to right,
      transparent 0px,
      transparent 299px,
      rgba(191, 191, 191, 0.5) 299px,
      rgba(191, 191, 191, 0.5) 300px
    ) !important;
}

/* Ensure native grid lines are visible if they exist */
.vis-timeline .vis-grid.vis-vertical {
  border-left: 1px solid #e0e0e0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.vis-timeline .vis-grid.vis-vertical.vis-major {
  border-left: 2px solid #bfbfbf !important;
}

.vis-timeline .vis-grid.vis-vertical.vis-minor {
  border-left: 1px solid #e0e0e0 !important;
}