/* =====================================================================
   QrSistema - Telas
   wwwroot/css/telas.css
   ---------------------------------------------------------------------
   Estilo COMUM de todas as telas de cadastro (painéis, pesquisa, grade,
   grupos de campos, campos compactos, tabelas, barra de ações). Vale para
   qualquer página dentro de .tela-cadastro, inclusive as geradas por
   scripts/gerar_tela.py. Publicado como _content/QrSistema.Telas/css/telas.css
   ===================================================================== */

.tela-cadastro {
    padding: 10px 14px 8px;
    min-height: calc(100vh - 56px);
    background: #f1f5f9;
}

.tela-cadastro .painel {
    background: #fff;
    border-radius: 16px;
    padding: 10px 12px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}

/* Barra "Procurar por" */
.tela-cadastro .barra-pesquisa {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.tela-cadastro .barra-pesquisa .campo-pesquisa {
    flex: 1;
    min-width: 260px;
}

.tela-cadastro .dica-pesquisa {
    width: 100%;
    color: #64748b;
}

/* Linha selecionada nas grades */
.tela-cadastro .linha-selecionada,
.tela-cadastro .linha-selecionada td {
    background: color-mix(in srgb, #2563eb 14%, #fff) !important;
}

.tela-cadastro .grade .mud-table-cell {
    white-space: nowrap;
}

/* Faixa de status/natureza no topo do detalhe */
.tela-cadastro .faixa-topo {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 6px;
}

.tela-cadastro .grupo-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 10px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.tela-cadastro .rotulo-grupo,
.tela-cadastro .rotulo-opcoes {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: #475569;
}

.tela-cadastro .campo-opcoes {
    padding: 2px 6px;
}

/* Campos que o Delphi mostra em maiúsculas (CharCase = ecUpperCase) */
.tela-cadastro .maiusculas input {
    text-transform: uppercase;
}

.tela-cadastro .campo-com-botao {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.tela-cadastro .campo-com-botao .mud-input-control {
    flex: 1;
}

/* Área de edição com rolagem própria: a barra de botões fica sempre visível */
.tela-cadastro .detalhe-rolagem {
    max-height: calc(100vh - 230px);
    overflow: auto;
    padding-right: 4px;
}

/* ===== Campos compactos ===== */
.tela-cadastro .mud-input-control {
    margin-top: 0;
}

.tela-cadastro .mud-input.mud-input-outlined,
.tela-cadastro .mud-input-outlined .mud-input-slot,
.tela-cadastro .mud-select .mud-input-slot {
    font-size: .88rem;
}

.tela-cadastro .mud-input-outlined .mud-input-slot {
    padding-top: 8px;
    padding-bottom: 8px;
}

.tela-cadastro .mud-input-label-outlined {
    font-size: .84rem;
}

.tela-cadastro .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(14px, 11px) scale(1);
}

.tela-cadastro .mud-input-label-outlined.mud-shrink {
    transform: translate(14px, -6px) scale(.72);
}

.tela-cadastro .mud-tabs-panels {
    padding-top: 4px;
}

.tela-cadastro .mud-tab {
    min-height: 40px;
    padding: 4px 14px;
    font-size: .8rem;
}

.tela-cadastro .mud-tabs-toolbar {
    min-height: 40px;
}

.tela-cadastro .mud-radio .mud-button-root {
    padding: 4px;
}

.tela-cadastro .mud-grid-spacing-xs-1 > .mud-grid-item {
    padding-top: 6px;
    padding-bottom: 2px;
}

/* ===== Barra de ações das abas internas e tabelas simples ===== */
.tela-cadastro .barra-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tela-cadastro .tabela-simples {
    margin-bottom: 12px;
}

.tela-cadastro .tabela-simples tbody tr {
    cursor: pointer;
}

.tela-cadastro .tabela-simples th,
.tela-cadastro .tabela-simples td {
    white-space: nowrap;
}

.tela-cadastro .tabela-simples .direita {
    text-align: right;
}

.tela-cadastro .tabela-simples .vazio {
    text-align: center;
    color: #64748b;
    cursor: default;
}

/* ===== Grupos de campos (TGroupBox), usados pelas telas e pelos componentes de pessoa ===== */
.tela-cadastro .grupo-campos {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 4px 10px 8px;
    margin: 0 0 8px;
}

.tela-cadastro .grupo-campos legend {
    padding: 0 8px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #2563eb;
}

.tela-cadastro .grupo-campos.interno {
    background: #f8fafc;
}

/* Texto de ajuda cinza itálico abaixo de um campo ou grupo (os TLabel cinza do Delphi, ex.: LblExemploFaixas) */
.tela-cadastro .texto-ajuda,
.dialogo-faixas .texto-ajuda {
    color: #64748b;
    font-style: italic;
}

/* Diálogo de faixas de juros (DialogoFaixasJuros): grade compacta e linha escolhida */
.dialogo-faixas .tabela-simples td,
.dialogo-faixas .tabela-simples th {
    padding: 2px 6px;
}

.dialogo-faixas .linha-selecionada td {
    background: #e0f2fe;
}

.dialogo-faixas .centro {
    text-align: center;
    color: #64748b;
}

.dialogo-faixas .barra-acoes {
    display: flex;
    gap: 8px;
}

/* Cartões de resumo no topo de uma consulta (pnResumo do Histórico do Cliente) */
.tela-cadastro .resumo-cartoes {
    display: flex;
    gap: 12px;
    margin: 8px 0;
}

.tela-cadastro .resumo-cartao {
    flex: 1;
    padding: 8px 14px;
    border-radius: 8px;
    background: #f1f5f9;
    border-left: 4px solid #2563eb;
}

.tela-cadastro .resumo-cartao .titulo {
    font-size: .75rem;
    color: #64748b;
    text-transform: uppercase;
}

.tela-cadastro .resumo-cartao .valor {
    font-size: 1.25rem;
    font-weight: 700;
}

.tela-cadastro .info-cliente {
    color: #1e3a8a;
    font-weight: 600;
    margin: 4px 0;
}

/* Campo de código com botão de busca e o nome ao lado (TDBLabeledEditPlus + label de resultado do Delphi).
   Comum a todas as telas que buscam pessoa/produto pelo código (Pedreiros, Fator Compra...). */
.tela-cadastro .campo-com-botao .campo-pessoa {
    max-width: 180px;
}

.tela-cadastro .campo-com-botao .nome-pessoa {
    align-self: center;
    color: #1d4ed8;
    font-weight: 600;
    min-width: 200px;
}

/* Telas de filtros de relatório (TBaseRelatorio): botões Imprimir / Sair sempre visíveis no rodapé. */
.tela-cadastro .barra-botoes-relatorio {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    margin-top: 10px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

/* ---------------------------------------------------------------------
   Campo de SENHA sem type="password" (regra do dono, 07/10/2026): com type="password" o navegador oferece
   salvar e preenche sozinho - nas lojas as máquinas e as pessoas mudam muito. O campo é de texto, com os
   caracteres mascarados por esta classe (no próprio <input> ou no campo do MudBlazor que o contém).
   Navegador sem text-security: o texto fica ilegível (transparente, com sombra borrada). A senha nunca aparece.
   --------------------------------------------------------------------- */
input.campo-senha-mascarada,
.campo-senha-mascarada input {
    -webkit-text-security: disc;
    text-security: disc;
}

@supports not (-webkit-text-security: disc) {
    input.campo-senha-mascarada,
    .campo-senha-mascarada input {
        color: transparent !important;
        text-shadow: 0 0 8px rgba(0, 0, 0, .85);
        caret-color: #0f172a;
    }
}