/*
 * mycard-theme.css: My Card in the shared look (restyle stage 5, 13-10-2026).
 *
 * Loaded by racecard-popup.html after racecard-builder.css. Covers what
 * racecard-columns.js draws (the My Card table: sticky header, frozen columns,
 * zebra, the entry boxes, the notes, the Book chip, the quick-filter amber and
 * the gated cells), the colours its formatters write, and the Custom Racecard
 * Builder (racecard-builder.css / .js).
 *
 * The same rules as the theme sheet: EVERY selector sits under html[data-restyle],
 * so a page that has not opted in is untouched; colours come only from the
 * --rm-* tokens, so light and dark both follow. my-card-print.html (a print page)
 * never loads this file and keeps its look exactly.
 *
 * The formatters keep their inline colours (the print card has no theme) and add
 * an mcx- marker class beside them; the marker rules here carry !important,
 * which is the only way a stylesheet beats an inline style.
 */

/* =====================================================================
 * THE MY CARD TABLE
 * ===================================================================== */
/* the pinned header row */
html[data-restyle] #my-card-content > table.rm-table > thead > tr > th {
    background-color: var(--rm-surface);
    box-shadow: inset 0 -1px 0 var(--rm-th-rule);
}

/* rows: plain, zebra from the RUNNER index (mc-even survives the note rows), hover */
html[data-restyle] #my-card-content > table.rm-table > tbody > tr:is(.mc-runner-row, .mc-note-row) > td { background-color: var(--rm-surface); }
html[data-restyle] #my-card-content > table.rm-table.rm-stripe > tbody > tr:is(.mc-runner-row, .mc-note-row).mc-even > td { background-color: var(--rm-zebra); }
html[data-restyle] #my-card-content > table.rm-table > tbody > tr.mc-runner-row:hover > td { background-color: var(--rm-hover); }

/* the frozen columns: opaque, the 30px buffer the same colour as the row */
html[data-restyle] #my-card-content > table.rm-table.rcb-frozen-active .rcb-sticky-col {
    background-color: var(--rm-surface);
    box-shadow: 30px 0 0 0 var(--rm-surface), inset -1px 0 0 var(--rm-line);
}
html[data-restyle] #my-card-content > table.rm-table.rcb-frozen-active > thead > tr > th.rcb-sticky-col {
    background-color: var(--rm-surface);
    box-shadow: 30px 0 0 0 var(--rm-surface), inset 0 -1px 0 var(--rm-th-rule);
}
html[data-restyle] #my-card-content > table.rm-table.rm-stripe.rcb-frozen-active tbody tr.mc-even .rcb-sticky-col {
    background-color: var(--rm-zebra);
    box-shadow: 30px 0 0 0 var(--rm-zebra), inset -1px 0 0 var(--rm-line);
}
html[data-restyle] #my-card-content > table.rm-table.rcb-frozen-active tbody tr:hover .rcb-sticky-col {
    background-color: var(--rm-hover);
    box-shadow: 30px 0 0 0 var(--rm-hover), inset -1px 0 0 var(--rm-line);
}
html[data-restyle] #my-card-content > table.rm-table.rcb-frozen-active:not(.rcb-frozen-scrolled) tbody .rcb-sticky-col {
    box-shadow: inset -1px 0 0 var(--rm-line) !important;
}
html[data-restyle] #my-card-content > table.rm-table.rcb-frozen-active:not(.rcb-frozen-scrolled) > thead > tr > th.rcb-sticky-col {
    box-shadow: inset 0 -1px 0 var(--rm-th-rule) !important;
}

/* the dash placeholders the formatters write as Tailwind greys */
html[data-restyle] #my-card-content > table.rm-table :is(.text-gray-400, .text-gray-300) { color: var(--rm-text-faint); }

/* the My Last cell while a quick filter is on (amber), and the dot on its header */
html[data-restyle] #my-card-content td.mc-quick-filtered { background-color: var(--rm-tint-weak) !important; color: var(--rm-tint-text); }
html[data-restyle] #my-card-content th.mc-quick-filtered::after { color: var(--rm-gold); }

/* a column the member's plan does not cover: a recessed cell, the lock in the action colour */
html[data-restyle] .rcb-gated { background: var(--rm-zebra) !important; }
html[data-restyle] .rcb-gated:hover { background: var(--rm-hover) !important; }
html[data-restyle] .rcb-gated .rcb-gated-content { color: var(--rm-primary-75); }
html[data-restyle] .rcb-gated .rcb-gated-lock { color: var(--rm-action); }

