/* SKHAI Ops — theme overrides. * * Light theme is the default and lives in app.css. This file adds a dark * theme that activates when `` is set. We layer * overrides on top of the existing Tailwind utility classes (bg-white, * bg-ink-*, text-ink-*, border-ink-*) rather than refactoring the whole * codebase to use CSS variables — much cheaper retrofit, no template * touches needed beyond setting the data-theme attribute. * * "auto" is resolved to light/dark in base.html via the pre-paint script * so this stylesheet only ever sees concrete values. */ html[data-theme="dark"] { color-scheme: dark; } /* Surfaces */ html[data-theme="dark"] body { background-color: #0F0F0E; color: #E8E7E4; } html[data-theme="dark"] .bg-white { background-color: #181816 !important; } html[data-theme="dark"] .bg-white\/90 { background-color: rgba(24,24,22,0.90) !important; } html[data-theme="dark"] .bg-white\/95 { background-color: rgba(24,24,22,0.95) !important; } html[data-theme="dark"] .bg-ink-50 { background-color: #1F1F1D !important; } html[data-theme="dark"] .bg-ink-100 { background-color: #262624 !important; } html[data-theme="dark"] .bg-ink-200 { background-color: #303030 !important; } html[data-theme="dark"] .bg-ink-300 { background-color: #3A3A38 !important; } html[data-theme="dark"] .bg-ink-800 { background-color: #E8E7E4 !important; color: #0F0F0E !important; } html[data-theme="dark"] .bg-ink-900 { background-color: #F5F4F1 !important; color: #0F0F0E !important; } html[data-theme="dark"] .surface-sidebar { background-color: #131311 !important; } html[data-theme="dark"] .surface-topbar { background-color: #181816 !important; } /* Text */ html[data-theme="dark"] .text-ink-800, html[data-theme="dark"] .text-ink-900 { color: #F0EFEC !important; } html[data-theme="dark"] .text-ink-700 { color: #DAD8D3 !important; } html[data-theme="dark"] .text-ink-600 { color: #B8B6B0 !important; } html[data-theme="dark"] .text-ink-500 { color: #93908A !important; } html[data-theme="dark"] .text-ink-400 { color: #75726C !important; } html[data-theme="dark"] .text-ink { color: #F0EFEC !important; } html[data-theme="dark"] .text-muted { color: #93908A !important; } /* When ink-800 is used as a *background* (avatars, dark buttons), the * foreground also needs to flip for legibility. */ html[data-theme="dark"] .bg-ink-800 .text-white, html[data-theme="dark"] .bg-ink-900 .text-white { color: #0F0F0E !important; } /* Borders + dividers */ html[data-theme="dark"] .border-ink-100, html[data-theme="dark"] .border-ink-200 { border-color: #2E2E2C !important; } html[data-theme="dark"] .border-ink-300 { border-color: #3B3B39 !important; } html[data-theme="dark"] .divide-ink-100 > * + *, html[data-theme="dark"] .divide-ink-200 > * + * { border-color: #2E2E2C !important; } /* Inputs */ html[data-theme="dark"] .input, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #1F1F1D !important; color: #F0EFEC !important; border-color: #3A3A38 !important; } html[data-theme="dark"] .input::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #75726C !important; } /* Cards explicitly default to white via Tailwind .card { @apply bg-white } — * the override above on .bg-white handles them, but for layered tints * (warning-soft etc) we redefine the soft backgrounds slightly. */ html[data-theme="dark"] .bg-warning-soft { background-color: rgba(239,223,118,0.08) !important; } html[data-theme="dark"] .bg-danger-soft { background-color: rgba(239,134,118,0.10) !important; } html[data-theme="dark"] .bg-success-soft { background-color: rgba(155,239,164,0.10) !important; } html[data-theme="dark"] .bg-info-soft { background-color: rgba(118,181,239,0.10) !important; } /* Backdrops + shadows feel wrong on dark — soften them. */ html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow-md, html[data-theme="dark"] .shadow-lg, html[data-theme="dark"] .shadow-xl { box-shadow: 0 1px 2px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.30) !important; } /* Hover states need to stay visible on dark surfaces */ html[data-theme="dark"] .hover\:bg-ink-50:hover { background-color: #232321 !important; } html[data-theme="dark"] .hover\:bg-ink-100:hover { background-color: #2A2A28 !important; } /* Avatar images preserve their natural look — only fallback color spans * derive from bg-ink-* classes already covered above. */ /* ─── Sales copy guard ─── for sales-role users the gets .role-sales * (set in base.html, super-admins excluded). Disable text selection across * the page so contact/deal/agency data can't be select-all'd and copied. * Editable fields stay selectable so inline editing + the email composer * (Quill .ql-editor) keep working. JS in base.html blocks copy/cut/ctrl-A. */ body.role-sales, body.role-sales * { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } body.role-sales input, body.role-sales textarea, body.role-sales select, body.role-sales [contenteditable="true"], body.role-sales .ql-editor, body.role-sales .ql-editor * { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; }