@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* ============================================================
   CSB — sleek betting dashboard design system
   Layered on Bootstrap 5.3 by remapping its CSS variables.
   ============================================================ */

/* ---- Design tokens : light (default) ---- */
:root,
[data-bs-theme="light"] {
    --csb-bg: #f6f7f9;
    --csb-surface: #ffffff;
    --csb-surface-2: #eef1f4;
    --csb-border: #e2e6ea;
    --csb-text: #1b2027;
    --csb-text-muted: #5c6773;
    /* Brand accent = the Player 1 blue, so existing bg-primary/text-primary
       (used for the P1 side everywhere) stays correct and the UI reads cohesively. */
    --csb-accent: #2563eb;
    --csb-accent-rgb: 37, 99, 235;
    --csb-p1: #2563eb;
    --csb-p1-rgb: 37, 99, 235;
    --csb-p2: #dc2626;
    --csb-p2-rgb: 220, 38, 38;
    --csb-pos: #16a34a;
    --csb-neg: #dc2626;
    --csb-live: #10b981;
    --csb-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .06);

    /* Bootstrap variable remap */
    --bs-body-bg: var(--csb-bg);
    --bs-body-color: var(--csb-text);
    --bs-emphasis-color: var(--csb-text);
    --bs-secondary-color: var(--csb-text-muted);
    --bs-secondary-bg: var(--csb-surface-2);
    --bs-tertiary-bg: var(--csb-surface-2);
    --bs-border-color: var(--csb-border);
    --bs-primary: var(--csb-accent);
    --bs-primary-rgb: var(--csb-accent-rgb);
    --bs-link-color: var(--csb-accent);
    --bs-link-color-rgb: var(--csb-accent-rgb);
    --bs-link-hover-color: var(--csb-accent);
    --bs-card-bg: var(--csb-surface);
    --bs-card-border-color: var(--csb-border);
    --bs-card-cap-bg: var(--csb-surface-2);
    --bs-table-border-color: var(--csb-border);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Design tokens : dark (default theme for this app) ---- */
[data-bs-theme="dark"] {
    --csb-bg: #0e1116;
    --csb-surface: #161b22;
    --csb-surface-2: #1c232c;
    --csb-border: #29313b;
    --csb-text: #e6edf3;
    --csb-text-muted: #9aa7b5; /* kept >= 4.5:1 on --csb-bg for WCAG AA */
    --csb-accent: #818cf8;
    --csb-accent-rgb: 129, 140, 248;
    --csb-p1: #3b82f6;
    --csb-p1-rgb: 59, 130, 246;
    --csb-p2: #ef4444;
    --csb-p2-rgb: 239, 68, 68;
    --csb-pos: #22c55e;
    --csb-neg: #f87171;
    --csb-live: #34d399;
    --csb-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .35);

    --bs-body-bg: var(--csb-bg);
    --bs-body-color: var(--csb-text);
    --bs-emphasis-color: var(--csb-text);
    --bs-secondary-color: var(--csb-text-muted);
    --bs-secondary-bg: var(--csb-surface-2);
    --bs-tertiary-bg: var(--csb-surface-2);
    --bs-border-color: var(--csb-border);
    --bs-primary: var(--csb-accent);
    --bs-primary-rgb: var(--csb-accent-rgb);
    --bs-link-color: var(--csb-accent);
    --bs-link-color-rgb: var(--csb-accent-rgb);
    --bs-link-hover-color: #a5b4fc;
    --bs-card-bg: var(--csb-surface);
    --bs-card-border-color: var(--csb-border);
    --bs-card-cap-bg: var(--csb-surface-2);
    --bs-table-border-color: var(--csb-border);
}

/* ---- Base ---- */
html, body {
    font-family: var(--bs-body-font-family);
}

body {
    background-color: var(--csb-bg);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.01em;
}

a {
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

/* Skip-to-content link: visually hidden until keyboard-focused. */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    padding: .5rem 1rem;
    background: var(--csb-accent);
    color: #fff;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    left: 0;
    text-decoration: underline;
}

/* Tabular figures for all data tables + an opt-in utility. */
table,
.tnum {
    font-variant-numeric: tabular-nums;
}

/* ---- Controls ---- */
.btn {
    border-radius: 8px;
}