/* ---- the entry boxes (My Rating / My Odds), the Book tick, the notes ---- */
html[data-restyle] #my-card-content .mc-entry-input { border-color: var(--rm-ctl-line); background: var(--rm-field); color: var(--rm-text); }
html[data-restyle] #my-card-content .mc-entry-input:focus { outline-color: var(--rm-focus); }
html[data-restyle] #my-card-content .mc-entry-input:disabled { background: var(--rm-zebra); color: var(--rm-text-faint); }
html[data-restyle] #my-card-content .mc-save-status.saved { color: var(--rm-pos); }
html[data-restyle] #my-card-content .mc-save-status.saving { color: var(--rm-text-faint); }
html[data-restyle] #my-card-content .mc-save-status.error { color: var(--rm-neg); }
html[data-restyle] #my-card-content .mc-note-colcell-empty { color: var(--rm-text-faint); }
html[data-restyle] #my-card-content .mc-note-colcell-empty:hover { color: var(--rm-action); }
html[data-restyle] #my-card-content > table.rm-table > thead > tr > th .mc-odds-book { color: var(--rm-text-dim); }
html[data-restyle] #my-card-content .mc-odds-book.partial { color: var(--rm-text-faint); }
html[data-restyle] #my-card-content .mc-odds-book.under { color: var(--rm-action); }
html[data-restyle] #my-card-content .mc-book-tick { accent-color: var(--rm-check); }
html[data-restyle] #my-card-content .mc-book-nr { color: var(--rm-text-faint); }
html[data-restyle] #my-card-content .mc-reserve-badge { background: var(--rm-bdg-ent-bg); color: var(--rm-bdg-ent-text); }
html[data-restyle] #my-card-content .mc-note-scope { background: var(--rm-bdg-basic-bg); color: var(--rm-bdg-basic-text); }
html[data-restyle] #my-card-content .mc-note-scope-pick button { border-color: var(--rm-ctl-line); background: var(--rm-btn-bg); color: var(--rm-text); }
html[data-restyle] #my-card-content .mc-note-scope-pick button.active { background: var(--rm-sel-bg); border-color: var(--rm-sel-bg); color: var(--rm-sel-text); }
html[data-restyle] #my-card-content > table.rm-table td.mc-note-cell { color: var(--rm-text-dim); }
html[data-restyle] #my-card-content > table.rm-table tr.mc-note-row td.mc-note-cell:hover { color: var(--rm-text); }
html[data-restyle] #my-card-content .mc-note-cell textarea.mc-note-edit { border-color: var(--rm-primary-75); background: var(--rm-field); color: var(--rm-text); }
html[data-restyle] #my-card-content .mc-note-counter { color: var(--rm-text-faint); }

/* =====================================================================
 * THE COLOURS THE FORMATTERS WRITE (racecard-columns.js mcx- markers)
 * ===================================================================== */
html[data-restyle] .mcx-pos { color: var(--rm-pos) !important; }
html[data-restyle] .mcx-neg { color: var(--rm-neg) !important; }
html[data-restyle] .mcx-dim { color: var(--rm-text-dim) !important; }
html[data-restyle] .mcx-brand { color: var(--rm-text) !important; }
html[data-restyle] .mcx-level { color: var(--rm-bronze); }

/* rank pills: gold for the top, then the medal colours, the rest neutral */
html[data-restyle] .mcx-rk { background: var(--rm-medal-4-bg) !important; color: var(--rm-medal-4-text) !important; }
html[data-restyle] .mcx-rk.mcx-rk1 { background: var(--rm-top-bg) !important; color: var(--rm-top-text) !important; }
html[data-restyle] .mcx-rk.mcx-rk2 { background: var(--rm-medal-2-bg) !important; color: var(--rm-medal-2-text) !important; }
html[data-restyle] .mcx-rk.mcx-rk3 { background: var(--rm-medal-3-bg) !important; color: var(--rm-medal-3-text) !important; }

/* the saved-pattern count circle, as the system pill */
html[data-restyle] .mcx-pat { background: var(--rm-pill-teal-bg) !important; color: var(--rm-white) !important; box-shadow: inset 0 0 0 1px var(--rm-pill-teal-line); }

