/* * Brand and surface tokens. * * Loaded after style.bundle.css from _Layout and _LayoutStore. Overrides Metronic CSS * VARIABLES rather than its selectors wherever possible — variable overrides survive a * Metronic upgrade, selector overrides fight it. The two selector rules below are there * only because Metronic hardcodes those values. * * Deliberately NOT here: padding, margins, any geometry. Global geometry changes are what * break individual pages. Appearance only. */ /* ── Brand ──────────────────────────────────────────────────────────────────── * Deep blue is the default and what everyone sees. Light blue — the colour this portal * used before — stays reachable from the Admin-only accent switch in _Layout's user menu, * stored per browser. * * A variant has to set the whole ramp, not just the hue — --bs-primary alone would leave * every rgba() usage on the old colour, since those read --bs-primary-rgb: * * --bs-primary base --bs-primary-light tinted fills, badges * --bs-primary-active hover/pressed --bs-primary-clarity focus glow * --bs-primary-rgb rgba() source --bs-primary-inverse text ON primary * * --bs-primary-inverse belongs to the ramp because the readable label colour depends on * the hue. White on deep blue is 8.81:1, comfortably past WCAG AA. The light blue variant * keeps white for continuity even though that pairing is only 2.76:1 — it is now opt-in * rather than what everyone sees, which is the better outcome for legibility. */ :root, [data-brand=darkblue] { --bs-primary: #0B4F74; --bs-primary-active: #093E5C; --bs-primary-rgb: 11, 79, 116; --bs-primary-light: #E8EEF3; --bs-primary-clarity: rgba(11, 79, 116, 0.2); --bs-primary-inverse: #FFFFFF; /* 3D viewer backdrop and the type that sits on it — see the note below. */ --tp-canvas-bg: #E3E9EE; --tp-canvas-ink: #0B4F74; --tp-splash-bg: #0A3B56; --tp-splash-ink: #FFFFFF; } /* Light blue — the previous default, still reachable from the accent switch. Listed after the block above so it wins when the attribute is present: both selectors match at the same specificity, so source order decides. */ [data-brand=lightblue] { --bs-primary: #00A7E1; --bs-primary-active: #0094C8; --bs-primary-rgb: 0, 167, 225; --bs-primary-light: #E6F7FD; --bs-primary-clarity: rgba(0, 167, 225, 0.2); --bs-primary-inverse: #ffffff; --tp-canvas-bg: #add8e6; --tp-canvas-ink: #0A3B56; --tp-splash-bg: #add8e6; --tp-splash-ink: #FFFFFF; } /* --tp-canvas-bg is the backdrop behind the tooth models in Plan Studio and the TP players, and behind the loading screen that precedes them. It was CSS 'lightblue' (#add8e6) written into seven stylesheets and seven THREE.js scenes. It is deliberately NOT the brand colour. A 3D canvas is a measuring surface, not a brand surface: Plan Studio draws a heat map and an occlusion colour legend over it, and a saturated field biases how those scales read. It also drives what the model looks like — not physically, since lighting comes from scene.environment and is decoupled from the background, but perceptually, because ivory against a saturated field reads dingy. So the value is a desaturated cool grey that sits in the brand's family without being it. Identity lives in the chrome — bar, buttons, panels — where it is read as branding. An earlier pass here used a saturated navy and it was uncomfortable to work against; the floating header is #ffffffa6 glass, and over a dark field that composites to mud. --tp-canvas-ink is the type on that backdrop, kept beside it so the pair can never drift into an unreadable combination. The loading screen is a separate pair, --tp-splash-bg / --tp-splash-ink, and it DOES carry the brand. The distinction is what the surface is for: a splash is seen for two seconds and nothing is measured against it, so it is the right place for identity. A viewport is worked against for an hour with colour scales drawn over it, so it is the wrong place. Everything reads these with a fallback — var(--tp-canvas-bg, #add8e6) and var(--tp-canvas-ink, #fff) — so the two patient players are untouched: they do not load brand.css, the fallbacks apply, and BeOnTrack stays exactly as it was. */ /* ── Page surface ───────────────────────────────────────────────────────────── * The contrast problem, and it is one token. * * Two rules paint the body; the later one wins and reads --bs-page-bg, NOT --bs-body-bg. * In light theme --bs-page-bg was #ffffff — the same value as the card surface — so a form * had no edge. Dark theme was already right (page #0F1014 behind cards at #15171C), which * is why only light needs touching. * * --bs-body-bg is deliberately left alone: .card derives its own background from it * (--bs-card-bg: var(--bs-body-bg)), so tinting that would tint every card too and change * nothing. Cards stay white because --bs-body-bg stays white. * * Retune the page here; it is one line. */ :root, [data-bs-theme=light] { --bs-page-bg: #F4F6FA; } /* _Layout does not set data-bs-theme at all, so the light values above have to sit on :root to apply there. That makes them win in dark too — same specificity, later file — so dark has to be restored explicitly rather than left to the bundle. */ [data-bs-theme=dark] { --bs-page-bg: #0F1014; } /* ── Card edge ──────────────────────────────────────────────────────────────── * #F1F1F4 is invisible against white and barely there against the tint. Metronic leaves * the same light value in its dark block, which is why dark cards look edgeless; dark uses * the bundle's own --bs-border-color instead. */ .card { --bs-card-border-color: #E1E4EA; } [data-bs-theme=dark] .card { --bs-card-border-color: #26272F; } /* .card-bordered hardcodes its border instead of reading the variable, and Metronic scopes it as .card.card-bordered — so this has to match that specificity to win. */ .card.card-bordered { border-color: #E1E4EA; } [data-bs-theme=dark] .card.card-bordered { border-color: #26272F; } /* ── Re-point what Metronic baked as literals ───────────────────────────────── * * This is the section that makes the accent behave systemically rather than * "here and there". * * Metronic's stylesheet was compiled with the old light blue written out as a literal in * 25 custom properties and 6 selectors — only *some* of its rules read var(--bs-primary). * Overriding --bs-primary alone therefore recoloured buttons and little else, leaving tabs, * pills, pagination, checkboxes, radios, range sliders and links on the old colour. That is * not a set of unrelated bugs; it is one cause with many symptoms. * * Everything below re-points those to the token, so a variant change reaches the whole UI. * Anything added here should derive from --bs-primary, never restate a hex. */ :root { /* Text and links */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: var(--bs-primary-active); --bs-text-primary: var(--bs-primary); /* Metronic's generic "this component is active/checked" colours. These drive tabs, pagination, list selections and a lot besides. */ --bs-component-active-bg: var(--bs-primary); --bs-component-checked-bg: var(--bs-primary); --bs-component-hover-color: var(--bs-primary); /* Sidebar / header menus */ --bs-menu-link-color-active: var(--bs-primary); --bs-menu-link-color-here: var(--bs-primary); --bs-menu-link-color-hover: var(--bs-primary); --bs-menu-link-color-show: var(--bs-primary); /* Pills — Casebook uses these */ --bs-nav-pills-link-active-bg: var(--bs-primary); /* Odds and ends that would otherwise stay light blue */ --bs-progress-bar-bg: var(--bs-primary); --bs-ribbon-label-bg: var(--bs-primary); --bs-scrolltop-bg-color: var(--bs-primary); --bs-scrolltop-bg-color-hover: var(--bs-primary-active); } /* Pagination derives from the component colours above, but Bootstrap scopes its own variables to .pagination, so they need setting there rather than at :root. */ .pagination { --bs-pagination-color: var(--bs-primary); --bs-pagination-hover-color: var(--bs-primary-active); --bs-pagination-focus-color: var(--bs-primary-active); --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); } /* Bootstrap's button layer bakes literals too. Metronic's own .btn.btn-primary rule wins for the filled state, which is why buttons already followed — but the outline variant and the hover/active/disabled states read these. */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary-active); --bs-btn-hover-border-color: var(--bs-primary-active); --bs-btn-active-bg: var(--bs-primary-active); --bs-btn-active-border-color: var(--bs-primary-active); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-color: var(--bs-primary-inverse); --bs-btn-hover-color: var(--bs-primary-inverse); --bs-btn-active-color: var(--bs-primary-inverse); --bs-btn-disabled-color: var(--bs-primary-inverse); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-primary-inverse); --bs-btn-active-color: var(--bs-primary-inverse); } /* The six rules where the colour is written directly into a declaration and no variable exists to intercept. Checkboxes and radios are the visible ones. */ .form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate, .form-check.form-check-solid .form-check-input[type="checkbox"]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); } .form-range::-webkit-slider-thumb { background-color: var(--bs-primary); } .form-range::-moz-range-thumb { background-color: var(--bs-primary); } .separator.separator-content.border-primary::before, .separator.separator-content.border-primary::after { border-color: var(--bs-primary); } /* ── Status palette ─────────────────────────────────────────────────────────── * * Every workflow status gets its own colour. Metronic ships eight badge colours and there * are more statuses than that, so the extras are defined here rather than doubling up — * two states sharing a colour is exactly what made the list unreadable before. * * Same shape as Metronic's badge-light-*: a pale tint behind a saturated foreground, so * they sit together as one family. Hues are ordered along the case lifecycle — grey while * waiting, blue in the lab, amber when the doctor is needed, green in treatment, then * neutral or red once stopped. * * Deliberately NOT derived from --bs-primary: these are categorical, not brand. They must * stay put when the accent changes, the same way Plan Studio's tool colours do. */ .badge.badge-st-incomplete { color: #6B7280; background-color: #F3F4F6; } .badge.badge-st-submitted { color: #5A3FBE; background-color: #EFEBFB; } .badge.badge-st-planning { color: #0B7285; background-color: #E0F4F7; } .badge.badge-st-approval { color: #B7791F; background-color: #FFF8DD; } .badge.badge-st-files { color: #0B4F74; background-color: #E8EEF3; } .badge.badge-st-manufacture { color: #1A6DBF; background-color: #E4F0FB; } .badge.badge-st-treatment { color: #00A37A; background-color: #E6FBF8; } .badge.badge-st-refinement { color: #C2410C; background-color: #FEEDE3; } .badge.badge-st-digital { color: #0E7490; background-color: #E2F5FA; } .badge.badge-st-digitalref { color: #9A3412; background-color: #FDE9DE; } .badge.badge-st-retainer { color: #4D7C0F; background-color: #F0F7E2; } .badge.badge-st-cancelled { color: #44546F; background-color: #E7EAF0; } .badge.badge-st-notaccepted { color: #D0304F; background-color: #FFEEF3; } [data-bs-theme=dark] .badge.badge-st-incomplete { color: #9CA3AF; background-color: #24262D; } [data-bs-theme=dark] .badge.badge-st-submitted { color: #A896F0; background-color: #221E33; } [data-bs-theme=dark] .badge.badge-st-planning { color: #56C7D8; background-color: #14262A; } [data-bs-theme=dark] .badge.badge-st-approval { color: #E8B93B; background-color: #2B2412; } [data-bs-theme=dark] .badge.badge-st-files { color: #6FA8CC; background-color: #16222B; } [data-bs-theme=dark] .badge.badge-st-manufacture { color: #5AA9EE; background-color: #14202D; } [data-bs-theme=dark] .badge.badge-st-treatment { color: #3ED2AE; background-color: #10261F; } [data-bs-theme=dark] .badge.badge-st-refinement { color: #F08A5D; background-color: #2B1B12; } [data-bs-theme=dark] .badge.badge-st-digital { color: #4FB6CE; background-color: #12242A; } [data-bs-theme=dark] .badge.badge-st-digitalref { color: #E08A5A; background-color: #2A1A12; } [data-bs-theme=dark] .badge.badge-st-retainer { color: #9CC24A; background-color: #1D2413; } [data-bs-theme=dark] .badge.badge-st-cancelled { color: #8C9BB5; background-color: #1E222A; } [data-bs-theme=dark] .badge.badge-st-notaccepted { color: #F2637F; background-color: #2B141B; }