/* ================================================
   Jacovine Brand — Chatwoot v4 — v4
   CSS estático: cobre o que não depende de timing
   (n-brand classes, botões, scrollbar, sidebar)
   CSS variables são injetadas dinamicamente pelo JS
   ================================================ */

/* ── 0. Geist font ── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ── 1. Cor de marca — classes Tailwind n-brand (hardcoded) ── */
.bg-n-brand,
.before\:bg-n-brand::before,
.after\:bg-n-brand::after,
.checked\:bg-n-brand:checked,
.indeterminate\:bg-n-brand:indeterminate,
.hover\:bg-n-brand\/80:hover,
.group:hover .group-hover\:bg-n-brand,
.bg-\[\#2781F6\]                                       { background-color: rgb(31 151 84) !important; }

.bg-n-brand\/10,
.hover\:bg-n-brand\/10:hover                           { background-color: rgb(31 151 84 / 0.10) !important; }
.bg-n-brand\/5                                         { background-color: rgb(31 151 84 / 0.05) !important; }
.focus-visible\:bg-n-brand\/20:focus-visible,
.hover\:enabled\:bg-n-brand\/20:enabled:hover          { background-color: rgb(31 151 84 / 0.20) !important; }

.text-n-brand,
.hover\:text-n-brand:hover,
.group:hover .group-hover\:text-n-brand,
.group:focus-within .group-focus-within\:text-n-brand  { color: rgb(31 151 84) !important; }

p a, p a:is(.dark *)                                   { color: rgb(31 151 84) !important; }

.border-n-brand,
.border-t-n-brand,
.before\:\!border-t-n-brand::before,
.checked\:border-n-brand:checked,
.indeterminate\:border-n-brand:indeterminate,
.focus\:border-n-brand:focus                           { border-color: rgb(31 151 84) !important; }

.outline-n-brand,
.\!outline-n-brand,
.focus\:outline-n-brand:focus,
.focus-within\:outline-n-brand:focus-within,
.has-\[\:focus\]\:outline-n-brand:has(:focus)          { outline-color: rgb(31 151 84) !important; }
.outline-n-brand\/30                                   { outline-color: rgb(31 151 84 / 0.30) !important; }

.ring-n-brand,
.focus\:ring-n-brand:focus,
.focus-within\:ring-n-brand:focus-within               { --tw-ring-color: rgb(31 151 84) !important; }

input[type]:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: rgb(31 151 84) !important;
  outline-color: rgb(31 151 84) !important;
}

/* ── 2. Botões ── */
.button.nice.primary,
button[class*="button--primary"],
[class*="btn--primary"] {
  border-radius: 999px !important;
  font-weight: 500 !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}
.button.nice.primary:hover,
button[class*="button--primary"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgb(31 151 84 / 0.35) !important;
}

/* ── 3. Scrollbar ── */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: oklch(0.30 0.012 250 / 0.40); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover  { background: oklch(0.30 0.012 250 / 0.70); }

/* ── 4. Hover verde suave nos itens do nav ── */
body:not(.dark) aside nav li > a:hover,
body:not(.dark) aside nav li > div[role="button"]:hover {
  background-color: rgb(31 151 84 / 0.08) !important;
  color: rgb(14 110 58) !important;
}
body:not(.dark) aside nav li > a[aria-current="page"],
body:not(.dark) aside nav li > [aria-current="page"] {
  background-color: rgb(31 151 84 / 0.10) !important;
}
body.dark aside nav li > a:hover,
body.dark aside nav li > div[role="button"]:hover {
  background-color: rgb(31 151 84 / 0.12) !important;
  color: rgb(100 196 143) !important;
}

/* ── 5. Ocultar funcionalidades não utilizadas ── */
aside li:has(a[href*="/captain/"])          { display: none !important; }
aside li:has(> a[href*="/campaigns/sms"])   { display: none !important; }

/* ── Esconde logo Chatwoot antes do JS substituir (evita flash) ── */
aside img[src*="logo_thumbnail"],
aside img[src*="brand-assets"] {
  opacity: 0 !important;
  transition: opacity 0.15s ease;
}

