/**

 * Estilos para Tabelas de Ranking

 * Criado por Draco 2025 - www.dnsprotect.com.br

 * 

 * Estilos otimizados para rankings de MMORPG com tema marrom

 */



/* Tabela de ranking - estilo moderno com contornos marrons - FORÇADO */

table.ranking-table,

table[border="0"][cellpadding="2"][cellspacing="0"],

table[border="0"] {

    border-collapse: separate !important;

    border-spacing: 0 !important;

    width: 100% !important;

    margin: 15px auto !important;

    background: linear-gradient(135deg, rgba(37, 30, 29, 0.95) 0%, rgba(13, 6, 4, 0.98) 100%) !important;

    border: 3px solid #8B6F47 !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 

                inset 0 1px 0 rgba(212, 175, 55, 0.1) !important;

    display: table !important;

}



/* Linhas da tabela - MELHORADO */

table.ranking-table tbody tr,

table[border="0"][cellpadding="2"][cellspacing="0"] tbody tr,

table[border="0"] tbody tr {

    transition: all 0.3s ease !important;

    border-bottom: 1px solid rgba(139, 111, 71, 0.5) !important;

    background: transparent !important;

    display: table-row !important;

    cursor: pointer !important;

}



/* Cabeçalho da tabela */

table.ranking-table thead,

table[border="0"][cellpadding="2"][cellspacing="0"] thead,

table[border="0"] thead {

    display: table-header-group !important;

}



table.ranking-table thead tr,

table[border="0"][cellpadding="2"][cellspacing="0"] thead tr,

table[border="0"] thead tr {

    background: linear-gradient(135deg, rgba(139, 111, 71, 0.4) 0%, rgba(212, 175, 55, 0.3) 100%) !important;

    border-bottom: 2px solid #8B6F47 !important;

}



table.ranking-table thead th,

table[border="0"][cellpadding="2"][cellspacing="0"] thead th,

table[border="0"] thead th {

    padding: 12px 8px !important;

    text-align: center !important;

    color: #d4af37 !important;

    font-weight: 700 !important;

    font-size: 14px !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;

    border-right: 1px solid rgba(139, 111, 71, 0.3) !important;

}



table.ranking-table thead th:last-child,

table[border="0"][cellpadding="2"][cellspacing="0"] thead th:last-child,

table[border="0"] thead th:last-child {

    border-right: none !important;

}



table.ranking-table tr:first-child,

table[border="0"][cellpadding="2"][cellspacing="0"] tr:first-child,

table[border="0"] tr:first-child {

    border-top: none !important;

}



table.ranking-table tr:last-child,

table[border="0"][cellpadding="2"][cellspacing="0"] tr:last-child,

table[border="0"] tr:last-child {

    border-bottom: none !important;

}



/* Hover nas linhas */

table.ranking-table tr:hover,

table[border="0"][cellpadding="2"][cellspacing="0"] tr:hover,

table[border="0"] tr:hover {

    background: linear-gradient(90deg, 

        rgba(212, 175, 55, 0.15) 0%, 

        rgba(139, 111, 71, 0.2) 50%, 

        rgba(212, 175, 55, 0.15) 100%) !important;

    transform: translateX(2px) !important;

    box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.1) !important;

}



/* Células da tabela */

table.ranking-table td,

table[border="0"][cellpadding="2"][cellspacing="0"] td,

table[border="0"] td {

    padding: 14px 10px !important;

    font-size: 14px !important;

    color: #c4c9b8 !important;

    vertical-align: middle !important;

    text-align: center !important;

    font-family: 'Inter', Arial, sans-serif !important;

    border-right: 1px solid rgba(139, 111, 71, 0.3) !important;

    position: relative !important;

    display: table-cell !important;

}



table.ranking-table td:last-child,

table[border="0"][cellpadding="2"][cellspacing="0"] td:last-child,

table[border="0"] td:last-child {

    border-right: none !important;

}



table.ranking-table td:first-child,

table[border="0"][cellpadding="2"][cellspacing="0"] td:first-child,

table[border="0"] td:first-child {

    padding-left: 18px !important;

}



table.ranking-table td:last-child,

table[border="0"][cellpadding="2"][cellspacing="0"] td:last-child,

