/* app.css — PlumbStrikez v2 component skin.
   Consumes tokens.css. Bootstrap 5.3 (self-hosted) provides grid/utilities;
   everything visible is restyled here. Pages opt in by extending
   base_v2.html — old pages keep style.css until their rollout wave. */

/* ================= Base ================= */
body.v2 {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}
.v2 a { color: var(--brand-cyan); text-decoration: none; }
.v2 a:hover { color: var(--brand-green); }

/* Tabular numerals everywhere data lives */
.v2 .num, .v2 table, .v2 .odds-chip { font-variant-numeric: tabular-nums; }

/* Section label / eyebrow */
.v2 .eyebrow {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    color: var(--text-dim);
}

/* ================= Top nav ================= */
/* Change/status banners (showAlert) float over the page under the sticky
   nav instead of sitting in the flow and pushing everything down. */
#alert-container {
    position: fixed; top: 64px; right: 12px; z-index: 1080;
    width: min(440px, calc(100vw - 24px)); pointer-events: none;
    display: grid;   /* every banner in the same cell: they overlap, newest on top */
}
#alert-container .alert {
    grid-area: 1 / 1; margin: 0; pointer-events: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: transform .15s, opacity .15s;
}
/* older banners peek out below the newest, like a deck of cards */
#alert-container .alert:nth-last-child(2) { transform: translateY(8px) scale(.985); opacity: .9; }
#alert-container .alert:nth-last-child(3) { transform: translateY(16px) scale(.97); opacity: .75; }
.v2 .topnav {
    background: rgba(17, 23, 34, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.v2 .topnav .navbar-brand .wordmark {
    font-family: var(--font-brand);
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 3px;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.v2 .topnav .nav-link {
    color: var(--text-dim);
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .8rem;
    padding: .65rem .9rem;
    border-bottom: 2px solid transparent;
}
.v2 .topnav .nav-link:hover { color: var(--text); }
.v2 .topnav .nav-link.active {
    color: var(--brand-green);
    border-bottom-color: var(--brand-green);
}
.v2 .topnav .dropdown-menu {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
}
.v2 .topnav .dropdown-item { color: var(--text-dim); font-size: .85rem; }
.v2 .topnav .dropdown-item:hover { background: var(--surface-3); color: var(--text); }
.v2 .topnav .dropdown-item.active { background: transparent; color: var(--brand-green); }

/* ================= Page header ================= */
.v2 .page-header { margin: var(--space-5) 0 var(--space-4); }
.v2 .page-header h1 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}
.v2 .page-header .subtitle { color: var(--text-dim); font-size: .82rem; }

/* ================= Filter chips ================= */
.v2 .chip-row {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;            /* phones: swipe the row */
    padding-bottom: 2px;
    scrollbar-width: none;
}
.v2 .chip-row::-webkit-scrollbar { display: none; }
.v2 .chip {
    flex: 0 0 auto;
    padding: .32rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .12s, color .12s, background .12s;
}
.v2 .chip:hover { border-color: var(--brand-cyan); color: var(--text); }
.v2 .chip.active {
    background: rgba(0, 255, 136, .1);
    border-color: var(--brand-green);
    color: var(--brand-green);
}

/* ================= Market cards ================= */
.v2 .market-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    display: block;
    color: var(--text);
    transition: border-color .12s, transform .12s;
    overflow: hidden;
}
a.market-card:hover {
    border-color: var(--brand-green);
    transform: translateY(-2px);
    color: var(--text);
}
.v2 .market-card .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) 0;
}
.v2 .market-card .event-name { font-weight: 700; font-size: .95rem; }
.v2 .market-card .event-time { color: var(--text-dim); font-size: .76rem; white-space: nowrap; }
.v2 .market-card .card-body-v2 { padding: var(--space-2) var(--space-4) var(--space-3); }
.v2 .market-card .card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: .76rem;
}

/* Selection row inside a market card: name | odds chip | model | edge */
.v2 .sel-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: .3rem 0;
}
.v2 .sel-row + .sel-row { border-top: 1px solid var(--border); }
.v2 .sel-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
}
.v2 .sel-line { color: var(--text-dim); font-size: .78rem; }

/* The sportsbook signature: odds chip */
.v2 .odds-chip {
    flex: 0 0 auto;
    min-width: 3.6rem;
    text-align: center;
    padding: .3rem .5rem;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--odds);
    font-weight: 700;
    font-size: .9rem;
    transition: border-color .12s, box-shadow .12s;
}
a .odds-chip:hover, .v2 .odds-chip:hover { border-color: var(--brand-cyan); }
.v2 .odds-chip.empty { color: var(--text-faint); font-weight: 400; }