/* ── 5. Sidebar — largura controlada por CSS (sem inline style do Vue) ── */
aside {
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Desabilita resize handle da sidebar ── */
aside ~ [class*="resize"],
aside ~ [class*="handle"],
aside + div[style*="cursor"] {
  display: none !important;
  pointer-events: none !important;
}
aside:not(.jk-collapsed) {
  width: 200px !important;
  min-width: 200px !important;
}
aside.jk-collapsed {
  width: 52px !important;
  min-width: 52px !important;
}

/* Itens do nav no modo expandido: reseta centralização forçada */
aside:not(.jk-collapsed) nav li > a,
aside:not(.jk-collapsed) nav li > div[role="button"] {
  justify-content: flex-start !important;
}

/* Itens do nav no modo colapsado: esconde texto, centraliza ícone */
aside.jk-collapsed nav li > a,
aside.jk-collapsed nav li > div[role="button"] {
  justify-content: center !important;
  padding-left:  0.25rem !important;
  padding-right: 0.25rem !important;
  gap: 0 !important;
}
aside.jk-collapsed nav li > a > div[class*="flex-grow"],
aside.jk-collapsed nav li > a > div[class*="flex-1"],
aside.jk-collapsed nav li > a > span[class*="flex-grow"],
aside.jk-collapsed nav li > a > span[class*="flex-1"],
aside.jk-collapsed nav li > a > span[class*="min-w-0"],
aside.jk-collapsed nav li > div[role="button"] > div[class*="flex-grow"],
aside.jk-collapsed nav li > div[role="button"] > div[class*="flex-1"],
aside.jk-collapsed nav li > div[role="button"] > span[class*="flex-grow"],
aside.jk-collapsed nav li > div[role="button"] > span[class*="flex-1"],
aside.jk-collapsed nav li > div[role="button"] > span[class*="min-w-0"] {
  display: none !important;
}
/* Esconde sub-itens dos grupos colapsados */
aside.jk-collapsed nav ul[class*="sidebar-group-children"] {
  display: none !important;
}

/* Seção do topo: oculta nome da conta, barra de pesquisa e tudo além do logo */
aside.jk-collapsed > section:first-of-type {
  overflow: hidden;
}
aside.jk-collapsed > section:first-of-type > div {
  justify-content: center !important;
  padding: 0.25rem !important;
  gap: 0 !important;
}
/* Oculta todos os elementos de texto (nome da conta, labels) */
aside.jk-collapsed > section:first-of-type span,
aside.jk-collapsed > section:first-of-type p,
aside.jk-collapsed > section:first-of-type small {
  display: none !important;
}
/* Oculta barra de pesquisa e seu container */
aside.jk-collapsed > section:first-of-type input {
  display: none !important;
}
aside.jk-collapsed > section:first-of-type > :has(> input),
aside.jk-collapsed > section:first-of-type > div:has(input),
aside.jk-collapsed > section:first-of-type > div > div:has(input) {
  display: none !important;
}
/* Oculta elementos irmãos após o primeiro div (search, etc.) */
aside.jk-collapsed > section:first-of-type > div ~ * {
  display: none !important;
}
/* Esconde botões extras no topo (switcher de conta, ações) */
aside.jk-collapsed > section:first-of-type > div > *:not(:first-child):not(img) {
  display: none !important;
}

/* ── 6. Popup de submenu (sidebar colapsada) ── */
#jk-nav-popup {
  position: fixed;
  z-index: 9000;
  display: none;
  padding: 4px;
  min-width: 172px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid rgb(230 228 224);
}
.dark #jk-nav-popup {
  background: oklch(0.16 0.010 250);
  border-color: oklch(0.22 0.010 250);
  box-shadow: 0 4px 20px rgba(0,0,0,0.30);
}
.jk-popup-label {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  color: rgb(96 100 108);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px 3px;
}
.dark .jk-popup-label { color: rgb(120 124 132); }
#jk-nav-popup a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: rgb(28 32 36);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.dark #jk-nav-popup a { color: rgb(210 213 218); }
#jk-nav-popup a:hover {
  background: rgb(31 151 84 / 0.08);
  color: rgb(14 110 58);
}
.dark #jk-nav-popup a:hover {
  background: rgb(31 151 84 / 0.12);
  color: rgb(100 196 143);
}
#jk-nav-popup a.jk-active {
  background: rgb(31 151 84 / 0.10);
  color: rgb(14 110 58);
  font-weight: 500;
}
.dark #jk-nav-popup a.jk-active {
  color: rgb(100 196 143);
}

/* ── 7. Botões internos da sidebar (tema + colapso) ── */
#jk-sidebar-toggle,
#jk-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 8px);
  margin: 2px 4px;
  padding: 5px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: rgb(96 100 108);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
#jk-sidebar-toggle:hover,
#jk-theme-toggle:hover {
  background: rgb(31 151 84 / 0.10);
  color: rgb(31 151 84);
}
.dark #jk-sidebar-toggle,
.dark #jk-theme-toggle {
  color: rgb(176 180 186);
}
.dark #jk-sidebar-toggle:hover,
.dark #jk-theme-toggle:hover {
  background: rgb(31 151 84 / 0.15);
  color: rgb(100 196 143);
}

/* ── 8. Tela de loading Jacovine ── */
#jac-loader {
  position: fixed;
  inset: 0;
  background: rgb(249 247 243);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity 0.4s ease;
}
#jac-loader img {
  width: 150px;
  height: auto;
  display: block;
}
.jac-loader-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.jac-loader-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(31 151 84);
  animation: jac-bounce 1.2s ease-in-out infinite;
}
.jac-loader-dot:nth-child(2) { animation-delay: 0.2s; }
.jac-loader-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes jac-bounce {
  0%, 80%, 100% { transform: scale(0.55); opacity: 0.25; }
  40%            { transform: scale(1);    opacity: 1;    }
}