table[border="0"] td:last-child {

    padding-right: 18px !important;

}



/* Estilo para font tags dentro das células */

table.ranking-table td font,

table[border="0"][cellpadding="2"][cellspacing="0"] td font,

table[border="0"] td font {

    font-size: 14px !important;

    line-height: 1.6 !important;

    font-family: 'Inter', Arial, sans-serif !important;

    color: inherit !important;

}



/* Posição (ranking) - dourado */

table.ranking-table td.rank-pos,

table[border="0"][cellpadding="2"][cellspacing="0"] td:nth-child(2) font,

table[border="0"] td:nth-child(2) font {

    font-weight: 700 !important;

    color: #d4af37 !important;

    font-size: 15px !important;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;

}



/* Ícone de classe */

table.ranking-table td.class-icon,

table[border="0"][cellpadding="2"][cellspacing="0"] td img,

table[border="0"] td img {

    text-align: left !important;

    padding-left: 12px !important;

}



table.ranking-table td.class-icon img,

table[border="0"][cellpadding="2"][cellspacing="0"] td img,

table[border="0"] td img {

    width: 26px !important;

    height: 24px !important;

    border-radius: 4px !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),

                0 0 0 1px rgba(139, 111, 71, 0.3) !important;

    border: 1px solid rgba(212, 175, 55, 0.2) !important;

    transition: transform 0.2s ease !important;

}



table.ranking-table td.class-icon img:hover,

table[border="0"][cellpadding="2"][cellspacing="0"] td img:hover,

table[border="0"] td img:hover {

    transform: scale(1.1) !important;

    box-shadow: 0 3px 8px rgba(212, 175, 55, 0.4),

                0 0 0 1px rgba(212, 175, 55, 0.5) !important;

}



/* Nome do jogador */

table.ranking-table td.player-name,

table[border="0"][cellpadding="2"][cellspacing="0"] td:nth-child(4),

table[border="0"] td:nth-child(4) {

    text-align: center !important;

    font-size: 15px !important;

    color: #d4c5a0 !important;

    font-weight: 500 !important;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;

}



table.ranking-table td.player-name font,

table[border="0"][cellpadding="2"][cellspacing="0"] td:nth-child(4) font,

table[border="0"] td:nth-child(4) font {

    color: #d4c5a0 !important;

}



/* Valor (Level, BPs, etc) - dourado destacado */

table.ranking-table td.rank-value,

table[border="0"][cellpadding="2"][cellspacing="0"] td:nth-child(5),

table[border="0"] td:nth-child(5) {

    text-align: center !important;

    font-size: 16px !important;

    color: #d4af37 !important;

    font-weight: 700 !important;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;

}



table.ranking-table td.rank-value font,

table[border="0"][cellpadding="2"][cellspacing="0"] td:nth-child(5) font,

table[border="0"] td:nth-child(5) font {

    color: #d4af37 !important;

    font-weight: 700 !important;

}



/* Espaçamento lateral */

table.ranking-table td.spacer,

table[border="0"][cellpadding="2"][cellspacing="0"] td:first-child,

table[border="0"][cellpadding="2"][cellspacing="0"] td:last-child,

table[border="0"] td:first-child,

table[border="0"] td:last-child {

    width: auto !important;

    padding: 14px 8px !important;

}



/* Efeito de zebra alternado - MELHORADO */

table.ranking-table tbody tr:nth-child(odd),

table[border="0"][cellpadding="2"][cellspacing="0"] tbody tr:nth-child(odd),

table[border="0"] tbody tr:nth-child(odd) {

    background: rgba(37, 30, 29, 0.5) !important;

}



table.ranking-table tbody tr:nth-child(even),

table[border="0"][cellpadding="2"][cellspacing="0"] tbody tr:nth-child(even),

table[border="0"] tbody tr:nth-child(even) {

    background: rgba(13, 6, 4, 0.6) !important;

}



/* Hover melhorado - mais destacado */

table.ranking-table tbody tr:hover,

table[border="0"][cellpadding="2"][cellspacing="0"] tbody tr:hover,

