/* Smarthub — tema "WhatsApp" (verde) para o Chatwoot, sem fork.
 * O Chatwoot compila a cor de marca como HEX FIXO em classes (n-brand, woot-*),
 * não como variável — então sobrescrevo as classes com !important.
 * Verde WhatsApp: #25d366 (solid), #1da851 (hover), #128c7e (escuro). */

:root {
  --blue-9: 37 211 102 !important;   /* usos via var(--blue-9) (n-blue-9) */
  --blue-10: 29 168 81 !important;
  --blue-11: 21 128 81 !important;
}

/* ---- Sistema novo: n-brand (cor de marca fixa) ---- */
.bg-n-brand,
.hover\:bg-n-brand:hover,
.data-\[active\=true\]\:bg-n-brand[data-active="true"],
.group:hover .group-hover\:bg-n-brand {
  background-color: rgb(37 211 102 / var(--tw-bg-opacity, 1)) !important;
}
.hover\:bg-n-brand:hover { background-color: rgb(29 168 81 / var(--tw-bg-opacity, 1)) !important; }
.bg-n-brand\/10 { background-color: rgb(37 211 102 / 0.1) !important; }
.bg-n-brand\/20 { background-color: rgb(37 211 102 / 0.2) !important; }
.text-n-brand, .hover\:text-n-brand:hover { color: rgb(37 211 102 / var(--tw-text-opacity, 1)) !important; }
.border-n-brand, .hover\:border-n-brand:hover { border-color: rgb(37 211 102 / var(--tw-border-opacity, 1)) !important; }
.ring-n-brand, .focus\:ring-n-brand:focus, .focus-visible\:ring-n-brand:focus-visible { --tw-ring-color: rgb(37 211 102 / var(--tw-ring-opacity, 1)) !important; }
.fill-n-brand { fill: #25d366 !important; }
.stroke-n-brand { stroke: #25d366 !important; }
.outline-n-brand, .focus\:outline-n-brand:focus { outline-color: #25d366 !important; }

/* n-blue-9 (tem fallback hex fixo antes do var) — força verde */
.bg-n-blue-9 { background-color: rgb(37 211 102 / var(--tw-bg-opacity, 1)) !important; }
.text-n-blue-9 { color: rgb(37 211 102 / var(--tw-text-opacity, 1)) !important; }
.fill-n-blue-9 { fill: #25d366 !important; }

/* ---- Legado woot-* (hex fixo) ---- */
.bg-woot-500, .bg-woot-600, .bg-woot-700,
.hover\:bg-woot-600:hover, .hover\:bg-woot-700:hover,
.dark\:bg-woot-500, .dark\:bg-woot-600 { background-color: #25d366 !important; }
.bg-woot-800, .bg-woot-900 { background-color: #128c7e !important; }
.bg-woot-25, .bg-woot-50, .bg-woot-75 { background-color: #e9faf0 !important; }
.bg-woot-100, .bg-woot-200, .bg-woot-300 { background-color: #d9fdd3 !important; }
.text-woot-500, .text-woot-600, .text-woot-700, .hover\:text-woot-600:hover { color: #1ea952 !important; }
.border-woot-500, .border-woot-600, .border-woot-700 { border-color: #25d366 !important; }
.ring-woot-500, .focus\:ring-woot-500:focus { --tw-ring-color: #25d366 !important; }
.fill-woot-500, .fill-woot-600 { fill: #25d366 !important; }
.stroke-woot-500 { stroke: #25d366 !important; }

/* ---- Tela de login: logo completa maior ---- */
img[src*="logo-full"] { height: 60px !important; width: auto !important; max-width: 280px !important; }

/* ---- Tela de login: fundo MESH animado (blobs verde/teal/azul/menta derivando) ---- */
[class*="bg-n-brand/5"][class*="min-h-screen"] {
  background: #eef8f1 !important;
  position: relative !important;
  overflow: hidden;
}
[class*="bg-n-brand/5"][class*="min-h-screen"]::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(37, 211, 102, 0.48), transparent) 12% 22% / 46% 46% no-repeat,
    radial-gradient(closest-side, rgba(18, 140, 126, 0.40), transparent) 82% 28% / 52% 52% no-repeat,
    radial-gradient(closest-side, rgba(56, 182, 255, 0.30), transparent) 26% 82% / 50% 50% no-repeat,
    radial-gradient(closest-side, rgba(125, 226, 166, 0.42), transparent) 72% 74% / 46% 46% no-repeat;
  filter: blur(18px);
  animation: smarthub-mesh 16s ease-in-out infinite !important;
}
@keyframes smarthub-mesh {
  0%   { transform: translate(-10%, -8%) scale(1); }
  50%  { transform: translate(9%, 7%) scale(1.18); }
  100% { transform: translate(-10%, -8%) scale(1); }
}
[class*="bg-n-brand/5"][class*="min-h-screen"] > * { position: relative; z-index: 1; }