/*
 * FRU-17342 — Admin dark mode.
 *
 * ADDITIVE BY DESIGN. This file never edits an existing rule; every selector is
 * prefixed with `body.dark` so it out-ranks the bare selector it shadows, and
 * `!important` is used where it has to beat an inline style= attribute, a page
 * <style> block, or an existing !important rule. Nothing in admin.css /
 * leads.css / clients.css / reports.css moves.
 *
 * To revert the whole feature: delete this file, delete js/dark-mode.js, and
 * remove the additions marked FRU-17342 in manager/template.php,
 * manager/template_minimal.php, manager/template_body_only.php,
 * controllers/admin/Users_tab.php and models/Admin.php. Light mode is then
 * byte-identical to before.
 *
 * SCOPE: css/ is admin-only. CSS_PATH (MY_Controller.php:21) is referenced by
 * 38 view files, all under views/admin/. The leads/client site has its own
 * asset tree at assets/leads/. Nothing here can reach client UI.
 *
 * NOT COVERED ON PURPOSE: the TV / big board views (views/admin/tv/*) are
 * standalone HTML documents that never load manager/template.php, so they can
 * never pick up body.dark. Nothing to exclude — they are structurally out.
 */

/* ==========================================================================
   1. PALETTE
   ========================================================================== */
body.dark {
	--dk-band:          #142a33;  /* The banner behind the logo. Light mode has
	                                this area WHITE (admin.css:11, body is #fff),
	                                so the faithful inversion is near-black — but a
	                                flat black bar across the top of every page is
	                                the heaviest thing on screen and reads as dead
	                                space. This is a dark teal instead: same family
	                                as the tabs and the content body, still clearly
	                                a banner. The #174050 tabs sit 1.34 above it, so
	                                they still lift off it. Revert = #101c22. */
	--dk-page:          #0d1418;
	--dk-menu:          #174050;
	--dk-menu-txt:      #d8e8ee;
	--dk-menu-selected: #1d4f74;
	--dk-subnav-top:    #17414f;
	--dk-subnav-bottom: #102b34;
	--dk-subnav-txt:    #d3e6ec;
	--dk-contentbody:   #14343f;
	--dk-h1:            #17414f;
	--dk-h1-txt:        #e2eff3;

	--dk-surface:       #131d22;  /* panels, table bodies */
	--dk-surface-2:     #17232a;  /* zebra / raised rows */
	--dk-btn-amber:     #a97613;  /* AG's call, twice: white on amber is the look
	                                he wants. Dark ink measures better (4.6-7.2
	                                depending on the fill) but reads as a heavy
	                                slab, so this keeps the deepened amber with a
	                                warm white label at 3.76. A DELIBERATE
	                                deviation from 4.5, not an oversight. */
	--dk-btn-amber-brd: #c78f22;
	--dk-btn-amber-txt: #fff8ea;
	--dk-stripe-hi:     #24343d;  /* deliberate, visible stripe. --dk-surface-2
	                                is only 1.07 from --dk-surface, which reads as
	                                "no stripe at all" on wide tables like the
	                                permissions grid. This sits at 1.33, matching
	                                the perceptual step light mode gets from
	                                #e6e6e6 on white. */
	--dk-text:          #cfdde3;
	--dk-text-dim:      #9db3bc;
	/* Raised from #2a3b43. A dark-on-dark edge reads much weaker than a
	   light-on-light one at the same ratio, so matching light mode's #ccc-on-
	   white numerically (1.46 vs 1.58) still left boxes looking borderless.
	   #374a55 puts the edge at ~2.0:1 against the panel surface. */
	--dk-border:        #374a55;
	/* For the outline of a box that should read as a container, not a hairline
	   between table cells. Kept clearly above --dk-border so a box edge and a
	   cell edge are distinguishable rather than both being "faint line". */
	--dk-border-strong: #62808f;

	--dk-thead-top:     #1e5265;
	--dk-thead-bottom:  #143a48;
	--dk-thead-txt:     #dceff5;

	--dk-field-bg:      #0e181d;
	--dk-field-txt:     #dce8ed;
	/* Raised from #33474f. admin.css gives inputs `1px solid gray` (#808080),
	   which is a 3.95:1 edge on white — every field reads as a box. #33474f on
	   the dark field fill was only 1.85, so on an input-dense screen like a
	   client's Lead Filters tab the fields dissolved into the panel. */
	--dk-field-border:  #64808e;

	--dk-link:          #5cc0f2;  /* replaces #0099FF on dark */
	--dk-link-chrome:   #f6b760;  /* admin.css `a` colour — already dark-safe */

	--dk-gold:          #6b5510;
	--dk-gold-txt:      #ffe9a3;
	--dk-verify:        #7a5c11;

	--dk-report-head:   #1d4f61;
	--dk-report-headtx: #dcf1f8;
	--dk-report-zebra:  #16262d;
	--dk-report-border: #2a3f47;

	/* admin.css:body is `background:#fff url(/images/bg02.jpg) no-repeat 50% 0`
	   — a pale green/teal 3443x102 strip with no meaning, so it goes. The
	   dev/staging wallpaper is a different matter and is put back below. */
	background: var(--dk-band) !important;
	background-image: none !important;
	color: var(--dk-text);

	/* Tells the browser to render its OWN chrome dark: scrollbars, the select
	   dropdown list, date pickers, spinners, autofill. Without this those stay
	   light no matter what the page paints. Native `title` tooltips are the one
	   thing this does not reach — Chrome draws those from the OS theme and no
	   CSS can restyle them. */
	color-scheme: dark;
}

/* ==========================================================================
   1b. ENVIRONMENT WALLPAPER
       doge.jpg on dev and capy.jpg on staging are how you tell which admin you
       are looking at without reading the URL — griffin-, deepak- and every other
       personal dev box gets the doge; staging- gets the capybaras; production
       has no wallpaper at all and is left as the plain dark band.

       The body rule above clears background-image, because admin.css's bg02.jpg
       strip carries no meaning, and that took these with it. They are put back
       here behind a veil of the band colour (rgba(20,42,51) = --dk-band): enough
       of the tile shows through to
       register at a glance, not enough to fight the theme.
       `env-development` / `env-staging` come from template.php and
       template_minimal.php.

       The veil is 72%, chosen by measurement rather than eye. doge.jpg is a
       bright tile (mean luminance .82); at 88% it flattens to a near-uniform
       slab — sd .008, which reads as a flat colour rather than a picture, so you
       cannot tell it is the doge. 72% leaves mean .24 and sd .020, where the
       tile is recognisable but still sits quietly under the theme. capy.jpg is
       much darker to start with (mean .33) and takes the same treatment.

       Light mode is untouched and keeps the wallpaper at full strength from the
       template's own <style> block.
   ========================================================================== */
body.dark.env-development {
	background-image:
		linear-gradient(rgba(20, 42, 51, .72), rgba(20, 42, 51, .72)),
		url(/assets/admin/doge.jpg) !important;
	background-repeat: repeat !important;
}

body.dark.env-staging {
	background-image:
		linear-gradient(rgba(20, 42, 51, .72), rgba(20, 42, 51, .72)),
		url(/assets/admin/capy.jpg) !important;
	background-repeat: repeat !important;
}

/* ==========================================================================
   2. PAGE FRAME — header band, menu, subnav, content wrapper, title band
   ========================================================================== */
body.dark #header-con,
body.dark #site_container > #header-con {
	background: var(--dk-band);
}

/* In light mode .menuhed is TRANSPARENT — there is no bar. Each tab is a
   rounded #257a99 shape sitting directly on the page, which is what makes them
   read as separate tabs. Filling the bar put a blue slab behind the whole row
   and merged them visually. Kept transparent to match. */
body.dark #menu-hed .menuhed {
	background: transparent !important;
	background-image: none !important;
}

/* Each menu tab paints itself from a sprite — `div#menu-hed a` is
   `url(/images/menu-link-bg.gif) 0 -35px`, which is what gives the tabs their
   #257a99 face. Darkening the bar alone leaves every tab light teal, so the
   sprite is dropped and the tab shape carried by a flat fill instead. */
/* Dropping menu-link-bg.gif removed the per-tab edges the sprite was drawing,
   so every tab shared one flat fill and the row read as a single bar. The
   inset shadow re-draws the divider without touching layout (a real border
   would shift every tab's width), and the top radius restores the tab shape. */
body.dark #menu-hed a,
body.dark div#menu-hed a {
	background-image: none !important;
	background-color: #1b4a5c !important;
	color: var(--dk-menu-txt) !important;
	border-color: var(--dk-border) !important;
	border-radius: 10px 10px 0 0;
	box-shadow: inset -1px 0 0 #0d2530;
}

body.dark div#menu-hed a.selected,
body.dark #menu-hed .menuhed a.selected {
	background-color: var(--dk-menu-selected) !important;
	color: #ffffff !important;
}

/* The $ tab is a photo (100-dollar_sm.jpg); keep the image, drop the tint. */
body.dark div#menu-hed a.bucks {
	background-image: url(/images/100-dollar_sm.jpg) !important;
	background-position: 50% 0 !important;
	background-repeat: no-repeat !important;
}

body.dark ul.subnav {
	background: linear-gradient(var(--dk-subnav-top) 5%, var(--dk-subnav-bottom) 100%) !important;
	background-color: var(--dk-subnav-bottom) !important;
	filter: none;
}

/* subnav.css paints the gradient on `ul.subnav li a, .subnav-text` as well as
   the ul, so each link repaints itself #257a99 unless it is overridden too. */
body.dark ul.subnav li a,
body.dark .subnav-text {
	background: linear-gradient(var(--dk-subnav-top) 5%, var(--dk-subnav-bottom) 100%) !important;
	background-color: var(--dk-subnav-bottom) !important;
	filter: none;
	color: var(--dk-subnav-txt) !important;
}

body.dark ul.subnav li a.selected {
	background: var(--dk-menu-selected) !important;
	color: var(--dk-h1-txt) !important;
}

body.dark div.contentbody {
	background: var(--dk-contentbody) !important;
	background-image: none !important;
}

body.dark div.contentbody h1 {
	background: var(--dk-h1) !important;
	color: var(--dk-h1-txt);
	border-bottom-color: var(--dk-border);
}

body.dark #header-con h1 {
	color: var(--dk-text);
}

body.dark span.hag {
	background: var(--dk-surface-2);
	color: var(--dk-text);
	border-color: var(--dk-border);
}

body.dark div.footer,
body.dark #footer-con {
	color: var(--dk-text-dim);
}

/* ==========================================================================
   3. DATA TABLES — .chart1 is the admin's universal table
   ========================================================================== */
body.dark .chart1 {
	background: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .chart1 td,
body.dark .chart1 th {
	border-color: var(--dk-border) !important;
}

/* tr.silver is the header row. Despite the name it is a teal gradient with
   white text (bg-blocks.gif over #fcfdf9), so it darkens rather than inverts. */
body.dark .chart1 tr.silver {
	background: linear-gradient(var(--dk-thead-top), var(--dk-thead-bottom)) !important;
	background-image: none, linear-gradient(var(--dk-thead-top), var(--dk-thead-bottom)) !important;
	color: var(--dk-thead-txt) !important;
}

/* The cells must stay TRANSPARENT so the row's teal gradient shows through.
   The financial page defines its own `.silver` class (a flat grey band) and
   that rule fills `tr.silver td` — which silently covered the standard .chart1
   teal header on every table in the admin. Same class name, two unrelated
   meanings. This wins on specificity (0,3,3) over that rule's (0,2,3). */
body.dark .chart1 tr.silver td,
body.dark .chart1 tr.silver th {
	color: var(--dk-thead-txt) !important;
	background-color: transparent !important;
	background-image: none !important;
}

body.dark .chart1 tr.gold {
	background: var(--dk-surface-2) !important;
}

/* Stripe on nth-child ONLY, matching light. `tr.odd` is NOT a stripe marker in
   this codebase — on the Users tab every single row carries class="odd", so
   including it painted all of them and the alternation disappeared entirely. */
body.dark .chart1 tbody tr:nth-child(even),
body.dark .chart1 tr:nth-child(even) {
	background: var(--dk-surface-2) !important;
}

/* The Users tab stripes its odd rows #ebf2fa from somewhere that is neither a
   readable CSS rule, an inline style, nor a bgcolor attribute — but it applies
   in dark too, so light-blue bands were showing through the dark table. Odd
   rows are pinned to the panel surface so the alternation stays subtle and in
   the dark palette. */
body.dark .chart1 tbody tr:nth-child(odd),
body.dark .chart1 tr:nth-child(odd) {
	background-color: var(--dk-surface) !important;
}

/* Header row must not be caught by either stripe. */
body.dark .chart1 tr.silver:nth-child(odd),
body.dark .chart1 tr.silver:nth-child(even) {
	background-color: transparent !important;
}

body.dark .chart1 tr td span.def,
body.dark .chart1 tr td span.def a {
	color: var(--dk-link) !important;
}

body.dark .chart1 a {
	color: var(--dk-link);
}

body.dark .chart1 tr.silver a {
	color: var(--dk-link-chrome) !important;
}

/* Generic tables that are not .chart1 but sit on a panel. */
body.dark table.tablesorter,
body.dark table.tablesorter tbody td {
	background: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark table.tablesorter thead th {
	background: linear-gradient(var(--dk-thead-top), var(--dk-thead-bottom)) !important;
	color: var(--dk-thead-txt) !important;
	border-color: var(--dk-border) !important;
}

/* ==========================================================================
   4. FORM CONTROLS
   ========================================================================== */
/* `:not([class*="cgp-"])` keeps the CSR-cards search box out of it: that page is
   already dark and paints its own translucent face. See 8aa. */
body.dark input[type=text]:not([class*="cgp-"]),
body.dark input[type=number]:not([class*="cgp-"]),
body.dark input[type=password],
body.dark input[type=email],
body.dark input[type=search]:not([class*="cgp-"]),
body.dark input[type=tel],
body.dark input[type=date],
body.dark select:not([class*="cgp-"]),
body.dark textarea {
	background-color: var(--dk-field-bg) !important;
	color: var(--dk-field-txt) !important;
	border-color: var(--dk-field-border) !important;
}

/* An <input> with no type attribute defaults to text but does NOT match
   input[type=text], so it kept a white face. Catch everything that is not a
   button- or control-shaped input instead of listing types. */
body.dark input:not([type]),
body.dark input[type=""] {
	background-color: var(--dk-field-bg) !important;
	color: var(--dk-field-txt) !important;
	border-color: var(--dk-field-border) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
	color: var(--dk-text-dim);
}

body.dark select option {
	background-color: var(--dk-field-bg);
	color: var(--dk-field-txt);
}

/* The Live Transfer client dropdown flags premium lenders with
   .glengarry-option, which shares #20d695 with the Premium Send & Call button
   (button.glengarry). At full strength that green glares on a dark page and
   leaves light option text at ~1.9:1. The OPTIONS are dulled here; the button
   is deliberately left at its original colour. */
body.dark select option.glengarry-option,
body.dark option.glengarry-option {
	/* Same green as the Premium Send & Call button (8i). They mark the same
	   thing — a premium lender — so they should read as the same colour. */
	background-color: #1fa176 !important;
	color: #f2fffa !important;
}

body.dark input[type=checkbox],
body.dark input[type=radio],
body.dark input[type=range] {
	accent-color: #4fa8c9;
}

/* The HE minimum-loan range slider on a client's Lead Flow tab has no colour
   of its own, so it fell back to the browser default and read as a flat grey
   bar. Its value readout sits directly on the panel. */
body.dark input[type=range].admin-lead-flow-he-slider {
	accent-color: #4fa8c9;
}

body.dark #he_ignore_min_loan_slider_value,
body.dark .he_ignore_min_loan_slider_wrapper p {
	color: var(--dk-text) !important;
}

/* The .switch/.slider toggle-pill pattern (stat panels, client profile). */
body.dark .switch .slider {
	background-color: var(--dk-field-border) !important;
}

body.dark .switch input:checked + .slider {
	background-color: #2f8fb0 !important;
}

body.dark .switch .slider:before {
	background-color: #e8f2f6 !important;
}

/* admin.css paints EVERY button `background-color: #d69520` with white text —
   2.57:1, a pre-existing readability problem in BOTH themes.

   Deepened here so it still reads as the FRU amber button on a dark page, with
   a warm white label. That is 3.76, and it is a DELIBERATE deviation from 4.5.

   Dark ink measures better — #1b1200 gives 4.61 on this fill and 7.22 on light
   mode's #d69520 — and both were tried. AG rejected both on sight: a dark label
   turns these into heavy saturated slabs, and on pages like lead search, where
   Clear and Search sit side by side, a column of them dominates everything.
   Legibility here was never the complaint; the visual weight was. Recorded so
   nobody re-opens it as a bug.

   Light mode keeps #d69520 with white text exactly as-is.

   .btn and .ui-button are excluded and no !important is used: a blanket rule
   here repainted 238 buttons on the client edit page, 217 of which were
   Bootstrap success green (#5cb85c) — the Lead Flow per-state ON/OFF toggles,
   where the green IS the state. Only buttons actually falling through to
   admin.css's default should change. */
body.dark button:not(.btn):not([class*="ui-button"]):not([class*="legacy-button"]):not([class*="btn-blue"]):not([class*="baldwin"]):not([class*="bw-toast"]):not([class*="tox-"]):not([class*="bcc-"]):not([class*="bcg-"]):not([class*="cgp-"]):not([class*="pto-"]):not([class*="cw-"]),
body.dark input[type=button]:not(.btn):not([class*="ui-button"]),
body.dark input[type=submit]:not(.btn):not([class*="ui-button"]) {
	background-color: var(--dk-btn-amber);
	border-color: var(--dk-btn-amber-brd);
	color: var(--dk-btn-amber-txt);
}

/* Bootstrap-flavoured buttons that carry their own intent keep it. */
body.dark button.btn-purple,
body.dark input[type=button].btn-purple,
body.dark input[type=submit].btn-purple {
	background-color: #4032b0 !important;
	border-color: #5144d9 !important;
	color: #eceaff !important;
}

/* Only the disabled state, which relies on a light page behind it, is touched. */
body.dark button:disabled,
body.dark input[type=button]:disabled,
body.dark input[type=submit]:disabled {
	background-color: #5a4210 !important;
	border-color: #5a4210 !important;
	color: #c8b184 !important;
}

body.dark fieldset {
	border-color: var(--dk-border);
}

/* admin.css `div.infield fieldset` paints the whole panel #2589ab + the
   bg-blocks gradient — the identical face .contentbody wears, so in light mode
   the panel reads as a bordered REGION of the page, not a raised card. Left
   alone it survived into dark as a bright cyan spotlight (Lender Inquiry >
   Add New). Matching it back to the content body keeps light mode's
   relationship; the container edge comes from --dk-border-strong in 8k. */
body.dark div.infield fieldset {
	background: var(--dk-contentbody) !important;
	background-image: none !important;
	color: var(--dk-text) !important;
}

body.dark legend,
body.dark label {
	color: var(--dk-text);
}

/* The filter fieldset legends paint their own #338099 face. */
body.dark .search-filters-legend {
	background-color: var(--dk-h1) !important;
	color: var(--dk-h1-txt) !important;
	border-color: var(--dk-border) !important;
}

body.dark .search-filters-fieldset:has(.expanded) {
	border-color: var(--dk-border);
}

/* ==========================================================================
   5. jQuery UI — the lead page tabs and every dialog in the admin
   ========================================================================== */
/* jQuery UI panels are part of the same blue family as its buttons — the
   header is #deedf7 and the body #f2f5f7 in light. Neutral dark made the
   info_box panels (Bank Activity, etc.) read as plain page rather than as
   the blue widget they are. */
body.dark .ui-widget-content {
	background: #16242e !important;
	color: var(--dk-text) !important;
	border-color: #2c4a5e !important;
}

body.dark .ui-widget-header {
	background: linear-gradient(var(--dk-thead-top), var(--dk-thead-bottom)) !important;
	color: var(--dk-thead-txt) !important;
	border-color: var(--dk-border) !important;
}

/* jQuery UI ships its own light theme colours for TEXT as well as surfaces:
   `.ui-widget-content a` is #362b36 and `.ui-state-default` is #2779aa. Both
   are meant to sit on jQuery UI's light widget background, so darkening the
   surface alone leaves the labels at ~1.3:1 and ~3.4:1. These re-colour the
   text tokens to match. This is what every .ui-button in the admin uses —
   the whole Lead Actions column on the lead page is built from them. */
body.dark .ui-widget-content a,
body.dark .ui-widget-content a:link,
body.dark .ui-widget-content a:visited {
	color: var(--dk-link) !important;
}

body.dark .ui-widget-header a {
	color: var(--dk-h1-txt) !important;
}

/* jQuery UI buttons are LIGHT BLUE in light mode — #d7ebf9 fill, #2779aa text,
   #aed0ea border, from its default theme. Every .ui-button in the admin uses
   it (Save Changes, Disclosure, Consent, the whole Lead Actions column), so
   the blue is the family identity, not decoration. A neutral dark fill made
   them read as plain panels. Kept in the blue family, just inverted. */
body.dark .ui-state-default,
body.dark .ui-widget-content .ui-state-default,
body.dark .ui-widget-header .ui-state-default {
	background: #17303d !important;
	border-color: #33607a !important;
	color: #a8d8f5 !important;
}

body.dark .ui-button,
body.dark .ui-button .ui-button-text,
body.dark .ui-button-text-only .ui-button-text {
	color: #a8d8f5 !important;
}

body.dark .ui-state-hover,
body.dark .ui-state-focus,
body.dark .ui-widget-content .ui-state-hover,
body.dark .ui-widget-header .ui-state-hover {
	background: var(--dk-h1) !important;
	border-color: var(--dk-field-border) !important;
	color: var(--dk-h1-txt) !important;
}

body.dark .ui-state-hover .ui-button-text,
body.dark .ui-state-focus .ui-button-text {
	color: var(--dk-h1-txt) !important;
}

body.dark .ui-state-default a,
body.dark .ui-state-default a:link,
body.dark .ui-state-default a:visited {
	color: var(--dk-link) !important;
}

/* TODAY in the jQuery UI datepicker. The today cell is
   `<a class="ui-state-default ui-state-highlight">`, and the light theme marks it
   with a yellow fill (#ffef8f / #f9dd34). `body.dark .ui-widget-content
   .ui-state-default` above outranks the theme's .ui-state-highlight and painted
   today identical to every other day. Same yellow family, inverted, and declared
   after the default rule so it wins the tie. */
body.dark .ui-state-highlight,
body.dark .ui-widget-content .ui-state-highlight,
body.dark .ui-widget-header .ui-state-highlight {
	background: #4a3f10 !important;
	background-image: none !important;
	border-color: #d4b93a !important;
	color: #ffe680 !important;
}

body.dark .ui-state-highlight a,
body.dark .ui-widget-content .ui-state-highlight a,
body.dark .ui-widget-header .ui-state-highlight a {
	color: #ffe680 !important;
}

body.dark .ui-state-active,
body.dark .ui-tabs .ui-tabs-nav li.ui-tabs-active {
	background: var(--dk-h1) !important;
	border-color: var(--dk-border) !important;
}

body.dark .ui-state-active a,
body.dark .ui-state-active a:link {
	color: var(--dk-h1-txt) !important;
}

/* SELECTED STATE for jQuery UI buttonsets — the On/Off pairs on
   /site_content_tab/settings and every other settings page.
   
   These were showing NO selection at all: the labels carry BOTH classes
   (`class="ui-state-active ui-button ... ui-state-default"`) and sit inside
   .ui-widget-content, so `body.dark .ui-widget-content .ui-state-default`
   (0,3,1) outranked `body.dark .ui-state-active` (0,2,0) and painted the
   chosen option identical to the unchosen one — 23,48,61 on both. The text
   went the same way: `body.dark .ui-button .ui-button-text` repainted both.
   
   Light mode makes the choice loud — #3baae3 with WHITE text against the
   unselected #d7ebf9 with #2779aa — so this keeps that direction. The fill is
   a shade below the light one only so the white label clears 4.5 (4.64); the
   two states sit 2.96 apart, which is what makes the state readable at a
   glance.
   
   Deliberately scoped to .ui-button rather than all of .ui-state-active:
   `li.ui-tabs-active` shares the class, and the tab appearance is already
   settled — this must not repaint it. */
body.dark .ui-button.ui-state-active,
body.dark .ui-widget-content .ui-button.ui-state-active,
body.dark .ui-widget-header .ui-button.ui-state-active,
body.dark .ui-buttonset .ui-state-active {
	background: #2a7bab !important;
	background-image: none !important;
	border-color: #59a9d6 !important;
	color: #ffffff !important;
}

body.dark .ui-button.ui-state-active .ui-button-text,
body.dark .ui-buttonset .ui-state-active .ui-button-text {
	color: #ffffff !important;
}

body.dark .ui-dialog,
body.dark .ui-dialog .ui-dialog-content {
	background: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

/* ==========================================================================
   6. LEAD PAGE
   ========================================================================== */
body.dark .lead_label,
body.dark .lead_text {
	color: var(--dk-text);
}

body.dark .lead_text a {
	color: var(--dk-link);
}

/* leads.css uses `background-color: gold` and #e0b321 with inherited dark text.
   Both glare on a dark ground, so they invert to a muted amber fill. */
body.dark .highlight-default,
body.dark .highlight_default {
	background-color: var(--dk-gold) !important;
	color: var(--dk-gold-txt) !important;
}

body.dark .highlight-verify {
	background-color: var(--dk-verify) !important;
	color: var(--dk-gold-txt) !important;
}

body.dark .lblue-cell-bg {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
}

/* ==========================================================================
   7. REPORTS — reports.css hardcodes #fff/#000 and its own blue table
   ========================================================================== */
body.dark #report_view {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

body.dark #report_view table {
	border-color: var(--dk-report-border) !important;
}

body.dark #report_view table thead tr {
	background-color: var(--dk-report-head) !important;
	color: var(--dk-report-headtx) !important;
}

body.dark #report_view table tbody tr:nth-child(even) {
	background-color: var(--dk-report-zebra) !important;
}

