/* Temas CSS para o projeto BChess */

/* ===== TEMA LIGHT (PADRÃO) ===== */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family-base);
    line-height: var(--line-height-base);
}

/* TABELAS - VARIÁVEIS CSS DO BOOTSTRAP PARA TEMA CLARO */
.table {
    --bs-table-color: var(--text-primary);
    --bs-table-bg: var(--card-bg, #ffffff);
    --bs-table-border-color: var(--border-color, #dee2e6);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--text-primary);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.02);
    --bs-table-active-color: var(--text-primary);
    --bs-table-active-bg: rgba(0, 0, 0, 0.05);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.03);
}

/* ===== TEMA DARK ===== */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .main-container {
    background-color: var(--bg-primary);
    padding-left: 8px;
    padding-right: 8px;
}

/* Melhorias específicas para contraste de texto no tema escuro */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

/* Cards e containers */
[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .card-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
    color: var(--text-primary);
}

/* Tabelas */
[data-theme="dark"] .table {
    color: var(--text-primary);
}

[data-theme="dark"] .table th {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .table td {
    border-color: var(--border-color);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--bg-secondary);
}

/* Formulários */
[data-theme="dark"] .form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--input-bg);
    border-color: var(--bchess-primary);
    color: var(--input-text);
    box-shadow: var(--shadow-focus);
}

[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--bchess-primary);
    color: var(--input-text);
    box-shadow: var(--shadow-focus);
}

/* Botões */
[data-theme="dark"] .btn-outline-primary {
    color: var(--bchess-primary);
    border-color: var(--bchess-primary);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--text-on-primary);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: var(--text-on-secondary);
}

/* Botões sólidos com melhor contraste */
[data-theme="dark"] .btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--text-on-primary);
}

[data-theme="dark"] .btn-primary:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    color: var(--text-on-primary);
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: var(--text-on-secondary);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
    border-color: var(--btn-secondary-hover);
    color: var(--text-on-secondary);
}

[data-theme="dark"] .btn-success {
    background-color: var(--btn-success-bg);
    border-color: var(--btn-success-bg);
    color: var(--text-on-success);
}

[data-theme="dark"] .btn-success:hover {
    background-color: var(--btn-success-hover);
    border-color: var(--btn-success-hover);
    color: var(--text-on-success);
}

[data-theme="dark"] .btn-danger {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-bg);
    color: var(--text-on-danger);
}

[data-theme="dark"] .btn-danger:hover {
    background-color: var(--btn-danger-hover);
    border-color: var(--btn-danger-hover);
    color: var(--text-on-danger);
}

[data-theme="dark"] .btn-warning {
    background-color: var(--btn-warning-bg);
    border-color: var(--btn-warning-bg);
    color: var(--text-on-warning);
}

[data-theme="dark"] .btn-warning:hover {
    background-color: var(--btn-warning-hover);
    border-color: var(--btn-warning-hover);
    color: var(--text-on-warning);
}

[data-theme="dark"] .btn-info {
    background-color: var(--btn-info-bg);
    border-color: var(--btn-info-bg);
    color: var(--text-on-info);
}

[data-theme="dark"] .btn-info:hover {
    background-color: var(--btn-info-hover);
    border-color: var(--btn-info-hover);
    color: var(--text-on-info);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color);
}

/* Navegação */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
    border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--nav-link-active-yellow);
    background-color: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
}

/* Paginação */
[data-theme="dark"] .pagination .page-link {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--bchess-primary);
    border-color: var(--bchess-primary);
    color: white;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* Lista de grupos */
[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item.active {
    background-color: var(--bchess-primary);
    border-color: var(--bchess-primary);
    color: var(--text-on-primary);
}

[data-theme="dark"] .list-group-item.disabled {
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
}

/* Badges */
[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--text-muted) !important;
}

[data-theme="dark"] .badge.bg-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Badges com cores específicas para melhor contraste */
[data-theme="dark"] .badge.bg-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--text-on-primary) !important;
}

[data-theme="dark"] .badge.bg-success {
    background-color: var(--btn-success-bg) !important;
    color: var(--text-on-success) !important;
}

[data-theme="dark"] .badge.bg-danger {
    background-color: var(--btn-danger-bg) !important;
    color: var(--text-on-danger) !important;
}

[data-theme="dark"] .badge.bg-warning {
    background-color: var(--btn-warning-bg) !important;
    color: var(--text-on-warning) !important;
}

