@charset "UTF-8";
html[data-theme="dark"] {
--cbp-bg: #1c1c1c; --cbp-bg-2: #232323; --cbp-surface: #292929; --cbp-line: #434343;
--cbp-ink: #dfdfdf; --cbp-body: #bababa; --cbp-muted: #9b9b9b;
--cbp-sh-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
--cbp-sh-md: 0 6px 18px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
--cbp-sh-lg: 0 24px 50px -22px rgba(0,0,0,.7), 0 8px 18px -12px rgba(0,0,0,.4);
/* dealer rail/content tokens (dealer-sidebar declares these on :root; this
html-level remap out-specifies it) */
--content: #1c1c1c; --line: #434343;
/* dark-only component tokens */
--cbp-surface-2: #343434; --cbp-input: #222222; --cbp-input-line: #494949;
--cbp-th-bg: #2f2f2f; --cbp-th-ink: #bdbdbd; --cbp-th-line: #454545; --cbp-td-line: #3a3a3a;
--cbp-chip: #3f3f3f; --cbp-chip-line: #5e5e5e; --cbp-hover: rgba(255,255,255,.055);
--cbp-green-t: #85c79e; --cbp-red-t: #dd8f94; --cbp-amber-t: #dbb477; --cbp-muted-t: #9b9b9b;
/* these two were used by rules on this side but only ever DEFINED on the admin
side. A var() that resolves to nothing makes the whole declaration invalid, so
those rules quietly did nothing and the text fell back to the body colour --
which is how the download buttons ended up grey-on-blue at 2.7 to 1. */
--cbp-link: #8bbddf; --cbp-blue-t: #90b8e3;
/* The brand navy IS the chrome (top bar, sidebar, logo, footer) and the light
rules paint it with !important, so dark never reached it. Same greys, same
luminance, so the white-on-chrome contrast is unchanged. */
--cbp-navy: #1f1f1f; --cbp-navy-2: #2b2b2b; --cbp-navy-3: #1a1a1a;
/* notes (--np-*) remap; pastel note colors (--c-*) intentionally stay */
--np-bg: #1c1c1c; --np-card: #292929; --np-line: #434343;
--np-ink: #dbdbdb; --np-muted: #9b9b9b;
--np-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
--np-shadow-hi: 0 2px 6px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.5);
--c-default: #292929;
}
/* ---- Base ---- */
html[data-theme="dark"] body { background-color: var(--cbp-bg); color: var(--cbp-body); }
html[data-theme="dark"] ::selection { background: rgba(91,187,232,.32); color: #fff; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5 { color: var(--cbp-ink); }
/* ---- Dealer UI kit (dp-*) ---- */
html[data-theme="dark"] .dp-card { background: var(--cbp-surface); border-color: var(--line, #434343); }
html[data-theme="dark"] .dp-card-title { color: var(--cbp-ink); }
html[data-theme="dark"] .dp-sub-title { color: var(--cbp-body); }
html[data-theme="dark"] .dp-formcard label, html[data-theme="dark"] .dp-field > label { color: var(--cbp-body); }
html[data-theme="dark"] .dp-formcard input:not([type=file]):not([type=checkbox]):not([type=radio]),
html[data-theme="dark"] .dp-formcard select,
html[data-theme="dark"] .dp-formcard textarea {
background: var(--cbp-input); border-color: var(--cbp-input-line); color: #e9e9e9; }
html[data-theme="dark"] .dp-formcard input::placeholder, html[data-theme="dark"] .dp-formcard textarea::placeholder { color: #858585; }
html[data-theme="dark"] .dp-formcard input[type=file] { background: var(--cbp-input); border-color: #4b4b4b; color: var(--cbp-muted-t); }
html[data-theme="dark"] .dp-btn-ghost { background: var(--cbp-surface-2); color: var(--cbp-body); border-color: var(--cbp-input-line); }
html[data-theme="dark"] .dp-btn-ghost:hover { background: #3e3e3e; color: var(--cbp-sky); }
html[data-theme="dark"] .dp-btn-danger { background: rgba(242,86,108,.1); color: var(--cbp-red-t); border-color: #57202c; }
html[data-theme="dark"] .dp-btn-danger:hover { background: rgba(242,86,108,.18); color: var(--cbp-red-t); }
html[data-theme="dark"] .dp-alert-err { background: #38161f; color: #f2778c; border-color: #57202c; }
html[data-theme="dark"] .dp-alert-ok { background: #123123; color: #4fce8e; border-color: #1d4a34; }
html[data-theme="dark"] .dp-alert-info { background: #262626; color: #7db4ee; border-color: #3e3e3e; }
html[data-theme="dark"] .dp-skel { background: linear-gradient(90deg, #292929 25%, #393939 37%, #292929 63%); background-size: 400% 100%; }
html[data-theme="dark"] .dp-err { color: var(--cbp-red-t); }
html[data-theme="dark"] .dp-hint { color: var(--cbp-muted-t); }
html[data-theme="dark"] .dp-title { color: var(--cbp-ink); }
html[data-theme="dark"] .dp-sub { color: var(--cbp-muted-t); }
/* A link inside a page subtitle kept the light brand blue: the watchlist's "Copart"
came out at 2.31 on the dark page background. 7.83 now. */
html[data-theme="dark"] .dp-sub a, html[data-theme="dark"] .dp-empty a,
html[data-theme="dark"] .dp-link { color: #7ab3f5; }
html[data-theme="dark"] .dp-kpi { background: var(--cbp-surface); border-color: var(--line, #434343); }
html[data-theme="dark"] .dp-kpi .k-lbl { color: var(--cbp-muted-t); }
html[data-theme="dark"] .dp-kpi .k-val { color: var(--cbp-ink); }
html[data-theme="dark"] .dp-kpi .k-val.accent { color: var(--cbp-sky); }
html[data-theme="dark"] .dp-kpi .k-sub { color: var(--cbp-muted-t); }
html[data-theme="dark"] .dp-empty { background: var(--cbp-surface); border-color: var(--line, #434343); color: var(--cbp-muted-t); }
html[data-theme="dark"] .dp-empty a { color: var(--cbp-sky); }
/* ---- Tables: dp-table + #myTable + DataTables controls (mirror !important) ---- */
html[data-theme="dark"] .dp-tablewrap { background: var(--cbp-surface); border-color: var(--line, #434343); }
html[data-theme="dark"] .dp-table thead th { background: var(--cbp-th-bg); color: var(--cbp-th-ink); border-bottom-color: var(--cbp-th-line); }
html[data-theme="dark"] .dp-table tbody td { border-bottom-color: var(--cbp-td-line); color: var(--cbp-body); }
html[data-theme="dark"] .dp-table tbody tr:hover { background: var(--cbp-hover); }
html[data-theme="dark"] .dealer-main #myTable { background: var(--cbp-surface); }
html[data-theme="dark"] .dealer-main #myTable thead th { background: var(--cbp-th-bg); color: var(--cbp-th-ink); border-bottom-color: var(--cbp-th-line); }
html[data-theme="dark"] .dealer-main #myTable tbody td { border-bottom-color: var(--cbp-td-line); }
html[data-theme="dark"] .dealer-main #myTable tbody tr:hover { box-shadow: inset 0 0 0 9999px rgba(91,187,232,.05); }
html[data-theme="dark"] .dealer-main .dt-search input, html[data-theme="dark"] .dealer-main .dataTables_filter input,
html[data-theme="dark"] .dealer-main .dt-length select, html[data-theme="dark"] .dealer-main .dataTables_length select {
background: var(--cbp-input); border-color: var(--cbp-input-line); color: #e9e9e9; }
html[data-theme="dark"] .dealer-main .dt-info, html[data-theme="dark"] .dealer-main .dataTables_info { color: var(--cbp-muted-t); }
html[data-theme="dark"] .dealer-main .dt-paging .dt-paging-button, html[data-theme="dark"] .dealer-main .dataTables_paginate .paginate_button {
border-color: var(--cbp-input-line) !important; color: var(--cbp-body) !important; background: var(--cbp-surface) !important; }
html[data-theme="dark"] .dealer-main .dt-paging .dt-paging-button:hover, html[data-theme="dark"] .dealer-main .dataTables_paginate .paginate_button:hover {
background: #3e3e3e !important; color: var(--cbp-sky) !important; border-color: var(--cbp-chip-line) !important; }
html[data-theme="dark"] .dealer-main .dt-paging .dt-paging-button.current, html[data-theme="dark"] .dealer-main .dataTables_paginate .paginate_button.current {
background: var(--brand, #2f5496) !important; color: #fff !important; border-color: var(--brand, #2f5496) !important; }
html[data-theme="dark"] .dealer-main table.dataTable { color: var(--cbp-body); }
html[data-theme="dark"] .dealer-main .true { background: #123123; color: #4fce8e; }
html[data-theme="dark"] .dealer-main .false { background: #38161f; color: #f2778c; }
/* ---- Badges ---- */
html[data-theme="dark"] .b-badge.b-ok { background: #123123; color: #4fce8e; }
html[data-theme="dark"] .b-badge.b-bad { background: #38161f; color: #f2778c; }
html[data-theme="dark"] .b-badge.b-warn { background: #33280f; color: var(--cbp-amber-t); }
html[data-theme="dark"] .b-badge.b-live { background: #262626; color: #7db4ee; }
html[data-theme="dark"] .b-badge.b-muted { background: #2f2f2f; color: var(--cbp-muted-t); }
/* ---- Won-at-auction / watchlist cards (dashboard2, calculator, watchlist) ---- */
html[data-theme="dark"] .won-title { color: var(--cbp-ink); }
html[data-theme="dark"] .won-sub { color: var(--cbp-muted-t); }
html[data-theme="dark"] .won-card { background: var(--cbp-surface); border-color: var(--line, #434343); }
html[data-theme="dark"] .won-card:hover { box-shadow: 0 14px 30px -16px rgba(0,0,0,.7); }
html[data-theme="dark"] .won-name { color: var(--cbp-ink); }
html[data-theme="dark"] .won-meta { color: var(--cbp-muted-t); }
html[data-theme="dark"] .won-lot { color: var(--cbp-muted-t); }
html[data-theme="dark"] .won-badge.wc-ok { background: #123123; color: #4fce8e; }
html[data-theme="dark"] .won-badge.wc-warn { background: #33280f; color: var(--cbp-amber-t); }
html[data-theme="dark"] .won-badge.wc-bad { background: #38161f; color: #f2778c; }
html[data-theme="dark"] .wl-card { background: var(--cbp-surface); border-color: var(--line, #434343); }
html[data-theme="dark"] .wl-card:hover { box-shadow: 0 14px 30px -16px rgba(0,0,0,.7); }
html[data-theme="dark"] .wl-name { color: var(--cbp-ink); }
html[data-theme="dark"] .wl-lot { color: var(--cbp-muted-t); }
/* ---- Account toolbar: notifications panel, toasts stay navy ---- */
html[data-theme="dark"] .cbp-notif-panel { background: var(--cbp-surface-2); }
html[data-theme="dark"] .cbp-notif-head { color: var(--cbp-ink); }
html[data-theme="dark"] .cbp-notif-item { border-bottom-color: var(--cbp-td-line); }
html[data-theme="dark"] .cbp-notif-item.unread { background: rgba(91,187,232,.09); }
html[data-theme="dark"] .cbp-notif-item:hover { background: rgba(91,187,232,.14); }
html[data-theme="dark"] .cbp-notif-item:not(.unread) .cbp-notif-dot { background: #2b4a75; }
html[data-theme="dark"] .cbp-notif-title { color: var(--cbp-ink); }
html[data-theme="dark"] .cbp-notif-text { color: var(--cbp-body); }
html[data-theme="dark"] .cbp-notif-time { color: var(--cbp-muted-t); }
html[data-theme="dark"] .cbp-notif-empty { color: var(--cbp-muted-t); }
/* ---- Funding overlay ---- */
html[data-theme="dark"] .cbp-fund-card { background: var(--cbp-surface); }
html[data-theme="dark"] .cbp-fund-head { border-bottom-color: var(--cbp-line); }
html[data-theme="dark"] .cbp-fund-head h3 { color: var(--cbp-ink); }
html[data-theme="dark"] .cbp-fund-dep { background: #123123; color: #4fce8e; }
html[data-theme="dark"] .cbp-fund-dep small { color: #3f9d6d; }
html[data-theme="dark"] .cbp-fund-x { background: var(--cbp-surface-2); border-color: var(--cbp-input-line); color: var(--cbp-body); }
html[data-theme="dark"] .cbp-fund-x:hover { background: rgba(242,86,108,.15); color: var(--cbp-red-t); }
html[data-theme="dark"] .cbp-seg { background: var(--cbp-input); }
html[data-theme="dark"] .cbp-seg button { color: var(--cbp-muted-t); }
html[data-theme="dark"] .cbp-seg button.active { background: var(--cbp-surface-2); color: var(--cbp-sky); box-shadow: none; }
html[data-theme="dark"] .cbp-field label { color: var(--cbp-body); }
html[data-theme="dark"] .cbp-input { background: var(--cbp-input); border-color: var(--cbp-input-line); color: #e9e9e9; }
html[data-theme="dark"] .cbp-input::placeholder { color: #858585; }
html[data-theme="dark"] .cbp-note.muted { color: var(--cbp-muted-t); }
html[data-theme="dark"] .cbp-pending { color: var(--cbp-body); }
html[data-theme="dark"] .cbp-fund-deposit-line { color: var(--cbp-body); }
html[data-theme="dark"] .cbp-fund-deposit-line b { color: #4fce8e; }
html[data-theme="dark"] .cbp-fund-sub { border-top-color: var(--cbp-input-line); }
/* ---- Top-nav user dropdown (nav itself stays navy in both themes) ---- */
html[data-theme="dark"] .cbp-menu { background: var(--cbp-surface-2); border-color: var(--cbp-line); box-shadow: 0 18px 44px -12px rgba(0,0,0,.65); }
html[data-theme="dark"] .cbp-menu a { color: var(--cbp-body); }
html[data-theme="dark"] .cbp-menu a:hover { background: var(--cbp-hover); color: #fff; }
html[data-theme="dark"] .cbp-menu a svg { stroke: #c4c4c4; }
html[data-theme="dark"] .cbp-menu-sep { background: var(--cbp-line); }
/* ---- Dealer auth (customer login / register) ---- */
html[data-theme="dark"] .auth-shell { background: linear-gradient(180deg, #181818, #1c1c1c); }
html[data-theme="dark"] .auth-card { background: var(--cbp-surface); border-color: var(--cbp-line); }
html[data-theme="dark"] .auth-brand .b1 { color: #cfeafb; }
html[data-theme="dark"] .auth-head h1 { color: var(--cbp-ink); }
html[data-theme="dark"] .auth-head p { color: var(--cbp-muted-t); }
html[data-theme="dark"] .auth-field label { color: var(--cbp-body); }
html[data-theme="dark"] .auth-input { background: var(--cbp-input); border-color: var(--cbp-input-line); color: #e9e9e9; }
html[data-theme="dark"] .auth-input::placeholder { color: #858585; }
html[data-theme="dark"] .auth-check { color: var(--cbp-body); }
html[data-theme="dark"] #togglePassword:hover { background: rgba(255,255,255,.09); color: var(--cbp-sky); }
html[data-theme="dark"] .auth-foot { color: var(--cbp-muted-t); border-top-color: var(--cbp-line); }
html[data-theme="dark"] .auth-foot a { color: var(--cbp-sky); }
html[data-theme="dark"] .auth-alert-ok { background: #123123; color: #4fce8e; border-color: #1d4a34; }
html[data-theme="dark"] .auth-alert-err { background: #38161f; color: #f2778c; border-color: #57202c; }
html[data-theme="dark"] .cbp-wordmark .cw1 { color: #cfeafb; }
/* ---- Public landing (lp-*) — heroes/footer/page-heads are navy already ---- */
html[data-theme="dark"] .lp-search { background: var(--cbp-bg); }
html[data-theme="dark"] .lp-search-card { background: var(--cbp-surface); border: 1px solid var(--cbp-line); }
html[data-theme="dark"] .lp-search-card h3 { color: var(--cbp-ink); }
html[data-theme="dark"] .lp-search-card input, html[data-theme="dark"] .lp-search-card select {
background: var(--cbp-input); border-color: var(--cbp-input-line); color: #e9e9e9; }
html[data-theme="dark"] .lp-services { background: var(--cbp-bg); }
html[data-theme="dark"] .lp-cta { background: var(--cbp-bg); }
html[data-theme="dark"] .lp-sec-head h2 { color: var(--cbp-ink); }
html[data-theme="dark"] .lp-sec-head p { color: var(--cbp-body); }
html[data-theme="dark"] .lp-svc-card { background: var(--cbp-surface); border-color: var(--cbp-line); }
html[data-theme="dark"] .lp-svc-body h3, html[data-theme="dark"] .lp-svc-body h3 a { color: var(--cbp-ink); }
html[data-theme="dark"] .lp-svc-body p { color: var(--cbp-body); }
html[data-theme="dark"] .lp-article-wrap { background: var(--cbp-bg); }
html[data-theme="dark"] .lp-article { background: var(--cbp-surface); border-color: var(--cbp-line); color: var(--cbp-body); }
html[data-theme="dark"] .lp-article h1, html[data-theme="dark"] .lp-article h2, html[data-theme="dark"] .lp-article h3,
html[data-theme="dark"] .lp-article h4, html[data-theme="dark"] .lp-article strong { color: var(--cbp-ink); }
html[data-theme="dark"] .lp-article p, html[data-theme="dark"] .lp-article li { color: var(--cbp-body); }
html[data-theme="dark"] .lp-empty-pub { background: var(--cbp-surface); border-color: var(--cbp-line); color: var(--cbp-muted-t); }
html[data-theme="dark"] .lp-acc-wrap { background: var(--cbp-bg); }
html[data-theme="dark"] .lp-acc .accordion-item { background: var(--cbp-surface); border-color: var(--cbp-line); }
html[data-theme="dark"] .lp-acc .accordion-button { background: var(--cbp-surface); color: var(--cbp-ink); }
html[data-theme="dark"] .lp-acc .accordion-button:not(.collapsed) { background: var(--cbp-surface-2); color: var(--cbp-sky); }
html[data-theme="dark"] .lp-acc .accordion-button::after { filter: invert(.85); }
html[data-theme="dark"] .lp-acc .accordion-body { color: var(--cbp-body); }
html[data-theme="dark"] .lp-contact-wrap { background: var(--cbp-bg); }
html[data-theme="dark"] .lp-cform { background: var(--cbp-surface); border-color: var(--cbp-line); }
html[data-theme="dark"] .lp-cform label { color: var(--cbp-body); }
html[data-theme="dark"] .lp-cform input, html[data-theme="dark"] .lp-cform textarea, html[data-theme="dark"] .lp-cform select {
background: var(--cbp-input); border-color: var(--cbp-input-line); color: #e9e9e9; }
html[data-theme="dark"] .lp-info { background: var(--cbp-surface); border-color: var(--cbp-line); }
/* ---- Calculator ---- */
html[data-theme="dark"] .calc-head2 { border-bottom-color: var(--cbp-line); }
html[data-theme="dark"] .calc-head2 h2 { color: var(--cbp-ink); }
html[data-theme="dark"] .calc-head2 .hint { color: var(--cbp-muted-t); }
html[data-theme="dark"] .calc-section-label { color: var(--cbp-muted-t); }
html[data-theme="dark"] .calc-veh label { background: var(--cbp-input); border-color: var(--cbp-input-line); color: var(--cbp-body); }
html[data-theme="dark"] .calc-veh label:hover { border-color: var(--cbp-chip-line); background: var(--cbp-surface-2); }
html[data-theme="dark"] .calc-veh input:checked + label { border-color: var(--cbp-sky); background: rgba(91,187,232,.14); color: #fff; box-shadow: inset 0 0 0 1px var(--cbp-sky); }
html[data-theme="dark"] .calc-field label { color: var(--cbp-body); }
html[data-theme="dark"] .calc-select { background-color: var(--cbp-input); border-color: var(--cbp-input-line); color: #e9e9e9; }
html[data-theme="dark"] .bigsuv-info { color: var(--cbp-muted-t); }
html[data-theme="dark"] .bigsuv-info:hover { color: var(--cbp-sky); border-color: var(--cbp-sky); }
/* The modal itself, which had no dark rules whatsoever. The heading selector needs the
.bigsuv-box in it: at (0,2,2) it out-specifies the generic dark h3 rule at (0,1,2)
that was overriding the page and leaving light ink on a white box. */
html[data-theme="dark"] .bigsuv-box { background: var(--cbp-surface); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .bigsuv-box h3 { color: var(--cbp-ink); }
html[data-theme="dark"] .bigsuv-box p { color: var(--cbp-muted-t); }
html[data-theme="dark"] .bigsuv-box li { color: var(--cbp-body); }
html[data-theme="dark"] .bigsuv-box .bigsuv-close { color: var(--cbp-muted-t); }
/* ---- Notes (Keep-style): chrome flips via --np-* remap; colored cards keep
their pastel and re-scope --np-ink so their text stays dark and readable ---- */
html[data-theme="dark"] .notes-page .note-card:not([data-color="default"]),
html[data-theme="dark"] .notes-page .nm-modal:not([data-color="default"]) {
--np-ink: #2c2c2c; --np-muted: #5b5b5b; color: #2c2c2c; }
html[data-theme="dark"] .notes-page .note-card { border-color: var(--np-line); }
html[data-theme="dark"] .notes-page .note-card:hover { border-color: rgba(91,187,232,.35); }
html[data-theme="dark"] .notes-page .dp-pill { background: var(--cbp-surface-2); border-color: var(--cbp-input-line); }
html[data-theme="dark"] .notes-page .dp-pill:hover { background: #3e3e3e; border-color: var(--cbp-chip-line); }
html[data-theme="dark"] .notes-page .dp-pill.is-active { background: var(--cbp-chip); border-color: var(--cbp-chip-line); color: #fff; }
html[data-theme="dark"] .notes-page .note-create:hover { border-color: var(--cbp-chip-line); }
html[data-theme="dark"] .np-pop, html[data-theme="dark"] .np-float-pop {
background: var(--cbp-surface-2, #343434); border-color: var(--cbp-input-line, #494949); color: var(--cbp-body, #c4c4c4); }
html[data-theme="dark"] .np-pop h6, html[data-theme="dark"] .np-float-pop h6 { color: var(--cbp-ink, #ededed); }
/* ---- Plugins: nice-select, intl-tel-input ---- */
html[data-theme="dark"] .nice-select { background-color: var(--cbp-input); border-color: var(--cbp-input-line); color: #e9e9e9; }
html[data-theme="dark"] .nice-select .list { background-color: var(--cbp-surface-2); box-shadow: 0 14px 34px -10px rgba(0,0,0,.6); }
html[data-theme="dark"] .nice-select .option { color: var(--cbp-body); }
html[data-theme="dark"] .nice-select .option:hover, html[data-theme="dark"] .nice-select .option.focus,
html[data-theme="dark"] .nice-select .option.selected.focus { background-color: rgba(255,255,255,.09); color: #fff; }
html[data-theme="dark"] .iti__country-list { background: var(--cbp-surface-2); border-color: var(--cbp-input-line); color: var(--cbp-body); }
html[data-theme="dark"] .iti__country.iti__highlight { background: rgba(255,255,255,.09); }
html[data-theme="dark"] .iti__dial-code { color: var(--cbp-muted-t); }
/* ---- Fix pass. Notes: custom properties inherit from the NEAREST ancestor
that declares them — .notes-page re-declares --np-*, so a remap on html
never reaches its children. Remap on .notes-page itself (same element,
higher specificity). ---- */
html[data-theme="dark"] .notes-page {
--np-bg: #1c1c1c; --np-card: #292929; --np-line: #434343;
--np-ink: #dbdbdb; --np-muted: #9b9b9b;
--np-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
--np-shadow-hi: 0 2px 6px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.5);
--c-default: #292929;
}
html[data-theme="dark"] .notes-page .dp-head h1, html[data-theme="dark"] .notes-page .dp-head .dp-title { color: var(--cbp-ink, #ededed); }
html[data-theme="dark"] .notes-page .dp-pill { color: #dedede; }
html[data-theme="dark"] .notes-page .dp-pill.is-active { color: #fff; }
/* Inline color:black / red / green / blue hardcoded in blade markup (dates,
VIN/CONTAINER labels, ledger values) — remap to the dark-legible family. */
html[data-theme="dark"] [style*="color: black"], html[data-theme="dark"] [style*="color:black"] { color: var(--cbp-body) !important; }
html[data-theme="dark"] td [style*="color: red"], html[data-theme="dark"] td [style*="color:red"] { color: var(--cbp-red-t, #f2566c) !important; }
html[data-theme="dark"] td [style*="color: green"], html[data-theme="dark"] td [style*="color:green"] { color: var(--cbp-green-t, #43c983) !important; }
html[data-theme="dark"] td [style*="color: blue"], html[data-theme="dark"] td [style*="color:blue"] { color: var(--cbp-blue-t, #7db4ee) !important; }
/* My Cars board: owner picker, pay-ledger labels, in-table inputs, total pill */
html[data-theme="dark"] .own-trigger.has-owner { color: #dedede; }
html[data-theme="dark"] .own-trigger:hover, html[data-theme="dark"] .own-trigger:focus-visible {
background: rgba(91,187,232,.1); border-color: var(--cbp-chip-line); color: var(--cbp-sky); }
/* The label was given a dark colour and the NUMBER beside it was not, so the
money column was #22314a on #10294a: 1.12:1. The figure a dealer opens this
page to read was the one thing on it they could not see. Every state of the
ledger moves together now — owed, received and voided. */
html[data-theme="dark"] .pay-ledger .pl-lbl { color: var(--cbp-muted-t, #9f9f9f); }
html[data-theme="dark"] .pay-ledger .pl-val { color: var(--cbp-ink); }
html[data-theme="dark"] .pay-ledger .pl-recv { color: var(--cbp-green-t, #43c983); }
html[data-theme="dark"] .pay-ledger .pl-due { color: #ff7a8c; }
html[data-theme="dark"] .pay-ledger .pl-due.pl-paid { color: var(--cbp-green-t, #43c983); }
html[data-theme="dark"] .pay-ledger .pl-void { color: var(--cbp-muted-t, #9f9f9f); }
html[data-theme="dark"] .pay-ledger .pl-note { color: #ff8a7a; }
/* DataTables 2.1.8 ships `div.dt-container .dt-paging .dt-paging-button { color:
inherit !important }`. It beat every paging rule we had, so the buttons took the
BODY text colour no matter what we painted behind them: in light the current
page was #46586f on brand blue at 1.02:1, and in dark the arrows kept the
vendor's own rgba(0,0,0,.5) on navy at 1.26:1. These selectors carry
div.dt-container so they OUTRANK the vendor rule rather than tie with it. */
.dealer-main div.dt-container .dt-paging .dt-paging-button.current { color: #fff !important; }
html[data-theme="dark"] .dealer-main div.dt-container .dt-paging .dt-paging-button { color: var(--cbp-body) !important; }
html[data-theme="dark"] .dealer-main div.dt-container .dt-paging .dt-paging-button.current { color: #fff !important; }
html[data-theme="dark"] .dealer-main div.dt-container .dt-paging .dt-paging-button.disabled { color: var(--cbp-muted-t, #9f9f9f) !important; opacity: .7; }
/* --brand (#2f5496) is a colour to put BEHIND white text, not one to write in.
On a navy surface it lands between 1.96 and 2.35 — the watchlist "Open", the
auction links, "Contact CarBidPro". Buttons and chips keep it as a fill. */
html[data-theme="dark"] .dealer-main a:not([class*="btn"]):not([class*="chip"]):not([class*="pill"]):not([class*="cta"]),
html[data-theme="dark"] .wl-open,
html[data-theme="dark"] .apps-plat { color: #7fc4ee; }
/* --brand does three different jobs and a token can only hold one value, so these
are the places it is used as INK rather than as a fill. On a graphite card the
brand indigo measures 1.96 to 1 -- present and unreadable -- and it was that
before this pass as well; the slate fill would be 2.07, no better. Text has to go
the other way, so these take the link blue at 7.23 on a card and 8.47 on the page.
Listed rather than tokenised because they are a closed set of thirteen and naming
them here means the next person can grep for the reason. */
html[data-theme="dark"] .won-open-all,
html[data-theme="dark"] .bidlimit-card .bl-val.accent,
html[data-theme="dark"] .dp-kpi .k-val.accent,
html[data-theme="dark"] .dp-empty a,
html[data-theme="dark"] .wl-open,
html[data-theme="dark"] .ic-tab:hover,
html[data-theme="dark"] .ic-addpart,
html[data-theme="dark"] .ic-claim-view,
html[data-theme="dark"] .apps-foot a,
html[data-theme="dark"] .apps-dl-alt:hover,
html[data-theme="dark"] .apps-old summary:hover,
html[data-theme="dark"] .copy-btn:hover,
html[data-theme="dark"] .own-trigger:hover { color: var(--cbp-link, #8bbddf) !important; }
/* Two gradients whose LIGHT end is hardcoded, so turning the token only turned half
of each and they faded from bright blue into slate -- the same fading-into-grey
fault the admin page-title chip had. Both are round marks, so no texture: a
contour pattern inside a 34px disc is dirt. */
html[data-theme="dark"] .ds-avatar,
html[data-theme="dark"] .chat-head-ic {
background: linear-gradient(135deg, var(--cbp-blue-fill, #4c5a6b), #5f7085); }
/* And two more where the hardcoded end is the TOP of a vertical gradient. */
html[data-theme="dark"] .ds-link.active,
html[data-theme="dark"] .ic-submit {
background: linear-gradient(180deg, #5c6b80, var(--cbp-blue-fill, #4c5a6b)); }
/* A link with a solid fill is a button wearing an . Its label stays white. */
html[data-theme="dark"] .bl-cta, html[data-theme="dark"] .bl-cta:hover { color: #fff; }
/* The arrow between the deposit and the auction chip, and the line under the
figure. Both were drawn light enough to disappear against the card. */
.dealer-main .bidlimit-card .bl-arrow { color: #7c8ca6; }
html[data-theme="dark"] .dealer-main .bidlimit-card .bl-arrow { color: var(--cbp-muted-t, #9f9f9f); }
.dealer-main .bidlimit-card .bl-sub { color: #5c6b80; }
html[data-theme="dark"] .dealer-main .bidlimit-card .bl-sub { color: var(--cbp-muted-t, #9f9f9f); }
.dealer-main .bidlimit-card .bl-lbl { color: #5c6b80; }
html[data-theme="dark"] .dealer-main .bidlimit-card .bl-lbl { color: var(--cbp-muted-t, #9f9f9f); }
/* #8a93a3 on the white card measured 3.10:1 at 11px, and .bl-hold's #e2304e measured
4.41 in light and 3.31 on the dark surface -- it had no rule in either theme. Both
values here are ones already in the palette: #5f7189 is the single muted value, and
#d12845 the darker red .cbp-avatar adopted. Specificity (0,3,0) beats dashboard2's
(0,2,0), so no !important and no edit to the page.
The dark half of .bl-hold is NOT optional: darkening it for light would have pushed
dark from 3.31 to worse, which is the regression 2.0e records making once already. */
.dealer-main .bidlimit-card .bl-hold-sub { color: #5f7189; }
.dealer-main .bidlimit-card .bl-hold { color: #d12845; }
html[data-theme="dark"] .dealer-main .bidlimit-card .bl-hold { color: #ff8fa0; }
/* The VIN in the cars table is a link with its own blue, under the generic rule. */
html[data-theme="dark"] .dealer-main #myTable a { color: #7fc4ee; }
/* White on #00b050 is 2.87. This is the button that takes money. */
.act-btn.act-pay { background: #0b7a3b !important; border-color: #0b7a3b !important; }
.act-btn.act-pay:hover { background: #096331 !important; }
/* A hardcoded #46586f label: the light body colour, left behind on a dark page. */
html[data-theme="dark"] .dealer-main label { color: var(--cbp-body); }
html[data-theme="dark"] .dealer-main #myTable input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]) {
background: var(--cbp-input); border-color: var(--cbp-input-line); color: var(--cbp-input-ink, #e9e9e9); }
html[data-theme="dark"] .total-due-pill { background: var(--cbp-bad-bg, #38161f); border-color: var(--cbp-bad-line, #57202c); color: var(--cbp-bad-ink, #f2778c); }
/* Fix pass 2: Tom Select combos (calculator state/title pickers), the currency
converter result cells, and the announcement toast. */
/* background-COLOR, not the shorthand: `background` resets background-image, and on
.ts-control that image is the chevron -- so dark mode silently lost the caret on
every Tom Select on the site. Same trap the .calc-select rule above avoids. */
html[data-theme="dark"] .ts-wrapper .ts-control,
html[data-theme="dark"] .ts-wrapper.single .ts-control {
background-color: var(--cbp-input) !important; border-color: var(--cbp-input-line) !important; color: var(--cbp-input-ink, #e9e9e9) !important; }
/* The CONTROL paints the field and carries the chevron (a background-image). The
inner input fills it, so painting the input opaque hides that chevron -- which is
why the caret was missing in dark only. It needs the text colour, not a fill. */
html[data-theme="dark"] .ts-control input {
background-color: transparent !important; color: var(--cbp-input-ink, #e9e9e9) !important; }
html[data-theme="dark"] .ts-control input::placeholder { color: var(--cbp-ph, #858585); }
html[data-theme="dark"] .ts-dropdown { background: var(--cbp-surface-2); border-color: var(--cbp-input-line); color: var(--cbp-body); }
html[data-theme="dark"] .ts-dropdown .option { color: var(--cbp-body); }
html[data-theme="dark"] .ts-dropdown .option:hover, html[data-theme="dark"] .ts-dropdown .active { background: rgba(255,255,255,.09); color: #fff; }
html[data-theme="dark"] .ts-dropdown .no-results, html[data-theme="dark"] .ts-dropdown .create { color: var(--cbp-muted-t, #9f9f9f); }
html[data-theme="dark"] .calc-fx-cell { background: var(--cbp-surface-2); border-color: var(--cbp-line); }
html[data-theme="dark"] .calc-fx-cell .lbl { color: var(--cbp-muted-t, #9f9f9f); }
html[data-theme="dark"] .calc-fx-cell .amt { color: var(--cbp-ink, #ededed); }
html[data-theme="dark"] .ann-toast { background: var(--cbp-surface-2); color: var(--cbp-body); box-shadow: 0 18px 44px -14px rgba(0,0,0,.8); }
html[data-theme="dark"] .ann-toast-title { color: var(--cbp-ink, #ededed); }
html[data-theme="dark"] .ann-toast-body { color: var(--cbp-body); }
html[data-theme="dark"] .ann-toast-body p, html[data-theme="dark"] .ann-toast-body span { color: var(--cbp-body) !important; }
html[data-theme="dark"] .ann-toast-x { color: var(--cbp-muted-t, #9f9f9f); }
/* Fix pass 3: payment-history KPI cards + its own td color rule, and the
contact info cards that force #1b2940 on all children. */
html[data-theme="dark"] .ph-kpi { background: var(--cbp-surface); }
html[data-theme="dark"] .k-in .k-val { color: var(--cbp-green-t, #43c983); }
html[data-theme="dark"] .k-out .k-val { color: var(--cbp-red-t, #f2566c); }
html[data-theme="dark"] .k-net .k-val { color: var(--cbp-ink, #ededed); }
html[data-theme="dark"] .dealer-main #myTable tbody td { color: var(--cbp-body); }
html[data-theme="dark"] .ph-vin { color: #dedede; }
html[data-theme="dark"] .ph-detail { color: var(--cbp-body); }
html[data-theme="dark"] .ph-amt.in { color: var(--cbp-green-t, #43c983); }
html[data-theme="dark"] .ph-amt.out { color: var(--cbp-red-t, #f2566c); }
html[data-theme="dark"] .lp-info-body, html[data-theme="dark"] .lp-info-body * { color: #e5e5e5; }
html[data-theme="dark"] .lp-info-body h3 { color: var(--cbp-muted-t, #9f9f9f); }
html[data-theme="dark"] .lp-info-body a { color: var(--cbp-sky); }
/* Dealer-wide form controls: BS4 .form-control selects (ADD TEAM picker), bare
inputs (pay box) and any other stray field — same blanket as the admin side. */
html[data-theme="dark"] .dealer-main input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=image]):not([type=range]),
html[data-theme="dark"] .dealer-main select,
html[data-theme="dark"] .dealer-main textarea,
html[data-theme="dark"] .dealer-shell .form-control {
background-color: var(--cbp-input) !important; border-color: var(--cbp-input-line) !important; color: var(--cbp-input-ink, #e9e9e9) !important; }
html[data-theme="dark"] .dealer-main option { background: var(--cbp-input); color: var(--cbp-input-ink, #e9e9e9); }
html[data-theme="dark"] .dealer-main input::placeholder,
html[data-theme="dark"] .dealer-main textarea::placeholder { color: var(--cbp-ph, #858585); }
/* Auction bid-limit strip above My Cars (white card + light inner surfaces) */
html[data-theme="dark"] .bidlimit-card { background: var(--cbp-surface); border-color: var(--cbp-line); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
html[data-theme="dark"] .bidlimit-card .bl-val { color: #ebebeb; }
html[data-theme="dark"] .bidlimit-card .bl-val.accent { color: var(--cbp-sky); }
html[data-theme="dark"] .bidlimit-card .bl-surface { background: var(--cbp-bg-2); border-color: var(--cbp-line); }
html[data-theme="dark"] .bidlimit-card .bl-arrow { color: #666666; }
html[data-theme="dark"] .bidlimit-card .bl-sub { color: #919191; }
html[data-theme="dark"] .bidlimit-card .bl-hold-sub { color: #919191; }
html[data-theme="dark"] .bidlimit-card .bl-deposit { border-right-color: var(--cbp-line); }
/* ============================================================
DARK COMFORT PASS
Measured across twenty admin and dealer pages, then tuned to numbers rather
than to taste. Buttons keep their meaning and lose their glow: same hue, about
half the colourfulness, lightness placed so the label on them clears 4.8 to 1
instead of the 1.76 white-on-orange was managing. Text steps back from pure
white. Nothing here exists outside dark mode.
============================================================ */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .bg-primary,
html[data-theme="dark"] .bg-info {
background: #2e719c !important; border-color: #386f92 !important; color: #f0f8fe !important; }
html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-info:hover, html[data-theme="dark"] .btn-info:focus {
background: #35809f !important; border-color: #4a86a8 !important; color: #ffffff !important; }
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .green_btn,
html[data-theme="dark"] .btn-add,
html[data-theme="dark"] .custom_grreen2,
html[data-theme="dark"] .bg-success,
html[data-theme="dark"] .label-success {
background: #2f784d !important; border-color: #3a8659 !important; color: #f1f9f3 !important; }
html[data-theme="dark"] .btn-success:hover, html[data-theme="dark"] .green_btn:hover,
html[data-theme="dark"] .btn-add:hover, html[data-theme="dark"] .custom_grreen2:hover {
background: #37895a !important; border-color: #479a6a !important; color: #ffffff !important; }
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .bg-danger,
html[data-theme="dark"] .label-danger,
html[data-theme="dark"] .label.bg-danger {
background: #a24b50 !important; border-color: #b3585c !important; color: #fff4f4 !important; }
html[data-theme="dark"] .btn-danger:hover, html[data-theme="dark"] .btn-danger:focus {
background: #b1565b !important; border-color: #c26569 !important; color: #ffffff !important; }
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .bg-warning,
html[data-theme="dark"] .label-warning {
background: #8b6623 !important; border-color: #9c752c !important; color: #fbf6ee !important; }
html[data-theme="dark"] .btn-warning:hover, html[data-theme="dark"] .btn-warning:focus {
background: #9c752c !important; border-color: #ad8437 !important; color: #ffffff !important; }
html[data-theme="dark"] .btn-purple, html[data-theme="dark"] .bg-purple {
background: #57639e !important; border-color: #6572ad !important; color: #f4f6ff !important; }
html[data-theme="dark"] .btn-purple:hover { background: #6572ad !important; color: #ffffff !important; }
/* Pills and badges are the same colours at small sizes, where a saturated fill
reads as a flashing dot rather than a label. */
html[data-theme="dark"] .badge-primary, html[data-theme="dark"] .badge-info { background: #2e719c !important; color: #f0f8fe !important; }
html[data-theme="dark"] .badge-success { background: #2f784d !important; color: #f1f9f3 !important; }
html[data-theme="dark"] .badge-danger, html[data-theme="dark"] .badge { background: #a24b50 !important; color: #fff4f4 !important; }
html[data-theme="dark"] .badge-warning { background: #8b6623 !important; color: #fbf6ee !important; }
/* Text that was carrying meaning through pure saturation. Same hue, same job,
roughly half the colourfulness. */
html[data-theme="dark"] .text-primary, html[data-theme="dark"] .text-info { color: #90b8e3 !important; }
html[data-theme="dark"] .text-success { color: #85c79e !important; }
html[data-theme="dark"] .text-danger { color: #dd8f94 !important; }
html[data-theme="dark"] .text-warning { color: #dbb477 !important; }
html[data-theme="dark"] .text-muted { color: #9b9b9b !important; }
/* Pure white on the navy bars ran at 14 to 17 to 1. This is still a bright,
clearly-first-class white -- it just stops being a light source. */
html[data-theme="dark"] .main-header .nav-link,
html[data-theme="dark"] .main-header a,
html[data-theme="dark"] .main-header .logo,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-header h1, html[data-theme="dark"] .modal-header h2,
html[data-theme="dark"] .modal-header h3, html[data-theme="dark"] .modal-header h4,
html[data-theme="dark"] .modal-header h5, html[data-theme="dark"] .modal-header h6,
html[data-theme="dark"] .modal-header .modal-title,
html[data-theme="dark"] .modal-header .close { color: #eeeeee !important; }
html[data-theme="dark"] [style*="color: white"], html[data-theme="dark"] [style*="color:white"],
html[data-theme="dark"] [style*="color: #fff"], html[data-theme="dark"] [style*="color:#fff"] { color: #eeeeee !important; }
/* A colour that means something at 12 px has to keep meaning it without shouting. */
html[data-theme="dark"] .true, html[data-theme="dark"] .cx-ok { color: #85c79e !important; }
html[data-theme="dark"] .false, html[data-theme="dark"] .cx-no { color: #dd8f94 !important; }
/* The Copart and IAAI rail buttons and the user avatar used to be repainted here,
muted for a graphite rail. The rail went back to navy in an earlier fix and these
were never re-measured, so at night the two biggest buttons a dealer presses ran
at 2.12 and 1.70 against the rail behind them — worse than daylight. In their own
brand colours on the re-washed rail they read 3.06 and 3.06, above the 3:1
boundary rule for the first time in EITHER theme, and white on each still clears
AA. Nothing replaces them, on purpose. */
html[data-theme="dark"] .k-val { color: var(--cbp-ink) !important; }
html[data-theme="dark"] .cbp-deposit-amt { color: #85c79e !important; }
html[data-theme="dark"] .k-dot { background: #46598a !important; }
/* ---- documents and tables that kept their daylight ink ----
The credit-terms and insurance pages are long documents written in a text editor,
and the editor bakes a near-black into the text. On the dark card that landed at
1.27 to 1: present, but unreadable. Same for the dealer tables. */
html[data-theme="dark"] .terms-card .ql-editor,
html[data-theme="dark"] .ql-editor,
html[data-theme="dark"] .ql-editor p,
html[data-theme="dark"] .ql-editor li,
html[data-theme="dark"] .ql-editor span,
html[data-theme="dark"] .ql-editor strong,
html[data-theme="dark"] .ql-editor u,
html[data-theme="dark"] .ql-editor h1, html[data-theme="dark"] .ql-editor h2,
html[data-theme="dark"] .ql-editor h3, html[data-theme="dark"] .ql-editor h4 { color: var(--cbp-body) !important; }
html[data-theme="dark"] .ql-editor strong, html[data-theme="dark"] .ql-editor b { color: var(--cbp-ink) !important; }
html[data-theme="dark"] .ql-editor a { color: var(--cbp-link) !important; }
html[data-theme="dark"] .dp-table tbody td { color: var(--cbp-body) !important; border-bottom-color: var(--cbp-td-line) !important; }
html[data-theme="dark"] .dp-table thead th { background: var(--cbp-th-bg) !important; color: var(--cbp-th-ink) !important; }
/* the deposit pill kept a pale green background under its now-soft green text */
html[data-theme="dark"] .cbp-deposit { background: #1c3527 !important; border-color: #2f5a41 !important; }
html[data-theme="dark"] .cbp-deposit-amt { color: #85c79e !important; }
html[data-theme="dark"] .cbp-deposit::after { background: #2f8f57 !important; color: #f0fff6 !important; } html[data-theme="dark"] .cbp-deposit:hover::after { background: #3aa768 !important; }
/* A document written in the editor can carry a background colour on a run of text.
White highlight on white paper is invisible by design; on a dark card it is a slab. */
html[data-theme="dark"] .ql-editor [style*="background"],
html[data-theme="dark"] .terms-card [style*="background: rgb(255"],
html[data-theme="dark"] .terms-card [style*="background-color: rgb(255"] { background: transparent !important; }
/* ---- last pass, from the final measurement ---- */
html[data-theme="dark"] a:not([class*="btn"]):not(.ds-link):not(.cbp-link) { color: var(--cbp-link); }
html[data-theme="dark"] .apps-spec-mono, html[data-theme="dark"] .apps-card dd,
html[data-theme="dark"] .apps-card dt { color: #cacaca !important; }
html[data-theme="dark"] .cbp-link.active, html[data-theme="dark"] .ds-lbl { color: #e6e6e6 !important; }
html[data-theme="dark"] .scw-launch-label { color: #d5d5d5 !important; }
html[data-theme="dark"] .scw-title, html[data-theme="dark"] .scw-sub { color: #ececec !important; }
html[data-theme="dark"] .apps-help a, html[data-theme="dark"] .apps-note a,
html[data-theme="dark"] [class*="apps-"] a:not(.apps-dl) { color: var(--cbp-link) !important; }
/* ---- final sweep ----
The dealer bar and the two auction call-to-action buttons were the last bright
spots: white on navy at 14 to 1, and body-grey text sitting on a full-strength
Copart blue and IAAI red at under 2.5 to 1 -- the two biggest buttons a dealer
presses, and the hardest to read at night. */
/* The chrome now turns grey at night with the rest of the page, and its ink keeps
the brand's cool white rather than going flat grey — that cool white is the only
thing left tying the bar to the logo sitting on it. #dfe9f7 reads 12.2:1 on the
night bar where #e3e3e3 read 11.2:1, so this is a gain, not a trade. */
html[data-theme="dark"] .cbp-link, html[data-theme="dark"] .cbp-link.active,
html[data-theme="dark"] .cbp-link-rightgroup { color: #dfe9f7 !important; }
html[data-theme="dark"] .apps-card a, html[data-theme="dark"] .apps-dl { color: #e6e6e6 !important; }
html[data-theme="dark"] .apps-dl { background: #2b6b95 !important; border-color: #35688c !important; color: #f2f7fc !important; }
html[data-theme="dark"] .apps-card dd, html[data-theme="dark"] .apps-card dt,
html[data-theme="dark"] .apps-spec-mono { color: #c4c4c4 !important; }
html[data-theme="dark"] .bl-cta-copart, html[data-theme="dark"] .bl-tag-copart {
background: #2e719c !important; border-color: #386f92 !important; color: #f0f8fe !important; }
html[data-theme="dark"] .bl-cta-iaai, html[data-theme="dark"] .bl-tag-iaai {
background: #8a2f36 !important; border-color: #9c3b42 !important; color: #ffeaea !important; }
html[data-theme="dark"] .total-due-pill, html[data-theme="dark"] .total-due-pill b,
html[data-theme="dark"] .bl-hold { color: var(--cbp-red-t) !important; }
html[data-theme="dark"] .lbl { color: #acacac !important; }
/* header.blade.php sets these at (0,3,1) with !important, so the night version has
to be at least as specific or the bar keeps its daylight white. */
html[data-theme="dark"] .cbp-nav .cbp-links a.cbp-link,
html[data-theme="dark"] .cbp-nav .cbp-links a.cbp-link.active,
html[data-theme="dark"] .cbp-nav .cbp-links a.cbp-link:hover { color: #f6f9ff !important; }
html[data-theme="dark"] .cbp-nav a.cbp-link-rightgroup { color: #dfe9f7 !important; }
/* The catch-all dark link rule further up beats the footer's own colours on
specificity -- it carries three :not() clauses and each one counts. So at night
every footer link turned link-blue and the white hover stopped firing: hovering a
footer link changed nothing but the pointer. The footer is the last thing on every
public page, so it read as broken rather than as a theme. The hovers need
!important too, or they lose to the base rule below them. Colour only; the
footer's texture, wash and light are untouched. */
html[data-theme="dark"] .cbp-footer-links a,
html[data-theme="dark"] .cbp-footer-contact a,
html[data-theme="dark"] .cbp-footer-legal a { color: #dfe9f7 !important; }
html[data-theme="dark"] .cbp-footer-links a:hover,
html[data-theme="dark"] .cbp-footer-contact a:hover,
html[data-theme="dark"] .cbp-footer-legal a:hover { color: #fff !important; }
/* And the section headings stop being the bluest thing on a grey page. */
html[data-theme="dark"] .cbp-footer h4 { color: #c3ccd9; }
/* A tick box drawn by the browser follows the colour scheme it thinks it is in.
With an accent colour set but no scheme, Chrome paints the EMPTY box in a muddy
tan on a dark page. Telling the control it is in the dark makes the empty state
a dark box again, and leaves the ticked one the accent blue. */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"],
html[data-theme="dark"] input[type="range"],
html[data-theme="dark"] progress { color-scheme: dark; }