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

/* Relatórios de EPI e Ferramentas --------------------------------------------------- */

/* Datas do período: nunca menores que 176 px (dd/mm/aaaa inteiro, com o ícone) */
.apr-relatorio-data { min-width: 176px; }

/* Período (EpiRelatorioPeriodo): atalhos logo acima das duas datas, na mesma coluna, em todas as abas */
.apr-relatorio-periodo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.apr-relatorio-atalhos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-height: 32px;
}
.apr-relatorio-atalhos .mud-chip { margin: 0; }
.apr-relatorio-datas {
    display: grid;
    grid-template-columns: repeat(2, minmax(176px, 1fr));
    gap: 16px;
}
.apr-relatorio-datas > * { min-width: 0; margin: 0; }
@media (max-width: 459.98px) {
    .apr-relatorio-datas { grid-template-columns: minmax(0, 1fr); }
}

/* Linha dos atalhos do período (largura toda, acima dos campos) com a Categoria à direita.
   Os campos da linha de baixo (datas, Item, Colaborador) ficam alinhados pelo topo. */
.apr-relatorio-linha-atalhos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
}
.apr-relatorio-linha-atalhos > .apr-relatorio-atalhos { flex: 0 1 auto; }
.apr-relatorio-lado { display: flex; align-items: center; margin-left: auto; min-width: 0; max-width: 100%; }
.apr-relatorio-segmento-campo.apr-relatorio-segmento-campo--linha { flex-direction: row; align-items: center; gap: 8px; }

/* Controle segmentado (Categoria e "Mostrar"): um só desenho, 40 px de altura, 16 px de respiro por opção,
   cada opção com a largura do próprio texto (regra global do MudToggleGroup em apr-padrao.css) */
.apr-relatorio-segmento-campo { display: inline-flex; flex-direction: column; max-width: 100%; }
.apr-relatorio-campo-rotulo {
    display: block;
    margin: 0 0 4px 2px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}
.apr-relatorio-segmentado.mud-toggle-group > .mud-toggle-item {
    min-height: 40px;
    padding: 0 16px;
    text-transform: none;
    font-weight: 500;
}
.apr-relatorio-opcao { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.apr-relatorio-segmentado.mud-toggle-group > .mud-toggle-item:not(.apr-segmento-selecionado) {
    color: var(--mud-palette-text-primary);
}
.apr-relatorio-segmentado.mud-toggle-group > .mud-toggle-item.apr-segmento-selecionado {
    background-color: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--mud-palette-primary);
}

/* Atalho de período escolhido: tom claro com check (sem verde sólido) */
.mud-chip.apr-relatorio-atalho-ativo { font-weight: 600; }

/* "Mostrar:" da prévia do relatório geral */
.apr-relatorio-mostrar { display: inline-flex; align-items: center; gap: 8px; }

/* Selo "N de M" dos cartões de prévia: largura do texto */
.mud-chip.apr-relatorio-selo { margin: 0; font-weight: 600; }

/* Busca "Buscar na lista" e link das devoluções: barra própria abaixo do título e da frase de apoio */
.apr-relatorio-barra-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
    margin-top: 12px;
}
.mud-input-control.apr-relatorio-busca-lista { width: 240px; margin: 0; flex: 0 0 auto; }

/* Campo Colaborador da aba Ferramentas: largura que cabe o texto de ajuda */
.apr-relatorio-campo-colaborador { min-width: min(100%, 420px); }

/* Link que navega na mesma aba: seta para a frente no fim do texto */
.apr-relatorio-link-seta { display: inline-flex; align-items: center; gap: 6px; }

/* Totais por item: ícone da categoria antes do nome, linhas densas de 44 px, sem segunda linha */
.apr-relatorio-total-item { display: flex; align-items: center; min-width: 0; }
.apr-relatorio-totais { container-type: inline-size; }
.apr-grid.apr-relatorio-totais-grade .mud-table-body .mud-table-row { height: 44px; }
/* A coluna "CA / Patrimônio" só aparece com o cartão largo (em 1366 o cartão tem 7/12 da largura e o Item
   ficava cortado); escondida, o CA do EPI vai para a segunda linha, embaixo do nome. */
.apr-relatorio-total-nome { display: flex; flex-direction: column; min-width: 0; }
.apr-relatorio-total-l2 { display: none; font-size: .75rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 760px) {
    .apr-relatorio-totais .apr-relatorio-col-ca { display: none; }
    .apr-relatorio-totais .apr-relatorio-total-l2-ca { display: block; }
}
/* Cartão estreito (1920, xl=4): Tamanhos também sai e vai para a segunda linha, para o nome caber inteiro */
@container (max-width: 600px) {
    .apr-relatorio-totais .apr-relatorio-col-tam { display: none; }
    .apr-relatorio-totais .apr-relatorio-total-l2-ca { display: none; }
    .apr-relatorio-totais .apr-relatorio-total-l2-completa { display: block; }
}
.apr-relatorio-total-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--mud-palette-table-lines);
}

/* Trocas por motivo: motivo, barra proporcional e o número à direita */
.apr-relatorio-motivos { list-style: none; margin: 0; padding: 4px 16px 8px; }
.apr-relatorio-motivo {
    display: grid;
    grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    font-size: .875rem;
}
.apr-relatorio-motivo-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apr-relatorio-motivo-barra {
    display: block;
    height: 10px;
    border-radius: 5px;
    background-color: var(--mud-palette-action-default-hover);
    overflow: hidden;
}
.apr-relatorio-motivo-barra > span { display: block; height: 100%; background-color: var(--mud-palette-primary); border-radius: 5px; }
.apr-relatorio-motivo-numero { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Prévia de ferramentas agrupada por colaborador: separação mais forte entre os grupos */
.apr-relatorio-agrupada .mud-table-body .mud-table-row.apr-relatorio-grupo-inicio:not(:first-child) > .mud-table-cell {
    border-top: 2px solid var(--mud-palette-lines-default);
}
.apr-relatorio-grupo-mesmo { display: block; width: 100%; height: 1px; }

/* "N com conferência pendente": cor de aviso escura e ícone de relógio (não depende só da cor) */
.mud-link.apr-relatorio-pendentes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--apr-ambar-escuro);
    font-size: .9375rem;
}

