/* ==========================================================================
   TELA LIMPA — camada visual opt-in
   ==========================================================================
   Direção escolhida em 13/08/2026: "mais limpo e espaçado". Menos caixa, menos
   borda, menos sombra; hierarquia pela tipografia em vez de por moldura; cor
   apenas onde ela significa alguma coisa (pago, pendente, atrasado, ativo).

   Por que é escopado em .gd-clean: o sistema tem 19 arquivos CSS e três
   gerações de componente convivendo. Reescrever os arquivos antigos mudaria
   76 telas de uma vez, sem como testar. Aqui a tela entra na linguagem nova
   quando recebe a classe no seu contêiner — uma de cada vez, com o antigo
   intacto até a última migrar.

   O que esta camada NÃO faz: não muda estrutura, não renomeia classe, não
   remove elemento. É só aparência, e sai inteira apagando uma classe.
   ========================================================================== */

.gd-clean {
    /* Superfície: escolher UMA delimitação. O padrão antigo usava borda e
       sombra ao mesmo tempo em cada caixa, o que empilha ruído sem hierarquia. */
    --limpa-borda: 1px solid var(--border-color);
    --limpa-surface: var(--bg-surface);
    --limpa-radius: var(--radius-md);
    --limpa-hover: rgba(15, 23, 42, 0.025);
}

html[data-bs-theme="dark"] .gd-clean {
    --limpa-hover: rgba(148, 163, 184, 0.07);
}

/* --------------------------------------------------------------------------
   1. INDICADORES (KPI)
   Antes: 4 caixas brancas com borda + sombra + barra de progresso colorida,
   cada uma com 5 tamanhos de fonte. O número competia com o rótulo, com a
   legenda e com a barra.
   Agora: o número domina, o resto recua.
   -------------------------------------------------------------------------- */