body.dark #report_view table th,
body.dark #report_view table td {
	border-color: var(--dk-report-border) !important;
}

body.dark #report_view a {
	color: var(--dk-link) !important;
}

body.dark .report_alert {
	background: var(--dk-surface-2);
	color: var(--dk-text);
}

/* ==========================================================================
   8. INLINE BACKGROUND COLOURS
      1,226 style="...background..." attributes across 183 admin view files.
      They out-rank every normal stylesheet rule, but an !important author
      declaration out-ranks THEM (none of the admin's inline colour styles are
      themselves !important — verified), so they can be remapped here without
      editing a single view.

      Matched by substring on the inline value, case-insensitively. Ordering
      matters: the neutral group runs first and deliberately catches "#fff",
      which also matches #fff8e1 / #fff3cd; the semantic groups below repeat
      those and win on source order.

      Counts are occurrences in views/admin as of this writing — the neutral
      group alone covers ~440 elements.
   ========================================================================== */

/* -- neutral light surfaces -> panel. Ordered FIRST: "#fff" also matches
   #fff8e1 / #fff3cd, and the amber group below repeats those to win on order -- */
body.dark [style*="background:#e8e8e8" i],
body.dark [style*="background: #e8e8e8" i],
body.dark [style*="background-color:#e8e8e8" i],
body.dark [style*="background-color: #e8e8e8" i],
body.dark [style*="background:#ebebeb" i],
body.dark [style*="background: #ebebeb" i],
body.dark [style*="background-color:#ebebeb" i],
body.dark [style*="background-color: #ebebeb" i],
body.dark [style*="background:#f0f0f0" i],
body.dark [style*="background: #f0f0f0" i],
body.dark [style*="background-color:#f0f0f0" i],
body.dark [style*="background-color: #f0f0f0" i],
body.dark [style*="background:#f4f6f7" i],
body.dark [style*="background: #f4f6f7" i],
body.dark [style*="background-color:#f4f6f7" i],
body.dark [style*="background-color: #f4f6f7" i],
body.dark [style*="background:#fafafa" i],
body.dark [style*="background: #fafafa" i],
body.dark [style*="background-color:#fafafa" i],
body.dark [style*="background-color: #fafafa" i],
body.dark [style*="background:#f9f9f9" i],
body.dark [style*="background: #f9f9f9" i],
body.dark [style*="background-color:#f9f9f9" i],
body.dark [style*="background-color: #f9f9f9" i],
body.dark [style*="background:#f5f5f5" i],
body.dark [style*="background: #f5f5f5" i],
body.dark [style*="background-color:#f5f5f5" i],
body.dark [style*="background-color: #f5f5f5" i],
body.dark [style*="background:#f7f7f7" i],
body.dark [style*="background: #f7f7f7" i],
body.dark [style*="background-color:#f7f7f7" i],
body.dark [style*="background-color: #f7f7f7" i],
body.dark [style*="background:#eef" i],
body.dark [style*="background: #eef" i],
body.dark [style*="background-color:#eef" i],
body.dark [style*="background-color: #eef" i],
body.dark [style*="background:#fff" i],
body.dark [style*="background: #fff" i],
body.dark [style*="background-color:#fff" i],
body.dark [style*="background-color: #fff" i],
body.dark [style*="background:#ffffff" i],
body.dark [style*="background: #ffffff" i],
body.dark [style*="background-color:#ffffff" i],
body.dark [style*="background-color: #ffffff" i],
body.dark [style*="background:white" i],
body.dark [style*="background: white" i],
body.dark [style*="background-color:white" i],
body.dark [style*="background-color: white" i] {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* -- danger / warning reds. Includes the HELOC Only row (tab_edit.php:187,
   inline #d97d7d), which read as a pastel salmon block on the dark form -- */
body.dark [style*="background:#d97d7d" i],
body.dark [style*="background: #d97d7d" i],
body.dark [style*="background-color:#d97d7d" i],
body.dark [style*="background-color: #d97d7d" i],
body.dark [style*="background:#e19898" i],
body.dark [style*="background: #e19898" i],
body.dark [style*="background-color:#e19898" i],
body.dark [style*="background-color: #e19898" i],
body.dark [style*="background:#f8d7da" i],
body.dark [style*="background: #f8d7da" i],
body.dark [style*="background-color:#f8d7da" i],
body.dark [style*="background-color: #f8d7da" i],
body.dark [style*="background:#fdedec" i],
body.dark [style*="background: #fdedec" i],
body.dark [style*="background-color:#fdedec" i],
body.dark [style*="background-color: #fdedec" i],
body.dark [style*="background:#fee2e2" i],
body.dark [style*="background: #fee2e2" i],
body.dark [style*="background-color:#fee2e2" i],
body.dark [style*="background-color: #fee2e2" i] {
	background-color: #3d1d1c !important;
	color: #f2ada4 !important;
	border-color: #5d2c2a !important;
}

/* -- success greens -- */
body.dark [style*="background:#d7e2d8" i],
body.dark [style*="background: #d7e2d8" i],
body.dark [style*="background-color:#d7e2d8" i],
body.dark [style*="background-color: #d7e2d8" i],
body.dark [style*="background:#b4e380" i],
body.dark [style*="background: #b4e380" i],
body.dark [style*="background-color:#b4e380" i],
body.dark [style*="background-color: #b4e380" i],
body.dark [style*="background:#eafaf1" i],
body.dark [style*="background: #eafaf1" i],
body.dark [style*="background-color:#eafaf1" i],
body.dark [style*="background-color: #eafaf1" i],
body.dark [style*="background:#d4edda" i],
body.dark [style*="background: #d4edda" i],
body.dark [style*="background-color:#d4edda" i],
body.dark [style*="background-color: #d4edda" i] {
	background-color: #16301f !important;
	color: #7fd6a0 !important;
	border-color: #26543a !important;
}

/* -- warning ambers -- */
body.dark [style*="background:#fff8e1" i],
body.dark [style*="background: #fff8e1" i],
body.dark [style*="background-color:#fff8e1" i],
body.dark [style*="background-color: #fff8e1" i],
body.dark [style*="background:#fff3cd" i],
body.dark [style*="background: #fff3cd" i],
body.dark [style*="background-color:#fff3cd" i],
body.dark [style*="background-color: #fff3cd" i],
body.dark [style*="background:#fef3c7" i],
body.dark [style*="background: #fef3c7" i],
body.dark [style*="background-color:#fef3c7" i],
body.dark [style*="background-color: #fef3c7" i] {
	background-color: #33280f !important;
	color: #e6c07b !important;
	border-color: #574421 !important;
}

/* -- informational blues -- */
body.dark [style*="background:#eaf4fb" i],
body.dark [style*="background: #deedf7" i],
body.dark [style*="background:#deedf7" i],
body.dark [style*="background-color: #deedf7" i],
body.dark [style*="background-color:#deedf7" i],
body.dark [style*="background: #eaf4fb" i],
body.dark [style*="background-color:#eaf4fb" i],
body.dark [style*="background-color: #eaf4fb" i],
body.dark [style*="background:#9cd4e6" i],
body.dark [style*="background: #9cd4e6" i],
body.dark [style*="background-color:#9cd4e6" i],
body.dark [style*="background-color: #9cd4e6" i] {
	background-color: #12313d !important;
	color: #9fd9ef !important;
	border-color: #24596c !important;
}

/* -- bright status badges (OL / M / etc. on the clients list) --------------
   These are inline `background: #ffa500` or `#04cd04` with `color: #fff`,
   which is 1.97:1 and 2.16:1 — unreadable on any ground, but especially loud
   against a dark row. The FILL is kept, because the colour is the badge's
   meaning; only the label flips to dark ink, which takes both above 8:1.
   Keyed on the fill, so every letter that uses it is covered. */
body.dark [style*="background: #ffa500" i],
body.dark [style*="background:#ffa500" i],
body.dark [style*="background: #04cd04" i],
body.dark [style*="background:#04cd04" i] {
	color: #101418 !important;
}

/* -- inline NAMED colours ------------------------------------------------
   The hex and hsl selectors above cannot see `background: gold`. Same
   background-only matching so a `color: red` on a coloured button is not
   caught. Mapped by hue, so each keeps its meaning. -- */

/* light greens -> dark green (lightgreen alone is used 24x) */
body.dark [style*="background:#66FC00" i],
body.dark [style*="background: #66FC00" i],
body.dark [style*="background-color:#66FC00" i],
body.dark [style*="background-color: #66FC00" i],
body.dark [style*="background:lightgreen" i],
body.dark [style*="background: lightgreen" i],
body.dark [style*="background-color:lightgreen" i],
body.dark [style*="background-color: lightgreen" i],
body.dark [style*="background:palegreen" i],
body.dark [style*="background: palegreen" i],
body.dark [style*="background-color:palegreen" i],
body.dark [style*="background-color: palegreen" i],
body.dark [style*="background:honeydew" i],
body.dark [style*="background: honeydew" i],
body.dark [style*="background-color:honeydew" i],
body.dark [style*="background-color: honeydew" i],
body.dark [style*="background:mintcream" i],
body.dark [style*="background: mintcream" i],
body.dark [style*="background-color:mintcream" i],
body.dark [style*="background-color: mintcream" i] {
	background-color: #16301f !important;
	color: #7fd6a0 !important;
}

/* golds / yellows -> dark amber. `gold` is the activity-log highlight and
   was the brightest thing left on the lead Edit tab */
body.dark [style*="background:gold" i],
body.dark [style*="background: gold" i],
body.dark [style*="background-color:gold" i],
body.dark [style*="background-color: gold" i],
body.dark [style*="background:yellow" i],
body.dark [style*="background: yellow" i],
body.dark [style*="background-color:yellow" i],
body.dark [style*="background-color: yellow" i],
body.dark [style*="background:lemonchiffon" i],
body.dark [style*="background: lemonchiffon" i],
body.dark [style*="background-color:lemonchiffon" i],
body.dark [style*="background-color: lemonchiffon" i],
body.dark [style*="background:khaki" i],
body.dark [style*="background: khaki" i],
body.dark [style*="background-color:khaki" i],
body.dark [style*="background-color: khaki" i],
body.dark [style*="background:lightyellow" i],
body.dark [style*="background: lightyellow" i],
body.dark [style*="background-color:lightyellow" i],
body.dark [style*="background-color: lightyellow" i],
body.dark [style*="background:ivory" i],
body.dark [style*="background: ivory" i],
body.dark [style*="background-color:ivory" i],
body.dark [style*="background-color: ivory" i],
body.dark [style*="background:#ffe6b3" i],
body.dark [style*="background: #ffe6b3" i],
body.dark [style*="background-color:#ffe6b3" i],
body.dark [style*="background-color: #ffe6b3" i],
body.dark [style*="#fbeeb8" i] {
	background-color: #6b5411 !important;
	color: #ffe9a8 !important;
}

/* #fbeeb8 is TinyMCE's highlight yellow, and it arrives inside STORED content
   (pitch bodies, landing-page copy) wrapping other markup. Setting the colour
   on the highlight alone is not enough — a <strong> inside it kept the light
   body ink and measured 1.19 on the pale fill — so the ink is pushed down. */
body.dark [style*="#fbeeb8" i] * {
	color: #ffe9a8 !important;
}

/* light reds / pinks -> dark red */
body.dark [style*="background:lightsalmon" i],
body.dark [style*="background: lightsalmon" i],
body.dark [style*="background-color:lightsalmon" i],
body.dark [style*="background-color: lightsalmon" i],
body.dark [style*="background:lightpink" i],
body.dark [style*="background: lightpink" i],
body.dark [style*="background-color:lightpink" i],
body.dark [style*="background-color: lightpink" i],
body.dark [style*="background:mistyrose" i],
body.dark [style*="background: mistyrose" i],
body.dark [style*="background-color:mistyrose" i],
body.dark [style*="background-color: mistyrose" i],
body.dark [style*="background:salmon" i],
body.dark [style*="background: salmon" i],
body.dark [style*="background-color:salmon" i],
body.dark [style*="background-color: salmon" i] {
	background-color: #3d1d1c !important;
	color: #f2ada4 !important;
}

/* light blues / cyans -> dark blue */
body.dark [style*="background:lightblue" i],
body.dark [style*="background: lightblue" i],
body.dark [style*="background-color:lightblue" i],
body.dark [style*="background-color: lightblue" i],
body.dark [style*="background:lightcyan" i],
body.dark [style*="background: lightcyan" i],
body.dark [style*="background-color:lightcyan" i],
body.dark [style*="background-color: lightcyan" i],
body.dark [style*="background:cyan" i],
body.dark [style*="background: cyan" i],
body.dark [style*="background-color:cyan" i],
body.dark [style*="background-color: cyan" i],
body.dark [style*="background:aliceblue" i],
body.dark [style*="background: aliceblue" i],
body.dark [style*="background-color:aliceblue" i],
body.dark [style*="background-color: aliceblue" i],
body.dark [style*="background:azure" i],
body.dark [style*="background: azure" i],
body.dark [style*="background-color:azure" i],
body.dark [style*="background-color: azure" i],
body.dark [style*="background:powderblue" i],
body.dark [style*="background: powderblue" i],
body.dark [style*="background-color:powderblue" i],
body.dark [style*="background-color: powderblue" i] {
	background-color: #12313d !important;
	color: #9fd9ef !important;
}

/* light purples -> dark violet */
body.dark [style*="background:thistle" i],
body.dark [style*="background: thistle" i],
body.dark [style*="background-color:thistle" i],
body.dark [style*="background-color: thistle" i],
body.dark [style*="background:lavender" i],
body.dark [style*="background: lavender" i],
body.dark [style*="background-color:lavender" i],
body.dark [style*="background-color: lavender" i],
body.dark [style*="background:plum" i],
body.dark [style*="background: plum" i],
body.dark [style*="background-color:plum" i],
body.dark [style*="background-color: plum" i] {
	background-color: #2b1f3a !important;
	color: #d3bbf0 !important;
}

/* named neutrals -> panel */
body.dark [style*="background:silver" i],
body.dark [style*="background: silver" i],
body.dark [style*="background-color:silver" i],
body.dark [style*="background-color: silver" i],
body.dark [style*="background:gainsboro" i],
body.dark [style*="background: gainsboro" i],
body.dark [style*="background-color:gainsboro" i],
body.dark [style*="background-color: gainsboro" i],
body.dark [style*="background:lightgray" i],
body.dark [style*="background: lightgray" i],
body.dark [style*="background-color:lightgray" i],
body.dark [style*="background-color: lightgray" i],
body.dark [style*="background:lightgrey" i],
body.dark [style*="background: lightgrey" i],
body.dark [style*="background-color:lightgrey" i],
body.dark [style*="background-color: lightgrey" i],
body.dark [style*="background:whitesmoke" i],
body.dark [style*="background: whitesmoke" i],
body.dark [style*="background-color:whitesmoke" i],
body.dark [style*="background-color: whitesmoke" i],
body.dark [style*="background:snow" i],
body.dark [style*="background: snow" i],
body.dark [style*="background-color:snow" i],
body.dark [style*="background-color: snow" i],
body.dark [style*="background:linen" i],
body.dark [style*="background: linen" i],
body.dark [style*="background-color:linen" i],
body.dark [style*="background-color: linen" i] {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
}

/* -- inline TEXT colours ---------------------------------------------------
   lead_helper.php builds the lead status label as
   `<span style='color: {$color};'>` with $color one of #666 / red / green /
   orange — "Carl Blocked" is #666, which is near-invisible on a dark row.
   The status-flag comment line under it is `color:#999;font-size:9px`, and
   clients/notes.php uses its own #555 / #1a7a1a / #b85c00 / #c0392b set.

   These match `color:` rather than `background:`, so they are the mirror of
   the groups above and must not touch anything's fill. Each keeps its hue so
   the status colour still means what it meant. */
body.dark [style*="color: #666" i],
body.dark [style*="color:#666" i],
body.dark [style*="color: #555" i],
body.dark [style*="color:#555" i],
body.dark [style*="color: #999" i],
body.dark [style*="color:#999" i],
body.dark [style*="color: #777" i],
body.dark [style*="color:#777" i],
body.dark [style*="color: #888" i],
body.dark [style*="color:#888" i],
body.dark [style*="color: #667" i],
body.dark [style*="color:#667" i] {
	color: var(--dk-text-dim) !important;
}

body.dark [style*="color: red" i],
body.dark [style*="color:red" i],
body.dark [style*="color: #c0392b" i],
body.dark [style*="color:#c0392b" i] {
	color: #ff8f84 !important;
}

body.dark [style*="color: green" i],
body.dark [style*="color:green" i],
body.dark [style*="color: #1a7a1a" i],
body.dark [style*="color:#1a7a1a" i] {
	color: #6fcf97 !important;
}

body.dark [style*="color: orange" i],
body.dark [style*="color:orange" i],
body.dark [style*="color: #b85c00" i],
body.dark [style*="color:#b85c00" i] {
	color: #f0a94a !important;
}

/* Dark NAMED text colours. lead_helper.php uses `maroon` for Duplicate and for
   two followup states (4 places), and `black` is used 41x inline plus 32x in
   the stylesheets. All of these are chosen against white and go invisible on a
   dark row. Light named colours (lightgreen, gold, yellow, white, silver,
   thistle, palegreen, lightsalmon...) already read on dark and are NOT listed
   — changing those would flatten distinctions that still work. */
body.dark [style*="color: maroon" i],
body.dark [style*="color:maroon" i],
body.dark [style*="color: darkred" i],
body.dark [style*="color:darkred" i],
body.dark [style*="color: brown" i],
body.dark [style*="color:brown" i] {
	color: #ff9c8f !important;
}

body.dark [style*="color: black" i],
body.dark [style*="color:black" i],
body.dark [style*="color: #000" i],
body.dark [style*="color:#000" i],
body.dark [style*="color: #111" i],
body.dark [style*="color:#111" i],
body.dark [style*="color: #222" i],
body.dark [style*="color:#222" i],
body.dark [style*="color: #333" i],
body.dark [style*="color:#333" i],
body.dark [style*="color: #444" i],
body.dark [style*="color:#444" i] {
	color: var(--dk-text) !important;
}

body.dark [style*="color: gray" i],
body.dark [style*="color:gray" i],
body.dark [style*="color: grey" i],
body.dark [style*="color:grey" i],
body.dark [style*="color: slategray" i],
body.dark [style*="color:slategray" i],
body.dark [style*="color: dimgray" i],
body.dark [style*="color:dimgray" i] {
	color: var(--dk-text-dim) !important;
}

body.dark [style*="color: blue" i],
body.dark [style*="color:blue" i],
body.dark [style*="color: navy" i],
body.dark [style*="color:navy" i] {
	color: var(--dk-link) !important;
}

body.dark [style*="color: darkgreen" i],
body.dark [style*="color:darkgreen" i] {
	color: #6fcf97 !important;
}

body.dark [style*="color: darkorange" i],
body.dark [style*="color:darkorange" i] {
	color: #f0a94a !important;
}

body.dark [style*="color: purple" i],
body.dark [style*="color:purple" i],
body.dark [style*="color: indigo" i],
body.dark [style*="color:indigo" i] {
	color: #c9a6f0 !important;
}

body.dark [style*="color: teal" i],
body.dark [style*="color:teal" i],
body.dark [style*="color: olive" i],
body.dark [style*="color:olive" i] {
	color: #6fd0cf !important;
}

/* -- inline hsl() fills -------------------------------------------------
   Some rows are written as hsl() rather than hex, so none of the selectors
   above could see them and they stayed fully light. These carry meaning (the
   Lead Filters colour key), so each keeps its hue and only drops luminance.
   Matched on the exact authored string, whitespace included. */
body.dark [style*="hsl(185, 62%, 80%)" i],
body.dark [style*="hsl(185,62%,80%)" i] {
	background-color: #12333a !important;
	color: #a8e0ea !important;
}

body.dark [style*="hsl(86, 80%, 85%)" i],
body.dark [style*="hsl(86,80%,85%)" i],
body.dark [style*="hsl(84, 80%, 80%)" i],
body.dark [style*="hsl(84,80%,80%)" i],
body.dark [style*="hsl(95, 40%, 80%)" i],
body.dark [style*="hsl(95,40%,80%)" i] {
	background-color: #1c3a19 !important;
	color: #b6e59a !important;
}

body.dark [style*="hsl(40, 88%, 80%)" i],
body.dark [style*="hsl(40,88%,80%)" i],
body.dark [style*="hsl(51.43deg 16.54% 75.1%)" i] {
	background-color: #6b5411 !important;
	color: #e8c98a !important;
}

body.dark [style*="hsl(225, 20%, 85%)" i],
body.dark [style*="hsl(225,20%,85%)" i],
body.dark [style*="hsl(206, 60%, 97%)" i],
body.dark [style*="hsl(206, 60%, 94%)" i],
body.dark [style*="hsl(206, 60%, 93%)" i],
body.dark [style*="hsl(206, 60%, 88%)" i],
body.dark [style*="hsl(205, 60%, 90%)" i],
body.dark [style*="hsl(205, 60%, 85%)" i] {
	background-color: #162a38 !important;
	color: #a9cbe6 !important;
}

/* Saturated inline colours (#d69520 orange, #257a99 / #2d5b6c teal, #477aaa
   blue, #4a7c4e / #27ae60 green, and the dark hsl() values already written for
   contrast) are deliberately left alone — they carry on a dark ground and
   re-tinting them would change intent. */

/* ==========================================================================
   8b. CONTEXTUAL TEXT + PANELS THAT PAINT THEIR OWN LIGHT FACE
       Every colour here is tuned for a light background and lands wrong on a
       dark one. Two distinct failures: text that goes too dark to read, and
       panels that stay light while inheriting body.dark's LIGHT text — which
       is worse than untouched, because it is light-on-light.
   ========================================================================== */

/* Bootstrap contextual text. .text-success is #3c763d — the green on the
   lead activity credit line — which is ~2.5:1 on our surface. */
body.dark .text-success { color: #5fd18a !important; }
body.dark .text-danger  { color: #f0705f !important; }
body.dark .text-warning { color: #e6ab54 !important; }
body.dark .text-info    { color: var(--dk-link) !important; }
body.dark .text-muted   { color: var(--dk-text-dim) !important; }

body.dark .alert {
	border-color: var(--dk-border) !important;
}

body.dark .alert-info {
	background-color: #12313d !important;
	color: #9fd9ef !important;
}

body.dark .alert-success {
	background-color: #16301f !important;
	color: #7fd6a0 !important;
}

body.dark .alert-warning {
	background-color: #33280f !important;
	color: #e6c07b !important;
}

body.dark .alert-danger {
	background-color: #351a19 !important;
	color: #f0a49b !important;
}

/* The expanded [details] panel in Lead Actions and Lead Activity — leads.css
   gives it #edeaea with black text, so it reads as a white hole once opened. */
body.dark .activity_details {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .activity_details a {
	color: var(--dk-link) !important;
}

/* Named panels and dialogs that hardcode #fff / #eee / #feffe8. Several are
   .hide until a CSR triggers them, so they have to be covered now rather than
   when someone hits them mid-call. */
body.dark #points_panel,
body.dark #lt_panel,
body.dark #lt_panel_pending,
body.dark #lead_sms_reply,
body.dark #csr_activity_checker,
body.dark #set_followup,
body.dark #set_status_sms,
body.dark .call-confirm-inner {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* FRU-22827 — the CALL SCRIPT (pitch) panel. admin.css paints #pitch_panel #fff
   and .pitch_content / .pitch_menu / .pitch_symbol #000, and the top-of-page
   variant #pitch_panel_top is a light-blue gradient with #362b36 text. It pops
   onto the lead page when a call lands, so it was the brightest thing on a dark
   screen. The stored pitch body is HTML — links and the yellow highlight spans
   inside it are already handled by the inline-style rules further down. */
body.dark #pitch_panel {
	background-color: var(--dk-surface) !important;
	border-color: var(--dk-border) !important;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6) !important;
}

body.dark #pitch_panel_top {
	background: linear-gradient(var(--dk-thead-top), var(--dk-thead-bottom)) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

body.dark .pitch_content,
body.dark .pitch_menu,
body.dark .pitch_symbol,
body.dark #pitch_panel_top .pitch_content {
	color: var(--dk-text) !important;
}

/* FRU-22827 — pnotify TOASTS (notify_success / notify_error / notify_info). The
   container is `.ui-widget-content` plus a jQuery UI state class per type, so
   the generic widget rule above already darkens info; these keep the four types
   telling apart. Error stays red: the light theme's #cd0a0a is the one colour a
   CSR reads as "this did not save", and the widget rule was flattening it to the
   same slate as info. */
body.dark .ui-pnotify .ui-pnotify-container {
	background-image: none !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .ui-pnotify .ui-pnotify-container.ui-state-default {
	/* success */
	background-color: #16301f !important;
	border-color: #2f7a4a !important;
	color: #a8e6bf !important;
}

body.dark .ui-pnotify .ui-pnotify-container.ui-state-highlight {
	/* notice / warning */
	background-color: #4a3f10 !important;
	border-color: #d4b93a !important;
	color: #ffe680 !important;
}

body.dark .ui-pnotify .ui-pnotify-container.ui-state-error {
	background-color: #7a1212 !important;
	border-color: #cd0a0a !important;
	color: #ffffff !important;
}

body.dark .ui-pnotify .ui-pnotify-title,
body.dark .ui-pnotify .ui-pnotify-text,
body.dark .ui-pnotify .ui-pnotify-closer,
body.dark .ui-pnotify .ui-pnotify-sticker {
	color: inherit !important;
}

/* FRU-22827 — the "Poor" credit rating on the lead summary is an inline
   `background-color: orange` span. On the dark page it kept the orange and
   inherited light text, which is unreadable. Same dark-amber treatment the
   other lead-summary highlights (Home Equity, Cash Out) already get. */
body.dark .lead_text.credit span[style*="orange" i] {
	background-color: #6b5411 !important;
	color: #ffe9a8 !important;
	padding: 0 3px;
}

body.dark #incoming_call_from_callback,
body.dark #qualified_purchase {
	background-color: #33280f !important;
	color: #e6c07b !important;
	border-color: var(--dk-border) !important;
}

body.dark #user-role-switcher-menu {
	background-color: #1d3b26 !important;
	color: var(--dk-text) !important;
}

body.dark #user-role-switcher-menu a {
	color: var(--dk-link) !important;
}

/* ==========================================================================
   8c. CLIENTS TAB
       The client list carries its own colour vocabulary, and two of its
       containers are painted from a page <style> block rather than a
       stylesheet — a <style> block sits later in document order than the
       dark.css <link>, so these need !important to win even at equal
       specificity.
   ========================================================================== */

/* clients.css sets `.client_days_red { color: red }` — pure #f00 sits at
   4.28:1 on the table surface and is the single most repeated value on the
   page (the Last Note / Last Lead day counts, ~50 per screen). */
body.dark .client_days_red {
	color: #ff8f84 !important;
}

/* .client_admin_id is `color: green` in clients.css AND an inline
   `style="color: #008000"` on every row, so this needs !important twice over
   — the Linked column (edward / eddie / joshua / patrick). */
body.dark .client_admin_id,
body.dark a.client_admin_id {
	color: #6fcf97 !important;
}

body.dark .group_name,
body.dark .group_name_ol {
	color: var(--dk-link) !important;
}

/* Expanding a group injects tr.group_clients rows whose cells paint
   #f3f8fc — near-white, and they inherit body.dark's LIGHT text, so the
   expanded children render light-on-light. Given a distinct shade rather than
   the plain surface so the grouping still reads as nested. */
body.dark tr.group_clients td,
body.dark tr.group_clients td.tooltip,
body.dark tr.group_clients td.actions {
	background-color: #1a2830 !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* The co-managed flag icon is an inline SVG filled `darkred` (#8b0000), which
   all but disappears on the dark row. The unflagged state uses the old link
   blue #42839f and is lifted to match the rest of the page. */
body.dark a.co_managed_client.flagged svg,
body.dark a.co_managed_client.flagged svg path {
	fill: #ff7a6b !important;
}

body.dark a.co_managed_client svg,
body.dark a.co_managed_client svg path {
	fill: var(--dk-link);
}

/* Painted #2483a3 and #257a99 by the clients page's own <style> block. */
body.dark .filters-grid {
	background-color: var(--dk-surface-2) !important;
}

body.dark #pages,
body.dark #pages_t {
	background-color: var(--dk-h1) !important;
	color: var(--dk-h1-txt) !important;
}

body.dark #pages a,
body.dark #pages_t a {
	color: var(--dk-link-chrome) !important;
}

/* Each page_link paints its own #2d5b6c face, leaving the orange label at
   4.2:1. .current_page keeps the admin orange it has in light mode. */
body.dark #pages a.page_link,
body.dark #pages_t a.page_link {
	background-color: var(--dk-surface-2) !important;
	color: #ffd08a !important;
	border-color: var(--dk-border) !important;
}