/* "O que vai na ficha": bloco expansível */
.apr-relatorio-ajuda-lista { margin: 6px 0 4px; padding-left: 20px; font-size: .875rem; }

/* Linha de resumo à esquerda do Gerar PDF */
.apr-relatorio-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-height: 36px;
    min-width: 0;
}
.apr-relatorio-resumo strong { font-weight: 600; }

/* Texto de apoio com o botão "O que vai na ficha": alinhados pelo centro da linha quando lado a lado, e o
   botão sem o recuo do padding quando desce para a linha de baixo (começa na mesma borda do texto) */
.apr-relatorio-apoio { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.apr-relatorio-apoio > .apr-botao { margin-left: -8px; }
.apr-relatorio-ajuda {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-primary);
    font-size: .8125rem;
    cursor: help;
    white-space: nowrap;
}

/* Abas curtas: as três cabem a partir de 1024 px sem rolagem */
.apr-relatorio-abas .mud-tab { min-width: 0; padding-left: 16px; padding-right: 16px; }

/* Página inicial: estado "sem permissões nesta empresa" ----------------------------- */
.apr-sem-permissao {
    max-width: 640px;
    margin: 12vh auto 0;
}
.apr-sem-permissao .apr-sem-permissao-icone {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: var(--mud-palette-warning-darken);
}
.apr-sem-permissao .apr-sem-permissao-aviso {
    border-left: 4px solid var(--mud-palette-warning);
    padding: 8px 12px;
    background-color: var(--mud-palette-warning-hover);
    color: var(--mud-palette-text-primary);
    border-radius: 4px;
}

/* Identificação (empresa, usuário, e-mail): rótulo de 72 px e valor numa linha, com reticências */
.apr-sem-permissao .apr-sem-permissao-dados {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0;
    font-size: .875rem;
}
.apr-sem-permissao .apr-sem-permissao-dados dt { color: var(--mud-palette-text-secondary); }
.apr-sem-permissao .apr-sem-permissao-dados dd {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.apr-sem-permissao .apr-sem-permissao-instrucao { text-wrap: balance; }

/* Rodada 5 ---------------------------------------------------------------------------- */

/* Barra do resumo: o resumo quebra dentro da própria coluna e o Gerar PDF fica fixo à direita, na primeira linha */
.apr-barra-acoes.apr-relatorio-acoes { flex-wrap: nowrap; align-items: flex-start; }
.apr-barra-acoes.apr-relatorio-acoes > .apr-barra-acoes-inicio { flex: 1 1 0; min-width: 0; }
.apr-barra-acoes.apr-relatorio-acoes > .mud-button-root { flex: 0 0 auto; }
@media (max-width: 599.98px) {
    .apr-barra-acoes.apr-relatorio-acoes { flex-wrap: wrap; }
}

/* Relatório geral: a Categoria fica à direita dos atalhos a partir de 1100 px; abaixo disso, na linha do Item */
.apr-relatorio-item-linha { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.apr-relatorio-item-linha > .mud-input-control { flex: 1 1 auto; min-width: 0; }
.apr-relatorio-categoria-estreita { display: none; }
@media (max-width: 1099.98px) {
    .apr-relatorio-categoria-larga { display: none; }
    .apr-relatorio-categoria-estreita { display: block; flex: 0 0 auto; }
    .apr-relatorio-item-linha .apr-relatorio-segmento-campo--linha { margin-top: 8px; }
}
@media (max-width: 599.98px) {
    .apr-relatorio-item-linha { flex-direction: column; }
}

/* Ficha de EPI: Colaborador primeiro; a partir de 1100 px, Colaborador e datas na mesma linha e os atalhos só
   em cima das datas que eles preenchem. Abaixo disso, Colaborador, atalhos e datas, nessa ordem. */
.apr-relatorio-ficha-parametros {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "colaborador" "atalhos" "datas";
    gap: 12px 24px;
}
.apr-ficha-area-colaborador { grid-area: colaborador; min-width: 0; }
.apr-ficha-area-atalhos { grid-area: atalhos; min-width: 0; }
.apr-ficha-area-datas { grid-area: datas; min-width: 0; }
@media (min-width: 1100px) {
    .apr-relatorio-ficha-parametros {
        grid-template-columns: minmax(0, 1fr) minmax(max-content, 1fr);
        grid-template-areas: ". atalhos" "colaborador datas";
        row-gap: 8px;
        align-items: start;
    }
    .apr-ficha-area-atalhos .apr-relatorio-atalhos { flex-wrap: nowrap; }
}

/* Ferramentas: com o cartão largo, a busca e o link ficam à direita do título; sem espaço, numa barra embaixo */
/* Limite em 860 px (antes 1000): em 1366 o cartão tem cerca de 980 px de conteúdo e a barra ficava embaixo, com
   500 px vazios à esquerda; o título com o selo e a busca com o link cabem juntos a partir de ~860 px. */
.apr-relatorio-previa-cabecalho { container-type: inline-size; }
@container (min-width: 860px) {
    .apr-relatorio-previa-cabecalho-interno {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 24px;
    }
    .apr-relatorio-previa-cabecalho-interno > .apr-relatorio-barra-lista { margin-top: 0; flex-wrap: nowrap; }
}