/*
 * IAdvogar — Tokens de design centralizados
 * ------------------------------------------------------------------
 * Antes: cada HTML redeclarava este bloco inteiro dentro de um
 * <style type="text/tailwindcss"> próprio (drift real: --radius era
 * 0.75rem em clients.html, 0.5rem em auth/subscription e ausente em
 * dashboard.html). Agora todo HTML carrega este arquivo via
 * <link rel="stylesheet"> e mantém no próprio <style> só o que for
 * específico daquela página.
 *
 * IMPORTANTE — mecanismo de tema: os valores abaixo em :root são o
 * tema ESCURO (padrão da aplicação, <html class="dark">). O tema claro
 * e as variantes "Escuro Suave"/"Claro Suave" vêm LOGO EM SEGUIDA,
 * neste mesmo arquivo — antes ficavam numa string dentro de um
 * React.useEffect de components/Sidebar.js, o que fazia toda tela
 * nascer escura e piscar para clara depois que o Babel compilava, e
 * deixava escuras para sempre as páginas que não carregam o Sidebar
 * (auth, admin, subscription, update-password, index, o portal de
 * documentos, termos e política).
 *
 * Quem escolhe a classe continua sendo o seletor de tema do menu
 * lateral (components/Sidebar.js: classList.toggle('dark', …) +
 * data-theme-variant, gravando em localStorage nas chaves
 * iadvogar_theme_mode / iadvogar_theme). Para a PRIMEIRA pintura,
 * cada .html tem no <head>, antes deste <link>, um <script> síncrono
 * minúsculo que lê essas mesmas chaves e já aplica a classe.
 * Exceção de propósito: index.html (a landing) NÃO tem o script — ela foi
 * desenhada só para o escuro (text-gray-300/400 fixos) e continua escura
 * mesmo para quem salvou o tema claro.
 *
 * A cor de destaque (<style id="accent-color-styles">, injetada em
 * runtime pelo Sidebar) usa os mesmos seletores ":root" e
 * ":root:not(.dark)" com a mesma especificidade e entra no <head>
 * depois deste arquivo — por isso continua vencendo o dourado padrão.
 */

:root {
    --background: #212121;
    --foreground: #ececec;
    --card: #2f2f2f;
    --card-foreground: #ececec;
    --popover: #2f2f2f;
    --popover-foreground: #ececec;
    --primary: #c2a052;
    --primary-foreground: #ffffff;
    --secondary: #2f2f2f;
    --secondary-foreground: #ececec;
    --muted: #2f2f2f;
    --muted-foreground: #b4b4b4;
    --accent: #383838;
    --accent-foreground: #ececec;
    --border: #424242;
    --input: #424242;
    --ring: #c2a052;
    --radius: 0.75rem;
}

/* Tema "Claro" (padrão claro). Paleta com tom quente (papel), revisada
   pra não ficar "estourada" de branco — fundo e cartão ficam mais
   próximos um do outro, com a separação vindo mais da borda do que de
   um salto grande de luminosidade. */
:root:not(.dark) {
    --background: #e8e2d2;
    --foreground: #26211a;
    --card: #f2ecdd;
    --card-foreground: #26211a;
    --popover: #f2ecdd;
    --popover-foreground: #26211a;
    --primary: #ad7f34;
    --primary-foreground: #ffffff;
    --secondary: #ddd4bd;
    --secondary-foreground: #26211a;
    --muted: #ddd4bd;
    --muted-foreground: #6d6252;
    --accent: #ddd4bd;
    --accent-foreground: #26211a;
    --border: #cfc2a0;
    --input: #cfc2a0;
    --ring: #ad7f34;
}

/* Variantes extras de tema ("Escuro Suave" e "Claro Suave"). Usam um
   atributo no <html> (data-theme-variant) combinado com .dark pra ganhar
   mais especificidade do que as paletas padrão acima — assim sempre
   vencem, não importa a ordem. */
:root.dark[data-theme-variant="escuro-suave"] {
    --background: #262220;
    --foreground: #f0ece6;
    --card: #322d2a;
    --card-foreground: #f0ece6;
    --popover: #322d2a;
    --popover-foreground: #f0ece6;
    --secondary: #3a332e;
    --secondary-foreground: #f0ece6;
    --muted: #3a332e;
    --muted-foreground: #b6ac9f;
    --accent: #3d3733;
    --accent-foreground: #f0ece6;
    --border: #4a433d;
    --input: #4a433d;
}
:root:not(.dark)[data-theme-variant="claro-suave"] {
    --background: #e7e5e0;
    --foreground: #2b2a27;
    --card: #f0eee9;
    --card-foreground: #2b2a27;
    --popover: #f0eee9;
    --popover-foreground: #2b2a27;
    --secondary: #dcd9d1;
    --secondary-foreground: #2b2a27;
    --muted: #dcd9d1;
    --muted-foreground: #6b6860;
    --accent: #dcd9d1;
    --accent-foreground: #2b2a27;
    --border: #cac6ba;
    --input: #cac6ba;
}