/* Model % + edge badges next to the chip */
.v2 .model-pct { flex: 0 0 auto; width: 3.2rem; text-align: right; font-size: .8rem; color: var(--brand-cyan); }
.v2 .edge-pill {
    flex: 0 0 auto;
    width: 3.6rem;
    text-align: right;
    font-size: .8rem;
    font-weight: 700;
}
.v2 .edge-pos { color: var(--edge-pos); }
.v2 .edge-neg { color: var(--edge-neg); }
.v2 .muted { color: var(--text-faint); }

/* ================= Status bar ================= */
.v2 .status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .45rem var(--space-3);
    font-size: .78rem;
    color: var(--text-dim);
}
.v2 .status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: .35rem;
    background: var(--text-faint);
}
.v2 .status-dot.ok { background: var(--brand-green); box-shadow: 0 0 6px var(--brand-green); }
.v2 .status-dot.bad { background: var(--edge-neg); }

/* ================= Badges ================= */
.v2 .badge-sport {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .66rem;
    padding: .22rem .5rem;
    border-radius: 5px;
    background: rgba(0, 229, 255, .12);
    color: var(--brand-cyan);
    border: 1px solid rgba(0, 229, 255, .25);
}
.v2 .badge-live {
    font-size: .66rem;
    padding: .22rem .5rem;
    border-radius: 5px;
    background: rgba(255, 84, 112, .14);
    color: var(--inplay);
    border: 1px solid rgba(255, 84, 112, .35);
    animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: .55; } }

/* ================= Data tables (waves reuse) ================= */
.v2 .data-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.v2 .data-table th {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--surface-2);
    padding: .5rem .65rem;
    border-bottom: 1px solid var(--border-strong);
    text-align: left;
}
.v2 .data-table td { padding: .45rem .65rem; border-bottom: 1px solid var(--border); }
.v2 .data-table tbody tr:hover { background: var(--surface-2); }

/* ================= Buttons ================= */
.v2 .btn-v2 {
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: .35rem .85rem;
    font-size: .82rem;
    font-weight: 600;
}
.v2 .btn-v2:hover { border-color: var(--brand-cyan); color: var(--brand-cyan); }
.v2 .btn-v2.primary {
    background: rgba(0, 255, 136, .12);
    border-color: var(--brand-green);
    color: var(--brand-green);
}
.v2 .btn-v2.primary:hover { box-shadow: var(--glow-green); color: var(--brand-green); }

/* ================= Empty state ================= */
.v2 .empty-state {
    text-align: center;
    color: var(--text-dim);
    padding: var(--space-6);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}

/* ================= Mobile ================= */
@media (max-width: 576px) {
    .v2 .page-header h1 { font-size: 1rem; }
    .v2 .market-card .card-top,
    .v2 .market-card .card-body-v2,
    .v2 .market-card .card-foot { padding-left: var(--space-3); padding-right: var(--space-3); }
    .v2 .model-pct { width: 2.8rem; }
    .v2 .edge-pill { width: 3.1rem; }
}

/* ================================================================
   v1-compat adapter — restyles the Bootstrap primitives that legacy
   markup and JS-GENERATED content (dashboard.js, insights.js, ...)
   still emit, so any page switched to base_v2 looks cohesive without
   rewriting its render code. Page templates are converted to real v2
   components wave by wave; this keeps everything in between consistent.
   ================================================================ */
