/* CRM North - colour override for the Vue agent app. GENERATED - do not edit.
   Regenerate:  pwsh scripts/gen-brand-css.ps1     (see README)

   Loaded from the overridden layouts/vueapp.html.erb AFTER the Vite tags, so it
   wins on document order at equal specificity.

   Two mechanisms, because the bundle uses two:
     1. :root / .dark ramps - covers every rule going through var(--blue-N)
     2. explicit selectors  - covers rules with the colour compiled in. Tailwind
        resolves n-brand to a literal at build time; --n-brand does not exist at
        runtime, so there is nothing to override.

   The .dark ramp is NOT the light ramp. Chatwoot uses Radix-style ramps where
   dark inverts (step 1 near-black, step 12 near-white). Only step 9 - the brand
   - is shared. A single ':root, .dark' override destroys dark mode.

   Selectors are emitted verbatim; colours are replaced only inside declaration
   blocks. .bg-\[\#2781F6\] is a CLASS NAME the JS emits, not a colour.

   Brand #2F4BB3. Chatwoot's were #2781F6 and #1F93FF.
*/

:root {
  --blue-1: 251 251 253;
  --blue-2: 246 247 252;
  --blue-3: 236 239 248;
  --blue-4: 224 228 244;
  --blue-5: 207 214 238;
  --blue-6: 186 196 230;
  --blue-7: 157 170 219;
  --blue-8: 118 136 205;
  --blue-9: 47 75 179;
  --blue-10: 43 69 166;
  --blue-11: 40 64 154;
  --blue-12: 23 40 98;
}

.dark {
  --blue-1: 13 16 26;
  --blue-2: 15 20 35;
  --blue-3: 20 28 57;
  --blue-4: 23 34 72;
  --blue-5: 27 40 87;
  --blue-6: 31 47 106;
  --blue-7: 35 54 125;
  --blue-8: 41 64 151;
  --blue-9: 47 75 179;
  --blue-10: 64 89 185;
  --blue-11: 161 174 221;
  --blue-12: 218 223 241;
}

/* --- utilities with the colour compiled in --- */

