/* ============================================================
   UFC Predict — v3 theme overlay
   Loaded AFTER style.css: retunes the design tokens and adds the
   components introduced with the multi-model UI (model switcher,
   consensus chips, probability bars, SHAP breakdown, leaderboards).

   Design language:
   - near-black neutrals, hairline borders, generous whitespace
   - red corner (fighter 1) vs blue corner (fighter 2) — authentic
     to the sport and used consistently in every comparison
   ============================================================ */

:root {
    --bg-primary: #0a0c10;
    --bg-secondary: #0f1319;
    --bg-elevated: #131820;
    --bg-card: #141a23;
    --bg-hover: #1a2129;
    --border-color: #222b37;
    --border-subtle: #1a212b;

    --text-primary: #e8ecf1;
    --text-secondary: #a8b3c0;
    --text-muted: #8391a2;
    --text-dim: #5b6878;

    --accent-primary: #e8563f;          /* warm red — brand accent */
    --accent-primary-hover: #f0684f;
    --accent-primary-dim: rgba(232, 86, 63, 0.14);
    --accent-secondary: #4f8ef7;
    --accent-secondary-dim: rgba(79, 142, 247, 0.14);

    --success: #34d399;
    --success-dim: rgba(52, 211, 153, 0.13);
    --warning: #fbbf24;
    --warning-dim: rgba(251, 191, 36, 0.13);
    --info: #4f8ef7;
    --info-dim: rgba(79, 142, 247, 0.13);
    --danger: #f87171;
    --danger-dim: rgba(248, 113, 113, 0.13);

    /* Corners */
    --red-corner: #e8563f;
    --red-corner-dim: rgba(232, 86, 63, 0.16);
    --red-corner-soft: rgba(232, 86, 63, 0.55);
    --blue-corner: #4f8ef7;
    --blue-corner-dim: rgba(79, 142, 247, 0.16);
    --blue-corner-soft: rgba(79, 142, 247, 0.55);

    --radius-md: 10px;
    --radius-lg: 14px;
}

body {
    font-feature-settings: "tnum" 1;   /* tabular numerals for stats */
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(79, 142, 247, 0.05), transparent 60%),
        radial-gradient(900px 420px at 0% -10%, rgba(232, 86, 63, 0.05), transparent 60%),
        var(--bg-primary);
    background-attachment: fixed;
}

/* Old fighter-1/2 bar colors → corner colors */
.fighter-1-bar { background: linear-gradient(90deg, var(--red-corner-soft), var(--red-corner)) !important; }
.fighter-2-bar { background: linear-gradient(90deg, var(--blue-corner-soft), var(--blue-corner)) !important; }
.diff-badge.fighter-1-advantage { background: var(--red-corner-dim) !important; color: var(--red-corner) !important; }
.diff-badge.fighter-2-advantage { background: var(--blue-corner-dim) !important; color: var(--blue-corner) !important; }

/* ---------- toolbar: model switcher + filters ---------- */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.model-tabs {
    display: inline-flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    flex-wrap: wrap;
}
.model-tab {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: all 120ms ease;
}
.model-tab:hover { color: var(--text-primary); }
.model-tab.active {
    background: var(--bg-hover);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--border-color);
}
.model-tab .dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    margin-right: 7px;
    vertical-align: 1px;
    opacity: 0;
    transition: opacity 120ms ease;
}
.model-tab.active .dot { opacity: 1; }

.seg-control {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.seg-control a {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    background: var(--bg-secondary);
}
.seg-control a.active {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.seg-control a + a { border-left: 1px solid var(--border-color); }

/* ---------- fight list ---------- */
.event-group { margin-bottom: var(--space-8); }
.event-group-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: 0 var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-3);
}
.event-group-header h2 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
}
.event-group-header .event-date {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fight-row {
    display: grid;
    grid-template-columns: 1fr 190px 130px 96px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 120ms ease, background 120ms ease;
}
.fight-row:hover { border-color: var(--border-color); background: var(--bg-hover); color: var(--text-primary); }

.fight-row .matchup { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fight-row .fighter-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fight-row .fighter-line .name {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fight-row .fighter-line.picked .name { color: var(--text-primary); }
.fight-row .fighter-line:not(.picked) .name { color: var(--text-muted); font-weight: 500; }
.corner-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.corner-dot.red { background: var(--red-corner); }
.corner-dot.blue { background: var(--blue-corner); }
.pick-check { color: var(--success); font-size: 0.7rem; flex: none; }

.fight-row .wc-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
}

/* dual probability bar */
.prob-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-secondary);
}
.prob-bar .p1 { background: var(--red-corner); }
.prob-bar .p2 { background: var(--blue-corner); }
.prob-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 4px;
}
.prob-labels .l1 { color: var(--red-corner); }
.prob-labels .l2 { color: var(--blue-corner); }