body.dark #pages a.page_link.current_page,
body.dark #pages_t a.page_link.current_page {
	background-color: #d69520 !important;
	color: #ffffff !important;
}

/* ==========================================================================
   8d. LIGHT SURFACES ACROSS THE REMAINING TABS
       Found by sweeping every tab with a contrast auditor rather than by
       reading CSS. These paint a light face from a class (not an inline
       style), so the section-8 attribute selectors cannot reach them. Each
       one otherwise renders body.dark's light text on a light panel.
   ========================================================================== */

/* -- client detail + notes (Account Health, the tab shell, campaign box) -- */
/* NOTE: `#client_edit_tabs td` is deliberately NOT in this list. Rows on the
   Lead Filters tab carry semantic colour on the <tr> (green = home equity /
   HELOC rules, etc.) while the <td>s stay transparent so it shows through.
   Painting the cells opaque covered that colour key and flattened every row
   to grey. Cells must stay transparent; only the row is coloured. */
body.dark #client_edit_tabs,
body.dark #confirmation_status,
body.dark #add_campaign_account,
body.dark #add_campaign_account_btn,
body.dark .note-ai-btn,
body.dark .linked-and-datetime,
body.dark tr.row-additional-group-emails-title,
body.dark tr.row-additional-group-emails-title td {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark #website_approval_info {
	background-color: #12313d !important;
	color: #9fd9ef !important;
	border-color: #24596c !important;
}

/* -- returns / moderation --------------------------------------------------
   These row classes are a STATUS COLOUR KEY, not decoration. admin.css:
     .rtn_return    #e8f0ec  pale green   (return approved)
     .rtn_denied    #f3e8e8  pale red     (denied)
     .rtn_escalated #f5f4f4  pale neutral (escalated)
     .rtn_pending   (unstyled)            (pending)
   Mapping them all to one neutral surface made an approved return and a denied
   one look identical — the whole point of the page is telling them apart. Each
   keeps its hue; cells stay transparent so the row colour shows through. */
/* Specificity note: the zebra rule above is
   `body.dark .chart1 tbody tr:nth-child(2n)` = (0,3,3), which out-ranks a bare
   `body.dark tr.rtn_denied` = (0,2,2) — so a denied row landing on an even
   stripe silently lost its colour. These match the zebra's shape so the status
   colour wins on every row, odd or even. */
body.dark .chart1 tbody tr.rtn_return,
body.dark tbody tr.rtn_return,
body.dark tr.rtn_return {
	background-color: #1f4a2c !important;
	color: var(--dk-text) !important;
}

body.dark .chart1 tbody tr.rtn_denied,
body.dark tbody tr.rtn_denied,
body.dark tr.rtn_denied {
	background-color: #522a26 !important;
	color: var(--dk-text) !important;
}

body.dark .chart1 tbody tr.rtn_escalated,
body.dark tbody tr.rtn_escalated,
body.dark tr.rtn_escalated {
	background-color: #3a3a3f !important;
	color: var(--dk-text) !important;
}

body.dark tr.rtn_return td,
body.dark tr.rtn_denied td,
body.dark tr.rtn_escalated td,
body.dark tr.rtn_pending td {
	background-color: transparent !important;
}

/* -- HR holiday grid -- */
body.dark .hol-row,
body.dark .hol-btn {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .hol-sub,
body.dark .hol-add-note,
body.dark .hol-empty-custom,
body.dark .hol-log-empty {
	color: var(--dk-text-dim) !important;
}

body.dark .hol-col-status.half_day {
	color: #e6ab54 !important;
}

/* -- site content -- */
body.dark #container.site-content-landing-pages {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

/* -- financial live summary: a page <style> block defines its own named
      colour classes (silver / gainsboro / lightgray) and applies them to both
      <col> and <tr>, which is what makes that page a stack of light bands.
      `.chart1 tr.silver` is a DIFFERENT thing (the teal table header) and is
      matched more specifically above, so it keeps its gradient. -- */
/* FIVE distinct bands, not two. financial_tab/live_summary alternates its
   columns with `gainsboro` / `lightgray` / `silver` and marks rows with
   `lemonchiffon` / `palegreen`. Collapsing silver and lightgray into one fill
   removed the alternation entirely, and the two hued classes were never mapped
   at all, so they stayed bright.

   The ladder keeps light mode's ordering — gainsboro is the most raised band,
   silver the least — and its separations are comparable: light is 1.09 between
   gainsboro and lightgray and 1.21 between lightgray and silver; these are
   1.22 and 1.19. */
body.dark col.gainsboro,
body.dark .gainsboro,
body.dark tr.gainsboro,
body.dark tr.gainsboro td {
	background-color: #2a3c46 !important;
	color: var(--dk-text) !important;
}

body.dark col.lightgray,
body.dark .lightgray,
body.dark tr.lightgray,
body.dark tr.lightgray td {
	background-color: #1f2e36 !important;
	color: var(--dk-text) !important;
}

body.dark col.silver,
body.dark .silver,
body.dark tr.silver,
body.dark tr.silver td {
	background-color: #152026 !important;
	color: var(--dk-text) !important;
}

/* The two hued bands mean something on that page, so they stay yellow and
   green rather than joining the grey ladder. */
body.dark col.lemonchiffon,
body.dark .lemonchiffon,
body.dark tr.lemonchiffon,
body.dark tr.lemonchiffon td {
	background-color: #3a3418 !important;
	color: #f2e6b0 !important;
}

body.dark col.palegreen,
body.dark .palegreen,
body.dark tr.palegreen,
body.dark tr.palegreen td {
	background-color: #17331f !important;
	color: #a6e6ba !important;
}

/* -- site content rate viewer (.rv-*): its own light palette in a page
      <style> block — #eceff1 heads, #fff wraps, #fafafa disclosure, #eef4f6
      scenario, with #000 / #37474f ink. -- */
body.dark #rv-app,
body.dark .rv-toolbar,
body.dark .rv-alert,
body.dark .rv-table-wrap,
body.dark .rv-disclosure {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border-strong) !important;
}

body.dark .rv-table th,
body.dark .rv-compare th {
	background-color: var(--dk-thead-bottom) !important;
	color: var(--dk-thead-txt) !important;
	border-bottom-color: var(--dk-border-strong) !important;
}

body.dark .rv-compare,
body.dark .rv-compare td {
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .rv-scenario {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .rv-band-header span {
	color: var(--dk-text-dim) !important;
}

/* -- bootstrap-flavoured "default" buttons. The TAG decides which sheet wins
      in light mode, measured across sms_chats / analytics_tab/google /
      site_content_tab/lender_profiles / bank_inquiry_tab:
         a.btn-default      -> #eee grey  (bootstrap family)
         button.btn-default -> #d69520    (admin.css's generic button rule)
      Painting both neutral turned Lender Inquiry > Add New's amber "Continue"
      into a dark grey slab, so the two are split here and the <button> form
      gets the same deepened amber as every other admin button. `.active` is
      excluded so the selected-state rule further down still wins. -- */
body.dark a.btn-default {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark button.btn-default:not(.active),
body.dark input.btn-default:not(.active) {
	background-color: var(--dk-btn-amber) !important;
	border-color: var(--dk-btn-amber-brd) !important;
	color: var(--dk-btn-amber-txt) !important;
}

/* -- muted greys that were written for a light page -- */
body.dark .date-view-time,
body.dark .date-view-tz,
body.dark .more_less,
body.dark #consumer_bank_name_info,
body.dark #docs-loading {
	color: var(--dk-text-dim) !important;
}

body.dark .balance_negative { color: #ff8f84 !important; }
body.dark .balance_positive { color: #6fcf97 !important; }

/* -- HR: the add-form, log list and pill buttons paint #fff / #f7f7f7 / #e8e8e8 -- */
body.dark .hol-add-form,
body.dark .hol-log-list,
body.dark .hol-empty-custom,
body.dark .hol-add-pill {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .hol-add-pill.working { color: #7fd6a0 !important; }
body.dark .hol-add-pill.half_day { color: #e6ab54 !important; }

/* -- link-styled buttons and bare action buttons that kept a light-page ink -- */
body.dark .btn-link,
body.dark button.btn-link,
body.dark .btn-edit-account-email,
body.dark #btn-toggle-poc-logs,
body.dark #btn-add-branch,
body.dark #client-emails-toggle-icon {
	color: var(--dk-link) !important;
}

/* Bootstrap's default link ink (#1d799a) is too dark on our surface. */
body.dark #content-body .sr-only,
body.dark #content-body span.content,
body.dark .more_less {
	color: var(--dk-link) !important;
}

/* -- site content: the alias/slug readouts are #555 -- */
body.dark .site-content-landing-pages div,
body.dark .site-content-landing-pages code,
body.dark #content-body code,
body.dark #content-body em {
	color: var(--dk-text) !important;
}

body.dark #content-body code {
	background-color: var(--dk-surface-2) !important;
}

/* ==========================================================================
   8e. GMAIL HISTORY + EMAIL COMPOSER (client notes page)
       The email history panel and the Gemini compose UI are their own little
       design system, all built for a white Gmail-like surface.
   ========================================================================== */
body.dark #client-emails-body,
body.dark #gemini-sig-body,
body.dark #bw-email-toast,
body.dark .input-wrapper {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark #gemini-thread-bar {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark #client-emails-loading,
body.dark #gemini-subject-locked-note,
body.dark #gemini-compose label,
body.dark #client-emails-body .muted {
	color: var(--dk-text-dim) !important;
}

body.dark #client-emails-toggle-icon {
	color: var(--dk-link-chrome) !important;
}

/* leads.css `.error` is #f2dede / #a94442 — Bootstrap's alert-danger pair,
   built for a white page. This is the DO NOT CONTACT / DO NOT SELL banner on
   the lead page (35 plain `class="error"` uses across admin views, plus the
   client-notify variants), and at full width it was the largest light block
   left on a flagged lead. */
body.dark .error,
body.dark .alert.error,
body.dark .client-notify-banner.error,
body.dark .ai-alert-error {
	background-color: #3d1d1c !important;
	color: #f2ada4 !important;
	border-color: #7a3a34 !important;
}

/* An EMPTY .error / .alert is a placeholder the page only fills in when
   something actually goes wrong. admin.css gives `.alert` a transparent border
   and no fill, so in light mode those placeholders are invisible; painting them
   unconditionally turned all 27 of them on /traffic_tab/product_minimums into
   red squares between the inputs. Padding is deliberately left alone so the
   layout stays pixel-identical to light mode — only the paint is removed. */
body.dark .error:empty,
body.dark .alert:empty,
body.dark .alert.error:empty,
body.dark .client-notify-banner.error:empty,
body.dark .ai-alert-error:empty {
	background-color: transparent !important;
	border-color: transparent !important;
}

body.dark .error a,
body.dark .client-notify-banner.error a {
	color: #ffc2ba !important;
}

/* The client banners are a DIFFERENT thing from the pale `.error` panels above.
   clients.css gives them saturated fills — .error #e74c3c (22.5% luminance),
   .warning #f1c40f, .mismatch #fdf1f1, .info — because they are page-level
   status, not an inline alert. Folding them into the muted `.error` value
   dropped them to 2% and they stopped reading as banners at all. These keep
   their saturation, just pulled down enough to sit on a dark page. */
body.dark .client-notify-banner.error {
	background-color: #b3392c !important;
	border-color: #d4503f !important;
	color: #fff2f0 !important;
}

body.dark .client-notify-banner.warning {
	background-color: #b8940d !important;
	border-color: #d9ae12 !important;
	color: #1c1600 !important;
}

body.dark .client-notify-banner.info {
	background-color: #1c6a86 !important;
	border-color: #2589ab !important;
	color: #eaf6fb !important;
}

body.dark .client-notify-banner.mismatch {
	background-color: #4a2a2c !important;
	border-left-color: #d4503f !important;
	color: #ffd9d5 !important;
}

body.dark .client-notify-banner .notify-banner-head,
body.dark .client-notify-banner .notify-banner-body,
body.dark .client-notify-banner .notify-banner-head i.fa {
	color: inherit !important;
}

/* Buttons inside a saturated banner need the standard amber, same reasoning as
   the Undo button on the lead page. */
body.dark .client-notify-banner button {
	background-color: var(--dk-btn-amber) !important;
	border: 1px solid var(--dk-btn-amber-brd) !important;
	color: var(--dk-btn-amber-txt) !important;
	border-radius: 3px;
}

/* Undo / Anonymize sit inside those banners. In light mode they are ordinary
   amber admin buttons on the pink banner, so they read as controls. Giving
   them a red fill here made them melt into the banner instead — they keep the
   standard toned amber so a button still looks like a button. */
body.dark .error button,
body.dark .client-notify-banner.error button {
	background-color: var(--dk-btn-amber) !important;
	border: 1px solid var(--dk-btn-amber-brd) !important;
	color: var(--dk-btn-amber-txt) !important;
	border-radius: 3px;
}

/* leads/notes error banner is #ffb6c1 (lightpink) with inherited dark text */
body.dark #add_note_error {
	background-color: #3d1d1c !important;
	color: #f2ada4 !important;
	border-color: #5d2c2a !important;
}

/* the in-app bug reporter modal */
body.dark #fru-reporter-modal,
body.dark #fru-reporter-cap-overlay-box,
body.dark #fru-reporter-screenshot-section {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* header stat line carries its own #333 */
body.dark .refinance-purchase-states-n-lenders {
	color: var(--dk-text) !important;
}

/* Unclassed <strong> is plain emphasis and should follow the body colour;
   classed ones are left alone so semantic colours survive. */
/* :not([style]) matters. This rule uses !important so it can lift emphasis
   text that a stylesheet left at #222/#333 — but an important author rule also
   beats a NORMAL inline colour, which silently destroyed semantic inline
   colours like the Returns page's `<small style="color:#f0a500">CQ: 50%</small>`.
   Anything carrying its own inline colour is now left alone. */
/* `:not([id])` joins them for the same reason as :not([style]): an id means a
   stylesheet is addressing that element on purpose, and flattening it destroys
   the colour it was given — `.cgp-count strong` (#cgp-count) is the CSR-cards
   green count. */
body.dark strong:not([class]):not([style]):not([id]),
body.dark b:not([class]):not([style]):not([id]),
body.dark em:not([class]):not([style]):not([id]),
body.dark small:not([class]):not([style]):not([id]) {
	color: inherit !important;
}

/* General net for the long tail: unclassed content elements that were given a
   light-page grey (#333 / #555 / #777 / #999) by a stylesheet somewhere. They
   carry no class, so they are plain content rather than anything semantic, and
   should follow the surface they sit on. No !important — an id-scoped rule
   with a real intent still wins. */
body.dark #content-body td:not([class]),
body.dark #content-body th:not([class]),
body.dark #content-body p:not([class]),
body.dark #content-body li:not([class]),
body.dark #content-body dd:not([class]),
body.dark #content-body dt:not([class]) {
	color: inherit;
}

body.dark .frb-lead-chip-row,
body.dark .frb-lead-chip {
	color: var(--dk-text) !important;
}

/* -- in-app bug reporter widget (the Report button) ---------------------- */
body.dark #fru-reporter-modal,
body.dark #fru-reporter-context,
body.dark #fru-reporter-lead-chip,
body.dark #fru-reporter-screenshot-section,
body.dark #fru-reporter-cap-overlay-box,
body.dark #fru-reporter-lightbox-note,
body.dark .ss-action-btn,
body.dark #fru-reporter-cancel {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .ss-label,
body.dark .ss-recapture-label,
body.dark .ss-paste-hint,
body.dark #fru-reporter-note-req {
	color: var(--dk-text-dim) !important;
}

