/*
 * Tema escuro azul para o TSN Ranksystem (páginas stats/)
 * Combina com o site TS Brasil.
 * Deve ser carregado DEPOIS dos CSS do Ranksystem.
 */

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

:root {
    --rs-bg: #090c13;
    --rs-card: #131822;
    --rs-card-2: #1b2230;
    --rs-text: #d7deea;
    --rs-muted: #8b98b0;
    --rs-blue: #2f80ed;
    --rs-blue-dark: #1f63c2;
    --rs-blue-light: #6fb1ff;
    --rs-line: rgba(255, 255, 255, 0.08);
    --rs-blue-line: rgba(47, 128, 237, 0.35);
}

/* ===== BASE ===== */

html, body {
    background-color: var(--rs-bg) !important;
    background-image:
        radial-gradient(1100px 520px at 15% -8%, rgba(47, 128, 237, 0.16), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, rgba(31, 99, 194, 0.12), transparent 55%),
        radial-gradient(800px 600px at 50% 120%, rgba(47, 128, 237, 0.08), transparent 60%) !important;
    background-attachment: fixed !important;
    color: var(--rs-text) !important;
}

#wrapper, #page-wrapper {
    background: transparent !important;
    border: 0 !important;
}

h1, h2, h3, h4, h5, h6,
.page-header, .panel-title {
    color: #fff !important;
    font-family: 'Oswald', 'Roboto', sans-serif;
    letter-spacing: 0.02em;
}

.page-header {
    border-bottom: 2px solid var(--rs-blue-line) !important;
    padding-bottom: 10px;
}