.btn-primary {
    --bs-btn-bg: var(--csb-accent);
    --bs-btn-border-color: var(--csb-accent);
    --bs-btn-hover-bg: rgba(var(--csb-accent-rgb), .88);
    --bs-btn-hover-border-color: rgba(var(--csb-accent-rgb), .88);
    --bs-btn-active-bg: rgba(var(--csb-accent-rgb), .92);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

.form-control,
.form-select {
    background-color: var(--csb-surface);
    border-color: var(--csb-border);
    color: var(--csb-text);
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--csb-accent-rgb), .6);
    box-shadow: 0 0 0 .2rem rgba(var(--csb-accent-rgb), .2);
}

:focus-visible {
    outline: 2px solid rgba(var(--csb-accent-rgb), .55);
    outline-offset: 2px;
}

/* ---- Cards / surfaces ---- */
.card {
    border-radius: 12px;
    box-shadow: var(--csb-shadow);
}

.csb-card {
    background-color: var(--csb-surface);
    border: 1px solid var(--csb-border);
    border-radius: 12px;
    box-shadow: var(--csb-shadow);
}

/* ---- Tables ---- */
.table {
    --bs-table-hover-bg: rgba(var(--csb-accent-rgb), .06);
}

.table-head th {
    background-color: var(--csb-surface-2);
    color: var(--csb-text-muted);
    border-bottom-color: var(--csb-border);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.table-responsive thead.table-head th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Sortable column header: a real button (keyboard accessible) that inherits the header look. */
.th-sort {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.th-sort:hover {
    color: var(--csb-text);
    text-decoration: underline;
}

/* ---- KPI stat tile ---- */
.stat {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.stat-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--csb-text-muted);
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* ---- Pills / chips ---- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    background-color: var(--csb-surface-2);
    color: var(--csb-text);
    border: 1px solid var(--csb-border);
}

.pill-accent { background-color: rgba(var(--csb-accent-rgb), .14); border-color: rgba(var(--csb-accent-rgb), .35); color: var(--csb-accent); }
.pill-pos    { color: var(--csb-pos); border-color: rgba(34, 197, 94, .4); }
.pill-neg    { color: var(--csb-neg); border-color: rgba(248, 113, 113, .4); }

/* ---- Fighter matchup (the core screen) ---- */
.matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: stretch;
}

.matchup-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--csb-text-muted);
    font-size: 1.4rem;
}

.fighter-card {
    border: 1px solid var(--csb-border);
    border-radius: 12px;
    background-color: var(--csb-surface);
    overflow: hidden;
}

.fighter-card.p1 { border-top: 3px solid var(--csb-p1); }
.fighter-card.p2 { border-top: 3px solid var(--csb-p2); }
.fighter-card.win { box-shadow: 0 0 0 2px rgba(245, 197, 24, .55); }

.fighter-name.p1 { color: var(--csb-p1); }
.fighter-name.p2 { color: var(--csb-p2); }

@media (max-width: 575.98px) {
    .matchup { grid-template-columns: 1fr; }
    .matchup-vs { padding: .25rem 0; }
}

/* ---- Odds / pool split bar ---- */
.odds-bar {
    display: flex;
    height: 1.4rem;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--csb-surface-2);
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
}

.odds-bar .seg-p1 { background-color: var(--csb-p1); display: flex; align-items: center; padding: 0 .5rem; white-space: nowrap; }
.odds-bar .seg-p2 { background-color: var(--csb-p2); display: flex; align-items: center; justify-content: flex-end; padding: 0 .5rem; white-space: nowrap; }

/* ---- Live connection dot ---- */
.conn-dot {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-block;
    background-color: #888;
}

