wrappers. */
img[src='/img/arrow_up.png'],
img[src='/img/arrow_down.png'] {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
vertical-align: middle;
/* middle = baseline − x-height/2; digits' optical center sits ~1px higher
(glyph-rect measured). Relative nudge — no layout impact. */
position: relative;
top: -1px;
}
img[src='/img/arrow_up.png'] { border-bottom: 8px solid var(--status-ok); }
img[src='/img/arrow_down.png'] { border-top: 8px solid var(--status-err); }
/* The legacy .padded-top (5px) on the arrow cells compensated for the tiny
PNG sitting on the baseline; with vertical-align:middle it only drags the
triangle below the odd's midline. Neutralise it in the three arrow cells
(main table rows / outcomes panel / odd history). */
.surebetOddRow .padded-top,
#outcomeIcon.padded-top,
#oddIcon.padded-top { padding-top: 0; }
/* Clone-to-popup icon in the Calculator title bar: the legacy 10px glyph
with a 1px padding shim drowns in the taller modern bar — size it up and
center it on the bar itself. */
#calculatorHeader { position: relative; }
#calculatorHeader #cloneCalculatorButton {
font-size: 13px;
padding-top: 0;
top: 50%;
transform: translateY(-50%);
/* discreet: the bar's `*` rule bolds it to 600 and synthesizes a heavy
glyph; quiet muted tool, brand green only on hover. */
font-weight: normal;
color: var(--text-muted);
}
#calculatorHeader #cloneCalculatorButton:hover { color: var(--ar-green); }
/* ── Collapse chevrons (Outcomes accordion / Filters lists / more-less) ──── */
/* The legacy +/− glyph pairs (#headerExpand/#headerCollapse) stay in the DOM
as the JS state carriers — visually replaced by ONE chevron on the
persistent header/row, so the direction change rotates smoothly instead of
swapping two icons. Expanded = down, collapsed = right. Empty filter lists
(minus carries .invisible) keep a dimmed chevron as a "nothing here yet"
hint — legacy dropped the icon entirely. OSDS chevron: account/odds SVG,
via mask so it themes with a plain background-color. */
.oddsTable > .header .collapsible-icon,
.filtersTable > .header .collapsible-icon,
.expandRow .collapsible-icon { display: none; }
.oddsTable > .header,
.filtersTable > .header,
.expandRow { position: relative; }
.oddsTable > .header,
.filtersTable > .header { padding-left: 24px; }
.oddsTable > .header::before,
.filtersTable > .header::before,
.expandRow::before {
content: '';
position: absolute;
left: 7px;
top: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
background-color: var(--text-muted);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
transform: rotate(-90deg);
transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Expanded = the minus icon is the live one (not hidden, not invisible). */
.oddsTable > .header:has(> .glyphicon-minus:not(.hidden):not(.invisible))::before,
.filtersTable > .header:has(> .glyphicon-minus:not(.hidden):not(.invisible))::before,
.expandRow:has(.glyphicon-minus:not(.hidden):not(.invisible))::before {
transform: rotate(0deg);
}
/* Empty filter list — dimmed hint instead of a missing icon. */
.filtersTable > .header:has(> .glyphicon-minus.invisible)::before { opacity: 0.35; }
/* Hand cursor over every collapse/expand surface — the labels inside carry
their own cursor rules and flipped the pointer back over the title text. */
.oddsTable > .header, .oddsTable > .header *,
.filtersTable > .header, .filtersTable > .header *,
.expandRow, .expandRow * { cursor: pointer; }
/* Active-filter tables (Odds / Events / Leagues …): the grey 1px frame reads
heavy against the flat modern panels — dropped (Chapa 2026-06-11). */
.filtersTable.bordered-grey { border: none; }
/* ── Loading / empty-state chips (admin .adm-loading pattern) ───────────── */
/* Centered overlay chip: spinner while the arb list waits for its first
feed response; dimmed content + prompt for the not-yet-active Calculator
and Filters boxes. */
.ar-state-chip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: var(--surface-container);
border: 1px solid var(--border);
border-radius: var(--shape-md);
box-shadow: var(--elev-2);
font: 600 13px/1.4 var(--font-body);
color: var(--text-muted);
white-space: nowrap;
}
.ar-state-prompt {
white-space: normal;
text-align: center;
max-width: min(320px, calc(100% - 24px));
}
.ar-spinner {
width: 16px;
height: 16px;
flex: 0 0 auto;
border: 2px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: ar-spin 800ms linear infinite;
}
@keyframes ar-spin { to { transform: rotate(360deg); } }
/* Calculator: inert skeleton dimmed under the prompt until a surebet is
selected (oddstorm-arbs-base.js drops .ar-empty — selection can also be
restored server-side on reload). */
#calculator { position: relative; }
#calculator.ar-empty > :not(#calculatorEmptyState) {
opacity: 0.35;
pointer-events: none;
}
#calculator:not(.ar-empty) #calculatorEmptyState { display: none; }
/* Outcomes / Odd History: quiet hints (no card chrome — three chips would
shout). Same lifecycle as the calculator prompt: visible only while
nothing is selected (.ar-empty on #calculator drives all of them). */
.ar-state-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font: 400 12px/1.4 var(--font-body);
color: var(--text-dim);
white-space: nowrap;
pointer-events: none;
display: none;
}
#rightPanelWrapper:has(> #calculator.ar-empty) .ar-state-hint { display: block; }
/* Filters box: prompt + dimmed lists while no filter rows exist — fully
reactive via :has, reappears when the last filter is removed. */
#filtersWrapper { position: relative; }
#filtersWrapper:has(.filterRow) #filtersEmptyState { display: none; }
#filtersWrapper:not(:has(.filterRow)) #filtersAccordion { opacity: 0.35; }
/* ── Left sidebar (Settings / Bookmakers / Chat) ─────────────────────────── */
/* ACCORDION: exactly one section open at a time (.sp-open) — it fills the
column, the others are just header bars (stacked above, pushed below).
Column anchored to the footer strip (height set by sizeSidePanels in
common.js). The whole panel collapses to a 36px icon rail —
body.os-sidebar-collapsed, persisted in localStorage. */
/* No width/margin transitions on the panel or the content area: the legacy
renderers JS-fix the table widths, so animating the reflow shows a few
hundred ms of broken columns. Instant snap + immediate resize instead.
overflow:hidden = hard guarantee the sidebar can never extend the page —
sections scroll internally instead. */
#sidePanel {
display: flex;
flex-direction: column;
overflow: hidden;
/* the .container class brings 15px side paddings — they pushed the whole
sidebar content 15px off the screen edge (main panel sits 5px from the
right edge; mirror that) */
padding-left: 0;
padding-right: 0;
}
#sidebarBody {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
/* 1px = .contents-wrapper margin-top, so the Settings title bar sits on
the same line as the Arbitrages/Calculator bars */
padding-top: 1px;
gap: 5px;
}
.sp-section { display: flex; flex-direction: column; min-height: 0; flex: 0 0 auto; }
.sp-section.sp-open { flex: 1 1 auto; }
.sp-section:not(.sp-open) > :not(.sp-header) { display: none; }
/* The section bodies carry ID rules (#chat/#bookmakersWrapper display:flex)
which outrank the class selector above — re-assert by ID. */
.sp-section:not(.sp-open) > #formWrapper,
.sp-section:not(.sp-open) > #bookmakersWrapper,
.sp-section:not(.sp-open) > #chat { display: none; }
/* Section bodies carry the flex/scroll so legacy IDs keep their meaning.
The .form-group wrapper inside Bookmakers must forward the flex chain —
without it the full bookie list (1000px+) blows the column open. */
#formWrapper { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
#bookmakersWrapper { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#bookmakersWrapper > .form-group {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
#bookiesTableWrapper { flex: 1 1 auto; overflow-y: auto; min-height: 60px; }
#chat { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#chatText { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
/* Settings rows: controls flush with the panel edge like Bookmakers/Chat —
the legacy 15px col gutters made the whole section look indented once the
sections stacked (Chapa 2026-06-11). 10px gutter stays between columns. */
#formWrapper .row.form > [class*='col-xs-'] { padding-left: 6px; padding-right: 10px; }
#formWrapper .row.form > [class*='col-xs-']:last-child { padding-right: 6px; }
/* Settings breathing room: the spacing was tuned for the cramped 445px tab;
the accordion now gives the section the whole column — air out the
groups (taller band headers, gaps between rows and groups). */
#formWrapper { padding-top: 4px; padding-bottom: 14px; }
#formWrapper .formHeader {
margin-top: 14px;
margin-bottom: 7px;
padding-top: 3px;
padding-bottom: 3px;
}
#percentageFilters .formHeader:first-child { margin-top: 2px; }
#formWrapper .row.form { margin-bottom: 6px; }
/* Section headers — same chevron language as the accordions above.
cursor on the children too: the labels inside carry their own cursor
rules and flipped the pointer back to an arrow over the title text. */
.sp-header { position: relative; padding-left: 24px; user-select: none; flex: 0 0 auto; }
.sp-header, .sp-header * { cursor: pointer; }
.sp-header::before {
content: '';
position: absolute;
left: 7px;
top: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
background-color: var(--text-muted);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
transition: transform 0.25s ease;
}
.sp-section:not(.sp-open) > .sp-header::before { transform: rotate(-90deg); }
/* Panel action buttons in the Settings header: collapse-to-rail (») and
hide-top-bar (˄). Bold brand-green, stroke-3 — deliberately DIFFERENT
from the muted section chevrons (same visual family as the calculator
popup icon). */
#sidebarCollapseBtn,
#headerToggleBtn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
}
#sidebarCollapseBtn { right: 4px; }
#headerToggleBtn { right: 28px; }
#sidebarCollapseBtn::before,
#headerToggleBtn::before {
content: '';
display: block;
width: 14px;
height: 14px;
margin: 0 auto;
/* primary-soft, NOT --ar-green: on light --ar-green maps to the deep
#3d5e1d which reads near-black at icon size — --primary-soft is the
saturated brand green on BOTH themes (#79b247 dark / #58872a light). */
background-color: var(--primary-soft);
transition: transform 0.2s ease;
}
#sidebarCollapseBtn:hover::before,
#headerToggleBtn:hover::before { background-color: var(--text); }
#sidebarCollapseBtn::before {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 17 6 12 11 7'/%3E%3Cpolyline points='18 17 13 12 18 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 17 6 12 11 7'/%3E%3Cpolyline points='18 17 13 12 18 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
/* chevron-up = "tuck the top bar away"; flips down when it's hidden */
#headerToggleBtn::before {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
body.os-header-hidden #headerToggleBtn::before { transform: rotate(180deg); }
/* Hide the whole site top bar for max vertical space (state persisted +
applied pre-paint by the inline bootstrap in the template). */
body.os-header-hidden #wrapper-header { display: none; }
/* Collapsed rail: 36px strip with the three section icons. */
#sidebarRail { display: none; }
body.os-sidebar-collapsed #sidebarRail {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
/* 1px = same offset as the expanded body, so the first rail icon tops out
level with the neighbouring Arbitrages title bar */
padding-top: 1px;
}
body.os-sidebar-collapsed #sidebarBody { display: none; }
body.os-sidebar-collapsed #sidePanel {
width: 36px;
min-width: 36px;
max-width: 36px;
}
/* Constant panel gap: the visible sidebar↔arbs gap must equal the default
arbs↔calculator gap (10px). The main area carries 15px of its own left
chrome, so margin-left = sidebar right edge − 5 in BOTH states. */
#sidePanel ~ .contents-wrapper { margin-left: 240px; } /* 245 (panel right) − 5 */
body.os-sidebar-collapsed #sidePanel ~ .contents-wrapper { margin-left: 36px; } /* 41 (rail right) − 5 */
/* Edge symmetry: sidebar sits 5px from the left screen edge — bring the
right panel's visible edge to 5px too (legacy 10px col padding). Scoped
behind #sidePanel so compact mode keeps its own layout. */
#sidePanel ~ .contents-wrapper #rightPanelWrapper { padding-right: 5px; }
.sp-rail-btn {
width: 28px;
height: 28px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-container-high);
cursor: pointer;
padding: 0;
position: relative;
}
.sp-rail-btn::before {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 15px;
height: 15px;
background-color: var(--text-muted);
-webkit-mask: var(--sp-rail-icon) center / 15px 15px no-repeat;
mask: var(--sp-rail-icon) center / 15px 15px no-repeat;
}
.sp-rail-btn:hover { border-color: var(--ar-green); }
.sp-rail-btn:hover::before { background-color: var(--text); }
/* the expand toggle is bold brand-green like its « counterpart — clearly
distinct from the muted section icons below it */
.sp-rail-toggle { --sp-rail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 17 11 12 6 7'/%3E%3Cpolyline points='13 17 18 12 13 7'/%3E%3C/svg%3E"); }
.sp-rail-toggle::before { background-color: var(--primary-soft); }
.sp-rail-toggle:hover::before { background-color: var(--text); }
.sp-rail-settings { --sp-rail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='5' x2='14' y2='5'/%3E%3Cline x1='10' y1='5' x2='3' y2='5'/%3E%3Cline x1='21' y1='12' x2='12' y2='12'/%3E%3Cline x1='8' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='19' x2='16' y2='19'/%3E%3Cline x1='12' y1='19' x2='3' y2='19'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='14' cy='19' r='2'/%3E%3C/svg%3E"); }
.sp-rail-bookmakers { --sp-rail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E"); }
.sp-rail-chat { --sp-rail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
/* Bare anchors (chat notice, inline links) — Bootstrap's #337ab7 blue is the
only off-brand color left. Scoped to the SPA containers so the header /
footer chrome keeps its own link styling. */
.content a { color: var(--ar-green); }
#calculatorWrapper a { color: var(--ar-green); }
/* ── Surfaces ────────────────────────────────────────────────────────────── */
/* Header bands: primary-deep, NOT primary — on dark, --primary is the same
saturated green as the CTA buttons and the match headers screamed like
dozens of CTAs (Chapa 2026-06-11). primary-deep is identical to what the
light theme already showed, so light is unchanged. */
.teamsBox { background-color: var(--primary-deep); }
/* Arb-table + calculator header rows: the float columns never matched
heights, and Nunito made the teams block taller than the % badge's
min-height — the row's green peeked out under the badge as a stray
stripe. Flex the row so the badge column stretches to full height. */
.surebetTable .row.teamsBox,
#calculator > .row.teamsBox {
display: flex;
}
.surebetTable .row.teamsBox:before,
.surebetTable .row.teamsBox:after,
#calculator > .row.teamsBox:before,
#calculator > .row.teamsBox:after { content: none; }
.matchBox { /* the % / period chip — stays a dark badge */
background-color: var(--ar-badge-bg);
}
.matchBox * { color: var(--ar-badge-text); }
.matchBox .dateAndTime { color: var(--ar-badge-text); }
.matchBox-start { background-color: var(--status-err); } /* live marker */
.matchBox-start * { color: #fff; }
.oddRow { background-color: var(--ar-tint); }
.evenRow { background-color: var(--surface); }
.settings-bgr { background-color: var(--surface-container-low); }
.bordered-grey { border-color: var(--border-strong); }
/* Section title bars (Filters / Arbitrages / Calculator / Live Chat / …).
Legacy #99B4D1 blue → quiet themed bar; .white children get themed text.
Slightly taller than legacy (Chapa 2026-06-11) — the resize JS reads real
geometry, so the columns absorb the change automatically. */
.calculatorHeaders {
background-color: var(--surface-container-high);
padding-top: 4px;
padding-bottom: 4px;
}
.white.calculatorHeaders *,
.calculatorHeaders.white * { color: var(--text); font-weight: 600; }
/* Grey sub-header rows (Outcome/HC/Price…, Odd/Bookmaker/Stake…). */
.header { background-color: var(--surface-container-high); }
.white.header *,
.header.white * { color: var(--text-muted); }
/* The period chip (.matchBox) nested in a sub-header row would inherit the
muted color above (specificity 0,2,0 beats .matchBox * at 0,1,0) — dark
text on the dark badge. Re-assert the badge text. */
.white.header .matchBox,
.white.header .matchBox * { color: var(--ar-badge-text); }
/* Panel footers (bookies legend, surebets status line) — slightly taller. */
.bookies-footer {
background-color: var(--surface-container);
padding-top: 4px;
padding-bottom: 4px;
}
.white.bookies-footer *,
.bookies-footer.white * { color: var(--text-muted); }
/* Fixed bottom strip (PreMatch/InPlay subscription) — taller than the legacy
20px sliver; the resize JS anchors the columns to its real offset. */
.footerWrapper {
background: var(--surface-container-high);
height: 28px;
padding-top: 7px;
}
.white.footerWrapper *,
.footerWrapper.white * { color: var(--text-muted); }
/* Selected surebet: legacy #3399FF blue → saturated brand green. */
.selection { background-color: var(--ar-green); }
.selected { background-color: var(--ar-green); color: #fff; }
.selected * { color: #fff; }
.middles-condition {
color: var(--text-muted);
border-top-color: var(--border);
border-bottom-color: var(--border);
}
.calc-arbitrage-positive { color: #fff; background-color: var(--status-ok); border-radius: var(--shape-xs); }
.calc-arbitrage-negative { color: #fff; background-color: var(--status-err); border-radius: var(--shape-xs); }
/* ── Bootstrap skin (forms, buttons, tabs, dropdowns, table) ─────────────── */
.form-control {
background-color: var(--surface);
border-color: var(--border-strong);
color: var(--text);
border-radius: var(--shape-xs);
box-shadow: none;
}
.form-control:focus {
border-color: var(--primary);
box-shadow: var(--focus-ring);
}
.form-control::placeholder { color: var(--text-dim); opacity: 1; }
.form-control[readonly],
.form-control[disabled] {
background-color: var(--surface-container-low);
color: var(--text-muted);
}
/* Read-only result wells rendered as (totals). */
div.form-control {
background-color: var(--surface-container-low);
border-color: var(--border-strong);
color: var(--text);
}
input[type='checkbox'],
input[type='radio'] { accent-color: var(--primary); }
/* Nunito's taller line box left the checkbox sitting ~2px below its label
text (legacy Bootstrap offset was tuned for Tahoma 10px). */
.checkbox input[type='checkbox'] { margin-top: 3px; }
/* Settings/Bookmakers rows: the legacy float columns + one-sided padding
shims (padded-top here and there, tuned for Tahoma) never truly aligned
checkbox, label and input. Flex-center each row instead and drop the
now-redundant shims. Scoped to the two side-panel tabs ONLY — the
calculator's #calcContent is also a `.row.form` and must keep floats. */
#formWrapper .row.form,
#bookmakersWrapper .row.form {
display: flex;
align-items: center;
}
#formWrapper .row.form:before,
#formWrapper .row.form:after,
#bookmakersWrapper .row.form:before,
#bookmakersWrapper .row.form:after { content: none; }
#formWrapper .row.form .checkbox.padded-top,
#formWrapper .row.form .checkbox label.padded-top,
#formWrapper .row.form > [class*='col-xs-'].padded-top { padding-top: 0; }
/* The legacy label min-height (20px) parks the text at the TOP of the label
box with dead space below — centering boxes then leaves both checkbox and
input visually ~2px below the text. Make the label box hug its text line
and seat the checkbox in that line. */
#formWrapper .row.form .checkbox label,
#bookmakersWrapper .row.form .checkbox label { min-height: 0; }
#formWrapper .row.form .checkbox input[type='checkbox'],
#bookmakersWrapper .row.form .checkbox input[type='checkbox'] { margin-top: 1px; }
.btn-default,
.btn.dropdown-toggle {
background-color: var(--surface-container);
border-color: var(--border-strong);
color: var(--text);
border-radius: var(--shape-xs);
}
.btn-default:hover, .btn-default:focus, .btn-default:active,
.btn.dropdown-toggle:hover, .btn.dropdown-toggle:focus, .btn.dropdown-toggle:active {
background-color: var(--surface-container-high);
border-color: var(--border-strong);
color: var(--text);
}
.btn-default[disabled],
.btn-default[disabled]:hover {
background-color: var(--surface-container-low);
color: var(--text-dim);
}
.btn-info,
.btn-success {
background-color: var(--primary);
border-color: var(--primary-deep);
color: #fff;
border-radius: var(--shape-xs);
}
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-success:hover, .btn-success:focus, .btn-success:active {
background-color: var(--primary-deep);
border-color: var(--primary-deep);
color: #fff;
}
.nav-tabs { border-bottom-color: var(--border-strong); }
.nav-tabs > li > a {
color: var(--text-muted);
border-radius: var(--shape-xs) var(--shape-xs) 0 0;
}
.nav-tabs > li > a:hover {
background-color: var(--surface-container);
border-color: var(--border) var(--border) var(--border-strong);
color: var(--text);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background-color: var(--surface-container-low);
border-color: var(--border-strong) var(--border-strong) transparent;
color: var(--text);
}
.dropdown-menu {
background-color: var(--surface-container-high);
border-color: var(--border-strong);
border-radius: var(--shape-xs);
box-shadow: var(--elev-2);
}
.dropdown-menu > li > a { color: var(--text); }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: var(--ar-tint);
color: var(--text);
}
.table > thead > tr > th,
.table > tbody > tr > td { border-color: var(--border); }
/* style.css hardcodes `.table td { color: #000 }` — on dark the bookmaker
names sank into the stripes. Theme it; the thead band matches the other
sub-header bars instead of the legacy grey-on-white. */
.table td { color: var(--text); }
.table > thead > tr > th {
background-color: var(--surface-container-high);
color: var(--text-muted);
}
/* Bookmaker three-state button (native