a { color: var(--rs-blue-light); transition: color 0.2s ease; }
a:hover, a:focus { color: #fff; text-decoration: none; }

hr { border-top-color: var(--rs-line) !important; }
.text-muted, small, .help-block { color: var(--rs-muted) !important; }

/* ===== NAVBAR ===== */

.navbar-default,
.navbar-inverse,
.navbar {
    background-color: var(--rs-card) !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 2px solid var(--rs-blue) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text,
.navbar-top-links > li > a {
    color: #fff !important;
    font-family: 'Oswald', 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a,
.navbar-top-links > li > a:hover {
    background-color: var(--rs-card-2) !important;
    color: var(--rs-blue-light) !important;
}

.navbar-default .navbar-toggle { border-color: var(--rs-blue-line); }
.navbar-default .navbar-toggle .icon-bar { background-color: #fff; }

.dropdown-menu {
    background-color: var(--rs-card) !important;
    border: 1px solid var(--rs-blue-line) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.dropdown-menu > li > a { color: var(--rs-text) !important; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a {
    background-color: var(--rs-card-2) !important;
    color: var(--rs-blue-light) !important;
}
.dropdown-menu .divider { background-color: var(--rs-line) !important; }

/* ===== PAINÉIS ===== */

.panel,
.panel-default,
.well {
    background-color: var(--rs-card) !important;
    border: 1px solid var(--rs-blue-line) !important;
    border-radius: 12px !important;
    color: var(--rs-text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.panel-default > .panel-heading,
.panel > .panel-heading {
    background-color: rgba(0, 0, 0, 0.25) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--rs-line) !important;
    border-radius: 12px 12px 0 0 !important;
}

.panel-body { background: transparent !important; }

.panel-footer {
    background-color: rgba(0, 0, 0, 0.25) !important;
    border-top: 1px solid var(--rs-line) !important;
    border-radius: 0 0 12px 12px !important;
}

/* Caixas coloridas de números (SB Admin): todas em tons de azul */
.panel-primary,
.panel-green,
.panel-yellow,
.panel-red,
.panel-info {
    border-color: var(--rs-blue-line) !important;
}

.panel-primary > .panel-heading { background: linear-gradient(135deg, #2f80ed, #1f63c2) !important; border-color: transparent !important; color: #fff !important; }
.panel-green   > .panel-heading { background: linear-gradient(135deg, #1fa2d6, #2f80ed) !important; border-color: transparent !important; color: #fff !important; }
.panel-yellow  > .panel-heading { background: linear-gradient(135deg, #4f6ef7, #2a3fb8) !important; border-color: transparent !important; color: #fff !important; }
.panel-red     > .panel-heading { background: linear-gradient(135deg, #3b9cff, #2563eb) !important; border-color: transparent !important; color: #fff !important; }
.panel-info    > .panel-heading { background: linear-gradient(135deg, #56ccf2, #2f80ed) !important; border-color: transparent !important; color: #fff !important; }

.panel-primary > a, .panel-green > a, .panel-yellow > a, .panel-red > a { color: var(--rs-blue-light) !important; }
.panel-primary > a:hover, .panel-green > a:hover, .panel-yellow > a:hover, .panel-red > a:hover { color: #fff !important; }

.huge { color: #fff; font-family: 'Oswald', 'Roboto', sans-serif; }

/* ===== TABELAS ===== */

.table,
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th {
    color: var(--rs-text) !important;
    border-color: var(--rs-line) !important;
    background-color: transparent !important;
}

.table > thead > tr > th {
    background-color: rgba(47, 128, 237, 0.2) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--rs-blue) !important;
    text-transform: uppercase;
    font-family: 'Oswald', 'Roboto', sans-serif;
    letter-spacing: 0.04em;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: rgba(47, 128, 237, 0.12) !important;
}

/* DataTables / tablesorter */
.dataTables_wrapper,
.dataTables_wrapper label,
.dataTables_info,
.dataTables_length,
.dataTables_filter {
    color: var(--rs-text) !important;
}

/* ===== FORMULÁRIOS ===== */

.form-control,
.input-group-addon,
select,
textarea {
    background-color: #2b3650 !important;
    border: 1px solid #3d4c6b !important;
    color: #fff !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--rs-blue) !important;
    box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.25) !important;
}

.form-control::placeholder { color: #9fb0cc !important; }

/* ===== BOTÕES ===== */

.btn-default,
.btn-primary,
.btn-info,
.btn-success {
    background-color: var(--rs-blue) !important;
    background-image: none !important;
    border: 1px solid var(--rs-blue) !important;
    color: #fff !important;
    border-radius: 8px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-default:hover, .btn-primary:hover, .btn-info:hover, .btn-success:hover,
.btn-default:focus, .btn-primary:focus, .btn-info:focus, .btn-success:focus {
    background-color: var(--rs-blue-dark) !important;
    border-color: var(--rs-blue-dark) !important;
    box-shadow: 0 0 16px rgba(47, 128, 237, 0.55);
}

/* ===== PAGINAÇÃO / BADGES ===== */

.pagination > li > a,
.pagination > li > span {
    background-color: var(--rs-card-2) !important;
    border-color: var(--rs-line) !important;
    color: var(--rs-text) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > li > a:hover {
    background-color: var(--rs-blue) !important;
    border-color: var(--rs-blue) !important;
    color: #fff !important;
}

.pagination > .disabled > a { color: var(--rs-muted) !important; }

.label, .badge, .label-primary, .label-success, .label-info {
    background-color: var(--rs-blue) !important;
    color: #fff !important;
}

/* ===== MODAIS (notícias, atualizar sessão, ajuda) ===== */

.modal-content {
    background: linear-gradient(180deg, #26344f 0%, #1c2538 100%) !important;
    border: 1px solid var(--rs-blue-line) !important;
    border-top: 4px solid var(--rs-blue) !important;
    border-radius: 12px !important;
    color: #e6ecf7;
    box-shadow: 0 0 30px rgba(47, 128, 237, 0.3), 0 10px 40px rgba(0, 0, 0, 0.6);
}

.modal-header, .modal-footer { border-color: var(--rs-blue-line) !important; }
.modal-title { color: #fff !important; }
.close { color: #fff !important; text-shadow: none !important; opacity: 0.8; }
.modal-backdrop.in { opacity: 0.75; }

/* ===== ALERTAS ===== */

.alert { border: 0 !important; border-radius: 10px; }
.alert-info, .alert-success { background-color: rgba(47, 128, 237, 0.2) !important; color: #dbe9ff !important; }

/* ===== BARRA DE PROGRESSO ===== */

.progress { background-color: #2c2e3e !important; border-radius: 8px; }
.progress-bar { background-color: var(--rs-blue) !important; }

/* ===== BARRA DE ROLAGEM ===== */

::-webkit-scrollbar { width: 6px; height: 6px; background-color: var(--rs-bg); }
::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--rs-blue); }
::-webkit-scrollbar-track-piece { display: none; }
::selection { background-color: var(--rs-blue); color: #fff; }


/* ===== BARRA SUPERIOR (navbar-inverse) E MENU LATERAL (SB Admin) ===== */

.navbar-inverse {
    background-color: var(--rs-card) !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 2px solid var(--rs-blue) !important;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a,
.top-nav > li > a {
    color: #fff !important;
    font-family: 'Oswald', 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus,
.top-nav > li > a:hover {
    background-color: var(--rs-card-2) !important;
    color: var(--rs-blue-light) !important;
}

.navbar-inverse .navbar-toggle { border-color: var(--rs-blue-line) !important; }
.navbar-inverse .navbar-toggle .icon-bar { background-color: #fff !important; }

.side-nav,
.navbar-inverse .side-nav {
    background-color: #0d1118 !important;
    border-right: 1px solid var(--rs-blue-line) !important;
}

.side-nav > li > a {
    color: #cbd5e6 !important;
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.side-nav > li > a:hover,
.side-nav > li > a:focus,
.side-nav > li.active > a {
    background-color: rgba(47, 128, 237, 0.15) !important;
    color: #fff !important;
    border-left-color: var(--rs-blue);
}

.side-nav > li > ul,
.side-nav > li > ul.collapse {
    background-color: #0f121a !important;
}

.side-nav > li > ul > li > a { color: var(--rs-muted) !important; }
.side-nav > li > ul > li > a:hover { color: #fff !important; background-color: rgba(47, 128, 237, 0.12) !important; }

/* ===== GRÁFICOS (Morris, desenhados em SVG) ===== */

svg text { fill: #d7deea !important; }

.morris-hover,
.morris-hover.morris-default-style {
    background: var(--rs-card) !important;
    border: 1px solid var(--rs-blue-line) !important;
    color: #fff !important;
    border-radius: 8px !important;
}
.morris-hover-row-label { color: #fff !important; }



/* ================================================= */
/* EFEITOS                                            */
/* ================================================= */

@keyframes rsFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes rsPulse {
    0%, 100% { text-shadow: 0 0 0 rgba(111, 177, 255, 0); }
    50%      { text-shadow: 0 0 14px rgba(111, 177, 255, 0.55); }
}

/* Entrada suave dos painéis, um depois do outro */
.panel { animation: rsFadeUp 0.55s ease both; }
.row > div:nth-child(2) > .panel { animation-delay: 0.08s; }
.row > div:nth-child(3) > .panel { animation-delay: 0.16s; }
.row > div:nth-child(4) > .panel { animation-delay: 0.24s; }

/* Painéis em vidro escuro */
.panel,
.panel-default,
.well {
    background-color: rgba(19, 24, 34, 0.88) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.panel:hover {
    transform: translateY(-4px);
    border-color: rgba(47, 128, 237, 0.75) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 26px rgba(47, 128, 237, 0.25);
}

/* Painéis largos (gráfico, tabelas) não precisam "pular" */
.col-lg-12 > .panel:hover,
.col-lg-6 > .panel:hover { transform: none; }

/* Brilho que passa pelo cabeçalho ao passar o mouse */
.panel > .panel-heading { position: relative; overflow: hidden; }
.panel > .panel-heading::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
}
.panel:hover > .panel-heading::after { left: 140%; }

/* Ícones e números das caixas */
.panel-heading .fa-5x {
    opacity: 0.35;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.panel:hover .panel-heading .fa-5x {
    opacity: 0.65;
    transform: scale(1.12) rotate(-5deg);
}
.huge { text-shadow: 0 0 18px rgba(255, 255, 255, 0.25); }
.panel:hover .huge { animation: rsPulse 1.6s ease-in-out infinite; }

/* Rodapé "Ver detalhes": seta desliza */
.panel-footer { transition: background-color 0.2s ease; }
.panel > a:hover .panel-footer { background-color: rgba(47, 128, 237, 0.2) !important; }
.panel-footer .pull-right .fas,
.panel-footer .pull-right .fa { transition: transform 0.25s ease; }
.panel > a:hover .panel-footer .pull-right .fas,
.panel > a:hover .panel-footer .pull-right .fa { transform: translateX(6px); }

/* Título da página com linha em degradê */
.page-header {
    border-bottom: 2px solid transparent !important;
    border-image: linear-gradient(90deg, #2f80ed, rgba(47, 128, 237, 0)) 1 !important;
}

/* Barra superior com brilho azul */
.navbar-inverse,
.navbar-default {
    box-shadow: 0 2px 22px rgba(47, 128, 237, 0.35), 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}

/* Menu lateral: item ativo com degradê */
.side-nav > li > a { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.side-nav > li.active > a {
    background: linear-gradient(90deg, rgba(47, 128, 237, 0.32), rgba(47, 128, 237, 0)) !important;
    border-left-color: #2f80ed;
}

/* Tabelas: marca azul na linha sob o mouse */
.table > tbody > tr { transition: background-color 0.2s ease; }
.table > tbody > tr > td:first-child { transition: box-shadow 0.2s ease; }
.table-hover > tbody > tr:hover > td:first-child {
    box-shadow: inset 3px 0 0 #2f80ed;
}

/* Botões */
.btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Campos de formulário */
.form-control { transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.form-control:focus { background-color: #33466a !important; }

/* Abertura dos modais */
.modal.fade .modal-dialog { transform: translateY(-24px) scale(0.97); transition: transform 0.3s ease-out; }
.modal.in .modal-dialog { transform: none; }

/* Quem prefere menos movimento no sistema */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ================================================= */
/* CORREÇÃO: faixas brancas nas linhas das tabelas    */
/* O Bootstrap 3 pinta a LINHA (tr), não só a célula; */
/* por isso o fundo claro continuava aparecendo.      */
/* ================================================= */

.table-responsive { background: transparent !important; border: 0 !important; }

.table,
.table > tbody,
.table > thead,
.table > tbody > tr,
.table > thead > tr,
table.dataTable,
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even,
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even),
.table-hover > tbody > tr {
    background-color: transparent !important;
}

/* linhas alternadas bem suaves */
.table-striped > tbody > tr:nth-of-type(odd),
table.dataTable tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.035) !important;
}

/* linha sob o mouse */
.table-hover > tbody > tr:hover,
table.dataTable tbody tr:hover {
    background-color: rgba(47, 128, 237, 0.14) !important;
}

/* células e textos sempre claros */
.table > tbody > tr > td,
.table > tbody > tr > th,
table.dataTable tbody td {
    background-color: transparent !important;
    color: var(--rs-text) !important;
}

.table > tbody > tr > td a { color: var(--rs-blue-light) !important; }
.table > tbody > tr > td a:hover { color: #fff !important; }