/* Equivalente ao antigo `@layer base { * { @apply border-[var(--border)] } }`.
   O seletor precisa ser `html *` (e não `*`) porque o preflight do Tailwind
   emite `*, ::before, ::after { border-color: rgb(229,231,235) }` SEM camada
   e DEPOIS deste arquivo no <head>: com `*` puro (especificidade 0,0,0) o
   preflight vencia por ordem e as bordas sem classe de cor voltavam pro cinza
   claro do Tailwind. `html *` (0,0,1) vence o preflight e continua perdendo
   para qualquer classe utilitária (0,1,0). */
html * {
    border-color: var(--border);
}

/* Só o que é 100% igual em toda página (cor/fonte). margin/padding,
   overflow-hidden, antialiased e transition-colors variam de página pra
   página no HTML original (ex.: politica-de-privacidade.html e
   termos-de-uso.html não tinham m-0/p-0) — por isso ficam no <style>
   residual de cada HTML, não aqui, pra não alterar nada visualmente. */
body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ------------------------------------------------------------------
 * Scrollbar customizada (igual em todas as páginas)
 * ------------------------------------------------------------------ */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground);
}

/* ------------------------------------------------------------------
 * Animações
 * ------------------------------------------------------------------ */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fade-in 0.25s ease-out;
}

/* ------------------------------------------------------------------
 * Botões shadcn (hoje só existiam em auth.html/chat.html/subscription.html/
 * update-password.html — mantidos com o mesmo nome e valores para não
 * quebrar quem já usa essas classes)
 * ------------------------------------------------------------------ */
.shadcn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    height: 2.5rem;
    padding: 0.5rem 1rem;
}
.shadcn-btn:active {
    transform: scale(0.98);
}
.shadcn-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring);
}
.shadcn-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}
.shadcn-btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
}
.shadcn-btn-primary:hover {
    opacity: 0.9;
}
.shadcn-btn-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}
.shadcn-btn-secondary:hover {
    opacity: 0.8;
}
.shadcn-btn-ghost:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}
.shadcn-input {
    display: flex;
    height: 2.5rem;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid var(--input);
    background-color: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}
.shadcn-input::placeholder {
    color: var(--muted-foreground);
}
.shadcn-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring);
}

/* ------------------------------------------------------------------
 * Novos utilitários (D-1): equivalentes às strings Tailwind já usadas
 * à mão nas telas internas (ex.: botão primário de clients-app.js:2230,
 * estado vazio de clients-app.js:2241-2247). Uso gradual — não força
 * refatoração do JSX existente agora.
 * ------------------------------------------------------------------ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.btn-primary:hover {
    opacity: 0.9;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--card);
    color: var(--foreground);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-secondary:hover {
    background-color: var(--accent);
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #ef4444; /* red-500, igual ao confirmModal de clients-app.js:4678 */
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.btn-danger:hover {
    background-color: #dc2626; /* red-600 */
}

