/* Tags — aditivo, reaproveita tokens/classes de dashboard.css e skus.css */

/* Mesma forma do formulário de família: campo único empilhado, com largura mínima para o
   diálogo não encolher até virar uma coluna estreita demais para o helper text. */
.tag-form-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
    min-width: 380px;
}

@media (max-width: 599px) {
    .tag-form-grid {
        min-width: 0;
    }
}

/* Faixa de chips usada em três lugares: linha de /skus e /kits, seleção do formulário e a
   visualização somente-leitura. A quebra é permitida para que uma linha de tabela com muitas
   tags cresça em altura em vez de empurrar as colunas seguintes. */
.sku-tag-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.sku-tag-chips-dense {
    gap: 2px;
    margin-top: 2px;
}

.sku-tag-chips-editable {
    margin-top: 8px;
    gap: 6px;
}

.sku-tag-chips-empty {
    color: var(--mud-palette-text-secondary);
}

.sku-tag-chip {
    max-width: 220px;
}

/* Uma tag ARQUIVADA continua visível — escondê-la faria um SKU classificado parecer sem
   classificação. O tracejado é o que diz "isto ainda vale, mas não está mais disponível":
   diferente o bastante para ser notado, discreto o bastante para não parecer erro. */
.sku-tag-chip-archived {
    border-style: dashed !important;
    opacity: 0.75;
}

.sku-tag-chip-overflow {
    font-variant-numeric: tabular-nums;
}

/* Coluna "Nome" de /skus e /kits: o nome em cima, os chips embaixo. A coluna cresce em altura
   em vez de disputar largura com as colunas de número, que já são as mais apertadas da tabela. */
.sku-name-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sku-tag-picker {
    display: flex;
    flex-direction: column;
}