/* Estilos compartilhados dos players do playground (Scalar).
   Os tokens de cor e fonte espelham os do tema Sphinx (sphinxawesome) para
   que o Guide e a API Reference tenham a mesma identidade visual. */

html, body { margin: 0; padding: 0; }

/* -- Tokens (espelham os do sphinxawesome theme.css) ----------------------- */
body.light-mode {
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --card: 0 0% 100%;
  --primary: 222.2 47.4% 11.2%;
}
body.dark-mode {
  --background: 224 71% 0%;
  --foreground: 213 31% 91%;
  --muted: 223 47% 11%;
  --muted-foreground: 215.4 16.3% 56.9%;
  --border: 216 34% 17%;
  --accent: 216 34% 17%;
  --accent-foreground: 210 40% 98%;
  --card: 224 71% 4%;
  --primary: 210 40% 98%;
}

:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: JetBrainsMono, ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
}

/* -- Container responsivo (mesmo max-width do sphinxawesome) --------------- */
/* Breakpoints: 100% < 40rem; depois 40 / 48 / 64 / 80 / 96 rem. Aplicado via
   padding lateral que cresce até centralizar o conteúdo em até 80rem. */
:root {
  --jb-content-max: 80rem;  /* desktop: 1280px (mesmo do tailwind container md) */
  --jb-content-pad: 2rem;   /* padding mínimo lateral */
}
.jb-header {
  padding-left:  max(var(--jb-content-pad), calc((100vw - var(--jb-content-max)) / 4)) !important;
  padding-right: max(var(--jb-content-pad), calc((100vw - var(--jb-content-max)) / 4)) !important;
  box-sizing: border-box;
}
#scalar-app {
  padding-left:  max(var(--jb-content-pad), calc((100vw - var(--jb-content-max)) / 2));
  padding-right: max(var(--jb-content-pad), calc((100vw - var(--jb-content-max)) / 2));
  box-sizing: border-box;
}

/* -- Header Jusbrasil ------------------------------------------------------ */
.jb-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 56px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  margin: 0 !important;
}
.jb-header img { width: 100px; height: auto; display: block; margin-right: 14px; }
.jb-header .jb-logo-dark { display: none; }
.jb-header .jb-title {
  font: 700 1rem/1.2 var(--font-sans);
  color: hsl(var(--foreground));
}
.jb-header .jb-spacer { flex: 1; }

/* Abas Guias | API Reference — valores hardcoded idênticos aos de custom.css
   (Sphinx) pra garantir mesmo visual nas duas frentes. */