.conn-connected    { background-color: var(--csb-live); box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
.conn-disconnected { background-color: var(--csb-neg); }
.conn-reconnecting { background-color: #f1c40f; animation: conn-pulse 1s ease-in-out infinite; }

@keyframes conn-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}

/* ---- App shell ---- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--csb-bg);
}

.app-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .55rem 1.25rem;
    border-bottom: 1px solid var(--csb-border);
}

.app-bar .app-search {
    max-width: 26rem;
    flex: 1 1 auto;
}

/* Live match ticker (was the heavy navy bar) */
.match-bar {
    background-color: var(--csb-surface);
    color: var(--csb-text);
    border-bottom: 1px solid var(--csb-border);
    font-size: .9rem;
    cursor: pointer;
}

.match-bar:hover {
    background-color: var(--csb-surface-2);
}

/* The bar is a plain link (keyboard accessible); keep it looking like a bar, not a link. */
a.match-bar,
a.match-bar:hover,
a.match-bar:focus-visible {
    color: var(--csb-text);
    text-decoration: none;
}

.match-bar-player {
    color: var(--csb-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

.match-bar-progress {
    border: 1px solid var(--csb-border);
}

/* Small color swatch used in chart legends. */
.legend-dot {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    display: inline-block;
    margin-right: .3rem;
}

/* ---- Skeleton loading ---- */
.skeleton-line {
    height: 1rem;
    margin: .55rem 0;
    border-radius: .25rem;
    background: linear-gradient(90deg, var(--csb-surface-2) 25%, var(--csb-border) 37%, var(--csb-surface-2) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

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

/* ---- Scrollbars ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background-color: var(--csb-border); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--csb-text-muted); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Validation / framework error UI ---- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: red; }

#blazor-error-ui {
    background: var(--csb-surface);
    color: var(--csb-text);
    border-top: 1px solid var(--csb-border);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .conn-reconnecting,
    .skeleton-line {
        animation: none;
    }
}

/* ---- Unauthenticated splash (whole app is behind sign-in) ----
   Fixed full-viewport cover so no app chrome shows behind it. */
.auth-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--csb-bg);
}

.auth-splash-inner {
    text-align: center;
}

.auth-splash-brand {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--csb-text);
    margin-bottom: 1.75rem;
}

/* ---- Watchlisted player highlight (bettor table on live/match pages) ---- */
.table > tbody > tr.watched-bettor > td {
    background: rgba(var(--csb-accent-rgb), 0.14);
    box-shadow: inset 3px 0 0 var(--csb-accent);
}

.table > tbody > tr.watched-bettor > td:first-child a {
    font-weight: 700;
    color: var(--csb-accent);
}

/* ---- Mobile card layout for wide tables (.table-cards) ----
   On phones the widest tables (match history, backtest matches) become stacked cards:
   the header row hides and each cell renders as a "label: value" line, with the label
   pulled from the cell's data-label attribute. Cells with an empty data-label render
   value-only (e.g. the View button). Uses the .csb-card surface tokens. */
@media (max-width: 576px) {
    .table-cards thead {
        display: none;
    }

    .table-cards tbody tr {
        display: block;
        background-color: var(--csb-surface);
        border: 1px solid var(--csb-border);
        border-radius: 12px;
        box-shadow: var(--csb-shadow);
        margin: 0 .25rem .6rem;
        padding: .35rem .75rem;
    }

    .table-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        border: 0;
        padding: .25rem 0;
        text-align: right;
    }

    .table-cards tbody td::before {
        content: attr(data-label);
        color: var(--csb-text-muted);
        font-size: .78em;
        text-transform: uppercase;
        letter-spacing: .04em;
        flex-shrink: 0;
    }

    /* Keep the pool split bar readable at full card width. */
    .table-cards tbody td .progress {
        min-width: 7rem;
    }
}

/* ---- Expandable strategy list (About page) — native <details>, no JS ---- */
.strategy-item {
    border: 1px solid var(--csb-border);
    border-radius: .5rem;
    padding: .5rem .75rem;
    margin-bottom: .4rem;
    background-color: var(--csb-surface);
}
.strategy-item > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    list-style: none;            /* hide the default disclosure triangle; custom chevron below */
}
.strategy-item > summary::-webkit-details-marker { display: none; }
.strategy-item > summary::before {
    content: "\25B8";            /* ▸ */
    color: var(--csb-text-muted);
    transition: transform .15s ease;
}
.strategy-item[open] > summary::before { transform: rotate(90deg); }
.strategy-item[open] { box-shadow: var(--csb-shadow); }
.strategy-item summary::-moz-list-bullet { list-style-type: none; }