table[border="0"] tbody tr:hover {

    background: linear-gradient(90deg, 

        rgba(212, 175, 55, 0.25) 0%, 

        rgba(139, 111, 71, 0.35) 50%, 

        rgba(212, 175, 55, 0.25) 100%) !important;

    transform: translateX(3px) !important;

    box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.2),

                inset 0 2px 0 rgba(212, 175, 55, 0.1) !important;

    border-left: 3px solid #d4af37 !important;

}



table.ranking-table tbody tr:nth-child(even):hover,

table[border="0"][cellpadding="2"][cellspacing="0"] tbody tr:nth-child(even):hover,

table[border="0"] tbody tr:nth-child(even):hover {

    background: linear-gradient(90deg, 

        rgba(212, 175, 55, 0.25) 0%, 

        rgba(139, 111, 71, 0.35) 50%, 

        rgba(212, 175, 55, 0.25) 100%) !important;

}



/* Mensagem quando não há dados */

table.ranking-table tr td[colspan],

table[border="0"][cellpadding="2"][cellspacing="0"] tr td[colspan],

table[border="0"] tr td[colspan] {

    text-align: center !important;

    padding: 30px 20px !important;

    color: #8B6F47 !important;

    font-style: italic !important;

    font-size: 15px !important;

}



/* Responsividade - Tablet */

@media screen and (max-width: 1024px) {

    table.ranking-table,

    table[border="0"][cellpadding="2"][cellspacing="0"],

    table[border="0"] {

        border-radius: 10px !important;

        margin: 12px auto !important;

        border-width: 2px !important;

    }

    

    table.ranking-table td,

    table[border="0"][cellpadding="2"][cellspacing="0"] td,

    table[border="0"] td {

        padding: 10px 6px !important;

        font-size: 1.2rem !important;

    }

    

    table.ranking-table thead th,

    table[border="0"][cellpadding="2"][cellspacing="0"] thead th,

    table[border="0"] thead th {

        padding: 10px 6px !important;

        font-size: 1.1rem !important;

    }

}



/* Responsividade - Mobile */

@media screen and (max-width: 767px) {

    table.ranking-table,

    table[border="0"][cellpadding="2"][cellspacing="0"],

    table[border="0"] {

        border-radius: 8px !important;

        margin: 10px 0 !important;

        border-width: 2px !important;

        min-width: 600px !important;

        display: block !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

    }

    

    table.ranking-table td,

    table[border="0"][cellpadding="2"][cellspacing="0"] td,

    table[border="0"] td {

        padding: 8px 4px !important;

        font-size: 1rem !important;

        white-space: nowrap !important;

    }

    

    table.ranking-table thead th,

    table[border="0"][cellpadding="2"][cellspacing="0"] thead th,

    table[border="0"] thead th {

        padding: 8px 4px !important;

        font-size: 0.9rem !important;

        white-space: nowrap !important;

    }

    

    table.ranking-table td.class-icon img,

    table[border="0"][cellpadding="2"][cellspacing="0"] td img,

    table[border="0"] td img {

        width: 18px !important;

        height: 16px !important;

    }

    

    table.ranking-table td.rank-value,

    table[border="0"][cellpadding="2"][cellspacing="0"] td:nth-child(5),

    table[border="0"] td:nth-child(5) {

        font-size: 1.2rem !important;

    }

}



/* Animação de entrada suave */

@keyframes fadeInRow {

    from {

        opacity: 0;

        transform: translateY(-5px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



table.ranking-table tr,

table[border="0"][cellpadding="2"][cellspacing="0"] tr,

table[border="0"] tr {

    animation: fadeInRow 0.3s ease-out !important;

}



/* Melhorias para legibilidade */

table.ranking-table td font[color="#969384"],

table[border="0"][cellpadding="2"][cellspacing="0"] td font[color="#969384"],

table[border="0"] td font[color="#969384"] {

    color: #d4af37 !important;

}



table.ranking-table td font[color="#a2aa97"],

table[border="0"][cellpadding="2"][cellspacing="0"] td font[color="#a2aa97"],

table[border="0"] td font[color="#a2aa97"] {

    color: #c4c9b8 !important;

}



/* FORÇAR BORDAS - Estilo adicional para garantir */

body table[border="0"],

body table[border="0"][cellpadding="2"],

body table[border="0"][cellpadding="2"][cellspacing="0"] {

    border: 3px solid #8B6F47 !important;

    border-radius: 12px !important;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;

}