/* Gradient Theme - Aplicação do degradê #2C3F51 para #3497DA em todo o site */

:root {
    --gradient-primary: linear-gradient(to right, #2C3F51, #3497DA);
    --gradient-hover: linear-gradient(to right, #1e2c3a, #2874a6);
    --primary-color: #3497DA;
    --primary-dark: #2C3F51;
}

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

/* Todos os botões primários */
.btn-primary,
.btn.btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: white !important;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--gradient-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 151, 218, 0.3);
}

.btn-primary:active,
.btn.btn-primary:active {
    background: var(--gradient-hover) !important;
    transform: translateY(0);
}

/* Botões outline primários */
.btn-outline-primary {
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
    color: white !important;
}

/* Botões de navegação */
.navbar .btn-primary {
    background: var(--gradient-primary) !important;
}

/* ===== ELEMENTOS DE DESTAQUE ===== */

/* Background primário */
.bg-primary {
    background: var(--gradient-primary) !important;
}

/* Headers e banners */
.hero-section {
    background: var(--gradient-primary) !important;
}

.hero-section-contact,
.hero-section-form,
.hero-section-small {
    background: var(--gradient-primary) !important;
}

/* Cabeçalhos de seções */
.ranking-header,
.profile-header {
    background: var(--gradient-primary) !important;
}

/* Cards com destaque */
.card-primary .card-header {
    background: var(--gradient-primary) !important;
}

/* ===== ELEMENTOS DE FORMULÁRIO ===== */

/* Form controls focados */
.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 151, 218, 0.25) !important;
}

/* Checkboxes e radios */
.form-check-input:checked {
    background: var(--gradient-primary) !important;
    border-color: var(--primary-color) !important;
}

/* Form switches */
.form-switch .form-check-input:checked {
    background: var(--gradient-primary) !important;
}

/* ===== NAVEGAÇÃO ===== */

/* Nav pills ativas */
.nav-pills .nav-link.active {
    background: var(--gradient-primary) !important;
}

/* Navegação ativa */
.navbar-nav .nav-link.active {
    color: var(--primary-color) !important;
}

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

.page-item.active .page-link {
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
}

.page-link {
    color: var(--primary-color) !important;
}

.page-link:hover {
    color: var(--primary-dark) !important;
}

/* ===== PROGRESS BARS ===== */

.progress-bar {
    background: var(--gradient-primary) !important;
}

/* ===== LIST GROUPS ===== */

.list-group-item.active {
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
}

/* ===== BADGES ===== */

.badge.bg-primary,
.badge-primary {
    background: var(--gradient-primary) !important;
}

/* ===== ALERTS ===== */

.alert-primary {
    color: #1a2b38;
    background-color: rgba(52, 151, 218, 0.1);
    border-color: var(--primary-color);
    border-left: 4px solid var(--primary-color);
}

/* ===== DROPDOWNS ===== */

.dropdown-item.active,
.dropdown-item:active {
    background: var(--gradient-primary) !important;
}

/* ===== TABLES ===== */

.table-primary,
.table-primary > th,
.table-primary > td {
    background: var(--gradient-primary) !important;
}

/* Headers de tabela - Gradiente único */
.jogos-table thead {
    background: var(--gradient-primary) !important;
    background-image: var(--gradient-primary) !important;
}

.jogos-table thead th {
    background: transparent !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* ===== BORDERS E OUTLINE ===== */

.border-primary {
    border-color: var(--primary-color) !important;
}

/* ===== ELEMENTOS ESPECÍFICOS DO SITE ===== */

/* Login container top border */
.login-container::before {
    background: var(--gradient-primary) !important;
}

/* Recovery header */
.recovery-header {
    background: var(--gradient-primary) !important;
}

/* Hero stats */
.hero-stats .stat-item {
    background: rgba(52, 151, 218, 0.1);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Feature cards hover */
.feature-card:hover {
    background: linear-gradient(135deg, rgba(44, 63, 81, 0.05), rgba(52, 151, 218, 0.05));
}

/* Botões especiais do sistema */
.btn-save,
.btn-login,
.btn-submit {
    background: var(--gradient-primary) !important;
    border: none !important;
}

.btn-save:hover,
.btn-login:hover,
.btn-submit:hover {
    background: var(--gradient-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 151, 218, 0.3);
}

/* Links principais */
a.text-primary,
.text-primary {
    color: var(--primary-color) !important;
}

a:hover {
    color: var(--primary-dark) !important;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 768px) {
    .btn-primary,
    .btn.btn-primary {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .hero-section {
        background: var(--gradient-primary) !important;
    }
}

/* ===== ANIMAÇÕES ===== */

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Efeito de animação em elementos importantes */
.btn-primary.animated,
.hero-section.animated {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}