/* running style / pace / draw group / trip trend badges: the form lines' running-style colours */
html[data-restyle] .mcx-badge { color: var(--rm-white) !important; }
html[data-restyle] .mcx-badge.mcx-b-front { background: var(--rm-pill-warn-bg) !important; }
html[data-restyle] .mcx-badge:is(.mcx-b-prom, .mcx-b-high) { background: var(--rm-pill-teal-bg) !important; box-shadow: inset 0 0 0 1px var(--rm-pill-teal-line); }
html[data-restyle] .mcx-badge.mcx-b-stalk { background: var(--rm-bronze) !important; }
html[data-restyle] .mcx-badge:is(.mcx-b-close, .mcx-b-low, .mcx-b-up) { background: var(--rm-tertiary) !important; }
html[data-restyle] .mcx-badge.mcx-b-held { background: var(--rm-medal-2-bg) !important; color: var(--rm-medal-2-text) !important; }
html[data-restyle] .mcx-badge:is(.mcx-b-mid, .mcx-b-unk) { background: var(--rm-medal-4-bg) !important; color: var(--rm-medal-4-text) !important; }
html[data-restyle] .mcx-badge.mcx-b-peak { background: var(--rm-gold) !important; color: var(--rm-on-gold) !important; }
html[data-restyle] .mcx-badge.mcx-b-down { background: var(--rm-pill-warn-bg) !important; }

/* Draw & Pace zone pills, the long-handicap badge */
html[data-restyle] .mcx-zone-sweet { background: var(--rm-bdg-free-bg) !important; color: var(--rm-bdg-free-text) !important; }
html[data-restyle] .mcx-zone-dead { background: var(--rm-bdg-adm-bg) !important; color: var(--rm-bdg-adm-text) !important; }
/* the same as the Handicap view LH badge (.aag-badge-lh): purple is its long-standing meaning */
html[data-restyle] .mcx-lh { background: var(--rm-chart-10) !important; color: var(--rm-surface) !important; }

/* =====================================================================
 * THE CUSTOM RACECARD BUILDER (racecard-builder.css)
 * ===================================================================== */
html[data-restyle] .rcb-customise-btn { background: var(--rm-btn-primary-bg); color: var(--rm-btn-primary-text); }
html[data-restyle] .rcb-customise-btn:hover { background: var(--rm-btn-primary-hover); filter: none; }

html[data-restyle] .rcb-overlay { background: var(--rm-scrim); }
html[data-restyle] .rcb-modal { background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-line); border-radius: 8px; box-shadow: var(--rm-pop-shadow); }
html[data-restyle] .rcb-header { background: var(--rm-band); color: var(--rm-on-band); border-bottom: 1px solid var(--rm-on-band-rule); }
html[data-restyle] .rcb-header h2 { color: var(--rm-on-band); }
html[data-restyle] .rcb-header .rcb-subtitle { color: var(--rm-on-band-dim); }
html[data-restyle] .rcb-close-btn { color: var(--rm-on-band); }
html[data-restyle] .rcb-close-btn:hover { background: var(--rm-on-band-hover); color: var(--rm-on-band); }

html[data-restyle] .rcb-presets { background: var(--rm-note-bg); border-bottom: 1px solid var(--rm-line); }
html[data-restyle] .rcb-presets-label { color: var(--rm-text-dim); }
html[data-restyle] .rcb-preset-btn { border-color: var(--rm-ctl-line); background: var(--rm-btn-bg); color: var(--rm-text); }
html[data-restyle] .rcb-preset-btn:hover { border-color: var(--rm-ctl-line); background: var(--rm-ctl-hover); color: var(--rm-text); }