/* -- colorbox lightbox (used for dialogs and images across the admin) ---- */
body.dark #cboxContent,
body.dark #cboxLoadedContent,
body.dark #cboxTitle {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

/* ==========================================================================
   8k. LIVE TRANSFER DELIVERY TAB
       Same tab pattern as Lead Flow: admin-live-transfer-delivery.css paints
       the subnav #f7f7f7 with the active tab #fff and #444 labels, plus an
       expanded state section at #f5f5f5.
   ========================================================================== */
body.dark #admin-live-transfer-delivery-tabs .live-transfer-delivery-subnav {
	border-bottom-color: var(--dk-border-strong) !important;
}

body.dark #admin-live-transfer-delivery-tabs .live-transfer-delivery-subnav a {
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border-strong) !important;
	color: var(--dk-text-dim) !important;
}

body.dark #admin-live-transfer-delivery-tabs .live-transfer-delivery-subnav .active a {
	background-color: var(--dk-surface) !important;
	border-bottom-color: var(--dk-surface) !important;
	color: var(--dk-h1-txt) !important;
}

body.dark #admin-live-transfer-delivery-form .admin-lt-state-section.is-expanded {
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

body.dark #admin-live-transfer-delivery-tabs .live-transfer-hours-loader {
	color: var(--dk-text-dim) !important;
}

/* .btn-unsplit (#ff7816) and .btn-split (#1685b7) are saturated intent colours
   with white labels — they carry on dark and are left alone. */

/* ==========================================================================
   8j. CLIENT POST URLs TAB
       clients.css draws .post_url_notice as `background:#fff; color:#333`
       with a 5px accent top border carrying the meaning (#ff9494 danger,
       #2589ab info, #ffaa00 warning). Four of them stack full-width, so this
       tab was mostly white. The accent borders are kept — they are the signal.
   ========================================================================== */
body.dark .post_url_notice {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

body.dark .post_url_notice a {
	color: var(--dk-link) !important;
}

/* admin.css: .button-new is #d69520, .button-new.muted is #ddd/#555. The
   muted variant is a disabled-looking chip and went invisible on dark. */
body.dark .button-new {
	background-color: var(--dk-btn-amber) !important;
	color: var(--dk-btn-amber-txt) !important;
}

body.dark .button-new.muted,
body.dark a.button-new.muted,
body.dark span.button-new.muted {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text-dim) !important;
	border: 1px solid var(--dk-border) !important;
}

/* The post-url tables paint their own white cells. Verified before filling
   them: all 9 rows in this tab are transparent with no hue, so unlike the Lead
   Filters grid there is no semantic row colour to cover up. */
body.dark #tabs-post-urls td,
body.dark #tabs-post-urls th {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark #tabs-post-urls th {
	background-color: var(--dk-surface-2) !important;
}

/* Link colour for this tab, but NOT for anchors that are really buttons —
   otherwise the Test / Quick Test labels turn link-blue on an amber fill.
   .client_key.crm_login is deliberately excluded: that is the "gold key"
   client login, and its #f6b760 is the identity of the control. It only
   looked broken because it sat on a white table cell (now dark). */
body.dark #tabs-post-urls a:not(.button-new):not(.btn):not(.client_key) {
	color: var(--dk-link) !important;
}

/* The "gold key" client login. subnav.css gives the subnav instance literal
   `yellow` (#ffff00) — that exact gold is the identity of the control, so it
   is kept verbatim rather than normalised to the chrome link colour. Mirrors
   subnav.css's own `li .client_key, li .log-in-as` selector. */
/* Specificity: the subnav text rule is `body.dark ul.subnav li a` = (0,2,4),
   which out-ranks a bare `body.dark li a.log-in-as` = (0,2,3) — so the key
   went grey wherever it sits inside the subnav (e.g. users_tab/edit). The
   ul.subnav variants below are (0,3,4) and win. */
body.dark ul.subnav li a.log-in-as,
body.dark ul.subnav li a.client_key,
body.dark ul.subnav li a.client_key.crm_login,
body.dark li a.client_key.crm_login,
body.dark li a.client_key,
body.dark li a.log-in-as,
body.dark li .log-in-as {
	color: #ffff00 !important;
}

/* The icon inside inherits from the anchor, but jQuery UI / fa rules can set
   their own colour on the <i>, so pin it too. */
body.dark ul.subnav li a.log-in-as i,
body.dark ul.subnav li a.client_key i,
body.dark li a.log-in-as i,
body.dark li a.client_key i {
	color: #ffff00 !important;
}

/* Other instances: the inline "log in" link is already #f6b760 in light and
   stays there. The clients-list key icon inherits `.chart1 a` (#42839f), which
   is only 3.8:1 on a dark row, so it is lifted to the chrome gold — the one
   place this deliberately differs from light, for legibility. */
body.dark .client_key,
body.dark .client_key.crm_login,
body.dark a.client_key.crm_login {
	color: var(--dk-link-chrome) !important;
}

/* clients.css sets #444 on exactly three headings/labels in this tab — the
   "Post URL" field label, the "All Post URLs" heading and the "Lead Descriptor
   Names" heading. Each is its own id-scoped rule, which is why the generic
   inline-colour selectors never reached them. */
body.dark #post_url_actions label[for="post_url"],
body.dark #all_post_urls h2,
body.dark #descriptor_names h2 {
	color: var(--dk-text) !important;
}

/* .lt_info is a white info strip with a teal top border. */
body.dark .lt_info {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

/* clients.css makes Test / Quick Test teal buttons (#1d7799, white label) —
   they are deliberately NOT the amber action colour, because they run a test
   rather than save anything. The generic .button-new rule above was flattening
   them to amber and the link rule was recolouring the label. Keep them teal. */
body.dark #post_url_actions #custom_test,
body.dark #post_url_actions #quick_test,
body.dark a#custom_test.button-new,
body.dark a#quick_test.button-new {
	background-color: #1d7799 !important;
	border-color: #2a91b8 !important;
	color: #ffffff !important;
}

/* ==========================================================================
   8h. CLIENT LEAD FLOW + PROFILE PANELS
       These live in admin-client-lead-flow.css / admin-client-profile.css,
       which load only when their tab opens, so they were not in the original
       stylesheet survey. The state grid is the single biggest light surface in
       the admin — 821x2864px of #fff.

       Selectors here mirror the originals (#admin-lead-flow-tabs .x) with the
       body.dark prefix added, because a couple of the originals are !important
       on two IDs; matching !important alone loses that tie on specificity.
   ========================================================================== */
body.dark #admin-lead-flow-tabs .lead-flow-state-grid {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border-strong) !important;
}

body.dark #admin-lead-flow-tabs .admin-lead-flow-filters-panel {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* SELECTED STATE. .btn-default and .btn-default.active were computing to the
   SAME fill, border and text, so the Yes/No filter pairs gave no indication of
   which one was chosen — a functional loss, not just a cosmetic one. Active
   gets the accent fill plus a brighter edge so the choice is unambiguous. */
body.dark .btn.active,
body.dark .btn-default.active,
body.dark .btn-group .btn.active,
body.dark .admin-lead-flow-filters-panel .btn.active {
	background-color: #1d6a86 !important;
	border-color: #3f9dbd !important;
	color: #ffffff !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
}

/* Unselected stays quiet but keeps a visible edge so the pair reads as a pair. */
body.dark .admin-lead-flow-filters-panel .btn:not(.active) {
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text-dim) !important;
}

/* Lead Flow sub-tabs (Internet Leads / Live Transfer / Branded / Licensed
   States) are #fff and #f7f7f7 with #444 text and #ccc borders. They are tabs,
   so the active one reads as connected to the panel and the rest sit back. */
body.dark .lead-flow-subnav a {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text-dim) !important;
	border: 1px solid var(--dk-border-strong) !important;
	border-bottom-color: var(--dk-border-strong) !important;
}

body.dark .lead-flow-subnav li.active a,
body.dark .lead-flow-subnav a.active {
	background-color: var(--dk-surface) !important;
	color: var(--dk-h1-txt) !important;
	border-color: var(--dk-border-strong) !important;
	border-bottom-color: var(--dk-surface) !important;
	font-weight: bold;
}

body.dark .lead-flow-subnav {
	border-bottom: 1px solid var(--dk-border-strong) !important;
}

/* Licensed States tab: 51 state rows, each `background:#fff; border:1px #ddd`.
   Verified in light mode first — all 51 render the same white regardless of
   checked state, so there is no state colour to preserve and filling them is
   safe. The checkbox itself carries the on/off signal. */
body.dark #admin-lead-flow-tabs .admin-lead-flow-licensed-state {
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

body.dark #admin-lead-flow-tabs .admin-lead-flow-licensed-state:hover {
	background-color: var(--dk-h1) !important;
}

body.dark #admin-lead-flow-tabs .lead-flow-grid-head,
body.dark #admin-lead-flow-tabs .lead-flow-grid-row,
body.dark #admin-lead-flow-tabs .lead-flow-column-head {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .admin-lead-flow-remove-zip,
body.dark .admin-lead-flow-remove-county {
	color: #ff8f84 !important;
}

/* ZIP CODE DIALOG (Priority Zip Codes / These Zip Codes Only).
   The jQuery UI shell goes dark from the .ui-dialog rules, but the panels
   inside keep `background:#f8f8f8` while `.admin-lead-flow-zip-badge a` is
   `color:#fff` — so the zip chips rendered white-on-light and vanished. */
body.dark .admin-lead-flow-zip-list,
body.dark .admin-lead-flow-county-list,
body.dark .admin-lead-flow-county-options {
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

body.dark .admin-lead-flow-county-options label,
body.dark .admin-lead-flow-zip-status,
body.dark .admin-lead-flow-zip-list-actions,
body.dark .admin-lead-flow-county-list-actions {
	color: var(--dk-text) !important;
}

/* The chip keeps a filled face so its white label stays legible — that is how
   it reads in light mode too, just on a darker fill. */
body.dark .admin-lead-flow-zip-badge {
	background-color: #1d6a86 !important;
	border-radius: 3px;
}

body.dark .admin-lead-flow-zip-badge a {
	color: #ffffff !important;
}

/* The remove "x" sits ON the chip, not on the panel, so the panel-level red
   (#ff8f84) only reached 2.75:1 against the teal fill. */
body.dark .admin-lead-flow-zip-badge .admin-lead-flow-remove-zip,
body.dark .admin-lead-flow-zip-badge .admin-lead-flow-remove-county {
	color: #ffdcd7 !important;
}

body.dark .admin-lead-flow-dialog,
body.dark .admin-lead-flow-dialog .zip-list-textarea {
	background-color: var(--dk-field-bg) !important;
	color: var(--dk-field-txt) !important;
	border-color: var(--dk-field-border) !important;
}

body.dark .admin-lead-flow-copy-row a,
body.dark .admin-lead-flow-copy-zips {
	color: var(--dk-link) !important;
}

/* Company address card — original is !important on two IDs. */
body.dark #admin-client-profile-tabs #admin-company-marketing-form .address-card-header,
body.dark #admin-client-profile-tabs #admin-company-marketing-form .address-card-body {
	background: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark tr.row-additional-group-email,
body.dark tr.row-additional-group-email td,
body.dark td.actions,
body.dark a.btn-primary,
body.dark #group_definitions,
body.dark .thank-you.cpc-preview,
body.dark .button-box,
body.dark .price-box {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* Same trap as .btn-default further up: bootstrap is not actually winning on
   <button>, so `button.btn-primary` computes admin.css's #d69520 amber in light
   mode — measured on calls_tab/phone_mitigation's Import button. Painting it
   neutral turned an orange button grey, so the <button>/<input> form gets the
   deepened amber like every other admin button while anchors stay neutral.
   `.active` is excluded so the selected-state rule still wins. */
body.dark button.btn-primary:not(.active),
body.dark input.btn-primary:not(.active) {
	background-color: var(--dk-btn-amber) !important;
	border-color: var(--dk-btn-amber-brd) !important;
	color: var(--dk-btn-amber-txt) !important;
}

/* Section headers use a translucent yellow-green that survives on dark but
   leaves near-black text on it; only the ink needs lifting. */
body.dark #filters_header,
body.dark #prompts_header {
	color: #10160a !important;
}

/* ==========================================================================
   8i. HIGH-INTENSITY SIGNALS ON THE LEAD PAGE
       Two colours picked to shout on a white page. On a dark one they are the
       brightest thing on screen and blow out everything around them. Both keep
       their hue and their job — they just stop being the light source.
   ========================================================================== */

/* The consent-verify banner is #f00 at 28px across the full width. Pure red on
   a dark ground glares badly; this keeps it unmistakably an alarm at a
   luminance that belongs on the page. */
body.dark #phone_consent_required,
body.dark #consent_update_required {
	background-color: #8c1d14 !important;
	color: #ffe0dc !important;
	border: 1px solid #b8382c !important;
}

/* Premium Send & Call — leads.css `#send_live_transfer button.glengarry` is
   #20d695. Still the primary action and still green, just not emitting light.
   Note the white-on-#20d695 original measured 1.89:1; this reads far better. */
body.dark #send_live_transfer button.glengarry,
body.dark #ltCallSendBtn.glengarry {
	background-color: #1fa176 !important;
	color: #f2fffa !important;
	border-color: #2cc492 !important;
}

/* The other literal `background: red` spots are NOT alarms — the biggest is
   the SMS composer's guidance line ("If the customer is clearly not
   interested, stop messaging them"), plus the activity-checker No buttons.
   The banner value above is tuned for a 28px full-width alarm; reused on a
   small hint box it reads as burgundy rather than red. Kept lighter and
   cleaner here so it stays obviously red without the muddiness. */
body.dark [style*="background: red" i],
body.dark [style*="background:red" i],
body.dark [style*="background-color: red" i],
body.dark [style*="background-color:red" i] {
	background-color: #b03a2b !important;
	color: #fff1ee !important;
}

/* ==========================================================================
   8g. CLIENT LEAD FILTERS TAB
       .prompt-info paints #e8e8e8 from a class, so the section-8 inline-style
       selectors could not reach it — it kept a light face under light text.
   ========================================================================== */
body.dark .prompt-info {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .prompt-info .cap-first,
body.dark .prompt-info span {
	color: var(--dk-text) !important;
}

body.dark #tabs-leads-filters h3,
body.dark #client_edit_tabs h3 {
	color: var(--dk-text) !important;
}

/* ==========================================================================
   8f. CLIENT PROFILE TAB — box outlines
       admin-client-profile.css draws its containers with #ccc / lightgray and
       marks the active sub-tab with a white face. The boxes are the structure
       of this screen, so they get the stronger border rather than the hairline.
   ========================================================================== */
body.dark .client-profile-subnav,
body.dark .client-profile-subnav li,
body.dark .client-profile-subnav a,
body.dark .account-email-wrapper,
body.dark #admin-client-profile-tabs,
body.dark #admin-client-profile-tabs > div {
	border-color: var(--dk-border-strong) !important;
}

body.dark .client-profile-subnav a {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-link) !important;
}

body.dark .client-profile-subnav li.active a,
body.dark .client-profile-subnav a.active {
	background-color: var(--dk-h1) !important;
	color: var(--dk-h1-txt) !important;
	border-bottom-color: var(--dk-h1) !important;
}

body.dark .account-email-wrapper,
body.dark #admin-client-profile-tabs > div {
	background-color: var(--dk-surface) !important;
}

/* Panels and fieldsets read as containers, so give them the stronger edge
   while table cells keep the quieter hairline. */
body.dark fieldset,
body.dark .contentbody fieldset,
body.dark #client_edit_tabs,
body.dark .ui-tabs .ui-tabs-panel,
body.dark .pre-call-briefing,
body.dark #client-emails-body {
	border-color: var(--dk-border-strong) !important;
}

/* ==========================================================================
   8l. MONITOR CHART LEGEND + ACTIVITY LOG HEADER
   ========================================================================== */

/* The Monitor legend container is #fff with #333 text. The .legend-box
   swatches inside are Chart.js palette values and are deliberately untouched —
   they have to keep matching their series lines. */
body.dark div.legend,
body.dark .legend .legend-wraper {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

body.dark .legend label,
body.dark .legend .legend-wraper label {
	color: var(--dk-text) !important;
}

/* Activity log date header sat at 3.72 on its band. */
body.dark .log_header_date {
	color: #ffffff !important;
}

/* AI Pre-Call Brief is inline `background:#F0F7FC; border:2px solid #2A7CA3`
   — a light BLUE card with a strong blue edge. It was being flattened to the
   neutral panel surface, losing both. Kept in the blue family with its border
   colour preserved as the identity. */
body.dark .pre-call-briefing {
	background-color: #12303f !important;
	border-color: #2A7CA3 !important;
	color: var(--dk-text) !important;
}

/* admin.css:425 `.popup_block { background:#fff; border:20px solid #ddd }` —
   the generic modal used by Open Client Account and two other flows. The
   #fade backdrop is already #000 at 80%, so only the card needed changing. */
body.dark .popup_block,
body.dark #convert-form {
	background-color: var(--dk-surface) !important;
	border-color: #2c4a5e !important;
	color: var(--dk-text) !important;
}

body.dark .popup_block label,
body.dark #convert-form label {
	color: var(--dk-text) !important;
}

/* ==========================================================================
   8m. USER EDIT PAGE (users_tab/edit/*)
       .ue-settings is a single white panel 1120x2143 — effectively the whole
       page — with a `ue-*` design system on top of it that assumes a white
       ground (color:black on six element types, #f5f8fc empty-states, and an
       inline #f9fafb performance panel).
   ========================================================================== */
body.dark .ue-settings,
body.dark .ue-below-section {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* .ue-below-section is a SECOND white panel — Awards, Outstanding Performances
   and Monthly Standings — that only renders for users who have records, which
   is why it was missed on the accounts swept earlier. Its own comment notes the
   chrome inside it was drawn for a dark surface and then put on white; on dark
   that chrome finally works, so only the panel and its headings need moving. */
body.dark .ue-below-section {
	box-shadow: 0 2px 12px rgba(0, 0, 0, .45) !important;
}

body.dark .ue-hd-icon {
	color: var(--dk-text) !important;
}

body.dark .ue-below-hd,
body.dark .ue-trophy-date,
body.dark .ue-perf-empty,
body.dark .ue-records-period,
body.dark .ue-rec-label,
body.dark .ue-records-note,
body.dark .ue-rec-val,
body.dark .ue-rec-date,
body.dark .ue-settings label {
	color: var(--dk-text) !important;
}

body.dark .ue-flag-help,
body.dark .ue-records-note {
	color: var(--dk-text-dim) !important;
}

/* REPORT CARD SCALE. edit.php:153 emits five levels as an INLINE colour on
   .bcb-rate — excellent / good / fair / poor / bad. They sit on the #0d1829
   chip, where three failed: #2E7D32 at 3.47, #5B8D51 at 3.94 and #E53935 at
   4.21.
   Each is lifted just far enough to clear 4.5 while keeping the five steps in
   order and in their own hue, because the level IS the colour. The bar uses the
   same values as a FILL, and `color:` in the selector keeps this off it. */
body.dark .bcb-rate[style*="color:#2E7D32" i] {
	color: #57c47c !important;
}

body.dark .bcb-rate[style*="color:#5B8D51" i] {
	color: #93cf83 !important;
}

/* One step lighter in the same Material red family: #E53935 measured 4.21. */
body.dark .bcb-rate[style*="color:#E53935" i] {
	color: #ef5350 !important;
}

/* #9CCC65 (9.53) and #FFB300 (9.92) already clear it on that chip and are left
   exactly as the page emits them. */

body.dark #generate_password_result span,
body.dark .ue-settings [style*="color:#b91c1c" i] {
	color: #ff8f84 !important;
}

/* Section headings are #15803d green with a matching green left rule — that
   green is the page's structure, not decoration, and flattening it to plain
   text removed the only thing separating one section from the next. Lifted
   for a dark ground rather than neutralised. The #e5e7eb bottom rule was
   light in BOTH modes and is darkened here. */
body.dark .ue-section-hd {
	color: #4ade80 !important;
	border-bottom-color: var(--dk-border) !important;
	border-left-color: #4ade80 !important;
}

/* .ue-field-display is #374151 from a stylesheet rule (not inline), so the
   inline-colour selectors could not reach it — this is the read-only value
   shown for every field on the page. */
body.dark .ue-field-display {
	color: var(--dk-text) !important;
}

body.dark .ue-trophy.empty-state,
body.dark .ue-records-col,
body.dark .ue-rec-row {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* Inline #f9fafb / #374151 / #e5e7eb on the performance plan panel. */
body.dark #performance-plan-panel {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* The ue-* palette also uses a Tailwind-ish grey set for secondary text. */
body.dark [style*="color:#374151" i],
body.dark [style*="color: #374151" i],
body.dark [style*="color:#6b7280" i],
body.dark [style*="color: #6b7280" i],
body.dark [style*="color:#111827" i],
body.dark [style*="color: #111827" i] {
	color: var(--dk-text) !important;
}

body.dark [style*="background:#f9fafb" i],
body.dark [style*="background: #f9fafb" i],
body.dark [style*="background:#f5f8fc" i],
body.dark [style*="background: #f5f8fc" i],
body.dark [style*="background:#e5e7eb" i],
body.dark [style*="background: #e5e7eb" i],
body.dark [style*="background:#f0f7ff" i],
body.dark [style*="background: #f0f7ff" i] {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
}

/* ==========================================================================
   8n. USERS TAB — add / permissions / teams / goals / scripts /
       performance / rewards / bonus
   ========================================================================== */

/* -- permissions: users.css stripes every 2nd cell #e6e6e6 (column striping,
      not row striping — `td:nth-child(2n)`) -- */
body.dark #group_permissions tbody td:nth-child(2n),
body.dark #group_permissions tbody td {
	color: var(--dk-text) !important;
}

body.dark #group_permissions tbody td:nth-child(2n) {
	background-color: var(--dk-stripe-hi) !important;
}

body.dark #group_permissions tbody td:nth-child(2n+1) {
	background-color: var(--dk-surface) !important;
}

/* -- Bootstrap .table-striped: `tr:nth-child(2n+1) > td` at #f9f9f9. Used on
      csr_working_goals and anywhere else bootstrap tables appear. -- */
body.dark .table-striped > tbody > tr:nth-child(2n+1) > td,
body.dark .table-striped > tbody > tr:nth-child(2n+1) > th {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
}

