/* Ajustes específicos das telas (itens). O padrão comum fica em css/apr-padrao.css. */

/* ---------------------------------------------------------------------------
   Lista de itens (ItensPage)
   --------------------------------------------------------------------------- */
.itens-cartao-lista { overflow: hidden; }
.apr-painel-filtros.itens-filtros { margin-bottom: 0 !important; }

/* Controle segmentado de categoria no cabeçalho do cartão: não selecionado neutro, cor só no ícone */
.itens-categorias .mud-toggle-item:not(.itens-opcao-selecionada) {
    color: var(--mud-palette-text-primary);
}
.itens-categoria-opcao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    white-space: nowrap;
    text-transform: none;
}

/* Nome com o ícone da categoria. Abaixo de 1366 px a coluna Categoria some e o ícone (com tooltip) vem antes
   do nome. A coluna "CA / Patrimônio" fica a partir de 1280 px (ocupa o espaço da Categoria, sem vão no meio
   da linha); abaixo de 1280 px ela também some e a segunda linha do nome traz "CA 40123" ou "Ferramenta". */
.itens-celula-nome {
    display: flex;
    align-items: center;
    min-width: 0;
}
.itens-celula-nome > .apr-celula { flex: 1 1 auto; }
.itens-so-abaixo-1366 { display: none; }
.itens-ca-segunda-linha { display: none; }
.itens-ca-ferramenta-estreito { display: none; }
@media (max-width: 1365.98px) {
    .itens-so-abaixo-1366 { display: inline-flex; }
    .apr-grid .itens-ocultar-abaixo-1366 { display: none !important; }
    /* Sem a coluna Categoria, a ferramenta mostra "Ferramenta" na coluna CA / Patrimônio */
    .itens-ca-vazio-largo { display: none; }
    .itens-ca-ferramenta-estreito { display: block; }
}
@media (max-width: 1279.98px) {
    .itens-ca-segunda-linha { display: block; }
    .apr-grid .itens-col-ca { display: none !important; }
}

/* A partir de 1600 px: Nome com 35% e a sobra vai para "Regra na entrega" (texto mais longo depois do nome) */
@media (min-width: 1600px) {
    .apr-grid .mud-table-head .itens-col-nome { width: 35%; }
    .apr-grid .mud-table-head .itens-col-regra { width: auto !important; }
}

