/* top10.css — painel unico do Top 10 da home. Fica ao lado do upload (coluna
   da direita do #homeTopRow) com DUAS ABAS, uma por ranking: "Mais curtidos"
   (os 10 videos, #topLikedCol em public/js/top10.js) e "Quem mais envia" (os
   10 usuarios, #topPlayersCol em renderTopPlayers/index.js). Uma aba por vez,
   porque a coluna e estreita; abas sem ranking somem (revealTop10Panel). */
.layout-2col { display: flex; gap: 16px; align-items: flex-start; }
/* Upload e Top 10 ocupam a mesma altura na linha superior. */
#homeTopRow { align-items: stretch; }
#homeTopRow .content-main { display: flex; }
#homeTopRow .upload { flex: 1 1 auto; width: 100%; }
.layout-2col .content-main { flex: 1 1 auto; min-width: 0; }

.top10 {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 12px 8px;
}
#top10Wrap {
  flex: 0 0 300px; position: sticky; top: 90px;
  display: flex; flex-direction: column;
}
#top10Wrap > .top10 { flex: 1 1 auto; }
.top10-title {
  margin: 0 0 8px; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.top10-title::before { content: "🏆"; }

/* Abas: barra segmentada, uma aba ativa por vez. */
.tp-tabs {
  display: flex; gap: 4px; margin-bottom: 8px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px;
}
.tp-tab {
  flex: 1 1 0; min-width: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 8px;
  padding: 7px 6px; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-tab:hover { color: var(--t); }
.tp-tab[aria-selected="true"] {
  color: #111; background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.tp-col { min-width: 0; }
/* 10 linhas nao cabem na tela ao lado do upload: a lista rola por dentro. */
#top10Wrap .top10-list { max-height: 300px; overflow-y: auto; }
.top10-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.top10-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px;
  min-width: 0; overflow: hidden;
}
.top10-item:first-child { border-top: 0; }
.top10-pos {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #111;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.top10-item:nth-child(n+4) .top10-pos { background: var(--card-2); color: var(--muted); border: 1px solid var(--line); }
.top10-name {
  flex: 1 1 0; min-width: 0; max-width: 100%; color: var(--t); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
  word-break: break-all;
}
.top10-name:hover { color: var(--accent); text-decoration: underline; }
.top10-likes {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--bad);
}
.top10-empty { color: var(--muted); font-size: 13px; }
.top10 .status { margin-top: 4px; }

/* Lista dos usuarios: os contadores ficam na mesma linha do nome. */
.tp-item { min-width: 0; }
.tp-item .top10-name { flex: 1 1 0; min-width: 0; }
.tp-meta {
  flex-shrink: 0; margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.tp-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.tp-meta .tp-likes { color: var(--bad); }

@media (max-width: 960px) {
  .layout-2col { flex-direction: column; }
  /* Home: upload primeiro, Top 10 depois, recentes por ultimo. */
  #homeTopRow .content-main { order: 1; width: 100%; }
  #top10Wrap { order: 2; flex: 1 1 auto; width: 100%; position: static; }
  .tp-tab { font-size: 13px; padding: 9px 8px; }
}
@media (max-width: 640px) {
  .tp-item { flex-wrap: wrap; }
  .tp-item .tp-meta { margin-left: 32px; }
}