/* ==========================================================
   TEMA ESCURO - ACAITERIA + VIDA

   Ativado de duas formas:
     html.tema-escuro       escolha manual no painel
     html.tema-automatico   segue a configuracao do sistema

   As cores da marca continuam reconheciveis, mas clareadas: o roxo
   #6C4C89 sobre fundo escuro nao teria contraste suficiente para
   leitura, entao a versao escura usa um roxo mais claro.
   ========================================================== */

/* --- Paleta do tema escuro --- */

html.tema-escuro,
html.tema-automatico {
    color-scheme: dark;

    /* Roxo clareado para ter contraste sobre fundo escuro */
    --acai-roxo: #A98BC7;
    --acai-roxo-escuro: #C4ACDB;
    --acai-roxo-claro: #8E71AC;
    --acai-roxo-suave: #2B2233;

    /* Verde da marca funciona bem no escuro */
    --acai-verde: #A8CE45;
    --acai-verde-escuro: #8FBF3F;
    --acai-verde-suave: #263019;

    /* Texto e superficies */
    --acai-texto: #F0EBF4;
    --acai-texto-suave: #B5A9C0;
    --acai-borda: #3D3247;
    --acai-fundo: #17121C;

    /* O vermelho do tema claro fica ilegivel sobre fundo quase preto */
    --acai-perigo: #E8776A;

    /* Superficie dos cartoes: no escuro deixa de ser branca.
       Repare que --acai-sobre-escuro NAO e redefinida aqui: ela e a cor
       do texto escrito sobre o roxo (barra superior, botoes) e precisa
       continuar branca nos dois temas. */
    --acai-branco: #211A28;

    --acai-sombra: 0 2px 12px rgba(0, 0, 0, .45);
    --acai-sombra-forte: 0 8px 28px rgba(0, 0, 0, .6);

    /* Bootstrap */
    --bs-body-color: #F0EBF4;
    --bs-body-bg: #17121C;
    --bs-border-color: #3D3247;
    --bs-link-color: #C4ACDB;
    --bs-link-hover-color: #DCCBEC;
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: #B5A9C0;
    --bs-tertiary-bg: #2B2233;
}

/* No modo automatico, tudo isso so vale quando o sistema esta no escuro */
@media (prefers-color-scheme: light) {
    html.tema-automatico {
        color-scheme: light;

        --acai-roxo: #6C4C89;
        --acai-roxo-escuro: #543A6B;
        --acai-roxo-claro: #8A6BA8;
        --acai-roxo-suave: #F3EFF7;
        --acai-verde: #A8CE45;
        --acai-verde-escuro: #75BF4E;
        --acai-verde-suave: #F2F8E4;
        --acai-texto: #2C2333;
        --acai-texto-suave: #6E6579;
        --acai-borda: #E4DEEA;
        --acai-fundo: #F7F5F9;
        --acai-branco: #FFFFFF;
        --acai-perigo: #C0392B;

        --acai-sombra: 0 2px 12px rgba(84, 58, 107, .08);
        --acai-sombra-forte: 0 8px 28px rgba(84, 58, 107, .16);

        --bs-body-color: #2C2333;
        --bs-body-bg: #F7F5F9;
        --bs-border-color: #E4DEEA;
        --bs-link-color: #6C4C89;
        --bs-link-hover-color: #543A6B;
    }
}

/* ==========================================================
   COMPONENTES
   O Bootstrap cuida do basico pelo data-bs-theme; aqui ficam
   as partes proprias do sistema.
   ========================================================== */

html.tema-escuro body,
html.tema-automatico body {
    background-color: var(--acai-fundo);
    color: var(--acai-texto);
}

/* --- Barra superior e menu --- */

