/* BrotasPay — padrão ÚNICO: fundo claro + texto escuro em toda a página.
   Sobrescreve o tema Elements (que intencionalmente usa painéis `sl-inverted`
   com canvas escuro) para ficar 100% claro. */

:root {
    --brotas-50:  #ecfdee;
    --brotas-100: #d1fad8;
    --brotas-200: #a6f4b4;
    --brotas-300: #6fea89;
    --brotas-400: #39e659;
    --brotas-500: #1dc83f;
    --brotas-600: #14a131;
    --brotas-700: #137e2a;
    --brotas-800: #136425;
    --brotas-900: #0e4c1d;
    --ink-900:    #0a0a0a;
    --ink-800:    #141414;
    --ink-700:    #1d1d1d;
    --ink-600:    #2a2a2a;
    --text-body:  #0a0a0a;
    --text-soft:  #1f2937;
    --text-muted: #374151;
}

html, body {
    background: #ffffff !important;
    color: var(--text-body) !important;
    font-family: 'Outfit', 'PT Sans', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

/* ============================================================
   1) CORES DE TEXTO — escuro em todo lugar, sem exceção
   ============================================================ */
.sl-elements,
.sl-elements *,
.sl-inverted,
.sl-inverted * {
    --text-h: 142 !important;
    --text-s: 14% !important;
    --text-l: 8% !important;
    --color-text: var(--text-body) !important;
    --color-text-paragraph: var(--text-body) !important;
    --color-text-heading: #000000 !important;
    --color-text-body: var(--text-body) !important;
    --color-text-muted: var(--text-muted) !important;
    --color-text-light: #4b5563 !important;
    --color-text-disabled: #9ca3af !important;
    --color-text-on-primary: #ffffff !important;
}

.sl-elements p,
.sl-elements li,
.sl-elements label,
.sl-elements h1, .sl-elements h2, .sl-elements h3,
.sl-elements h4, .sl-elements h5, .sl-elements h6,
.sl-elements dt, .sl-elements dd,
.sl-elements td, .sl-elements th,
.sl-elements div,
.sl-elements span:not([class*="hljs"]):not([class^="hljs"]),
.sl-inverted p,
.sl-inverted li,
.sl-inverted label,
.sl-inverted h1, .sl-inverted h2, .sl-inverted h3,
.sl-inverted h4, .sl-inverted h5, .sl-inverted h6,
.sl-inverted dt, .sl-inverted dd,
.sl-inverted td, .sl-inverted th,
.sl-inverted div,
.sl-inverted span:not([class*="hljs"]):not([class^="hljs"]) {
    color: var(--text-body) !important;
}

.sl-elements .sl-text-muted,
.sl-elements [class*="text-muted"],
.sl-elements small,
.sl-inverted .sl-text-muted,
.sl-inverted [class*="text-muted"],
.sl-inverted small {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* Títulos em verde escuro pra reforçar a marca */
.sl-elements h1, .sl-elements h2, .sl-elements h3,
.sl-inverted h1, .sl-inverted h2, .sl-inverted h3 {
    font-family: 'Outfit', 'PT Sans', sans-serif !important;
    letter-spacing: -0.01em !important;
    color: #000000 !important;
    font-weight: 700 !important;
}
.sl-elements h1, .sl-inverted h1 { font-weight: 800 !important; }

/* ============================================================
   2) FUNDOS — tudo claro (inclusive sl-inverted)
   ============================================================ */
.sl-inverted,
.sl-inverted *,
.sl-elements .sl-bg-canvas,
.sl-elements .sl-bg-canvas-pure,
.sl-elements .sl-bg-canvas-100,
.sl-elements .sl-bg-canvas-200,
.sl-elements .sl-bg-canvas-300,
.sl-elements .sl-bg-canvas-tint,
.sl-elements [class*="sl-bg-canvas"] {
    background-color: #ffffff !important;
}

/* Sidebar: gradiente sutil verde-clarinho */
.sl-elements aside,
.sl-elements [class*="sidebar"] {
    background: linear-gradient(180deg, #f6fef7 0%, #ffffff 100%) !important;
    border-right: 1px solid rgba(20,161,49,0.12) !important;
}

/* Painéis com leve tint verde pra diferenciar sem escurecer */
.sl-elements .sl-panel,
.sl-inverted .sl-panel,
.TryItPanel,
.sl-elements [class*="sl-panel"] {
    background: #f9fcf9 !important;
    border: 1px solid rgba(20,161,49,0.12) !important;
    border-radius: 10px !important;
}

/* Título dos painéis (cabeçalho cinza clarinho) */
.sl-elements .sl-panel__titlebar,
.sl-inverted .sl-panel__titlebar {
    background: #f3f6f3 !important;
    color: var(--text-body) !important;
    border-bottom: 1px solid rgba(20,161,49,0.08) !important;
}

/* ============================================================
   3) LINKS E BOTÕES — verde BrotasPay
   ============================================================ */
.sl-elements a,
.sl-elements .sl-text-primary,
.sl-elements [class*="text-primary"],
.sl-inverted a,
.sl-inverted [class*="text-primary"] {
    color: var(--brotas-700) !important;
}
.sl-elements a:hover, .sl-inverted a:hover { color: var(--brotas-800) !important; }

.sl-elements button[class*="bg-primary"],
.sl-inverted button[class*="bg-primary"],
.sl-elements .sl-button-primary {
    background-color: var(--brotas-500) !important;
    border-color: var(--brotas-500) !important;
    color: #ffffff !important;
}
.sl-elements button[class*="bg-primary"]:hover,
.sl-inverted button[class*="bg-primary"]:hover {
    background-color: var(--brotas-600) !important;
}

/* Send Request */
.sl-elements .tryItOut-btn,
.sl-inverted .tryItOut-btn,
button.tryItOut-btn {
    background-color: var(--brotas-500) !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 10px rgba(20,161,49,0.3);
}
.sl-elements .tryItOut-btn:hover,
button.tryItOut-btn:hover {
    background-color: var(--brotas-600) !important;
}
.tryItOut-btn:disabled {
    background-color: #d1d5db !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
.SendButtonHolder { padding: 16px !important; }

/* Inputs / textareas claros */
.sl-elements input,
.sl-elements textarea,
.sl-elements select,
.sl-inverted input,
.sl-inverted textarea,
.sl-inverted select {
    background: #ffffff !important;
    color: var(--text-body) !important;
    border: 1px solid rgba(20,161,49,0.25) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
}
.sl-elements input:focus,
.sl-elements textarea:focus {
    border-color: var(--brotas-500) !important;
    outline: 2px solid rgba(20,161,49,0.2) !important;
}

/* Badges de HTTP method — manter cor, só garantir contraste */
.sl-elements [class*="sl-bg-success"],
.sl-elements [data-name="200"] .sl-bg,
.sl-elements [data-name="201"] .sl-bg,
.sl-inverted [class*="sl-bg-success"] {
    background-color: var(--brotas-500) !important;
    color: #ffffff !important;
}

/* ============================================================
   HTTP METHOD COLORS — GET/POST/PUT/PATCH/DELETE/OPTIONS/HEAD
   Paleta por método, aplicada em:
   - cards (h2[id^="endpoints-METHOD"])
   - menu lateral (div[id^="toc-item-endpoints-METHOD"])
   ============================================================ */

:root {
    --method-get:     #3b82f6;  /* blue-500  */
    --method-get-bg:  #eff6ff;
    --method-post:    #1dc83f;  /* brotas-500 */
    --method-post-bg: #ecfdee;
    --method-put:     #f97316;  /* orange-500 */
    --method-put-bg:  #fff7ed;
    --method-patch:   #eab308;  /* yellow-500 */
    --method-patch-bg:#fefce8;
    --method-delete:  #ef4444;  /* red-500 */
    --method-delete-bg:#fef2f2;
    --method-options: #8b5cf6;  /* violet-500 */
    --method-options-bg:#f5f3ff;
    --method-head:    #14b8a6;  /* teal-500 */
    --method-head-bg: #f0fdfa;
}

/* ---------- ENDPOINT CARDS (título H2 e card container) ---------- */
.sl-elements h2[id^="endpoints-GET"]    { border-left: 5px solid var(--method-get) !important;    background: linear-gradient(90deg, var(--method-get-bg) 0%, transparent 60%) !important; padding: 8px 14px !important; border-radius: 0 8px 8px 0 !important; }
.sl-elements h2[id^="endpoints-POST"]   { border-left: 5px solid var(--method-post) !important;   background: linear-gradient(90deg, var(--method-post-bg) 0%, transparent 60%) !important; padding: 8px 14px !important; border-radius: 0 8px 8px 0 !important; }
.sl-elements h2[id^="endpoints-PUT"]    { border-left: 5px solid var(--method-put) !important;    background: linear-gradient(90deg, var(--method-put-bg) 0%, transparent 60%) !important; padding: 8px 14px !important; border-radius: 0 8px 8px 0 !important; }
.sl-elements h2[id^="endpoints-PATCH"]  { border-left: 5px solid var(--method-patch) !important;  background: linear-gradient(90deg, var(--method-patch-bg) 0%, transparent 60%) !important; padding: 8px 14px !important; border-radius: 0 8px 8px 0 !important; }
.sl-elements h2[id^="endpoints-DELETE"] { border-left: 5px solid var(--method-delete) !important; background: linear-gradient(90deg, var(--method-delete-bg) 0%, transparent 60%) !important; padding: 8px 14px !important; border-radius: 0 8px 8px 0 !important; }
.sl-elements h2[id^="endpoints-OPTIONS"]{ border-left: 5px solid var(--method-options) !important;background: linear-gradient(90deg, var(--method-options-bg) 0%, transparent 60%) !important; padding: 8px 14px !important; border-radius: 0 8px 8px 0 !important; }
.sl-elements h2[id^="endpoints-HEAD"]   { border-left: 5px solid var(--method-head) !important;   background: linear-gradient(90deg, var(--method-head-bg) 0%, transparent 60%) !important; padding: 8px 14px !important; border-radius: 0 8px 8px 0 !important; }

/* ---------- MENU LATERAL (sidebar TOC items) ---------- */
.sl-elements [id^="toc-item-endpoints-GET"]    { border-left: 4px solid var(--method-get) !important;    background: var(--method-get-bg) !important; }
.sl-elements [id^="toc-item-endpoints-POST"]   { border-left: 4px solid var(--method-post) !important;   background: var(--method-post-bg) !important; }
.sl-elements [id^="toc-item-endpoints-PUT"]    { border-left: 4px solid var(--method-put) !important;    background: var(--method-put-bg) !important; }
.sl-elements [id^="toc-item-endpoints-PATCH"]  { border-left: 4px solid var(--method-patch) !important;  background: var(--method-patch-bg) !important; }
.sl-elements [id^="toc-item-endpoints-DELETE"] { border-left: 4px solid var(--method-delete) !important; background: var(--method-delete-bg) !important; }
.sl-elements [id^="toc-item-endpoints-OPTIONS"]{ border-left: 4px solid var(--method-options) !important;background: var(--method-options-bg) !important; }
.sl-elements [id^="toc-item-endpoints-HEAD"]   { border-left: 4px solid var(--method-head) !important;   background: var(--method-head-bg) !important; }

.sl-elements [id^="toc-item-endpoints-GET"]:hover    { background: #dbeafe !important; }
.sl-elements [id^="toc-item-endpoints-POST"]:hover   { background: var(--brotas-100) !important; }
.sl-elements [id^="toc-item-endpoints-PUT"]:hover    { background: #ffedd5 !important; }
.sl-elements [id^="toc-item-endpoints-PATCH"]:hover  { background: #fef9c3 !important; }
.sl-elements [id^="toc-item-endpoints-DELETE"]:hover { background: #fee2e2 !important; }
.sl-elements [id^="toc-item-endpoints-OPTIONS"]:hover{ background: #ede9fe !important; }
.sl-elements [id^="toc-item-endpoints-HEAD"]:hover   { background: #ccfbf1 !important; }

/* link do TOC (ElementsTableOfContentsItem) — cor do método aplicada ao texto */
.sl-elements [id^="toc-item-endpoints-GET"]    .ElementsTableOfContentsItem { color: var(--method-get) !important; font-weight: 600; }
.sl-elements [id^="toc-item-endpoints-POST"]   .ElementsTableOfContentsItem { color: var(--method-post) !important; font-weight: 600; }
.sl-elements [id^="toc-item-endpoints-PUT"]    .ElementsTableOfContentsItem { color: var(--method-put) !important; font-weight: 600; }
.sl-elements [id^="toc-item-endpoints-PATCH"]  .ElementsTableOfContentsItem { color: var(--method-patch) !important; font-weight: 600; }
.sl-elements [id^="toc-item-endpoints-DELETE"] .ElementsTableOfContentsItem { color: var(--method-delete) !important; font-weight: 600; }
.sl-elements [id^="toc-item-endpoints-OPTIONS"].ElementsTableOfContentsItem,
.sl-elements [id^="toc-item-endpoints-OPTIONS"] .ElementsTableOfContentsItem { color: var(--method-options) !important; font-weight: 600; }
.sl-elements [id^="toc-item-endpoints-HEAD"]   .ElementsTableOfContentsItem { color: var(--method-head) !important; font-weight: 600; }

/* h2 dos cards — cor do texto por método também */
.sl-elements h2[id^="endpoints-GET"]    { color: var(--method-get) !important; }
.sl-elements h2[id^="endpoints-POST"]   { color: var(--method-post) !important; }
.sl-elements h2[id^="endpoints-PUT"]    { color: var(--method-put) !important; }
.sl-elements h2[id^="endpoints-PATCH"]  { color: var(--method-patch) !important; }
.sl-elements h2[id^="endpoints-DELETE"] { color: var(--method-delete) !important; }
.sl-elements h2[id^="endpoints-OPTIONS"]{ color: var(--method-options) !important; }
.sl-elements h2[id^="endpoints-HEAD"]   { color: var(--method-head) !important; }

/* ============================================================
   4) CÓDIGO — inline verde escuro, blocos claros, editor claro
   ============================================================ */

/* inline code <code> (fora de <pre>) */
.sl-elements :not(pre) > code,
.sl-inverted :not(pre) > code {
    color: var(--brotas-700) !important;
    background: var(--brotas-50) !important;
    border: 1px solid rgba(20,161,49,0.2);
    padding: 1px 6px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* Blocos de código (curl, js, response samples) — fundo claro, texto escuro */
.sl-elements pre,
.sl-inverted pre {
    background: #f7faf7 !important;
    color: var(--ink-900) !important;
    border: 1px solid rgba(20,161,49,0.18) !important;
    border-radius: 10px !important;
    padding: 14px !important;
}
.sl-elements pre code,
.sl-elements pre *,
.sl-inverted pre code,
.sl-inverted pre * {
    background: transparent !important;
    color: var(--ink-900) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* highlight.js — paleta escura pra fundo claro */
.sl-elements pre .hljs-keyword,
.sl-elements pre .hljs-selector-tag,
.sl-elements pre .hljs-literal { color: #b45309 !important; }   /* laranja escuro */
.sl-elements pre .hljs-string,
.sl-elements pre .hljs-attr    { color: var(--brotas-700) !important; }
.sl-elements pre .hljs-number,
.sl-elements pre .hljs-variable { color: #6d28d9 !important; }  /* roxo escuro */
.sl-elements pre .hljs-comment { color: #6b7280 !important; font-style: italic; }
.sl-elements pre .hljs-title,
.sl-elements pre .hljs-function { color: var(--brotas-800) !important; }
.sl-elements pre .hljs-punctuation { color: #374151 !important; }

/* Code editor (JSON body) + response content — fundo claro, texto escuro */
.code-editor,
.code-editor *,
.response-content,
.response-content *,
.sl-elements .code-editor,
.sl-elements .code-editor *,
.sl-elements .response-content,
.sl-elements .response-content *,
.sl-inverted .code-editor,
.sl-inverted .code-editor *,
.sl-inverted .response-content,
.sl-inverted .response-content * {
    color: var(--ink-900) !important;
    background-color: transparent !important;
}
.code-editor,
.response-content,
.sl-elements .code-editor,
.sl-elements .response-content,
.sl-inverted .code-editor,
.sl-inverted .response-content {
    background: #f7faf7 !important;
    border: 1px solid rgba(20,161,49,0.2) !important;
    border-radius: 8px !important;
    padding: 12px !important;
}
.code-editor .hljs-attr    { color: var(--brotas-700) !important; }
.code-editor .hljs-string  { color: var(--brotas-800) !important; }
.code-editor .hljs-number  { color: #6d28d9 !important; }
.code-editor .hljs-literal { color: #b45309 !important; }
.code-editor .hljs-keyword { color: #b45309 !important; }
.code-editor .hljs-punctuation { color: #374151 !important; }

.TextRequestBody {
    background: transparent !important;
}

/* ============================================================
   5) OVERFLOW — garantir que nada seja clipado (Send Request etc)
   ============================================================ */
.sl-inverted .sl-overflow-y-hidden,
.TryItPanel,
.SendButtonHolder {
    overflow: visible !important;
    overflow-y: visible !important;
}

/* ============================================================
   6) LOGO + HEADER + FOOTER
   ============================================================ */
#sidebar .logo,
.sl-elements img[alt*="logo"],
.scribe-logo img {
    max-height: 48px !important;
    width: auto !important;
}
.sl-elements header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(10,10,10,0.06) !important;
}

body::after {
    content: "© 2026 BrotasPay · CNPJ 46.186.761/0001-80 · carteira digital de pagamento · docs: api.brotaspay.com.br";
    display: block;
    padding: 14px 24px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    border-top: 1px solid rgba(10,10,10,0.06);
    background: #fafafa;
}