/* Vercel-style solid buttons: black in light mode, white in dark mode. Lavender stays for accents. */
.bg-primary-600, .hover\:bg-primary-600\/80:hover, .hover\:bg-primary-700:hover { background-color: #0a0a0a !important; color: #fff !important; }
.bg-primary-600 .material-symbols-outlined, .bg-primary-600 * { color: inherit; }
html.dark .bg-primary-600, html.dark .dark\:bg-primary-500, html.dark .hover\:bg-primary-600\/80:hover { background-color: #ededed !important; color: #0a0a0a !important; }

/* Text stays black; only the active state is lavender. */
.crm-link { color: var(--color-font-important-light); font-weight: 500; }
html.dark .crm-link { color: var(--color-font-important-dark); }
.crm-link:hover { text-decoration: underline; }
a.active.font-semibold { background-color: var(--color-primary-100) !important; color: var(--color-primary-700) !important; }
html.dark a.active.font-semibold { background-color: color-mix(in oklch, var(--color-primary-500) 18%, transparent) !important; color: var(--color-primary-300) !important; }

/* All-white app in light mode (Unfold default sidebar is light gray). */
html:not(.dark) body, html:not(.dark) #nav-sidebar, html:not(.dark) #nav-sidebar-inner { background-color: #fff !important; }
html:not(.dark) #nav-sidebar { border-right: 1px solid var(--color-base-200); }