/* BeChat Custom Theme v4 — Rosa #E04273, creme sidebar, Noite Quente dark */
/* Baseado nos mockups "BeChat — Tema Be My Guest" (Maio 2026) */

/* ================================================================
   LIGHT THEME — "Hospitalidade"
   Branco + creme quente, rosa primário
   ================================================================ */
:root {
  /* Sidebar/page background: creme quente */
  --background-color: 247 243 237 !important;

  /* Active/hover overlay: rosa tint (mais visível) */
  --alpha-2: 224, 66, 115, 0.14 !important;
  --alpha-1: 224, 200, 186, 0.18 !important;

  /* Surfaces: branco quente */
  --surface-1: 255 253 250 !important;
  --surface-2: 255 255 253 !important;
  --card-color: 255 253 250 !important;

  /* Borders: quentes, sem cinza azulado */
  --border-weak: 236 230 222 !important;
  --border-strong: 224 218 208 !important;
  --border-container: 232 226 216 !important;

  /* Label bg quente */
  --label-background: 244 240 234 !important;
}

/* ================================================================
   DARK THEME — "Noite Quente" (Recomendado)
   Preto-quente com subtom rosa, sem cinza-azulado
   ================================================================ */
.dark {
  /* Background principal: preto com subtom rosa/roxo */
  --background-color: 22 16 22 !important;

  /* Active overlay: rosa */
  --alpha-2: 224, 66, 115, 0.16 !important;
  --alpha-1: 224, 66, 115, 0.08 !important;

  /* Surfaces: preto quente */
  --surface-1: 16 12 16 !important;
  --surface-2: 18 14 19 !important;
  --surface-active: 48 36 46 !important;
  --card-color: 24 18 24 !important;

  /* Slate dark: tons quentes (rosa undertone em vez de azul) */
  --slate-1: 16 12 16 !important;
  --slate-2: 22 18 22 !important;
  --slate-3: 32 26 32 !important;
  --slate-4: 40 33 40 !important;
  --slate-5: 48 40 48 !important;
  --slate-6: 58 48 58 !important;
  --slate-7: 72 60 72 !important;
  --slate-8: 96 82 96 !important;
  --slate-9: 110 98 110 !important;
  --slate-10: 124 112 124 !important;
  --slate-11: 182 172 182 !important;
  --slate-12: 240 236 240 !important;

  /* Borders: quentes */
  --border-weak: 36 28 36 !important;
  --border-strong: 50 40 50 !important;
  --border-container: 255, 255, 255, 0 !important;

  /* Solid surfaces: quentes */
  --solid-1: 20 16 20 !important;
  --solid-2: 28 22 28 !important;
  --solid-3: 42 34 42 !important;
  --solid-active: 52 42 52 !important;

  /* Botões */
  --button-color: 40 32 40 !important;
  --button-hover-color: 0, 0, 0, 0.18 !important;

  /* Labels */
  --label-background: 34 26 34 !important;

  /* Input */
  --background-input-box: 255, 255, 255, 0.03 !important;

  /* Overlay */
  --overlay: 0, 0, 0, 0.5 !important;
}

/* ================================================================
   CORES PRIMÁRIAS — woot = rosa #E04273
   Substitui o azul padrão do Chatwoot
   ================================================================ */