.v2 .card.bg-dark {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.v2 .card .card-header {
    background: var(--surface-2);
    border-bottom-color: var(--border);
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    color: var(--text-dim);
}
.v2 .table-dark {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border);
    font-variant-numeric: tabular-nums;
}
.v2 .table-dark thead th,
.v2 .table-dark > :not(caption) > * > th {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-strong);
}
.v2 .table-hover > tbody > tr:hover > * { background: var(--surface-2); color: var(--text); }
.v2 .alert-dark {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
}
.v2 .btn-outline-secondary, .v2 .btn-outline-info, .v2 .btn-outline-success,
.v2 .btn-outline-warning, .v2 .btn-outline-primary, .v2 .btn-outline-light,
.v2 .btn-outline-teal {
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius-sm);
}
.v2 .btn-outline-secondary:hover, .v2 .btn-outline-info:hover,
.v2 .btn-outline-success:hover, .v2 .btn-outline-warning:hover,
.v2 .btn-outline-primary:hover, .v2 .btn-outline-light:hover {
    border-color: var(--brand-cyan);
    color: var(--brand-cyan);
    background: var(--surface-3);
}
.v2 .btn-secondary, .v2 .btn-success {
    background: rgba(0, 255, 136, .12);
    border: 1px solid var(--brand-green);
    color: var(--brand-green);
}
.v2 .badge.bg-success { background: rgba(0,255,136,.14) !important; color: var(--brand-green); border: 1px solid rgba(0,255,136,.3); }
.v2 .badge.bg-info { background: rgba(0,229,255,.12) !important; color: var(--brand-cyan); border: 1px solid rgba(0,229,255,.3); }
.v2 .badge.bg-danger { background: rgba(255,84,112,.14) !important; color: var(--inplay); border: 1px solid rgba(255,84,112,.35); }
.v2 .badge.bg-warning { background: rgba(255,180,84,.14) !important; color: var(--warn); border: 1px solid rgba(255,180,84,.35); }
.v2 .badge.bg-secondary { background: var(--surface-3) !important; color: var(--text-dim); border: 1px solid var(--border-strong); }
.v2 .text-success { color: var(--edge-pos) !important; }
.v2 .text-danger { color: var(--edge-neg) !important; }
.v2 .text-info { color: var(--brand-cyan) !important; }
.v2 .text-muted { color: var(--text-dim) !important; }
.v2 .form-control, .v2 .form-select {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius-sm);
}
.v2 .form-control:focus, .v2 .form-select:focus {
    background: var(--surface-2);
    border-color: var(--brand-cyan);
    box-shadow: none;
    color: var(--text);
}
.v2 .nav-tabs { border-bottom-color: var(--border-strong); }
.v2 .nav-tabs .nav-link { color: var(--text-dim); border: none; border-bottom: 2px solid transparent; }
.v2 .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--brand-green);
    border-bottom-color: var(--brand-green);
}

/* ---- Racing module support (ported from style.css / base.html inline) ---- */
.v2 .sortable { cursor: pointer; user-select: none; }
.v2 .sortable:hover { background: var(--surface-3); }
.v2 .table-responsive .sticky-top { position: sticky; top: 0; z-index: 5; }
.v2 .bg-teal { background-color: rgba(0, 229, 255, .12) !important; color: var(--brand-cyan); border: 1px solid rgba(0, 229, 255, .3); }
.v2 .text-teal { color: var(--brand-cyan) !important; }
.v2 .btn-teal, .v2 .btn-outline-teal { background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--radius-sm); }
.v2 .btn-teal:hover, .v2 .btn-outline-teal:hover { border-color: var(--brand-cyan); color: var(--brand-cyan); }

/* Badge color fixes: legacy markup pairs bg-* with text-dark/text-light,
   which would override the adapter's translucent badge colors. */
.v2 .badge.bg-primary { background: rgba(110,168,254,.14) !important; color: #6ea8fe; border: 1px solid rgba(110,168,254,.35); }
.v2 .badge.bg-warning.text-dark { color: var(--warn) !important; }
.v2 .badge.bg-info.text-dark { color: var(--brand-cyan) !important; }
.v2 .badge.bg-primary.text-light { color: #6ea8fe !important; }
.v2 .badge.bg-teal.text-light { color: var(--brand-cyan) !important; }
.v2 .badge.bg-secondary.text-dark { color: var(--text-dim) !important; }

/* ---- Mobile containment hardening ----
   overflow-x: clip stops anything bleeding past a card's horizontal edge
   WITHOUT creating a scroll container, so dropdown menus / popovers that
   extend below the card stay visible. Wide tables should sit in a
   .table-responsive (scrolls within the card); this rule is the backstop
   for anything that slips through. */
.v2 .card { overflow-x: clip; }
.v2 .table-responsive { -webkit-overflow-scrolling: touch; }

/* League section headers on the sports board */
.v2 .league-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-2);
}

/* Collapsible league sections */
.v2 .league-header[data-league-toggle] { cursor: pointer; user-select: none; }
.v2 .league-header[data-league-toggle]:hover .eyebrow { color: var(--brand-cyan) !important; }
.v2 .league-chevron {
    font-size: .7rem;
    color: var(--text-dim);
    transition: transform .15s ease;
}
.v2 .league-chevron.collapsed { transform: rotate(-90deg); }

/* iOS: focusing an input styled under 16px triggers the automatic viewport
   zoom; in an installed (standalone) app that zoom regularly yanks the
   field out from under the keyboard and drops focus — reads as "can't type
   into the filters". 16px on touch devices disables the auto-zoom entirely.
   Scoped to coarse pointers so desktop keeps its compact density. */
@media (pointer: coarse) {
    input.form-control, select.form-select, input[type="date"], input[type="number"],
    input[type="text"], input[type="password"], select, textarea {
        font-size: 16px !important;
    }
}