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

/* -----------------------------------------------------------------------------
   Custódia: lista de colaboradores à esquerda quando a área de conteúdo tem
   1000 px ou mais (container query, para não espremer a tabela quando o menu
   lateral está aberto). Abaixo disso, a mesma visão fica em "Ver por colaborador".
   ----------------------------------------------------------------------------- */
/* Contêiner com nome: as regras da lista lateral e do alternador medem a página inteira (.apr-custodia-layout),
   e não o contêiner mais próximo (.apr-custodia-conteudo, que é mais estreito). */
.apr-custodia-layout { container-type: inline-size; container-name: custodia-layout; }

.apr-custodia-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.apr-custodia-colaboradores { display: none; }

@container custodia-layout (min-width: 1000px) {
    .apr-custodia-grade { grid-template-columns: 264px minmax(0, 1fr); }
    .apr-custodia-colaboradores { display: block; }
    .apr-custodia-so-estreito { display: none !important; }
}
/* Telas largas: a lista lateral ganha espaço para nome e contagem inteiros */
@container custodia-layout (min-width: 1400px) {
    .apr-custodia-grade { grid-template-columns: 320px minmax(0, 1fr); }
}

.apr-custodia-colaboradores .apr-custodia-colaboradores-lista {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: calc(100vh - 300px);
    min-height: 160px;
    overflow-y: auto;
}

.apr-custodia-colaborador {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
}
.apr-custodia-colaborador:hover { background-color: var(--mud-palette-action-default-hover); }
.apr-custodia-colaborador:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.apr-custodia-colaborador.apr-custodia-colaborador--atual {
    background-color: rgba(var(--mud-palette-primary-rgb), .12);
    border-left-color: var(--mud-palette-primary);
}
.apr-custodia-colaborador .apr-custodia-colaborador-avatar { grid-row: span 3; align-self: start; margin-top: 2px; }
.apr-custodia-colaborador .apr-custodia-colaborador-nome {
    font-weight: 600;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.apr-custodia-colaborador .apr-custodia-colaborador-matricula,
.apr-custodia-colaborador .apr-custodia-colaborador-contagem {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cartão de resumo do colaborador: grade fixa, cerca de 64 px de altura */
.apr-custodia-resumo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "avatar nome acoes"
        "avatar chips acoes";
    gap: 2px 12px;
    align-items: center;
    padding: 10px 16px;
}
.apr-custodia-resumo .apr-custodia-resumo-avatar { grid-area: avatar; }
.apr-custodia-resumo .apr-custodia-resumo-nome { grid-area: nome; min-width: 0; }
.apr-custodia-resumo .apr-custodia-resumo-chips {
    grid-area: chips;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.apr-custodia-resumo .apr-custodia-resumo-chips .mud-chip { margin: 0; }
.apr-custodia-resumo .apr-custodia-resumo-acoes { grid-area: acoes; }

@container custodia-conteudo (max-width: 699.98px) {
    .apr-custodia-resumo {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "avatar nome"
            "avatar chips"
            "acoes acoes";
    }
    .apr-custodia-resumo .apr-custodia-resumo-acoes { justify-content: flex-start; margin-top: 6px; }
}

/* Cabeçalho do cartão da tabela, dentro da ToolBar do MudDataGrid */
.apr-custodia-tabela .mud-toolbar { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; gap: 8px; }
/* Título e subtítulo do cartão num bloco só (AprCartaoCabecalho): o subtítulo fica sempre abaixo do título,
   à esquerda, em todas as larguras (antes subia para a direita em 1920). */
.apr-custodia-tabela .mud-toolbar > .apr-cartao-cabecalho-bloco { flex: 1 1 100%; min-width: 0; }

/* -----------------------------------------------------------------------------
   Histórico da posse (diálogo)
   ----------------------------------------------------------------------------- */
.apr-historico-cabecalho {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.apr-historico-cabecalho .apr-historico-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 4px 0;
}
.apr-historico-cabecalho .apr-historico-chips .mud-chip { margin: 0; }

/* Só a linha do tempo rola; o cabeçalho do item fica sempre visível */
.apr-historico-rolagem {
    max-height: max(240px, calc(100vh - 290px));
    overflow-y: auto;
    padding: 12px 4px 4px 0;
    container-type: inline-size;
    container-name: historico-corpo;
}

/* Com as fotos de antes e depois: numa coluna, elas vêm antes da linha do tempo; com o diálogo largo
   (1024 px ou mais), a linha do tempo fica à esquerda e as fotos à direita, e os eventos cabem sem rolar. */
.apr-historico-corpo { display: block; }
.apr-historico-corpo.apr-historico-corpo--comparar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.apr-historico-corpo--comparar > .apr-historico-comparacao { order: -1; margin-bottom: 0; }
@container historico-corpo (min-width: 720px) {
    .apr-historico-corpo.apr-historico-corpo--comparar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: start;
    }
    .apr-historico-corpo--comparar > .apr-historico-comparacao { order: 0; }
}

/* Antes / Depois lado a lado */
.apr-historico-comparacao {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}
.apr-historico-comparacao .apr-historico-comparacao-titulo {
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: 4px;
}

/* Linha do tempo própria: ponto alinhado à linha do título, linha vertical
   a 12 px da borda e indo do primeiro ao último ponto, texto a 40 px. */
.apr-linha-tempo {
    list-style: none;
    margin: 0;
    padding: 0;
}
.apr-linha-tempo > .apr-evento {
    position: relative;
    padding: 0 0 20px 40px;
    --apr-evento-cor: var(--mud-palette-primary);
}
.apr-linha-tempo > .apr-evento:last-child { padding-bottom: 4px; }
.apr-linha-tempo > .apr-evento::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 12px;
    bottom: -12px;
    width: 2px;
    background-color: var(--mud-palette-lines-default);
}
.apr-linha-tempo > .apr-evento:last-child::before { display: none; }
.apr-linha-tempo > .apr-evento > .apr-evento-ponto {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--apr-evento-cor);
    box-shadow: 0 0 0 3px var(--mud-palette-surface);
}
.apr-evento.apr-evento--success { --apr-evento-cor: var(--mud-palette-success); }
.apr-evento.apr-evento--warning { --apr-evento-cor: var(--mud-palette-warning); }
.apr-evento.apr-evento--info { --apr-evento-cor: var(--mud-palette-info); }
.apr-evento.apr-evento--error { --apr-evento-cor: var(--mud-palette-error); }
.apr-evento.apr-evento--dark { --apr-evento-cor: var(--mud-palette-dark); }
.apr-evento.apr-evento--primary { --apr-evento-cor: var(--mud-palette-primary); }