[data-theme="dark"] .badge.bg-info {
    background-color: var(--btn-info-bg) !important;
    color: var(--text-on-info) !important;
}

/* Progress bars */
[data-theme="dark"] .progress {
    background-color: var(--bg-tertiary);
}

/* Modais */
[data-theme="dark"] .modal-content {
    background-color: var(--modal-bg);
    border-color: var(--modal-border);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

/* Tooltips */
[data-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
}

[data-theme="dark"] .tooltip .tooltip-arrow::before {
    border-top-color: var(--tooltip-bg);
}

/* Popovers */
[data-theme="dark"] .popover {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .popover-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .popover-body {
    color: var(--text-primary);
}

/* Alertas */
[data-theme="dark"] .alert-primary {
    background-color: rgba(52, 152, 219, 0.1);
    border-color: rgba(52, 152, 219, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(52, 152, 219, 0.1);
    border-color: rgba(52, 152, 219, 0.2);
    color: var(--text-primary);
}

/* Textos - MELHORADO CONTRASTE */
[data-theme="dark"] .text-muted {
    color: #cccccc !important;
}

[data-theme="dark"] .text-secondary {
    color: #dddddd !important;
}

/* Melhorias específicas para elementos com baixo contraste */
[data-theme="dark"] .card-body p {
    color: var(--text-primary);
}

[data-theme="dark"] .card-body small {
    color: #cccccc;
}

[data-theme="dark"] .list-group-item {
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item small {
    color: #cccccc;
}

[data-theme="dark"] .table td {
    color: var(--table-dark-text, #222222);
}

[data-theme="dark"] .table th {
    color: var(--text-primary);
}

[data-theme="dark"] .nav-link {
    color: var(--text-primary);
}

[data-theme="dark"] .nav-link:hover {
    color: var(--bchess-primary);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

/* Links */
[data-theme="dark"] a {
    color: var(--bchess-primary);
}

[data-theme="dark"] a:hover {
    color: var(--btn-chess-accent-hover);
}

/* Menu flutuante */
[data-theme="dark"] .floating-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .floating-menu .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

/* Background quadriculado */
[data-theme="dark"] .checkerboard-bg {
    background-image: 
        linear-gradient(var(--checkerboard-pattern-45deg), var(--bg-checker-dark) var(--checkerboard-pattern-25), transparent var(--checkerboard-pattern-25)),
        linear-gradient(var(--checkerboard-pattern-neg45deg), var(--bg-checker-dark) var(--checkerboard-pattern-25), transparent var(--checkerboard-pattern-25)),
        linear-gradient(var(--checkerboard-pattern-45deg), transparent var(--checkerboard-pattern-75), var(--bg-checker-dark) var(--checkerboard-pattern-75)),
        linear-gradient(var(--checkerboard-pattern-neg45deg), transparent var(--checkerboard-pattern-75), var(--bg-checker-dark) var(--checkerboard-pattern-75));
    background-size: var(--bg-checker-size) var(--bg-checker-size);
    background-position: 0 0, 0 calc(var(--bg-checker-size) / 2), calc(var(--bg-checker-size) / 2) calc(-1 * var(--bg-checker-size) / 2), calc(-1 * var(--bg-checker-size) / 2) 0px;
    opacity: var(--bg-checker-opacity);
}

/* Foco e seleção */
[data-theme="dark"] .btn:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    box-shadow: var(--shadow-focus);
}

/* Scrollbar customizada */
[data-theme="dark"] ::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--border-radius-sm);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #cccccc;
}

/* Seleção de texto */
[data-theme="dark"] ::selection {
    background-color: var(--bchess-primary);
    color: white;
}

[data-theme="dark"] ::-moz-selection {
    background-color: var(--bchess-primary);
    color: white;
}

/* Placeholders - MELHORADO CONTRASTE */
[data-theme="dark"] ::placeholder {
    color: #cccccc;
    opacity: 1;
}

[data-theme="dark"] ::-webkit-input-placeholder {
    color: #cccccc;
    opacity: 1;
}

[data-theme="dark"] ::-moz-placeholder {
    color: #cccccc;
    opacity: 1;
}

[data-theme="dark"] ::-ms-input-placeholder {
    color: #cccccc;
    opacity: 1;
}

/* Melhorias adicionais para elementos específicos */
[data-theme="dark"] .badge.bg-light {
    background-color: #404040 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

[data-theme="dark"] .progress {
    background-color: #404040;
}

[data-theme="dark"] .progress-bar {
    color: #ffffff;
}

[data-theme="dark"] .form-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-text {
    color: #cccccc;
}

[data-theme="dark"] .alert {
    color: var(--text-primary);
}

[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}

[data-theme="dark"] .modal-body {
    color: var(--text-primary);
}

[data-theme="dark"] .popover-title {
    color: var(--text-primary);
}

[data-theme="dark"] .popover-content {
    color: var(--text-primary);
} 

/* Status badges específicos do BChess */
[data-theme="dark"] .status-badge {
    color: var(--text-on-primary);
}

[data-theme="dark"] .status-badge.success {
    background-color: var(--btn-success-bg);
    color: var(--text-on-success);
}

[data-theme="dark"] .status-badge.danger {
    background-color: var(--btn-danger-bg);
    color: var(--text-on-danger);
}

[data-theme="dark"] .status-badge.warning {
    background-color: var(--btn-warning-bg);
    color: var(--text-on-warning);
}

[data-theme="dark"] .status-badge.info {
    background-color: var(--btn-info-bg);
    color: var(--text-on-info);
}

/* Status de jogos no lobby - MELHORADO CONTRASTE */
[data-theme="dark"] .lobby-game-status.waiting {
    background-color: var(--btn-warning-bg);
    color: var(--text-on-warning);
}

[data-theme="dark"] .lobby-game-status.playing {
    background-color: var(--btn-success-bg);
    color: var(--text-on-success);
}

[data-theme="dark"] .lobby-game-status.finished {
    background-color: #6c757d;
    color: #ffffff;
}

/* Status de apostas - MELHORADO CONTRASTE */
[data-theme="dark"] .bet-status.active {
    background-color: var(--btn-success-bg);
    color: var(--text-on-success);
}

[data-theme="dark"] .bet-status.finished {
    background-color: #6c757d;
    color: #ffffff;
}

/* Melhorias adicionais para elementos específicos do BChess */
[data-theme="dark"] .wallet-header h1 {
    color: var(--bchess-primary);
}

[data-theme="dark"] .wallet-header h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .wallet-header p {
    color: #cccccc;
}

[data-theme="dark"] .timeline-item h6 {
    color: var(--text-primary);
}

[data-theme="dark"] .timeline-item p {
    color: #cccccc;
}

[data-theme="dark"] .achievement-name {
    color: var(--text-primary);
}

[data-theme="dark"] .players-stats h6 {
    color: var(--text-primary);
}

[data-theme="dark"] .players-stats small {
    color: #cccccc;
}

/* Melhorias adicionais para contraste */
[data-theme="dark"] .btn-group > .btn {
    color: var(--text-primary);
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-group > .btn:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-group > .btn.active {
    background-color: var(--bchess-primary);
    color: var(--text-on-primary);
}

[data-theme="dark"] .input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .form-floating > label {
    color: var(--text-secondary);
}

[data-theme="dark"] .form-floating > .form-control:focus ~ label,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--bchess-primary);
}

[data-theme="dark"] .form-range::-webkit-slider-track {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .form-range::-webkit-slider-thumb {
    background-color: var(--bchess-primary);
}

[data-theme="dark"] .form-range::-moz-range-track {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .form-range::-moz-range-thumb {
    background-color: var(--bchess-primary);
} 

/* TABELAS - VARIÁVEIS CSS DO BOOTSTRAP SOBRESCRITAS */
[data-theme="dark"] .table {
    --bs-table-color: var(--text-primary);
    --bs-table-bg: var(--card-bg);
    --bs-table-border-color: var(--border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--text-primary);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-active-color: var(--text-primary);
    --bs-table-active-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}

/* Aplicar cores específicas nas células */
[data-theme="dark"] .table tbody tr {
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
}

[data-theme="dark"] .table thead th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table td {
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* Linhas striped usando a variável do Bootstrap */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

/* Hover nas linhas */
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}

/* ABAS INATIVAS - MELHOR CONTRASTE */
[data-theme="dark"] .nav-tabs .nav-link:not(.active) {
    color: #bbbbbb;
}

/* TEXTO SECUNDÁRIO E MUTED - MELHOR CONTRASTE */
[data-theme="dark"] .text-secondary, 
[data-theme="dark"] .text-muted {
    color: #dddddd !important;
} 

.nav-tabs .nav-link.active {
    color: var(--nav-link-active-yellow);
}