.consensus-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    white-space: nowrap;
}
.consensus-chip.unanimous { color: var(--success); border-color: rgba(52, 211, 153, 0.25); background: var(--success-dim); }
.consensus-chip.split { color: var(--warning); border-color: rgba(251, 191, 36, 0.25); background: var(--warning-dim); }

.conf-pill {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    text-align: center;
    min-width: 64px;
}
.conf-pill.high { background: var(--success-dim); color: var(--success); }
.conf-pill.medium { background: var(--warning-dim); color: var(--warning); }
.conf-pill.low { background: var(--bg-secondary); color: var(--text-muted); }

/* "Thin UFC data" badge — see SHOW_LOW_DATA_BADGE in web_app.py */
.thin-data-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--warning);
    background: var(--warning-dim);
    border: 1px solid rgba(251, 191, 36, 0.25);
    white-space: nowrap;
}

@media (max-width: 860px) {
    .fight-row { grid-template-columns: 1fr 110px; }
    .fight-row .prob-cell { display: none; }
    .fight-row .consensus-cell { display: none; }
}

/* ---------- fight detail: model comparison strip ---------- */
.model-compare {
    display: grid;
    gap: 8px;
}
.model-compare-row {
    display: grid;
    grid-template-columns: 150px 1fr 84px;
    gap: var(--space-4);
    align-items: center;
    padding: 10px var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 120ms ease;
}
.model-compare-row:hover { border-color: var(--border-color); color: var(--text-primary); }
.model-compare-row.selected { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary-dim); }
.model-compare-row .model-name { font-weight: 700; font-size: 0.86rem; color: var(--text-primary); }
.model-compare-row .model-name small { display: block; color: var(--text-dim); font-weight: 500; font-size: 0.7rem; }
.model-compare-row .pick { font-size: 0.78rem; font-weight: 700; text-align: right; }
.model-compare-row .pick.f1 { color: var(--red-corner); }
.model-compare-row .pick.f2 { color: var(--blue-corner); }

/* ---------- SHAP breakdown ---------- */
.shap-summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.shap-summary .side-label { font-size: 0.82rem; font-weight: 800; width: 160px; }
.shap-summary .side-label.f1 { color: var(--red-corner); text-align: right; }
.shap-summary .side-label.f2 { color: var(--blue-corner); }
.shap-summary .prob-bar { flex: 1; height: 12px; border-radius: 6px; }

.shap-list { display: flex; flex-direction: column; gap: 4px; }
.shap-item {
    display: grid;
    grid-template-columns: minmax(180px, 300px) 1fr;
    gap: var(--space-4);
    align-items: center;
    padding: 7px var(--space-3);
    border-radius: 8px;
}
.shap-item:hover { background: var(--bg-hover); }
.shap-item .meta { min-width: 0; }
.shap-item .meta .label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.shap-item .meta .sub {
    font-size: 0.72rem;
    color: var(--text-dim);
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.shap-item .meta .sub .owner { font-weight: 700; }
.shap-item .meta .sub .owner.f1 { color: var(--red-corner); }
.shap-item .meta .sub .owner.f2 { color: var(--blue-corner); }
.shap-item .meta .sub .val { color: var(--text-muted); font-weight: 600; }

.shap-track {
    position: relative;
    height: 22px;
    background: var(--bg-secondary);
    border-radius: 6px;
    overflow: hidden;
}
.shap-track::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--border-color);
}
.shap-fill {
    position: absolute;
    top: 3px; bottom: 3px;
    border-radius: 4px;
}
.shap-fill.f1 { right: 50%; background: linear-gradient(270deg, var(--red-corner-soft), var(--red-corner)); }
.shap-fill.f2 { left: 50%; background: linear-gradient(90deg, var(--blue-corner-soft), var(--blue-corner)); }
.shap-impact {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--text-muted);
}
.shap-impact.f1 { left: calc(50% + 8px); }
.shap-impact.f2 { right: calc(50% + 8px); }