body.dark .table-striped > tbody > tr:nth-child(2n) > td,
body.dark .table-striped > tbody > tr:nth-child(2n) > th {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

body.dark .table > tbody > tr > td,
body.dark .table > tbody > tr > th,
body.dark .table > thead > tr > th {
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

body.dark .form-footer {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* -- teams / OG teams -- */
body.dark table.team-group-table,
body.dark table.team-group-table td {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark table.team-group-table th {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .team-count {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* tz-badge is #fff1f0 — a warm tint, kept warm rather than neutralised. */
body.dark .tz-badge {
	background-color: #3a2422 !important;
	color: #ffc9c2 !important;
	border-color: #5d2c2a !important;
}

/* team_ui.css `.team_tabs span.active { background:#ffff00 }` — a literal yellow
   highlight marking the active team. The fill IS the signal, so it stays yellow
   and the ink flips dark.

   Scoped to .team_tabs. A bare `span.active` also caught the CSR-cards team
   pills (`<span class="cgp-team-pill active">`), turning their green / dark-green
   / blue / brown per-team fills into one yellow slab and destroying the
   distinction between All, East, West and Aged. */
body.dark .team_tabs span.active {
	background-color: #d8c21a !important;
	color: #14140a !important;
}

/* -- csr working goals: #f9f9f9 cells and near-black headings -- */
body.dark #content-body td[style*="#f9f9f9" i],
body.dark .working-goals td,
body.dark #total_working_days {
	background-color: transparent !important;
	color: var(--dk-text) !important;
}

body.dark #content-body h4 {
	color: var(--dk-text) !important;
}

/* -- dynamic script settings: bold names --------------------------------
   In light, <strong> is #362b36 on white — DARKER than the surrounding text,
   which is what makes it stand out. On dark it was landing on exactly the body
   colour, so the weight was the only cue left. Pushed brighter than body text
   so the same contrast-against-neighbours relationship holds. */
body.dark #content-body strong:not([id]),
body.dark #content-body b:not([id]) {
	color: #ffffff;
}

/* -- performance plan ---------------------------------------------------- */
/* .pp-window-link is a TRANSPARENT text link in light (white label, no fill).
   My generic amber button rule was painting it, which is the orange on Next /
   Previous that light mode does not have. */
body.dark button.pp-window-link,
body.dark .pp-window-link {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--dk-link) !important;
}

body.dark .pp-error,
body.dark #pp-error-box,
body.dark .pp-badge-restricted {
	background-color: #3d1d1c !important;
	color: #f2ada4 !important;
	border-color: #5d2c2a !important;
}

body.dark .pp-badge-bottom {
	background-color: #33280f !important;
	color: #e6c07b !important;
}

body.dark .pp-badge-no-call {
	background-color: #12313d !important;
	color: #9fd9ef !important;
}

/* -- rewards ------------------------------------------------------------- */
body.dark .rewards-title,
body.dark .user-name,
body.dark .expand-icon {
	color: var(--dk-text) !important;
}

body.dark div.column,
body.dark .user-header {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark .points-balance {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

/* -- bonus: tablesorter table -------------------------------------------
   Its header is #9cd4e6 and its zebra #def7ff — the same pair reports.css
   uses, but outside #report_view so the report rules never reached it. The
   alternating rows were showing their LIGHT values on a dark table. */
body.dark tr.tablesorter-headerRow,
body.dark tr.tablesorter-headerRow th,
body.dark .tablesorter thead tr {
	background-color: var(--dk-report-head) !important;
	color: var(--dk-report-headtx) !important;
	border-color: var(--dk-report-border) !important;
}

body.dark .tablesorter-header-inner {
	color: var(--dk-report-headtx) !important;
}

body.dark table.tablesorter tbody tr:nth-child(even),
body.dark table.tablesorter tbody tr:nth-child(even) td {
	background-color: var(--dk-report-zebra) !important;
}

body.dark table.tablesorter tbody tr:nth-child(odd),
body.dark table.tablesorter tbody tr:nth-child(odd) td {
	background-color: var(--dk-surface) !important;
}

body.dark #content-body a.selected {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
}

/* ==========================================================================
   8o. FULL LOG (/full_log) — full_log.css
       A self-contained modern component: white timeline on a white card with
       pastel type chips. Nothing in it inherits from admin.css, so none of the
       earlier rules reached it.

       The chips carry IDENTITY, not decoration — blue = call/activity,
       amber = note/sms, green = baldwin — so each family keeps its hue and
       only the light/dark roles are swapped.
   ========================================================================== */

/* -- the filter bar: hsl(195,64%,39%) is the same cyan family as .contentbody,
      so it becomes a raised surface rather than a spotlight. -- */
body.dark .fl-filters-grid {
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border-strong) !important;
}

body.dark .fl-filters-fieldset,
body.dark .fl-filters-legend {
	border-color: var(--dk-border-strong) !important;
}

body.dark .fl-toolbar label,
body.dark .fl-filters-grid label,
body.dark .fl-filters-legend {
	color: var(--dk-text) !important;
}

body.dark .fl-filters-grid input[type="text"],
body.dark .fl-filters-grid input[type="number"],
body.dark .fl-filters-grid select {
	background: var(--dk-field-bg) !important;
	border-color: var(--dk-field-border) !important;
	color: var(--dk-field-txt) !important;
}

/* -- the timeline card and its pagination rails -- */
body.dark .fl-timeline,
body.dark .fl-pagination {
	background: var(--dk-surface) !important;
	border-color: var(--dk-border) !important;
}

body.dark .fl-row {
	border-bottom-color: var(--dk-border) !important;
}

body.dark .fl-row:hover {
	background-color: var(--dk-surface-2) !important;
}

body.dark .fl-page-btn {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

body.dark .fl-page-info,
body.dark .fl-time,
body.dark .fl-source,
body.dark .fl-preview,
body.dark .fl-note-sales,
body.dark .fl-detail-body,
body.dark .fl-loading,
body.dark .fl-empty,
body.dark .fl-rating-label {
	color: var(--dk-text-dim) !important;
}

body.dark .fl-summary {
	color: var(--dk-text) !important;
}

body.dark .fl-action {
	color: var(--dk-link) !important;
}

body.dark .fl-detail-meta {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text-dim) !important;
}

/* -- TYPE CHIPS. Three families, three hues. Flattening these into one
      neutral would destroy the only at-a-glance signal in the timeline. -- */
body.dark .fl-type-admin_action,
body.dark .fl-type-activity,
body.dark .fl-type-activity_log,
body.dark .fl-type-icon-call,
body.dark .fl-type-icon-activity {
	background: #16304d !important;
	color: #8fbcf5 !important;
	border-color: #2c527f !important;
}

body.dark .fl-type-note,
body.dark .fl-type-call,
body.dark .fl-type-sms,
body.dark .fl-type-icon-note {
	background: #3a2c12 !important;
	color: #f0c46a !important;
	border-color: #5f4a1e !important;
}

body.dark .fl-type-baldwin_event,
body.dark .fl-type-icon-sms,
body.dark .fl-type-icon-baldwin {
	background: #15321f !important;
	color: #7ee2a0 !important;
	border-color: #2a5c39 !important;
}

/* -- the sales / baldwin / unknown speaker split is a three-way identity. -- */
body.dark .fl-baldwin-side-sales {
	color: #ffa07a !important;
}

body.dark .fl-baldwin-side-baldwin {
	color: #7ee2a0 !important;
}

body.dark .fl-baldwin-side-unknown {
	color: var(--dk-text-dim) !important;
}

body.dark .fl-error {
	color: #ff8f84 !important;
}

body.dark .fl-star {
	color: #4d5a61 !important;
}

body.dark .fl-star.filled {
	color: #f5b53f !important;
}

body.dark .fl-skeleton {
	background: linear-gradient(90deg, #18242a 25%, #223038 40%, #18242a 60%) !important;
	background-size: 200% 100% !important;
}

body.dark .fl-feedback-wrap textarea {
	background: var(--dk-field-bg) !important;
	border-color: var(--dk-field-border) !important;
	color: var(--dk-field-txt) !important;
}

body.dark .fl-save-feedback {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: #6fcf97 !important;
}

body.dark .fl-saved-note {
	color: #6fcf97 !important;
}

/* ==========================================================================
   8p. LENDERS TAB — lenders.css
       The list (identity health panel + verified-status pills) and the lender
       detail page (a fixed #ebebeb bio rail beside an #f2f5f7 card).
   ========================================================================== */

/* -- VERIFIED STATUS PILLS. These were the worst readability failure in the
      admin: light mode paints only a pastel fill (hsl 90% lightness) and lets
      the text inherit, so section 3's neutral body colour landed #cfdde3 on
      #ffcccc — 1.02:1. Green / red / amber is the whole point of the column,
      so each keeps its hue with the light and dark roles swapped. -- */
body.dark .vs-text-verified {
	background-color: #15321f !important;
	color: #7ee2a0 !important;
}

body.dark .vs-text-unverified {
	background-color: #3d1a1a !important;
	color: #ff9d94 !important;
}

body.dark .vs-text-reviewed-not-verified {
	background-color: #3a2c12 !important;
	color: #f0c46a !important;
}

/* -- the OL badges. White on #04cd04 is 2.16:1 and white on orange is 1.97:1
      in LIGHT mode too — a pre-existing problem this does not touch there.
      Here the hue is kept (it is the scan cue) and deepened to the same
      register as the rest of the theme so the label is finally legible. -- */
body.dark .ol-same-lender,
body.dark .ol.same-lender {
	background: #1f7a2a !important;
	color: #e8fbea !important;
}

body.dark .ol-foreign-lender,
body.dark .ol.third-lender {
	background: #9c6210 !important;
	color: #fff3dd !important;
}

/* -- identity health panel -- */
body.dark .identity-health {
	border-color: var(--dk-border-strong) !important;
}

body.dark .identity-health-heading h2 {
	color: #6fb6d4 !important;
}

body.dark .identity-health-heading p,
body.dark .identity-health-generated,
body.dark .identity-health-empty {
	color: var(--dk-text-dim) !important;
}

body.dark .identity-health-category {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

body.dark .identity-health-category.selected,
body.dark .identity-health-category:hover {
	background: #1d4f74 !important;
	border-color: #4f91ad !important;
	color: #e2eff3 !important;
}

body.dark .identity-health-unavailable {
	background: #3a2c12 !important;
	border-color: #7a5a1c !important;
	color: #f0c46a !important;
}

body.dark .identity-health-table th,
body.dark .identity-health-table td {
	border-color: var(--dk-border) !important;
}

body.dark .identity-health-table th {
	background: var(--dk-thead-bottom) !important;
	color: var(--dk-thead-txt) !important;
}

body.dark .identity-health-pagination a {
	border-color: var(--dk-border) !important;
	color: var(--dk-link) !important;
}

body.dark .identity-health-pagination a.selected {
	background: #1d4f74 !important;
	color: #e2eff3 !important;
}

/* -- lender detail: the card and the fixed bio rail -- */
body.dark .lender-details {
	background: var(--dk-surface) !important;
	border-color: var(--dk-border-strong) !important;
	color: var(--dk-text) !important;
}

body.dark .lender-bio,
body.dark .lender-bio-wrap {
	background: var(--dk-surface-2) !important;
}

/* lenders.css sets `.lender-details a { color:#42839f !important }` at (0,2,1);
   this is (0,2,2) so it wins. #42839f lands at 4.06:1 on the dark card. */
body.dark .lender-details a {
	color: var(--dk-link) !important;
}

body.dark .lender-details .btn,
body.dark .lender-details .btn-icon {
	color: #6fc7ea !important;
	border-color: #3f7d97 !important;
}

body.dark .lender-details .btn.btn-link {
	color: var(--dk-text) !important;
}

body.dark .lender-details .btn:not([disabled]):hover,
body.dark .lender-details .btn-icon:not([disabled]):hover {
	background-color: #1d4f74 !important;
	border-color: #4f91ad !important;
}

body.dark .lender-details .btn[disabled],
body.dark .lender-details .btn-icon[disabled] {
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: #6b7c85 !important;
}

body.dark .lender-details .btn-icon[disabled] {
	background-color: transparent !important;
	border-color: transparent !important;
}

body.dark .lender-quick-links {
	border-top-color: var(--dk-border) !important;
}

body.dark .quick-link-label,
body.dark .quick-link-page-name,
body.dark .quick-link-none,
body.dark .quick-link-disabled {
	color: var(--dk-text-dim) !important;
}

body.dark .quick-link-env {
	background: #17323f !important;
	border-color: #3f7d97 !important;
	color: #6fc7ea !important;
}

body.dark .quick-link-env:hover {
	background: #1d4f74 !important;
	border-color: #6fc7ea !important;
}

/* -- alias / moderation tables inside the lender card -- */
body.dark .lender-items .table-wrapper {
	background-color: var(--dk-surface) !important;
}

body.dark .lender-items .table-wrapper table,
body.dark .lender-items .table-wrapper tr th,
body.dark .lender-items .table-wrapper tr td {
	border-color: var(--dk-border) !important;
}

body.dark .lender-items .table-wrapper tr th {
	background-color: var(--dk-thead-bottom) !important;
	color: var(--dk-thead-txt) !important;
}

body.dark .lender-items .table-wrapper tr td {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

/* -- verified status block + its history list -- */
body.dark #verified_status_wrapper {
	background: var(--dk-surface) !important;
}

body.dark #verified_status_wrapper .vs_dropdown-label:has(+ #vs_dropdown:disabled) {
	color: var(--dk-text-dim) !important;
}

body.dark #verified_status_wrapper ul li {
	border-color: var(--dk-border) !important;
}

body.dark #verified_status_wrapper ul li .divider {
	border-left-color: var(--dk-border) !important;
}

body.dark #verified_status_wrapper ul li .status {
	color: #f0a34a !important;
}

body.dark #verified_status_dialog label:has(input[type="radio"]) {
	background: var(--dk-surface-2) !important;
	background-image: none !important;
	border-color: var(--dk-border-strong) !important;
	color: var(--dk-text) !important;
}

body.dark .nmls-identity-summary {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
}

body.dark .nmls-identity-row + .nmls-identity-row {
	border-top-color: var(--dk-border) !important;
}

/* -- clients.css styles every `input:read-only` with a #ebebeb fill. Checkboxes
      and radios match `:read-only` in CSS, so that rule was painting a light
      square behind every filter checkbox in the admin. They are excluded here
      so `color-scheme: dark` can render them natively; genuine read-only text
      inputs get a recessed dark field instead. -- */
body.dark input:read-only:not([type="button"]):not([type="submit"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text-dim) !important;
}

body.dark input[type="checkbox"]:read-only,
body.dark input[type="radio"]:read-only {
	background: none !important;
	border: 0 !important;
}

/* ==========================================================================
   8q. ASSISTANT — /assistant_tab/chat/{id} and /assistant_tab/neuron_chats/*
       Both views carry their own <style> block (assistant/chat.php,
       assistant/neuron_chat.php, assistant/neuron_chats.php) with an
       #f5f7fb transcript panel. The bubble colours are IDENTITY — who spoke —
       so the bot/user/comment/activity split is preserved, not flattened.
   ========================================================================== */

body.dark .chat-legend,
body.dark #chat-messages,
body.dark .calog-chat-legend,
body.dark .calog-chat-wrap {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

/* Baldwin (right-hand) bubble: hsl(225,20%,85%) neutral in light. */
body.dark .msg-bot {
	background-color: #232d3a !important;
	color: var(--dk-text) !important;
}

/* The human (left-hand) bubble stays blue — white on #2487a8 is 4.11:1, so it
   is deepened just enough to clear 4.5 without changing which colour it is. */
body.dark .msg-user {
	background-color: #1c6b86 !important;
	color: #ffffff !important;
}

/* Comment bubbles are pale yellow, and the *editable* textarea is a brighter
   yellow than the disabled one. That difference is the affordance, so both
   steps are kept. */
body.dark .msg-comment {
	background-color: #2b2a16 !important;
	color: var(--dk-text) !important;
}

body.dark .msg-comment.exported,
body.dark .msg-comment.exported textarea {
	background-color: #33351f !important;
}

body.dark .msg textarea {
	background-color: #26250f !important;
	color: var(--dk-field-txt) !important;
}

body.dark .msg textarea:not(:disabled) {
	background-color: #3a3818 !important;
}

body.dark .msg-activity {
	background-color: #2e2c20 !important;
	color: var(--dk-text) !important;
}

body.dark .msg-add-comment {
	color: var(--dk-link) !important;
}

body.dark .msg .created-at,
body.dark .msg .exported-at,
body.dark .msg-user .created-at::before,
body.dark .msg-bot .created-at::before,
body.dark .chat-visitor-meta,
body.dark .chat-visitor-anon,
body.dark .chat-none,
body.dark .chat-context-meta,
body.dark .thread-attribution strong {
	color: var(--dk-text-dim) !important;
}

/* chat.php sets `.log_info { color:#000 !important }` at (0,1,0); this is
   (0,2,0) so it wins. */
body.dark .log_info {
	color: var(--dk-text) !important;
}

body.dark .chats-filters,
body.dark .thread-attribution {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
}

body.dark .chats-filters label {
	color: var(--dk-text) !important;
}

/* ==========================================================================
   8r. SITE CONTENT — LANDING PAGE MANAGER
       /site_content_tab/landing_page_edit, both tabs, with the [edit] panels
       expanded. Everything here is authored inline or in the view's own
       <style>, so none of it inherits from admin.css.
   ========================================================================== */

/* -- THE EDIT HIGHLIGHT. landing_page_edit.php:103 sets the open row's
      background from JS: `.css('background-color', '#B3E5FC')`. An author
      !important beats a normal inline declaration, so the attribute selector
      below reaches it — matched on both spellings because jQuery serialises
      the hex to rgb(). #1d4f74 (the menu-selected blue) would leave links at
      4.24:1 on it, so this sits a step darker. -- */
body.dark .url-list tbody[style*="rgb(179, 229, 252)"],
body.dark .url-list tbody[style*="B3E5FC" i] {
	background-color: #173c58 !important;
}

/* -- the expanded edit form is a #39c panel inline on the <form>. Light mode
      has the row LIGHTER than the form; that relationship is kept. -- */
body.dark .landingpage-form {
	background-color: var(--dk-contentbody) !important;
	color: var(--dk-text) !important;
}

body.dark .landingpage-form b,
body.dark .landingpage-form label {
	color: var(--dk-text) !important;
}

body.dark .landingpage-form a.rate {
	color: var(--dk-link) !important;
}

/* -- Links tab -- */
body.dark .landing-page-list {
	background: var(--dk-surface) !important;
	border-color: var(--dk-border) !important;
}

body.dark .landing-page-list .link-box {
	border-color: var(--dk-border) !important;
}

/* dev / staging / prod chips: cyan, amber, green. The environment IS the
   colour, so each keeps its hue with the roles swapped. */
body.dark .landing-page-list .link-box.dev {
	background-color: #123a36 !important;
}

body.dark .landing-page-list .link-box.stag {
	background-color: #3a2c12 !important;
}

body.dark .landing-page-list .link-box.prod {
	background-color: #26330f !important;
}

body.dark .landing-page-list .link-box a,
body.dark .landing-page-list .link-text a,
body.dark a.raw-limk {
	color: var(--dk-link) !important;
}

body.dark .raw-stag {
	background-color: #12332e !important;
}

body.dark .raw-stag:hover {
	background-color: #1a4a2c !important;
}

/* Home-Equity landing-type badge (#e2f4ea / #90c9a6 / #217a42). */
body.dark .lp-type-badge-he {
	background: #15321f !important;
	border-color: #2a5c39 !important;
	color: #7ee2a0 !important;
}

/* ==========================================================================
   8s. TINYMCE (the "tox" skin) — /site_content_tab/organic_pages and any other
       view that mounts the editor.

       The editing IFRAME is deliberately left light. It is a WYSIWYG surface:
       it has to show what the published page actually looks like, and dark.css
       is not loaded inside it anyway (separate document). Only the chrome
       around it — toolbar, menubar, status bar, menus, dialogs — is themed.
   ========================================================================== */

body.dark .tox-tinymce,
body.dark .tox .tox-editor-container {
	border-color: var(--dk-border-strong) !important;
}

body.dark .tox .tox-editor-header,
body.dark .tox .tox-toolbar-overlord,
body.dark .tox .tox-toolbar,
body.dark .tox .tox-toolbar__primary,
body.dark .tox .tox-toolbar__overflow,
body.dark .tox .tox-menubar,
body.dark .tox .tox-statusbar {
	background: var(--dk-surface-2) !important;
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

body.dark .tox .tox-statusbar,
body.dark .tox .tox-statusbar a,
body.dark .tox .tox-statusbar__path-item,
body.dark .tox .tox-statusbar__wordcount {
	color: var(--dk-text-dim) !important;
}

/* Toolbar buttons are flat icon buttons, not filled buttons. Section 3's
   generic admin-button rule was turning all 14 of them into amber slabs;
   `[class*="tox-"]` is excluded there now, and this restores the flat look. */
body.dark .tox .tox-tbtn,
body.dark .tox .tox-mbtn,
body.dark .tox .tox-split-button {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--dk-text) !important;
}

body.dark .tox .tox-tbtn svg,
body.dark .tox .tox-mbtn svg,
body.dark .tox .tox-icon svg,
body.dark .tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
	fill: var(--dk-text) !important;
}

body.dark .tox .tox-tbtn:hover,
body.dark .tox .tox-mbtn:hover,
body.dark .tox .tox-tbtn:focus,
body.dark .tox .tox-mbtn--active {
	background: #223038 !important;
	color: #e6f2f7 !important;
}

body.dark .tox .tox-tbtn--enabled,
body.dark .tox .tox-tbtn--enabled:hover {
	background: #1d4f74 !important;
	color: #e2eff3 !important;
}

body.dark .tox .tox-tbtn--disabled svg,
body.dark .tox .tox-tbtn--disabled {
	color: #6b7c85 !important;
	fill: #6b7c85 !important;
}

body.dark .tox .tox-toolbar__group {
	border-color: var(--dk-border) !important;
}

/* Menus, dropdowns and dialogs render in a portal at the end of <body>, so they
   are reached by class alone rather than through .tox-tinymce. */
body.dark .tox .tox-menu,
body.dark .tox .tox-collection,
body.dark .tox .tox-dialog,
body.dark .tox .tox-dialog__header,
body.dark .tox .tox-dialog__footer,
body.dark .tox .tox-dialog__body-nav {
	background-color: var(--dk-surface) !important;
	border-color: var(--dk-border-strong) !important;
	color: var(--dk-text) !important;
}

body.dark .tox .tox-collection__item,
body.dark .tox .tox-collection__group-heading,
body.dark .tox .tox-dialog__title,
body.dark .tox .tox-label,
body.dark .tox .tox-toolbar-label {
	color: var(--dk-text) !important;
}

body.dark .tox .tox-collection__group-heading {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text-dim) !important;
}

body.dark .tox .tox-collection__item--active,
body.dark .tox .tox-collection__item--enabled {
	background-color: #1d4f74 !important;
	color: #e2eff3 !important;
}

body.dark .tox .tox-textfield,
body.dark .tox .tox-textarea,
body.dark .tox .tox-listbox,
body.dark .tox .tox-selectfield select {
	background-color: var(--dk-field-bg) !important;
	border-color: var(--dk-field-border) !important;
	color: var(--dk-field-txt) !important;
}

