/* ==========================================================================================
   Armazenagem — a estrutura do galpão em árvore, a lista de posições e o gerador em lote.
   Só tokens do design system; nenhum valor literal de cor, fonte ou espaço.
   ========================================================================================== */

/* ------------------------------------------------------------------------------------------
   Árvore da estrutura
   ------------------------------------------------------------------------------------------ */

.wms-estrutura {
    background: var(--cor-fundo-superficie);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
    padding: var(--espaco-3);
}

.wms-estrutura__nivel {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* O recuo é do nível de dentro, como na árvore da documentação: a profundidade sai da estrutura
   e nenhum nível precisa saber em que altura está. */
.wms-estrutura__nivel .wms-estrutura__nivel {
    margin-left: var(--espaco-4);
    padding-left: var(--espaco-2);
    border-left: var(--borda-largura) solid var(--cor-borda);
}

.wms-estrutura__item {
    margin: 0;
}

.wms-estrutura__aviso {
    padding: var(--espaco-2);
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-tam-sm);
}

.wms-estrutura__aviso--vazio {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
}

/* Altura mínima de alvo de toque: a árvore é usada no tablet, na frente da estante. */
.wms-estrutura__no {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    min-height: var(--alvo-min);
    padding: var(--espaco-1) var(--espaco-2);
    border-radius: var(--raio-md);
    transition: background-color var(--transicao);
}

.wms-estrutura__no:hover {
    background: var(--cor-fundo-sutil);
}

/* Inativo: apagado e em itálico, não só numa cor — mesma regra da linha inativa do grid. */
.wms-estrutura__no--inativo {
    color: var(--cor-texto-tenue);
    font-style: italic;
}

.wms-estrutura__alternar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--alvo-min);
    height: var(--alvo-min);
    margin: calc(var(--espaco-1) * -1) 0;
    padding: 0;
    border: 0;
    border-radius: var(--raio-md);
    background: transparent;
    color: var(--cor-texto-secundario);
    cursor: pointer;
}

.wms-estrutura__alternar:focus-visible {
    outline: 2px solid var(--cor-primaria-500);
    outline-offset: 2px;
}

.wms-estrutura__alternar .rz-icon {
    transition: transform var(--transicao-media);
}

.wms-estrutura__alternar--aberto .rz-icon {
    transform: rotate(90deg);
}

.wms-estrutura__alternar--vazio {
    cursor: default;
}

.wms-estrutura__tipo {
    font-size: var(--fonte-tam-xs);
    font-weight: var(--fonte-peso-forte);
    letter-spacing: var(--fonte-espaco-rotulo);
    text-transform: uppercase;
    color: var(--cor-texto-tenue);
    min-width: 5.5rem;
}

.wms-estrutura__codigo {
    font-size: var(--fonte-tam-md);
}

.wms-estrutura__nome {
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-tam-sm);
}

.wms-estrutura__contagem {
    color: var(--cor-texto-tenue);
    font-size: var(--fonte-tam-xs);
}

.wms-estrutura__acoes {
    display: inline-flex;
    gap: var(--espaco-1);
    margin-left: auto;
}

/* Alvo de toque de tablet nas ações de cada nó, como nas ações da linha do grid: é ali que o
   operador toca para incluir ou inativar, na frente da estante. */
.wms-estrutura__acoes :where(.rz-button) {
    min-width: var(--alvo-min);
    min-height: var(--alvo-min);
}

/* ------------------------------------------------------------------------------------------
   Lista de posições
   ------------------------------------------------------------------------------------------ */

.wms-posicao__cadeia {
    display: block;
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-tam-sm);
}

.wms-posicao__descricao {
    display: block;
    color: var(--cor-texto-tenue);
    font-size: var(--fonte-tam-xs);
}

/* A linha bloqueada ganha uma borda à esquerda além do selo: numa lista longa, o olho precisa
   achar as bloqueadas sem ler a coluna de situação linha a linha. */
.wms-posicao__linha--bloqueada td:first-child {
    box-shadow: inset 3px 0 0 var(--cor-aviso);
}

/* ------------------------------------------------------------------------------------------
   Gerador em lote — a prévia
   ------------------------------------------------------------------------------------------ */

.wms-geracao__previa {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    padding: var(--espaco-4);
    border: var(--borda-largura) solid var(--cor-primaria-200);
    border-radius: var(--raio-lg);
    background: var(--cor-primaria-050);
    box-shadow: var(--sombra-marca-1);
    animation: wms-geracao-entrada var(--transicao-media);
}

.wms-geracao__numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--espaco-3);
    margin: 0;
}

.wms-geracao__numeros dt {
    color: var(--cor-texto-secundario);
    font-size: var(--fonte-tam-xs);
}

.wms-geracao__numeros dd {
    margin: 0;
    font-size: var(--fonte-tam-xl);
    font-weight: var(--fonte-peso-forte);
}

.wms-geracao__nada {
    margin: 0;
    color: var(--cor-texto-secundario);
}

@keyframes wms-geracao-entrada {
    from {
        opacity: 0;
        transform: translateY(var(--espaco-1));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wms-estrutura__no,
    .wms-estrutura__alternar .rz-icon {
        transition: none;
    }

    .wms-geracao__previa {
        animation: none;
    }
}