.jb-header .jb-tabs { display: flex; gap: 0.25rem; }
.jb-header .jb-tab {
  font: 500 0.9rem/1 var(--font-sans);
  color: hsl(215 16% 47%);
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border-radius: 6px;
}
.jb-header .jb-tab:hover { background: hsl(210 40% 96.1%); }
.jb-header .jb-tab-active {
  color: hsl(222.2 47.4% 11.2%);
  font-weight: 600;
  background: hsl(210 40% 96.1%);
}
body.dark-mode .jb-header .jb-tab { color: hsl(215 20% 65%); }
body.dark-mode .jb-header .jb-tab:hover,
body.dark-mode .jb-header .jb-tab-active { background: hsl(216 34% 17%); color: #fff; }

/* Botão de busca no header (visualmente idêntico ao searchbox do Sphinx).
   Especificações: h-9 (36px), rounded-[0.5rem] (8px), border-input, py-2 px-4,
   sm:pr-12, w-64 (256px), text-sm text-muted-foreground, bg-transparent →
   hover:bg-accent hover:text-accent-foreground. Kbd absoluto à direita. */
.jb-header .jb-search {
  position: relative;
  display: inline-flex; align-items: center; justify-content: flex-start;
  height: 36px;
  width: 256px;
  padding: 0.5rem 3rem 0.5rem 1rem;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  font: 500 0.875rem/1 var(--font-sans);
  cursor: pointer;
  box-sizing: border-box;
}
.jb-header .jb-search:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.jb-header .jb-search .jb-search-text { flex: 1; text-align: left; }
.jb-header .jb-search .jb-search-kbd {
  position: absolute; right: 0.375rem; top: 0.5rem;
  display: inline-flex; align-items: center; gap: 0.25rem;
  height: 20px;
  padding: 0 0.375rem;
  border: 1px solid hsl(var(--border));
  border-radius: 4px;
  background: hsl(var(--muted));
  font: 500 10px/1 var(--font-mono);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}
.jb-header .jb-search .jb-search-kbd span { font-size: 0.75rem; }
.jb-header .jb-search:hover .jb-search-kbd {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Esconde a busca nativa do Scalar (sidebar) — usamos o botão do header.
   Esconde o botão (role=search) e o wrapper que lhe dá padding. */
#scalar-app button[role="search"] { display: none !important; }
#scalar-app div:has(> button[role="search"]) { display: none !important; }

/* Toggle claro/escuro */
.jb-header .jb-theme {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  color: hsl(var(--foreground));
  background: none; border: none; border-radius: 6px;
  cursor: pointer; padding: 0; line-height: 0;
}
.jb-header .jb-theme:hover { background: hsl(var(--muted)); }
.jb-header .jb-theme .jb-icon { width: 16px; height: 16px; display: block; }
.jb-header .jb-theme .jb-theme-sun,
.jb-header .jb-theme .jb-theme-moon {
  position: absolute; display: inline-flex;
  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body.light-mode .jb-header .jb-theme .jb-theme-sun  { opacity: 1; transform: rotate(0deg); }
body.light-mode .jb-header .jb-theme .jb-theme-moon { opacity: 0; transform: rotate(-90deg); }
body.dark-mode  .jb-header .jb-theme .jb-theme-sun  { opacity: 0; transform: rotate(90deg); }
body.dark-mode  .jb-header .jb-theme .jb-theme-moon { opacity: 1; transform: rotate(0deg); }

/* Troca de logo entre modos */
body.dark-mode .jb-header .jb-logo-light { display: none; }
body.dark-mode .jb-header .jb-logo-dark  { display: block; }

/* Quebra de palavra nas descrições do Scalar — evita overflow horizontal.
   Força white-space normal exceto em blocos pre (que devem preservar formato). */
#scalar-app .scalar-app :not(pre):not(pre *) {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
#scalar-app .scalar-app code {
  font-variant-ligatures: none;  /* hifens não viram em-dash */
}

/* Remove a truncação automática (line-clamp + "...") nas descrições do Scalar.
   O Scalar trunca descrições longas de tags/operations e nem sempre oferece
   "Show more" — preferimos mostrar tudo. */
#scalar-app .scalar-app [class*="line-clamp"],
#scalar-app .scalar-app .markdown,
#scalar-app .scalar-app .section-description,
#scalar-app .scalar-app [data-truncate],
#scalar-app .scalar-app .description {
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

/* -- Scalar (API Reference player) ----------------------------------------- */
#scalar-app .scalar-app {
  --refs-sidebar-width: 256px;
  /* Fontes */
  --scalar-font: var(--font-sans);
  --scalar-font-code: var(--font-mono);
}

/* Tamanho da fonte da sidebar igual ao Sphinx (#left-sidebar ul = --text-sm).
   O Scalar usa 12px por padrão; o Sphinx usa 0.875rem (14px). */
#scalar-app .scalar-app [class*="button-label"] {
  font-size: 0.875rem;
  line-height: 1.42857;
}
body.light-mode #scalar-app .scalar-app {
  /* Backgrounds */
  --scalar-background-1: hsl(var(--background));
  --scalar-background-2: hsl(var(--muted));
  --scalar-background-3: hsl(var(--muted));
  /* Texto */
  --scalar-color-1: hsl(var(--foreground));
  --scalar-color-2: hsl(var(--muted-foreground));
  --scalar-color-3: hsl(var(--muted-foreground));
  /* Acento / links */
  --scalar-color-accent: hsl(var(--foreground));
  /* Bordas */
  --scalar-border-color: hsl(var(--border));
  /* Sidebar — mesmos tokens da sidebar do Sphinx (#left-sidebar):
     item normal = muted-foreground, ativo/hover = foreground. */
  --scalar-sidebar-background-1: hsl(var(--background));
  --scalar-sidebar-color-1: hsl(var(--foreground));
  --scalar-sidebar-color-2: hsl(var(--muted-foreground));
  --scalar-sidebar-border-color: hsl(var(--border));
  --scalar-sidebar-item-hover-background: hsl(var(--muted));
  --scalar-sidebar-item-hover-color: hsl(var(--foreground));
  --scalar-sidebar-item-active-background: hsl(var(--muted));
  --scalar-sidebar-color-active: hsl(var(--foreground));
  --scalar-sidebar-search-background: hsl(var(--muted));
  --scalar-sidebar-search-color: hsl(var(--foreground));
  --scalar-sidebar-search-border-color: hsl(var(--border));
}
body.dark-mode #scalar-app .scalar-app {
  --scalar-background-1: hsl(var(--background));
  --scalar-background-2: hsl(var(--card));
  --scalar-background-3: hsl(var(--muted));
  --scalar-color-1: hsl(var(--foreground));
  --scalar-color-2: hsl(var(--muted-foreground));
  --scalar-color-3: hsl(var(--muted-foreground));
  --scalar-color-accent: hsl(var(--foreground));
  --scalar-border-color: hsl(var(--border));
  /* Sidebar — mesmos tokens da sidebar do Sphinx (#left-sidebar):
     item normal = muted-foreground, ativo/hover = foreground. */
  --scalar-sidebar-background-1: hsl(var(--background));
  --scalar-sidebar-color-1: hsl(var(--foreground));
  --scalar-sidebar-color-2: hsl(var(--muted-foreground));
  --scalar-sidebar-border-color: hsl(var(--border));
  --scalar-sidebar-item-hover-background: hsl(var(--muted));
  --scalar-sidebar-item-hover-color: hsl(var(--foreground));
  --scalar-sidebar-item-active-background: hsl(var(--muted));
  --scalar-sidebar-color-active: hsl(var(--foreground));
  --scalar-sidebar-search-background: hsl(var(--muted));
  --scalar-sidebar-search-color: hsl(var(--foreground));
  --scalar-sidebar-search-border-color: hsl(var(--border));
}