/* FutChances Dark — Tema escuro
   Imports the base futchances theme and overrides only the
   semantic CSS custom properties for a dark color scheme.
   All structural CSS (layout, components, tables) is inherited. */

@import url('../futchances/style.css');

:root {
    /* ── UI Chrome (dark overrides) ── */
    --tema-texto: #e0e2e6;
    --tema-texto-secundario: #9ca3ab;
    --tema-fundo: #121416;
    --tema-fundo-cartao: #1a1d21;
    --tema-fundo-baixo: #16181c;
    --tema-fundo-alto: #2a2d32;
    --tema-borda: #3a3d42;
    --tema-erro: #f87171;

    /* ── Chart variables (brighter for dark bg) ── */
    --chart-aproveitamento-real: #8b95a0;
    --chart-aproveitamento-projecao: #3a3d42;
    --chart-gols-pro: #6dd5a0;
    --chart-gols-contra: #e88888;
    --chart-datalabel: #e0e2e6;

    /* ── Match probability RGB triplets (brighter for contrast) ── */
    --cor-favorito: 50, 180, 120;
    --cor-empate: 255, 210, 60;
    --cor-zebra: 240, 80, 90;

    /* ── Classification zone RGB triplets ── */
    --cor-zona-a: 50, 180, 120;
    --cor-zona-b: 60, 140, 255;
    --cor-zona-c: 50, 215, 250;
    --cor-zona-d: 255, 210, 60;
    --cor-zona-e: 240, 80, 90;

    /* ── Performance comparison RGB triplets ── */
    --cor-melhor: 50, 180, 120;
    --cor-pior: 240, 80, 90;
    --cor-igual: 255, 210, 60;

    /* ── DEPRECATED backward-compat ── */
    --stitch-primary: var(--tema-texto);
    --stitch-surface: var(--tema-fundo);
    --stitch-surface-low: var(--tema-fundo-baixo);
    --stitch-surface-card: var(--tema-fundo-cartao);
    --stitch-surface-high: var(--tema-fundo-alto);
    --stitch-secondary: var(--tema-texto-secundario);
    --stitch-outline: var(--tema-borda);
}

/* ── Classification zone table colors (higher opacity for dark bg) ── */
.table-zona-a { --bs-table-bg: rgba(var(--cor-zona-a), 0.30) !important; --bs-table-hover-bg: rgba(var(--cor-zona-a), 0.40) !important; }
.table-zona-b { --bs-table-bg: rgba(var(--cor-zona-b), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-zona-b), 0.38) !important; }
.table-zona-c { --bs-table-bg: rgba(var(--cor-zona-c), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-zona-c), 0.38) !important; }
.table-zona-d { --bs-table-bg: rgba(var(--cor-zona-d), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-zona-d), 0.38) !important; }
.table-zona-e { --bs-table-bg: rgba(var(--cor-zona-e), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-zona-e), 0.38) !important; }

/* Backward-compat aliases */
.table-success { --bs-table-bg: rgba(var(--cor-zona-a), 0.30) !important; --bs-table-hover-bg: rgba(var(--cor-zona-a), 0.40) !important; }
.table-primary { --bs-table-bg: rgba(var(--cor-zona-b), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-zona-b), 0.38) !important; }
.table-info    { --bs-table-bg: rgba(var(--cor-zona-c), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-zona-c), 0.38) !important; }
.table-warning { --bs-table-bg: rgba(var(--cor-zona-d), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-zona-d), 0.38) !important; }
.table-danger  { --bs-table-bg: rgba(var(--cor-zona-e), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-zona-e), 0.38) !important; }

/* ── Match probability table colors ── */
.table-favorito { --bs-table-bg: rgba(var(--cor-favorito), 0.30) !important; --bs-table-hover-bg: rgba(var(--cor-favorito), 0.40) !important; }
.table-empate   { --bs-table-bg: rgba(var(--cor-empate), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-empate), 0.38) !important; }
.table-zebra    { --bs-table-bg: rgba(var(--cor-zebra), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-zebra), 0.38) !important; }