body.dark .tox .tox-button--secondary,
body.dark .tox .tox-button--naked {
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

/* ==========================================================================
   8t. SITE CONTENT — ORGANIC PAGES (/site_content_tab/organic_pages)
       organic_pages.php paints `#container` #f2f5f7 and layers a `form-fieldset`
       design system on top that assumes a light panel.
   ========================================================================== */

body.dark #container.site-content-organic-pages {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

body.dark .form-fieldset:has(.expanded),
body.dark .form-fieldset legend,
body.dark .form-fieldset .keywords-container ul {
	border-color: var(--dk-border-strong) !important;
}

body.dark .form-fieldset legend,
body.dark .form-fieldset legend span:after {
	color: #6fc7ea !important;
}

body.dark .form-fieldset label {
	color: #6fc7ea !important;
}

body.dark .form-fieldset input,
body.dark .form-fieldset textarea {
	background-color: var(--dk-field-bg) !important;
	border-color: var(--dk-field-border) !important;
	color: var(--dk-field-txt) !important;
}

body.dark .form-fieldset input[disabled],
body.dark .form-fieldset textarea[disabled] {
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text-dim) !important;
}

body.dark .form-fieldset .keywords-container ul li {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

body.dark .form-fieldset .keywords-subtext {
	color: var(--dk-text-dim) !important;
}

body.dark .form-fieldset .remove-keyword {
	border-color: var(--dk-border) !important;
	color: var(--dk-text-dim) !important;
}

body.dark .form-fieldset .remove-keyword:hover {
	background-color: #1d6a86 !important;
	border-color: #3f9dbd !important;
	color: #ffffff !important;
}

/* clients/sms_campaign_analytics.php is the third and last view that paints its
   own `#container` white, and its div carries no class — so it is matched by
   the one element only that page has. A bare `body.dark #container` was
   rejected: `#container` is the generic content wrapper in ~30 admin views,
   most of which are transparent in light mode, and filling them all would
   swap the page ground from teal to near-black. */
body.dark #container:has(> .analytics-header) {
	background-color: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

/* ==========================================================================
   8u. LENDER PROFILES (/site_content_tab/lender_profiles)
       ~520 lines of self-contained `lp-*` design system in the view's own
       <style>, built on a #f2f5f7 page with white cards. Nothing inherits from
       admin.css.

       This page is a REVIEW tool, and almost every colour on it is a verdict:
       reviewed / awaiting / needs-rewrite, draft / published, logo good /
       low-quality / wrong, footprint ready / blocked. The same four review
       states are painted in two places (the top bar text and the list badges)
       and the view comments say they must read the same in both — so they are
       kept in lockstep here too. Nothing is flattened to a neutral.

       .lp-section-header / #lp-footprint-header are left alone on purpose:
       they are already #1a3d5c navy with white at 11.26:1 and read correctly
       in either theme.
   ========================================================================== */

body.dark #lp-container {
	background: var(--dk-page) !important;
	color: var(--dk-text) !important;
}

/* -- the white cards -- */
body.dark #lp-topbar,
body.dark #lp-rate-row,
body.dark #lp-bio-display,
body.dark #lp-editor-wrap,
body.dark .lp-context-card,
body.dark .lp-collapsible,
body.dark #lp-footprint-panel,
body.dark #lp-profiled-list,
body.dark .lp-logo-box,
body.dark #lp-logo-original-wrap,
body.dark #lp-logo-modal-inner {
	background: var(--dk-surface) !important;
	border-color: var(--dk-border-strong) !important;
	color: var(--dk-text) !important;
}

body.dark #lp-stored-bio-details {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
}

body.dark #lp-search-zone,
body.dark #lp-rate-zone {
	border-color: var(--dk-border) !important;
}

/* -- headings and labels that were navy on white -- */
body.dark #lp-search-zone label,
body.dark #lp-profile-name,
body.dark #lp-public-links .lp-pub-label,
body.dark #lp-public-bio-heading,
body.dark #lp-editor-wrap label,
body.dark #lp-list-toolbar .lp-toolbar-label,
body.dark .lp-footprint-meta strong,
body.dark .lp-footprint-layer h4,
body.dark #lp-bio-display h1,
body.dark #lp-bio-display h2,
body.dark #lp-bio-display h3,
body.dark #lp-bio-display h4 {
	color: #8ec5e3 !important;
}

body.dark #lp-profile-nmls-small,
body.dark #lp-last-rated,
body.dark #lp-public-links .lp-pub-none,
body.dark .lp-context-label,
body.dark .lp-context-detail,
body.dark #lp-public-bio-heading .lp-preview-explainer,
body.dark #lp-public-bio-version,
body.dark .lp-review-bio-head,
body.dark #lp-stored-bio-details summary,
body.dark #lp-stored-bio-display,
body.dark #lp-bio-display.empty,
body.dark .lp-logo-box.empty,
body.dark #lp-logo-original-wrap .lp-logo-original-label,
body.dark .lp-footprint-meta,
body.dark .lp-footprint-layer-note,
body.dark .lp-footprint-state-table th,
body.dark #lp-profiled-list .lp-list-loading,
body.dark #lp-profiled-list td.lp-row-num,
body.dark .lp-ac-nmls,
body.dark #lp-logo-url-wrap {
	color: var(--dk-text-dim) !important;
}

body.dark #lp-bio-display,
body.dark .lp-context-value {
	color: var(--dk-text) !important;
}

body.dark #lp-bio-display a,
body.dark .lp-context-detail a,
body.dark #lp-edit-btn,
body.dark .lp-footprint-layer-note a,
body.dark #lp-profiled-list td a,
body.dark .lp-lender-link {
	color: var(--dk-link) !important;
}

body.dark #lp-edit-btn:hover {
	background: #223038 !important;
}

/* -- REVIEW STATE, top-bar text form. Green / amber / red / grey. -- */
body.dark #lp-reviewed-by {
	color: #7ee2a0 !important;
}

body.dark #lp-reviewed-by.lp-awaiting-review {
	color: #f0c46a !important;
}

body.dark #lp-reviewed-by.lp-needs-rewrite {
	color: #ff9d94 !important;
}

/* -- REVIEW STATE, list-badge form. Same four verdicts, same four hues. -- */
body.dark .lp-review-reviewed {
	background: #15321f !important;
	color: #7ee2a0 !important;
}

body.dark .lp-review-awaiting {
	background: #3a2c12 !important;
	color: #f0c46a !important;
}

body.dark .lp-review-rewrite {
	background: #3d1a1a !important;
	color: #ff9d94 !important;
}

body.dark .lp-review-unrated {
	background: var(--dk-surface-2) !important;
	color: var(--dk-text-dim) !important;
}

/* -- publish status badges -- */
body.dark .lp-status-draft {
	background: #3a2c12 !important;
	color: #f0c46a !important;
}

body.dark .lp-status-published {
	background: #15321f !important;
	color: #7ee2a0 !important;
}

body.dark .lp-status-none {
	background: var(--dk-surface-2) !important;
	color: var(--dk-text-dim) !important;
}

/* -- context cards: good / warn / bad -- */
body.dark .lp-context-value.lp-context-good,
body.dark .lp-footprint-ready,
body.dark .logo-status-ok {
	color: #7ee2a0 !important;
}

body.dark .lp-context-value.lp-context-warn,
body.dark .lp-footprint-layer .lp-footprint-not-live,
body.dark .lp-footprint-empty,
body.dark .lp-footprint-blockers,
body.dark .logo-status-needs-quality {
	color: #f0c46a !important;
}

body.dark .lp-context-value.lp-context-bad,
body.dark .lp-footprint-blocked,
body.dark .logo-status-wrong,
body.dark .lp-rewrite-flag,
body.dark #lp-star-hint,
body.dark #lp-special-rewrite-btn,
body.dark #lp-logo-unmark,
body.dark #lp-unreview-wrap a.lp-unreview-link {
	color: #ff9d94 !important;
}

body.dark .logo-status-unreviewed {
	color: var(--dk-text-dim) !important;
}

body.dark #lp-special-rewrite-btn:hover,
body.dark #lp-logo-unmark:hover,
body.dark #lp-unreview-wrap a.lp-unreview-link:hover {
	color: #ffc4bd !important;
}

/* -- amber notice blocks (#fff8e1 family) -- */
body.dark #lp-star-hint,
body.dark #lp-public-bio-blockers,
body.dark .lp-footprint-scope-warning,
body.dark #lp-logo-draft-badge,
body.dark #lp-review-bio-fallback.lp-review-bio-noprose {
	background: #3a2c12 !important;
	border-color: #7a5a1c !important;
	color: #f0c46a !important;
}

body.dark #lp-review-bio-fallback.lp-review-bio-noprose .lp-review-bio-head {
	color: #e0b055 !important;
}

/* The blue-grey fallback means "prose is below" and the amber one above means
   "there is no prose here". FRU-22290 made them different on purpose, so they
   stay different. */
body.dark #lp-review-bio-fallback {
	background: #17262f !important;
	border-color: #3f5a6b !important;
	color: var(--dk-text) !important;
}

body.dark #lp-review-scope-note {
	background: #17262f !important;
	border-color: #3f5a6b !important;
	color: var(--dk-text) !important;
}

body.dark #lp-review-scope-note strong {
	color: #8ec5e3 !important;
}

/* -- public page env links + state chips -- */
body.dark #lp-public-links a.lp-pub-link,
body.dark .lp-state-chip {
	background: #17323f !important;
	border-color: #3f7d97 !important;
	color: #6fc7ea !important;
}

body.dark #lp-public-links a.lp-pub-link:hover {
	background: #1d4f74 !important;
	border-color: #6fc7ea !important;
}

body.dark #lp-profiled-list a.lp-env-link {
	background: #12332e !important;
}

body.dark #lp-profiled-list a.lp-env-link:hover {
	background: #1a4a2c !important;
}

/* -- stars: the empty/filled split is the whole control -- */
body.dark .lp-star {
	color: #4d5a61 !important;
}

body.dark .lp-star.active,
body.dark .lp-star.hover,
body.dark .lp-rating-stars {
	color: #f5b53f !important;
}

/* -- fields -- */
body.dark #lp-lender-search,
body.dark #lp-rate-comment,
body.dark #lp-editor-wrap input[type=text],
body.dark #lp-editor-wrap select,
body.dark #lp-logo-url-wrap input {
	background: var(--dk-field-bg) !important;
	border-color: var(--dk-field-border) !important;
	color: var(--dk-field-txt) !important;
}

/* -- logo judgment segmented control. Three verdicts; active vs inactive vs
      disabled are three distinct states and all three are kept. -- */
body.dark .lp-seg-btn {
	background: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
	border-left-color: var(--dk-border) !important;
}

body.dark .lp-seg-btn:hover:not([disabled]):not(.active) {
	background: #223038 !important;
}

body.dark #lp-logo-approve-btn.active,
body.dark #lp-logo-approve-btn:not(.active):not([disabled]):hover {
	background: #15321f !important;
	color: #7ee2a0 !important;
	box-shadow: inset 0 0 0 1px #2a5c39 !important;
}

body.dark #lp-logo-quality-btn.active,
body.dark #lp-logo-quality-btn:not(.active):not([disabled]):hover {
	background: #3a2c12 !important;
	color: #f0c46a !important;
	box-shadow: inset 0 0 0 1px #7a5a1c !important;
}

body.dark #lp-logo-wrong-btn.active,
body.dark #lp-logo-wrong-btn:not(.active):not([disabled]):hover {
	background: #3d1a1a !important;
	color: #ff9d94 !important;
	box-shadow: inset 0 0 0 1px #6a2f2f !important;
}

body.dark .lp-seg-btn[disabled]:not(.active),
body.dark #lp-logo-edit .btn[disabled] {
	background: #1b252b !important;
	border-color: var(--dk-border) !important;
	/* The view's own comment asks for "muted but legible, not washed-out on
	   washed-out". #77878f measured 4.19 on this fill, so it sits at 4.66. */
	color: #7f8f97 !important;
}

body.dark .lp-logo-box.clickable:hover {
	border-color: #6fc7ea !important;
	box-shadow: 0 0 0 2px rgba(111, 199, 234, .2) !important;
}

body.dark #lp-logo-original-wrap {
	border-color: var(--dk-border) !important;
}

body.dark #lp-logo-original-wrap .lp-logo-original-preview {
	background: var(--dk-surface-2) !important;
}

body.dark #lp-logo-modal-dims {
	color: var(--dk-text-dim) !important;
}

/* -- filter pills -- */
body.dark .lp-filter-btn {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

body.dark .lp-filter-btn:hover {
	background: #223038 !important;
}

body.dark .lp-filter-btn.active {
	background: #1d4f74 !important;
	border-color: #4f91ad !important;
	color: #e2eff3 !important;
}

/* -- collapsibles, tables and the list -- */
body.dark .lp-collapsible-body td,
body.dark .lp-collapsible-body th,
body.dark .lp-footprint-state-table th,
body.dark .lp-footprint-state-table td,
body.dark #lp-profiled-list td {
	border-bottom-color: var(--dk-border) !important;
}

body.dark .lp-collapsible-body th,
body.dark .lp-footprint-state-table th {
	background: var(--dk-surface-2) !important;
}

body.dark .lp-footprint-layer {
	border-color: var(--dk-border) !important;
}

/* Zebra + hover both paint the ROW: admin.css:1900 forces
   `.tablesorter-default td { background: inherit !important }`, so a td rule
   here would be discarded. The hover has to stay readable over the shaded
   stripe, so it is a step brighter than either. */
body.dark #lp-profiled-list tbody tr:nth-child(even) {
	background: var(--dk-surface-2) !important;
}

body.dark #lp-profiled-list tbody tr:hover {
	background: #1d4f74 !important;
}

/* -- messages -- */
body.dark #lp-msg.success {
	background: #15321f !important;
	color: #7ee2a0 !important;
}

body.dark #lp-msg.error {
	background: #3d1a1a !important;
	color: #ff9d94 !important;
}

/* ==========================================================================
   8v. LEAD PITCHES — "View All Pitches" modal (/site_content_tab/pitches)
       lead_pitches.php paints .modal-inner #fff with #222 text and gives each
       .pitch an inline `border:1px solid #ccc`. Light mode has NO fill on the
       cards — they are white-on-white separated by the border alone — so that
       relationship is kept rather than inventing a raised surface.
   ========================================================================== */
body.dark #view-all-pitches-modal .modal-inner {
	background: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

body.dark #view-all-pitches-modal .pitch {
	border-color: var(--dk-border) !important;
}

body.dark #view-all-pitches-modal .pitch h3 {
	color: #8ec5e3 !important;
}

body.dark #view-all-pitches-modal .pitch p,
body.dark #view-all-pitches-modal .pitch strong,
body.dark #view-all-pitches-modal .pitch b {
	color: var(--dk-text) !important;
}

/* Only the id badge, which the view renders INSIDE the h3. A bare
   `.pitch span` also caught the highlight spans in the stored pitch body and
   outranked the highlight ink rule, leaving text at 3.31 on the amber fill. */
body.dark #view-all-pitches-modal .pitch h3 span {
	color: var(--dk-text-dim) !important;
}

body.dark #view-all-pitches-modal .ny-disclaimer {
	color: #f0c46a !important;
}

/* ==========================================================================
   8w. RESTRICTED CALL DATES (/site_content_tab/restricted_call_dates_settings)
       site_settings.css paints .info-header a #e3f0f9 panel with #da530d text
       and every .restriction_row #fff.
   ========================================================================== */
body.dark .site-content-restricted-call-dates-settings .info-header {
	background-color: #3a2c12 !important;
	color: #ffab6b !important;
}

body.dark .site-content-restricted-call-dates-settings .restriction_row {
	background-color: var(--dk-surface) !important;
}

body.dark .site-content-restricted-call-dates-settings .restriction_row td {
	color: var(--dk-text) !important;
}

body.dark .site-content-restricted-call-dates-settings .existing-calls-restrictions th {
	color: var(--dk-thead-txt) !important;
}

/* ==========================================================================
   8x. MATOMO A/B — the .matomo-ab-experiment card (/analytics_tab/matomo_ab)
       analytics_matomo.css builds the analytics widget DARK already (#matomo-ab
       is white-on-transparent, .matomo-ab-card is rgba(0,0,0,.22)) — but the
       experiment card is a deliberate LIGHT sub-theme inside it: ~50 rules under
       .matomo-ab-experiment giving it a #d8e9f4 face, a white table, #000 cell
       text and its own pill palette.

       It therefore renders IDENTICALLY in light and dark — nothing here is a
       dark-mode regression. It is re-themed anyway because a light card in the
       middle of a dark page is the thing dark mode exists to remove, and light
       mode is untouched either way.

       The winner / loser / control rows and the status pills are verdicts, so
       each keeps its hue with the roles swapped.
   ========================================================================== */
body.dark .matomo-ab-experiment {
	background: var(--dk-surface) !important;
	border-color: var(--dk-border-strong) !important;
}

body.dark .matomo-ab-experiment .matomo-ab-title {
	color: var(--dk-text) !important;
}

body.dark .matomo-ab-experiment .matomo-ab-title a {
	color: var(--dk-text-dim) !important;
}

body.dark .matomo-ab-experiment .matomo-ab-title a:hover,
body.dark .matomo-ab-experiment .matomo-ab-header-clickable:hover .matomo-ab-title {
	color: var(--dk-link) !important;
}

body.dark .matomo-ab-experiment .matomo-ab-toggle-icon,
body.dark .matomo-ab-experiment .matomo-ab-metric-title,
body.dark .matomo-ab-experiment-segment-label,
body.dark .matomo-ab-experiment-date-label,
body.dark .matomo-ab-experiment .matomo-ab-filter-sep {
	color: var(--dk-text-dim) !important;
}

/* -- status pills: running / created / finished / archived -- */
body.dark .matomo-ab-experiment .matomo-ab-pill,
body.dark .matomo-ab-experiment .matomo-ab-badge {
	background: rgba(255, 255, 255, .07) !important;
	border-color: rgba(255, 255, 255, .16) !important;
	color: var(--dk-text) !important;
}

body.dark .matomo-ab-experiment .matomo-ab-pill.status-running {
	background: #15321f !important;
	border-color: #2a5c39 !important;
	color: #7ee2a0 !important;
}

body.dark .matomo-ab-experiment .matomo-ab-pill.status-created {
	background: #3a2c12 !important;
	border-color: #7a5a1c !important;
	color: #f0c46a !important;
}

body.dark .matomo-ab-experiment .matomo-ab-pill.status-finished {
	background: #16304d !important;
	border-color: #2c527f !important;
	color: #8fbcf5 !important;
}

body.dark .matomo-ab-experiment .matomo-ab-pill.status-archived {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text-dim) !important;
}

body.dark .matomo-ab-experiment .matomo-ab-pill-segment {
	background: #17323f !important;
	border-color: #3f7d97 !important;
	color: #6fc7ea !important;
}

body.dark .matomo-ab-experiment .matomo-ab-badge-winner {
	background: #15321f !important;
	border-color: #2a5c39 !important;
	color: #7ee2a0 !important;
}

/* -- the results table -- */
body.dark .matomo-ab-experiment .matomo-ab-table {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
}

body.dark .matomo-ab-experiment .matomo-ab-table th {
	background: var(--dk-thead-bottom) !important;
	color: var(--dk-thead-txt) !important;
	border-bottom-color: var(--dk-border) !important;
}

body.dark .matomo-ab-experiment .matomo-ab-table th:first-child {
	border-left-color: var(--dk-border) !important;
}

body.dark .matomo-ab-experiment .matomo-ab-table td {
	color: var(--dk-text) !important;
	border-bottom-color: var(--dk-border) !important;
}

body.dark .matomo-ab-experiment .matomo-ab-table tbody tr:nth-child(odd) td {
	background: rgba(255, 255, 255, .035) !important;
}

body.dark .matomo-ab-experiment .matomo-ab-table tbody tr.is-control td {
	background: #1d2b33 !important;
}

/* Winner green and loser red are the whole point of the table. */
body.dark .matomo-ab-experiment .matomo-ab-table tbody tr.is-winner td {
	background: #1b4a2a !important;
	color: #a6f0bd !important;
}

body.dark .matomo-ab-experiment .matomo-ab-table tbody tr.is-loser td {
	background: #4d2020 !important;
	color: #ffb3ab !important;
}

body.dark .matomo-ab-experiment .matomo-ab-table td.matomo-ab-col-winner {
	color: #7ee2a0 !important;
}

body.dark .matomo-ab-experiment .matomo-ab-table td.matomo-ab-col-loser {
	color: #ff9d94 !important;
}

/* -- the per-card date / segment controls -- */
body.dark .matomo-ab-experiment-segment-select,
body.dark .matomo-ab-experiment-date-row .matomo-ab-select,
body.dark .matomo-ab-experiment-date-row .matomo-ab-date {
	background: var(--dk-field-bg) !important;
	border-color: var(--dk-field-border) !important;
	color: var(--dk-field-txt) !important;
}

body.dark .matomo-ab-experiment-segment-select option,
body.dark .matomo-ab-experiment-date-row .matomo-ab-select option {
	background: var(--dk-field-bg) !important;
	color: var(--dk-field-txt) !important;
}

body.dark .matomo-ab-experiment-date-row select:disabled,
body.dark .matomo-ab-experiment-date-row input:disabled {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text-dim) !important;
}

/* ==========================================================================
   8y. AUTO DIALER (/calls_tab/auto_dialer) — calls.css
       `#auto_dialer td` is #fff with #333 text and `#auto_dialer th` is a
       #1d789a band, both of which survived into dark as a white table under a
       washed header.
   ========================================================================== */
body.dark #auto_dialer td {
	background: var(--dk-surface) !important;
	color: var(--dk-text) !important;
}

body.dark #auto_dialer th {
	background: var(--dk-thead-bottom) !important;
	color: var(--dk-thead-txt) !important;
}

body.dark #auto_dialer th,
body.dark #auto_dialer td,
body.dark #auto_dialer_log th,
body.dark #auto_dialer_log td {
	border-color: var(--dk-border) !important;
}

/* ==========================================================================
   8z. SMS CAMPAIGNS (/clients_tab/sms_campaigns)
       The view opens with a blanket `#container, #container label, td, h3, h4,
       small, p { color:#333 }`, then layers light panels on top. Several of
       those panels start `display:none` — the campaign builder, the states
       picker, the preview result — so they are covered here too rather than
       waiting to be found by opening them.

       .status-active green and .status-paused orange are the campaign's state,
       so both keep their hue.
   ========================================================================== */
body.dark #container,
body.dark #container label,
body.dark #container td,
body.dark #container h3,
body.dark #container h4,
body.dark #container p {
	color: var(--dk-text) !important;
}

body.dark .blast-settings,
body.dark #campaign-builder {
	background: var(--dk-surface) !important;
	border-color: var(--dk-border-strong) !important;
	color: var(--dk-text) !important;
}

body.dark #states-wrap {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
}

body.dark #container small,
body.dark .char-counter {
	color: var(--dk-text-dim) !important;
}

body.dark .stat-badge {
	background: #17323f !important;
	color: #6fc7ea !important;
}

body.dark .status-active {
	color: #6fcf97 !important;
}

body.dark .status-paused {
	color: #f0a34a !important;
}

body.dark .segment-warning {
	color: #ff9d94 !important;
}

body.dark #preview-result {
	background: #3a2c12 !important;
	border-color: #7a5a1c !important;
	color: #f0c46a !important;
}

