/*
 * Yalla Shoot Pro x YS Matches Pro compatibility
 * Keeps the original theme match-table appearance while the importer supplies data/live updates.
 */
.STING-web-Matches .ysp-ysmatches-bridge,
.STING-web-Matches .ysmatch-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
}

/* The theme already owns the yesterday/today/tomorrow navigation above the table. */
.STING-web-Matches .ysmatch-daynav {
  display: none !important;
}

.STING-web-Matches .ysmatch-day-panel {
  width: 100%;
  margin: 0;
  padding: 0;
}

.STING-web-Matches .ysmatch-games-list,
.STING-web-Matches .ysmatch-flat-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent !important;
}

/* Original Yalla Shoot Pro row proportions and spacing. */
.STING-web-Matches .ysmatch-flat-list .ysmatch-match-card {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(105px, 33.33333333%) minmax(0, 1fr) !important;
  align-items: center;
  gap: 0 !important;
  min-height: 96px;
  margin: 0 0 8px !important;
  padding: 0 10px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #222 !important;
  text-decoration: none !important;
  transition: background-color .18s ease, opacity .18s ease;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-match-card:last-child {
  margin-bottom: 0 !important;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-match-card[href]:hover {
  background: #f7f8fa !important;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-team {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0;
  text-align: center;
}

/* Put each logo toward the outside edge, like the original table. */
.STING-web-Matches .ysmatch-flat-list .ysmatch-team:last-child {
  direction: ltr;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-team img,
.STING-web-Matches .ysmatch-flat-list .ysmatch-team .ys-img-placeholder {
  display: block !important;
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  opacity: 1 !important;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-team span {
  min-width: 0;
  margin: 0;
  color: #222;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: center;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-match-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0;
  margin: 0 auto;
  text-align: center;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-match-center b {
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: #222 !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: .5px;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-match-center small {
  display: table !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #273340 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.9 !important;
  white-space: nowrap;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-match-center small.ysmatch-live,
.STING-web-Matches .ysmatch-flat-list .ysmatch-match-center small.ysmatch-halftime,
.STING-web-Matches .ysmatch-flat-list .ysmatch-match-center small.ysmatch-extra_time,
.STING-web-Matches .ysmatch-flat-list .ysmatch-match-center small.ysmatch-penalties {
  background: #d00000 !important;
  color: #fff !important;
  animation: ysp-match-live-blink .8s ease-in-out infinite;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-match-center small.ysmatch-soon {
  background: #0f6f37 !important;
  color: #fff !important;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-match-center small.ysmatch-finished,
.STING-web-Matches .ysmatch-flat-list .ysmatch-match-center small.ysmatch-cancelled,
.STING-web-Matches .ysmatch-flat-list .ysmatch-match-center small.ysmatch-abandoned {
  background: #222 !important;
  color: #fff !important;
}

.STING-web-Matches .ysmatch-flat-list .ysmatch-tournament {
  display: block !important;
  max-width: 130px !important;
  margin-top: 0;
  overflow: hidden;
  color: #5f6673 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.STING-web-Matches .ysmatch-message {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px;
  border: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #666 !important;
}

@keyframes ysp-match-live-blink {
  50% { opacity: .48; }
}

/* Dark mode follows the theme rather than the plugin defaults. */
.Night .STING-web-Matches .ysmatch-flat-list .ysmatch-match-card,
.Night .STING-web-Matches .ysmatch-message {
  background: #191d2d !important;
  color: #fff !important;
}
.Night .STING-web-Matches .ysmatch-flat-list .ysmatch-match-card[href]:hover {
  background: #202638 !important;
}
.Night .STING-web-Matches .ysmatch-flat-list .ysmatch-team span,
.Night .STING-web-Matches .ysmatch-flat-list .ysmatch-match-center b {
  color: #fff !important;
}
.Night .STING-web-Matches .ysmatch-flat-list .ysmatch-tournament {
  color: #c7cbd4 !important;
}

@media screen and (max-width: 500px) {
  .STING-web-Matches .ysmatch-flat-list .ysmatch-match-card {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 33.33333333%) minmax(0, 1fr) !important;
    min-height: 105px;
    padding: 7px 5px !important;
  }

  .STING-web-Matches .ysmatch-flat-list .ysmatch-team,
  .STING-web-Matches .ysmatch-flat-list .ysmatch-team:last-child {
    direction: rtl;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .STING-web-Matches .ysmatch-flat-list .ysmatch-team img,
  .STING-web-Matches .ysmatch-flat-list .ysmatch-team .ys-img-placeholder {
    width: 45px !important;
    height: 45px !important;
    flex-basis: 45px !important;
  }

  .STING-web-Matches .ysmatch-flat-list .ysmatch-team span {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .STING-web-Matches .ysmatch-flat-list .ysmatch-match-center b {
    font-size: 17px !important;
  }

  .STING-web-Matches .ysmatch-flat-list .ysmatch-match-center small {
    padding: 0 7px !important;
    font-size: 11px !important;
  }

  .STING-web-Matches .ysmatch-flat-list .ysmatch-tournament {
    max-width: 90px !important;
    font-size: 10px !important;
    white-space: normal;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}