/* ============================================================
   TEMA WS-FLOWS
   claro  -> menu em azul clarinho da marca
   escuro -> menu na tinta profunda #0B1220
   pulso: ciano #22D3EE -> indigo #6366F1
   ============================================================ */

:root {
  --ws-ciano: 34 211 238;
  --ws-indigo: 99 102 241;
  --ws-tinta: 11 18 32;
  --ws-tinta-2: 19 28 49;
  --ws-nevoa: 148 163 184;
  --ws-cartao: 226 232 240;
  --ws-gradiente: linear-gradient(90deg, rgb(34 211 238), rgb(99 102 241));
}

/* ---------- 1. paleta de marca no lugar do azul padrao ---------- */
:root, .dark {
  --blue-1: 253 253 255;  --blue-2: 248 249 255;  --blue-3: 238 240 255;
  --blue-4: 228 231 255;  --blue-5: 216 220 254;  --blue-6: 199 205 253;
  --blue-7: 176 183 251;  --blue-8: 145 154 248;  --blue-9: 99 102 241;
  --blue-10: 88 89 226;   --blue-11: 79 79 200;   --blue-12: 39 39 92;

  --iris-9: 99 102 241;   --iris-10: 88 89 226;   --iris-11: 79 79 200;

  --solid-blue: rgb(99 102 241);
  --solid-blue-2: rgb(88 89 226);
  --solid-iris: rgb(99 102 241);
  --text-blue: rgb(79 79 200);
  --border-blue: rgb(199 205 253);
  --border-blue-strong: rgb(145 154 248);
  --button-color: rgb(99 102 241);
  --button-hover-color: rgb(88 89 226);
}

/* a cor de marca do Chatwoot vem cravada no CSS: trocar na mao */
.bg-n-brand      { background-color: rgb(var(--ws-indigo)) !important; }
.text-n-brand    { color: rgb(var(--ws-indigo)) !important; }
.border-n-brand  { border-color: rgb(var(--ws-indigo)) !important; }
.fill-n-brand    { fill: rgb(var(--ws-indigo)) !important; }
.stroke-n-brand  { stroke: rgb(var(--ws-indigo)) !important; }
.ring-n-brand    { --tw-ring-color: rgb(var(--ws-indigo)) !important; }

/* ============================================================
   2. MENU LATERAL — MODO CLARO (azul clarinho)
   ============================================================ */
aside.bg-n-background {
  background: linear-gradient(180deg, #F4F7FF 0%, #E8EEFF 100%) !important;
  border-right: 1px solid rgb(var(--ws-indigo) / .16) !important;
}

aside.bg-n-background nav a {
  border-left: 3px solid transparent !important;
  transition: background .18s ease, border-color .18s ease !important;
}
aside.bg-n-background nav a:hover {
  background: linear-gradient(90deg, rgb(var(--ws-ciano) / .20), rgb(var(--ws-indigo) / .10)) !important;
}
aside.bg-n-background nav a:hover svg { color: rgb(79 79 200) !important; }

aside.bg-n-background nav a.bg-n-alpha-2,
aside.bg-n-background nav a[aria-current="page"],
aside.bg-n-background nav a.router-link-exact-active {
  background: linear-gradient(90deg, rgb(var(--ws-ciano) / .28), rgb(var(--ws-indigo) / .16)) !important;
  border-left-color: rgb(var(--ws-indigo)) !important;
}
aside.bg-n-background nav a.bg-n-alpha-2 svg,
aside.bg-n-background nav a[aria-current="page"] svg,
aside.bg-n-background nav a.router-link-exact-active svg { color: rgb(var(--ws-indigo)) !important; }

/* campo de busca no modo claro */
aside.bg-n-background input {
  background: rgb(255 255 255 / .75) !important;
  border-color: rgb(var(--ws-indigo) / .18) !important;
}

/* ============================================================
   3. MENU LATERAL — MODO ESCURO (tinta da marca)
   ============================================================ */
.dark aside.bg-n-background {
  background: linear-gradient(180deg, rgb(var(--ws-tinta)) 0%, rgb(var(--ws-tinta-2)) 100%) !important;
  border-right: 1px solid rgb(var(--ws-indigo) / .24) !important;
}

.dark aside.bg-n-background,
.dark aside.bg-n-background .text-n-slate-12,
.dark aside.bg-n-background span,
.dark aside.bg-n-background a { color: rgb(var(--ws-cartao)) !important; }

.dark aside.bg-n-background .text-n-slate-11,
.dark aside.bg-n-background .text-n-slate-10 { color: rgb(var(--ws-nevoa)) !important; }

.dark aside.bg-n-background svg { color: rgb(var(--ws-nevoa)) !important; }

.dark aside.bg-n-background nav a:hover {
  background: linear-gradient(90deg, rgb(var(--ws-ciano) / .16), rgb(var(--ws-indigo) / .10)) !important;
}
.dark aside.bg-n-background nav a:hover svg { color: rgb(var(--ws-ciano)) !important; }

.dark aside.bg-n-background nav a.bg-n-alpha-2,
.dark aside.bg-n-background nav a[aria-current="page"],
.dark aside.bg-n-background nav a.router-link-exact-active {
  background: linear-gradient(90deg, rgb(var(--ws-ciano) / .22), rgb(var(--ws-indigo) / .14)) !important;
  border-left-color: rgb(var(--ws-ciano)) !important;
}
.dark aside.bg-n-background nav a.bg-n-alpha-2 svg,
.dark aside.bg-n-background nav a[aria-current="page"] svg,
.dark aside.bg-n-background nav a.router-link-exact-active svg { color: rgb(var(--ws-ciano)) !important; }

.dark aside.bg-n-background input {
  background: rgb(255 255 255 / .07) !important;
  border-color: rgb(255 255 255 / .12) !important;
  color: rgb(var(--ws-cartao)) !important;
}
.dark aside.bg-n-background input::placeholder { color: rgb(var(--ws-nevoa) / .8) !important; }

.dark aside.bg-n-background .border-n-weak,
.dark aside.bg-n-background .border-n-strong,
.dark aside.bg-n-background hr { border-color: rgb(255 255 255 / .10) !important; }

/* ============================================================
   4. BOTAO PRINCIPAL com o pulso da marca (nos dois modos)
   ============================================================ */
button.bg-n-brand {
  background: var(--ws-gradiente) !important;
  border: 0 !important;
  box-shadow: 0 2px 10px rgb(var(--ws-indigo) / .28) !important;
}
button.bg-n-brand:hover {
  filter: brightness(1.06) !important;
  box-shadow: 0 4px 16px rgb(var(--ws-indigo) / .38) !important;
}

/* ---------- 5. acabamento geral ---------- */
button, input, textarea, select { border-radius: 10px !important; }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgb(var(--ws-indigo) / .35); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--ws-indigo) / .55); }
*::-webkit-scrollbar-track { background: transparent; }