/* ��� Google Fonts ��������������������������������������� */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
@import url('flag-icons.css');

/* ��� Design tokens ��������������������������������������� */
:root {
    --bg-base:        #0b1a0e;
    --bg-card:        #132b18;
    --bg-card-hover:  #1a3820;
    --bg-input:       #1a3421;
    --bg-header:      #0d2212;

    --border-card:    #2a4d32;
    --border-input:   #3a6647;

    --gold:           #d4a017;
    --gold-light:     #f5c842;

    --text-primary:   #f0f5f1;
    --text-secondary: #7aaa86;
    --text-muted-c:   #567a5f;

    --green-badge:    #16a34a;
    --orange-badge:   #d97706;
    --blue-badge:     #2563eb;
    --red-badge:      #dc2626;

    --bg-card-blue:   #0f1f35;
    --bg-header-blue: #0a1628;
    --border-blue:    #1e3a5f;

    --radius-card:    14px;
    --radius-btn:     10px;
    --radius-input:   8px;

    --shadow-card:    0 4px 20px rgba(0,0,0,0.45);
}

/* ��� Base ����������������������������������������������� */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    min-height: 100vh;
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
}

a { color: var(--gold-light); }
a:hover { color: var(--gold); }

/* ��� Navbar ���������������������������������������������� */
.navbar {
    background-color: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-card);
    padding: 0.6rem 0;
}
.navbar-brand {
    font-weight: 800;
    font-size: 1rem;
    color: var(--gold) !important;
    letter-spacing: 0.02em;
    text-decoration: none;
}
.navbar-brand:hover { opacity: 0.9; }
.ligabet-icon { height: 32px; width: 32px; flex-shrink: 0; }
.ligabet-text { font-family: 'Montserrat', sans-serif; font-size: 1.3rem; line-height: 1; }
.ligabet-liga { font-weight: 300; color: var(--text-primary); letter-spacing: 0.04em; }
.ligabet-bet  { font-weight: 800; color: var(--gold); letter-spacing: 0.01em; }
.nav-link { color: var(--text-secondary) !important; font-weight: 500; }
.nav-link:hover { color: var(--text-primary) !important; }
.navbar-toggler { border-color: var(--border-card); }
.navbar-toggler-icon { filter: invert(0.8); }

/* ��� Navbar buttons ��������������������������������������� */
.btn-nav {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.9rem;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-card);
    background: transparent;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 1.4;
}
.btn-nav:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,160,23,0.08);
    text-decoration: none;
}
.btn-nav-primary {
    background: var(--gold);
    border-color: var(--gold);
    color: #0b1a0e !important;
    font-weight: 700;
}
.btn-nav-primary:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    color: #0b1a0e !important;
}
.btn-nav-user {
    border-color: var(--border-input);
    color: var(--text-primary);
}
.btn-nav-user:hover {
    border-color: var(--gold);
    color: var(--gold);
}
.btn-nav-danger {
    border-color: #5a1f1f;
    color: #e57373;
}
.btn-nav-danger:hover {
    border-color: var(--red-badge);
    color: #fff;
    background: rgba(220,38,38,0.15);
}

/* ��� Cards ����������������������������������������������� */
.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
}
.card-header {
    background-color: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-card) !important;
    border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
    color: var(--text-primary);
    font-weight: 600;
    padding: 0.75rem 1rem;
}
.card-header h2,
.card-header h3,
.card-header h5 { color: var(--gold-light); margin: 0; }
.card-body { color: var(--text-primary); }
.card-title { color: var(--gold-light); font-weight: 700; }
.card-text, .card-text p { color: var(--text-secondary); }
.card-link { color: var(--gold-light) !important; font-weight: 500; }
.card-link:hover { color: var(--gold) !important; }
.card-body.border-bottom { border-bottom: 1px solid var(--border-card) !important; }

/* ��� Blue-toned card variant ������������������������������ */
.card-blue {
    background-color: var(--bg-card-blue) !important;
    border-color: var(--border-blue) !important;
}
.card-blue .card-header {
    background-color: var(--bg-header-blue) !important;
    border-bottom-color: var(--border-blue) !important;
}
.card-blue .accordion-item {
    background-color: var(--bg-card-blue) !important;
    border-color: var(--border-blue) !important;
}
.card-blue .accordion-button,
.card-blue .accordion-button:not(.collapsed) {
    background-color: var(--bg-header-blue) !important;
}
.card-blue .accordion-body {
    background-color: var(--bg-card-blue) !important;
}
.card-blue .card {
    background-color: #132034 !important;
    border-color: var(--border-blue) !important;
}
.card-blue .card .card-header {
    background-color: var(--bg-header-blue) !important;
    border-bottom-color: var(--border-blue) !important;
}
.card-blue .table thead th { background-color: var(--bg-header-blue); }
.card-blue .table td, .card-blue .table th { border-color: var(--border-blue) !important; }

/* ��� Accordion ������������������������������������������� */
.accordion-item {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden;
}
.accordion-button {
    background-color: var(--bg-header) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    background-color: var(--bg-header) !important;
    color: var(--gold-light) !important;
}
.accordion-button::after { filter: invert(0.8); }
.accordion-body { background-color: var(--bg-card); }

