/* ============================================================================
 * theme.css — Dark mode via semantic design tokens + a scoped override layer.
 *
 * STRATEGY (no build pipeline available; Tailwind is pre-compiled):
 *   - Define semantic tokens on :root (light) and html.dark (dark).
 *   - EVERYTHING below that re-colors UI is scoped under `html.dark`, so when
 *     the `dark` class is absent the existing light UI is byte-for-byte
 *     unchanged. Dark mode is therefore purely additive and cannot regress
 *     light mode.
 *   - We remap the highest-frequency Tailwind color utilities to tokens. Inline
 *     style="#hex" colors cannot be reached by CSS (inline wins) — those are the
 *     documented migration backlog; most are vivid accents that read fine on dark.
 * ========================================================================== */

:root {
  --bg:            #f8fafc; /* page background  (slate-50)  */
  --surface:       #ffffff; /* cards / panels                */
  --surface-2:     #f1f5f9; /* inputs, subtle raised, hover  */
  --surface-3:     #e2e8f0;
  --fg:            #0f172a; /* primary text     (slate-900)  */
  --fg-muted:      #475569; /* secondary text   (slate-600)  */
  --fg-subtle:     #94a3b8; /* tertiary / hints (slate-400)  */
  --border:        #e2e8f0; /* slate-200                      */
  --border-strong: #cbd5e1; /* slate-300                      */
  --primary:       #071b2d; /* brand navy                     */
  --success:       #10b981;
  --warning:       #f59e0b;
  --danger:        #ef4444;
  --shadow:        rgba(2, 6, 23, .06);
}

html.dark {
  --bg:            #0b1220; /* deep desaturated navy (premium, not pure black) */
  --surface:       #131c2e;
  --surface-2:     #1b2740;
  --surface-3:     #243049;
  --fg:            #e7ecf3;
  --fg-muted:      #aeb9cc;
  --fg-subtle:     #8f9cb3;
  --border:        #243049;
  --border-strong: #33405d;
  --primary:       #6d8bff; /* lighter brand so it reads on dark */
  --success:       #34d399;
  --warning:       #fbbf24;
  --danger:        #f87171;
  --shadow:        rgba(0, 0, 0, .45);
  color-scheme: dark; /* native form controls, scrollbars, etc. */
}

/* Subtle, scoped transition (only fires on user toggle — initial state is set
   pre-paint by the inline head script, so there is no load animation). */
html.theme-ready body,
html.theme-ready .bg-white,
html.theme-ready [class*="bg-slate-"],
html.theme-ready [class*="border-slate-"],
html.theme-ready input,
html.theme-ready textarea,
html.theme-ready select {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html.dark body { background-color: var(--bg); color: var(--fg); }

/* ── Surfaces ─────────────────────────────────────────────────────────────── */
html.dark .bg-white                    { background-color: var(--surface)  !important; }
html.dark .bg-slate-50, html.dark .bg-gray-50   { background-color: var(--bg)        !important; }
html.dark .bg-slate-100, html.dark .bg-gray-100 { background-color: var(--surface-2) !important; }
html.dark .bg-slate-200                { background-color: var(--surface-3) !important; }
html.dark .bg-slate-800, html.dark .bg-slate-900,
html.dark .bg-brand-900, html.dark .bg-brand-800 { background-color: var(--surface-2) !important; }

/* ── Text ─────────────────────────────────────────────────────────────────── */
html.dark .text-slate-900, html.dark .text-slate-800,
html.dark .text-brand-900, html.dark .text-brand-800,
html.dark .text-gray-900,  html.dark .text-gray-800 { color: var(--fg) !important; }
html.dark .text-slate-700, html.dark .text-slate-600,
html.dark .text-brand-700, html.dark .text-gray-700,
html.dark .text-gray-600                            { color: var(--fg-muted) !important; }
html.dark .text-slate-500, html.dark .text-slate-400,
html.dark .text-slate-300, html.dark .text-gray-500,
html.dark .text-gray-400                            { color: var(--fg-subtle) !important; }

/* ── Borders / dividers ───────────────────────────────────────────────────── */
html.dark .border-slate-100, html.dark .border-slate-200,
html.dark .border-gray-100,  html.dark .border-gray-200,
html.dark .divide-slate-100 > * + *, html.dark .divide-slate-200 > * + * { border-color: var(--border) !important; }
html.dark .border-slate-300, html.dark .border-gray-300 { border-color: var(--border-strong) !important; }

/* ── Form controls ────────────────────────────────────────────────────────── */
html.dark input:not([type="radio"]):not([type="checkbox"]), html.dark textarea, html.dark select {
  background-color: var(--surface-2) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}
/* A painted background turns native radios and checkboxes into solid black discs on iOS; tint them instead. */
html.dark input[type="radio"], html.dark input[type="checkbox"] { accent-color: var(--primary); }
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--fg-subtle) !important; }
/* keep brand/colored buttons (text-white on color) intact — do NOT remap text-white */

