/* Fonte padrão */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap'); /* Importa a fonte 'Outfit' do Google Fonts */

/* Estilos Globais */
* {
    margin: 0; /* Remove a margem padrão de todos os elementos */
    padding: 0; /* Remove o padding padrão de todos os elementos */
    font-family: 'Outfit', sans-serif; /* Define a fonte padrão como 'Outfit' para todos os elementos */
}

/* Tabela */
.table {
    width: 102%; /* Define a largura da tabela como 100% do contêiner pai */
    min-width: 600px; /* Define a largura mínima da tabela como 600 pixels */
    border-collapse: collapse; /* Remove espaços entre as bordas das células */
    margin: 0px 0; /* Remove margens ao redor da tabela */
}

/* Estilos para células de cabeçalho e dados da tabela */
th, td{
    padding: 5px; /* Adiciona padding interno de 5 pixels */
    text-align: center; /* Alinha o texto ao centro */
    border: 1px solid #444; /* Define a borda das células como 1px sólida com cor #444 */
    border-radius: 10px; /* Adiciona bordas arredondadas com raio de 10 pixels */
    color: #ffffff; /* Define a cor do texto como branco */
    white-space: nowrap; /* Impede quebra de linha dentro das células */
    overflow: hidden; /* Oculta o conteúdo que ultrapassa o limite da célula */
    text-overflow: ellipsis; /* Adiciona '...' ao final do texto se ele for muito longo */
}

/* Ajustes para células da tabela */
th {
    padding: 17px; /* Adiciona padding interno de 17 pixels para células de cabeçalho */
    background-color: #444; /* Define a cor de fundo das células de cabeçalho como #444 */
}

tr {
    padding: 17px; /* Adiciona padding interno de 17 pixels para linhas da tabela */
    background-color: #444; /* Define a cor de fundo das linhas da tabela como #444 */
}

.row {
    display: flex; /* Define o layout como flexbox */
    justify-content: space-between; /* Distribui o espaço igualmente entre os itens */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    padding: 15px; /* Adiciona padding interno de 15 pixels */
    border: 1px solid #444; /* Define a borda das linhas como 1px sólida com cor #444 */
    background: #333; /* Define a cor de fundo das linhas como #333 */
    border-radius: 10px; /* Adiciona bordas arredondadas com raio de 10 pixels */
    flex-wrap: wrap; /* Permite que os itens quebrem linha se necessário */
}

.row.header {
    background-color: #444; /* Define a cor de fundo das linhas de cabeçalho como #444 */
    font-weight: bold; /* Define o peso da fonte como negrito */
}

.cell, .cell1 {
    flex: 1; /* Permite que as células se expandam conforme necessário */
    text-align: center; /* Alinha o texto ao centro */
    color: #ffffff; /* Define a cor do texto como branco */
    white-space: nowrap; /* Impede quebra de linha dentro das células */
    overflow: hidden; /* Oculta o conteúdo que ultrapassa o limite da célula */
    text-overflow: ellipsis; /* Adiciona '...' ao final do texto se ele for muito longo */
}

.cell1 {
    display: flex; /* Define o layout como flexbox para .cell1 */
    text-align: left; /* Alinha o texto à esquerda */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    cursor: pointer; /* Muda o cursor para uma mão ao passar sobre a célula */
    transition: background-color 0.3s, color 0.3s; /* Transição suave para mudanças de cor e fundo */
}

.cell1:hover {
    color: #a200ff; /* Muda a cor do texto ao passar o mouse sobre a célula */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor de fundo */
}

/* Contêiner da Tabela */
.wrapper {
    position: relative; /* Define o posicionamento como relativo */
    width: 73%; /* Define a largura como 90% do contêiner pai */
    margin: -20px auto; /* Define a margem superior negativa e centraliza horizontalmente */
    z-index: 1; /* Define o índice z para sobreposição */
    padding: 0px; /* Remove o padding interno */
    border-radius: 10px; /* Adiciona bordas arredondadas com raio de 10 pixels */
}

