@charset "UTF-8"; /* A count on a filled chip has to take the chip's own label colour, not the page ink -- #dfdfdf on the primary blue is 3.98, under the bar for small text. */ html[data-theme="dark"] .label, html[data-theme="dark"] .badge, html[data-theme="dark"] .label-primary, html[data-theme="dark"] .label-info, html[data-theme="dark"] .badge-primary, html[data-theme="dark"] .badge-info { color: #f0f8fe; } html[data-theme="dark"] .label-custom, html[data-theme="dark"] [class*="label-"][style*="009688"], html[data-theme="dark"] .label-success, html[data-theme="dark"] .badge-success { background: #16564f !important; color: #eafaf7 !important; } html[data-theme="dark"] .label-warning, html[data-theme="dark"] .badge-warning, html[data-theme="dark"] .cbp-side-badge--warn { background: #8b6623 !important; color: #fbf6ee !important; } html[data-theme="dark"] .label-danger, html[data-theme="dark"] .badge-danger { background: #a24b50 !important; color: #fff4f4 !important; } /* Bootstrap's inline code pink is 3.81 on graphite and is used for field names. */ html[data-theme="dark"] code, html[data-theme="dark"] kbd { background: var(--cbp-input); color: #d59ab4; } /* Stored rich text (the insurance and credit-terms documents). The editor writes its own colours into the saved HTML, so the only thing that reaches them is a rule at higher specificity that does not care what the tag says. */ /* This rule exists to strip the white highlight the text editor bakes into a saved document. Including the CARD ITSELF in the list, and not just the things inside it, took the paper away along with the highlight: one rule paints the article card, this one at the same weight and later in the file painted it away again -- so at night the terms page was words floating on the page background inside a faint outline. Only the container is removed from the list. The bare .ql-editor member stays: it is load-bearing for the pattern the admin views share. */ html[data-theme="dark"] .ql-editor, html[data-theme="dark"] .ql-editor * , html[data-theme="dark"] .lp-article * { background-color: transparent !important; } html[data-theme="dark"] .ql-editor strong, html[data-theme="dark"] .ql-editor b, html[data-theme="dark"] .ql-editor u, html[data-theme="dark"] .ql-editor span, html[data-theme="dark"] .ql-editor p, html[data-theme="dark"] .ql-editor li, 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 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-ink) !important; } /* TomSelect renders its control as a plain white box with no theme hook. */ html[data-theme="dark"] .ts-control, html[data-theme="dark"] .ts-dropdown { background: var(--cbp-input) !important; color: var(--cbp-ink) !important; border-color: var(--cbp-input-line) !important; } html[data-theme="dark"] .ts-dropdown .option.active, html[data-theme="dark"] .ts-dropdown .active { background: var(--cbp-surface-2) !important; color: var(--cbp-ink) !important; } html[data-theme="dark"] .ts-control input, html[data-theme="dark"] .ts-control input::placeholder { color: var(--cbp-muted-t) !important; } /* Chat and pending-customer names were still carrying daylight ink. */ html[data-theme="dark"] .ac-name { color: var(--cbp-ink) !important; } html[data-theme="dark"] .ac-chip.closed { color: var(--cbp-body) !important; } html[data-theme="dark"] .pend-rd .pend-f b, html[data-theme="dark"] .pend-rd .pend-name, html[data-theme="dark"] .pend-rd .pend-when b { color: var(--cbp-ink) !important; } /* The brand red is a light red, and white on it is 4.41 -- just under the bar for the small labels that use it. Darkened for night only; the hue is unchanged. */ html[data-theme="dark"] .cbp-cta, html[data-theme="dark"] .lp-btn-primary, html[data-theme="dark"] .lp-svc-num { background: #b8253f !important; color: #fff !important; } html[data-theme="dark"] .lp-sec-eyebrow { color: var(--cbp-link) !important; } html[data-theme="dark"] .ann-toast-x { color: #fff !important; } /* Colours written into the tag, second pass: the editors and the mail views use rgb() as often as hex, and Georgian body copy arrives in a link blue. */ html[data-theme="dark"] [style*="color:rgb(0,0,0)"], html[data-theme="dark"] [style*="color: rgb(0, 0, 0)"], html[data-theme="dark"] [color="black"], html[data-theme="dark"] font[color="#000000"] { color: var(--cbp-ink) !important; } html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color: #fff"], html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background: white"] { background: var(--cbp-surface) !important; } /* ---- Round three ------------------------------------------------------- Everything below came out of a measurement pass over 103 rendered pages, not out of memory. What was left after round two was small and specific. */ /* Several admin pages ship a full-screen light curtain that javascript takes away once the page has finished loading. In dark mode that is a white screen for as long as the page takes to arrive. */ html[data-theme="dark"] #preloader { background-color: var(--cbp-bg) !important; } html[data-theme="dark"] #preloader #status { filter: invert(1) hue-rotate(180deg); } /* The counts on the Titles and Terminal tabs are written into the tag as black. Turning that into page ink put grey on the brand blue at 3.98:1 -- the right answer is whatever colour that button already uses for its own label, which is what inherit means here. */ html[data-theme="dark"] .btn [style*="color: black"], html[data-theme="dark"] .btn [style*="color:black"] { color: inherit !important; } /* Both swatches on Add Car are the colour they name, with white written into the tag; dark mode dimmed that white and took the red one to 3.45:1. */ html[data-theme="dark"] label[style*="background: green"], html[data-theme="dark"] label[style*="background:green"], html[data-theme="dark"] label[style*="background: red"], html[data-theme="dark"] label[style*="background:red"] { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.5); } /* Safety net for pages this sweep did not reach: these seven are the daylight inks this codebase writes straight into the tag, and every one of them lands between 1.2 and 2.1 against graphite -- text that is there but cannot be read. Nothing in the panel is deliberately kept on white (the mail bodies are inside iframes, where no rule of ours reaches), so this cannot invert anything that was correct. */ html[data-theme="dark"] [style*="color:#2a3a52"], html[data-theme="dark"] [style*="color: #2a3a52"], html[data-theme="dark"] [style*="color:#22344c"], html[data-theme="dark"] [style*="color: #22344c"], html[data-theme="dark"] [style*="color:#16233a"], html[data-theme="dark"] [style*="color: #16233a"], html[data-theme="dark"] [style*="color:#334155"], html[data-theme="dark"] [style*="color: #334155"], html[data-theme="dark"] [style*="color:#0f2038"], html[data-theme="dark"] [style*="color: #0f2038"], html[data-theme="dark"] [style*="color:#2c3f5c"], html[data-theme="dark"] [style*="color: #2c3f5c"], html[data-theme="dark"] [style*="color:#3d5069"], html[data-theme="dark"] [style*="color: #3d5069"] { color: var(--cbp-ink) !important; } html[data-theme="dark"] [style*="color:#46586f"], html[data-theme="dark"] [style*="color: #46586f"], html[data-theme="dark"] [style*="color:#5b6b82"], html[data-theme="dark"] [style*="color: #5b6b82"], html[data-theme="dark"] [style*="color:#5f7186"], html[data-theme="dark"] [style*="color: #5f7186"], html[data-theme="dark"] [style*="color:#5a6b82"], html[data-theme="dark"] [style*="color: #5a6b82"] { color: var(--cbp-body) !important; } html[data-theme="dark"] [style*="color:#64748b"], html[data-theme="dark"] [style*="color: #64748b"], html[data-theme="dark"] [style*="color:#6b7a90"], html[data-theme="dark"] [style*="color: #6b7a90"], html[data-theme="dark"] [style*="color:#7a8aa0"], html[data-theme="dark"] [style*="color: #7a8aa0"], html[data-theme="dark"] [style*="color:#8295ad"], html[data-theme="dark"] [style*="color: #8295ad"] { color: var(--cbp-muted-t) !important; } /* ---- Phones: what a thumb can actually hit ------------------------------ Measured at 390px across every page in the panel and the cabinet. Nothing overflowed sideways, which is the failure people notice first, so what was left was the quiet one: controls drawn at mouse size. A 12px pencil icon in a table row is a 12px target, and the delete icon is right next to it. These raise the box without moving the mark inside it, and only on a phone. */ @media (max-width: 768px) { .sidebar-toggle { min-width: 44px; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; } td .btn-sm, td .btn-xs, .box-tools .btn-sm, .box-tools .btn-xs { min-width: 36px; min-height: 36px; } td .btn-sm + .btn-sm, td .btn-xs + .btn-xs, td .btn-sm + .btn-xs { margin-left: 6px; } /* Padding on the icon itself grows the hit box without growing the row: vertical padding on an inline element overflows the line box instead of stretching it, and the horizontal half pushes neighbouring icons apart, which is the other half of the problem. */ td a > i.fa, td a > i.fal, td a > i.far, td a > i.fas, td a > i.glyphicon, .dp-table td a > i { padding: 10px 9px; } .cx-emg-btn { min-width: 32px; min-height: 32px; } .cx-emg-pen, .cust-team-badge { min-height: 34px; } .tm-line-link { min-height: 34px; display: flex; align-items: center; } .auth-check, label.auth-check { min-height: 34px; align-items: center; } input.form-control, select.form-control, .form-control { min-height: 34px; } /* Text that is a label rather than a badge gets back over eleven pixels. */ .cbp-mnav-title, .k-lbl, .ica-legend, .cx-emg-ttl, .cx-emg-by { font-size: 11.5px; } .dl-chip, .ica-current-pill, .cs-tag, .cs-dorm { font-size: 11px; } } /* Inline black is the panel's most common hand-written colour and it lands at 1.06:1 on graphite -- present, invisible. Inside a filled button the rule above hands it the button's own label colour instead. */ html[data-theme="dark"] [style*="color:black"], html[data-theme="dark"] [style*="color: black"] { color: var(--cbp-ink) !important; } html[data-theme="dark"] [style*="color:red"], html[data-theme="dark"] [style*="color: red"] { color: var(--cbp-red-t) !important; } html[data-theme="dark"] [style*="color:green"], html[data-theme="dark"] [style*="color: green"] { color: var(--cbp-green-t) !important; } /* Phones, second pass: what the first one did not reach. Every one of these was measured at 390px, and every one of them is a control whose visible mark is smaller than a fingertip. */ @media (max-width: 768px) { /* An icon that IS the link gets a box around it; an icon sitting next to a word does not, or the word gets shoved across the screen. */ a > i.fa:only-child, a > i.fal:only-child, a > i.far:only-child, a > i.fas:only-child, button > i.fa:only-child, button > i.fal:only-child, button > i.far:only-child, [onclick] > i.fa:only-child { padding: 10px 9px; } /* Sorting a column means tapping its title. */ th a, thead a { display: block; padding: 7px 0; } /* Tick boxes and radios ship at thirteen pixels by default. */ input[type="checkbox"], input[type="radio"] { min-width: 18px; min-height: 18px; } table label, td label { min-height: 30px; display: inline-flex; align-items: center; } /* Tap-to-copy chips on the car card. */ .cx-vc-copy, .cx-vc-ordid, .cx-vc-chip, .cx-route-st, .tm-copy-ico, .tm-line a { min-height: 30px; display: inline-flex; align-items: center; } } /* ---- Small navy objects that are not chrome --------------------------------- Chips, thumbnails and toast headers painted with the brand navy by hand. They get the chrome COLOUR only — no texture, no light: a moving light inside a 40px chip is noise, and each one would cost its own composited layer. What this buys is that they stop being the last blue specks on a grey page. */ .ann-toast-title, .cbp-toast, .np-toast { background-color: var(--cbp-chrome, #0e2c4f); } /* ---- Surfaces that never turned at all -------------------------------------- Found by rendering the pages, not by reading them. Each of these is a full-page or full-panel white sheet sitting on a near-black page. */ /* My Bids ships a complete light-only palette scoped to the element and the file carries no dark selector at all, so the whole list renders as white cards with near-black ink. Remapping the tokens is the entire fix — every rule below them already reads from them. */ html[data-theme="dark"] .bids-mediarow { --mr-ink: #dfdfdf; --mr-ink-2: #bababa; --mr-ink-3: #9b9b9b; --mr-line: #434343; --mr-line-2: #3a3a3a; --mr-surface: #292929; /* --mr-blue is the LINK colour on this card, and light is right for a link on graphite. But two buttons read the same token for their FILL, and white on #7ab3f5 is 2.19 to 1 -- worse than the 4.27 it had in daylight, on a bright sky-blue slab that was the loudest object left in the product at night. So the ink keeps its light value and the fill gets its own, the same slate every other filled control now uses. Same for the amber pair: --mr-amber was remapped and --mr-amber-ink was not, so the Accept button kept a daylight brown while every amber around it moved. */ --mr-blue: #7ab3f5; --mr-blue-fill: var(--cbp-blue-fill, #4c5a6b); --mr-blue-ink: #5f7085; /* its hover, one step lighter */ --mr-amber-ink: #7a5a1e; --mr-amber: #dbb477; /* was the daylight #b26a00 */ --mr-amber-bg: #3a2f1b; --mr-ok-bg: #123123; --mr-bad-bg: #38161f; } /* Remapping the tokens was NOT the entire fix. Three panels inside the bid card have a daylight colour typed straight in and no night rule, so they stayed white while the numbers written on them were remapped to light grey. The worst is the money column -- your bid, the current bid, the counter -- which is the one column a dealer opens this page to read, and at night it was white figures on white. 1.31:1. */ html[data-theme="dark"] .mr-money { background: var(--mr-surface); } html[data-theme="dark"] .mr-photo { background: var(--cbp-surface-2, #343434); } html[data-theme="dark"] .mr-fig--counter { border-color: #6b5427; } /* The counter row is only a filled chip on phones; on a desktop it is a dashed rule. Scoped to match, so the two widths keep saying the same thing. */ @media (max-width:900px){ html[data-theme="dark"] .mr-fig--counter { background: var(--mr-amber-bg); border-color: #6b5427; } } html[data-theme="dark"] .mr-btn--ghost, html[data-theme="dark"] .mr-counter__field { background: var(--cbp-input) !important; color: var(--cbp-ink) !important; border-color: var(--cbp-input-line) !important; } /* Opening a lot from My Bids throws a near-full-height white sheet across the screen. The framed content is the auction's own; the wrapper is ours, and it was painting white behind it. */ html[data-theme="dark"] .lw-frame-wrap, html[data-theme="dark"] .lw-frame { background: var(--cbp-surface) !important; } /* The loading sheet that covers the lot window while the auction page arrives. The wrapper and the frame under it were both turned; the sheet on top of them was not, so opening a lot from My Bids at night threw a near-full-screen white slab up for a second and then snapped to dark. It is the most jarring moment left at night, on the page dealers use most during a sale. It takes the same surface as the frame it covers, so the handoff is invisible. No texture: this exists for under a second and is then replaced by the auction's own page -- a contour pattern there would only be a flicker. */ html[data-theme="dark"] .lw-loading { background: var(--cbp-surface) !important; color: var(--cbp-ink) !important; } html[data-theme="dark"] .lw-spin { border-color: var(--cbp-line, #434343); border-top-color: var(--cbp-sky, #5bbbe8); } /* The incoming support-chat bubble. The card, the log, the composer and the header are all themed; only the bubble was missed, so the conversation read as a dark card full of white boxes. */ html[data-theme="dark"] .chat-msg.theirs .chat-bubble { background: var(--cbp-surface-2) !important; color: var(--cbp-ink) !important; border-color: var(--cbp-line) !important; } /* The deposit button is the one control on the funding panel that still glows at night: both tokens it reads are declared only in the light palette and never remapped, so it kept full daylight saturation while every other primary button was taken down. */ html[data-theme="dark"] .cbp-fund-btn { background: #2e719c !important; color: #f0f8fe !important; box-shadow: 0 12px 30px -12px rgba(0,0,0,.55) !important; } /* A hardcoded bright chip inside a panel that DOES turn — so it was the one lit object left in an otherwise dark notification list. */ html[data-theme="dark"] .cbp-notif-c { background: #2c5f92 !important; color: #eaf3fd !important; } /* ---- Rule 11: nothing we draw has a square corner. The cabinet-wide sweep of 2026-09-04 (phone + desktop, every dealer page) left exactly these boxes at 0px: the dp-table on Payment History / Carfax, the Notes composer, the calculator's Tom Select boxes, the Applications spec lists, and the Contact wrap. ---- */ .dp-tablewrap, .dp-table { border-radius: 14px; overflow: hidden; } .dp-table thead th:first-child { border-top-left-radius: 14px; } .dp-table thead th:last-child { border-top-right-radius: 14px; } .notes-page #ncOpen { border-radius: 12px; } .dealer-main .ts-wrapper.calc-ts, .dealer-main .ts-wrapper.calc-ts .ts-control, .dealer-main .ts-wrapper.calc-ts .ts-dropdown { border-radius: 10px !important; } .dealer-main .ts-wrapper.calc-ts .ts-control input { border-radius: 8px; } dl.apps-spec { border-radius: 14px; overflow: hidden; } .apps { border-radius: 16px; } .lp-contact-wrap { border-radius: 16px; overflow: hidden; } /* Calm night (owner 2026-10-10): neutral ladder #0f0f0f / #181818 / #212121 / #2b2b2b, lines #303030, text #f1f1f1 / #aaaaaa / #8a8a8a; no colour in text. Later than the palette above, so it wins; public/js/cbp-calm.js takes the colour out of what tokens cannot reach. */ html[data-theme="dark"] { --cbp-bg: #0f0f0f; --cbp-bg-2: #141414; --cbp-surface: #181818; --cbp-line: #303030; --cbp-ink: #f1f1f1; --cbp-body: #aaaaaa; --cbp-muted: #8a8a8a; --content: #0f0f0f; --line: #303030; --cbp-surface-2: #212121; --cbp-input: #141414; --cbp-input-line: #353535; --cbp-th-bg: #1b1b1b; --cbp-th-ink: #aaaaaa; --cbp-th-line: #303030; --cbp-td-line: #262626; --cbp-chip: #2b2b2b; --cbp-chip-line: #3a3a3a; --cbp-hover: rgba(255,255,255,.045); --cbp-green-t: #f1f1f1; --cbp-red-t: #f1f1f1; --cbp-amber-t: #f1f1f1; --cbp-muted-t: #8a8a8a; --cbp-link: #f1f1f1; --cbp-blue-t: #f1f1f1; --cbp-sky: #f1f1f1; --cbp-navy: #141414; --cbp-navy-2: #1d1d1d; --cbp-navy-3: #101010; --np-bg: #0f0f0f; --np-card: #181818; --np-line: #303030; --np-ink: #f1f1f1; --np-muted: #8a8a8a; --c-default: #181818; --cbp-headchip-hi: #2b2b2b; --cbp-headchip-lo: #1d1d1d; }