.apr-evento .apr-evento-titulo {
    font-weight: 600;
    font-size: .9375rem;
    line-height: 24px;
}
/* Rótulos com a mesma largura em todos os eventos: os valores (e os chips de condição) ficam alinhados */
.apr-evento .apr-evento-dados {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 4px 8px;
    align-items: center;
    margin-top: 4px;
    font-size: .875rem;
}
.apr-evento .apr-evento-dados > .apr-evento-rotulo {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.apr-evento .apr-evento-dados .mud-chip { margin: 0; }
.apr-evento .apr-evento-foto { margin-top: 8px; }
.apr-evento .apr-evento-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 6px;
    margin-left: -8px;
}

/* Cabeçalho alinhado com a célula em Qtd e Ações (o .column-header do MudDataGrid é flex) */
.apr-custodia-tabela .mud-table-head .mud-table-cell.apr-col-numero .column-header,
.apr-custodia-tabela .mud-table-head .mud-table-cell.apr-col-acoes .column-header {
    justify-content: flex-end;
}

/* -----------------------------------------------------------------------------
   Rodada 3
   ----------------------------------------------------------------------------- */

/* Filtros, resumo do colaborador e tabela com o mesmo espaço entre si (16 px) */
.apr-custodia-pilha {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.apr-custodia-pilha > .apr-painel-filtros,
.apr-custodia-pilha > .mud-paper { margin: 0 !important; }

/* A área da tabela é um contêiner: a largura da Observação acompanha o espaço que sobra
   ao lado da lista de colaboradores (1366 px) e não só a janela. */
.apr-custodia-conteudo {
    container-type: inline-size;
    container-name: custodia-conteudo;
}

/* Item com 34% da largura (nomes de até ~40 caracteres) e a Observação com a sobra: nas telas largas a
   observação cabe numa linha. Ao lado da lista lateral (área estreita), a Observação fica com 180 px e o
   Item com o resto, para o nome não ser cortado. */
/* Item fica com a sobra; Observação com 30%. (O colspan="1000" das linhas de grupo deixava a coluna sem largura
   fixa com 0 px; o js/apr-grid.js corrige o colspan.) */
.apr-custodia-tabela .mud-table-head .mud-table-cell.apr-custodia-col-item { width: auto; }
.apr-custodia-tabela .mud-table-head .mud-table-cell.apr-custodia-col-obs { width: 30%; }
@container custodia-conteudo (max-width: 799.98px) {
    .apr-custodia-tabela .mud-table-head .mud-table-cell.apr-custodia-col-item { width: auto; }
    .apr-custodia-tabela .mud-table-head .mud-table-cell.apr-custodia-col-obs { width: 180px; }
}
.apr-custodia-obs {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: .875rem;
    line-height: 1.35;
}

/* A tabela é agrupada por categoria (linha "EPIs em uso" / "Ferramentas emprestadas"): a coluna Categoria e o
   trecho da categoria na segunda linha do item repetiriam o grupo, então ficam escondidos em todas as larguras. */
.apr-custodia-tabela .mud-table-cell.apr-custodia-col-categoria { display: none; }
.apr-custodia-categoria-texto { display: none; }

/* Rodapé de grupo vazio do MudDataGrid: regra global em apr-padrao.css (tr sem células) */

/* Chips do resumo filtram a tabela: cursor, fundo tonal no hover e ícone de filtro */
.mud-chip.apr-custodia-chip-filtro { cursor: pointer; }
.mud-chip.apr-custodia-chip-filtro.mud-chip-outlined:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), .08);
}
.mud-chip.apr-custodia-chip-filtro .apr-custodia-chip-filtro-icone {
    margin-left: 4px;
    font-size: 16px;
}