/* ── Performance comparison table colors ── */
.table-melhor { --bs-table-bg: rgba(var(--cor-melhor), 0.30) !important; --bs-table-hover-bg: rgba(var(--cor-melhor), 0.40) !important; }
.table-pior   { --bs-table-bg: rgba(var(--cor-pior), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-pior), 0.38) !important; }
.table-igual  { --bs-table-bg: rgba(var(--cor-igual), 0.28) !important; --bs-table-hover-bg: rgba(var(--cor-igual), 0.38) !important; }

/* ── Probability card colors ── */
.prob-card-favorito { background-color: rgba(var(--cor-favorito), 0.30) !important; }
.prob-card-empate   { background-color: rgba(var(--cor-empate), 0.28) !important; }
.prob-card-zebra    { background-color: rgba(var(--cor-zebra), 0.28) !important; }

/* ── Score matrix background colors ── */
.bg-favorito { background-color: rgba(var(--cor-favorito), var(--bs-bg-opacity, 1)) !important; }
.bg-empate   { background-color: rgba(var(--cor-empate), var(--bs-bg-opacity, 1)) !important; }
.bg-zebra    { background-color: rgba(var(--cor-zebra), var(--bs-bg-opacity, 1)) !important; }

/* ── Body & global text ── */
body {
    background-color: var(--tema-fundo) !important;
    color: var(--tema-texto);
}

/* ── Navbar (darker, subtle glow) ── */
.navbar {
    background-color: #0a0c0e !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* ── Cards ── */
.card {
    background-color: var(--tema-fundo-cartao) !important;
    border-color: var(--tema-borda) !important;
}

.card-body {
    color: var(--tema-texto);
}

/* ── Links ── */
a.text-dark, .text-dark {
    color: var(--tema-texto) !important;
}

a.text-muted, .text-muted {
    color: var(--tema-texto-secundario) !important;
}

a.link-dark {
    color: var(--tema-texto) !important;
}

/* ── Tables ── */
.table {
    color: var(--tema-texto);
    --bs-table-bg: transparent;
    --bs-table-color: var(--tema-texto);
}

.table-dark {
    --bs-table-bg: #0a0c0e !important;
    --bs-table-color: #e0e2e6 !important;
    color: #e0e2e6 !important;
    background-color: #0a0c0e !important;
}

.table-dark th {
    color: #e0e2e6 !important;
    background-color: #0a0c0e !important;
    border-color: var(--tema-borda) !important;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--tema-borda);
}

/* ── Dropdown ── */
.dropdown-menu {
    background-color: var(--tema-fundo-cartao);
    border-color: var(--tema-borda);
}

.dropdown-item {
    color: var(--tema-texto);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--tema-fundo-alto);
    color: var(--tema-texto);
}

.dropdown-divider {
    border-color: var(--tema-borda);
}

/* ── Footer ── */
.footer {
    background-color: #0a0c0e !important;
    color: var(--tema-texto-secundario);
    border-top-color: var(--tema-borda) !important;
}

/* ── Section borders ── */
.pb-2.border-bottom {
    border-color: var(--tema-borda) !important;
}

/* ── Probability bar text in dark mode ── */
.prob-bar-segment span {
    text-shadow: none;
}

/* ── Breadcrumb ── */
.stitch-breadcrumb a {
    color: var(--tema-texto-secundario) !important;
}

.stitch-breadcrumb .separator {
    color: var(--tema-borda);
}

/* ── Score matrix: light header cells ── */
.bg-light {
    background-color: var(--tema-fundo-alto) !important;
    color: var(--tema-texto) !important;
}

/* ── Badges / chips (home page) ── */
.home-chip-active {
    background: var(--tema-texto) !important;
}

.home-chip-past {
    background: var(--tema-fundo-alto) !important;
    color: var(--tema-texto-secundario) !important;
}

/* ── Form controls (if any) ── */
.form-control, .form-select {
    background-color: var(--tema-fundo-cartao);
    color: var(--tema-texto);
    border-color: var(--tema-borda);
}

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--tema-fundo);
}

::-webkit-scrollbar-thumb {
    background: var(--tema-borda);
    border-radius: 4px;
}