html.tema-escuro .barra-superior,
html.tema-automatico .barra-superior {
    background: linear-gradient(120deg, #2E2039 0%, #453257 100%);
    border-bottom: 1px solid var(--acai-borda);
}

html.tema-escuro .menu-lateral,
html.tema-automatico .menu-lateral {
    background: #1D1724;
    border-right-color: var(--acai-borda);
}

/* Restrito aos links dos grupos: o "Sair" do pe do menu tem cor
   propria e nao pode ser pintado como item de navegacao. */
html.tema-escuro .menu-lateral .grupo-menu a,
html.tema-automatico .menu-lateral .grupo-menu a {
    color: var(--acai-texto);
}

html.tema-escuro .menu-lateral .grupo-menu a:hover,
html.tema-automatico .menu-lateral .grupo-menu a:hover,
html.tema-escuro .menu-lateral .grupo-menu a.ativo,
html.tema-automatico .menu-lateral .grupo-menu a.ativo {
    background: var(--acai-roxo-suave);
    color: #FFFFFF;
}

/* --- Cartoes, tabelas e janelas --- */

html.tema-escuro .card,
html.tema-automatico .card,
html.tema-escuro .modal-content,
html.tema-automatico .modal-content,
html.tema-escuro .cartao-indicador,
html.tema-automatico .cartao-indicador,
html.tema-escuro .caixa-grafico,
html.tema-automatico .caixa-grafico {
    background: var(--acai-branco);
    color: var(--acai-texto);
    border-color: var(--acai-borda);
}

html.tema-escuro .card-header,
html.tema-automatico .card-header {
    background: #2B2233;
    color: var(--acai-roxo-escuro);
    border-bottom-color: var(--acai-borda);
}

html.tema-escuro .table,
html.tema-automatico .table {
    --bs-table-color: var(--acai-texto);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--acai-borda);
    --bs-table-hover-color: var(--acai-texto);
    --bs-table-hover-bg: #2B2233;
    --bs-table-striped-color: var(--acai-texto);
    --bs-table-striped-bg: #241D2C;
}

html.tema-escuro .table > thead,
html.tema-automatico .table > thead {
    background: #2B2233;
}

html.tema-escuro .table > thead th,
html.tema-automatico .table > thead th {
    color: var(--acai-roxo-escuro);
    border-bottom-color: var(--acai-borda);
}

/* Linha destacada de pedido novo, legivel no escuro */
html.tema-escuro .table-warning,
html.tema-automatico .table-warning,
html.tema-escuro .table-warning > td,
html.tema-automatico .table-warning > td {
    --bs-table-bg: #3A2E14;
    --bs-table-color: #FFE9A8;
    background-color: #3A2E14 !important;
    color: #FFE9A8 !important;
}

html.tema-escuro .list-group-item,
html.tema-automatico .list-group-item {
    background: var(--acai-branco);
    color: var(--acai-texto);
    border-color: var(--acai-borda);
}

/* --- Formularios --- */

/* background-COLOR, e nao o atalho "background": o atalho zera de
   quebra o repeat, a posicao e o tamanho, e a setinha do <select> —
   que e uma imagem de fundo — passava a se repetir lado a lado por
   dentro do campo inteiro, em tamanho cheio. */
html.tema-escuro .form-control,
html.tema-automatico .form-control,
html.tema-escuro .form-select,
html.tema-automatico .form-select {
    background-color: #1D1724;
    border-color: var(--acai-borda);
    color: var(--acai-texto);
}

html.tema-escuro .form-control:focus,
html.tema-automatico .form-control:focus,
html.tema-escuro .form-select:focus,
html.tema-automatico .form-select:focus {
    background-color: #1D1724;
    color: var(--acai-texto);
    border-color: var(--acai-roxo);
    box-shadow: 0 0 0 .2rem rgba(169, 139, 199, .25);
}

/* A dica dentro do campo precisa ser discreta sem ficar ilegivel:
   este tom da 5,23:1 sobre o fundo do campo, acima do minimo de 4,5:1. */
html.tema-escuro .form-control::placeholder,
html.tema-automatico .form-control::placeholder,
html.tema-escuro .campo-busca input::placeholder,
html.tema-automatico .campo-busca input::placeholder {
    color: #9089A0;
    opacity: 1;
}

html.tema-escuro .input-group-text,
html.tema-automatico .input-group-text {
    background: #2B2233;
    border-color: var(--acai-borda);
    color: var(--acai-texto-suave);
}

/* A setinha do select precisa clarear para aparecer. Trocamos a
   variavel do Bootstrap, e nao o background-image: o campo empilha
   duas camadas de fundo — a seta e o icone de validacao — e escrever
   por cima da propriedade apagaria a segunda. */
html.tema-escuro .form-select,
html.tema-automatico .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23B5A9C0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* --- Botoes --- */

html.tema-escuro .btn-primary,
html.tema-automatico .btn-primary,
html.tema-escuro .btn-roxo,
html.tema-automatico .btn-roxo {
    background-color: #7B5A9B;
    border-color: #7B5A9B;
    color: #FFFFFF;
}

html.tema-escuro .btn-primary:hover,
html.tema-automatico .btn-primary:hover {
    background-color: #8E71AC !important;
    border-color: #8E71AC !important;
}