/* the palette (left) and the canvas (right) */
html[data-restyle] .rcb-palette { border-right: 1px solid var(--rm-line); background: var(--rm-note-bg); }
html[data-restyle] .rcb-canvas-wrap { background: var(--rm-surface); }
html[data-restyle] .rcb-palette-search { background: var(--rm-surface); border-bottom: 1px solid var(--rm-line); }
html[data-restyle] .rcb-palette-search input { border-color: var(--rm-ctl-line); background: var(--rm-field); color: var(--rm-text); }
html[data-restyle] .rcb-palette-search input::placeholder { color: var(--rm-placeholder); }
html[data-restyle] .rcb-palette-search input:focus { border-color: var(--rm-primary-75); }
html[data-restyle] .rcb-palette-empty { color: var(--rm-text-dim); }
html[data-restyle] .rcb-source-header { color: var(--rm-text-dim); }
/* one chip colour per data source: the categorical chart series, each readable in both themes */
html[data-restyle] .rcb-source-header .rcb-source-chip { color: var(--rm-surface); background: var(--rm-chart-14); }
html[data-restyle] .rcb-source-main .rcb-source-chip { background: var(--rm-chart-14); }
html[data-restyle] .rcb-source-runnerStats .rcb-source-chip { background: var(--rm-chart-8); }
html[data-restyle] .rcb-source-myRatings .rcb-source-chip { background: var(--rm-chart-9); }
html[data-restyle] .rcb-source-patterns .rcb-source-chip { background: var(--rm-chart-10); }
html[data-restyle] .rcb-source-myNotes .rcb-source-chip { background: var(--rm-chart-10); }
html[data-restyle] .rcb-source-ratingsAnalysis .rcb-source-chip { background: var(--rm-chart-5); }
html[data-restyle] .rcb-source-futureForm .rcb-source-chip { background: var(--rm-chart-13); }
html[data-restyle] .rcb-source-drawPace .rcb-source-chip { background: var(--rm-chart-12); }
html[data-restyle] .rcb-source-tripPredictor .rcb-source-chip { background: var(--rm-chart-6); }
html[data-restyle] .rcb-source-predictedStyles .rcb-source-chip { background: var(--rm-chart-11); }
html[data-restyle] .rcb-source-collateral .rcb-source-chip { background: var(--rm-chart-1); }
html[data-restyle] .rcb-source-handicap .rcb-source-chip { background: var(--rm-chart-15); }
html[data-restyle] .rcb-source-marketMovers .rcb-source-chip { background: var(--rm-chart-4); }

html[data-restyle] .rcb-palette-item { background: var(--rm-surface); border-color: var(--rm-line); color: var(--rm-text); }
html[data-restyle] .rcb-palette-item:hover { border-color: var(--rm-primary-75); background: var(--rm-ctl-hover); }
html[data-restyle] .rcb-palette-item.in-canvas, html[data-restyle] .rcb-palette-item.in-canvas:hover { border-color: var(--rm-line); background: var(--rm-zebra); }
html[data-restyle] .rcb-palette-item-label { color: var(--rm-text); }
html[data-restyle] .rcb-palette-item-tip { color: var(--rm-text-dim); }
html[data-restyle] .rcb-palette-item-add { color: var(--rm-action); }
html[data-restyle] .rcb-palette-item.rcb-palette-gated .rcb-palette-item-label::after { color: var(--rm-action); }

html[data-restyle] .rcb-canvas-title { color: var(--rm-text); }
html[data-restyle] .rcb-canvas-title .rcb-canvas-count { color: var(--rm-text-dim); }
html[data-restyle] .rcb-canvas { border-color: var(--rm-rule); background: var(--rm-note-bg); }
html[data-restyle] .rcb-canvas.empty::before { color: var(--rm-text-faint); }
html[data-restyle] .rcb-canvas-item { background: var(--rm-surface); border-color: var(--rm-primary-75); color: var(--rm-text); }
html[data-restyle] .rcb-canvas-item.drop-target-before { box-shadow: -3px 0 0 var(--rm-gold); }
html[data-restyle] .rcb-canvas-item.drop-target-after { box-shadow: 3px 0 0 var(--rm-gold); }
html[data-restyle] .rcb-canvas-item-handle { color: var(--rm-text-faint); }
html[data-restyle] .rcb-canvas-item-remove { color: var(--rm-neg); }
html[data-restyle] .rcb-canvas-item-remove:hover { color: var(--rm-action); }
html[data-restyle] .rcb-canvas-item-arrow { background: var(--rm-ctl-hover); color: var(--rm-text); }
html[data-restyle] .rcb-canvas-item-arrow:not(:disabled):hover { background: var(--rm-hover); }

