/*
 * CRUD global (#86): estrutura visual comum das telas de cadastro — toolbar,
 * formulario em grade de ancoragem, grade de consulta, mensagens e escala por
 * degraus. Complementa shell.css (que cuida da shell/janelas e define as
 * variaveis --shell-*). Nada aqui e especifico de uma tela.
 */

/* ---------- Tabela da grade de consulta ---------- */
.painel-corpo table {
    border-collapse: collapse;
    width: 100%;
}

.painel-corpo th, .painel-corpo td {
    border: 1px solid var(--shell-borda);
    padding: 4px 8px;
    text-align: left;
}

.painel-corpo th {
    background: var(--shell-fundo);
    font-size: 12px;
    text-transform: uppercase;
}

.painel-corpo button { cursor: pointer; }

/* ---------- Formulario em grade de 3 colunas (regra de ancoragem) ----------
   Toda tela de cadastro usa a MESMA grade: 3 colunas de fracoes iguais. Cada
   campo declara sua posicao (pos-1 | pos-2 | pos-3 | pos-total); posicao nao
   ocupada fica vazia. As colunas alinham verticalmente entre as linhas e
   encolhem juntas com a janela — nada estoura nem muda de lugar. */
.form-linha {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 8px;
    /* Largura ideal do formulario (a "janela de projeto" do legado): em janela
       larga os campos crescem ate aqui e param — sem campos gigantes. Em janela
       apertada a grade encolhe normalmente. Tela que precise de mais espaco
       sobrescreve --form-largura no proprio template. */
    max-width: var(--form-largura, 720px);
}

.form-campo {
    display: flex;
    align-items: center;
    gap: 6px;
    /* A celula comprime junto com a janela em vez de estourar a grade. */
    min-width: 0;
}

/* Ancoragens da grade. Campo pode ocupar mais de uma posicao (expandido):
   pos-1-2 cobre as colunas 1-2; pos-total cobre a linha inteira. */
.pos-1 { grid-column: 1; }
.pos-2 { grid-column: 2; }
.pos-3 { grid-column: 3; }
.pos-1-2 { grid-column: 1 / 3; }
.pos-total { grid-column: 1 / -1; }

/* Alinhamento perfeito e dos CAMPOS (mesmo x por coluna em todas as linhas):
   toda celula reserva a mesma largura de label, e o texto do label — de
   comprimento variavel — encosta a direita, no campo (o lalign=RIGHT do
   legado). Na coluna 1 e nas linhas de largura total o label fica a esquerda
   (o lleft do legado), com caixa propria. */
.form-campo > label {
    width: 76px;
    flex-shrink: 0;
    text-align: right;
    font-size: 12px;
    color: var(--shell-texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-campo.pos-1 > label,
.form-campo.pos-1-2 > label,
.form-campo.pos-total > label { width: 52px; text-align: left; }

/* O campo preenche a celula da grade (largura vem da coluna, nao do campo). */
.form-campo input,
.form-campo select {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--shell-borda);
    border-radius: 3px;
    height: 26px;
    box-sizing: border-box;
    padding: 0 6px;
    font: inherit;
    font-size: 13px;
}

/* ---------- Escala por degraus (janela apertada no tiling) ----------
   Quando a janela encolhe, a fonte desce em degraus (13px -> 11px -> 9px) e a
   ALTURA dos campos permanece identica (height fixo acima): as linhas nao
   pulam, so a escala muda. As larguras ja sao fracoes da grade. O container e
   o .painel-corpo (container-type definido em shell.css, dono da janela). */
@container (max-width: 560px) {
    .form-campo input,
    .form-campo select,
    .form-campo > label { font-size: 11px; }
    .form-linha { gap: 10px; }
    .form-campo > label { width: 60px; }
    .form-campo.pos-1 > label,
    .form-campo.pos-1-2 > label,
    .form-campo.pos-total > label { width: 40px; }
    /* Toolbar acompanha o degrau (botoes mais compactos, mesma altura de linha). */
    .botao { font-size: 11px; padding: 4px 8px; }
    .toolbar-contador { font-size: 11px; }
}

@container (max-width: 400px) {
    .form-campo input,
    .form-campo select,
    .form-campo > label { font-size: 9px; }
    .form-linha { gap: 8px; }
    .form-campo > label { width: 44px; }
    .form-campo.pos-1 > label,
    .form-campo.pos-1-2 > label,
    .form-campo.pos-total > label { width: 34px; }
    .botao { font-size: 9px; padding: 4px 5px; }
    .toolbar-contador { font-size: 9px; }
}

/* ID e chave interna gerada: readonly com aparencia de somente-leitura. */
.painel-corpo input[readonly] {
    background: var(--shell-fundo);
    color: var(--shell-texto-suave);
    cursor: default;
}

/* Toolbar no topo da tela (padrao do legado): Incluir | Salvar | Excluir.
   Seletores com .painel-corpo para vencer a margem generica de form div. */
.painel-corpo .toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--shell-borda);
}

.painel-corpo .toolbar div { margin-bottom: 0; }

/* Botoes da toolbar comprimem com a janela, como os campos: a largura natural
   e o ideal; faltando espaco, encolhem proporcionalmente ate um piso util, com
   o rotulo em reticencias. A ALTURA fica identica em todos os degraus (so a
   escala muda), igual aos inputs. */
.painel-corpo .toolbar .botao {
    flex: 0 1 auto;
    min-width: 28px;
    height: 26px;
    box-sizing: border-box;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--shell-borda);
    margin: 0 4px;
    flex-shrink: 0;
}

