/*
NOME DO ARQUIVO: STYLE.CSS
VERSÃO: 8.0
O QUE MUDOU: ADICIONADO CONTROLE DE ALTURA FORÇADA PARA TODOS OS CAMPOS (INPUTS E SELECTS) NOS TEMAS CLEAN E CLEAN DARK PARA CORRIGIR O PROBLEMA DE CAMPOS GORDOS NO MOBILE.
*/

/* CLASSES RESPONSÁVEIS PELA ESTRUTURA BASE COMPARTILHADA ENTRE TODOS OS TEMAS */
body { background-color: var(--bg-global); color: var(--cor-texto-global); font-family: var(--fonte-textos); transition: background-color 0.4s ease, color 0.4s ease; overflow-x: hidden; } /* Aplica cor de fundo e previne rolagem horizontal no mobile */
.container-central { width: 100%; margin-left: auto; margin-right: auto; max-width: var(--largura-tela); transition: max-width 0.4s ease; } /* Mantém o layout centralizado na tela */
.texto-titulo { font-family: var(--fonte-titulos); } /* Aplica a fonte principal dos títulos */
.texto-normal { font-family: var(--fonte-textos); } /* Aplica a fonte de leitura dos textos */
.rotacionar-tema { transform: var(--gira-titulo); transition: transform 0.3s ease; } /* Rotaciona levemente os títulos se o tema exigir */
.cor-orcamento-tema { color: var(--cor-orcamento); transition: color 0.3s ease; } /* Pinta os textos de dinheiro com a cor do tema */
.cor-form-tema { color: var(--cor-form-novo); transition: color 0.3s ease; } /* Pinta os formulários com a cor do tema */
.grid-projetos { display: var(--layout-projetos); gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); flex-direction: column; } /* Organiza os cards de projetos em grade responsiva */
.card-projeto { background: var(--bg-card); border: var(--borda-card); box-shadow: var(--sombra-card); padding: 1.5rem; transition: all 0.2s; display: flex; align-items: center; width: 100%; } /* Monta a caixa visual do card de projeto */
.info-projeto-container { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; width: 100%; } /* Centraliza as informações dentro do card */
.input-dinamico { background: var(--bg-input) !important; border: var(--borda-input) !important; color: inherit !important; font-family: inherit !important; outline: none !important; box-shadow: none !important; width: 100%; margin: 0 !important; line-height: 1 !important; } /* Reseta os estilos nativos dos navegadores para inputs */
.input-dinamico[readonly], .input-dinamico:disabled { cursor: default !important; } /* Muda o ponteiro do mouse quando o campo está bloqueado */
.input-dinamico:-webkit-autofill, .input-dinamico:-webkit-autofill:hover, .input-dinamico:-webkit-autofill:focus, .input-dinamico:-webkit-autofill:active { -webkit-text-fill-color: var(--cor-texto-global) !important; transition: background-color 5000s ease-in-out 0s; } /* Remove fundo amarelo padrão de preenchimento automático do Google Chrome */
.texto-titulo .input-dinamico:-webkit-autofill, .input-dinamico.texto-titulo:-webkit-autofill { font-family: var(--fonte-titulos) !important; font-size: inherit !important; } /* Mantém a fonte correta no preenchimento automático */
.texto-normal .input-dinamico:-webkit-autofill, .input-dinamico.texto-normal:-webkit-autofill, .input-dinamico:-webkit-autofill { font-family: var(--fonte-textos) !important; font-size: inherit !important; } /* Mantém a fonte normal no preenchimento automático */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; margin: 0; padding: 0; } /* Ajusta o ícone de calendário nativo */
input[type="date"][readonly]::-webkit-calendar-picker-indicator { display: none; } /* Esconde o ícone de calendário se estiver em modo leitura */
.btn-dinamico { transition: all 0.2s; cursor: pointer; text-transform: uppercase; font-family: var(--fonte-titulos); } /* Padroniza os botões do sistema */
.box-check { position: relative; display: flex; align-items: center; justify-content: center; transition: all 0.2s; cursor: pointer; } /* Configura a caixa customizada de marcar tarefas */
.riscado { text-decoration: line-through; opacity: 0.5; } /* Aplica o risco na tarefa quando concluída */
.projeto-encerrado { opacity: 0.6; pointer-events: none; filter: grayscale(100%); } /* Congela a tela quando o projeto é finalizado */
input:disabled + .box-check { cursor: default; opacity: 0.7; } /* Escurece o botão de marcar quando inativo */
#btn-topo { transition: all 0.3s ease; } /* Suaviza a animação do botão de subir tela */
#btn-topo.visivel { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Exibe o botão de subir a tela */

/* CLASSES RESPONSÁVEIS PELO CONTROLE GLOBAL DE EXIBIÇÃO DE TEMAS E CORREÇÃO DE SOBREPOSIÇÃO */
.apenas-brutal, .apenas-lousa, .apenas-executivo, .apenas-clean, .apenas-stripe { 
    display: none !important; /* Esconde todos os elementos específicos de temas por padrão */
}

