/* Tokens portados de mapa-v2/src/index.css (shadcn/ui, estilo "new-york", baseColor neutral). */

/* Aumenta espaçamento entre grupos (seções) da sidebar */
[data-sidebar="content"] > div + div {
  margin-top: 1.5rem;
}

/* Corrige colisão entre itens da sidebar cuja label quebra em 2+ linhas:
   o tema fixa a altura do botão (h-[30px]/h-8), então o texto que
   ultrapassa essa altura invade o item seguinte, dando a impressão de
   falta de respiro entre eles. */
[data-sidebar="menu-button"] {
  height: auto !important;
  min-height: 1.875rem;
}

/* Impede quebra de linha no meio de palavras no título.
   Causa raiz: o tema define "#page-header h1 { word-break: break-all }"
   (shadcn/css/base.css), que força quebra em qualquer caractere e tem
   mais especificidade que um simples seletor "h1". Revertemos para o
   comportamento padrão (quebra só nos espaços) e usamos overflow-wrap
   apenas como rede de segurança para palavras maiores que a largura
   disponível. */
#page-header h1, h1 {
  word-break: normal !important;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Ajusta o logo do Geosite no header: a imagem é um logotipo horizontal
   (não um ícone quadrado), então não pode ficar preso a size-5/size-8.
   O container ".size-8" que envolve o ícone também precisa acompanhar a
   largura real da imagem — senão a área clicável/hover do link continua
   com a largura antiga (32px) e o destaque ao passar o mouse cobre só
   uma fatia do logo, deixando o resto "para fora" da caixa de hover. */
img[alt="icon"] {
  width: auto !important;
  height: 2.1rem !important;
  max-width: none !important;
}

span.size-8:has(> img[alt="icon"]) {
  width: auto !important;
}

/* Dá um respiro ao redor do logo no hover, igual aos outros botões do
   navbar (ícone menor que a caixa do botão, com padding entre os dois).
   O link do logo não tinha nenhum padding — a caixa de hover ficava
   colada nas bordas exatas da imagem em vez de "sobrar" espaço.
   O margin-left compensa o padding-left e ainda desloca o conjunto para
   a direita: medido via CDP (getBoundingClientRect), a imagem do logo
   ficava em x=64px enquanto a caixa dos itens da sidebar ("Início",
   grupos) começa em x=92px — os 28px que faltavam vêm do padding
   acumulado header (container-wrapper) vs. sidebar (container-wrapper +
   sidebar-content + group), que são diferentes nesse tema. */
a[data-slot="button"]:has(> span.size-8 > img[alt="icon"]) {
  height: auto !important;
  padding: 0.375rem 0.75rem !important;
  margin-left: 1rem !important;
}

/* O arquivo geosite-logo-white.png é branco com fundo transparente:
   fica invisível sobre o header branco do tema claro. Inverte as cores
   só no modo claro para o logo ficar escuro e visível; no modo escuro
   o branco original já contrasta normalmente com o fundo. */
html:not(.dark) img[alt="icon"] {
  filter: invert(1);
}

/* Exibe imagens lado a lado nas páginas do manual.
   Causa raiz: o tema define "img { display: block }" (shadcn/css/base.css),
   então imagens sempre quebram linha, mesmo lado a lado no HTML fonte.
   align-items: flex-start evita que o flex estique a altura das imagens
   para igualar à mais alta da linha (align-items: stretch é o padrão do
   flex), o que distorcia a proporção de imagens menores/com formatos
   diferentes. flex-wrap permite quebrar para a linha de baixo em telas
   estreitas em vez de estourar a largura do conteúdo. */
.img-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}

/* Muda cor dos buttons secundários para primary (roxo) */
.bg-secondary {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.hover\:bg-secondary\/80:hover {
  background-color: var(--primary) !important;
  opacity: 0.8 !important;
  color: var(--primary-foreground) !important;
}

/* Garante que os buttons de Previous/Next usem a cor primary.
   #previous-button/#next-button: tema até 0.12.0.
   .button.secondary e #bottom-navigation: tema 0.12.2 (usado no CI). */
#previous-button, #next-button,
.button.secondary, a.button.secondary,
#bottom-navigation a.button {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

#previous-button:hover, #next-button:hover,
.button.secondary:hover, a.button.secondary:hover,
#bottom-navigation a.button:hover {
  background-color: var(--primary) !important;
  opacity: 0.8 !important;
  color: var(--primary-foreground) !important;
}

:root {
  --font-sans: "Rubik", sans-serif;
  /* Já é o default do tema — mantido explícito para documentar a decisão. */
  --radius: 0.625rem;

  --background: #ffffff;
  --foreground: #1d1d1d;
  --card: #ffffff;
  --card-foreground: #1d1d1d;
  --popover: #ffffff;
  --popover-foreground: #1d1d1d;
  --primary: #4a148c;
  --primary-foreground: #ffffff;
  --secondary: #26a69a;
  --secondary-foreground: #ffffff;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #1d1d1d;
  --destructive: #c10015;
  --destructive-foreground: #ffffff;
  --border: #e5e5e5;
  --input: #bdbdbd;
  --ring: #4a148c;
  --chart-1: #4a148c;
  --chart-2: #26a69a;
  --chart-3: #9c27b0;
  --chart-4: #f2c037;
  --chart-5: #31ccec;
  --sidebar: #fafafa;
  --sidebar-foreground: #1d1d1d;
  --sidebar-primary: #4a148c;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #1d1d1d;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #4a148c;
}

.dark {
  --background: #121212;
  --foreground: #f5f5f5;
  --card: #1d1d1d;
  --card-foreground: #f5f5f5;
  --popover: #1d1d1d;
  --popover-foreground: #f5f5f5;
  --primary: #7c4dff;
  --primary-foreground: #ffffff;
  --secondary: #26a69a;
  --secondary-foreground: #ffffff;
  --muted: #262626;
  --muted-foreground: #a3a3a3;
  --accent: #262626;
  --accent-foreground: #f5f5f5;
  --destructive: #ff5252;
  --destructive-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.15);
  --ring: #7c4dff;
  --chart-1: #7c4dff;
  --chart-2: #26a69a;
  --chart-3: #ba68c8;
  --chart-4: #f2c037;
  --chart-5: #31ccec;
  --sidebar: #1d1d1d;
  --sidebar-foreground: #f5f5f5;
  --sidebar-primary: #7c4dff;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #f5f5f5;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-ring: #7c4dff;
}