/* ============================================================
   Mundial 2026 Typer — CSS
   Dark theme
   ============================================================ */

:root {
    --bg-base:     #121212;
    --bg-card:     #1E1E1E;
    --bg-card-alt: #252525;
    --border-col:  #2D2D2D;
    --text-muted-custom: #8a8a8a;
    --primary:     #0D6EFD;
    --live-color:  #dc3545;
}

/* Base */
html {
    height: 100%;
}

body {
    background-color: var(--bg-base);
    color: #e0e0e0;
    min-height: 100vh;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* Navbar */
#mainNav {
    background-color: #0a0a0a !important;
    border-bottom: 1px solid var(--border-col);
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* Cards */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-col);
    border-radius: 10px;
}

.card-header {
    background-color: var(--bg-card-alt);
    border-bottom: 1px solid var(--border-col);
    font-weight: 600;
    font-size: .9rem;
    padding: .6rem 1rem;
}

.card-footer {
    background-color: var(--bg-card-alt);
    border-top: 1px solid var(--border-col);
}

/* Tables */
.table-dark {
    --bs-table-bg: var(--bg-card);
    --bs-table-hover-bg: rgba(255,255,255,.04);
    --bs-table-border-color: var(--border-col);
}

.table thead th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted-custom);
    font-weight: 600;
    border-bottom: 1px solid var(--border-col) !important;
}

/* List group */
.list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-col);
    color: #e0e0e0;
}

.list-group-item:hover {
    background-color: var(--bg-card-alt);
}

/* Match card */
.match-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

/* Score display */
.score-display {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: #fff;
    line-height: 1;
}

.score-display-lg {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: .1em;
    color: #fff;
    line-height: 1;
}

/* Live dot */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--live-color);
    border-radius: 50%;
    animation: blink 1.2s step-start infinite;
    vertical-align: middle;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Flag placeholder */
.flag-placeholder {
    width: 40px;
    height: 27px;
    background: var(--border-col);
    border-radius: 4px;
    display: inline-block;
}

/* Form controls dark */
.form-control,
.form-select {
    background-color: var(--bg-card-alt);
    border-color: var(--border-col);
    color: #e0e0e0;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-card-alt);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

.form-control::placeholder {
    color: var(--text-muted-custom);
}

/* Input number arrows hidden */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] { -moz-appearance: textfield; }

/* Footer */
.footer {
    background-color: #0a0a0a;
    border-top: 1px solid var(--border-col);
    flex-shrink: 0;
}

/* Pagination dark */
.pagination .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-col);
    color: #e0e0e0;
}

.pagination .page-link:hover {
    background-color: var(--bg-card-alt);
    color: #fff;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

.pagination .page-item.disabled .page-link {
    background-color: var(--bg-card);
    color: var(--text-muted-custom);
}

/* Alert overrides */
.alert {
    border-radius: 8px;
}

/* Modal dark */
.modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-col);
}

/* Dropdown dark */
.dropdown-menu-dark {
    background-color: #0d0d0d;
    border-color: var(--border-col);
}

.dropdown-menu-dark .dropdown-item:hover {
    background-color: var(--bg-card-alt);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #666; }

/* Responsive tweaks */
@media (max-width: 575.98px) {
    .score-display-lg { font-size: 1.8rem; }
    .display-5 { font-size: 1.8rem !important; }
    .match-card .card-body { padding: .75rem; }

    /* Formularz typowania na małych ekranach */
    .prediction-form .d-flex {
        flex-wrap: nowrap;
        justify-content: center;
    }
    .prediction-form input[type="number"] {
        width: 52px !important;
        font-size: .9rem;
        padding: .25rem .2rem;
    }

    /* Tabele — zmniejsz padding na mobile */
    .table td, .table th {
        padding: .4rem .5rem;
    }

    /* Karty meczów — wyrównaj zawartość */
    .match-card .d-flex.align-items-center.justify-content-between {
        gap: .25rem;
    }

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

@media (max-width: 360px) {
    .prediction-form input[type="number"] {
        width: 44px !important;
        font-size: .85rem;
    }
    .score-display { font-size: 1.1rem; }
}

/* Feedback messages */
.form-feedback {
    min-height: 1.2em;
    transition: all .2s;
}

.form-feedback.text-success { color: #198754 !important; }
.form-feedback.text-danger  { color: #dc3545 !important; }

/* Install page */
.install-card {
    max-width: 600px;
    margin: auto;
}

/* Admin badge */
.badge.bg-warning.text-dark { color: #000 !important; }