/* Fulltastic Omni-channel Branding Override v2 */
/* Replace Chatwoot blue primary (#1f93ff / #2781f6 = 39 129 246) with Fulltastic red (#cb2233 = 203 34 51) */

:root {
  --blue-1: 255 252 253 !important;
  --blue-2: 255 247 248 !important;
  --blue-3: 254 234 237 !important;
  --blue-4: 255 220 225 !important;
  --blue-5: 255 206 214 !important;
  --blue-6: 248 191 200 !important;
  --blue-7: 239 172 184 !important;
  --blue-8: 229 146 163 !important;
  --blue-9: 203 34 51 !important;
  --blue-10: 188 28 44 !important;
  --blue-11: 169 27 42 !important;
  --blue-12: 100 14 25 !important;
  
  --iris-1: 255 252 253 !important;
  --iris-2: 255 245 247 !important;
  --iris-3: 254 229 233 !important;
  --iris-4: 255 213 219 !important;
  --iris-5: 248 196 204 !important;
  --iris-6: 239 176 187 !important;
  --iris-7: 226 153 166 !important;
  --iris-8: 214 127 143 !important;
  --iris-9: 203 34 51 !important;
  --iris-10: 185 29 45 !important;
  --iris-11: 165 25 40 !important;
  --iris-12: 80 12 22 !important;
  
  --solid-blue: 255 220 225 !important;
  --solid-blue-2: 255 248 249 !important;
  --solid-iris: 255 213 219 !important;
  --border-blue-strong: 130 16 33 !important;
}

/* !important cannot be used on custom properties themselves - re-declare without it */
/* The above !important won't work on custom properties. Instead override the actual render */

/* === OVERRIDE ALL HARDCODED BLUE/IRIS HEX VALUES === */

/* Hardcoded #2781f6 (= rgb(39,129,246) = their blue-9) → replace with #cb2233 */
/* Hardcoded #1f93ff (= rgb(31,147,255)) → replace with #cb2233 */
/* Hardcoded #5b5bd6 (= their iris-9) → replace with #cb2233 */

/* Primary buttons and CTAs - generic catch-all for blue backgrounds */
button[class*="n-iris-9"],
button[class*="n-blue-9"],
a[class*="n-iris-9"],
a[class*="n-blue-9"],
.fw-button.n-iris-9,
.fw-button.n-blue-9,
.fw-button--iris,
.bg-n-iris-9,
.bg-n-blue-9,
.\!bg-n-iris-9,
.\!bg-n-blue-9 {
  background-color: #cb2233 !important;
}

/* Hover states */
.hover\:bg-n-iris-9:hover,
.hover\:bg-n-blue-9:hover,
button:hover[class*="n-iris-9"],
button:hover[class*="n-blue-9"] {
  background-color: #bc1f2e !important;
}

/* Text colors */
.text-n-iris-9,
.text-n-blue-9,
.\!text-n-iris-9,
.\!text-n-blue-9 {
  color: #cb2233 !important;
}

/* Border colors */
.border-n-iris-9,
.border-n-blue-9 {
  border-color: #cb2233 !important;
}

/* Login/Auth pages - red background */
.auth-hero,
.login-container [class*="bg-n-iris"],
[class*="onboarding"] [class*="bg-n-iris"],
[class*="auth"] [class*="bg-n-iris-9"],
[class*="auth"] [class*="bg-n-blue-9"] {
  background-color: #cb2233 !important;
}

/* Banners with primary blue */
.banner.primary[data-v-227ca4d0] {
  background-color: #cb2233 !important;
}

/* Notification indicators */
.notification--unread-indicator[data-v-577256f2] {
  background-color: #cb2233 !important;
}

/* Accent color */
.accent-n-blue-9 {
  accent-color: #cb2233 !important;
}

/* Fill color (SVGs) */
.fill-n-blue-9 {
  fill: #cb2233 !important;
}

/* Sidebar active item */
.sidebar-item.active,
[class*="active"] [class*="bg-n-iris"],
[class*="active"] [class*="bg-n-blue"] {
  background-color: #cb2233 !important;
}

/* Ring/focus */
[class*="ring-n-iris"],
[class*="ring-n-blue"] {
  --tw-ring-color: #cb2233 !important;
}

/* Catch-all: any element with hardcoded blue background that uses @supports fallback */
[style*="background-color: rgb(39 129 246"],
[style*="background-color:rgb(39 129 246"],
[style*="background-color: #2781f6"],
[style*="background-color:#2781f6"] {
  background-color: #cb2233 !important;
}