/* Contêiner Fixo */
.fixed-top-container {
    position: fixed; /* Define o posicionamento como fixo para que fique no topo da página */
    top: 0; /* Define a posição do topo como 0 pixels */
    left: 0; /* Define a posição da esquerda como 0 pixels */
    width: 100%; /* Define a largura como 100% do contêiner pai */
    background: rgba(0, 0, 0, 0.7); /* Define o fundo com cor preta e opacidade de 0.7 */
    padding: 10px; /* Adiciona padding interno de 10 pixels */
    z-index: 1000; /* Define o índice z para sobreposição */
    display: flex; /* Define o layout como flexbox */
    justify-content: space-between; /* Distribui o espaço igualmente entre os itens */
    align-items: center; /* Alinha os itens verticalmente ao centro */
}

/* Botões */
.searchdiv button, .back-button {
    margin: auto; /* Centraliza o botão horizontalmente */
    background-color: #444; /* Define a cor de fundo como #444 */
    color: #ffffff; /* Define a cor do texto como branco */
    border: none; /* Remove a borda */
    padding: 10px 20px; /* Adiciona padding interno de 12 pixels na vertical e 20 pixels na horizontal */
    border-radius: 5px; /* Adiciona bordas arredondadas com raio de 5 pixels */
    font-size: 15px; /* Define o tamanho da fonte como 16 pixels */
    cursor: pointer; /* Muda o cursor para uma mão ao passar sobre o botão */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor de fundo */
}

.server-button {
    display: block; /* Define o botão como bloco */
    margin: 5px auto; /* Centraliza horizontalmente e adiciona margem vertical */
    background-color: #444; /* Define a cor de fundo como #444 */
    color: #ffffff; /* Define a cor do texto como branco */
    border: none; /* Remove a borda */
    padding: 12px 20px; /* Adiciona padding interno de 12 pixels na vertical e 20 pixels na horizontal */
    border-radius: 5px; /* Adiciona bordas arredondadas com raio de 5 pixels */
    font-size: 16px; /* Define o tamanho da fonte como 16 pixels */
    cursor: pointer; /* Muda o cursor para uma mão ao passar sobre o botão */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor de fundo */
}

.server-button:hover, .searchdiv button:hover, .back-button:hover {
    background-color: #a200ff; /* Muda a cor de fundo ao passar o mouse sobre os botões */
}

.back-button {
    display: inline-block; /* Define o botão como bloco inline */
    margin-top: 10px; /* Adiciona margem superior de 10 pixels */
    text-decoration: none; /* Remove o sublinhado do link */
}

/* Formulário de Pesquisa */
.searchdiv {
    text-align: center; /* Centraliza o texto dentro do contêiner de pesquisa */
    margin-bottom: 20px; /* Adiciona margem inferior de 20 pixels */
}

.searchdiv input[type="text"] {
    padding: 10px; /* Adiciona padding interno de 10 pixels */
    font-size: 15px; /* Define o tamanho da fonte como 15 pixels */
    width: 300px; /* Define a largura do campo de texto como 500 pixels */
    margin-right: auto; /* Adiciona margem direita automática para centralizar o campo de texto */
}

/* Contêineres de Gráficos */
/* Adicione ou ajuste essas regras no seu arquivo CSS */
.charts-container {
    width: 400px;
    height: 400px;
    position: relative;
    
}

#statsRadarChart {
    width: 100% !important; /* Garante que o canvas ocupe a largura total do container */
    height: 100% !important; /* Garante que o canvas ocupe a altura total do container */
    display: flex; /* Remove espaços em branco ao redor do canvas */
}

/* Imagem */
.foto img {
    display: block; /* Define a imagem como bloco */
    margin: 0 auto; /* Centraliza a imagem horizontalmente */
}

/* Canvas */
canvas {
    background: #444444; /* Define a cor de fundo como preta */
    border-radius: 10px; /* Adiciona bordas arredondadas com raio de 10 pixels */
    padding: 10px; /* Adiciona padding interno de 10 pixels */
}

/* Paginação */
.pagination {
    text-align: center; /* Centraliza o texto dentro do contêiner de paginação */
    margin-top: 40px; /* Adiciona margem superior de 40 pixels */
}