/* ==========================================================================
   8aa. CSR CARDS (/csr_tab/cards) — cards.php / card_grid.php / card_compact.php
        This page is ALREADY dark and self-consistent: a trading-card UI on a
        #1a1f2e face with its own accent system — green (#86efac / rgba(91,141,81,*))
        for actions and the sort direction, light blue for AI Analysis, blue and
        purple team badges, amber MVP.

        So the job here is the opposite of every other section: keep the generic
        rules OFF it, not paint it. Four of them were reaching in and replacing
        the page's accents with the admin's:

          amber button rule   -> "Stats & Records" green and "AI Analysis" blue
                                 both became the admin amber
          strong :not(...)    -> `.cgp-count strong` green count went to inherit
          #content-body strong-> same element, forced #fff
          field rule          -> .cgp-search-input lost its translucent face

        Those four now exempt anything carrying the page's own bcc- / bcg- /
        cgp- prefixes, or an id. The only rule left here restores the monthly
        table's tiered cell colours, which a `#content-body td:not([class])`
        rule outranked on ID specificity — the values mirror the view's own so
        nothing is invented.
   ========================================================================== */
body.dark #content-body .bcg-monthly-table tbody td {
	color: rgba(255, 255, 255, .7);
}

body.dark #content-body .bcg-monthly-table tbody td:first-child {
	color: rgba(255, 255, 255, .5);
}

body.dark #content-body .bcg-monthly-table thead th {
	color: rgba(255, 255, 255, .4);
}

/* ==========================================================================
   8ab. HR — HOLIDAYS list rows and the PTO page
        holidays.php: `.hol-col-name` is #222 and `.hol-col-date` #666, which on
        the dark row measured 1.08 and 2.98 — the black-on-black AG hit. The
        four statuses (off / half day / working / TBD) are the point of the
        list, so each keeps its hue and is only lifted enough to clear 4.5.

        pto.php is a full light theme of its own: #pto-page sets #263238 text and
        the panels, table, filter selects and message banners are all built for
        white.
   ========================================================================== */
body.dark .hol-col-name {
	color: var(--dk-text) !important;
}

body.dark .hol-col-date,
body.dark .hol-list .hol-row div[style*="#999" i] {
	color: var(--dk-text-dim) !important;
}

body.dark .hol-col-status.off {
	color: #ff8f84 !important;
}

body.dark .hol-col-status.working {
	color: #6fcf97 !important;
}

body.dark .hol-col-status.tbd {
	color: #6bb8e8 !important;
}

body.dark .hol-legend span,
body.dark .hol-row:hover {
	color: var(--dk-text) !important;
}

body.dark .hol-row:hover {
	background: var(--dk-surface-2) !important;
}

/* -- PTO -- */
body.dark #pto-page {
	color: var(--dk-text) !important;
}

body.dark .pto-counts {
	color: var(--dk-text-dim) !important;
}

body.dark .pto-counts strong,
body.dark .pto-table td {
	color: var(--dk-text) !important;
}

body.dark .pto-field label,
body.dark .pto-empty {
	color: var(--dk-text-dim) !important;
}

body.dark .pto-field input,
body.dark .pto-field select,
body.dark .pto-filter-row select,
body.dark .pto-cancel {
	background: var(--dk-field-bg) !important;
	border-color: var(--dk-field-border) !important;
	color: var(--dk-field-txt) !important;
}

body.dark .pto-table-wrap,
body.dark .pto-table td {
	border-color: var(--dk-border) !important;
}

body.dark .pto-table th {
	background: var(--dk-thead-bottom) !important;
	color: var(--dk-thead-txt) !important;
}

body.dark .pto-table tbody tr:hover {
	background: var(--dk-surface-2) !important;
}

body.dark .pto-message {
	background: #17262f !important;
	border-color: #3f7d97 !important;
	color: #8ec5e3 !important;
}

body.dark .pto-message.error {
	background: #3d1d1c !important;
	border-color: #7a3a34 !important;
	color: #f2ada4 !important;
}

/* Light mode gives .pto-primary a #1565c0 blue (5.75:1 with white) and the icon
   buttons a transparent face — neither is the admin's amber default, so the
   generic button rule now skips `pto-` and both keep their own look. */
body.dark .pto-icon-btn {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--dk-text-dim) !important;
}

body.dark .pto-icon-btn:hover {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-link) !important;
}

body.dark .pto-icon-btn.danger:hover {
	color: #ff8f84 !important;
}

/* ==========================================================================
   8ac. CSR PHONE BAR — <phone-bar>, the widget served from /phone-bar-widget/
        (a build artifact of angular-phone-client; nothing there is edited).

        It renders into the LIGHT DOM — an Angular 16 component whose root is a
        plain `<div id="fru-phone-bar">` — and its stylesheet is loaded as an
        ordinary page <link>, so these rules reach it directly.

        WHAT IS DELIBERATELY LEFT ALONE — everything that carries meaning:
          .fru-call-btn green, .fru-human-btn blue, .fru-screening-btn yellow,
          .fru-vm-btn / .fru-hangup-btn red, .fru-info-btn blue,
          .fru-directory-btn magenta, .phone-bar-incoming-disabled salmon,
          #auto-dial-available green / #auto-dial-unavailable red,
          and all 26 .user-initial-* avatar colours.
        A CSR reads that bar by colour; none of it becomes a neutral.
   ========================================================================== */

/* -- the bar itself and the cards sitting on it -- */
body.dark #fru-phone-bar,
body.dark #phone-bar-elements,
body.dark #fru-phone-bar #phone-bar-elements.phone-bar-incoming-enabled {
	background-color: var(--dk-band, #142a33) !important;
	color: var(--dk-text, #cfdde3) !important;
}

body.dark #fru-phone-bar #phone-bar-elements > div,
body.dark #fru-phone-bar #survey-collapsed-text {
	background-color: var(--dk-surface, #131d22) !important;
	border-color: var(--dk-border, #374a55) !important;
	color: var(--dk-text, #cfdde3) !important;
}

body.dark #fru-phone-bar h2 {
	color: var(--dk-text-dim, #9db3bc) !important;
}

body.dark /* -- generic buttons only. The widget's default is `background-color:gray`
      with black ink; the coloured action buttons override it themselves and
      are excluded so they keep their state colour. -- */
#fru-phone-bar button:not(.fru-call-btn):not(.fru-human-btn):not(.fru-screening-btn):not(.fru-vm-btn):not(.fru-hangup-btn):not(.fru-info-btn):not(.fru-directory-btn) {
	background-color: var(--dk-surface-2, #17232a) !important;
	color: var(--dk-text, #cfdde3) !important;
}

body.dark #fru-phone-bar .fru-btn-dial-pad {
	background-color: var(--dk-surface-2, #17232a) !important;
	color: var(--dk-text, #cfdde3) !important;
}

body.dark #fru-phone-bar #erase-dialed,
body.dark #fru-phone-bar #phone-warning-close,
body.dark #fru-phone-bar #phone-error-close {
	background-color: transparent !important;
}

body.dark /* -- the number field: keep the widget's blue underline,
body.dark lift the ink -- */
#fru-phone-bar #phone-numbers {
	color: var(--dk-field-txt, #dce8ed) !important;
	border-bottom-color: var(--dk-field-border, #64808e) !important;
}

body.dark #fru-phone-bar #phone-numbers option {
	background-color: var(--dk-field-bg, #0e181d) !important;
	color: var(--dk-field-txt, #dce8ed) !important;
}

body.dark /* -- dropdowns: dial pad,
body.dark employee directory,
body.dark survey -- */
#fru-phone-bar #dial-pad-dropdown,
body.dark #fru-phone-bar #employee-directory-dropdown,
body.dark #fru-phone-bar #employee-listings,
body.dark #fru-phone-bar #survey-dropdown {
	background-color: var(--dk-surface, #131d22) !important;
	color: var(--dk-text, #cfdde3) !important;
}

body.dark #fru-phone-bar #survey-dropdown {
	border-top-color: var(--dk-border-strong, #62808f) !important;
}

body.dark #fru-phone-bar #survey-dropdown-chevron {
	color: var(--dk-border-strong, #62808f) !important;
}

body.dark #fru-phone-bar #employee-listings li {
	background-color: var(--dk-surface-2, #17232a) !important;
	color: var(--dk-text, #cfdde3) !important;
}

body.dark #fru-phone-bar .dial-letters,
body.dark #fru-phone-bar .survey-description {
	color: var(--dk-text-dim, #9db3bc) !important;
}

body.dark #fru-phone-bar #auto-dial-availability button {
	background: var(--dk-surface-2, #17232a) !important;
	color: var(--dk-text, #cfdde3) !important;
}

body.dark /* -- warning and error banners. Kept amber and red; only the roles swap so the
      text is readable on a dark fill instead of a pastel one. -- */
/* Both banners sit INSIDE #phone-bar-elements,
body.dark so the generic
   `#phone-bar-elements > div` card rule above outranks a plain
   `#fru-phone-bar #phone-warning` — (2,
body.dark 0,
body.dark 1) beats (2,
body.dark 0,
body.dark 0) and !important on
   both does not break the tie. The nested form is listed so the banner wins
   wherever the widget puts it. */
#fru-phone-bar #phone-warning,
body.dark #fru-phone-bar #phone-bar-elements > div#phone-warning {
	background-color: #3a2c12 !important;
	color: #f0c46a !important;
	border-color: #7a5a1c !important;
}

body.dark #fru-phone-bar #phone-error,
body.dark #fru-phone-bar #phone-bar-elements > div#phone-error {
	background-color: #3d1d1c !important;
	color: #f2ada4 !important;
	border-color: #7a3a34 !important;
}

/* -- STATE COLOURS ARE PINNED, INCLUDING WHEN DISABLED.
      HUMAN? / SCREENING? / VM? sit disabled until a call is live, and the
      widget deliberately keeps them coloured in that state (`opacity:1` beside
      each fill). Section 4's `body.dark button:disabled` carries !important, and
      an author !important beats a normal author declaration however specific it
      is — so phone-bar.css's ID selector still lost and all three went to the
      #5a4210 disabled amber. Measured in light with `disabled` set: human
      #0541e4, screening #dae90e, VM #e90606.

      These mirror phone-bar.css exactly. Restated rather than excluded because a
      CSR reads this bar by colour, and the hangup button in particular has to be
      red the moment a lender is connected. -- */
body.dark #fru-phone-bar .fru-call-btn,
body.dark #fru-phone-bar .fru-call-btn:disabled {
	background-color: #2cde68 !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

body.dark #fru-phone-bar .fru-human-btn,
body.dark #fru-phone-bar .fru-human-btn:disabled {
	background-color: #0541e4 !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

body.dark #fru-phone-bar .fru-screening-btn,
body.dark #fru-phone-bar .fru-screening-btn:disabled {
	background-color: #dae90e !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

body.dark #fru-phone-bar .fru-vm-btn,
body.dark #fru-phone-bar .fru-vm-btn:disabled {
	background-color: #e90606 !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

body.dark #fru-phone-bar .fru-hangup-btn {
	background-color: #f33 !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

body.dark #fru-phone-bar .fru-hangup-btn:disabled {
	background-color: #ffa3a3 !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

body.dark #fru-phone-bar .fru-info-btn,
body.dark #fru-phone-bar .fru-info-btn:disabled {
	background-color: #0068ff !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

body.dark #fru-phone-bar .fru-directory-btn,
body.dark #fru-phone-bar .fru-directory-btn:disabled {
	background-color: #c618ff !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

/* Incoming calls paused paints the whole strip salmon. That is an alarm, and
   the bar rule above would otherwise have covered it. */
body.dark #fru-phone-bar #phone-bar-elements.phone-bar-incoming-disabled {
	background-color: salmon !important;
	color: #2b1412 !important;
}

/* SOFT MUTE. On a call, muted is RED — the widget's own comment says
   "red = attention". Two classes carry it: `.fru-mute-active` from
   projects/phone-bar/src/styles.css and `.mute-btn-software` from the
   component stylesheet, plus a flashing `.mute-indicator-active` dot beside
   the "Soft Muted" label.

   The generic phone-bar button rule above was painting #mute-toggle
   --dk-surface-2, so the muted state came out as a dark grey circle and a CSR
   on a live call had no red. Pinned like every other state colour.

   NOTE: the phone-bar build committed to fru-com has no mute feature at all —
   staging is running a newer widget. These selectors come from the
   angular-phone-client SOURCE, so they are written from the real rules but
   could not be verified against the copy this repo serves. */
body.dark #fru-phone-bar #mute-toggle.fru-mute-active,
body.dark #fru-phone-bar #mute-toggle.mute-btn-software {
	background-color: #e90606 !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

body.dark #fru-phone-bar #mute-toggle.fru-mute-active:not(:disabled):hover,
body.dark #fru-phone-bar #mute-toggle.mute-btn-software:not(:disabled):hover {
	background-color: #c40505 !important;
}

body.dark #fru-phone-bar #mute-toggle.fru-mute-active .fa,
body.dark #fru-phone-bar #mute-toggle.mute-btn-software .fa {
	color: #ffffff !important;
}

body.dark #fru-phone-bar .mute-indicator-active {
	background-color: #e53935 !important;
}

/* Availability ticks keep their green / red. */
body.dark #fru-phone-bar #auto-dial-available i {
	color: #00e19b !important;
}

body.dark #fru-phone-bar #auto-dial-unavailable i {
	color: #ff4b55 !important;
}

/* Native controls inside the bar: scrollbars and the number-select popup. */
body.dark #fru-phone-bar {
	color-scheme: dark;
}

/* ==========================================================================
   8ad. RASTER ASSETS THAT CANNOT BE RECOLOURED BY CSS
        lead_helper.php renders nine status icons from images/icon/. Eight have
        clean alpha; review.png ("Manually Review Lead") is the only one shipped
        with an OPAQUE WHITE SQUARE behind its orange disc — invisible on a white
        page, a white block on a dark one. Verified by flood-filling the
        border-connected white in all nine: 94 matte pixels in review.png, 0 in
        every other.

        review-dark.png rebuilds the ALPHA rather than editing pixels: the disc
        is measured from the artwork (centre 12,12, radius 12), a circular mask
        is drawn at 16x and box-downsampled for a smooth rim, then RGB is
        un-matted against white with that coverage — F = (C - (1-a)*255) / a.
        A first attempt lowered alpha per edge pixel instead and faceted the
        curve into an octagon; this keeps 52 anti-aliased edge pixels, which is
        what makes it read as a circle. The original file is untouched, so light
        mode is byte-identical.

        `content` on an <img> is a Chrome/Safari/modern-Firefox feature. Where it
        is not supported the original icon simply renders, which is the state we
        are already in — it degrades, it does not break.
   ========================================================================== */
body.dark img[src$="/images/icon/review.png"] {
	content: url("/images/icon/review-dark.png");
}

/* The FreeRateUpdate logo carries small achromatic accent shapes under the roof
   that render as bright white slivers on the dark band, and its wordmark is
   #575757 — 2.4:1 on #101c22, barely readable.

   logo-dark.png is the classic reversed treatment applied to the ACHROMATIC
   part only: greys and whites are inverted, so #575757 becomes #a8a8a8 at 7.29
   and the white accents go dark and stop glaring, while the brand greens are
   left exactly alone. Pixels part-way between grey and green are blended by
   saturation so the edges stay clean. Bright pixels went from 69 to 1.
   logo.png itself is untouched. */
body.dark img.feerateupdate-logo {
	content: url("/images/logo-dark.png");
}

/* ==========================================================================
   8ae. ISSUE REVIEW / ISSUE PAYOUTS / MY ISSUES
        users/issue_review.php (ir-*), users/issue_payouts.php (ip-*) and
        bug_reporter/my_issues.php (mi-*) are three views sharing one design
        language: a white card, an #f6f8fa filter bar, an #f4f6f7 table head and
        a common status vocabulary in pastel chips.

        That vocabulary is the point of these pages — a submission's state is
        read from the chip colour — so every state keeps its hue with the light
        and dark roles swapped, and the four severity circles keep their exact
        fills because they are solid swatches, not text.
   ========================================================================== */

/* -- cards, filter bars, tables -- */
body.dark .ir-wrap,
body.dark .ip-wrap,
body.dark .mi-wrap {
	background: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .45) !important;
}

body.dark .ir-filters,
body.dark .ip-filters,
body.dark .mi-filters {
	background: var(--dk-surface-2) !important;
}

body.dark .ir-header h2,
body.dark .ip-header h2,
body.dark .mi-header h2,
body.dark .ir-review-by strong,
body.dark .mi-table th.mi-sortable:hover,
body.dark .mi-table th.mi-sort-active,
body.dark .mi-table th.mi-sort-active .mi-sort-arrow {
	color: #8ec5e3 !important;
}

body.dark .ir-table th,
body.dark .ip-table th,
body.dark .mi-table th {
	background: var(--dk-thead-bottom) !important;
	color: var(--dk-thead-txt) !important;
	border-bottom-color: var(--dk-border) !important;
}

body.dark .ir-table td,
body.dark .ip-table td,
body.dark .mi-table td {
	color: var(--dk-text) !important;
	border-bottom-color: var(--dk-border) !important;
}

body.dark .ir-table tr:hover td,
body.dark .ip-table tr:hover td,
body.dark .mi-table tr:hover td {
	background: var(--dk-surface-2) !important;
}

/* -- muted metadata: dates, user ids, jira freshness, note timestamps -- */
body.dark .ir-filters label,
body.dark .ip-filters label,
body.dark .ir-empty,
body.dark .ip-empty,
body.dark .mi-empty,
body.dark .mi-filter-empty,
body.dark .ir-date,
body.dark .ir-date-time,
body.dark .ir-jira-status,
body.dark .ir-jira-freshness,
body.dark .ir-jira-priority,
body.dark .ir-jira-comment,
body.dark .ir-duplicates-of,
body.dark .ir-review-by,
body.dark .ir-review-when,
body.dark .ir-review-notes-label,
body.dark .ir-sev-amt,
body.dark .ip-userid,
body.dark .mi-page-url,
body.dark .mi-review-notes,
body.dark .mi-approved-date,
body.dark .mi-bonus-cell,
body.dark .mi-tier,
body.dark .mi-note-when,
body.dark .mi-notes-empty,
body.dark .mi-notes-loading,
body.dark .mi-bonus-banner .bonus-alltime,
body.dark .mi-bonus-banner .bonus-alltime b,
body.dark .mi-sort-arrow {
	color: var(--dk-text-dim) !important;
}

body.dark .ir-page-url a,
body.dark .ir-duplicates-of a,
body.dark .ip-detail,
body.dark .mi-jira,
body.dark .mi-notes-toggle,
body.dark .ir-pagination a,
body.dark .ir-pagination span {
	color: var(--dk-link) !important;
}

body.dark .ir-pagination a,
body.dark .ir-pagination span {
	border-color: var(--dk-border) !important;
}

body.dark .ir-pagination .current {
	background: #1d4f74 !important;
	border-color: #4f91ad !important;
	color: #e2eff3 !important;
}

/* -- banners -- */
body.dark .ir-load-error,
body.dark .ip-load-error {
	background: #3d1d1c !important;
	border-color: #7a3a34 !important;
	color: #f2ada4 !important;
}

body.dark .ir-warn-banner {
	background: #3a2c12 !important;
	border-color: #7a5a1c !important;
	color: #f0c46a !important;
}

body.dark .mi-bonus-banner {
	background: #15321f !important;
	border-color: #2a5c39 !important;
}

body.dark .mi-bonus-banner .headline-label,
body.dark .mi-bonus-banner .bonus-text {
	color: #7ee2a0 !important;
}

body.dark .mi-bonus-banner .headline-amount {
	color: #8ec5e3 !important;
}

body.dark .mi-bonus-pending-row td {
	background: var(--dk-surface-2) !important;
	border-top-color: var(--dk-border) !important;
	color: var(--dk-text-dim) !important;
}

body.dark .mi-bonus-pending-row .pending-total {
	color: var(--dk-text) !important;
}

/* -- STATUS CHIPS. One vocabulary across all three views; each state keeps its
      hue. grey = unassigned/other/done, blue = researching/triaging/fru,
      amber = rcc/duplicate/pending, green = ready/approved/resolved,
      red = rejected/failed. -- */
body.dark .ir-rev-unassigned,
body.dark .ir-rev-other,
body.dark .ir-rev-done,
body.dark .mi-status-unassigned,
body.dark .mi-status-other,
body.dark .ip-sev .ip-sev-l,
body.dark .ip-sev span {
	background: var(--dk-surface-2) !important;
	color: var(--dk-text-dim) !important;
	border-color: var(--dk-border) !important;
}

body.dark .ir-rev-researching,
body.dark .ir-rev-fru,
body.dark .mi-status-triaging,
body.dark .mi-status-researching,
body.dark .mi-note-lead {
	background: #16304d !important;
	color: #8fbcf5 !important;
	border-color: #2c527f !important;
}

/* mi-status-fru is TEAL in light (#e8f8f5 / #117864), not the researching blue.
   Grouping it with the blues would have made "with FRU" and "researching"
   indistinguishable. */
body.dark .mi-status-fru {
	background: #10332e !important;
	color: #6fd8c4 !important;
	border-color: #235d54 !important;
}

/* AMBER SPLITS INTO TWO. Light mode uses #b7950b yellow for "pending" and the
   medium severity, and #b9770e orange for RCC, duplicate and high severity.
   A single amber collapsed pending into RCC and medium into high — the exact
   identity loss these chips exist to prevent. */
body.dark .mi-status-pending,
body.dark .ip-sev .ip-sev-m {
	background: #3a3612 !important;
	color: #efd96a !important;
	border-color: #75691c !important;
}

body.dark .ir-rev-rcc,
body.dark .ir-rev-duplicate,
body.dark .mi-status-rcc,
body.dark .mi-status-duplicate,
body.dark .ip-sev .ip-sev-h {
	background: #3d2a10 !important;
	color: #f0a860 !important;
	border-color: #7d571b !important;
}

body.dark .ir-rev-ready,
body.dark .ir-rev-approved,
body.dark .ir-rev-resolved,
body.dark .mi-status-ready,
body.dark .mi-status-done {
	background: #15321f !important;
	color: #7ee2a0 !important;
	border-color: #2a5c39 !important;
}

body.dark .ir-rev-rejected,
body.dark .mi-status-failed,
body.dark .ip-sev .ip-sev-c {
	background: #3d1d1c !important;
	color: #ff9d94 !important;
	border-color: #7a3a34 !important;
}

/* -- ir-table row states: pending / researching / ready-final, plus the blue
      leading bar on a ready row. Translucent so they stack over the zebra. -- */
body.dark .ir-table tr.is-pending td {
	background: rgba(240, 196, 106, .07) !important;
}

body.dark .ir-table tr.is-researching-stage td {
	background: rgba(240, 196, 106, .13) !important;
}

body.dark .ir-table tr.is-ready-final td {
	background: rgba(143, 188, 245, .10) !important;
}

body.dark .ir-table tr.is-ready-final td:first-child {
	background: rgba(143, 188, 245, .18) !important;
	box-shadow: inset 3px 0 0 #4f91ad !important;
}

body.dark .mi-table tr:hover .mi-report-col.mi-has-description,
body.dark .mi-notes-row > td {
	background: var(--dk-surface-2) !important;
}

body.dark .mi-note {
	color: var(--dk-text) !important;
	border-bottom-color: var(--dk-border) !important;
}

