/*
 * Foreground: .vis-item.vis-box (pills). Background: .vis-item.vis-line are full-height
 * subgroup guides; they reuse the same className as real events — force neutral look so
 * e.g. metric_get_worse does not read as a second orange marker next to a te_metric pill.
 */

#timeline_visualization_elem_id .vis-item.vis-line {
  background: transparent !important;
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
}

#timeline_visualization_elem_id .vis-item.vis-line.vis-selected {
  background: transparent !important;
  border-left-color: rgba(0, 0, 0, 0.22) !important;
}

#timeline_visualization_elem_id .vis-item.vis-box {
  border-radius: 6px;
  border-style: solid;
  border-width: 2px;
  border-color: transparent;
  font-size: 14px;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-weight: 500;
  padding: 2px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#timeline_visualization_elem_id .vis-item.vis-box.host_up {
  background: #22c55e;
  color: #fff;
}

#timeline_visualization_elem_id .vis-item.vis-box.host_down {
  background: #ef4444;
  color: #fff;
}

#timeline_visualization_elem_id .vis-item.vis-box.network_up {
  background: #16a34a;
  color: #fff;
}

#timeline_visualization_elem_id .vis-item.vis-box.network_down {
  background: #dc2626;
  color: #fff;
}

#timeline_visualization_elem_id .vis-item.vis-box.te_metric {
  background: #6366f1;
  color: #fff;
}

/* vis-timeline default .vis-selected paints yellow #fff785 bg + #ffc200 border.
 * Override for every event type so selected pills stay on-brand. */

#timeline_visualization_elem_id .vis-item.vis-box.vis-selected {
  background-color: inherit;
  border-color: rgba(255, 255, 255, 0.6);
  z-index: 3;
}

#timeline_visualization_elem_id .vis-item.vis-box.te_metric.vis-selected {
  background: #4f46e5;
  border-color: #a5b4fc;
}

#timeline_visualization_elem_id .vis-item.vis-box.host_up.vis-selected {
  background: #15803d;
  border-color: #86efac;
}

#timeline_visualization_elem_id .vis-item.vis-box.host_down.vis-selected {
  background: #b91c1c;
  border-color: #fecaca;
}

#timeline_visualization_elem_id .vis-item.vis-box.network_up.vis-selected {
  background: #15803d;
  border-color: #bbf7d0;
}

#timeline_visualization_elem_id .vis-item.vis-box.network_down.vis-selected {
  background: #b91c1c;
  border-color: #fecaca;
}

#timeline_visualization_elem_id .vis-item.vis-box.metric_change {
  background: #38bdf8;
  color: #0c1a2e;
}

#timeline_visualization_elem_id .vis-item.vis-box.metric_get_better {
  background: #00c9a0;
  color: #0c1a2e;
}

#timeline_visualization_elem_id .vis-item.vis-box.metric_get_worse {
  background: #60c8f0;
  color: #0c1a2e;
}

#timeline_visualization_elem_id .vis-item.vis-box.metric_change.vis-selected {
  background: #0ea5e9;
  border-color: #bae6fd;
}

#timeline_visualization_elem_id .vis-item.vis-box.metric_get_better.vis-selected {
  background: #00a884;
  border-color: #99f6e4;
}

#timeline_visualization_elem_id .vis-item.vis-box.metric_get_worse.vis-selected {
  background: #38b8e8;
  border-color: #cffafe;
}