/* CoreScore - Cards premium (Passo 5 22/05/2026).
   Senior Front-end Design System Engineer pass: cards mais modernos com
   hover lift, gradients sutis, transicoes smoother, KPIs mais vivos.
   Sobrescreve seletivamente .mc, .live-b, .mc-time, .mc-t.

   Carregar APOS styles-layout.css/styles-premium.css pra cascade vencer. */

/* ─── Match card: hover lift + smooth transitions ──────────────────────── */
.mc {
  transition: background-color .18s cubic-bezier(.4,0,.2,1),
              border-left-color .18s cubic-bezier(.4,0,.2,1),
              box-shadow .2s cubic-bezier(.4,0,.2,1),
              transform .15s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  /* Virtualizacao nativa (22/05/2026): browser skipa layout + paint pra cards
   * fora do viewport. Reduz reflow em listas grandes (50-200 jogos) sem mudar
   * o JS. contain-intrinsic-size reserva a altura aproximada do card pra
   * scroll-anchor nao saltar.
   * Suporte: Chrome/Edge 85+, Safari 18+, Firefox 125+. Browsers antigos
   * apenas ignoram a propriedade (fallback = renderiza tudo, comportamento
   * atual). */
  content-visibility: auto;
  contain-intrinsic-size: 0 72px;
}

.mc:hover {
  background: var(--bg3);
  transform: translateX(2px);
  box-shadow: inset 4px 0 0 0 rgba(59, 130, 246, 0.18),
              0 1px 4px rgba(15, 23, 42, 0.04);
}

[data-theme="dark"] .mc:hover {
  background: rgba(79, 142, 247, 0.08);
  box-shadow: inset 4px 0 0 0 rgba(79, 142, 247, 0.35),
              0 1px 4px rgba(0, 0, 0, 0.4);
}

/* 11/06/2026: card selecionado = AZUL (vai-acontecer agora é laranja). */
.mc.active {
  background: linear-gradient(90deg,
              rgba(37, 99, 235, 0.08) 0%,
              rgba(37, 99, 235, 0.02) 100%);
  border-left-color: #2563eb;
  box-shadow: inset 4px 0 0 0 #2563eb;
}

[data-theme="dark"] .mc.active {
  background: linear-gradient(90deg,
              rgba(79, 142, 247, 0.16) 0%,
              rgba(79, 142, 247, 0.04) 100%);
  box-shadow: inset 4px 0 0 0 #4f8ef7,
              0 0 12px rgba(79, 142, 247, 0.20);
}

/* ─── Time chip (kickoff) - mais vivo ─────────────────────────────────── */
.mc-time {
  background: linear-gradient(135deg,
              rgba(37, 99, 235, 0.08),
              rgba(37, 99, 235, 0.02));
  color: var(--accent);
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background-color .18s ease;
}

[data-theme="dark"] .mc-time {
  background: linear-gradient(135deg,
              rgba(79, 142, 247, 0.18),
              rgba(79, 142, 247, 0.06));
  color: #7eaaff;
}

.mc:hover .mc-time {
  background: linear-gradient(135deg,
              rgba(37, 99, 235, 0.14),
              rgba(37, 99, 235, 0.04));
}

/* ─── Live badge - dot pulsante elegante ──────────────────────────────── */
.live-b {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 12px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.32);
  animation: none;
}

.live-b::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: liveDotPulse 1.6s cubic-bezier(.4,0,.6,1) infinite;
}

@keyframes liveDotPulse {
  0% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8),
                0 0 0 0 rgba(239, 68, 68, 0.5);
  }
  60% {
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0),
                0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0),
                0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* ─── Score quando live - mais vivo ────────────────────────────────────── */
.mc--live .mc-row > div:nth-child(3) > div:first-child,
.mc.mc--live > .mc-body > .mc-row [style*="font-size:13px"] {
  /* Aumenta peso visual do placar live */
  text-shadow: 0 0 0 currentColor;
  letter-spacing: 0.02em;
}

/* ─── Team names - hierarquia mais clara ──────────────────────────────── */
.mc-t {
  transition: color .15s ease;
  letter-spacing: -0.005em;
}

.mc.active .mc-t {
  color: var(--text);
  font-weight: 700;
}

/* ─── League header na sidebar - separator premium ──────────────────────── */
.lhdr {
  position: relative;
  padding-left: 14px;
  /* Virtualizacao nativa (22/05/2026): header de liga tambem skipa paint
   * off-screen. ~32px altura tipica. */
  content-visibility: auto;
  contain-intrinsic-size: 0 32px;
}

.lhdr::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  border-radius: 1.5px;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0.55;
}

[data-theme="dark"] .lhdr::before {
  background: linear-gradient(180deg, #4f8ef7, transparent);
  opacity: 0.7;
}

/* ─── Filter buttons - hover mais nitido ──────────────────────────────── */
.sf-btn {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sf-btn:hover:not(.active-all):not(.active-live):not(.active-upcoming):not(.active-done) {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── Match list scrollbar - mais discreto ────────────────────────────── */
#matchList::-webkit-scrollbar {
  width: 6px;
}

#matchList::-webkit-scrollbar-track {
  background: transparent;
}

#matchList::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
  transition: background-color .2s;
}

#matchList::-webkit-scrollbar-thumb:hover {
  background: var(--text3);
}

/* ─── Header brand - micro-polish ─────────────────────────────────────── */
.brand-mark {
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}

.brand:hover .brand-mark {
  transform: rotate(-4deg) scale(1.04);
}

/* ─── Refresh badge - acessibilidade aumentada ─────────────────────────── */
#refreshBadge {
  transition: background-color .15s, transform .15s;
}

#refreshBadge:hover {
  transform: scale(1.05);
}

/* ─── Focus visible polish (acessibilidade) ───────────────────────────── */
.mc:focus-visible,
.sf-btn:focus-visible,
.fav-btn:focus-visible,
.hbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}