/* Tema Cortex para Scalar API Reference.
   Seletores usam .scalar-app para vencer a especificidade do tema embutido. */

:root,
.scalar-app {
  --scalar-custom-header-height: var(--cx-header-h, 60px);
  --scalar-font: var(--cx-font);
  --scalar-font-code: var(--cx-mono);
  --scalar-radius: 8px;
  --scalar-radius-lg: 12px;
  --scalar-sidebar-width: 288px;
  --scalar-content-max-width: 1400px;
}

/* --------------------------------------------------------------- claro */

body.light-mode,
.scalar-app.light-mode,
.scalar-app .light-mode,
.light-mode {
  --scalar-color-1: #0e2847;
  --scalar-color-2: #46586e;
  --scalar-color-3: #7a8798;
  --scalar-color-accent: #2a8317;
  --scalar-background-1: #ffffff;
  --scalar-background-2: #f6f8f4;
  --scalar-background-3: #eaf0e6;
  --scalar-background-accent: rgba(105, 237, 67, 0.16);
  --scalar-border-color: rgba(14, 40, 71, 0.11);

  --scalar-button-1: #0e2847;
  --scalar-button-1-color: #ffffff;
  --scalar-button-1-hover: #1b3a60;

  --scalar-color-green: #2a8317;
  --scalar-color-blue: #1f6feb;
  --scalar-color-orange: #b45309;
  --scalar-color-red: #c1121f;
  --scalar-color-purple: #6d28d9;
  --scalar-color-yellow: #a16207;

  --scalar-sidebar-background-1: #fbfcf9;
  --scalar-sidebar-color-1: #0e2847;
  --scalar-sidebar-color-2: #5c6b7e;
  --scalar-sidebar-border-color: rgba(14, 40, 71, 0.09);
  --scalar-sidebar-item-hover-background: rgba(14, 40, 71, 0.05);
  --scalar-sidebar-item-hover-color: #0e2847;
  --scalar-sidebar-item-active-background: rgba(105, 237, 67, 0.18);
  --scalar-sidebar-color-active: #1f6b12;
  --scalar-sidebar-font-weight-active: 700;
  --scalar-sidebar-search-background: #ffffff;
  --scalar-sidebar-search-border-color: rgba(14, 40, 71, 0.13);
  --scalar-sidebar-search-color: #7a8798;
  --scalar-sidebar-indent-border: rgba(14, 40, 71, 0.1);
  --scalar-sidebar-indent-border-active: var(--cx-lime, #69ed43);
}

/* --------------------------------------------------------------- escuro */

body.dark-mode,
.scalar-app.dark-mode,
.scalar-app .dark-mode,
.dark-mode {
  --scalar-color-1: #eaf2f8;
  --scalar-color-2: #a9bacd;
  --scalar-color-3: #718499;
  --scalar-color-accent: #8cf06a;
  --scalar-background-1: #071527;
  --scalar-background-2: #0b1f36;
  --scalar-background-3: #122942;
  --scalar-background-accent: rgba(105, 237, 67, 0.16);
  --scalar-border-color: rgba(148, 186, 218, 0.17);

  --scalar-button-1: #a9eb67;
  --scalar-button-1-color: #0e2847;
  --scalar-button-1-hover: #c6f295;

  --scalar-color-green: #7fe25c;
  --scalar-color-blue: #6aa8ff;
  --scalar-color-orange: #ffb454;
  --scalar-color-red: #ff7b7b;
  --scalar-color-purple: #b79bff;
  --scalar-color-yellow: #f0eb65;

  --scalar-sidebar-background-1: #050f1c;
  --scalar-sidebar-color-1: #e6eef6;
  --scalar-sidebar-color-2: #93a7bd;
  --scalar-sidebar-border-color: rgba(148, 186, 218, 0.13);
  --scalar-sidebar-item-hover-background: rgba(255, 255, 255, 0.06);
  --scalar-sidebar-item-hover-color: #ffffff;
  --scalar-sidebar-item-active-background: rgba(105, 237, 67, 0.16);
  --scalar-sidebar-color-active: #a9eb67;
  --scalar-sidebar-font-weight-active: 700;
  --scalar-sidebar-search-background: rgba(255, 255, 255, 0.04);
  --scalar-sidebar-search-border-color: rgba(148, 186, 218, 0.18);
  --scalar-sidebar-search-color: #93a7bd;
  --scalar-sidebar-indent-border: rgba(148, 186, 218, 0.16);
  --scalar-sidebar-indent-border-active: var(--cx-lime, #69ed43);
}

/* ------------------------------------------------- ajustes de composição */

/* Badges de método como pílulas, na convenção do ClickUp: GET verde,
   POST azul, PUT/PATCH laranja, DELETE vermelho. O padrão do Scalar segue o
   Swagger (GET azul, POST verde) e ficava trocado em relação à referência. */
.scalar-app .sidebar-heading-type {
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.45;
  height: auto;
}

.scalar-app .sidebar-heading-type--get {
  color: #1f6b12;
  background: rgba(105, 237, 67, 0.2);
}

.scalar-app .sidebar-heading-type--post {
  color: #1f6feb;
  background: rgba(31, 111, 235, 0.12);
}

.scalar-app .sidebar-heading-type--put,
.scalar-app .sidebar-heading-type--patch {
  color: #b45309;
  background: rgba(180, 83, 9, 0.12);
}

.scalar-app .sidebar-heading-type--delete {
  color: #c1121f;
  background: rgba(193, 18, 31, 0.12);
}

body.dark-mode .scalar-app .sidebar-heading-type--get {
  color: #9cf07d;
  background: rgba(105, 237, 67, 0.16);
}

body.dark-mode .scalar-app .sidebar-heading-type--post {
  color: #7fb2ff;
  background: rgba(122, 178, 255, 0.14);
}

body.dark-mode .scalar-app .sidebar-heading-type--put,
body.dark-mode .scalar-app .sidebar-heading-type--patch {
  color: #ffb454;
  background: rgba(255, 180, 84, 0.14);
}

body.dark-mode .scalar-app .sidebar-heading-type--delete {
  color: #ff8f8f;
  background: rgba(255, 143, 143, 0.14);
}

/* Busca da sidebar ocupando a largura toda, como o "JUMP TO" do ClickUp. */
.scalar-app aside button.bg-sidebar-b-search {
  flex: 1;
  height: 34px;
  border-radius: 8px;
}

/* Fora os recursos de IA/MCP do Scalar: não fazem parte da referência.
   O "Ask AI" da sidebar é o botão irmão da busca — irmão geral (`~`), porque o
   Vue deixa um placeholder vazio entre os dois. Os outros dois têm classe
   própria. */
.scalar-app aside button.bg-sidebar-b-search ~ button.bg-sidebar-b-search,
.scalar-app .agent-button-container,
.scalar-app .scalar-mcp-layer {
  display: none !important;
}

/* O card de request do Scalar sai de cena: ele gera o cURL com a URL inteira
   na primeira linha e renderiza com `white-space: pre` + `w-fit`, o que estoura
   um painel de ~450px. No lugar entra `.cx-request`, montado a partir do
   próprio OpenAPI com uma flag por linha (ver cortex-snippets.js). */
.scalar-app .examples .request-card {
  display: none !important;
}

/* Faixa da marca acompanhando o item ativo da navegação lateral. */
.scalar-app .sidebar-heading.active_page,
.scalar-app .sidebar-heading[aria-current="page"] {
  box-shadow: inset 2px 0 0 0 var(--cx-lime, #69ed43);
}

/* Tipografia de títulos com o mesmo peso do wordmark. */
.scalar-app h1,
.scalar-app h2,
.scalar-app h3 {
  letter-spacing: -0.02em;
}

/* O header próprio da página já identifica o produto: some com o
   cabeçalho de busca redundante em telas largas. */
.scalar-app .scalar-api-reference {
  --scalar-header-height: 0px;
}

/* Duas colunas em janelas médias.

   O Scalar empilha descrição e exemplos com uma container query
   (`@container narrow-references-container (width<=900px)`). Como o container
   é a viewport menos a sidebar de 288px, qualquer janela abaixo de ~1200px cai
   no layout empilhado — a referência do ClickUp mantém as colunas bem antes
   disso. Aqui as colunas voltam sempre que a janela tem pelo menos 1000px.
   `!important` é necessário: o Scalar injeta o CSS dele em runtime, depois
   desta folha, e as regras têm a mesma especificidade. */
@media (min-width: 1000px) {
  /* Operação: descrição/detalhes à esquerda, exemplos à direita. */
  .scalar-app .operation-layout {
    grid-template-areas:
      "heading badge"
      "description examples"
      "details examples" !important;
    /* Painel de exemplos um pouco mais largo que a coluna de texto, como no
       ClickUp (lá são ~360px de conteúdo para ~450px de request). */
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr) !important;
    grid-template-rows: auto auto 1fr !important;
    column-gap: 40px !important;
  }

  /* Cabeçalho de cada tag: descrição à esquerda, lista de operações à direita. */
  .scalar-app .section-header-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }

  .scalar-app .section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Esconde o link "Powered by Scalar" e o toggle de tema no rodapé da
   sidebar — o header customizado em `index.html` já tem o botão de tema. */
.scalar-app aside a[href*="scalar.com"],
.scalar-app aside [class*="group/toggle"] {
  display: none !important;
}

/* Esconde os grupos de links do Scalar (mailto de suporte, MIT License e
   Terms of Service). O link de download do OpenAPI fica em outro lugar
   (`.download-container`). */
.scalar-app .section-header-wrapper .custom-scroll > .group {
  display: none !important;
}

/* Como o card sticky do Scalar foi escondido, a introdução ganha a coluna
   inteira. Em telas largas, deixa a descrição respirar até ~880px (limite
   confortável de leitura) e centraliza; em telas menores, ocupa tudo. */

/* O cabeçalho (H1 + versão) deixa de ser duas colunas — agora é só título. */
.scalar-app .introduction-section .section-header-wrapper {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

/* O segundo `<div class="section-column">` (que tinha o sticky card) some. */
.scalar-app .introduction-section .section-columns > .section-column:empty,
.scalar-app .introduction-section .section-columns > .section-column:not(:has(.introduction-description)) {
  display: none !important;
}

/* A coluna da descrição passa a ocupar a largura toda, limitada a 880px e
   centralizada — largura confortável pra leitura de blocos de markdown. */
.scalar-app .introduction-section .section-columns {
  grid-template-columns: minmax(0, 880px) !important;
  justify-content: center !important;
}
.scalar-app .introduction-section .section-columns > .section-column {
  grid-column: 1 !important;
  max-width: 880px !important;
}