/* ---- Multi-line chart (Watchlist player profit-over-time comparison) ---- */
.mlc-plot { position: relative; width: 100%; }
/* Interactive plot: drag left-to-right to zoom into a period (a JS marquee handles the drag). */
.mlc-plot-interactive { cursor: crosshair; touch-action: none; user-select: none; }
.mlc-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mlc-zero { stroke: var(--csb-text-muted); stroke-opacity: .55; stroke-dasharray: 4 4; stroke-width: 1; }
.mlc-ylab {
    position: absolute;
    left: 0;
    font-size: .72rem;
    color: var(--csb-text-muted);
    background: var(--bs-card-bg);
    padding: 0 .25rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;   /* never intercept the zoom drag */
}
.mlc-ymax { top: 0; }
.mlc-ymin { bottom: 0; }
/* The drag-selection rectangle, created/positioned by csbChartBrush during a drag. */
.mlc-marquee {
    position: absolute; top: 0; bottom: 0;
    background: rgba(var(--csb-accent-rgb), .18);
    border-left: 1px solid rgb(var(--csb-accent-rgb));
    border-right: 1px solid rgb(var(--csb-accent-rgb));
    pointer-events: none;
}
.mlc-zoombar { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-bottom: .35rem; }
.mlc-zoomrange { font-size: .72rem; color: var(--csb-text-muted); font-variant-numeric: tabular-nums; }
.mlc-reset {
    background: none; border: 1px solid var(--csb-text-muted);
    color: var(--csb-text-muted); border-radius: 5px;
    font-size: .72rem; line-height: 1; padding: .2rem .5rem; cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.mlc-reset:hover { background: rgba(var(--csb-accent-rgb), .12); color: var(--bs-body-color); border-color: rgb(var(--csb-accent-rgb)); }
.mlc-xaxis { display: flex; justify-content: space-between; align-items: baseline; font-size: .72rem; color: var(--csb-text-muted); margin-top: .15rem; }
.mlc-zoomhint { font-size: .68rem; opacity: .7; }

/* Hover readout: vertical crosshair, a dot per line, and a value tooltip (all created by
   csbChartHover; none intercept pointer events so the brush drag still works). */
.mlc-crosshair {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background: var(--csb-text-muted); opacity: .5; pointer-events: none;
}
.mlc-dot {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px var(--bs-card-bg);
    pointer-events: none;
}
.mlc-tooltip {
    position: absolute; z-index: 5; pointer-events: none;
    background: var(--bs-card-bg); color: var(--bs-body-color);
    border: 1px solid rgba(var(--csb-accent-rgb), .35);
    border-radius: 6px; padding: .4rem .55rem;
    font-size: .78rem; line-height: 1.3; min-width: 8rem;
    box-shadow: var(--csb-shadow);
}
.mlc-tip-head { font-size: .7rem; color: var(--csb-text-muted); margin-bottom: .2rem; }
.mlc-tip-row { display: flex; align-items: center; gap: .4rem; }
.mlc-tip-swatch { width: .7rem; height: .7rem; border-radius: .2rem; flex-shrink: 0; }
.mlc-tip-name { flex: 1 1 auto; white-space: nowrap; }
.mlc-tip-val { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: .75rem; }
.mlc-legend { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-top: .65rem; font-size: .85rem; }
/* Legend entries are toggle buttons — click to hide/show a line (the chart then rescales). */
.mlc-legend-item {
    display: inline-flex; align-items: center; gap: .4rem;
    background: none; border: 0; margin: 0; padding: .15rem .4rem;
    font: inherit; color: inherit; cursor: pointer; line-height: 1.2;
    border-radius: 5px;
    transition: background-color .12s ease, opacity .12s ease;
}
.mlc-legend-item:hover { background: rgba(var(--csb-accent-rgb), .12); }
.mlc-legend-item:focus-visible { outline: 2px solid rgb(var(--csb-accent-rgb)); outline-offset: 1px; }
.mlc-legend-item.mlc-hidden { opacity: .5; }
.mlc-legend-item.mlc-hidden .mlc-legend-name { text-decoration: line-through; }
.mlc-swatch { width: .8rem; height: .8rem; border-radius: .2rem; border: 1.5px solid transparent; display: inline-block; flex-shrink: 0; box-sizing: border-box; }
.mlc-empty { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1rem; color: var(--csb-text-muted); font-size: .85rem; }