/* Estilos reutilizáveis para cabeçalhos de cards do clube
   Usa variáveis CSS definidas pela template (ex.: --clube-primaria, --clube-secundaria).
   Fallbacks aplicados para compatibilidade.
*/

.notificacao-card .card-header,
.card-clube-primary .card-header {
    background-color: var(--clube-primaria, #002d76) !important;
    background: linear-gradient(135deg, var(--clube-primaria, #002d76), var(--clube-secundaria, var(--clube-primaria, #002d76))) !important;
    color: #ffffff !important;
}

.notificacao-card .card-header h6,
.notificacao-card .card-header small,
.card-clube-primary .card-header h6,
.card-clube-primary .card-header small {
    color: #ffffff !important;
}

/* Se o card não tiver .card-header, exibir uma faixa superior com as cores do clube */
/* Ajustes para imagem de topo e conteúdo */
.card-clube-primary .card-img-top {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

/* Garantir que o conteúdo do card tenha prioridade visual */
.card-clube-primary .card-body {
    position: relative;
    z-index: 1;
}

/* ===== CORES FIXAS PARA CARDS ===== */

/* Card com cabeçalho azul fixo */
.card-azul .card-header {
    background-color: #002d76 !important;
    background: linear-gradient(135deg, #002d76, #001a4f) !important;
    color: #ffffff !important;
}

.card-azul .card-header h6,
.card-azul .card-header small {
    color: #ffffff !important;
}

/* Card com cabeçalho verde fixo */
.card-verde .card-header {
    background-color: #28A745 !important;
    background: linear-gradient(135deg, #28A745, #1E7E34) !important;
    color: #ffffff !important;
}

.card-verde .card-header h6,
.card-verde .card-header small {
    color: #ffffff !important;
}

/* Card com cabeçalho vermelho fixo */
.card-vermelho .card-header {
    background-color: #DC3545 !important;
    background: linear-gradient(135deg, #DC3545, #C82333) !important;
    color: #ffffff !important;
}

.card-vermelho .card-header h6,
.card-vermelho .card-header small {
    color: #ffffff !important;
}

/* Card com cabeçalho roxo fixo */
.card-roxo .card-header {
    background-color: #6F42C1 !important;
    background: linear-gradient(135deg, #6F42C1, #5A32A3) !important;
    color: #ffffff !important;
}

.card-roxo .card-header h6,
.card-roxo .card-header small {
    color: #ffffff !important;
}

/* Card com cabeçalho laranja fixo */
.card-laranja .card-header {
    background-color: #FD7E14 !important;
    background: linear-gradient(135deg, #FD7E14, #E55A00) !important;
    color: #ffffff !important;
}

.card-laranja .card-header h6,
.card-laranja .card-header small {
    color: #ffffff !important;
}

/* ===== MARCAÇÃO DE ATENÇÃO ===== */

/* Card com marcação de atenção (amarelo/laranja) */
.card-atencao .card-header {
    background-color: #FFC107 !important;
    background: linear-gradient(135deg, #FFC107, #FF8F00) !important;
    color: #000000 !important;
    border: 2px solid #FF9800 !important;
    position: relative;
}

.card-atencao .card-header::before {
    content: "⚠️";
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 16px;
}

.card-atencao .card-header h6,
.card-atencao .card-header small {
    color: #000000 !important;
    font-weight: bold;
}

/* Badge de atenção para status */
.badge-atencao {
    background-color: #FFC107 !important;
    color: #000000 !important;
    border: 1px solid #FF9800 !important;
    font-weight: bold;
}

/* ===== CATEGORIAS DO RANKING ===== */

/* Cores de fundo para categorias do ranking - Especificidade máxima para sobrescrever Bootstrap */
.table.table-hover tbody tr.categoria-ouro,
.table.table-hover tbody tr.categoria-ouro td,
.table.table-hover tbody tr.categoria-ouro th {
    background-color: #ffd700 !important; /* Cor dourada mais intensa */
}

.table.table-hover tbody tr.categoria-prata,
.table.table-hover tbody tr.categoria-prata td,
.table.table-hover tbody tr.categoria-prata th {
    background-color: #e8e8e8 !important; /* Cor prateada suave */
}

.table.table-hover tbody tr.categoria-bronze,
.table.table-hover tbody tr.categoria-bronze td,
.table.table-hover tbody tr.categoria-bronze th {
    background-color: #f4e4bc !important; /* Cor bronze suave */
}

.table.table-hover tbody tr.categoria-branco,
.table.table-hover tbody tr.categoria-branco td,
.table.table-hover tbody tr.categoria-branco th {
    background-color: #ffffff !important; /* Branco padrão */
}

/* Hover customizado - Especificidade máxima */
.table.table-hover tbody tr.categoria-ouro:hover,
.table.table-hover tbody tr.categoria-ouro:hover td,
.table.table-hover tbody tr.categoria-ouro:hover th {
    background-color: #ffed4e !important;
}

.table.table-hover tbody tr.categoria-prata:hover,
.table.table-hover tbody tr.categoria-prata:hover td,
.table.table-hover tbody tr.categoria-prata:hover th {
    background-color: #d8d8d8 !important;
}

.table.table-hover tbody tr.categoria-bronze:hover,
.table.table-hover tbody tr.categoria-bronze:hover td,
.table.table-hover tbody tr.categoria-bronze:hover th {
    background-color: #eed9a8 !important;
}

.table.table-hover tbody tr.categoria-branco:hover,
.table.table-hover tbody tr.categoria-branco:hover td,
.table.table-hover tbody tr.categoria-branco:hover th {
    background-color: #f8f9fa !important;
}

/* Garantir que todas as células da linha tenham a mesma cor */
.table tbody tr.categoria-ouro > *,
.table tbody tr.categoria-prata > *,
.table tbody tr.categoria-bronze > *,
.table tbody tr.categoria-branco > * {
    border-color: transparent;
}