/* ck-theme.css — CloseKey O6 colour tokens + dark-mode foundation (2026-10-22)
   Loaded in index.html right AFTER theme.css.
   LIGHT MODE: this file only defines variables. Nothing in light mode looks different.
   DARK MODE: every visual rule below is scoped to html[data-ck-theme="dark"], which theme-toggle.js sets
   (localStorage 'ck-theme' = 'light' | 'dark'). theme.css keeps data-theme="light" in both modes, so its
   light-only overrides stay predictable; the rules here sit on top of them.
   Token names are shared with other pages (Contacts restyle) — keep them stable. */

:root {
  --ck-bg: #f5f4fa;
  --ck-card: #ffffff;
  --ck-card-2: #f8f8fc;
  --ck-line: #ececf3;
  --ck-ink: #15151f;
  --ck-muted: #6c6c80;
  --ck-menu-bg: #ffffff;
  --ck-bar-bg: #000000;
  --ck-input-bg: #ffffff;
  --ck-input-line: #e3e6ef;
  --ck-pink: #e8488a;
  --ck-blue: #1d8bff;
  --ck-grad: linear-gradient(90deg, #e8488a, #1d8bff);
  --ck-tab-bg: linear-gradient(90deg, #e6f6ff, #f2f8ff);
  --ck-tab-line: #38bdf8;
  --ck-tab-ink: #0b2f6b;
  --ck-shadow: 0 6px 24px rgba(40, 20, 90, .08);
}

html[data-ck-theme="dark"] {
  --ck-bg: #0b0c11;
  --ck-card: #14161e;
  --ck-card-2: #1a1c24;
  --ck-line: #23252f;
  --ck-ink: #e8e9f0;
  --ck-muted: #8d90a6;
  --ck-menu-bg: #101117;
  --ck-bar-bg: #000000;
  --ck-input-bg: #16181f;
  --ck-input-line: #2a2d38;
  --ck-pink: #e8488a;
  --ck-blue: #1d8bff;
  --ck-grad: linear-gradient(90deg, #e8488a, #1d8bff);
  --ck-tab-bg: linear-gradient(90deg, #00b4ff26, #ff2fa014);
  --ck-tab-line: #38e1ff;
  --ck-tab-ink: #ffffff;
  --ck-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  color-scheme: dark; /* dark native scrollbars, date pickers, select menus */
}

/* ===================== DARK MODE ONLY below this line ===================== */

/* ---- 1. Page surfaces (beat index.html's #F8FAFC !important on html/body/#root) ---- */
html[data-ck-theme="dark"],
html[data-ck-theme="dark"] body {
  background: var(--ck-bg) !important;
  background-color: var(--ck-bg) !important;
  color: var(--ck-ink) !important;
}
html[data-ck-theme="dark"] #root { background: var(--ck-bg) !important; color: var(--ck-ink) !important; } /* theme.css paints #root text black at (1,2,0) */
html[data-ck-theme="dark"] #boot-splash { background: var(--ck-bg) !important; }
html[data-ck-theme="dark"] #boot-splash .label { color: var(--ck-muted) !important; }

/* ---- 2. Undo theme.css's forced black text (light rules stay active because data-theme stays "light").
        Same specificity as theme.css (0,2,1) and loaded after it, so component rules that already beat
        theme.css in light still win here too. ---- */
:root[data-ck-theme="dark"] :is(p, span, div, li, label, a) { color: inherit; }
:root[data-ck-theme="dark"] :is(h1, h2, h3, h4, h5, h6) { color: var(--ck-ink) !important; }
:root[data-ck-theme="dark"] :is(table, th, td) { color: var(--ck-ink) !important; }
/* theme.css paints anything with "sidebar" in its class white (light rule) */
html[data-ck-theme="dark"]:not(#ck-nx) [class*="sidebar"]:not(.tb-brien-panel) {
  background-color: var(--ck-card) !important;
  border-right-color: var(--ck-line) !important;
}

/* ---- 3. Form fields (theme.css forces white with !important at (0,3,1); the top-bar search keeps its own look) ---- */
html[data-ck-theme="dark"]:not(#ck-nx) :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"], input[type="password"], input[type="url"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]):not([id="ck-global-search"]),
html[data-ck-theme="dark"]:not(#ck-nx) textarea,
html[data-ck-theme="dark"]:not(#ck-nx) select {
  background-color: var(--ck-input-bg) !important;
  color: var(--ck-ink) !important;
  border-color: var(--ck-input-line) !important;
}
html[data-ck-theme="dark"]:not(#ck-nx) :is(input, textarea, select):not([id="ck-global-search"]):focus { border-color: var(--ck-pink) !important; }
html[data-ck-theme="dark"] ::placeholder { color: #6b6f85 !important; }
html[data-ck-theme="dark"] option { background-color: var(--ck-card); color: var(--ck-ink); }

/* ---- 4. Tailwind light surfaces ---- */
html[data-ck-theme="dark"] .bg-white,
html[data-ck-theme="dark"] .bg-dark-card { background-color: var(--ck-card); }
html[data-ck-theme="dark"] .bg-gray-50,
html[data-ck-theme="dark"] .bg-slate-50,
html[data-ck-theme="dark"] .bg-dark-bg { background-color: var(--ck-bg); }
html[data-ck-theme="dark"] .bg-gray-100,
html[data-ck-theme="dark"] .bg-slate-100,
html[data-ck-theme="dark"] .bg-gray-200 { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] .hover\:bg-gray-50:hover,
html[data-ck-theme="dark"] .hover\:bg-gray-100:hover,
html[data-ck-theme="dark"] .hover\:bg-white:hover { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] .border-gray-100,
html[data-ck-theme="dark"] .border-gray-200,
html[data-ck-theme="dark"] .border-gray-300,
html[data-ck-theme="dark"] .border-slate-200,
html[data-ck-theme="dark"] .border-dark-border { border-color: var(--ck-line); }
html[data-ck-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html[data-ck-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ck-line); }
:root[data-ck-theme="dark"] .text-gray-900,
:root[data-ck-theme="dark"] .text-gray-800,
:root[data-ck-theme="dark"] .text-gray-700,
:root[data-ck-theme="dark"] .text-slate-900,
:root[data-ck-theme="dark"] .text-slate-800,
:root[data-ck-theme="dark"] .text-black { color: var(--ck-ink); }
:root[data-ck-theme="dark"] .text-gray-600,
:root[data-ck-theme="dark"] .text-gray-500,
:root[data-ck-theme="dark"] .text-gray-400,
:root[data-ck-theme="dark"] .text-slate-500 { color: var(--ck-muted); }

/* ---- 5. Dropdowns, editors, maps, install banner ---- */
html[data-ck-theme="dark"] .ql-toolbar.ql-snow,
html[data-ck-theme="dark"] .ql-container.ql-snow { border-color: var(--ck-line); }
html[data-ck-theme="dark"] .ql-toolbar.ql-snow { background: var(--ck-card-2); }
html[data-ck-theme="dark"] .ql-snow .ql-stroke { stroke: var(--ck-ink); }
html[data-ck-theme="dark"] .ql-snow .ql-fill { fill: var(--ck-ink); }
html[data-ck-theme="dark"] .ql-snow .ql-picker,
html[data-ck-theme="dark"] .ql-editor.ql-blank::before { color: var(--ck-muted); }
html[data-ck-theme="dark"] .ql-snow .ql-picker-options { background: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] .leaflet-popup-content-wrapper,
html[data-ck-theme="dark"] .leaflet-popup-tip { background: var(--ck-card); color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-install-banner { background: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-install-banner .ck-ib-title { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-install-banner .ck-ib-sub { color: var(--ck-muted); }

/* ---- 6. Scrollbars (default ones go dark via color-scheme; these cover the custom webkit ones) ---- */
html[data-ck-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
html[data-ck-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2d38; border-color: transparent; }
html[data-ck-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a3d4a; }
html[data-ck-theme="dark"] ::-webkit-scrollbar-corner { background: transparent; }

/* ---- 6b. Older shared palettes re-pointed in dark: theme.css (--bg-card ...) and the contacts.js page
        palette (--surface, --text ... defined on :root by contacts.js) ---- */
html[data-ck-theme="dark"] {
  --bg-main: var(--ck-bg); --bg-card: var(--ck-card); --bg-card-soft: var(--ck-card-2);
  --text-primary: var(--ck-ink); --text-muted: var(--ck-muted); --text-soft: #6b6f85;
  --border-color: var(--ck-line); --border-strong: #2e3140;
  --action-blue-soft: #12233f; --positive-soft: #0f2a1c; --danger-soft: #3a1318; --amber-soft: #3a2a10;
  --bg: var(--ck-bg); --surface: var(--ck-card); --surface-2: var(--ck-card-2); --surface-3: var(--ck-card-2);
  --border: var(--ck-line); --border-soft: var(--ck-line);
  --text: var(--ck-ink); --text-faint: #6b6f85;
  --bg2: var(--ck-card); --bg3: var(--ck-card-2); --border2: var(--ck-line); --text2: var(--ck-muted); --text3: #6b6f85;
}

/* ---- 6c. Contacts list (#ck-contacts) + contact profile (.crm-font.dt-page): the bits ck-contacts-o6.css leaves
        hard-coded (contacts.js and ck-contacts-o6.css are not edited) ---- */
html[data-ck-theme="dark"] .ck-msg-in,
html[data-ck-theme="dark"] .ck-msg-in * { color: var(--ck-ink) !important; }
html[data-ck-theme="dark"]:not(#ck-nx) #ck-contacts .ckc-type.t-other { background-color: var(--ck-card-2) !important; color: var(--ck-ink) !important; }
html[data-ck-theme="dark"] #ck-contacts .ckc-owner .a.none { background: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-contacts .ckc-btn:not(.primary):hover { background: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-contacts .ckc-stage,
html[data-ck-theme="dark"] #ck-contacts .ckc-h1 { color: var(--ck-ink); }
html[data-ck-theme="dark"] .crm-font.dt-page .section-title,
html[data-ck-theme="dark"] .crm-font.dt-page .dt-action-tab:hover,
html[data-ck-theme="dark"] .crm-font.dt-page .dt-pill:hover { color: var(--ck-ink); }
html[data-ck-theme="dark"] .crm-font.dt-page .ck-addinfo-scroll { scrollbar-color: #2a2d38 transparent; }

/* ---- 7. React inline colours (React writes them as "rgb(r, g, b)"). Light card/panel/border/ink
        values used across Opportunities, Pond, Conversations, Tasks, Calendar, Settings and Contacts
        are mapped to the tokens. Round elements (toggle knobs, avatars) keep their white. ---- */
html[data-ck-theme="dark"] [style^="color: rgb(0, 0, 0)"],
html[data-ck-theme="dark"] [style*=" color: rgb(0, 0, 0)"],
html[data-ck-theme="dark"] [style^="color: rgb(15, 23, 42)"],
html[data-ck-theme="dark"] [style*=" color: rgb(15, 23, 42)"],
html[data-ck-theme="dark"] [style^="color: rgb(17, 24, 39)"],
html[data-ck-theme="dark"] [style*=" color: rgb(17, 24, 39)"],
html[data-ck-theme="dark"] [style^="color: rgb(21, 21, 28)"],
html[data-ck-theme="dark"] [style*=" color: rgb(21, 21, 28)"],
html[data-ck-theme="dark"] [style^="color: rgb(21, 21, 31)"],
html[data-ck-theme="dark"] [style*=" color: rgb(21, 21, 31)"],
html[data-ck-theme="dark"] [style^="color: rgb(30, 41, 59)"],
html[data-ck-theme="dark"] [style*=" color: rgb(30, 41, 59)"],
html[data-ck-theme="dark"] [style^="color: rgb(31, 41, 55)"],
html[data-ck-theme="dark"] [style*=" color: rgb(31, 41, 55)"],
html[data-ck-theme="dark"] [style^="color: rgb(51, 65, 85)"],
html[data-ck-theme="dark"] [style*=" color: rgb(51, 65, 85)"],
html[data-ck-theme="dark"] [style^="color: rgb(55, 65, 81)"],
html[data-ck-theme="dark"] [style*=" color: rgb(55, 65, 81)"],
html[data-ck-theme="dark"] [style^="color: rgb(32, 33, 36)"],
html[data-ck-theme="dark"] [style*=" color: rgb(32, 33, 36)"],
html[data-ck-theme="dark"] [style^="color: rgb(58, 58, 70)"],
html[data-ck-theme="dark"] [style*=" color: rgb(58, 58, 70)"],
html[data-ck-theme="dark"] [style^="color: rgb(52, 55, 74)"],
html[data-ck-theme="dark"] [style*=" color: rgb(52, 55, 74)"] {
  color: var(--ck-ink) !important;
}
html[data-ck-theme="dark"] [style^="color: rgb(71, 85, 105)"],
html[data-ck-theme="dark"] [style*=" color: rgb(71, 85, 105)"],
html[data-ck-theme="dark"] [style^="color: rgb(71, 71, 83)"],
html[data-ck-theme="dark"] [style*=" color: rgb(71, 71, 83)"],
html[data-ck-theme="dark"] [style^="color: rgb(75, 85, 99)"],
html[data-ck-theme="dark"] [style*=" color: rgb(75, 85, 99)"],
html[data-ck-theme="dark"] [style^="color: rgb(100, 116, 139)"],
html[data-ck-theme="dark"] [style*=" color: rgb(100, 116, 139)"],
html[data-ck-theme="dark"] [style^="color: rgb(107, 114, 128)"],
html[data-ck-theme="dark"] [style*=" color: rgb(107, 114, 128)"],
html[data-ck-theme="dark"] [style^="color: rgb(111, 111, 124)"],
html[data-ck-theme="dark"] [style*=" color: rgb(111, 111, 124)"],
html[data-ck-theme="dark"] [style^="color: rgb(90, 95, 120)"],
html[data-ck-theme="dark"] [style*=" color: rgb(90, 95, 120)"] {
  color: var(--ck-muted) !important;
}
html[data-ck-theme="dark"] [style*="background: rgb(255, 255, 255)"]:not([style*="border-radius: 50%"]),
html[data-ck-theme="dark"] [style*="background-color: rgb(255, 255, 255)"]:not([style*="border-radius: 50%"]),
html[data-ck-theme="dark"] [style*="background: white"]:not([style*="border-radius: 50%"]),
html[data-ck-theme="dark"] [style*="background-color: white"]:not([style*="border-radius: 50%"]),
html[data-ck-theme="dark"] [style*="background:#fff;" i]:not([style*="border-radius: 50%"]),
html[data-ck-theme="dark"] [style*="background: #fff;" i]:not([style*="border-radius: 50%"]),
html[data-ck-theme="dark"] [style*="background:#ffffff" i]:not([style*="border-radius: 50%"]),
html[data-ck-theme="dark"] [style*="background: #ffffff" i]:not([style*="border-radius: 50%"]),
html[data-ck-theme="dark"] [style*="background-color:#fff;" i]:not([style*="border-radius: 50%"]),
html[data-ck-theme="dark"] [style*="background-color: #fff;" i]:not([style*="border-radius: 50%"]),
html[data-ck-theme="dark"] [style*="background-color:#ffffff" i]:not([style*="border-radius: 50%"]),
html[data-ck-theme="dark"] [style*="background-color: #ffffff" i]:not([style*="border-radius: 50%"]) {
  background-color: var(--ck-card) !important;
}
html[data-ck-theme="dark"] [style*="background: rgb(248, 250, 252)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(248, 250, 252)"],
html[data-ck-theme="dark"] [style*="background: rgb(241, 245, 249)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(241, 245, 249)"],
html[data-ck-theme="dark"] [style*="background: rgb(244, 244, 248)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(244, 244, 248)"],
html[data-ck-theme="dark"] [style*="background: rgb(250, 250, 252)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(250, 250, 252)"],
html[data-ck-theme="dark"] [style*="background: rgb(241, 241, 245)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(241, 241, 245)"],
html[data-ck-theme="dark"] [style*="background: rgb(245, 246, 248)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(245, 246, 248)"],
html[data-ck-theme="dark"] [style*="background: rgb(247, 248, 251)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(247, 248, 251)"],
html[data-ck-theme="dark"] [style*="background: rgb(248, 248, 251)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(248, 248, 251)"],
html[data-ck-theme="dark"] [style*="background: rgb(249, 250, 251)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(249, 250, 251)"],
html[data-ck-theme="dark"] [style*="background: rgb(243, 244, 246)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(243, 244, 246)"],
html[data-ck-theme="dark"] [style*="background: rgb(246, 247, 251)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(246, 247, 251)"],
html[data-ck-theme="dark"] [style*="background: rgb(238, 242, 247)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(238, 242, 247)"],
html[data-ck-theme="dark"] [style*="background: rgb(238, 242, 246)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(238, 242, 246)"],
html[data-ck-theme="dark"] [style*="background: rgb(250, 249, 255)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(250, 249, 255)"],
html[data-ck-theme="dark"] [style*="background: rgb(245, 246, 250)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(245, 246, 250)"],
html[data-ck-theme="dark"] [style*="background: rgb(244, 246, 251)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(244, 246, 251)"],
html[data-ck-theme="dark"] [style*="background: rgb(247, 248, 250)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(247, 248, 250)"] {
  background-color: var(--ck-card-2) !important;
}
html[data-ck-theme="dark"] [style*="background: rgb(236, 236, 242)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(236, 236, 242)"],
html[data-ck-theme="dark"] [style*="background: rgb(226, 232, 240)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(226, 232, 240)"],
html[data-ck-theme="dark"] [style*="background: rgb(229, 231, 235)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(229, 231, 235)"],
html[data-ck-theme="dark"] [style*="background: rgb(217, 217, 227)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(217, 217, 227)"],
html[data-ck-theme="dark"] [style*="background: rgb(230, 232, 240)"],
html[data-ck-theme="dark"] [style*="background-color: rgb(230, 232, 240)"] {
  background-color: var(--ck-line) !important;
}
html[data-ck-theme="dark"] [style*="solid rgb(226, 232, 240)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(226, 232, 240)"],
html[data-ck-theme="dark"] [style*="solid rgb(236, 236, 242)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(236, 236, 242)"],
html[data-ck-theme="dark"] [style*="solid rgb(217, 217, 227)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(217, 217, 227)"],
html[data-ck-theme="dark"] [style*="solid rgb(229, 231, 235)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(229, 231, 235)"],
html[data-ck-theme="dark"] [style*="solid rgb(238, 242, 247)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(238, 242, 247)"],
html[data-ck-theme="dark"] [style*="solid rgb(241, 245, 249)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(241, 245, 249)"],
html[data-ck-theme="dark"] [style*="solid rgb(236, 239, 244)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(236, 239, 244)"],
html[data-ck-theme="dark"] [style*="solid rgb(233, 237, 243)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(233, 237, 243)"],
html[data-ck-theme="dark"] [style*="solid rgb(230, 232, 240)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(230, 232, 240)"],
html[data-ck-theme="dark"] [style*="solid rgb(203, 213, 225)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(203, 213, 225)"],
html[data-ck-theme="dark"] [style*="solid rgb(201, 201, 211)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(201, 201, 211)"],
html[data-ck-theme="dark"] [style*="solid rgb(213, 213, 224)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(213, 213, 224)"],
html[data-ck-theme="dark"] [style*="solid rgb(207, 207, 218)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(207, 207, 218)"],
html[data-ck-theme="dark"] [style*="solid rgb(209, 213, 219)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(209, 213, 219)"],
html[data-ck-theme="dark"] [style*="solid rgb(228, 228, 236)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(228, 228, 236)"],
html[data-ck-theme="dark"] [style*="solid rgb(244, 244, 248)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(244, 244, 248)"],
html[data-ck-theme="dark"] [style*="solid rgb(243, 244, 246)"],
html[data-ck-theme="dark"] [style*="border-color: rgb(243, 244, 246)"] {
  border-color: var(--ck-line) !important;
}
/* innerHTML-built widgets write hex strings instead */
html[data-ck-theme="dark"] [style^="color:#0f172a" i],
html[data-ck-theme="dark"] [style*=";color:#0f172a" i],
html[data-ck-theme="dark"] [style*="; color:#0f172a" i],
html[data-ck-theme="dark"] [style^="color: #0f172a" i],
html[data-ck-theme="dark"] [style*="; color: #0f172a" i],
html[data-ck-theme="dark"] [style^="color:#000;" i],
html[data-ck-theme="dark"] [style*=";color:#000;" i],
html[data-ck-theme="dark"] [style*="; color:#000;" i],
html[data-ck-theme="dark"] [style^="color: #000;" i],
html[data-ck-theme="dark"] [style*="; color: #000;" i],
html[data-ck-theme="dark"] [style^="color:#000000" i],
html[data-ck-theme="dark"] [style*=";color:#000000" i],
html[data-ck-theme="dark"] [style*="; color:#000000" i],
html[data-ck-theme="dark"] [style^="color: #000000" i],
html[data-ck-theme="dark"] [style*="; color: #000000" i],
html[data-ck-theme="dark"] [style^="color:#111827" i],
html[data-ck-theme="dark"] [style*=";color:#111827" i],
html[data-ck-theme="dark"] [style*="; color:#111827" i],
html[data-ck-theme="dark"] [style^="color: #111827" i],
html[data-ck-theme="dark"] [style*="; color: #111827" i],
html[data-ck-theme="dark"] [style^="color:#15151c" i],
html[data-ck-theme="dark"] [style*=";color:#15151c" i],
html[data-ck-theme="dark"] [style*="; color:#15151c" i],
html[data-ck-theme="dark"] [style^="color: #15151c" i],
html[data-ck-theme="dark"] [style*="; color: #15151c" i],
html[data-ck-theme="dark"] [style^="color:#1e293b" i],
html[data-ck-theme="dark"] [style*=";color:#1e293b" i],
html[data-ck-theme="dark"] [style*="; color:#1e293b" i],
html[data-ck-theme="dark"] [style^="color: #1e293b" i],
html[data-ck-theme="dark"] [style*="; color: #1e293b" i],
html[data-ck-theme="dark"] [style^="color:#334155" i],
html[data-ck-theme="dark"] [style*=";color:#334155" i],
html[data-ck-theme="dark"] [style*="; color:#334155" i],
html[data-ck-theme="dark"] [style^="color: #334155" i],
html[data-ck-theme="dark"] [style*="; color: #334155" i] {
  color: var(--ck-ink) !important;
}
/* full-height page wrappers painted #F8FAFC / #F5F6F8 / #F4F4F8 (Tasks, Calendar ...) take the page colour, not the panel colour */
html[data-ck-theme="dark"] [style*="background: rgb(248, 250, 252)"][style*="min-height"],
html[data-ck-theme="dark"] [style*="background: rgb(245, 246, 248)"][style*="min-height"],
html[data-ck-theme="dark"] [style*="background: rgb(244, 244, 248)"][style*="min-height"] {
  background-color: var(--ck-bg) !important;
}

/* ---- 8. Page shells that style themselves with injected class CSS (#ck-opps Opportunities, #ck-pond Pond, #ck-inbox Conversations,
        #ck-settings Settings). Generated from each file's own light rules: same selectors, dark values. Switch knobs, slider thumbs,
        the signature editor/preview and email previews are left light on purpose. ---- */
html[data-ck-theme="dark"] #ck-opps .op-pipe { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-btn { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-stats { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-stat { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-seg { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-search { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-sel { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-view { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-view button.on { background-color: var(--ck-card-2); color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-opps .op-col { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-colh .n { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-opps .op-colh .more:hover { background-color: var(--ck-card-2); color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-opps .op-colv .track { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-opps .op-card { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-card:hover { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-card .nm { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-opps .op-pond { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-opps .op-pond b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-opps .op-pond-next { background-color: #3a1328; }
html[data-ck-theme="dark"] #ck-opps .op-val.none { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-tag { background-color: var(--ck-card-2); color: var(--ck-muted); }
html[data-ck-theme="dark"] #ck-opps .op-ic:hover { background-color: var(--ck-card-2); color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-opps .op-empty { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-add { background-color: var(--ck-card-2); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-add:hover { background-color: #3a1328; }
html[data-ck-theme="dark"] #ck-opps .op-menu { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps .op-menu button { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-opps .op-menu button:hover { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-opps table { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps th { background-color: var(--ck-card-2); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-opps td { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-opps tr:hover td { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-pond { background-color: var(--ck-bg); color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-pond .pd-h1 { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-pond .pd-steps { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-step b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-pond .pd-tabs { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-tab.on { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-pond .pd-search { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-sel { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-count b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-pond .pd-card { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-name { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-pond .pd-chip { background-color: var(--ck-card-2); color: var(--ck-muted); }
html[data-ck-theme="dark"] #ck-pond .pd-price { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-pond .pd-price .v { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-pond .pd-pin { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-claim.other { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-pond .pd-insight { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-insight.on { background-color: #221a3d; }
html[data-ck-theme="dark"] #ck-pond .pd-brien .a { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-pond .pd-empty { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-msg { background-color: #221a3d; color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-pond table { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond th { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond td { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-pond .pd-no { background-color: var(--ck-card); }
html[data-ck-theme="dark"] #ck-pond .pd-prbtn { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-prpop { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-prhead b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-pond .pd-track { background-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-prins input { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-prq { background-color: var(--ck-card); color: var(--ck-muted); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-pond .pd-more { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox { background-color: var(--ck-card); color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-list { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-title b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-search input { background-color: var(--ck-card-2); color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-chip { background-color: var(--ck-card); color: var(--ck-muted); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-ctl { color: var(--ck-muted); }
html[data-ck-theme="dark"] #ck-inbox .cki-sort { color: var(--ck-muted); }
html[data-ck-theme="dark"] #ck-inbox .cki-who { background-color: var(--ck-card); color: var(--ck-muted); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-selbtn { background-color: var(--ck-card); color: var(--ck-muted); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-bulk { background-color: #3a1328; color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-bulk button { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-ck { background-color: var(--ck-card); }
html[data-ck-theme="dark"] #ck-inbox .cki-row:hover { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-inbox .cki-row.sel { background-color: #3a1328; }
html[data-ck-theme="dark"] #ck-inbox .cki-rn b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-row.unread .cki-rp span { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-thread { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-inbox .cki-th { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-th .nm { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-pill { background-color: var(--ck-card-2); color: var(--ck-muted); }
html[data-ck-theme="dark"] #ck-inbox .cki-ib { background-color: var(--ck-card); color: var(--ck-muted); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-ib.on { background-color: #3a1328; }
html[data-ck-theme="dark"] #ck-inbox .cki-bub { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-em { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-em .top b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-em .body { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-sig { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-dots { background-color: var(--ck-card-2); color: var(--ck-muted); }
html[data-ck-theme="dark"] #ck-inbox .cki-comp { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-seg { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-inbox .cki-seg button { color: var(--ck-muted); }
html[data-ck-theme="dark"] #ck-inbox .cki-seg button.on { background-color: var(--ck-card); color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-subj { color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-ta { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-tb:hover { background-color: var(--ck-card-2); color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-goal { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-inbox .cki-goal input { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-att { background-color: var(--ck-card-2); color: var(--ck-muted); }
html[data-ck-theme="dark"] #ck-inbox .cki-pop { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-pop .it { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-pop .it:hover { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-inbox .cki-emoji button:hover { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-inbox .cki-panel { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-pname { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-qa button { background-color: var(--ck-card); color: var(--ck-muted); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-qa button:hover { background-color: #3a1328; }
html[data-ck-theme="dark"] #ck-inbox .cki-kv b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-tag { background-color: var(--ck-card-2); color: var(--ck-muted); }
html[data-ck-theme="dark"] #ck-inbox .cki-tag.add { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-full { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-menu { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-inbox .cki-menu button { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-inbox .cki-menu button:hover { background-color: var(--ck-card-2); }
html[data-ck-theme="dark"] #ck-inbox .cki-mbox { background-color: var(--ck-card); }
html[data-ck-theme="dark"] #ck-settings { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings h1.cks-h1 { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-card { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings .cks-card-hd h3 { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-in, html[data-ck-theme="dark"] #ck-settings .cks-sel, html[data-ck-theme="dark"] #ck-settings .cks-ta { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings .cks-row-t { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-btn { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings .cks-sess b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-tile { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings .cks-tile b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings table.cks-tbl th { background-color: var(--ck-card-2); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings table.cks-tbl td { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-tblwrap { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings .cks-chip { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings .cks-seg button.on { background-color: var(--ck-card); color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-cb { background-color: var(--ck-card); }
html[data-ck-theme="dark"] #ck-settings .cks-ev b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-agent b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-modal { background-color: var(--ck-card); }
html[data-ck-theme="dark"] #ck-settings .cks-modal h3 { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-numres { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings .cks-numres button { background-color: var(--ck-card); color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-pop { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings .cks-pop label { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-hgcard { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings .cks-hgbody b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-libitem { background-color: var(--ck-card); border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings .cks-libitem small { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-voices { border-color: var(--ck-line); }
html[data-ck-theme="dark"] #ck-settings .cks-voice b { color: var(--ck-ink); }
html[data-ck-theme="dark"] #ck-settings .cks-play { background-color: var(--ck-card); color: var(--ck-ink); border-color: var(--ck-line); }

/* ---- O6 fix 1 (2026-10-22): select chevrons. These controls draw their chevron as a data-URI SVG stroked #15151c
        (opportunities.js, pond.js, ck-price-range.js, saved-searches.js, mls-search.js, contacts.js), invisible on the
        dark field colour. Same SVG, light stroke; size/weight kept per control. Their own CSS uses !important. ---- */
html[data-ck-theme="dark"] #ck-opps .op-sel,
html[data-ck-theme="dark"] #ck-opps .ckpr .ckpr-btn,
html[data-ck-theme="dark"] #ck-pond .pd-sel,
html[data-ck-theme="dark"] #ck-pond .pd-prbtn,
html[data-ck-theme="dark"] #ck-saved .sv-sel,
html[data-ck-theme="dark"] #ck-mls .mls-sel,
html[data-ck-theme="dark"] #ck-contacts .ckc-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9cad6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}
html[data-ck-theme="dark"] #ck-opps .op-pipe {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9cad6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}
html[data-ck-theme="dark"] #ck-contacts .ckc-pp select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9cad6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}