.toolbar-contador {
    margin-left: 6px;
    color: var(--shell-texto-suave);
    font-size: 12px;
    white-space: nowrap;
}

/* Teto de linhas da consulta (#137): campo compacto na toolbar, ao lado do contador. */
.toolbar-limite {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    color: var(--shell-texto-suave);
    font-size: 12px;
    white-space: nowrap;
}

.toolbar-limite input {
    width: 46px;
    height: 26px;
    box-sizing: border-box;
    border: 1px solid var(--shell-borda);
    border-radius: 3px;
    padding: 0 4px;
    font: inherit;
    font-size: 13px;
    text-align: right;
}

.botao {
    display: inline-block;
    padding: 4px 14px;
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda);
    border-radius: 3px;
    color: var(--shell-texto);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}

.botao:hover:not([disabled]) { border-color: var(--shell-destaque); color: var(--shell-destaque); }

/* Acao principal = verde institucional da Udisoft (#125); texto grafite p/ contraste. */
.botao.primario {
    background: var(--shell-acao);
    border-color: var(--shell-acao);
    color: var(--shell-acao-texto);
}

.botao.primario:hover {
    background: var(--shell-acao-clara);
    border-color: var(--shell-acao-clara);
    color: var(--shell-acao-texto);
}

.botao.perigo { border-color: var(--shell-erro); color: var(--shell-erro); }

/* Botao inerte: <button disabled> ou ancora sem href (toolbar estatica). */
.botao[disabled], .botao.desabilitado {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.painel-acoes { margin-bottom: 10px; }

/* ---------- Mensagens ---------- */
[role="alert"] {
    background: var(--shell-erro-fundo);
    border: 1px solid var(--shell-erro);
    border-radius: 3px;
    color: var(--shell-erro);
    margin: 0 0 10px;
    padding: 6px 10px;
}

.mensagem-sucesso {
    background: #e8f5e9;
    border: 1px solid #2e7d32;
    border-radius: 3px;
    color: #2e7d32;
    margin: 0 0 10px;
    padding: 6px 10px;
}

.mensagem-aviso {
    background: #fff8e1;
    border: 1px solid #b28704;
    border-radius: 3px;
    color: #8a6d00;
    margin: 0 0 10px;
    padding: 6px 10px;
}

/* Mensagens de operacao dispensaveis (#119): clicar na faixa (ou no X do canto)
   fecha. O crud.js remove a faixa no clique; aqui e so a affordance visual. */
.mensagem-sucesso, .mensagem-aviso, [role="alert"] {
    position: relative;
    padding-right: 26px;
    cursor: pointer;
}

.mensagem-sucesso::after, .mensagem-aviso::after, [role="alert"]::after {
    content: "\00D7";
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    opacity: 0.6;
}

.mensagem-sucesso:hover::after, .mensagem-aviso:hover::after, [role="alert"]:hover::after {
    opacity: 1;
}

/* ---------- Grade: clique/setas selecionam; duplo clique ou Enter abrem ---------- */
.painel-corpo .linha-registro {
    cursor: pointer;
    user-select: none;
}

.painel-corpo .linha-registro:hover td { background: var(--shell-fundo); }

.painel-corpo .linha-registro:focus { outline: none; }

.painel-corpo .linha-registro.selecionada td {
    background: var(--shell-destaque);
    color: var(--shell-primaria-texto);
}

.painel-corpo .linha-registro.selecionada a { color: var(--shell-primaria-texto); }

/* ---------- Aba de usuarios vinculados (administracao de plataforma, #103) ---------- */
.painel-corpo .aba-usuarios {
    margin-top: 16px;
    border-top: 1px solid var(--shell-borda);
    padding-top: 10px;
}

.painel-corpo .aba-titulo {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
}

.painel-corpo .aba-acao {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* ---------- Sub-grade: grade aninhada com mini-toolbar (Incluir/Alterar/Excluir) ----------
   Mesmo molde da grade principal, so que a acao (Alterar) abre a subtela e o
   Excluir faz exclusao logica (subgrade.js). Toolbar da aba mais leve que a
   principal (sem a divisoria de baixo). */
.painel-corpo .toolbar-aba {
    margin: 0 0 8px;
    padding-bottom: 0;
    border-bottom: 0;
}

/* O form do Excluir nao gera caixa: o botao entra direto na flex da toolbar. */
.subgrade-excluir {
    display: contents;
    margin: 0;
}

/* Selecao da linha (espelho de .linha-registro da grade principal). */
.painel-corpo .subgrade-linha {
    cursor: pointer;
    user-select: none;
}

.painel-corpo .subgrade-linha:hover td { background: var(--shell-fundo); }

.painel-corpo .subgrade-linha:focus { outline: none; }

.painel-corpo .subgrade-linha.selecionada td {
    background: var(--shell-destaque);
    color: var(--shell-primaria-texto);
}

/* ---------- Grade de permissoes (#109): coluna de selecao + indicador de liberado ---------- */
.painel-corpo .grade-permissoes .col-sel { width: 32px; text-align: center; }

/* Checkbox nao estica a celula (o input:100% do formulario nao vale na grade). */
.painel-corpo .grade-permissoes input[type="checkbox"] { width: auto; margin: 0; }

.painel-corpo .acesso-sim { color: var(--udisoft-verde); font-weight: 700; }
.painel-corpo .acesso-nao { color: var(--shell-texto-suave); }