.shap-axis {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-3);
    padding: 0 var(--space-3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.shap-axis .f1 { color: var(--red-corner); }
.shap-axis .f2 { color: var(--blue-corner); }

@media (max-width: 700px) {
    .shap-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- leaderboards / metric tables ---------- */
.metric-table { width: 100%; border-collapse: collapse; }
.metric-table th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
    padding: 10px var(--space-4);
    border-bottom: 1px solid var(--border-color);
}
.metric-table td {
    padding: 12px var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.metric-table tr:last-child td { border-bottom: none; }
.metric-table td.num, .metric-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.metric-table tr.selected-row td { background: var(--accent-primary-dim); }
.best-tag {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--success);
    background: var(--success-dim);
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: 8px;
    vertical-align: 1px;
}

/* importance bars */
.imp-row {
    display: grid;
    grid-template-columns: minmax(200px, 340px) 1fr 64px;
    gap: var(--space-4);
    align-items: center;
    padding: 6px var(--space-3);
    border-radius: 8px;
}
.imp-row:hover { background: var(--bg-hover); }
.imp-row .label { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); }
.imp-row .bar { height: 10px; background: var(--bg-secondary); border-radius: 5px; overflow: hidden; }
.imp-row .bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), #f59e0b);
    border-radius: 5px;
}
.imp-row .num { font-size: 0.78rem; color: var(--text-muted); text-align: right; font-weight: 700; }

/* calibration */
.cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.cal-cell {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}
.cal-cell .bucket { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: var(--text-dim); text-transform: uppercase; }
.cal-cell .acc { font-size: 1.6rem; font-weight: 800; margin: 4px 0; }
.cal-cell .acc.good { color: var(--success); }
.cal-cell .acc.ok { color: var(--warning); }
.cal-cell .acc.bad { color: var(--danger); }
.cal-cell .n { font-size: 0.72rem; color: var(--text-dim); }
.cal-cell .exp { font-size: 0.72rem; color: var(--text-muted); }

/* ---------- outcome model: "How It Ends" card ---------- */
:root {
    --method-decision: #94a3b8;
    --method-decision-dim: rgba(148, 163, 184, 0.15);
    --method-ko: #f59e0b;
    --method-ko-dim: rgba(245, 158, 11, 0.15);
    --method-sub: #a78bfa;
    --method-sub-dim: rgba(167, 139, 250, 0.15);
}

.outcome-summary {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.outcome-pill {
    flex: 1;
    min-width: 140px;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    text-align: center;
}
.outcome-pill .pct { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.outcome-pill .lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-top: 4px; }
.outcome-pill.decision .pct { color: var(--method-decision); }
.outcome-pill.ko .pct { color: var(--method-ko); }
.outcome-pill.sub .pct { color: var(--method-sub); }

.outcome-bar-row { margin-bottom: var(--space-3); }
.outcome-bar-row .row-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-primary);
}
.outcome-bar-track {
    height: 10px;
    background: var(--bg-secondary);
    border-radius: 5px;
    overflow: hidden;
}
.outcome-bar-fill { display: block; height: 100%; border-radius: 5px; }
.outcome-bar-fill.decision { background: linear-gradient(90deg, rgba(148,163,184,0.5), var(--method-decision)); }
.outcome-bar-fill.ko { background: linear-gradient(90deg, rgba(245,158,11,0.5), var(--method-ko)); }
.outcome-bar-fill.sub { background: linear-gradient(90deg, rgba(167,139,250,0.5), var(--method-sub)); }
.outcome-bar-fill.round { background: linear-gradient(90deg, var(--accent-primary-hover), var(--accent-primary)); }

.outcome-subsection {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
}
.outcome-subsection h6 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: var(--space-3);
}

/* generic page polish */
/* Bootstrap's .card sets its own (dark, light-theme) text color and neither
   style.css nor this file overrode it — every card was silently inheriting
   Bootstrap's default instead of the theme's light text unless some more
   specific descendant rule happened to set color explicitly. Fix at the
   root so this class of bug can't recur in new card content. */
.card { border-radius: var(--radius-lg); color: var(--text-primary); }
.page-subtitle { color: var(--text-muted); }
.section-note { font-size: 0.78rem; color: var(--text-dim); margin-top: var(--space-3); line-height: 1.5; }