/* SmartBizi dark mode. Brand colors: Navy #0E1B3D, Bizi Blue #2760EE, Signal Lime #C6F432, Mist #F4F6FB.
   Every rule starts with html.dark so it only applies when the moon toggle is on, and so it beats the Tailwind classes it remaps. */

html.dark { color-scheme: dark; }

/* Page and surfaces */
html.dark body { background-color: #0A1330; color: #E2E8F5; }
html.dark body.bg-slate-50, html.dark body.bg-slate-100 { background-color: #0A1330; }
html.dark .bg-white { background-color: #0E1B3D; }
html.dark .bg-slate-50 { background-color: rgba(255, 255, 255, 0.04); }
html.dark body.bg-slate-50 { background-color: #0A1330; }
html.dark .bg-slate-100 { background-color: rgba(255, 255, 255, 0.08); }
html.dark .bg-slate-200 { background-color: rgba(255, 255, 255, 0.14); }
html.dark .bg-slate-300 { background-color: #3B4A72; }
html.dark .bg-slate-400 { background-color: #6B7AA3; }
html.dark .bg-slate-700, html.dark .bg-slate-800 { background-color: #2E4070; }
html.dark .bg-slate-900 { background-color: #2760EE; }
html.dark .hover\:bg-slate-800:hover { background-color: #1D4BC4; }
/* Only the white knob of a switch stays white, not every rounded white pill */
html.dark .absolute.rounded-full.bg-white { background-color: #ffffff; }

/* Borders and dividers */
html.dark *, html.dark ::before, html.dark ::after { border-color: rgba(255, 255, 255, 0.1); }
html.dark .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255, 255, 255, 0.08); }
html.dark .border-transparent { border-color: transparent; }
html.dark .border-indigo-600, html.dark .peer-checked\:border-indigo-600:checked ~ * { border-color: #2760EE; }
html.dark .border-indigo-500 { border-color: #3F6DF2; }
html.dark .border-sky-400 { border-color: #38bdf8; }
html.dark .border-cyan-500 { border-color: #06b6d4; }
html.dark .border-violet-500 { border-color: #8b5cf6; }
html.dark .border-amber-400 { border-color: #fbbf24; }
html.dark .border-emerald-500 { border-color: #10b981; }
html.dark .border-rose-400 { border-color: #fb7185; }
html.dark .border-slate-400 { border-color: #94a3b8; }
html.dark .hover\:border-slate-300:hover { border-color: rgba(255, 255, 255, 0.25); }
html.dark .hover\:border-indigo-500:hover { border-color: #3F6DF2; }
html.dark .ring-indigo-100 { --tw-ring-color: rgba(39, 96, 238, 0.35); }

/* Text */
html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700 { color: #EDF1FB; }
html.dark .text-slate-600 { color: #C3CCE0; }
html.dark .text-slate-500 { color: #9AA6C4; }
html.dark .text-slate-400 { color: #7783A3; }
html.dark .text-slate-300 { color: #5E6A8A; }
html.dark .hover\:text-slate-900:hover, html.dark .hover\:text-slate-800:hover { color: #ffffff; }
html.dark .text-indigo-600, html.dark .text-indigo-700, html.dark .text-indigo-900, html.dark .hover\:text-indigo-600:hover { color: #8FB0FF; }
html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-900 { color: #4ade80; }
html.dark .text-rose-500, html.dark .text-rose-600, html.dark .text-rose-700, html.dark .text-rose-800, html.dark .hover\:text-rose-600:hover { color: #fb7185; }
html.dark .text-amber-500, html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900, html.dark .text-amber-950 { color: #fcd34d; }
html.dark .text-sky-600, html.dark .text-sky-700 { color: #7dd3fc; }
html.dark .text-violet-600, html.dark .text-violet-700 { color: #c4b5fd; }
html.dark .text-cyan-600 { color: #67e8f9; }
html.dark .text-white { color: #ffffff; }

/* Soft colored backgrounds used by badges, icons and banners */
html.dark .bg-indigo-50, html.dark .hover\:bg-indigo-100:hover { background-color: rgba(39, 96, 238, 0.22); }
html.dark .bg-emerald-50, html.dark .hover\:bg-emerald-100:hover { background-color: rgba(34, 197, 94, 0.15); }
html.dark .bg-rose-50, html.dark .bg-rose-100, html.dark .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, 0.15); }
html.dark .bg-amber-50, html.dark .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, 0.15); }
html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, 0.16); }
html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.2); }
html.dark .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.16); }

/* Hover surfaces */
html.dark .hover\:bg-slate-50:hover { background-color: rgba(255, 255, 255, 0.06); }
html.dark .hover\:bg-slate-100:hover { background-color: rgba(255, 255, 255, 0.09); }
html.dark .hover\:bg-slate-200:hover { background-color: rgba(255, 255, 255, 0.14); }

/* The active menu item uses Signal Lime on Navy */
html.dark aside .bg-indigo-50 { background-color: rgba(198, 244, 50, 0.12); }
html.dark aside .text-indigo-700 { color: #C6F432; }

/* Forms */
html.dark input, html.dark select, html.dark textarea { color: #EDF1FB; }
html.dark input.bg-white, html.dark select.bg-white, html.dark textarea.bg-white { background-color: #0A1330; }
html.dark input.bg-slate-50, html.dark input.focus\:bg-white:focus { background-color: rgba(255, 255, 255, 0.05); }
html.dark ::placeholder { color: #7783A3; opacity: 1; }
html.dark .focus\:border-indigo-500:focus { border-color: #3F6DF2; }
html.dark input[type="file"]::file-selector-button { background-color: rgba(255, 255, 255, 0.1); color: #EDF1FB; }

/* Links and small details */
html.dark a.hover\:underline { color: inherit; }
html.dark a.text-indigo-600, html.dark a.text-indigo-700 { color: #8FB0FF; }
html.dark hr { border-color: rgba(255, 255, 255, 0.1); }
html.dark ::-webkit-scrollbar-thumb { background-color: #2E4070; }

/* ApexCharts SVG text and tooltips follow the theme through charts.js, this only tidies the tooltip box */
html.dark .apexcharts-tooltip { background: #0E1B3D; border-color: rgba(255, 255, 255, 0.15); color: #EDF1FB; }
html.dark .apexcharts-tooltip-title { background: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.1); }

/* Quill editor in the Desk forms */
html.dark .ql-toolbar.ql-snow, html.dark .ql-container.ql-snow { border-color: #1f2b4d; }
html.dark .ql-toolbar.ql-snow { background: #0E1B3D; }
html.dark .ql-container.ql-snow { background: #0a1330; color: #e2e8f0; }
html.dark .ql-editor.ql-blank::before { color: #64748b; }
html.dark .ql-snow .ql-stroke { stroke: #cbd5e1; }
html.dark .ql-snow .ql-fill { fill: #cbd5e1; }
html.dark .ql-snow .ql-picker, html.dark .ql-snow .ql-picker-label { color: #cbd5e1; }
html.dark .ql-snow .ql-picker-options { background: #0E1B3D; border-color: #1f2b4d; }