html.tema-escuro .btn-outline-primary,
html.tema-automatico .btn-outline-primary {
    color: #C4ACDB;
    border-color: #7B5A9B;
}

html.tema-escuro .btn-outline-secondary,
html.tema-automatico .btn-outline-secondary {
    color: var(--acai-texto-suave);
    border-color: var(--acai-borda);
}

html.tema-escuro .btn-light,
html.tema-automatico .btn-light {
    background: #2B2233;
    border-color: var(--acai-borda);
    color: var(--acai-texto);
}

/* O verde continua com texto escuro: e uma cor clara */
html.tema-escuro .btn-verde,
html.tema-automatico .btn-verde {
    color: #1E2A0B;
}

/* --- Etiquetas --- */

html.tema-escuro .etiqueta-roxa,
html.tema-automatico .etiqueta-roxa {
    background: #382B45;
    color: #D6C4E6;
}

html.tema-escuro .etiqueta-verde,
html.tema-automatico .etiqueta-verde {
    background: #2C3A18;
    color: #C6E37A;
}

/* --- PDV --- */

html.tema-escuro .pdv-categorias,
html.tema-automatico .pdv-categorias,
html.tema-escuro .pdv-produtos,
html.tema-automatico .pdv-produtos,
html.tema-escuro .pdv-pedido,
html.tema-automatico .pdv-pedido {
    background: var(--acai-branco);
    border-color: var(--acai-borda);
}

html.tema-escuro .botao-categoria,
html.tema-automatico .botao-categoria,
html.tema-escuro .cartao-produto,
html.tema-automatico .cartao-produto,
html.tema-escuro .item-carrinho,
html.tema-automatico .item-carrinho,
html.tema-escuro .opcao,
html.tema-automatico .opcao {
    background: #241D2C;
    border-color: var(--acai-borda);
    color: var(--acai-texto);
}

html.tema-escuro .botao-categoria.ativa,
html.tema-automatico .botao-categoria.ativa {
    background: #7B5A9B;
    border-color: #7B5A9B;
    color: #FFFFFF;
}

html.tema-escuro .cartao-produto .nome,
html.tema-automatico .cartao-produto .nome,
html.tema-escuro .item-carrinho .descricao,
html.tema-automatico .item-carrinho .descricao {
    color: var(--acai-texto);
}

html.tema-escuro .pdv-totais,
html.tema-automatico .pdv-totais {
    background: #2B2233;
}

