/* =========================================================
   TEMA ESCURO E PREFERENCIAS DE EXIBICAO

   O tema troca so' as variaveis de cor. Como as telas usam
   var(--papo-*) em vez de cores fixas, nao precisa reescrever
   nenhuma regra de layout aqui embaixo.
   ========================================================= */

[data-tema="escuro"] {
    /* Marca — o laranja continua o mesmo; o azul clareia para
       nao sumir contra o fundo escuro */
    --papo-navy: #16305f;
    --papo-navy-dark: #0d1f42;
    --papo-navy-soft: #1e2c4a;

    /* Superficies */
    --papo-bg: #10131c;
    --papo-surface: #191d29;
    --papo-campo: #1f2431;
    --papo-text: #e6e9f2;
    --papo-muted: #9aa3b5;
    --papo-border: #2a3040;

    /* Azul de texto clareia; o azul de fundo (--papo-navy) fica
       escuro, senao a barra e o cabecalho da tabela clareariam */
    --papo-titulo: #cfdcf5;

    /* Estados — cor mais clara para ler no escuro, fundo mais
       fechado para o selo nao virar um borrao aceso */
    --papo-success: #35d19a;
    --papo-success-soft: #12332a;
    --papo-warning: #f0b34a;
    --papo-warning-soft: #33280f;
    --papo-danger: #ff6b7a;
    --papo-danger-soft: #351a20;
    --papo-info: #58b3ea;
    --papo-info-soft: #12293b;
    --papo-neutral: #a8b0c0;
    --papo-neutral-soft: #232936;

    /* Sombra no escuro e' quase invisivel; o que separa os
       cartoes do fundo passa a ser a borda */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 22px 48px rgba(0, 0, 0, 0.60);

    --bs-body-color: var(--papo-text);
    --bs-body-bg: var(--papo-bg);
    --bs-border-color: var(--papo-border);


    /*
     * Variaveis-base do proprio Bootstrap.
     *
     * Sem isto elas continuam claras no tema escuro, e todo estado
     * de "passar o mouse" que o Bootstrap desenha — item de menu,
     * linha de tabela, lista — pinta um fundo quase branco por cima
     * do texto claro. E' a correcao na raiz: acerta de uma vez todos
     * os componentes dele, em vez de remendar um por um.
     */
    --bs-body-color: var(--papo-text);
    --bs-body-color-rgb: 230, 233, 242;
    --bs-body-bg: var(--papo-bg);
    --bs-body-bg-rgb: 16, 19, 28;

    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-secondary-color: var(--papo-muted);
    --bs-secondary-bg: #232936;
    --bs-secondary-bg-rgb: 35, 41, 54;

    --bs-tertiary-color: var(--papo-muted);
    --bs-tertiary-bg: #1f2431;
    --bs-tertiary-bg-rgb: 31, 36, 49;

    --bs-heading-color: var(--papo-titulo);
    --bs-border-color: var(--papo-border);
    --bs-highlight-bg: #4a3a12;

    /* Faz os menus nativos (select, calendario) virem escuros */
    color-scheme: dark;
}

/* Cartoes e caixas ganham borda, ja' que a sombra some */
[data-tema="escuro"] .card,
[data-tema="escuro"] .section-card,
[data-tema="escuro"] .metric-card,
[data-tema="escuro"] .quick-action,
[data-tema="escuro"] .painel-dobra,
[data-tema="escuro"] .linha-pendencia {
    border: 1px solid var(--papo-border);
}

/* O fundo do corpo tem um desenho de pontinhos claro no tema
   claro; no escuro ele precisa apagar para nao ficar sujo */
[data-tema="escuro"] body {
    background-image: none;
}

/* A logo fica sobre um chip branco: no escuro ele agride menos
   com um cinza bem claro */
[data-tema="escuro"] .navbar-papo .brand-logo {
    background: #e9ecf5;
}

[data-tema="escuro"] .table tbody td {
    border-color: var(--papo-border);
}

[data-tema="escuro"] .form-control::placeholder {
    color: #71798c;
}