/* ── Hover states that assume a light surface ─────────────────────────────── */
html.dark .hover\:bg-slate-50:hover,  html.dark .hover\:bg-gray-50:hover  { background-color: var(--surface-2) !important; }
html.dark .hover\:bg-slate-100:hover, html.dark .hover\:bg-gray-100:hover { background-color: var(--surface-3) !important; }

/* ── Shadows: soften/deepen so cards still read on dark ───────────────────── */
html.dark .shadow-sm { box-shadow: 0 1px 2px var(--shadow) !important; }
html.dark .shadow, html.dark .shadow-md { box-shadow: 0 4px 12px var(--shadow) !important; }
html.dark .shadow-lg, html.dark .shadow-xl { box-shadow: 0 12px 32px var(--shadow) !important; }

/* ── App component classes (defined in app.css with fixed colors) ─────────── */
html.dark .sidebar-link { color: var(--fg-muted); }
/* Dark mode: neutral white highlight (a coach's brand colour can be low-contrast
   on dark). !important + higher specificity override the white-label brand
   injection in head.php — light mode keeps the brand colour. */
html.dark .sidebar-link:hover { background-color: var(--surface-2) !important; color: var(--fg) !important; }
html.dark .sidebar-link.active {
  background-color: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 #ffffff !important;
}
/* Tooltips ([data-tip]) — the bg resolves to near-black on dark and vanishes into
   the page; give them a clearly elevated surface + border + strong shadow. */
html.dark [data-tip]::after {
  background: #243049 !important;
  color: #e7ecf3 !important;
  border: 1px solid #3a4866 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.55) !important;
}
/* Floating scroll-to-top button uses the same near-black bg — lift it too. */
html.dark .scroll-top-btn { background: #243049 !important; color: #e7ecf3 !important; border: 1px solid #33405d !important; }
html.dark .card, html.dark .modal-panel { background-color: var(--surface); color: var(--fg); }

/* ── Theme switcher (segmented control) ───────────────────────────────────── */
.theme-switch { display:inline-flex; gap:2px; padding:3px; border-radius:10px;
  background: var(--surface-2); border:1px solid var(--border); }
.theme-switch button { display:inline-flex; align-items:center; gap:5px; border:none; cursor:pointer;
  background:transparent; color:var(--fg-muted); font-size:12px; font-weight:700;
  padding:5px 11px; border-radius:7px; transition:background .15s, color .15s; -webkit-tap-highlight-color:transparent; }
.theme-switch button:hover { color:var(--fg); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--fg);
  box-shadow:0 1px 2px var(--shadow); }