/* ��� Tables ����������������������������������������������� */
.table {
    color: var(--text-primary) !important;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    border-color: var(--border-card);
}
.table thead th {
    background-color: var(--bg-header);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-color: var(--border-card);
    padding: 0.6rem 0.75rem;
}
.table td, .table th { border-color: var(--border-card) !important; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,0.02) !important;
    color: var(--text-primary);
}
.table tbody tr:nth-of-type(1) td { background-color: rgba(212,160,23,0.18) !important; }
.table tbody tr:nth-of-type(2) td { background-color: rgba(180,180,180,0.10) !important; }
.table tbody tr:nth-of-type(3) td { background-color: rgba(176,100,50,0.14) !important; }
.table-row:nth-of-type(1) { background-color: rgba(212,160,23,0.18); }
.table-row:nth-of-type(2) { background-color: rgba(180,180,180,0.10); }
.table-row:nth-of-type(3) { background-color: rgba(176,100,50,0.14); }
#pts { font-weight: 800; color: var(--gold-light); }

/* ��� Buttons ��������������������������������������������� */
.btn { border-radius: var(--radius-btn) !important; font-weight: 600; letter-spacing: 0.02em; transition: all 0.18s ease; }
.btn-success { background-color: var(--green-badge) !important; border-color: var(--green-badge) !important; color: #fff !important; }
.btn-success:hover { background-color: #15803d !important; border-color: #15803d !important; }
.btn-primary { background-color: var(--gold) !important; border-color: var(--gold) !important; color: #0b1a0e !important; }
.btn-primary:hover { background-color: var(--gold-light) !important; border-color: var(--gold-light) !important; }
.btn-danger { background-color: var(--red-badge) !important; border-color: var(--red-badge) !important; color: #fff !important; }
.btn-light { background-color: rgba(255,255,255,0.08) !important; border-color: var(--border-card) !important; color: var(--text-primary) !important; }
.btn-light:hover { background-color: rgba(255,255,255,0.14) !important; }
.btn.nav-link { color: var(--text-secondary) !important; }
.btn.nav-link:hover { color: var(--text-primary) !important; }

/* ��� Forms / Inputs ��������������������������������������� */
.form-control, .form-select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--radius-input) !important;
    color: var(--text-primary) !important;
    transition: border-color 0.2s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(212,160,23,0.2) !important;
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}
.form-control::placeholder { color: var(--text-muted-c) !important; }
.form-control:disabled, .form-control[readonly] {
    background-color: rgba(255,255,255,0.04) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-card) !important;
}
.form-label { color: var(--text-secondary); font-weight: 500; }
.form-container { width: 25rem; max-width: 100%; }

/* ��� Badges ����������������������������������������������� */
.badge { border-radius: 20px !important; padding: 0.35em 0.75em !important; font-weight: 600; font-size: 0.75rem; }
.badge.bg-success { background-color: var(--green-badge) !important; }
.badge.bg-secondary { background-color: #374151 !important; }

/* ��� Bet score colors ������������������������������������� */
span.betscore3 { color: #4ade80; font-weight: 700; background: rgba(74,222,128,0.12); border-radius: 6px; padding: 1px 6px; }
span.betscore1 { color: #fbbf24; font-weight: 700; background: rgba(251,191,36,0.12); border-radius: 6px; padding: 1px 6px; }
span.betscore0 { color: #f87171; font-weight: 700; background: rgba(248,113,113,0.10); border-radius: 6px; padding: 1px 6px; }

/* ��� Pagination ������������������������������������������� */
.pagination { gap: 3px; }
.pagination .page-link {
    background-color: var(--bg-card-blue);
    border-color: var(--border-blue);
    color: var(--gold-light);
    border-radius: 6px !important;
    padding: 0.3rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color .15s, color .15s;
}
.pagination .page-link:hover {
    background-color: rgba(212,160,23,.18);
    border-color: var(--gold);
    color: #fff;
}
.pagination .page-item.active .page-link {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #0b1a0e;
    font-weight: 700;
}
.pagination .page-item.disabled .page-link {
    background-color: transparent;
    border-color: var(--border-blue);
    color: var(--text-muted-c);
    opacity: 0.45;
}

/* ��� List groups ������������������������������������������ */
.list-group-item { background-color: transparent !important; border-color: var(--border-card) !important; color: var(--text-primary); }
.list-group-item:hover { background-color: rgba(255,255,255,0.04) !important; }

/* ��� Alerts ���������������������������������������������� */
.alert { border-radius: var(--radius-card); border: 1px solid; }
.alert-success { background-color: rgba(22,163,74,0.15); border-color: #16a34a; color: #4ade80; }
.alert-danger  { background-color: rgba(220,38,38,0.15); border-color: #dc2626; color: #f87171; }
.alert-warning { background-color: rgba(217,119,6,0.15); border-color: #d97706; color: #fbbf24; }

/* ��� Flags ����������������������������������������������� */
.fi { border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }

/* ��� Links ����������������������������������������������� */
.link, .link-dark { color: var(--text-primary) !important; text-decoration: none; }
.link:hover, .link-dark:hover { color: var(--gold-light) !important; }
a.text-decoration-none { color: var(--text-primary); }
a.text-decoration-none:hover { color: var(--gold-light); }

/* ��� Misc ������������������������������������������������� */
.no-break a { display: block; }
.text-muted { color: var(--text-muted-c) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.border-bottom { border-color: var(--border-card) !important; }
.h3.d-inline { font-weight: 800; font-size: 1.3rem; }
.spinner-border { color: var(--gold) !important; }
.home-flag { background-repeat: no-repeat; background-position: left, right; background-size: contain; }

/* ��� Responsive ������������������������������������������� */
@media (max-width: 576px) {
    html, body { width: 100%; overflow-x: hidden; }
    .container, .container-fluid { width: 100% !important; max-width: 100% !important; padding: 0 8px; }
    .card { border-radius: 10px !important; }
    .h3.d-inline { font-size: 1rem; }
    .card-header { font-size: 0.85rem; }
}