/* CLASSE RESPONSÁVEL POR EXIBIR OS ELEMENTOS CONFORME O TEMA ATIVO NO CORPO DA PÁGINA */
body.tema-brutal .apenas-brutal,
body.tema-lousa .apenas-lousa,
body.tema-executivo .apenas-executivo,
body.tema-clean .apenas-clean,
body.tema-clean-dark .apenas-clean, 
body.tema-stripe .apenas-stripe { 
    display: flex !important; /* Mostra os elementos se a tag body tiver a classe do tema certo */
}

/* CLASSES RESPONSÁVEIS POR TRATAR ELEMENTOS EM LINHA (SPANS) PARA NÃO QUEBRAREM O LAYOUT DEVIDO AO FLEX */
span.apenas-brutal, span.apenas-lousa, span.apenas-executivo, span.apenas-clean, span.apenas-stripe { 
    display: none !important; /* Esconde spans de temas inativos */
}

/* CLASSE RESPONSÁVEL POR EXIBIR SPANS DO TEMA ATIVO COMO INLINE */
body.tema-brutal span.apenas-brutal, 
body.tema-lousa span.apenas-lousa, 
body.tema-executivo span.apenas-executivo, 
body.tema-clean span.apenas-clean, 
body.tema-clean-dark span.apenas-clean,
body.tema-stripe span.apenas-stripe { 
    display: inline !important; /* Mantém os spans fluindo na mesma linha de texto */
}

/* CLASSE RESPONSÁVEL POR FORÇAR EMAGRECIMENTO DOS SELECTS E INPUTS NOS TEMAS CLEAN E CLEAN DARK PARA CORRIGIR CAMPOS GORDOS */
body.tema-clean select.input-dinamico,
body.tema-clean-dark select.input-dinamico,
body.tema-clean input.input-dinamico,
body.tema-clean-dark input.input-dinamico {
    height: 28px !important;         /* Trava a altura máxima num tamanho fino */
    min-height: 28px !important;     /* Impede que o navegador estique a caixa no mobile */
    padding-top: 0px !important;     /* Zera a gordura interna superior para inputs não ficarem altos */
    padding-bottom: 0px !important;  /* Zera a gordura interna inferior */
    padding-left: 8px !important;    /* Adiciona espaço lateral esquerdo para o texto não colar na borda */
    padding-right: 8px !important;   /* Adiciona espaço lateral direito */
    line-height: 24px !important;    /* Ajusta a altura da linha para o texto centralizar perfeitamente */
    font-size: 0.85rem !important;   /* Reduz levemente a fonte para encaixar na caixa mais fina */
    border-radius: 6px !important;   /* Mantém o arredondamento padrão do tema */
    appearance: none !important;     /* Remove o estilo nativo inflado de botões no celular */
    -webkit-appearance: none !important; /* Força remoção de estilo nativo em iPhones (Safari) e Android (Chrome) */
}

/* CLASSE RESPONSÁVEL POR CENTRALIZAR CAMPOS, TÍTULOS E EVITAR SOBREPOSIÇÕES EM TELAS MENORES (MOBILE) */
@media (max-width: 767px) {
    
    /* REGRAS RESPONSÁVEIS POR CENTRALIZAR OS CONTÊINERES DOS CAMPOS (TÍTULO E INPUT) */
    form label,
    .campo-secundario-container label,
    .container-orcamento-interno div {
        align-items: center !important; /* Centraliza horizontalmente pois viram flex-col no mobile */
        justify-content: center !important; /* Força o conteúdo para o meio do eixo principal */
        text-align: center !important; /* Garante que os textos base fiquem alinhados ao meio */
        width: 100% !important; /* Ocupa a tela inteira para o centro ser exato */
    }

    /* REGRAS RESPONSÁVEIS POR CENTRALIZAR OS TÍTULOS ACIMA DOS CAMPOS */
    form label span,
    .campo-secundario-container label span {
        text-align: center !important; /* Centraliza o texto do título */
        justify-content: center !important; /* Empurra para o meio */
        width: auto !important; /* Remove larguras fixas que causam desalinhamento */
    }

    /* REGRAS RESPONSÁVEIS POR CENTRALIZAR O TEXTO DIGITADO PELO USUÁRIO NOS INPUTS E SELECTS */
    .input-dinamico,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    select {
        text-align: center !important; /* Centraliza o texto de campos de preenchimento normais */
        text-align-last: center !important; /* Centraliza o texto da opção escolhida dentro de caixas Dropdown */
    }

    /* REGRAS RESPONSÁVEIS POR CENTRALIZAR BLOCOS ESTRUTURAIS DE TAREFAS E PREVENIR SOBREPOSIÇÕES */
    .campo-secundario-container .flex,
    .campo-secundario-container .flex-col {
        align-items: center !important; /* Alinha o bloco ao centro */
        justify-content: center !important; /* Justifica ao centro */
    }
    
    /* REGRAS RESPONSÁVEIS POR CORRIGIR O ALINHAMENTO DO FORMULÁRIO DE NOVO PROJETO NO DASHBOARD MOBILE */
    form .items-start,
    form .text-left {
        align-items: center !important; /* Substitui o alinhamento à esquerda pelo centro no celular */
        text-align: center !important; /* Centraliza o texto que estava forçado à esquerda */
    }
}