/* Duráveis — aditivo. A anatomia da página vem de dashboard.css (dashboard-header, panel-card,
   panel-title, dash-table, empty-state) e a barra de visões vem de css/shared/view-nav.css. Aqui
   fica só o que esta composição tem de próprio: o grid de filtros, a paginação, as ações de linha,
   os blocos de fato dos diálogos de detalhe e as larguras que impedem a rolagem lateral virar o
   jeito normal de ler as tabelas. Nenhum hexadecimal novo — todas as cores são tokens --tm-*. */

/* ---------- Filtros (visão Unidades) ---------- */

.duraveis-filters-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    gap: 16px;
}

/* O checkbox não tem a altura de um campo outlined: sem isto ele fica colado no topo da linha. */
.duraveis-filter-check {
    align-self: center;
}

.duraveis-filters-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ---------- Paginação e ações de linha ---------- */

.duraveis-pager {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* Duas ações na mesma célula (Ver detalhes · Criar lote) não podem colar uma na outra: o alvo de
   toque de "Criar lote" ficaria a um pixel do alvo de "Ver detalhes". */
.duraveis-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* O rótulo não quebra no meio: "Registrar" numa linha e "perda" na outra pareceria defeito.
   Faltando espaço, quem quebra é a linha de botões, não a palavra. */
.duraveis-row-actions .mud-button-root {
    white-space: nowrap;
}

/* ---------- Célula de duas linhas (item + identificação, posição + equipamento) ---------- */

.duraveis-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Cada linha trunca sozinha: a identificação tem até 100 caracteres e não pode empurrar a coluna. */
.duraveis-cell-stack > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.duraveis-cell-secondary {
    font-size: 12px;
    color: var(--tm-text-muted);
}

.duraveis-reference {
    font-weight: 600;
    color: var(--tm-text);
}

/* Ausência em itálico E em texto: nunca só pela cor. */
.duraveis-reference-missing {
    font-style: italic;
}

/* ---------- Filas ---------- */

/* Os painéis herdam o fundo do MudExpansionPanels; dentro de um panel-card isso vira um bloco
   sem contorno colado no seguinte. A borda é o que separa as seis filas visualmente. */
.duraveis-queues .mud-expand-panel {
    background-color: transparent;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    margin-bottom: 8px;
}

.duraveis-queues .mud-expand-panel:last-child {
    margin-bottom: 0;
}

.duraveis-queues .mud-expand-panel-header {
    font-weight: 600;
}

/* ---------- Tabelas: todas as colunas visíveis, sem rolagem lateral ----------
   Mesma técnica de relatorios.css/movimentacoes.css: table-layout fixed + larguras percentuais a
   partir de 600 px fazem as colunas dividirem o painel em vez de cada uma exigir a largura do
   próprio conteúdo. Assim o overflow-x que .dash-table traz de dashboard.css volta a ser rede de
   segurança. Abaixo de 600 px o MudTable empilha a linha num cartão com DataLabel, onde largura de
   coluna não significa nada. */

@media (min-width: 600px) {
    .duraveis-units-table table,
    .duraveis-custodies-table table,
    .duraveis-queue-table table,
    .duraveis-groups-table table,
    .durable-history-table table {
        table-layout: fixed;
        width: 100%;
    }

    /* 1 Item · 2 Posição · 3 Estado · 4 Condição · 5 Aferição · 6 Ações — somam 100%.
       Ações cresceu para caber "Ver detalhes" e "Atribuir identificação"; a posição, para caber o
       equipamento embaixo da gaveta. Ao mexer nas colunas, refazer a conta. */
    .duraveis-units-table th:nth-child(1),
    .duraveis-units-table td:nth-child(1) {
        width: 24%;
    }

    .duraveis-units-table th:nth-child(2),
    .duraveis-units-table td:nth-child(2) {
        width: 15%;
    }

    .duraveis-units-table th:nth-child(3),
    .duraveis-units-table td:nth-child(3) {
        width: 13%;
    }

    .duraveis-units-table th:nth-child(4),
    .duraveis-units-table td:nth-child(4) {
        width: 12%;
    }

    .duraveis-units-table th:nth-child(5),
    .duraveis-units-table td:nth-child(5) {
        width: 14%;
    }

    .duraveis-units-table th:nth-child(6),
    .duraveis-units-table td:nth-child(6) {
        width: 22%;
    }

    /* 1 Item · 2 Situação · 3 OS · 4 Responsável · 5 Retirada em · 6 Tempo fora · 7 Ações
       As sete somam 100%. Com table-layout: fixed, uma coluna a mais sem redistribuir empurra a
       tabela para fora do container — foi o que aconteceu quando "Situação" entrou: o código do
       SKU sumia à esquerda e os botões ficavam cortados à direita, atrás de uma barra de rolagem.
       Ao mexer nas colunas desta tabela, refazer a conta. */
    .duraveis-custodies-table th:nth-child(1),
    .duraveis-custodies-table td:nth-child(1) {
        width: 22%;
    }

    .duraveis-custodies-table th:nth-child(2),
    .duraveis-custodies-table td:nth-child(2) {
        width: 11%;
    }

    .duraveis-custodies-table th:nth-child(3),
    .duraveis-custodies-table td:nth-child(3) {
        width: 10%;
    }

    .duraveis-custodies-table th:nth-child(4),
    .duraveis-custodies-table td:nth-child(4) {
        width: 15%;
    }

    .duraveis-custodies-table th:nth-child(5),
    .duraveis-custodies-table td:nth-child(5) {
        width: 13%;
    }

    .duraveis-custodies-table th:nth-child(6),
    .duraveis-custodies-table td:nth-child(6) {
        width: 9%;
    }

    /* Duas ações lado a lado precisam de mais espaço que uma. */
    .duraveis-custodies-table th:nth-child(7),
    .duraveis-custodies-table td:nth-child(7) {
        width: 20%;
    }

    /* 1 SKU · 2 Recuperação · 3 Unidades · 4 Elegíveis · 5 Bloqueadas · 6 Saldo · 7 Ações */
    .duraveis-groups-table th:nth-child(1),
    .duraveis-groups-table td:nth-child(1) {
        width: 28%;
    }

    .duraveis-groups-table th:nth-child(2),
    .duraveis-groups-table td:nth-child(2) {
        width: 16%;
    }

    .duraveis-groups-table th:nth-child(3),
    .duraveis-groups-table td:nth-child(3),
    .duraveis-groups-table th:nth-child(4),
    .duraveis-groups-table td:nth-child(4),
    .duraveis-groups-table th:nth-child(5),
    .duraveis-groups-table td:nth-child(5) {
        width: 8%;
    }

    .duraveis-groups-table th:nth-child(6),
    .duraveis-groups-table td:nth-child(6) {
        width: 14%;
    }

    .duraveis-groups-table th:nth-child(7),
    .duraveis-groups-table td:nth-child(7) {
        width: 18%;
    }

    /* 1 Item · 2 Posição · 3 Condição · 4 Recuperações · 5 Ações */
    .duraveis-queue-table th:nth-child(1),
    .duraveis-queue-table td:nth-child(1) {
        width: 34%;
    }

    .duraveis-queue-table th:nth-child(2),
    .duraveis-queue-table td:nth-child(2) {
        width: 16%;
    }

    .duraveis-queue-table th:nth-child(3),
    .duraveis-queue-table td:nth-child(3) {
        width: 18%;
    }

    .duraveis-queue-table th:nth-child(4),
    .duraveis-queue-table td:nth-child(4) {
        width: 14%;
    }

    .duraveis-queue-table th:nth-child(5),
    .duraveis-queue-table td:nth-child(5) {
        width: 18%;
    }

    /* O CABEÇALHO também empurra: MudTable o renderiza nowrap, e um rótulo maior que a coluna
       estica a tabela inteira mesmo com table-layout fixed. */
    .duraveis-units-table th,
    .duraveis-custodies-table th,
    .duraveis-queue-table th,
    .duraveis-groups-table th,
    .durable-history-table th {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* O nome do item é o único texto livre destas tabelas: trunca enquanto divide a linha com as
       outras colunas, e o conteúdo completo continua no detalhe. */
    .duraveis-units-table td:nth-child(1),
    .duraveis-custodies-table td:nth-child(1),
    .duraveis-queue-table td:nth-child(1),
    .duraveis-groups-table td:nth-child(1) {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Abaixo de 600 px o MudTable empilha a linha num cartão — e aí a herança compartilhada atrapalha:
   .dash-table impõe white-space: nowrap a TODA célula de corpo (dashboard.css). Num cartão, nowrap
   faz a célula exigir a largura do conteúdo inteiro e devolve exatamente a rolagem lateral que esta
   refatoração existe para eliminar. A liberação é ESCOPADA a estas tabelas de propósito: mexer na
   regra compartilhada mudaria silenciosamente todas as outras listagens do app. */
@media (max-width: 599px) {
    .duraveis-units-table .mud-table-body .mud-table-cell,
    .duraveis-custodies-table .mud-table-body .mud-table-cell,
    .duraveis-queue-table .mud-table-body .mud-table-cell,
    .duraveis-groups-table .mud-table-body .mud-table-cell,
    .durable-history-table .mud-table-body .mud-table-cell {
        white-space: normal;

        /* white-space: normal sozinho NÃO basta. No cartão empilhado o MudBlazor faz da célula um
           flex de duas peças — o rótulo (::before, de DataLabel) e o valor — em UMA linha com
           justify-content: space-between. Sem wrap, a largura mínima da célula é rótulo + valor
           lado a lado, e a linha mais larga passa a EMPURRAR a tabela inteira: medido em 375 px,
           "Item" com o nome completo da ferramenta exigia 332 px numa caixa de 277 e devolvia a
           rolagem lateral que esta composição existe para eliminar. Com wrap, o valor cai para a
           linha de baixo em vez de alargar a tabela. */
        flex-wrap: wrap;
        gap: 2px 12px;
    }

    .duraveis-filters-grid {
        grid-template-columns: 1fr;
    }

    .duraveis-filters-actions {
        justify-content: stretch;
    }

    .duraveis-filters-actions .mud-button-root {
        flex: 1 1 auto;
    }

    .duraveis-pager {
        justify-content: space-between;
    }
}

/* ---------- Blocos de fato dos diálogos de detalhe ----------
   Resumo da unidade, detalhe da custódia e detalhe do agrupamento usam a mesma anatomia: um título
   de seção e uma grade de pares rótulo/valor. */

.durable-section-title.mud-typography {
    margin: 24px 0 8px;
    font-weight: 600;
}

.durable-section-title.mud-typography:first-child {
    margin-top: 0;
}

.durable-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.durable-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.durable-fact-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tm-text-muted);
}

.durable-fact-value {
    font-weight: 600;
    color: var(--tm-text);
    overflow-wrap: anywhere;
}

/* ---------- Ações de histórico do resumo ---------- */

/* Grade em vez de flex: todos os botões com a MESMA largura, preenchendo a linha inteira. No
   grid o stretch padrão iguala também a ALTURA, então um rótulo que quebre em duas linhas não
   desalinha os vizinhos — com flex isso exigiria regra extra. */
.durable-history-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.durable-history-button.mud-button-root {
    justify-content: flex-start;
    min-height: 40px;
    border-radius: 8px;
    /* "Linha do tempo da unidade" é o rótulo mais longo: precisa quebrar em vez de estourar
       a coluna ou ser cortado. */
    white-space: normal;
    text-align: left;
}

/* ---------- Observações ----------
   Cada nota aparece SÓ no diálogo a que pertence, e precisa quebrar linha: uma observação de
   inspeção com duas frases em nowrap empurraria o diálogo inteiro para a rolagem lateral. */

.durable-note {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    margin-top: 8px;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    background-color: var(--tm-bg);
}

.durable-note-meta {
    font-size: 12px;
    color: var(--tm-text-muted);
}

.durable-note-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--tm-text);
}

/* ---------- Responsive dos diálogos ----------
   Dentro de um MudDialog a largura útil é menor que a da página: os fatos quebram antes. */

@media (max-width: 899px) {
    .durable-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .durable-history-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .durable-facts {
        grid-template-columns: 1fr;
    }

    .durable-history-actions {
        grid-template-columns: 1fr;
    }
}