/* -----------------------------------------------------------------------------
   Rodada 4
   ----------------------------------------------------------------------------- */
/* Linha de grupo por categoria (MudDataGrid com Grouping): ícone, rótulo e contagem */
.apr-custodia-tabela .mud-datagrid-group,
.apr-custodia-tabela .mud-table-row.mud-datagrid-group {
    background-color: var(--mud-palette-background-gray);
}
.apr-custodia-tabela .mud-datagrid-group .mud-table-cell {
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: 600;
}
.apr-custodia-grupo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    font-weight: 600;
    vertical-align: middle;
}
.apr-custodia-grupo .apr-custodia-grupo-contagem {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* Código da entrega de origem da ferramenta, como link para o detalhe */
.apr-custodia-link-entrega {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.apr-custodia-link-entrega:hover { color: var(--mud-palette-primary); }

/* Resumo: "Trocar" logo depois do nome do colaborador */
.apr-custodia-resumo .apr-custodia-resumo-nome-linha {
    display: flex;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
}
.apr-custodia-resumo .apr-custodia-resumo-nome-linha > .apr-celula { min-width: 0; flex: 0 1 auto; }

/* Histórico: chip de Tipo padrão do módulo e o motivo ao lado */
.apr-historico-tipo {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* -----------------------------------------------------------------------------
   Rodada 6
   ----------------------------------------------------------------------------- */
/* Todos os colaboradores: Colaborador e Item com largura própria (nome com reticências e tooltip,
   código da entrega na 2ª linha) e a Observação com a sobra. Abaixo de --apr-grid-largura-minima
   (CustodiaPage) a tabela rola na horizontal em vez de espremer as colunas. */
.apr-custodia-tabela--todos .mud-table-head .mud-table-cell.apr-custodia-col-colaborador { width: 200px; }
.apr-custodia-tabela--todos .mud-table-head .mud-table-cell.apr-custodia-col-item { width: 240px; }
.apr-custodia-tabela--todos .mud-table-head .mud-table-cell.apr-custodia-col-obs { width: auto; }

/* Colunas menos importantes somem pela largura da área da tabela (o tooltip do item traz tamanho e data):
   - abaixo de 1100 px: Tamanho; com a coluna Situação (histórico completo), também Desde;
   - abaixo de 800 px (ao lado da lista de colaboradores, 1366): Desde, e Item um pouco menor (o nome do colaborador em negrito precisa de ~200 px). */
@container custodia-conteudo (max-width: 1099.98px) {
    .apr-custodia-tabela--todos .mud-table-cell.apr-custodia-col-tamanho { display: none; }
    .apr-custodia-tabela--todos.apr-custodia-tabela--com-situacao .mud-table-cell.apr-custodia-col-desde { display: none; }
}
@container custodia-conteudo (max-width: 799.98px) {
    .apr-custodia-tabela--todos .mud-table-cell.apr-custodia-col-desde { display: none; }
    .apr-custodia-tabela--todos .mud-table-head .mud-table-cell.apr-custodia-col-colaborador { width: 204px; }
    .apr-custodia-tabela--todos .mud-table-head .mud-table-cell.apr-custodia-col-item { width: 206px; }
    .apr-custodia-tabela--todos .mud-table-head .mud-table-cell.apr-custodia-col-obs { width: auto; }
}

/* Cabeçalho do cartão da tabela: título e frase de apoio à esquerda, o seletor "Por item / Por colaborador"
   à direita, centrado na altura dos dois (não fica mais sozinho numa linha entre o título e a frase). */
.apr-custodia-tabela .mud-toolbar > .apr-cartao-cabecalho-bloco {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titulo acoes" "subtitulo acoes";
    column-gap: 16px;
    align-items: center;
}
.apr-custodia-tabela .mud-toolbar > .apr-cartao-cabecalho-bloco > .apr-cartao-cabecalho { display: contents; }
.apr-custodia-tabela .apr-cartao-cabecalho-bloco .apr-cartao-cabecalho-titulo { grid-area: titulo; flex: 0 1 auto; }
.apr-custodia-tabela .apr-cartao-cabecalho-bloco .apr-cartao-cabecalho-acoes { grid-area: acoes; margin-left: 0; }
.apr-custodia-tabela .apr-cartao-cabecalho-bloco > .apr-cartao-subtitulo { grid-area: subtitulo; }