.gd-clean .gd-kpi-box,
.gd-clean .ds-kpi-box,
.gd-clean .card-kpi-premium {
    background: var(--limpa-surface);
    border: var(--limpa-borda);
    border-radius: var(--limpa-radius);
    box-shadow: none;
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Rótulo: pequeno, neutro, sem concorrer com o número.
   O comentário acima já dizia isso, mas o peso ficou em --font-weight-medium
   (500) — o mesmo peso do número (ver a regra do valor, logo abaixo) — então
   os dois competiam em vez de um recuar pro outro. Trocado pra
   --font-weight-regular pra bater com a própria intenção do comentário, e
   pra ficar igual ao mesmo rótulo fora do modo limpo (.gd-card-header
   h6.text-style em studio-theme.css), que já usa regular. */
.gd-clean .gd-kpi-box .text-style,
.gd-clean .gd-kpi-box h6 {
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin: 0;
}

/* O número é o único elemento grande do cartão.
   O peso fica com o .fw-medium que o HTML já traz (utilitário do Bootstrap, com
   !important). Peso 500 em 28px é o que a direção limpa pede — semibold aqui
   pesa demais —, então não vale disputar com !important só para chegar no mesmo
   lugar. Se um dia a classe sair do HTML, o peso cai para o do tema. */
.gd-clean .gd-kpi-box .gd-kpi-value,
.gd-clean .ds-kpi-box .ds-kpi-value,
.gd-clean .gd-kpi-box .kpi-value,
.gd-clean .ds-kpi-box .kpi-value {
    font-size: var(--fs-xl);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* Legenda e meta: um degrau abaixo do corpo, nunca dois tamanhos diferentes
   na mesma linha */
.gd-clean .gd-card-meta-row,
.gd-clean .gd-legend-wrapper,
.gd-clean .gd-text-xs,
.gd-clean .span-detalhes {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* A barra de progresso vira um traço fino: informa sem pesar.
   São três nomes para a mesma coisa, de gerações diferentes do CSS —
   .gd-progress-track, .ds-progress-track e o .progress do Bootstrap. Cobrir só
   dois deixava barra de 3px ao lado de barra de 8px na mesma tela. */
.gd-clean .gd-progress-track,
.gd-clean .ds-progress-track,
.gd-clean .progress {
    height: 3px !important;
    min-height: 3px;
    background: var(--border-soft);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.gd-clean .gd-progress-track .progress-bar,
.gd-clean .ds-progress-track .progress-bar,
.gd-clean .progress .progress-bar {
    height: 100%;
    border-radius: var(--radius-pill);
}

/* O ⋯ decorativo de cada cartão só aparece quando o cartão é apontado */
.gd-clean .gd-card-header .fa-ellipsis {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.gd-clean .gd-kpi-box:hover .gd-card-header .fa-ellipsis {
    opacity: 0.4;
}

/* --------------------------------------------------------------------------
   2. CONTÊINER DE TABELA
   Uma borda, sem sombra. O cartão deixa de flutuar e passa a delimitar.
   -------------------------------------------------------------------------- */

.gd-clean .gd-table-container {
    background: var(--limpa-surface);
    border: var(--limpa-borda);
    border-radius: var(--limpa-radius);
    box-shadow: none;
    overflow: hidden;
}

.gd-clean .gd-table-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: var(--limpa-borda);
    background: transparent;
}
.gd-clean .gd-table-header h6 {
    font-size: var(--fs-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
    margin: 0;
}
/* Ícone colorido antes do título de seção é decoração, não informação */
.gd-clean .gd-table-header h6 > i:first-child {
    display: none;
}

/* --------------------------------------------------------------------------
   3. TABELA
   O cabeçalho antigo era uma faixa escura de alto contraste. Aqui ele é só
   um rótulo: caixa alta pequena, cor fraca, separado por uma linha.
   -------------------------------------------------------------------------- */

/* A faixa colorida do cabeçalho pode estar em qualquer um dos três: no <thead>
   (financeiro), no <tr> ou no <th>. Limpar só o <th> — como eu fazia — deixava
   a faixa azul do financeiro aparecendo por baixo, com o texto cinza em cima:
   1,13:1 de contraste, ilegível. Limpa os três. */
.gd-clean .gd-table thead,
.gd-clean .gd-table thead tr,
.gd-clean table thead,
.gd-clean table thead tr {
    background: transparent !important;
    background-image: none !important;
}
/* --text-soft (#9ca3af) sobre branco da 2,54:1 — reprova no WCAG AA, que exige
   4,5:1 para texto pequeno. Em caixa alta de 12px fica pior ainda. --text-muted
   (#6b7280) da 5,3:1 e continua discreto o bastante para o cabecalho recuar. */
.gd-clean .gd-table thead th {
    font-size: var(--fs-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: transparent;
    border-bottom: var(--limpa-borda);
    padding: var(--sp-3) var(--sp-4);
    white-space: nowrap;
}
/* O cabeçalho antigo era uma faixa escura, então o texto dele é branco — às
   vezes via .text-white (utilitário do Bootstrap, com !important), às vezes
   herdado do <thead>. Ao remover a faixa, TUDO que está no cabeçalho precisa
   trocar de cor junto, não só os links: na primeira tentativa eu cobri apenas
   os <a> e os títulos de coluna sem link ficaram brancos sobre branco — 1,00:1
   de contraste, invisíveis, em 12 telas.
   O seletor pega o th e seus filhos; as cores semânticas da seção 4.1 vêm
   depois no arquivo e continuam vencendo onde a cor significa alguma coisa. */
.gd-clean .gd-table thead th,
.gd-clean .gd-table thead th *,
.gd-clean table thead th,
.gd-clean table thead th * {
    color: var(--text-muted) !important;
}
.gd-clean .gd-table thead th a,
.gd-clean table thead th a {
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}
.gd-clean .gd-table thead th a:hover,
.gd-clean .gd-table thead th a:hover * {
    color: var(--color-accent) !important;
}
/* Setas de ordenação: presentes, mas discretas */
.gd-clean .gd-table thead th a i {
    font-size: 0.85em;
    opacity: 0.5;
}
/* Ícone opaco antes de cada título de coluna: ruído repetido 7 vezes */
.gd-clean .gd-table thead th > i:first-child {
    display: none;
}

.gd-clean .gd-table tbody td {
    padding: var(--sp-4);
    vertical-align: middle;
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--fs-base);
}
.gd-clean .gd-table tbody tr:last-child td {
    border-bottom: 0;
}
.gd-clean .gd-table tbody tr {
    transition: background-color 0.12s ease;
}
.gd-clean .gd-table tbody tr:hover {
    background: var(--limpa-hover);
}

/* Nome do cliente: único texto forte da linha */
.gd-clean .gd-table tbody td .fw-medium.text-dark,
.gd-clean .gd-table tbody td .ds-client-name {
    font-size: var(--fs-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-dark);
    letter-spacing: -0.006em;
}

/* Tudo que é apoio — cidade, serviço, data, contagem — no mesmo degrau */
.gd-clean .gd-table tbody td .text-secondary,
.gd-clean .gd-table tbody td .text-muted,
.gd-clean .gd-table tbody td small {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Valores monetários alinham por dígito */
.gd-clean .gd-table tbody td .fw-medium.text-danger,
.gd-clean .gd-table tbody td .dp-money {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   4. COR COM SIGNIFICADO
   O avatar era colorido por id % 6 — seis cores rotativas sem relação com
   nada. Vira neutro; a cor fica reservada para estado.
   -------------------------------------------------------------------------- */

/* TENTATIVA REVERTIDA — o avatar continua colorido, de proposito.
   A ideia era neutralizar o fundo (ele e sorteado por id % 6, sem significar
   nada) e deixar a cor so para estado. Nao da: getAvatarHtml() decide no PHP a
   cor do TEXTO a partir do fundo que ele mesmo escolheu, e grava inline com
   style="color: #ffffff !important". Inline com !important e o topo da cascata:
   nenhuma regra de folha de estilo vence. Ao clarear so o fundo, as iniciais
   brancas ficaram a 1,10:1 — invisiveis em 4 telas.
   Para neutralizar de verdade e preciso mudar getAvatarHtml() em PHP, o que sai
   do escopo de uma camada que so mexe em aparencia. Fica so a sombra, que da
   para tirar sem tocar na dupla fundo/texto. */
.gd-clean .gd-table tbody .gd-avatar {
    box-shadow: none !important;
}
.gd-clean .gd-table tbody .gd-avatar img {
    border-radius: inherit;
}

/* Chip de status: sem preenchimento saturado, só um ponto de cor + texto.
   O texto vira neutro de propósito (é isso que tira o "preenchimento
   saturado"), mas isso também apaga a cor de quem lia currentColor — o ponto
   ficava cinza junto, sem sinalizar nada. --status-dot é a saída: uma custom
   property não é tocada por um `color: ... !important` que mira só `color`,
   então o PHP pode continuar mandando a cor do status (ex: style="...
   --status-dot: var(--color-danger, #ef4444)") e o ponto a recebe direto,
   sem depender de currentColor. Sem a variável, cai de volta em currentColor
   (cinza) — não quebra elementos que ainda não mandam --status-dot. */
.gd-clean .dropdown-toggle[style*="background-color"] {
    background: transparent !important;
    color: var(--text-body) !important;
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--fs-sm) !important;
    border: var(--limpa-borda) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--sp-1) var(--sp-2) !important;
}
.gd-clean .dropdown-toggle[style*="background-color"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-dot, currentColor);
    margin-right: var(--sp-2);
    flex-shrink: 0;
    opacity: 0.9;
}

/* Botões de contato: fantasma, ganham peso só no hover */
.gd-clean .gd-contato-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-soft);
    transition: color 0.12s ease, background-color 0.12s ease;
}
.gd-clean .gd-contato-icon-btn:hover {
    background: var(--bg-subtle);
    color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   4.1 COR SEMÂNTICA LEGÍVEL COMO TEXTO
   --------------------------------------------------------------------------
   Auditoria de contraste em 13/08/2026, nas 10 telas migradas: 14 textos abaixo
   de 3:1, todos usando as cores de estado como cor de letra sobre branco.

     verde  #10b981 -> 2,54:1     ambar  #f59e0b -> 2,15:1
     ambar do Bootstrap #ffc107 -> 1,63:1     ciano #0dcaf0 -> 1,96:1

   O problema e pre-existente e nao veio desta camada: os mesmos valores
   reprovam em marketing.php, que nao foi migrada. Mas essas cores foram
   escolhidas para PREENCHIMENTO (barra, badge, ponto), onde funcionam bem, e
   estao sendo usadas tambem como cor de letra, onde nao funcionam.

   A correcao mantem a mesma familia de cor, so escurece o suficiente para o
   texto passar em 4,5:1. O preenchimento continua com o tom claro original —
   por isso as regras miram cor de texto, nunca background.
   -------------------------------------------------------------------------- */

.gd-clean {
    --texto-success: #047857;
    --texto-warning: #b45309;
    --texto-danger:  #b91c1c;
    --texto-info:    #0369a1;
}
html[data-bs-theme="dark"] .gd-clean {
    /* No escuro o problema se inverte: precisa clarear, nao escurecer. */
    --texto-success: #34d399;
    --texto-warning: #fbbf24;
    --texto-danger:  #f87171;
    --texto-info:    #38bdf8;
}

/* !important porque .text-success e companhia sao utilitarios do Bootstrap,
   que ja vem com !important — sem isso a regra nunca ganha. */
.gd-clean .text-success  { color: var(--texto-success) !important; }
.gd-clean .text-warning  { color: var(--texto-warning) !important; }
.gd-clean .text-danger   { color: var(--texto-danger)  !important; }
.gd-clean .text-info     { color: var(--texto-info)    !important; }

/* Nas classes do proprio sistema, mesmo tratamento */
.gd-clean .gd-kpi-value--success { color: var(--texto-success) !important; }
.gd-clean .gd-kpi-value--danger  { color: var(--texto-danger)  !important; }

/* Valores do extrato financeiro: 26 ocorrencias a 2,54:1 na tela do financeiro,
   e nas linhas pendentes ainda por cima de um .opacity-50, que derruba mais. */
.gd-clean .gd-fin-value-pos { color: var(--texto-success) !important; }
.gd-clean .gd-fin-value-neg { color: var(--texto-danger)  !important; }

/* opacity-50 sobre texto ja discreto vira ilegivel. 0,75 mantem a distincao
   entre pendente e pago sem apagar o valor. */
.gd-clean .gd-fin-value.opacity-50,
.gd-clean .gd-fin-row .opacity-50 {
    opacity: 0.75 !important;
}

/* Parte desses textos nao usa classe: traz o hex direto em style="color: #10b981".
   Regra de estilo com !important vence style inline sem !important, entao dá para
   corrigir sem editar o PHP. Os tres valores abaixo sao os que de fato aparecem
   (medidos em financeiro.php, tarefas.php e planos.php).
   Isto e emplastro consciente: o certo e a tela usar .text-success/.text-warning
   e o hex sumir do markup. Fica para quando esses arquivos forem mexidos. */
.gd-clean [style*="#10b981"] { color: var(--texto-success) !important; }
.gd-clean [style*="#f59e0b"] { color: var(--texto-warning) !important; }
.gd-clean [style*="#ef4444"] { color: var(--texto-danger)  !important; }

/* Preenchimento continua com o tom claro: estas regras nao tocam em background,
   e o icone dentro de um badge herda a cor do badge, nao destas. */
.gd-clean .badge.bg-success,
.gd-clean .badge.bg-warning,
.gd-clean .badge.bg-danger,
.gd-clean .badge.bg-info {
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   5. ABAS E FILTROS
   -------------------------------------------------------------------------- */

.gd-clean .nav-tabs {
    border-bottom: var(--limpa-borda);
    gap: var(--sp-1);
}
.gd-clean .nav-tabs .nav-link {
    font-size: var(--fs-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: var(--sp-2) var(--sp-3);
    background: transparent;
}
.gd-clean .nav-tabs .nav-link:hover {
    color: var(--text-dark);
}
.gd-clean .nav-tabs .nav-link.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    background: transparent;
}

/* --------------------------------------------------------------------------
   6. RITMO VERTICAL
   Um espaçamento entre blocos, não três diferentes.
   -------------------------------------------------------------------------- */

.gd-clean .gd-table-container,
.gd-clean .ds-kpi-row,
.gd-clean .row.g-3 {
    margin-bottom: var(--sp-5);
}