/* -- controls -- */
body.dark .mi-search,
body.dark .mi-notes-input {
	background: var(--dk-field-bg) !important;
	border-color: var(--dk-field-border) !important;
	color: var(--dk-field-txt) !important;
}

body.dark .mi-filter {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text) !important;
}

body.dark .mi-filter:hover {
	background: #223038 !important;
}

body.dark .mi-filter.active {
	background: #1d4f74 !important;
	border-color: #4f91ad !important;
	color: #e2eff3 !important;
}

body.dark .ir-unassign-btn {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
	color: var(--dk-text-dim) !important;
}

body.dark .ir-unassign-btn:hover {
	background: #3d1d1c !important;
	border-color: #7a3a34 !important;
	color: #ff9d94 !important;
}

body.dark .ir-hide-float {
	color: var(--dk-text-dim) !important;
}

/* -- money stays green; the totals row keeps its green band -- */
body.dark .ip-amount {
	color: #6fcf97 !important;
}

body.dark .ip-total-row td {
	background: #15321f !important;
	border-top-color: #2a5c39 !important;
	color: #a6f0bd !important;
}

/* -- the tab strip above these pages -- */
body.dark .bonus-tabs a {
	color: var(--dk-text) !important;
}

body.dark .bonus-tabs a.selected {
	background: var(--dk-surface) !important;
	border-color: var(--dk-border-strong) !important;
	color: #8ec5e3 !important;
}

body.dark .bonus-tabs a:hover:not(.selected) {
	background: rgba(255, 255, 255, .09) !important;
}

/* ==========================================================================
   8af. HOPE — the CSR assistant widget (csr-assistant/widget.php)
        Only renders for CSRs, which is why it never showed up in any of the
        page sweeps: AG's own account gets Baldwin instead.

        The widget is token-driven, and its tokens sit on `:root`. Redefining
        them on `body.dark` is enough for almost all of it: custom properties
        inherit, and the closer ancestor wins, so every element inside <body>
        picks up these values instead of the :root ones. The widget file is not
        touched.

        The two brand colours are deliberately kept — #9634ee purple for the
        user's own bubble and the accent, #52a9ff blue for the online status
        dot. Those are Hope's identity and they read fine on dark.
   ========================================================================== */
body.dark {
	--cw-bg-dark: #131d22;   /* panel, header and footer — was #ffffff */
	--cw-bg-2:    #0f171c;   /* the message list, slightly recessed */
	--cw-bg-3:    #17232a;
	--cw-border:  #374a55;
	--cw-ink:     #cfdde3;
	--cw-muted:   #9db3bc;
	/* --cw-accent (#9634ee) and --cw-accent-s (#52a9ff) intentionally unchanged */
}

/* -- the pieces that hardcode a colour rather than using a token -- */
body.dark .cw-launcher,
body.dark .cw-hdr {
	background: var(--dk-surface) !important;
}

body.dark .cw-msg-bot {
	background: #232d3a !important;
	color: var(--dk-text) !important;
}

body.dark .cw-msg-bot strong {
	color: #ffffff !important;
}

/* Hope's links inside her own bubble: the same purple family as the accent,
   lifted off #6d24b7 which is 1.9:1 on the dark bubble. */
body.dark .cw-msg-bot a {
	color: #c79bf0 !important;
}

body.dark .cw-typing {
	background: #232d3a !important;
	border-color: var(--dk-border) !important;
}

body.dark .cw-input-wrap {
	background: var(--dk-field-bg) !important;
	border-color: var(--dk-field-border) !important;
}

body.dark .cw-input-wrap input {
	color: var(--dk-field-txt) !important;
}

body.dark .cw-input-wrap input::placeholder {
	color: var(--dk-text-dim) !important;
}

body.dark .cw-messages::-webkit-scrollbar-thumb {
	background: #3f5158 !important;
}

body.dark .cw-earlier-link,
body.dark .cw-fb-chip {
	border-color: var(--dk-border) !important;
}

body.dark .cw-earlier-link:hover,
body.dark .cw-fb-chip:hover {
	border-color: var(--dk-border-strong) !important;
}

body.dark .cw-send-btn:disabled {
	background: #3a4750 !important;
}

/* ==========================================================================
   8ag. LEAD "ALL DEFAULT VALUES" MARKER + the phone bar's selected mark-call
   ========================================================================== */

/* leads/lead.php:1773 flags a lead whose every field is a default by writing
   INLINE styles from jQuery: `.css('color','#a94442').css('background-color',
   '#f2dede')` on each .is-default cell, plus a bell icon carrying its own
   inline #a94442.

   jQuery serialises those to rgb(), so none of section 8's hex attribute
   selectors could see them — which is why this survived into dark as #a94442
   dark red, unreadable wherever the pale #f2dede fill did get replaced. Both
   spellings are matched here.

   It stays RED. On a lead where every value is a default, that marker is the
   whole point. */
body.dark [style*="rgb(242, 222, 222)"],
body.dark [style*="#f2dede" i] {
	background-color: #3d1d1c !important;
	color: #f2ada4 !important;
}

body.dark [style*="rgb(242, 222, 222)"] .fa,
body.dark [style*="rgb(169, 68, 66)"],
body.dark [style*="#a94442" i] {
	color: #f2ada4 !important;
}

body.dark #allDefaultValues {
	background-color: #3d1d1c !important;
	border-color: #7a3a34 !important;
	color: #f2ada4 !important;
}

body.dark #allDefaultValues .fa.red,
body.dark #allDefaultValues strong {
	color: #ff9d94 !important;
}

/* The phone bar marks the CHOSEN mark-call button with
   `.fru-mark-call-btn-selected { border: 2px solid black }`. A black ring on a
   dark bar is invisible, so on dark there was no way to see which of HUMAN? /
   SCREENING? / VM? was selected — and the ring IS the state.

   These are 30px circles. A 2px WHITE border on something that small stops
   reading as a ring and starts reading as a white button, which hid the fill
   that tells you which one it is — human blue, screening yellow-green, VM red.

   So the ring moves OUTSIDE the circle: the border goes transparent, and a
   box-shadow draws a dark 1px gap and then the light ring beyond the fill. The
   coloured circle keeps its full size and its own colour, with a halo around
   it. */
body.dark #fru-phone-bar .fru-mark-call-btn-selected {
	border-color: transparent !important;
	box-shadow:
		0 0 0 1px rgba(20, 42, 51, 1),
		0 0 0 3px rgba(255, 255, 255, .92) !important;
}

/* ==========================================================================
   8ah. LEAD ACTIVITY LOG — highlight strength
        activity_log_body.php marks each kind of entry with an inline fill on a
        span. Ten different fills, and they fall into two groups that behaved
        very differently on dark.

        The ones AG said read well — the refund red #FF000095, the orange
        #F05E1695, the LT green #25f78060 and the blue #00BFFF60 — are all
        TRANSLUCENT, so they composite over the dark row and land at 2.0-2.8
        against it with text at 4.4-6.1. That is the target.

        The named colours (cyan, lightgreen, lightsalmon) go through section 8's
        generic groups, which are tuned for PANELS and deliberately quiet: they
        landed at 1.13-1.25 against the row, which is why the cyan "No LT
        Available" entry could not be seen as a highlight at all. Inside the log
        they are highlights, not panels, so they are lifted here to match the
        translucent set. Everywhere else in the admin they stay quiet.
   ========================================================================== */
body.dark .log_entry [style*="background-color: cyan" i],
body.dark .log_entry [style*="background-color:cyan" i] {
	background-color: #1d5670 !important;
	color: #d6ecf7 !important;
}

body.dark .log_entry [style*="background-color: lightgreen" i],
body.dark .log_entry [style*="background-color:lightgreen" i],
body.dark .log_entry [style*="background-color: #66FC00" i],
body.dark .log_entry [style*="background-color:#66FC00" i] {
	background-color: #1f5c38 !important;
	color: #d3f2df !important;
}

body.dark .log_entry [style*="background-color: lightsalmon" i],
body.dark .log_entry [style*="background-color:lightsalmon" i] {
	background-color: #7a3830 !important;
	color: #ffdcd6 !important;
}

/* ==========================================================================
   8ai. GMAIL HISTORY PALETTE (clients_tab/notes)
        notes.php builds the email history in JavaScript and writes Google's
        Material palette as INLINE styles — #202124 near-black for subjects and
        sender names, #5f6368 and #9aa0a6 for secondary text, #1a73e8 blue,
        #188038 green, #EA4335 / #d93025 / #c5221f reds, and pale #fce8e6 /
        #e6f4ea / #fde9e7 / #fdf4f3 fills.

        Section 8's generic inline groups cover the plain greys (#222 … #aaa)
        but none of these, so the whole thread list kept light-page colours: the
        subject line "Figure Live Transfer Analysis…" rendered #202124 on a dark
        row, which is why it could not be read at all.

        Awaiting-vs-replied is the state a rep reads first, so red and green
        both keep their hue.
   ========================================================================== */

/* -- text -- */
body.dark [style*="color:#202124" i],
body.dark [style*="color: #202124" i] {
	color: var(--dk-text) !important;
}

body.dark [style*="color:#5f6368" i],
body.dark [style*="color: #5f6368" i],
body.dark [style*="color:#9aa0a6" i],
body.dark [style*="color: #9aa0a6" i] {
	color: var(--dk-text-dim) !important;
}

body.dark [style*="color:#1a73e8" i],
body.dark [style*="color: #1a73e8" i] {
	color: var(--dk-link) !important;
}

body.dark [style*="color:#188038" i],
body.dark [style*="color: #188038" i] {
	color: #7ee2a0 !important;
}

body.dark [style*="color:#EA4335" i],
body.dark [style*="color: #EA4335" i],
body.dark [style*="color:#d93025" i],
body.dark [style*="color: #d93025" i],
body.dark [style*="color:#c5221f" i],
body.dark [style*="color: #c5221f" i] {
	color: #ff9d94 !important;
}

/* -- the awaiting / replied chips -- */
body.dark [style*="background:#fce8e6" i],
body.dark [style*="background: #fce8e6" i] {
	background: #3d1d1c !important;
}

body.dark [style*="background:#e6f4ea" i],
body.dark [style*="background: #e6f4ea" i] {
	background: #15321f !important;
}

/* -- thread row tints. #fde9e7 is the awaiting row, #fdf4f3 the replied one;
      light mode makes the first a darker red tint than the second, and that
      ordering is what tells them apart, so it is preserved. -- */
body.dark [style*="background:#fde9e7" i],
body.dark [style*="background: #fde9e7" i] {
	background: #33191a !important;
}

body.dark [style*="background:#fdf4f3" i],
body.dark [style*="background: #fdf4f3" i] {
	background: #241618 !important;
}

body.dark [style*="border-left:3px solid #f4aea8" i],
body.dark [style*="border-left: 3px solid #f4aea8" i] {
	border-left-color: #7a3a34 !important;
}

/* -- the red header band on the emails panel keeps its Gmail red; only the
      panel below it moves. -- */
body.dark #client-emails-body {
	background: var(--dk-surface) !important;
	border-color: #7a3a34 !important;
}

body.dark #client-emails-toggle {
	border-color: #7a3a34 !important;
}

body.dark #client-emails-loading {
	color: var(--dk-text-dim) !important;
}

/* ==========================================================================
   8aj. CLIENT CHANGE LOG (clients_tab/change_log + change_log_list)
   ========================================================================== */
/* Every value the log reports — a status, a linked rep, a price, a flag — is
   wrapped in `<span class="client-log-value">` by show_client_log_description(),
   and admin.css:616 paints it `#300` bold: near-black maroon, the darkest ink
   on the row, which is how light mode says "this is the value". On a dark table
   that same rule renders it black on near-black, so the ONLY words carrying
   information — "Paused", "Active", "edward", "50.00" — are the ones you cannot
   read, while the sentence around them stays perfectly legible.

   The dark-mode equivalent of "darkest ink on the row" is the lightest, so this
   is a warm parchment against the cool grey-blue of body text. Warm rather than
   plain white so it separates from --dk-text by hue as well as by weight, and
   pale rather than saturated so it is not mistaken for a link (--dk-link
   #5cc0f2) or for chrome (--dk-link-chrome #f6b760). 13.8:1 on --dk-surface.
   font-weight is admin.css's and is left alone. */
body.dark .client-log-value {
	color: #f7e6c3 !important;
}

/* The clear (×) button inside the description search box. It is a bare
   `<button>` with `background:transparent;border:none` sitting ON TOP of the
   input — so the blanket button rule above caught it and filled it amber,
   putting a small solid block over the right-hand end of the field. Its class
   is `btn-clear`, which matches none of that rule's exclusion prefixes, and its
   (0,12,1) beats admin.css's nested (0,4,0). Restored here rather than by
   adding another :not(), so the blanket rule keeps its current shape and this
   stays a delete-to-revert. */
body.dark .description-search-input-wrapper .btn-clear {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--dk-text-dim) !important;
}

/* admin.css hovers the × toward #333 — a DARKEN, which on a dark field means
   the control fades out as you reach for it. Inverted so hover still reads as
   "this is live". Same treatment for the magnifier glyph, a #777 ::before on
   the wrapper that lands at 4:1 against --dk-field-bg. */
body.dark .description-search-input-wrapper .btn-clear:hover {
	color: var(--dk-field-txt) !important;
}

body.dark .description-search-input-wrapper::before {
	color: var(--dk-text-dim) !important;
}

/* ==========================================================================
   8ak. LEAD CALL LOG — the D3 conference timeline
        (leads/lead/call_log_table_rows.php, one dumbbell chart per conference)
   ========================================================================== */
/* SVG does not inherit the page's `color`, so nothing dark.css does to the
   table reaches inside this chart. d3 v4 hardcodes `fill="#000"` on every tick
   label and `stroke="#000"` on the domain path and tick marks, and the view
   adds a black x-axis caption and black `+Ns` offset labels on top of that —
   all of it measured at 1.23:1 against the row behind it. The bars themselves
   are green / orange / red and were perfectly visible, which is why the chart
   still looked like a chart while every word in it had gone.

   These are presentation ATTRIBUTES, which lose to any author rule, so no
   !important is needed for the axis itself. `.d3-svg` and `.d3-tooltip` exist
   nowhere else in the admin, so this cannot reach another chart. */
body.dark .d3-svg text {
	fill: var(--dk-text);
}

body.dark .d3-svg .domain,
body.dark .d3-svg .tick line {
	stroke: var(--dk-border-strong);
}

/* A lender leg's row label is a LINK — clicking it opens that client's notes —
   and the view marks it by setting `fill` INLINE to #00F (see the
   `.y-axis .tick` loop). Pure blue is 1.99:1 here, which is what AG saw: the
   one label on the chart that names who the lead went to was the one you
   could not read. !important because an inline declaration outranks any
   selector; it is the only way to reach a fill set by script. Mapped to the
   link token so it still reads as "this is clickable". */
body.dark .d3-svg .client text {
	fill: var(--dk-link) !important;
}

/* Same story for the per-leg Download control: #0066cc at 3.08:1 for 12px
   bold. Both states are restated because the generic `.d3-svg text` rule above
   is (0,1,2) and would otherwise swallow the view's own :hover. */
body.dark .d3-svg .leg-download-btn {
	fill: var(--dk-link);
}

body.dark .d3-svg .leg-download-btn:hover {
	fill: #9ad8f7;
}

/* The hover card. It paints its own #ffffff with a #000 border and sets no
   text colour, so it took --dk-text off the page and rendered #cfdde3 on
   white — 1.2:1, an entirely blank card. Darkened rather than left light so a
   hover does not flash white across the page. */
body.dark .d3-tooltip {
	background: var(--dk-surface-2) !important;
	border-color: var(--dk-border-strong) !important;
	color: var(--dk-text) !important;
}

/* tooltip_html() / failed_tooltip_html() write the CSS keywords red, green and
   orange inline, chosen against the white card above. On the dark card `green`
   (#008000) drops to 3.3:1, so the three are remapped where they are used.
   Attribute matching is the only hook a script-written inline style leaves,
   and it is exact here: duration_color() returns those three literals and the
   headings are written as style="color:red" with no space. */
body.dark .d3-tooltip [style*="color:red"] {
	color: #ff8a7a !important;
}

body.dark .d3-tooltip [style*="color:green"] {
	color: #5fd97f !important;
}

body.dark .d3-tooltip [style*="color:orange"] {
	color: #ffb64d !important;
}

/* ==========================================================================
   9. HEADER STAT LINE + RIGHT-HAND STAT PANELS
      The header band inherits #333 body text from admin.css, which lands dark
      on dark. The stat panels paint their own rgba(237,234,234,.9) card.
      The [class*="_panel_*_size"] idiom is admin.css's own, so this picks up
      the sales / live transfer / aged panels without naming each one.
   ========================================================================== */
body.dark #header-con,
body.dark #header-con a,
body.dark #quickview-states,
body.dark #quickview-states-sm-top {
	color: var(--dk-text) !important;
}

body.dark #header-con a {
	color: var(--dk-link-chrome) !important;
}

body.dark #stat_panels [class*="_panel_min_size"],
body.dark #stat_panels [class*="_panel_full_size"] {
	background: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border) !important;
}

body.dark #stat_panels [class*="_panel_min_size"] *,
body.dark #stat_panels [class*="_panel_full_size"] * {
	color: var(--dk-text);
	border-color: var(--dk-border);
}

body.dark #stat_panels a {
	color: var(--dk-link) !important;
}

body.dark #stat_panels table td {
	border-color: var(--dk-border) !important;
}

/* ZEBRA. admin.css stripes every second row of all six panels with
   `rgba(220,230,230,.9)` — a near-white band (lines 911 / 1051 / 1275 / 1419 /
   1558 / 2104). On a dev database the panels are empty, so no row ever renders
   and the sweeps never saw it; with live data every other row in every panel
   would have been a light bar. Found by rebuilding the Live Transfer panel from
   panels/live_transfer/stats.php with data in it.

   Translucent rather than a fixed fill so it works over whichever panel face is
   behind it, and quiet enough to stay a stripe rather than a highlight. */
body.dark #stat_panels tr:nth-child(even),
body.dark #csr_stats_panel tr:nth-child(even),
body.dark #live_transfer_stats_panel tr:nth-child(even),
body.dark #arcade_points_stats_panel tr:nth-child(even),
body.dark #aged_stats_panel tr:nth-child(even),
body.dark #followup_stats_panel tr:nth-child(even),
body.dark #phone_gap_stats_panel tr:nth-child(even),
body.dark #sales_stats_panel tr:nth-child(even) {
	background-color: rgba(255, 255, 255, .055) !important;
}

/* ==========================================================================
   10. THE TOGGLE ITSELF — always loaded, so these are unscoped on purpose.
   ========================================================================== */
/* The real checkbox stays in the DOM (visually hidden) so label clicks, keyboard
   focus and the change event all work natively. admin.css:30 scales every
   checkbox 1.3x, which is neutralised here. */
/* Sized and aligned to the 2FA / Logout tabs beside it. Those are inline-block
   anchors with `padding:10px 4px` and `margin-bottom:-1px`, giving a 35px band.
   Matching only the label BOX was not enough — the pill inside it was still
   26px and read as a short lozenge floating in a row of full-height tabs — so
   the track itself is 34px, one pixel under the tabs, and the knob scales with
   it. Everything here is derived from that 35px band rather than guessed. */
#admin-dark-toggle {
	display: inline-flex;
	align-items: center;
	height: 35px;
	margin: 0 10px -1px 0;
	cursor: pointer;
	user-select: none;
	line-height: 1;
	vertical-align: bottom;
}

#admin-dark-toggle input[type=checkbox] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	transform: none;
	-ms-transform: none;
	-moz-transform: none;
	-webkit-transform: none;
	-o-transform: none;
}

.adt-track {
	position: relative;
	display: inline-block;
	width: 62px;
	height: 34px;
	border-radius: 999px;
	background: linear-gradient(#e4e9eb, #f6f8f9);
	box-shadow: inset 0 1px 3px rgba(11, 26, 33, .28), 0 1px 0 rgba(255, 255, 255, .55);
	flex: none;
}

.adt-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(11, 26, 33, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease, background-color .2s ease;
}

.adt-knob .fa {
	font-size: 16px;
	line-height: 1;
}

.adt-sun {
	color: #f5b301;
}

.adt-moon {
	color: #ffffff;
	display: none;
}

/* Checked = dark mode: the knob slides right and flips to a dark face + moon. */
#admin-dark-toggle input[type=checkbox]:checked ~ .adt-track .adt-knob {
	transform: translateX(28px);
	background: #1b2429;
}

#admin-dark-toggle input[type=checkbox]:checked ~ .adt-track .adt-sun {
	display: none;
}

#admin-dark-toggle input[type=checkbox]:checked ~ .adt-track .adt-moon {
	display: inline-block;
}

/* Keyboard focus needs a visible state — the input itself is hidden. */
#admin-dark-toggle input[type=checkbox]:focus-visible ~ .adt-track {
	outline: 2px solid #f6b760;
	outline-offset: 2px;
}

body.dark .adt-track {
	background: linear-gradient(#1a262c, #24333a);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .06);
}

/* Shown only when the preference could not be saved. */
#admin-dark-toggle-error {
	font-size: 11px;
	font-weight: bold;
}

/* MOBILE. The desktop sizing deliberately matches the 35px header tabs, which
   is right when the toggle sits at the end of a single row. Below 1024px —
   admin.css's own breakpoint — those tabs wrap into a dense grid and the switch
   ends up embedded among them, where 62px made it the WIDEST thing in the row
   and its dark pill read as a slab between teal tabs.

   It stays a switch rather than being disguised as a tab, but sized to sit
   inside the row instead of dominating it: narrower than the smallest tab
   (42.7px at 412px wide) and vertically centred in the same band. */
@media only screen and (max-width: 1024px) {
	/* Sit AFTER Logout instead of in the middle of the wrapped tab grid.
	   admin.css already makes #user-settings `display:flex` at this width, so
	   order is enough — the DOM position, and therefore the desktop layout AG
	   signed off on, is untouched. */
	#admin-dark-toggle {
		order: 99;
		height: 36px;
		margin: 0 0 -1px 6px;
	}

	.adt-track {
		width: 40px;
		height: 21px;
	}

	.adt-knob {
		top: 2px;
		left: 2px;
		width: 17px;
		height: 17px;
	}

	.adt-knob .fa {
		font-size: 10px;
	}

	#admin-dark-toggle input[type=checkbox]:checked ~ .adt-track .adt-knob {
		transform: translateX(19px);
	}

	/* The mobile-only stat button and the panel it opens. admin.css gives both
	   `hsl(105,47%,70%)` with a mint-to-green gradient on top — the green AG
	   spotted. Only these two exist below 1024px, which is why no desktop sweep
	   ever saw them. */
	body.dark #sm-stat-btn-wrapper {
		background-color: var(--dk-surface-2) !important;
		background-image: none !important;
	}

	body.dark #sm-stat-btn-wrapper #sm-stat-btn {
		background-color: var(--dk-field-bg) !important;
		color: var(--dk-text) !important;
		border-color: var(--dk-border) !important;
	}

	body.dark #stat_panels.sm-active {
		background-color: var(--dk-surface-2) !important;
		background-image: none !important;
		box-shadow: rgba(0, 0, 0, .45) 0 13px 27px -5px,
					rgba(0, 0, 0, .5) 0 8px 16px -8px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.adt-knob {
		transition: none;
	}
}