.sidebar-match-box {
  flex-direction: column;
  width: 100%;

  padding: 5px;

  background-color: transparent;
  border-radius: 0px;
  cursor: pointer;

  transition: background 0.2s ease;

  border-bottom: 1px solid var(--border);
}
.sidebar-match-box:hover {
  background-color: var(--secondary-light1);
}

.sidebar-match-box.highlight-border + .sidebar-match-box.highlight-border {
  border-top: none !important;
}

.sidebar-match-box .match-top {
  display: flex;
  flex-direction: row;

  width: 100%;
  height: auto;

  gap: 10px;

  font-size: 11px;
}

.sidebar-match-box .match-top .event-name {
  display: flex;
  flex-grow: 1;
  align-items: center;

  min-width: 0;
}
.sidebar-match-box .event-name span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.sidebar-match-box .match-top .match-status {
  display: flex;
  flex-shrink: 0;
  min-width: 0;
}

/* === Live indicator === */
.sidebar-match-box .match-top .match-status .live-indicator {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;

  font-weight: bold;
  color: red;
}
.sidebar-match-box .match-top .match-status .live-indicator .live-dot {
  width: 8px;
  height: 8px;

  background-color: red;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


.sidebar-match-box .match-content {
  display: grid;
  grid-template-columns: 1fr minmax(10px, auto);
  align-items: center;

  font-size: 12px;
  font-weight: bold;
}


.sidebar-match-box .match-content .match-content-left {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;

  padding-right: 5px;
}
.sidebar-match-box .match-content .match-content-left .team-name {
  flex: 1;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}


.sidebar-match-box .match-content .match-content-right {
  display: flex;
  flex-direction: column;

  align-items: center;

  width: 100%;
  min-width: 0;
}

.sidebar-match-box .match-content .match-content-right .match-score {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: end;
}