/* ============================================================================
   Cadastro de usuário (UsuarioAcessoForm.razor e SelecaoObrasUsuarioDialog.razor)
   ============================================================================ */

/* Título de cada painel, no mesmo tratamento dos cards do RDO: negrito e destacado. A tela tem três
   blocos de peso visual parecido — identificação, obras e permissões — e sem destaque no título eles
   se confundem numa página só. */
.usuario-secao-titulo {
    font-weight: 700;
    color: var(--mud-palette-info, #3b82f6);
}

/* Densidade do formulário de usuário.

   Em Margin.Dense os campos do MudBlazor ainda nascem com os 36px de --control-height mais o espaço
   do rótulo flutuante, e aqui são cinco campos, um seletor, um par de rádios e vinte e quatro caixas
   de permissão. Somados, empurravam a decisão de acesso para muito abaixo da dobra, e as permissões
   são justamente o que precisa ser visto antes de salvar.

   Escopo na classe da página: é aperto DESTA tela, não uma mudança na escala de controles do app.

   O aperto é pela LETRA, não pela altura forçada. Baixar .mud-input-root abaixo do que o MudBlazor
   espera quebrou o desenho: no estilo delineado o rótulo fica sobre a borda, e com o campo mais
   curto ele passou a cair por cima do próprio texto. Reduzindo a fonte, a altura acompanha sozinha
   e o rótulo continua onde deve. */
.usuario-form .mud-input-root {
    font-size: 12px;
}

.usuario-form .mud-input-control .mud-input-label {
    font-size: 12px;
}

/* O espaço abaixo do campo existe para a mensagem de erro. Sem erro ele é um vão em branco
   multiplicado por seis campos; colado, some quando não serve e reaparece quando precisa. */
.usuario-form .mud-input-control .mud-input-helper-text {
    font-size: 11px;
    margin-top: 0;
    line-height: 1.2;
}

/* Caixas de permissão: são vinte e quatro em quatro colunas, e a altura padrão de um item de
   formulário fazia a coluna mais longa dobrar a altura do painel. */
.usuario-form .mud-checkbox,
.usuario-form .mud-radio {
    margin: 0;
}

    .usuario-form .mud-checkbox .mud-button-root,
    .usuario-form .mud-radio .mud-button-root {
        padding: 2px;
    }

.usuario-form .mud-checkbox .mud-typography,
.usuario-form .mud-radio .mud-typography {
    font-size: 12px;
    line-height: 1.2;
}

/* Caixas de um grupo repartidas em colunas. Colunas de CSS e não uma grade: a quantidade de itens
   varia por perfil, e o navegador equilibra a altura sozinho sem ninguém calcular quantos cabem em
   cada coluna.

   break-inside evita o pior efeito colateral dessa técnica — uma caixa partida ao meio, com o quadrado
   numa coluna e o rótulo na seguinte. */
.usuario-permissoes-colunas {
    column-count: var(--colunas, 1);
    column-gap: 16px;
}

    .usuario-permissoes-colunas .mud-input-control {
        break-inside: avoid;
        page-break-inside: avoid;
    }

/* Título de cada grupo de permissão e o rótulo "Status": são cabeçalhos de lista curta, não títulos
   de seção, e no tamanho de texto normal competiam com o título do painel. */
.usuario-form .mud-paper .mud-typography-body2 {
    font-size: 12px;
}

.usuario-form .usuario-secao-titulo {
    font-size: 13px;
}

/* Lista de obras do diálogo de seleção. Altura limitada com rolagem própria: uma empresa com dezenas
   de obras faria o diálogo crescer além da janela, empurrando o botão "Adicionar" para fora da tela —
   e sem ele não há como concluir a seleção.

   Em vh, não em pixels, para encolher junto numa tela baixa. */
.selecao-obras-lista {
    max-height: min(420px, 55vh);
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 4px;
}

.selecao-obras-linha {
    padding: 2px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

    .selecao-obras-linha:last-child {
        border-bottom: none;
    }

    .selecao-obras-linha:hover {
        background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
    }

/* ============================================================================
   Usuários que têm acesso à obra (AcessoObraSecao.razor)
   ============================================================================ */

.acesso-obra-grupo {
    overflow: hidden;
}

/* O perfil dá nome ao bloco e é o que separa uma lista da outra na leitura — por isso ele, e não o
   nome das pessoas, é quem recebe a cor. */
.acesso-obra-perfil {
    font-weight: 700;
    color: var(--mud-palette-warning, #ff9800);
}

/* Colunas fixas em vez de tabela: são quatro campos de larguras muito diferentes, e uma tabela de
   quatro colunas daria a eles o mesmo peso visual. O cargo encolhe antes do nome porque o nome é o
   que se procura na lista. */
.acesso-obra-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

    .acesso-obra-linha:hover {
        background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
    }

.acesso-obra-identificacao {
    flex: 1 1 260px;
    min-width: 0;
}

.acesso-obra-email {
    display: block;
    color: var(--mud-palette-info, #3b82f6);
    overflow: hidden;
    text-overflow: ellipsis;
}

.acesso-obra-cargo {
    flex: 1 1 200px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Largura reservada mesmo sem botão: sem ela, as linhas do grupo do administrador — que não têm o X —
   ficariam com o cargo deslocado em relação aos outros grupos. */
.acesso-obra-acao {
    flex: 0 0 40px;
    text-align: right;
}

.acesso-obra-vazio {
    opacity: 0.7;
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

/* ============================================================================
   Modelo do relatório da obra (ModeloRelatorioSecao.razor)
   ============================================================================ */

.modelo-relatorio-titulo {
    font-weight: 700;
    color: var(--mud-palette-info, #3b82f6);
}

/* As logomarcas do cabeçalho, lado a lado como saem no documento. Colunas de largura igual: são três
   espaços do mesmo peso, e um maior que os outros sugeriria uma hierarquia que não existe. */
.modelo-relatorio-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.modelo-relatorio-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background-color: var(--mud-palette-background-gray, #F8FAFC);
    border-radius: 4px;
}

/* Altura fixa para os três quadros ficarem alinhados qualquer que seja a proporção da imagem — e
   object-fit:contain para a logomarca não ser cortada nem esticada. */
.modelo-relatorio-logo-quadro {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
    background-color: #fff;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 4px;
    overflow: hidden;
}

    .modelo-relatorio-logo-quadro img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }

.modelo-relatorio-logo-rotulo {
    color: var(--mud-palette-info, #3b82f6);
}

/* O seletor de arquivo invisível por cima do botão: o MudButton dá a aparência, o input dá o
   comportamento. Mesmo desenho do logo da empresa e do LogoPlataformaCard. */
.modelo-relatorio-logo-envio {
    position: relative;
    display: inline-block;
}

    .modelo-relatorio-logo-envio input[type="file"] {
        position: absolute;
        inset: 0;
        width: 100%;
        opacity: 0;
        cursor: pointer;
    }

/* As dez seções em colunas, como as permissões: em lista única elas sozinhas dominariam a altura da
   tela, e a decisão seguinte — a atualização retroativa — ficaria abaixo da dobra justamente por ser
   a que mais precisa ser lida. */
.modelo-relatorio-itens {
    column-count: 3;
    column-gap: 16px;
}

    .modelo-relatorio-itens .mud-input-control {
        break-inside: avoid;
        page-break-inside: avoid;
    }

/* O bloco da atualização retroativa é emoldurado em vermelho porque a operação é destrutiva: reescreve
   documento preenchido e apaga assinaturas já coletadas. A moldura é o que impede a pergunta de se
   confundir com as outras opções da tela. */
.modelo-relatorio-aviso {
    border-color: var(--mud-palette-error, #f44336) !important;
}

/* Os espaços de assinatura lado a lado, na ordem em que saem impressos. Em lista vertical a ordem
   continuaria correta, mas deixaria de ser o desenho da página — e é a página que está sendo
   montada aqui. */
.modelo-relatorio-assinaturas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-top: 4px;
}

.modelo-relatorio-assinatura {
    position: relative;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 4px;
}

/* O X fica na quina do próprio espaço, não numa coluna de ações: com quatro espaços em linha, uma
   coluna separada obrigaria a conferir qual linha é qual antes de remover. */
.modelo-relatorio-assinatura-remover {
    position: absolute;
    top: 0;
    right: 0;
}

.modelo-relatorio-assinatura-nome {
    display: block;
    text-transform: none;
    padding-left: 0;
}

.modelo-relatorio-assinatura-traco {
    letter-spacing: 1px;
    opacity: 0.6;
}

.modelo-relatorio-assinatura-adicionar {
    align-self: center;
}

/* Cabeçalho de perfil na lista de usuários do diálogo de aprovação. Fixo no topo durante a rolagem:
   sem isso, numa lista longa o nome some do grupo a que pertence bem na hora de escolher. */
.selecao-usuario-grupo {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    background-color: var(--mud-palette-background-gray, #F8FAFC);
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.selecao-usuario-linha {
    cursor: pointer;
    padding: 6px 8px;
}