/* layout options, the footer and its controls */
html[data-restyle] .rcb-options { border-top-color: var(--rm-line); }
html[data-restyle] .rcb-options-row { color: var(--rm-text); }
html[data-restyle] .rcb-options-row .rcb-options-label { color: var(--rm-text-dim); }
html[data-restyle] .rcb-options-row input[type="checkbox"] { accent-color: var(--rm-check); }
html[data-restyle] .rcb-footer { border-top-color: var(--rm-line); background: var(--rm-note-bg); }
html[data-restyle] .rcb-fl-suffix, html[data-restyle] .rcb-fl-label { color: var(--rm-text-dim); }
html[data-restyle] :is(.rcb-freeze-select, .rcb-name-input, .rcb-fl-input, .rcb-layout-switch) { border-color: var(--rm-ctl-line); background-color: var(--rm-field); color: var(--rm-text); }
html[data-restyle] :is(.rcb-freeze-select, .rcb-name-input, .rcb-fl-input, .rcb-layout-switch):focus { border-color: var(--rm-primary-75); }
html[data-restyle] .rcb-layout-switch:hover { border-color: var(--rm-rule-strong); }
html[data-restyle] .rcb-btn-primary { background: var(--rm-btn-primary-bg); border-color: var(--rm-btn-primary-bg); color: var(--rm-btn-primary-text); }
html[data-restyle] .rcb-btn-primary:hover { background: var(--rm-btn-primary-hover); border-color: var(--rm-btn-primary-hover); }
html[data-restyle] .rcb-btn-secondary { background: var(--rm-btn-bg); border-color: var(--rm-ctl-line); color: var(--rm-text); }
html[data-restyle] .rcb-btn-secondary:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .rcb-btn-danger { background: var(--rm-warn-bg); border-color: var(--rm-warn-line); color: var(--rm-warn-text); }
html[data-restyle] .rcb-btn-danger:hover { background: var(--rm-warn-bg); border-color: var(--rm-warn-text); }
html[data-restyle] .rcb-status { color: var(--rm-text-dim); }
html[data-restyle] .rcb-status.error { color: var(--rm-neg); }
html[data-restyle] .rcb-status.success { color: var(--rm-pos); }

/* the phone builder: tabs, the settings pane, the empty-layout cards */
@media (max-width: 768px) {
    html[data-restyle] .rcb-body.rcb-mobile-view-settings .rcb-mobile-pane-settings { background: var(--rm-note-bg); }
    html[data-restyle] .rcb-mobile-tabs { background: var(--rm-note-bg); border-bottom: 1px solid var(--rm-line); }
    html[data-restyle] .rcb-mobile-tab { border-color: var(--rm-ctl-line); background: var(--rm-btn-bg); color: var(--rm-text-dim); }
    html[data-restyle] .rcb-mobile-tab.is-active { background: var(--rm-sel-bg); border-color: var(--rm-sel-bg); color: var(--rm-sel-text); }
    html[data-restyle] .rcb-canvas-item-handle { color: var(--rm-primary-75); }
    html[data-restyle] .rcb-canvas-item.rcb-dragging-touch { background: var(--rm-ctl-hover); border-color: var(--rm-primary-75); box-shadow: var(--rm-pop-shadow); }
    html[data-restyle] .rcb-canvas-item.rcb-drop-target-before { box-shadow: inset 0 3px 0 var(--rm-gold); }
    html[data-restyle] .rcb-canvas-item.rcb-drop-target-after { box-shadow: inset 0 -3px 0 var(--rm-gold); }
    html[data-restyle] .rcb-mobile-empty-title { color: var(--rm-text); }
    html[data-restyle] :is(.rcb-mobile-empty-sub, .rcb-mobile-empty-card-tip, .rcb-settings-label, .rcb-settings-status) { color: var(--rm-text-dim); }
    html[data-restyle] .rcb-mobile-empty-card, html[data-restyle] .rcb-settings-section { background: var(--rm-surface); border-color: var(--rm-line); }
    html[data-restyle] .rcb-mobile-empty-card:is(:hover, :active) { border-color: var(--rm-primary-75); background: var(--rm-ctl-hover); }
    html[data-restyle] .rcb-mobile-empty-card-name { color: var(--rm-text); }
    html[data-restyle] .rcb-mobile-empty-or { color: var(--rm-text-faint); }
    html[data-restyle] .rcb-mobile-empty-link { border-color: var(--rm-ctl-line); color: var(--rm-action); }
    html[data-restyle] .rcb-settings-status.error { color: var(--rm-neg); }
    html[data-restyle] .rcb-settings-status.success { color: var(--rm-pos); }
}