.pagination a {
    color: #ffffff; /* Define a cor do texto como branco */
    padding: 10px 15px; /* Adiciona padding interno de 10 pixels na vertical e 15 pixels na horizontal */
    text-decoration: none; /* Remove o sublinhado dos links */
    margin: 0 5px; /* Adiciona margem horizontal de 5 pixels */
    border-radius: 5px; /* Adiciona bordas arredondadas com raio de 5 pixels */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor de fundo */
}

.pagination a.active {
    background-color: #555; /* Define a cor de fundo dos links ativos como #555 */
}

.pagination a:hover {
    background-color: #666; /* Muda a cor de fundo ao passar o mouse sobre os links */
}

.pagination span {
    color: #ffffff; /* Define a cor do texto como branco */
    padding: 10px 15px; /* Adiciona padding interno de 10 pixels na vertical e 15 pixels na horizontal */
}

/* Estilo para o status do servidor */
#server-status {
    position: absolute; /* Define o posicionamento como absoluto */
    top: 0; /* Define a posição do topo como 0 pixels */
    left: 0; /* Define a posição da esquerda como 0 pixels */
    width: 100%; /* Define a largura como 100% do contêiner pai */
    height: 100%; /* Define a altura como 100% do contêiner pai */
    object-fit: cover; /* Ajusta a imagem para cobrir o contêiner */
    z-index: -1; /* Define o índice z para que fique atrás dos outros elementos */
}

/* Personaliza a aparência do nome do jogador no SweetAlert2 */
.player-name h3 a {
    color: #ffffff; /* Cor do texto do nome do jogador */
    text-align: center;
    text-decoration: none; /* Remove o sublinhado do link */
    font-size: 24px; /* Tamanho da fonte do nome do jogador */
    font-weight: bold; /* Peso da fonte do nome do jogador */
}

/* Personaliza a foto do jogador */
.player-name .foto img {
    border-radius: 50%; /* Torna a imagem circular */
    width: 150px; /* Define a largura da imagem como 150 pixels */
}

/* Estiliza o botão de confirmação do SweetAlert2 */
.custom-confirm-button {
    background-color: #a200ff !important; /* Cor de fundo do botão */
    color: #ffffff !important; /* Cor do texto do botão */
    border: none !important; /* Remove a borda */
    border-radius: 5px !important; /* Cantos arredondados */
    padding: 10px 20px !important; /* Espaçamento interno */
    font-size: 16px !important; /* Tamanho da fonte */
    font-weight: bold !important; /* Peso da fonte */
    transition: background-color 0.3s !important; /* Transição suave para a cor de fundo */
}

.custom-confirm-button:hover {
    background-color: #8500cc !important; /* Cor de fundo quando o mouse passa sobre o botão */
}

/* Definindo a fonte local */
@font-face { 
    font-family: 'cs';
    src: url('../assets/fonts/TTF/GabrielSans-Trial-BoldItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Estilo específico para a célula CS Rating */
.cs-rating-cell {
    position: relative;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Estilo para a sobreposição de pontos */
.cs-rating-cell .points-overlay {
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-family: 'cs', sans-serif;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
    text-align: center;
    white-space: nowrap;
    color: var(--text-color);
}

/* Estilo para os primeiros dois dígitos em centenas */
.cs-rating-cell .first-two-digits {
    font-size: 16px;
    font-family: 'cs', sans-serif;
    color: inherit;
}

/* Estilo para parte inteira em milhares */
.cs-rating-cell .integer-part {
    font-size: 16px; /* Tamanho maior para parte inteira */
    font-family: 'cs', sans-serif;
    color: inherit;
}

/* Estilo para a parte decimal */
.cs-rating-cell .decimal-part {
    font-size: 9px; /* Tamanho menor para parte decimal */
    font-family: 'cs', sans-serif;
    vertical-align: top;
    color: inherit;
}

.chart-container {
    flex: 1 1 400px; /* Permite que o gráfico ocupe pelo menos 400px de largura */
    max-width: 400px; /* Define um limite máximo para a largura */
    box-sizing: border-box; /* Inclui padding e bordas na largura total */
}

/* Ajustes para o canvas para se adaptar ao seu container */
#statsRadarChart {
    width: 100% !important; /* Garante que o canvas ocupe a largura total do container */
    height: 100% !important; /* Garante que o canvas ocupe a altura total do container */
    display: block; /* Remove espaços em branco ao redor do canvas */
}