html.tema-escuro .pdv-pedido .cabecalho,
html.tema-automatico .pdv-pedido .cabecalho {
    background: linear-gradient(120deg, #2E2039 0%, #453257 100%);
}

html.tema-escuro .pdv-pedido .barra-tipo button,
html.tema-automatico .pdv-pedido .barra-tipo button {
    background: #241D2C;
    border-color: var(--acai-borda);
    color: var(--acai-texto-suave);
}

html.tema-escuro .opcao.selecionada,
html.tema-automatico .opcao.selecionada {
    background: #382B45;
    box-shadow: inset 0 0 0 1px var(--acai-roxo);
}

html.tema-escuro .painel-troco,
html.tema-automatico .painel-troco {
    background: #2C3A18;
}

html.tema-escuro .painel-troco .valor,
html.tema-automatico .painel-troco .valor {
    color: #C6E37A;
}

/* --- Cardapio do cliente --- */

html.tema-escuro .capa-loja,
html.tema-automatico .capa-loja {
    background:
        radial-gradient(circle at 88% -10%, rgba(168, 206, 69, .18) 0%, transparent 46%),
        radial-gradient(circle at 5% 110%, rgba(168, 206, 69, .10) 0%, transparent 40%),
        linear-gradient(120deg, #241733 0%, #3A2A4C 55%, #2C2039 100%);
    border-bottom: 1px solid var(--acai-borda);
}

/* A logo mantém o disco branco atrás mesmo no escuro:
   os traços dela são claros e sumiriam sobre fundo escuro. */
html.tema-escuro .capa-logo,
html.tema-automatico .capa-logo {
    background: #FFFFFF;
}

/* A busca e as categorias ficam sobre o fundo da página, sem faixa */
html.tema-escuro .abas-categorias,
html.tema-automatico .abas-categorias {
    background: var(--acai-fundo);
    border-bottom-color: transparent;
}

html.tema-escuro .area-busca,
html.tema-automatico .area-busca {
    background: transparent;
}

html.tema-escuro .abas-categorias button,
html.tema-automatico .abas-categorias button,
html.tema-escuro .item-cardapio,
html.tema-automatico .item-cardapio {
    background: #241D2C;
    border-color: var(--acai-borda);
    color: var(--acai-texto);
}

html.tema-escuro .abas-categorias button.ativa,
html.tema-automatico .abas-categorias button.ativa {
    background: #7B5A9B;
    border-color: #7B5A9B;
    color: #FFFFFF;
}

/* Mesma superfície dos cartões de produto */
html.tema-escuro .campo-busca input,
html.tema-automatico .campo-busca input {
    background: #241D2C;
    border-color: var(--acai-borda);
    color: var(--acai-texto);
}

html.tema-escuro .barra-carrinho,
html.tema-automatico .barra-carrinho {
    background: #2E2039;
    border-top: 1px solid var(--acai-borda);
}

html.tema-escuro .trilha-pedido .marca,
html.tema-automatico .trilha-pedido .marca {
    background: #241D2C;
    border-color: var(--acai-borda);
    color: var(--acai-texto-suave);
}

/* --- Login --- */

html.tema-escuro .tela-login,
html.tema-automatico .tela-login {
    background: linear-gradient(135deg, #1A1223 0%, #2E2039 55%, #2F4419 165%);
}

html.tema-escuro .caixa-login,
html.tema-automatico .caixa-login {
    background: var(--acai-branco);
}

/* --- Rodape fixo --- */

/* O mesmo gradiente da barra superior, para o sistema ficar
   emoldurado pela mesma cor em cima e embaixo. */
html.tema-escuro .rodape-sistema,
html.tema-automatico .rodape-sistema {
    background: linear-gradient(120deg, #2E2039 0%, #453257 100%);
    border-top: 1px solid var(--acai-borda);
    color: rgba(255, 255, 255, .85);
}

html.tema-escuro .rodape-marca strong,
html.tema-automatico .rodape-marca strong,
html.tema-escuro .rodape-assinatura strong,
html.tema-automatico .rodape-assinatura strong {
    color: #FFFFFF;
}

html.tema-escuro .rodape-links a,
html.tema-automatico .rodape-links a {
    color: rgba(255, 255, 255, .85);
}

html.tema-escuro .rodape-links a:hover,
html.tema-automatico .rodape-links a:hover {
    color: #FFFFFF;
}

/* --- Painel de acessibilidade --- */

html.tema-escuro .painel-acessibilidade,
html.tema-automatico .painel-acessibilidade {
    background: var(--acai-branco);
    border-color: var(--acai-borda);
}

html.tema-escuro .escala-texto button,
html.tema-automatico .escala-texto button {
    background: #241D2C;
    border-color: var(--acai-borda);
    color: var(--acai-texto);
}

html.tema-escuro .escala-texto button.ativo,
html.tema-automatico .escala-texto button.ativo {
    background: #7B5A9B;
    border-color: #7B5A9B;
    color: #FFFFFF;
}

/* --- Avisos --- */

html.tema-escuro .alert-light,
html.tema-automatico .alert-light {
    background: #2B2233;
    border-color: var(--acai-borda);
    color: var(--acai-texto);
}

html.tema-escuro .dropdown-menu,
html.tema-automatico .dropdown-menu {
    background: #2B2233;
    border-color: var(--acai-borda);
}

html.tema-escuro .dropdown-item,
html.tema-automatico .dropdown-item {
    color: var(--acai-texto);
}

html.tema-escuro .dropdown-item:hover,
html.tema-automatico .dropdown-item:hover {
    background: #382B45;
    color: #FFFFFF;
}

html.tema-escuro .area-vazia i,
html.tema-automatico .area-vazia i {
    color: var(--acai-borda);
}

/* --- Abas (tela de estoque) --- */

html.tema-escuro .nav-tabs,
html.tema-automatico .nav-tabs {
    border-bottom-color: var(--acai-borda);
}

html.tema-escuro .nav-tabs .nav-link,
html.tema-automatico .nav-tabs .nav-link {
    color: var(--acai-texto-suave);
    background: transparent;
    border-color: transparent;
}

html.tema-escuro .nav-tabs .nav-link:hover,
html.tema-automatico .nav-tabs .nav-link:hover {
    color: var(--acai-texto);
    border-color: var(--acai-borda);
}

html.tema-escuro .nav-tabs .nav-link.active,
html.tema-automatico .nav-tabs .nav-link.active {
    background: var(--acai-branco);
    color: var(--acai-roxo-escuro);
    border-color: var(--acai-borda) var(--acai-borda) var(--acai-branco);
}

/* --- Avisos coloridos ---
   Fundo escurecido com texto claro na mesma familia de cor, para o
   aviso continuar reconhecivel sem virar um bloco luminoso na tela. */

html.tema-escuro .alert-warning,
html.tema-automatico .alert-warning {
    background-color: #3A2E14;
    border-color: #6B5520;
    color: #FFE9A8;
}

html.tema-escuro .alert-danger,
html.tema-automatico .alert-danger {
    background-color: #3D1A18;
    border-color: #7A2E28;
    color: #FFC9C4;
}

html.tema-escuro .alert-success,
html.tema-automatico .alert-success {
    background-color: #1F3318;
    border-color: #3E6B2E;
    color: #C3E8B0;
}

html.tema-escuro .alert-info,
html.tema-automatico .alert-info {
    background-color: #1B2C3A;
    border-color: #2F5573;
    color: #B8DBF5;
}

/* Links dentro dos avisos precisam continuar visiveis */
html.tema-escuro .alert a,
html.tema-automatico .alert a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* --- Rotulos e marcadores dos formularios --- */

html.tema-escuro .form-check-label,
html.tema-automatico .form-check-label,
html.tema-escuro .form-label,
html.tema-automatico .form-label {
    color: var(--acai-texto);
}

html.tema-escuro .form-label,
html.tema-automatico .form-label {
    color: var(--acai-texto-suave);
}

html.tema-escuro .form-check-input,
html.tema-automatico .form-check-input {
    background-color: #1D1724;
    border-color: var(--acai-borda);
}

html.tema-escuro .form-check-input:checked,
html.tema-automatico .form-check-input:checked {
    background-color: #7B5A9B;
    border-color: #7B5A9B;
}

/* --- Utilitarios de fundo do Bootstrap ---
   bg-white e bg-light pintam a caixa de branco em qualquer tema. Com o
   texto claro do tema escuro por cima, o resultado era letra clara sobre
   fundo branco: ilegivel. Aqui essas classes passam a usar a superficie
   do tema. Elas trazem !important do Bootstrap, por isso a repeticao. */

html.tema-escuro .bg-white,
html.tema-automatico .bg-white {
    background-color: var(--acai-branco) !important;
    color: var(--acai-texto);
}

html.tema-escuro .bg-light:not(.badge),
html.tema-automatico .bg-light:not(.badge) {
    background-color: #2B2233 !important;
    color: var(--acai-texto) !important;
}

/* O text-dark deve continuar escuro apenas sobre fundo claro fixo,
   como a etiqueta amarela de "estoque baixo". */
html.tema-escuro .text-dark:not(.badge):not(.bg-warning):not(.bg-light),
html.tema-automatico .text-dark:not(.badge):not(.bg-warning):not(.bg-light) {
    color: var(--acai-texto) !important;
}

html.tema-escuro .card-footer,
html.tema-automatico .card-footer {
    background-color: var(--acai-branco);
    border-top-color: var(--acai-borda);
    color: var(--acai-texto);
}

/* O contador de itens do PDV usava fundo claro com texto escuro */
html.tema-escuro .badge.bg-light,
html.tema-automatico .badge.bg-light {
    background-color: #382B45 !important;
    color: #E8DEF2 !important;
}

/* --- Texto de apoio ---
   O text-muted do Bootstrap fica ilegivel no escuro. */

html.tema-escuro .text-muted,
html.tema-automatico .text-muted {
    color: var(--acai-texto-suave) !important;
}

html.tema-escuro code,
html.tema-automatico code {
    color: #E093C5;
}

/* --- Fotos ---
   Um leve suavizar evita que a foto clara "salte" no fundo escuro. */

html.tema-escuro .item-cardapio .foto,
html.tema-automatico .item-cardapio .foto,
html.tema-escuro .cartao-produto .foto,
html.tema-automatico .cartao-produto .foto {
    filter: brightness(.92);
}

/* ==========================================================
   IMPRESSAO
   O cupom sai sempre em preto sobre branco, mesmo com o
   sistema no tema escuro: papel termico nao imprime fundo.
   ========================================================== */

@media print {
    html.tema-escuro,
    html.tema-automatico,
    html.tema-escuro body,
    html.tema-automatico body,
    html.tema-escuro .cupom,
    html.tema-automatico .cupom,
    html.tema-escuro .card,
    html.tema-automatico .card,
    html.tema-escuro .table,
    html.tema-automatico .table {
        background: #FFFFFF !important;
        color: #000000 !important;
    }
}