/* ── Tinted status chips/badges: pastel bg-*-50/100 → premium dark tints ────── */
html.dark .bg-emerald-50, html.dark .bg-emerald-100, html.dark .bg-green-50, html.dark .bg-green-100 { background-color: rgba(16,185,129,.14) !important; }
html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-green-600, html.dark .text-green-700 { color: #6ee7b7 !important; }
html.dark .border-emerald-100, html.dark .border-emerald-200, html.dark .border-green-200 { border-color: rgba(16,185,129,.30) !important; }

html.dark .bg-amber-50, html.dark .bg-amber-100, html.dark .bg-yellow-50, html.dark .bg-yellow-100 { background-color: rgba(245,158,11,.15) !important; }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-yellow-700 { color: #fcd34d !important; }
html.dark .border-amber-100, html.dark .border-amber-200, html.dark .border-yellow-200 { border-color: rgba(245,158,11,.30) !important; }

html.dark .bg-red-50, html.dark .bg-red-100, html.dark .bg-rose-50, html.dark .bg-rose-100 { background-color: rgba(239,68,68,.14) !important; }
html.dark .text-red-500, html.dark .text-red-600, html.dark .text-red-700, html.dark .text-rose-600 { color: #fca5a5 !important; }
html.dark .border-red-100, html.dark .border-red-200, html.dark .border-rose-200 { border-color: rgba(239,68,68,.30) !important; }

html.dark .bg-blue-50, html.dark .bg-blue-100, html.dark .bg-sky-50, html.dark .bg-indigo-50, html.dark .bg-indigo-100 { background-color: rgba(59,130,246,.15) !important; }
html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-indigo-600, html.dark .text-indigo-700, html.dark .text-sky-700 { color: #93c5fd !important; }
html.dark .border-blue-100, html.dark .border-blue-200, html.dark .border-indigo-200 { border-color: rgba(59,130,246,.30) !important; }

html.dark .bg-violet-50, html.dark .bg-violet-100, html.dark .bg-purple-50, html.dark .bg-purple-100 { background-color: rgba(139,92,246,.16) !important; }
html.dark .text-violet-600, html.dark .text-violet-700, html.dark .text-purple-600, html.dark .text-purple-700 { color: #c4b5fd !important; }
html.dark .border-violet-100, html.dark .border-violet-200, html.dark .border-purple-200 { border-color: rgba(139,92,246,.30) !important; }

html.dark .bg-brand-50, html.dark .bg-brand-100 { background-color: rgba(109,139,255,.15) !important; }
html.dark .text-brand-600 { color: #9db2ff !important; }
html.dark .border-brand-100, html.dark .border-brand-200 { border-color: rgba(109,139,255,.30) !important; }

/* ── Real-render fixes (dark-mode audit): light surfaces the utility/[style*] layers miss ── */
/* Board/Team-Board column body uses bg-white/60 (a light translucent wash) → a bright
   haze in dark. Subtle dark elevation instead. Scoped to .sortable-col so the sidebar's
   OWN bg-white/60 progress track (a different element) stays untouched. */
html.dark .sortable-col { background-color: rgba(255,255,255,.05) !important; }
/* Pipeline: TidyCal crosswalk panel (#f0fdf9) + integration-error pill (#fee2e2). */
html.dark .pl-crosswalk { background-color: rgba(20,184,166,.12) !important; border-color: rgba(20,184,166,.28) !important; }
html.dark .pl-int-err   { background-color: rgba(239,68,68,.20) !important; }
/* ICA assessment intro box (#f5f3ff inline style) → dark violet tint. */
html.dark [style*="background:#f5f3ff"] { background-color: rgba(139,92,246,.14) !important; }

/* ════════════════════════════════════════════════════════════════════════════
 * INLINE-STYLE overrides (style="color:#…"/"background:#…").
 * External !important beats normal inline styles, so these reach inline colors
 * that utility-class rules cannot. Dark-only — cannot affect light mode.
 * App uses `background:` shorthand inline, so "color:#x" never matches a bg.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Inline dark NEUTRAL / brand text → light (the invisible-text fix) ──────── */
html.dark [style*="color:#0f172a"], html.dark [style*="color:#1e293b"],
html.dark [style*="color:#334155"], html.dark [style*="color:#071b2d"],
html.dark [style*="color:#0b3b38"], html.dark [style*="color:#0b5f5a"],
html.dark [style*="color:#123f4a"], html.dark [style*="color:#1f2937"],
html.dark [style*="color:#111827"], html.dark [style*="color:#0f3b3a"] { color: var(--fg) !important; }
html.dark [style*="color:#475569"], html.dark [style*="color:#64748b"],
html.dark [style*="color:#0f766e"], html.dark [style*="color:#374151"],
html.dark [style*="color:#4b5563"] { color: var(--fg-muted) !important; }

/* ── Inline dark ACCENT text → lighter accent (keeps the hue, fixes contrast) ─ */
html.dark [style*="color:#065f46"], html.dark [style*="color:#15803d"],
html.dark [style*="color:#166534"], html.dark [style*="color:#14532d"],
html.dark [style*="color:#047857"] { color: #6ee7b7 !important; }
html.dark [style*="color:#92400e"], html.dark [style*="color:#b45309"],
html.dark [style*="color:#78350f"], html.dark [style*="color:#9a3412"],
html.dark [style*="color:#d97706"], html.dark [style*="color:#854d0e"] { color: #fcd34d !important; }
html.dark [style*="color:#e11d48"], html.dark [style*="color:#b91c1c"],
html.dark [style*="color:#9f1239"], html.dark [style*="color:#be123c"],
html.dark [style*="color:#991b1b"] { color: #fca5a5 !important; }
html.dark [style*="color:#3730a3"], html.dark [style*="color:#4338ca"],
html.dark [style*="color:#4f46e5"], html.dark [style*="color:#6366f1"],
html.dark [style*="color:#1d4ed8"], html.dark [style*="color:#1e40af"] { color: #a5b4fc !important; }
html.dark [style*="color:#7c3aed"], html.dark [style*="color:#6d28d9"],
html.dark [style*="color:#5b21b6"] { color: #c4b5fd !important; }

/* ── Inline light SURFACE backgrounds → dark (full hexes; #fff handled below) ─ */
html.dark [style*="background:#ffffff"], html.dark [style*="background:#FFFFFF"] { background:#131c2e !important; }
html.dark [style*="background:#fff;"], html.dark [style$="background:#fff"] { background:#131c2e !important; }
html.dark [style*="background:#f8fafc"] { background:#0b1220 !important; }
html.dark [style*="background:#f1f5f9"], html.dark [style*="background:#f3f4f6"] { background:#1b2740 !important; }
html.dark [style*="background:#e2e8f0"], html.dark [style*="background:#e5e7eb"] { background:#243049 !important; }

/* ── Inline light ACCENT chip backgrounds → dark tints ─────────────────────── */
html.dark [style*="background:#f0fdf4"], html.dark [style*="background:#ecfdf5"],
html.dark [style*="background:#f0fdfa"], html.dark [style*="background:#dcfce7"] { background:rgba(16,185,129,.13) !important; }
html.dark [style*="background:#fffbeb"], html.dark [style*="background:#fff7ed"],
html.dark [style*="background:#fef3c7"], html.dark [style*="background:#fef9c3"] { background:rgba(245,158,11,.14) !important; }
html.dark [style*="background:#fff1f2"], html.dark [style*="background:#fef2f2"],
html.dark [style*="background:#ffe4e6"] { background:rgba(239,68,68,.13) !important; }
html.dark [style*="background:#eef2ff"], html.dark [style*="background:#eff6ff"],
html.dark [style*="background:#dbeafe"], html.dark [style*="background:#e0e7ff"] { background:rgba(99,102,241,.15) !important; }
html.dark [style*="background:#faf5ff"], html.dark [style*="background:#f3e8ff"] { background:rgba(139,92,246,.15) !important; }

/* ── app.css-defined dark utilities not in compiled Tailwind ───────────────── */
html.dark .text-teal-700, html.dark .text-teal-800, html.dark .text-teal-900 { color:#5eead4 !important; }
html.dark .text-sky-700, html.dark .text-sky-800, html.dark .text-sky-900 { color:#7dd3fc !important; }
html.dark .bg-teal-50, html.dark .bg-teal-100 { background-color:rgba(20,184,166,.15) !important; }
html.dark .bg-sky-50, html.dark .bg-sky-100 { background-color:rgba(14,165,233,.15) !important; }
/* status pills (light bg + dark text defined together in app.css) */
html.dark [class*="status-"] { background:var(--surface-2) !important; color:var(--fg) !important; border-color:var(--border) !important; }

/* ── Document "paper" island ───────────────────────────────────────────────────
 * Contracts, letters, printable docs are meant to look like paper — keep them
 * light even in dark mode. Resetting the tokens to their light values inside makes
 * BOTH the migrated colors AND the inline/attribute overrides (which resolve through
 * these tokens) render as they would on paper. */
.doc-paper { background:#ffffff !important; }
html.dark .doc-paper {
  color:#1e293b;
  --fg:#0f172a; --fg-muted:#334155; --fg-subtle:#64748b;
  --surface:#ffffff; --surface-2:#f1f5f9; --surface-3:#e2e8f0; --bg:#f8fafc; --border:#e2e8f0; --border-strong:#cbd5e1;
  --c-0f172a:#0f172a; --c-1e293b:#1e293b; --c-334155:#334155; --c-475569:#475569; --c-64748b:#64748b;
  --c-94a3b8:#94a3b8; --c-cbd5e1:#cbd5e1; --c-e2e8f0:#e2e8f0; --c-071b2d:#071b2d; --c-123f4a:#123f4a;
  --c-0b3b38:#0b3b38; --c-0b5f5a:#0b5f5a; --c-0f766e:#0f766e;
  --b-ffffff:#ffffff; --b-f8fafc:#f8fafc; --b-f1f5f9:#f1f5f9; --b-e2e8f0:#e2e8f0; --b-071b2d:#071b2d; --b-123f4a:#123f4a;
}

/* ── Dark overrides for the auto-filled colored/gradient utilities (app-missing-utilities.css) ── */
html.dark .bg-amber-200{background-color:rgba(253,230,138,.22)!important}
html.dark .bg-blue-200{background-color:rgba(191,219,254,.22)!important}
html.dark .bg-emerald-200{background-color:rgba(167,243,208,.22)!important}
html.dark .bg-orange-100{background-color:rgba(255,237,213,.14)!important}
html.dark .bg-pink-100{background-color:rgba(252,231,243,.14)!important}
html.dark .bg-pink-200{background-color:rgba(251,207,232,.22)!important}
html.dark .bg-pink-50{background-color:rgba(253,242,248,.14)!important}
html.dark .bg-purple-200{background-color:rgba(233,213,255,.22)!important}
html.dark .bg-red-200{background-color:rgba(254,202,202,.22)!important}
html.dark .bg-violet-200{background-color:rgba(221,214,254,.22)!important}
html.dark .border-blue-300{border-color:rgba(147,197,253,.30)!important}
html.dark .border-brand-300{border-color:rgba(124,185,180,.30)!important}
html.dark .border-green-300{border-color:rgba(134,239,172,.30)!important}
html.dark .border-indigo-100{border-color:rgba(224,231,255,.30)!important}
html.dark .border-indigo-300{border-color:rgba(165,180,252,.30)!important}
html.dark .border-orange-200{border-color:rgba(254,215,170,.30)!important}
html.dark .border-orange-300{border-color:rgba(253,186,116,.30)!important}
html.dark .border-pink-200{border-color:rgba(251,207,232,.30)!important}
html.dark .border-pink-300{border-color:rgba(249,168,212,.30)!important}
html.dark .border-purple-100{border-color:rgba(243,232,255,.30)!important}
html.dark .border-purple-300{border-color:rgba(216,180,254,.30)!important}
html.dark .border-rose-300{border-color:rgba(253,164,175,.30)!important}
html.dark .border-sky-200{border-color:rgba(186,230,253,.30)!important}
html.dark .border-teal-100{border-color:rgba(204,251,241,.30)!important}
html.dark .border-violet-300{border-color:rgba(196,181,253,.30)!important}
html.dark .text-blue-900{color:#93c5fd!important}
html.dark .text-emerald-900{color:#6ee7b7!important}
html.dark .text-amber-900{color:#fcd34d!important}
html.dark .text-green-800{color:#86efac!important}
html.dark .text-indigo-800{color:#a5b4fc!important}
html.dark .text-indigo-900{color:#a5b4fc!important}
html.dark .text-orange-700{color:#fdba74!important}
html.dark .text-orange-800{color:#fdba74!important}
html.dark .text-orange-900{color:#fdba74!important}
html.dark .text-pink-800{color:#f9a8d4!important}
html.dark .text-pink-900{color:#f9a8d4!important}
html.dark .text-purple-800{color:#d8b4fe!important}
html.dark .text-purple-900{color:#d8b4fe!important}
html.dark .text-rose-700{color:#fda4af!important}
html.dark .text-rose-800{color:#fda4af!important}
html.dark .text-rose-900{color:#fda4af!important}
html.dark .text-sky-600{color:#7dd3fc!important}
html.dark .text-yellow-600{color:#fde047!important}
html.dark .from-emerald-50{--tw-gradient-from:rgba(16,185,129,.16) var(--tw-gradient-from-position);--tw-gradient-to:rgba(16,185,129,0) var(--tw-gradient-to-position)!important}
html.dark .from-amber-50{--tw-gradient-from:rgba(245,158,11,.16) var(--tw-gradient-from-position);--tw-gradient-to:rgba(245,158,11,0) var(--tw-gradient-to-position)!important}
html.dark .from-brand-50{--tw-gradient-from:rgba(109,139,255,.16) var(--tw-gradient-from-position);--tw-gradient-to:rgba(109,139,255,0) var(--tw-gradient-to-position)!important}
html.dark .to-emerald-50{--tw-gradient-to:rgba(16,185,129,.10) var(--tw-gradient-to-position)!important}
html.dark .to-emerald-100{--tw-gradient-to:rgba(16,185,129,.14) var(--tw-gradient-to-position)!important}
html.dark .to-violet-50{--tw-gradient-to:rgba(139,92,246,.12) var(--tw-gradient-to-position)!important}
html.dark .to-white{--tw-gradient-to:var(--surface) var(--tw-gradient-to-position)!important}

/* ── Dark overrides for the neutral-gray remainder ── */
html.dark .bg-slate-300{background-color:var(--surface-3)!important}
html.dark .bg-slate-400{background-color:var(--surface-3)!important}
html.dark .bg-slate-50\/50{background-color:rgba(255,255,255,.03)!important}
html.dark .bg-slate-50\/60{background-color:rgba(255,255,255,.04)!important}
/* Near-white layers (count badges on board columns, soft cards) stayed near-white in dark mode, under light text. */
html.dark .bg-white\/40,html.dark .bg-white\/60,html.dark .bg-white\/70{background-color:rgba(255,255,255,.05)!important}
html.dark .bg-white\/80,html.dark .bg-white\/90{background-color:rgba(255,255,255,.04)!important}
html.dark .bg-amber-50\/50{background-color:rgba(245,158,11,.10)!important}
html.dark .border-slate-400{border-color:var(--border-strong)!important}
html.dark .divide-slate-50>:not([hidden])~:not([hidden]){border-color:var(--border)!important}

/* ── Inline form-field validation — dark ── */
html.dark .is-invalid,
html.dark input.is-invalid, html.dark textarea.is-invalid, html.dark select.is-invalid { border-color: #f87171 !important; }
html.dark .is-invalid:focus { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,.22) !important; }
html.dark .field-error { color: #f87171 !important; }

/* ── Rich-text editor (Quill snow) — dark: its light borders, dark icons and near-black placeholder ── */
html.dark .ql-toolbar.ql-snow, html.dark .ql-container.ql-snow { border-color: var(--border-strong) !important; }
html.dark .ql-snow .ql-stroke { stroke: var(--fg-muted) !important; }
html.dark .ql-snow .ql-fill, html.dark .ql-snow .ql-stroke.ql-fill { fill: var(--fg-muted) !important; }
html.dark .ql-snow .ql-picker { color: var(--fg-muted) !important; }
html.dark .ql-snow button:hover .ql-stroke, html.dark .ql-snow button.ql-active .ql-stroke,
html.dark .ql-snow .ql-picker-label:hover .ql-stroke, html.dark .ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--primary) !important; }
html.dark .ql-snow button:hover .ql-fill, html.dark .ql-snow button.ql-active .ql-fill { fill: var(--primary) !important; }
html.dark .ql-snow .ql-picker-label:hover, html.dark .ql-snow .ql-picker-label.ql-active,
html.dark .ql-snow .ql-picker-item:hover, html.dark .ql-snow .ql-picker-item.ql-selected { color: var(--primary) !important; }
html.dark .ql-snow .ql-picker-options { background-color: var(--surface-2) !important; border-color: var(--border-strong) !important; }
html.dark .ql-editor { color: var(--fg); }
html.dark .ql-editor.ql-blank::before { color: var(--fg-subtle) !important; }
html.dark .ql-snow .ql-tooltip { background-color: var(--surface-2) !important; color: var(--fg) !important; border-color: var(--border-strong) !important; box-shadow: 0 4px 12px var(--shadow) !important; }