/* Tiny tweaks on top of Tailwind CDN. Most styling stays inline in templates. */ html, body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* The Tailwind CDN doesn't ship JIT; ring-0 may not be reachable without the JIT compiler. This shim makes focus rings invisible the way our forms expect. */ input:focus, textarea:focus, select:focus { box-shadow: none; outline: none; } /* ─── Popup-modal hygiene ─────────────────────────────────────────── Two flavors of modal live in the codebase: 1. native (stats.tmpl): browsers ship a default 1em padding + solid border + white background; without resetting, a visible white strip frames the inner card. 2.
Tailwind modals (contacts, pipeline, inbox, …): the white card is built from Tailwind utilities, but on mobile the safe-area inset bleeds a white sliver above the header. The rules below normalise both: the chrome is transparent, the backdrop is a dark blur, and the inner card carries its own white background + rounded corners. Modals stay flexible — pages can still inline-style their cards. */ dialog { border: 0; padding: 0; margin: auto; background: transparent; max-width: min(640px, 100vw); max-height: 100vh; overflow: visible; color: inherit; } dialog::backdrop { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Inner card: white background + rounded corners + scroll. The selector is intentionally narrow — it ONLY hits the direct child of a , so existing Tailwind utility classes on the same element still win (rounded-2xl, p-5, etc). */ dialog > .modal-card, dialog > form, dialog > div { background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); max-height: 90vh; overflow-y: auto; } /* Mobile div-modals already use `h-full sm:h-auto` so the white card covers the full viewport edge-to-edge below the sm breakpoint. We intentionally do NOT inject extra safe-area padding here — that would push the page's existing header down into ugly territory. Each modal that needs notch-safe layout opts in inline. */ /* ═══════════════════════════════════════════════════════════════════════ THEME LAYER ═══════════════════════════════════════════════════════════════════════ Why this exists, and why it is written this way. The app ships a PREBUILT tailwind.css that contains ZERO `dark:` variants (verified: `grep -c 'dark\:' tailwind.css` → 0). theme.js faithfully sets , but no utility in any template responds to it, so dark mode flipped the class and almost nothing changed — while the handful of elements that carry hand-written dark styling DID change. That mismatch is what produced the "some elements dark, some white" screens, and why text disappeared: dark glyphs on a still-white surface, or the reverse. Adding `dark:` classes to 95 templates would not work — those classes are not in the prebuilt CSS, so they would be inert. Rebuilding Tailwind is not an option here either. So the theme is expressed as semantic tokens, and dark mode REMAPS the handful of colour utilities the templates actually use. That vocabulary is small and highly concentrated — the top ten account for the overwhelming majority of usage: text-slate-500 (1649) border-slate-200 (1273) bg-white (936) text-slate-900 (679) text-slate-700 (524) text-white (519) bg-slate-50 (492) text-slate-600 (482) bg-slate-100 (314) One rule per utility themes every page at once, with no template edits and no risk of a page being missed. LIGHT MODE IS DELIBERATELY UNTOUCHED. Every rule below is scoped under html.dark, so the default theme renders exactly as it does today and this layer cannot regress it. ═══════════════════════════════════════════════════════════════════════ */ :root { /* Light — mirrors the existing slate palette so nothing shifts. */ --surface: #ffffff; /* cards, panels, the page itself */ --surface-sunken: #f8fafc; /* slate-50 — inset areas, toolbars */ --surface-raised: #f1f5f9; /* slate-100 — chips, hover states */ --border: #e2e8f0; /* slate-200 — the default hairline */ --border-strong: #cbd5e1; /* slate-300 — inputs, dividers */ --text: #0f172a; /* slate-900 — headings, body */ --text-secondary: #334155; /* slate-700 */ --text-muted: #64748b; /* slate-500 — labels, metadata */ --text-faint: #94a3b8; /* slate-400 — placeholders */ --accent: #2563eb; --accent-weak: #eff6ff; --input-bg: #ffffff; --text-dim: #cbd5e1; --shadow: rgba(15, 23, 42, .08); --scrollbar-thumb: #cbd5e1; --scrollbar-track: transparent; /* Pin the light scheme. base.tmpl declares ``, which tells the browser the page supports BOTH -- and html.dark pins dark, but nothing ever pinned light. So in the light theme the UA fell back to the OS preference when painting native controls, and on an OS-dark machine every /