/* ================================ ARTISOFT FLEET BRAND THEMES ================================ */ /* Artisoft - Default (Orange) */ :root, .brand-default { --artisoft-main-50: 255 249 236; --artisoft-main-100: 255 243 211; --artisoft-main-200: 255 226 165; --artisoft-main-300: 255 205 109; --artisoft-main-400: 255 171 50; --artisoft-main-500: 255 144 10; --artisoft-main-600: 251 118 0; --artisoft-main-700: 204 87 2; --artisoft-main-800: 161 67 11; --artisoft-main-900: 130 57 12; --artisoft-main-950: 70 26 4; } /* GM - Purple */ .brand-gm { --artisoft-main-50: 242 232 252; --artisoft-main-100: 229 210 249; --artisoft-main-200: 204 164 244; --artisoft-main-300: 178 119 238; --artisoft-main-400: 153 73 233; --artisoft-main-500: 127 28 227; --artisoft-main-600: 102 22 182; --artisoft-main-700: 76 17 136; --artisoft-main-800: 51 11 91; --artisoft-main-900: 25 6 45; --artisoft-main-950: 18 4 32; } /* Sunoil - Blue */ .brand-sunoil { --artisoft-main-50: 238 240 255; --artisoft-main-100: 217 222 255; --artisoft-main-200: 182 192 255; --artisoft-main-300: 141 160 255; --artisoft-main-400: 98 131 255; --artisoft-main-500: 17 98 255; --artisoft-main-600: 0 75 204; --artisoft-main-700: 0 57 160; --artisoft-main-800: 0 37 112; --artisoft-main-900: 0 21 72; --artisoft-main-950: 0 13 53; } /* Sunoco - Blue */ .brand-sunoco { --artisoft-main-50: 230 238 254; --artisoft-main-100: 209 224 253; --artisoft-main-200: 159 195 251; --artisoft-main-300: 96 166 249; --artisoft-main-400: 40 138 224; --artisoft-main-500: 30 109 180; --artisoft-main-600: 20 82 137; --artisoft-main-700: 13 61 104; --artisoft-main-800: 7 43 76; --artisoft-main-900: 3 24 46; --artisoft-main-950: 1 15 31; } /* ================================ TOGGLE SWITCH Self-contained (doesn't rely on Tailwind utilities being present in the loaded build). Matches the switch used in the Artisoft licensing project. ================================ */ .af-toggle { position: relative; display: inline-flex; height: 1.5rem; width: 2.75rem; flex-shrink: 0; cursor: pointer; border-radius: 9999px; border: 2px solid transparent; background-color: #e5e7eb; transition: background-color 0.2s ease-in-out; padding: 0; } .af-toggle.on { background-color: rgb(var(--artisoft-main-600)); } .af-toggle .knob { pointer-events: none; display: inline-block; height: 1.25rem; width: 1.25rem; transform: translateX(0); border-radius: 9999px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); transition: transform 0.2s ease-in-out; } .af-toggle.on .knob { transform: translateX(1.25rem); } /* ================================ DARK MODE Applied when has the `dark` class (per-user preference). The app markup uses fixed light utilities, so dark mode is a set of overrides scoped under `.dark`. ================================ */ /* Per-brand dark accent (slightly brightened so buttons/links pop on dark surfaces). */ .dark.brand-default { --artisoft-main-400: 255 186 92; --artisoft-main-500: 255 171 50; --artisoft-main-600: 255 144 10; --artisoft-main-700: 251 118 0; } .dark.brand-gm { --artisoft-main-400: 178 119 238; --artisoft-main-500: 153 73 233; --artisoft-main-600: 127 28 227; --artisoft-main-700: 102 22 182; } .dark.brand-sunoil { --artisoft-main-400: 141 160 255; --artisoft-main-500: 98 131 255; --artisoft-main-600: 17 98 255; --artisoft-main-700: 0 75 204; } .dark.brand-sunoco { --artisoft-main-400: 96 166 249; --artisoft-main-500: 40 138 224; --artisoft-main-600: 30 109 180; --artisoft-main-700: 20 82 137; } /* Surfaces */ .dark body, body.dark { background-color: #0f172a; color: #e2e8f0; } .dark .bg-white { background-color: #1e293b !important; } .dark .bg-gray-50 { background-color: #111827 !important; } .dark .bg-gray-100 { background-color: #1f2937 !important; } .dark .bg-gray-200 { background-color: #334155 !important; } /* Hover surfaces */ .dark .hover\:bg-gray-50:hover { background-color: #1f2937 !important; } .dark .hover\:bg-gray-100:hover { background-color: #263244 !important; } /* Text */ .dark .text-gray-900 { color: #f1f5f9 !important; } .dark .text-gray-800 { color: #e2e8f0 !important; } .dark .text-gray-700 { color: #cbd5e1 !important; } .dark .text-gray-600 { color: #94a3b8 !important; } .dark .text-gray-500 { color: #94a3b8 !important; } .dark .text-gray-400 { color: #64748b !important; } /* Icons (sidebar/nav use stroke-gray-900/800) — lighten when idle so they're visible on dark */ .dark .stroke-gray-900, .dark .stroke-gray-800 { stroke: #cbd5e1 !important; } /* Preserve the accent colour on hover for nav text and icons (higher-specificity :hover rule). */ .dark .hover\:text-artisoft-main-600:hover { color: rgb(var(--artisoft-main-500)) !important; } .dark .hover\:stroke-artisoft-main-600:hover { stroke: rgb(var(--artisoft-main-500)) !important; } /* Borders / dividers */ .dark .border-gray-200 { border-color: #334155 !important; } .dark .border-gray-300 { border-color: #475569 !important; } .dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; } /* Form controls */ .dark input, .dark select, .dark textarea { background-color: #0f172a !important; border-color: #475569 !important; color: #e2e8f0 !important; } .dark ::placeholder { color: #64748b !important; } /* Custom Scrollbar */ .container-scroll::-webkit-scrollbar { height: 20px; width: 20px; } .container-scroll::-webkit-scrollbar-track { background-color: transparent; } .container-scroll::-webkit-scrollbar-thumb { background-color: #d6dee1; border-radius: 20px; border: 6px solid transparent; background-clip: content-box; } .container-scroll::-webkit-scrollbar-thumb:hover { background-color: #a8bbbf; }