/* =========================================
   Bolão Copa do Mundo - Custom Styles
   ========================================= */

:root {
    --bs-body-bg: #0d1117;
    --bs-dark-rgb: 13, 17, 23;
    --sidebar-width: 240px;
}

body {
    background-color: #0d1117;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---- Sidebar (Admin) ---- */
.admin-layout {
    min-height: 100vh;
}

#sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    transition: width 0.2s ease;
    flex-shrink: 0;
}

#sidebar.collapsed {
    width: 60px;
    overflow: hidden;
}

#sidebar.collapsed .sidebar-header h5,
#sidebar.collapsed .nav-link span,
#sidebar.collapsed .nav-link small {
    display: none;
}

/* ---- Cards ---- */
.card {
    border-radius: 10px;
}

.card:hover {
    transform: translateY(-1px);
    transition: transform 0.15s ease;
}

/* ---- Game Cards ---- */
.game-card {
    transition: border-color 0.2s ease;
}

.game-card:hover {
    border-color: #ffc107 !important;
}

/* ---- Bet Buttons ---- */
.bet-btn.btn-warning {
    position: relative;
}

.bet-btn.btn-warning::after {
    content: ' ✓';
}

/* ---- Ranking highlight ---- */
.ring-highlight {
    box-shadow: 0 0 0 2px #ffc107;
}

/* ---- Blink animation (ao vivo) ---- */
.blink {
    animation: blink-animation 1.2s infinite;
}

@keyframes blink-animation {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ---- Progress bar override ---- */
.progress {
    background-color: #1c2333;
}

/* ---- Navbar ---- */
.navbar-brand {
    font-size: 1rem;
}

/* ---- Table ---- */
.table-dark th {
    background-color: #161b22;
    color: #8b949e;
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom-color: #30363d !important;
}

/* ---- Form Controls ---- */
.form-control:focus,
.form-select:focus {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.15) !important;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #58a6ff; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        z-index: 1050;
        height: 100vh;
        left: calc(-1 * var(--sidebar-width));
        transition: left 0.25s ease;
    }
    #sidebar.open {
        left: 0;
    }
}