/* Cor do ícone por categoria, igual em todos os lugares (EpiItemIconeCategoria e chip da coluna Categoria) */
.epi-icone-categoria--epi,
.itens-chip-categoria--epi .mud-chip-icon { color: var(--apr-verde); }
.epi-icone-categoria--ferramenta,
.itens-chip-categoria--ferramenta .mud-chip-icon { color: #424242; } /* cinza escuro do texto padrão do MudBlazor */
.itens-opcao-selecionada .epi-icone-categoria { color: inherit; }

/* Tamanhos: faixa numérica ("38 a 44") ou até 3 chips e "+N" na coluna de 152 px, numa linha, sem cortar chip */
.itens-chips-tamanhos { gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.itens-chips-tamanhos .mud-chip { margin: 0; flex-shrink: 0; }

/* Filtros: Buscar (até 360 px), Situação (até 240 px, cabe "Inativos") e as ações na mesma linha a partir
   de ~700 px; a sobra fica antes das ações, encostadas à direita (sem campos de 600 px em 1920). */
@media (min-width: 700px) {
    .itens-filtros .apr-filtros-grade {
        grid-template-columns: minmax(210px, 360px) minmax(180px, 240px) minmax(max-content, 1fr);
    }
    .itens-filtros .apr-filtros-grade > .apr-filtros-acoes {
        grid-column: -2 / -1;
        justify-self: end;
    }
}

/* Rodapé: seletor de itens por página e paginação */
.itens-paginacao {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.itens-tamanho-pagina { width: 150px; flex: 0 0 150px; }

/* ---------------------------------------------------------------------------
   Formulário (EpiItemFormulario): formulário até 880 px e prévia de 300 a 340 px
   ao lado a partir de 1280 px; abaixo disso, a prévia desce para baixo do formulário.
   --------------------------------------------------------------------------- */
/* A partir de 1280 px: formulário e prévia lado a lado, prévia encostada na borda direita do cartão
   (contêiner padrão dos formulários: até 1280 px, alinhado à esquerda, classe apr-pagina-formulario)
   e a barra de ações embaixo do formulário.
   Abaixo de 1280 px: formulário, prévia em largura total e a barra de ações por último. */
.itens-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    grid-template-areas:
        "formulario previa"
        "barra      previa";
    column-gap: 24px;
    align-items: start;
}
.itens-form-coluna {
    grid-area: formulario;
    min-width: 0;
    /* A grade de CA e Unidade se ajusta à largura da coluna do formulário (container query) */
    container-type: inline-size;
    container-name: itens-formulario;
}
.itens-previa-coluna { grid-area: previa; min-width: 0; }
.itens-form-layout > .itens-rodape { grid-area: barra; align-self: end; }
@media (max-width: 1279.98px) {
    .itens-form-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "formulario"
            "previa"
            "barra";
    }
    .itens-previa-coluna { margin-top: 24px; }
    /* Prévia em linha: item à esquerda, tamanhos à direita */
    .itens-previa-corpo {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 24px;
    }
    .itens-previa-corpo > .itens-previa-bloco-item { flex: 1 1 300px; min-width: 0; }
    .itens-previa-corpo > .itens-previa-bloco-tamanhos { flex: 1 1 240px; min-width: 0; }
}
@media (min-width: 1280px) {
    .itens-previa-bloco-tamanhos { margin-top: 12px; }
}

/* 24 px entre seções e 12 px entre o título da seção e o primeiro controle */
.itens-form-secoes {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.itens-titulo-secao {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.5;
    margin-bottom: 12px;
}

/* Nome na linha inteira; CA e Unidade sempre em 2 colunas iguais (largura toda, sem terceira coluna vazia),
   empilhados quando a coluna do formulário tem menos de 560 px */
.itens-campos-identificacao {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
@container itens-formulario (max-width: 559.98px) {
    .itens-campos-identificacao { grid-template-columns: minmax(0, 1fr); }
}
.itens-campos-identificacao > .itens-campo-largo { grid-column: 1 / -1; }
.itens-campos-identificacao .mud-input-control { margin-top: 0; }

.itens-aviso-ca {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 4px 8px 0;
    color: var(--apr-azul-escuro);
}

/* Categoria travada (item com entregas): chip somente leitura legível, cadeado e motivo */
.itens-categoria-travada {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.itens-chip-categoria-travada {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    font-weight: 600;
    font-size: .875rem;
}
.itens-chip-categoria-travada--epi {
    background-color: var(--apr-verde-claro);
    color: var(--apr-verde-escuro);
}
.itens-chip-categoria-travada--ferramenta {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
}
.itens-categoria-travada-motivo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Controle segmentado da categoria no formulário: rótulos sem caixa alta, como no protótipo */
.itens-categoria-controle .mud-toggle-item { text-transform: none; }

/* Switches: compensa o preenchimento interno do MudSwitch para o trilho alinhar com a borda dos campos
   e o título da seção ficar a cerca de 14 px do controle, como nas outras seções */
.itens-switch-secao { margin-top: -12px; margin-left: -9px; }
.itens-rodape .itens-switch-rodape { margin-left: -9px; }

/* Campo único de tamanhos: os chips ficam dentro da caixa, como no protótipo */
.itens-campo-tamanhos {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 56px;
    padding: 10px 6px 6px 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    cursor: text;
}
.itens-campo-tamanhos:hover { border-color: var(--mud-palette-text-primary); }
.itens-campo-tamanhos:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}
.itens-campo-tamanhos.itens-campo-tamanhos--erro,
.itens-campo-tamanhos.itens-campo-tamanhos--erro:focus-within {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 0 1px var(--mud-palette-error);
}
/* Rótulo flutuante igual ao dos campos do MudBlazor (mesma posição, tamanho e cor do rótulo encolhido) */
.itens-campo-tamanhos-rotulo {
    position: absolute;
    top: -8px;
    left: 9px;
    padding: 0 5px;
    font-size: .75rem;
    line-height: 1;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
}
.itens-campo-tamanhos--erro .itens-campo-tamanhos-rotulo { color: var(--mud-palette-error); }
.itens-campo-tamanhos .mud-chip { margin: 0; }
.itens-campo-tamanhos-entrada {
    flex: 1 1 140px;
    min-width: 120px;
}
.itens-campo-tamanhos-entrada .mud-input-control { margin: 0; }
/* Campo "Adicionar tamanho": input simples (o Enter é tratado no navegador, js/apr-tamanhos.js) */
.itens-novo-tamanho {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    padding: 6px 0;
}
.itens-novo-tamanho::placeholder { color: var(--mud-palette-text-secondary); opacity: 1; }
.itens-novo-tamanho:disabled { color: var(--mud-palette-text-disabled); }
.itens-campo-tamanhos-entrada .mud-input > input.mud-input-root { padding: 6px 0; }
/* Ajuda e erro com o mesmo recuo do mud-input-helper-text (8 px) */
.itens-ajuda {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    line-height: 1.66;
    margin: 3px 8px 0;
}
.itens-erro-campo {
    color: var(--mud-palette-error);
    font-size: .75rem;
    line-height: 1.66;
    margin: 3px 8px 0;
}

/* "Preencher com": atalhos abaixo do campo, sem caixa alta */
.itens-preencher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.itens-preencher .mud-chip { margin: 0; text-transform: none; }

/* Rodapé fixo do formulário */
.itens-rodape { margin-top: 24px; }

/* Prévia "Como aparece no app" */
.itens-previa-coluna { min-width: 0; }
.itens-previa .apr-cartao-titulo { font-size: 1.05rem; }
.itens-previa-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.itens-previa-textos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.itens-previa-nome {
    font-weight: 600;
    font-size: 1rem;
    overflow-wrap: break-word;
}
.itens-previa-descricao {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}
.itens-previa-pendente {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}
/* Com erro, o marcador continua em itálico (é um campo vazio, não um nome) */
.itens-previa-pendente--erro { color: var(--mud-palette-error); font-style: italic; font-weight: 500; }
.itens-previa-tamanhos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.itens-previa-tamanhos .mud-chip { margin: 0; }
.itens-chip-tracejado {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px dashed var(--apr-borda-controle);
    border-radius: 12px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}
.itens-chip-tracejado.itens-chip-tracejado--erro {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

/* Subtítulo do Editar item: o nome (primeira parte) corta com reticências se for maior que a linha */
/* Subtítulo do Editar item em partes: flex com o mesmo espaço entre todas as partes (os espaços do HTML entre os
   spans e a margem do .apr-parte somavam um vão maior depois do nome) */
.apr-partes[data-teste='item-subtitulo'] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 4px;
    max-width: 100%;
}
.apr-partes[data-teste='item-subtitulo'] > .apr-parte { margin-right: 0; }
.itens-subtitulo-nome {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rodada 6: separador "·" antes de cada parte (e não depois). O bloco começa 14 px à esquerda e o subtítulo corta
   o que passa da borda: o separador de uma parte que abre linha fica fora da área visível, então nenhuma linha
   termina nem começa com um "·" sozinho. */
.apr-cabecalho-subtitulo:has(> .apr-partes[data-teste='item-subtitulo']) { overflow: hidden; }
.apr-partes[data-teste='item-subtitulo'] {
    column-gap: 0;
    margin-left: -14px;
    max-width: calc(100% + 14px);
}
.apr-partes[data-teste='item-subtitulo'] > .apr-parte::after { content: none; }
.apr-partes[data-teste='item-subtitulo'] > .apr-parte::before {
    content: "·";
    display: inline-block;
    width: 14px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}