.card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}
.badge-success {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}
.badge-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.badge-neutral {
    background-color: var(--accent);
    color: var(--muted-foreground);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    background-color: var(--card);
    border-radius: 0.75rem;
    border: 1px solid var(--border);
}
.empty-state-icon {
    width: 4rem;
    height: 4rem;
    background-color: var(--background);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--muted-foreground);
}
.empty-state-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.empty-state-desc {
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

/* ------------------------------------------------------------------
 * Fontes da peça no editor (Quill) — pedido do dono: "mais fontes no
 * editor". A lista está em components/RichTextEditorModal.js
 * (EDITOR_FONTES); aqui ficam o DESENHO de cada família no texto
 * (.ql-font-<id>, a classe que o Quill escreve no HTML) e o RÓTULO de
 * cada opção dentro do seletor da barra — sem estas regras o menu
 * mostraria "Sans Serif" e nada mais, porque o CSS do tema Snow só traz
 * rótulo para serif/monospace.
 *
 * P2-1 — cada seletor abaixo começa com `html` DE PROPÓSITO. Na maioria das
 * telas este arquivo é carregado depois do quill.snow.min.css e venceria por
 * ordem, mas em financial.html não há <link> de Quill nenhum: o tema é
 * injetado em RUNTIME (financial-app.js, ensureRichTextEditorLoaded), ou seja,
 * DEPOIS deste arquivo. Com a especificidade empatada quem vencia era o tema,
 * e a barra da Proposta Comercial ficava com os rótulos e os ícones do Snow.
 * O `html` (um seletor de tipo a mais) faz estas regras vencerem em qualquer
 * ordem, e continua perdendo para qualquer classe utilitária.
 *
 * A família padrão (Arial) é a AUSÊNCIA de classe: ela é aplicada no
 * próprio .ql-editor pelo JS, não por uma classe de trecho.
 * ------------------------------------------------------------------ */
html .ql-font-times { font-family: 'Times New Roman', Times, serif; }
html .ql-font-calibri { font-family: Calibri, Candara, 'Segoe UI', sans-serif; }
html .ql-font-georgia { font-family: Georgia, 'Times New Roman', serif; }
html .ql-font-garamond { font-family: Garamond, 'EB Garamond', 'Times New Roman', serif; }
html .ql-font-courier { font-family: 'Courier New', Courier, monospace; }

/* O seletor precisa caber "Times New Roman" — o padrão do tema Snow tem
   108px e cortava o nome no meio. */
html .ql-snow .ql-picker.ql-font {
    width: 148px;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: 'Arial';
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times"]::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times"]::before {
    content: 'Times New Roman';
    font-family: 'Times New Roman', Times, serif;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="calibri"]::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="calibri"]::before {
    content: 'Calibri';
    font-family: Calibri, Candara, 'Segoe UI', sans-serif;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before {
    content: 'Georgia';
    font-family: Georgia, 'Times New Roman', serif;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="garamond"]::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="garamond"]::before {
    content: 'Garamond';
    font-family: Garamond, 'EB Garamond', 'Times New Roman', serif;
}
html .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier"]::before,
html .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier"]::before {
    content: 'Courier New';
    font-family: 'Courier New', Courier, monospace;
}

/* ------------------------------------------------------------------
 * AUD-1.12 — "Alinhar à esquerda" de verdade
 * ------------------------------------------------------------------
 * A folha do editor é JUSTIFICADA por padrão (é o padrão de uma peça, e
 * é o que utils/export.js gera). No Quill 1.3.6, "esquerda" era a
 * AUSÊNCIA de classe — ou seja, era o próprio padrão: o parágrafo
 * alinhado à esquerda era salvo sem marca nenhuma e reabria justificado.
 * Agora 'left' entra na whitelist do formato `align`
 * (registrarAlinhamentoEsquerda, em components/RichTextEditorModal.js) e
 * vira esta classe, que o tema Snow não traz.
 * ------------------------------------------------------------------ */
html .ql-editor .ql-align-left {
    text-align: left;
}

/* ------------------------------------------------------------------
 * AUD-1.22 — TEMA ESCURO DA BARRA DO QUILL
 * ------------------------------------------------------------------
 * O tema Snow fixa stroke/color em #444 (cinza-escuro). Todas as
 * páginas do sistema abrem com <html class="dark"> e a barra foi movida
 * para um contêiner de fundo escuro (toolbarSlotRef), então os ícones
 * ficavam praticamente invisíveis. Aqui eles passam a seguir as
 * variáveis do projeto — e, como são as MESMAS variáveis nos dois temas,
 * a barra continua certa no claro.
 * P2-1 — o `html` na frente de cada seletor é o que faz estas regras valerem
 * TAMBÉM em financial.html, onde o quill.snow.min.css é injetado em runtime
 * (depois deste arquivo) e, com a especificidade empatada, vencia por ordem:
 * os ícones da barra continuavam #444 sobre fundo escuro.
 * ------------------------------------------------------------------ */
html .ql-snow .ql-stroke,
html .ql-snow .ql-stroke-miter {
    stroke: var(--foreground);
}
html .ql-snow .ql-fill,
html .ql-snow .ql-stroke.ql-fill {
    fill: var(--foreground);
}
html .ql-snow .ql-picker,
html .ql-snow .ql-picker-label,
html .ql-snow .ql-picker-item {
    color: var(--foreground);
}
html .ql-snow .ql-picker-label,
html .ql-snow.ql-toolbar button {
    border-radius: 6px;
}
/* Lista suspensa (Fonte, Título, Alinhamento) sobre o fundo do cartão,
   e não sobre o branco fixo do tema. */
html .ql-snow .ql-picker-options {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--foreground);
}
html .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: var(--border);
}
/* Passar o mouse e a opção escolhida: destaque discreto, sem o azul
   fixo do tema. */