.border-n-blue-9\/30{border-color:#2F4BB34d;border-color:rgb(var(--blue-9) / .3)}
.border-n-blue-border{border-color:#2F4BB380;border-color:rgba(var(--border-blue))}
.border-n-brand{--tw-border-opacity: 1;border-color:#2F4BB3}
.border-n-brand{border-color:rgb(47 75 179 / var(--tw-border-opacity, 1))}
.border-t-n-brand{--tw-border-opacity: 1;border-top-color:#2F4BB3}
.border-t-n-brand{border-top-color:rgb(47 75 179 / var(--tw-border-opacity, 1))}
.bg-\[\#2781F6\]{--tw-bg-opacity: 1;background-color:#2F4BB3}
.bg-\[\#2781F6\]{background-color:rgb(47 75 179 / var(--tw-bg-opacity, 1))}
.bg-n-brand{--tw-bg-opacity: 1;background-color:#2F4BB3}
.bg-n-brand{background-color:rgb(47 75 179 / var(--tw-bg-opacity, 1))}
.bg-n-brand\/10{background-color:#2F4BB31a}
.bg-n-brand\/5{background-color:#2F4BB30d}
.fill-n-blue-9{fill:#2F4BB3;fill:rgb(var(--blue-9) / 1)}
.text-n-blue-9{--tw-text-opacity: 1;color:#2F4BB3;color:rgb(var(--blue-9) / var(--tw-text-opacity, 1))}
.text-n-brand{--tw-text-opacity: 1;color:#2F4BB3}
.text-n-brand{color:rgb(47 75 179 / var(--tw-text-opacity, 1))}
.accent-n-blue-9{accent-color:rgb(47 75 179 / 1);accent-color:rgb(var(--blue-9) / 1)}
.\!shadow-\[var\(--widget-color\,\#2781f6\)\]{--tw-shadow-color: var(--widget-color,#2F4BB3) !important;--tw-shadow: var(--tw-shadow-colored) !important}
.\!outline-n-brand{outline-color:#2F4BB3!important}
.outline-n-blue-9{outline-color:#2F4BB3;outline-color:rgb(var(--blue-9) / 1)}
.outline-n-brand{outline-color:#2F4BB3}
.ring-n-brand{--tw-ring-opacity: 1;--tw-ring-color: rgb(47 75 179 / var(--tw-ring-opacity, 1))}
.text-link{font-weight:500;--tw-text-opacity: 1;color:#2F4BB3}
.text-link{color:rgb(47 75 179 / var(--tw-text-opacity, 1))}
.before\:\!border-t-n-brand:before{content:var(--tw-content);--tw-border-opacity: 1 !important;border-top-color:#2F4BB3!important}
.before\:\!border-t-n-brand:before{border-top-color:rgb(47 75 179 / var(--tw-border-opacity, 1))!important}
.before\:bg-n-brand:before{content:var(--tw-content);--tw-bg-opacity: 1;background-color:#2F4BB3}
.before\:bg-n-brand:before{background-color:rgb(47 75 179 / var(--tw-bg-opacity, 1))}
.after\:bg-n-brand:after{content:var(--tw-content);--tw-bg-opacity: 1;background-color:#2F4BB3}
.after\:bg-n-brand:after{background-color:rgb(47 75 179 / var(--tw-bg-opacity, 1))}
.checked\:border-n-brand:checked{--tw-border-opacity: 1;border-color:#2F4BB3}
.checked\:border-n-brand:checked{border-color:rgb(47 75 179 / var(--tw-border-opacity, 1))}
.checked\:bg-n-brand:checked{--tw-bg-opacity: 1;background-color:#2F4BB3}
.checked\:bg-n-brand:checked{background-color:rgb(47 75 179 / var(--tw-bg-opacity, 1))}
.indeterminate\:border-n-brand:indeterminate{--tw-border-opacity: 1;border-color:#2F4BB3}
.indeterminate\:border-n-brand:indeterminate{border-color:rgb(47 75 179 / var(--tw-border-opacity, 1))}
.indeterminate\:bg-n-brand:indeterminate{--tw-bg-opacity: 1;background-color:#2F4BB3}
.indeterminate\:bg-n-brand:indeterminate{background-color:rgb(47 75 179 / var(--tw-bg-opacity, 1))}
.focus-within\:outline-n-brand:focus-within{outline-color:#2F4BB3}
.focus-within\:ring-n-brand:focus-within{--tw-ring-opacity: 1;--tw-ring-color: rgb(47 75 179 / var(--tw-ring-opacity, 1))}
.hover\:bg-n-brand\/10:hover{background-color:#2F4BB31a}
.hover\:bg-n-brand\/80:hover{background-color:#2F4BB3cc}
.hover\:text-n-brand:hover{--tw-text-opacity: 1;color:#2F4BB3}
.hover\:text-n-brand:hover{color:rgb(47 75 179 / var(--tw-text-opacity, 1))}
.focus\:border-n-brand:focus{--tw-border-opacity: 1;border-color:#2F4BB3}
.focus\:border-n-brand:focus{border-color:rgb(47 75 179 / var(--tw-border-opacity, 1))}
.focus\:outline-n-blue-9:focus{outline-color:#2F4BB3;outline-color:rgb(var(--blue-9) / 1)}
.focus\:outline-n-brand:focus{outline-color:#2F4BB3}
.focus\:ring-n-brand:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(47 75 179 / var(--tw-ring-opacity, 1))}
.focus-visible\:bg-n-brand\/20:focus-visible{background-color:#2F4BB333}
.focus-visible\:ring-n-brand:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(47 75 179 / var(--tw-ring-opacity, 1))}
.hover\:enabled\:border-n-blue-9:enabled:hover{--tw-border-opacity: 1;border-color:#2F4BB3;border-color:rgb(var(--blue-9) / var(--tw-border-opacity, 1))}
.hover\:enabled\:bg-n-blue-border:enabled:hover{background-color:#2F4BB380;background-color:rgba(var(--border-blue))}
.hover\:enabled\:bg-n-brand\/20:enabled:hover{background-color:#2F4BB333}
.group:focus-within .group-focus-within\:text-n-brand{--tw-text-opacity: 1;color:#2F4BB3}
.group:focus-within .group-focus-within\:text-n-brand{color:rgb(47 75 179 / var(--tw-text-opacity, 1))}
.group:hover .group-hover\:bg-n-brand{--tw-bg-opacity: 1;background-color:#2F4BB3}
.group:hover .group-hover\:bg-n-brand{background-color:rgb(47 75 179 / var(--tw-bg-opacity, 1))}
.group:hover .group-hover\:text-n-brand{--tw-text-opacity: 1;color:#2F4BB3}
.group:hover .group-hover\:text-n-brand{color:rgb(47 75 179 / var(--tw-text-opacity, 1))}
.has-\[\:focus\]\:outline-n-brand:has(:focus){outline-color:#2F4BB3}
.dark\:border-n-brand:is(.dark *){--tw-border-opacity: 1;border-color:#2F4BB3}
.dark\:border-n-brand:is(.dark *){border-color:rgb(47 75 179 / var(--tw-border-opacity, 1))}
.dark\:bg-n-brand\/10:is(.dark *){background-color:#2F4BB31a}
.dark\:\!outline-n-brand:is(.dark *){outline-color:#2F4BB3!important}
.dark\:ring-n-brand:is(.dark *){--tw-ring-opacity: 1;--tw-ring-color: rgb(47 75 179 / var(--tw-ring-opacity, 1))}
.dark\:checked\:border-n-brand:checked:is(.dark *){--tw-border-opacity: 1;border-color:#2F4BB3}
.dark\:checked\:border-n-brand:checked:is(.dark *){border-color:rgb(47 75 179 / var(--tw-border-opacity, 1))}
.dark\:checked\:bg-n-brand:checked:is(.dark *){--tw-bg-opacity: 1;background-color:#2F4BB3}
.dark\:checked\:bg-n-brand:checked:is(.dark *){background-color:rgb(47 75 179 / var(--tw-bg-opacity, 1))}
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *){outline-color:#2F4BB3}
.dark\:hover\:text-n-brand:hover:is(.dark *){--tw-text-opacity: 1;color:#2F4BB3}
.dark\:hover\:text-n-brand:hover:is(.dark *){color:rgb(47 75 179 / var(--tw-text-opacity, 1))}
.dark\:focus\:outline-n-brand:focus:is(.dark *){outline-color:#2F4BB3}
.dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *){outline-color:#2F4BB3}