/* Background shades */
.bg-woot-25  { background-color: #fef0f3 !important; }
.bg-woot-50  { background-color: #fde0e8 !important; }
.bg-woot-75  { background-color: #fbd0dd !important; }
.bg-woot-100 { background-color: #f8b8cb !important; }
.bg-woot-200 { background-color: #f297b2 !important; }
.bg-woot-300 { background-color: #eb7098 !important; }
.bg-woot-400 { background-color: #e5587f !important; }
.bg-woot-500 { background-color: #E04273 !important; }
.bg-woot-600 { background-color: #c93665 !important; }
.bg-woot-700 { background-color: #a82d55 !important; }
.bg-woot-800 { background-color: #6b1a35 !important; }
.bg-woot-900 { background-color: #3a0e1d !important; }

/* Text shades */
.text-woot-50  { color: #fde0e8 !important; }
.text-woot-100 { color: #f8b8cb !important; }
.text-woot-200 { color: #f297b2 !important; }
.text-woot-300 { color: #eb7098 !important; }
.text-woot-400 { color: #e5587f !important; }
.text-woot-500 { color: #E04273 !important; }
.text-woot-600 { color: #c93665 !important; }
.text-woot-700 { color: #a82d55 !important; }

/* Border shades */
.border-woot-100 { border-color: #f8b8cb !important; }
.border-woot-200 { border-color: #f297b2 !important; }
.border-woot-500 { border-color: #E04273 !important; }
.border-woot-600 { border-color: #c93665 !important; }

/* Ring */
.ring-woot-200 { --tw-ring-color: #f297b2 !important; }
.ring-woot-500 { --tw-ring-color: #E04273 !important; }

/* Hover states */
.hover\:bg-woot-25:hover  { background-color: #fef0f3 !important; }
.hover\:bg-woot-50:hover  { background-color: #fde0e8 !important; }
.hover\:bg-woot-500:hover { background-color: #E04273 !important; }
.hover\:bg-woot-600:hover { background-color: #c93665 !important; }
.hover\:bg-woot-700:hover { background-color: #a82d55 !important; }
.hover\:text-woot-500:hover { color: #E04273 !important; }
.hover\:text-woot-600:hover { color: #c93665 !important; }
.hover\:border-woot-500:hover { border-color: #E04273 !important; }

/* Focus states */
.focus\:border-woot-500:focus { border-color: #E04273 !important; }
.focus\:ring-woot-200:focus { --tw-ring-color: #f297b2 !important; }

/* Gradient */
.from-woot-500 { --tw-gradient-from: #E04273 !important; }
.to-woot-600   { --tw-gradient-to: #c93665 !important; }

/* ================================================================
   BRAND COLOR — substitui o azul #2781F6 por rosa
   O n-brand é hardcoded no tailwind config
   ================================================================ */
.bg-n-brand {
  background-color: #E04273 !important;
}
.text-n-brand {
  color: #E04273 !important;
}
.border-n-brand {
  border-color: #E04273 !important;
}

/* ================================================================
   ACTIVE SIDEBAR ITEMS — rosa text + rosa bg

   Bug fix v4: classes "active" e "text-n-slate-12" estão no MESMO
   elemento, não em parent/child. Usar seletores sem espaço.
   ================================================================ */

/* LIGHT: active items get rosa text */
:root:not(.dark) .active.text-n-slate-12,
:root:not(.dark) .active.text-n-slate-11,
:root:not(.dark) .bg-n-alpha-2.active {
  color: #E04273 !important;
}

/* LIGHT: parent group with active child also gets rosa text */
:root:not(.dark) .font-medium.text-n-slate-12[draggable="false"]:not(.bg-n-alpha-2) {
  color: #c93665 !important;
}

/* DARK: active items get rosa claro */
.dark .active.text-n-slate-12,
.dark .active.text-n-slate-11,
.dark .bg-n-alpha-2.active {
  color: #f297b2 !important;
}

/* DARK: parent group with active child */
.dark .font-medium.text-n-slate-12[draggable="false"]:not(.bg-n-alpha-2) {
  color: #eb7098 !important;
}

/* Active icon inside sidebar also rosa */
:root:not(.dark) .active .size-4 {
  color: #E04273 !important;
}
.dark .active .size-4 {
  color: #f297b2 !important;
}

/* ================================================================
   MISC OVERRIDES
   ================================================================ */

/* Blue buttons/badges → rosa */
.bg-n-blue-9 { background-color: #E04273 !important; }
.bg-n-blue-10 { background-color: #c93665 !important; }
.text-n-blue-11 { color: #E04273 !important; }
.dark .text-n-blue-11 { color: #f297b2 !important; }

/* Unread indicator dot */
.bg-n-ruby-9 { background-color: #E04273 !important; }

/* Focus ring on inputs */
*:focus-visible {
  --tw-ring-color: rgba(224, 66, 115, 0.4) !important;
}

/* Scrollbar warm (dark theme) */
.dark ::-webkit-scrollbar-thumb {
  background-color: rgba(224, 66, 115, 0.15) !important;
}
.dark ::-webkit-scrollbar-track {
  background-color: rgba(22, 16, 22, 0.5) !important;
}