html .ql-snow.ql-toolbar button:hover,
html .ql-snow .ql-picker-item:hover,
html .ql-snow .ql-picker-label:hover {
    background-color: var(--accent);
    color: var(--foreground);
}
html .ql-snow.ql-toolbar button:hover .ql-stroke,
html .ql-snow .ql-picker-label:hover .ql-stroke,
html .ql-snow .ql-picker-item:hover .ql-stroke {
    stroke: var(--foreground);
}
html .ql-snow.ql-toolbar button:hover .ql-fill,
html .ql-snow .ql-picker-label:hover .ql-fill,
html .ql-snow .ql-picker-item:hover .ql-fill {
    fill: var(--foreground);
}
/* Formato ATIVO no trecho onde o cursor está. */
html .ql-snow.ql-toolbar button.ql-active,
html .ql-snow .ql-picker-item.ql-selected,
html .ql-snow .ql-picker-label.ql-active {
    color: var(--primary);
}
html .ql-snow.ql-toolbar button.ql-active .ql-stroke,
html .ql-snow .ql-picker-item.ql-selected .ql-stroke,
html .ql-snow .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--primary);
}
html .ql-snow.ql-toolbar button.ql-active .ql-fill,
html .ql-snow .ql-picker-item.ql-selected .ql-fill,
html .ql-snow .ql-picker-label.ql-active .ql-fill {
    fill: var(--primary);
}

/* ------------------------------------------------------------------
 * P-R1 — BOTÕES DE RECUO (sublista) NA BARRA DO QUILL
 * ------------------------------------------------------------------
 * "Aumentar/Diminuir recuo" só valem dentro de um item de lista (e o
 * teto é o 3º nível, que é o que o Salvar e a exportação guardam), então
 * eles ganham `disabled` conforme o cursor — quem liga e desliga é
 * atualizarBotoesDeRecuo(), em components/RichTextEditorModal.js. O tema
 * Snow não prevê botão desligado: sem isto, o botão apagado continuaria
 * acendendo no hover, como se ainda fizesse alguma coisa.
 * ------------------------------------------------------------------ */
html .ql-snow.ql-toolbar button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
html .ql-snow.ql-toolbar button[disabled]:hover {
    background-color: transparent;
}
html .ql-snow.ql-toolbar button[disabled]:hover .ql-stroke {
    stroke: var(--foreground);
}
html .ql-snow.ql-toolbar button[disabled]:hover .ql-fill {
    fill: var(--foreground);
}

/* ------------------------------------------------------------------
 * P-R1 — A BARRA DO EDITOR NO CELULAR
 * ------------------------------------------------------------------
 * Fonte + Título + negrito/itálico/sublinhado + alinhamento + duas
 * listas + dois recuos + limpar não cabem em 375 px.
 *
 * R6-P0-1 — NADA DE `overflow` AQUI. A barra chegou a ROLAR DE LADO,
 * mas o Quill Snow abre as listas suspensas (Fonte, Título, Alinhamento)
 * com `position: absolute; top: 100%` dentro do `.ql-picker`: qualquer
 * ancestral com overflow diferente de `visible` RECORTA esse popup, e os
 * três seletores ficavam inutilizáveis no celular. E não adianta pedir
 * `overflow-y: visible` com `overflow-x: auto` — pela especificação o
 * navegador converte o eixo `visible` em `auto` quando o outro rola.
 *
 * Então a barra QUEBRA EM LINHAS (flex-wrap) com os grupos compactos:
 * são ~34 px a mais empurrando a folha para baixo, muito menos ruim do
 * que um seletor de fonte que não abre. Todos os botões (inclusive os
 * dois de recuo) continuam visíveis, sem rolagem escondida.
 * A classe vem do slot em RichTextEditorModal.js.
 * ------------------------------------------------------------------ */
@media (max-width: 639px) {
    html .editor-barra-quill .ql-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 4px;
    }
    html .editor-barra-quill .ql-toolbar .ql-formats {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        margin-right: 8px;
    }
}

/* ==========================================================
   Faixa de aviso de manutenção programada
   ==========================================================
   components/Sidebar.js publica a altura da faixa amarela em
   --faixa-manutencao (0px quando não há aviso). A faixa é "fixed" no topo
   e cobriria o cabeçalho de cada tela, então o shell de cada página
   reserva esse espaço no topo. Com box-sizing: border-box (preflight do
   Tailwind), a altura total continua 100dvh — só a área de conteúdo
   encolhe.

   Os shells das telas internas são sempre um filho direto de #root com
   "flex h-[100dvh] ..." (dashboard, clientes, financeiro, prazos,
   modelos, estúdio, casos, relatórios, notícias, calculadora, perfil,
   notificações, secretária, chat) ou "flex h-screen ..." (parceiros). */
:root { --faixa-manutencao: 0px; }

body > #root > .h-screen,
body > #root > [class*="h-[100dvh]"] {
    padding-top: var(--faixa-manutencao, 0px);
}