[data-tema="escuro"] .form-control:disabled,
[data-tema="escuro"] .form-control[readonly] {
    background: var(--papo-neutral-soft);
    color: var(--papo-muted);
}

[data-tema="escuro"] .dropdown-menu {
    background: var(--papo-surface);
    border: 1px solid var(--papo-border);
}

[data-tema="escuro"] .dropdown-item {
    color: var(--papo-text);
}

[data-tema="escuro"] .dropdown-item:hover,
[data-tema="escuro"] .dropdown-item:focus {
    background: var(--papo-navy-soft);
    color: var(--papo-text);
}

[data-tema="escuro"] .dropdown-divider {
    border-color: var(--papo-border);
}

[data-tema="escuro"] .linha-numero {
    background: var(--papo-neutral-soft);
    color: var(--papo-neutral);
}

[data-tema="escuro"] .atalhos-periodo a {
    background: var(--papo-surface);
    color: var(--papo-muted);
}

[data-tema="escuro"] .atalhos-periodo a.ativo {
    background: var(--papo-orange);
    border-color: var(--papo-orange);
    color: #fff;
}

/* O texto do cartaz da tela inicial ja' e' claro; so' o
   gradiente precisa fechar um pouco */
[data-tema="escuro"] .dashboard-hero {
    background-image: linear-gradient(120deg, #0d1f42, #16305f 70%);
}

/* =========================================================
   DENSIDADE COMPACTA
   Aperta as listas para caber mais linha na tela, sem mexer
   no tamanho da letra — so' no respiro entre as linhas.
   ========================================================= */

[data-densidade="compacta"] .table tbody td,
[data-densidade="compacta"] .table thead th {
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
}

[data-densidade="compacta"] .card-body {
    padding: 1rem;
}

[data-densidade="compacta"] .linha-pendencia {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

[data-densidade="compacta"] .lista-pendencias {
    gap: 0.3rem;
}

[data-densidade="compacta"] .metric-card {
    min-height: 0;
    padding: 1rem;
}

[data-densidade="compacta"] .metric-value {
    font-size: 1.7rem;
}

/* =========================================================
   PAINEL DE CONFIGURACOES (menu da engrenagem)
   ========================================================= */

.menu-config {
    width: 19rem;
    padding: 0.35rem;
}

.config-titulo {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--papo-muted);
}

.config-grupo {
    display: flex;
    gap: 0.3rem;
    padding: 0 0.6rem 0.6rem;
}

/*
 * Cada opcao e' um botao do tamanho de um dedo. Radio escondido
 * em vez de <button> para o teclado navegar entre as opcoes do
 * grupo com as setas, como se espera de uma escolha unica.
 */
.config-opcao {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.3rem;
    border: 1px solid var(--papo-border);
    border-radius: 0.7rem;
    background: var(--papo-surface);
    color: var(--papo-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), color 0.15s var(--ease),
                background-color 0.15s var(--ease);
}

.config-opcao i {
    font-size: 1.05rem;
}

.config-opcao input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.config-opcao:hover {
    border-color: var(--papo-orange);
    color: var(--papo-orange-dark);
}

.config-opcao:has(input:checked) {
    border-color: var(--papo-orange);
    background: var(--papo-orange-soft);
    color: var(--papo-orange-dark);
}

[data-tema="escuro"] .config-opcao:has(input:checked) {
    background: rgba(255, 90, 10, 0.16);
    color: #ff8845;
}

/* Foco visivel pelo teclado, ja' que o radio real esta escondido */
.config-opcao:has(input:focus-visible) {
    outline: 2px solid var(--papo-orange);
    outline-offset: 2px;
}

.config-rodape {
    padding: 0.5rem 0.75rem 0.35rem;
    border-top: 1px solid var(--papo-border);
    color: var(--papo-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

/* -------------------------------------------------------
   Ajustes de contraste no escuro

   Alguns gradientes misturam uma variavel (que escurece) com
   uma cor fixa clara — no escuro o resultado fica manchado.
   Aqui eles voltam a ser uniformes.
   ------------------------------------------------------- */

[data-tema="escuro"] .painel-botao-icone,
[data-tema="escuro"] .row.g-3 > div:nth-child(even) .metric-icon {
    background: linear-gradient(150deg, #23304f, #1b2743);
    color: var(--papo-titulo);
}

[data-tema="escuro"] .metric-icon,
[data-tema="escuro"] .quick-action-icon {
    background: linear-gradient(150deg, #3a2415, #4a2a12);
    color: #ff8845;
}

/* O contador e o atalho ativo tem fundo azul: no escuro o azul
   sozinho some, entao vira laranja da marca */
[data-tema="escuro"] .painel-contador {
    background: var(--papo-orange);
    color: #fff;
}

/* Cabecalho de tabela: mantem escuro, mas separado do fundo */
[data-tema="escuro"] .table thead th {
    background-image: linear-gradient(120deg, #16203a, #1d2b4d 70%);
    color: #dbe4f7;
}

[data-tema="escuro"] .empty-state i,
[data-tema="escuro"] .input-group-text,
[data-tema="escuro"] .unit-badge,
[data-tema="escuro"] .budget-items-table .tipo-preco {
    background: var(--papo-navy-soft);
    color: var(--papo-titulo);
}

[data-tema="escuro"] .badge.text-bg-light {
    background: var(--papo-neutral-soft) !important;
    color: var(--papo-titulo) !important;
}

/* Faixa colorida no topo dos cartoes */
[data-tema="escuro"] .card::before {
    background: linear-gradient(90deg, #2a4a8f, var(--papo-orange));
}

/*
 * Selos do Bootstrap (text-bg-*) tem cor fixa e saturada. No fundo
 * escuro eles acendem demais e brigam com o laranja da marca, entao
 * viram a mesma pilula suave usada no resto do sistema.
 */
[data-tema="escuro"] .badge.text-bg-secondary {
    background: var(--papo-neutral-soft) !important;
    color: var(--papo-neutral) !important;
}

[data-tema="escuro"] .badge.text-bg-warning {
    background: var(--papo-warning-soft) !important;
    color: var(--papo-warning) !important;
}

[data-tema="escuro"] .badge.text-bg-primary,
[data-tema="escuro"] .badge.text-bg-info {
    background: var(--papo-info-soft) !important;
    color: var(--papo-info) !important;
}

[data-tema="escuro"] .badge.text-bg-success {
    background: var(--papo-success-soft) !important;
    color: var(--papo-success) !important;
}

[data-tema="escuro"] .badge.text-bg-danger {
    background: var(--papo-danger-soft) !important;
    color: var(--papo-danger) !important;
}

/* -------------------------------------------------------
   Utilitarios de fundo claro do Bootstrap

   bg-light e table-light tem cor fixa (#f8f9fa). No tema escuro
   eles ficavam como manchas brancas no meio da tela, com o texto
   cinza por cima virando quase invisivel.
   ------------------------------------------------------- */

[data-tema="escuro"] .bg-light,
[data-tema="escuro"] .bg-body-tertiary,
[data-tema="escuro"] .table-light,
[data-tema="escuro"] .table-light > th,
[data-tema="escuro"] .table-light > td {
    background-color: var(--papo-neutral-soft) !important;
    color: var(--papo-text) !important;
}

[data-tema="escuro"] .bg-white {
    background-color: var(--papo-surface) !important;
}

/* Bordas utilitarias do Bootstrap tambem sao claras por padrao */
[data-tema="escuro"] .border,
[data-tema="escuro"] .border-top,
[data-tema="escuro"] .border-bottom,
[data-tema="escuro"] .border-start,
[data-tema="escuro"] .border-end {
    border-color: var(--papo-border) !important;
}

/*
 * Textos utilitarios escuros. text-muted no Bootstrap 5.3 e' um
 * cinza pensado para fundo claro; no escuro ele some.
 */
[data-tema="escuro"] .text-muted,
[data-tema="escuro"] .text-secondary {
    color: var(--papo-muted) !important;
}

[data-tema="escuro"] .text-dark,
[data-tema="escuro"] .text-black,
[data-tema="escuro"] .text-body {
    color: var(--papo-text) !important;
}

/* Alertas do Bootstrap: fundo claro fixo e texto escuro fixo */
[data-tema="escuro"] .alert-secondary,
[data-tema="escuro"] .alert-light {
    background-color: var(--papo-neutral-soft);
    border-color: var(--papo-border);
    color: var(--papo-text);
}

/* Linhas separadoras */
[data-tema="escuro"] hr {
    border-color: var(--papo-border);
    opacity: 1;
}

/* Tabela listrada */
[data-tema="escuro"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--papo-text);
}

/* O proprio Bootstrap pinta a tabela por variaveis dele */
[data-tema="escuro"] .table {
    --bs-table-color: var(--papo-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--papo-border);
    --bs-table-striped-color: var(--papo-text);
    --bs-table-hover-color: var(--papo-text);
    color: var(--papo-text);
}

/* -------------------------------------------------------
   Textos coloridos do Bootstrap

   text-success e companhia sao cores pensadas para fundo branco.
   Sobre o fundo escuro elas ficam abafadas — o verde escuro do
   Bootstrap chega a sumir. Aqui usam as versoes claras do tema.
   ------------------------------------------------------- */

[data-tema="escuro"] .text-success { color: var(--papo-success) !important; }
[data-tema="escuro"] .text-danger  { color: var(--papo-danger)  !important; }
[data-tema="escuro"] .text-warning { color: var(--papo-warning) !important; }
[data-tema="escuro"] .text-info    { color: var(--papo-info)    !important; }
[data-tema="escuro"] .text-primary { color: #ff8845 !important; }

/* -------------------------------------------------------
   Blocos com fundo claro fixo no CSS proprio
   ------------------------------------------------------- */

[data-tema="escuro"] .workflow-step,
[data-tema="escuro"] .product-table thead th,
[data-tema="escuro"] .product-active-switch {
    background: var(--papo-neutral-soft);
    color: var(--papo-text);
}

[data-tema="escuro"] .product-table thead th {
    color: var(--papo-titulo);
}

[data-tema="escuro"] .budget-items-table .tipo-preco.price-wholesale {
    background: rgba(255, 90, 10, 0.15);
    color: #ff8845;
}

/* A opcao escolhida no menu da engrenagem estava com pouco
   contraste; o texto clareia e a borda marca melhor */
[data-tema="escuro"] .config-opcao:has(input:checked) {
    background: rgba(255, 90, 10, 0.22);
    border-color: #ff8845;
    color: #ffb083;
}

/* -------------------------------------------------------
   Gradientes com cor clara fixa

   Escaparam da primeira varredura porque o branco estava
   dentro de linear-gradient(), nao numa declaracao simples
   de background — por isso o cartao "Total a receber"
   continuava branco no escuro.
   ------------------------------------------------------- */

[data-tema="escuro"] .budget-total-card {
    background: linear-gradient(180deg, #1f2431, var(--papo-surface));
}

[data-tema="escuro"] .quick-action-icon,
[data-tema="escuro"] .form-section-title > i,
[data-tema="escuro"] .budget-section-title > i {
    background: linear-gradient(150deg, #3a2415, #4a2a12);
    color: #ff8845;
}

[data-tema="escuro"] .metric-card.metric-alerta .metric-icon,
[data-tema="escuro"] .painel-dobra-alerta .painel-botao-icone {
    background: linear-gradient(150deg, #3a1a20, #4a1f28);
    color: var(--papo-danger);
}

/* Xadrez de fundo das miniaturas de arte (indica transparencia) */
[data-tema="escuro"] .arte-thumb {
    background-image:
        linear-gradient(45deg, #262b38 25%, transparent 25%, transparent 75%, #262b38 75%),
        linear-gradient(45deg, #262b38 25%, #1c202b 25%, #1c202b 75%, #262b38 75%);
}

/* -------------------------------------------------------
   Estados de "passar o mouse"

   Alem das variaveis-base acima, alguns componentes trazem a
   cor de hover embutida na regra. Todos aqui escurecem o fundo
   e mantem o texto claro, nunca o contrario.
   ------------------------------------------------------- */

/*
 * A linha da tabela sob o mouse — era esta a que ficava branca.
 *
 * O Bootstrap 5.3 nao pinta a celula com "background": ele joga uma
 * sombra interna gigante usando --bs-table-bg-state. Enquanto essa
 * variavel nao muda, qualquer "background-color" escrito aqui fica
 * escondido embaixo dela. A style.css aponta a variavel para
 * --papo-orange-soft (#fff2ea, quase branco), entao no tema escuro a
 * linha inteira clareava por cima do texto claro. A correcao troca a
 * variavel, nao o fundo.
 */
[data-tema="escuro"] .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--papo-navy-soft);
    --bs-table-color-state: var(--papo-text);
}

/* Mesmo problema do --papo-orange-soft quase branco, aqui num selo:
   "entrega hoje" virava uma etiqueta branca acesa no meio da lista */
[data-tema="escuro"] .prazo-hoje {
    background: #3a2415;
    color: #ff8845;
}

[data-tema="escuro"] .list-group-item-action:hover,
[data-tema="escuro"] .list-group-item-action:focus {
    background-color: var(--papo-navy-soft);
    color: var(--papo-text);
}

[data-tema="escuro"] .quick-action:hover,
[data-tema="escuro"] .atalho:hover,
[data-tema="escuro"] .metric-card:hover,
[data-tema="escuro"] .linha-pendencia:hover {
    background: var(--papo-navy-soft);
    color: var(--papo-text);
    border-color: #35405c;
}

[data-tema="escuro"] .painel-botao:hover {
    background: var(--papo-navy-soft);
}

/* Botoes de contorno: o preenchimento no hover ja' e' colorido
   e forte, entao so' garantimos o texto branco por cima */
[data-tema="escuro"] .btn-outline-primary:hover,
[data-tema="escuro"] .btn-outline-secondary:hover,
[data-tema="escuro"] .btn-outline-success:hover,
[data-tema="escuro"] .btn-outline-danger:hover {
    color: #fff;
}

[data-tema="escuro"] .atalhos-periodo a:hover {
    background: var(--papo-navy-soft);
    border-color: var(--papo-orange);
    color: #ff8845;
}

[data-tema="escuro"] .config-opcao:hover {
    background: var(--papo-navy-soft);
    color: #ff8845;
}

/* Barra de rolagem */
[data-tema="escuro"] ::-webkit-scrollbar-track {
    background: var(--papo-bg);
}

[data-tema="escuro"] ::-webkit-scrollbar-thumb {
    background: #333c52;
}

[data-tema="escuro"] ::-webkit-scrollbar-thumb:hover {
    background: #45516e;
}

.config-sair {
    padding: 0 0.6rem 0.5rem;
}

/* =========================================================
   TELA DE ENTRADA NO TEMA ESCURO

   O painel do formulario ja' e' azul profundo nos dois temas,
   entao nao muda nada. O painel da marca continua claro de
   proposito — a logo tem o "ESTAMPA" em azul-marinho e
   sumiria se este lado escurecesse junto.

   O que muda e' o tom do papel: um cinza frio no lugar do
   creme, para nao acender a tela inteira de quem escolheu
   trabalhar no escuro.
   ========================================================= */

[data-tema="escuro"] .login-marca {
    background-color: #e7eaf2;
    background-image:
        radial-gradient(circle at 12% 88%, rgba(255, 90, 10, 0.14), transparent 26rem),
        radial-gradient(circle at 95% 8%, rgba(11, 34, 77, 0.12), transparent 24rem),
        radial-gradient(rgba(11, 34, 77, 0.12) 1px, transparent 1px);
}

[data-tema="escuro"] .login-trilha li {
    background: rgba(255, 255, 255, 0.6);
}