/* Grade de produtos — cadastro de eixos/valores (ListaGrades.js) e aba Grade
   do produto-modelo (AbaGradeItem.js). Somente tokens de tokens.css. */

.grd-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: var(--spacing-4);
    align-items: start;
}
@media (max-width: 900px) {
    .grd-layout { grid-template-columns: 1fr; }
}

.grd-lista-eixos { list-style: none; margin: 0; padding: var(--spacing-2); }
.grd-lista-eixos li {
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
}
.grd-lista-eixos li:hover { background: var(--color-surface-hover); }
.grd-lista-eixos li.ativo {
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);
    font-weight: var(--font-weight-semibold);
}

.grd-secao { padding: var(--spacing-4); }
.grd-secao + .grd-secao { border-top: 1px solid var(--color-border); }
.grd-secao-titulo {
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text);
}
.grd-linha-form {
    display: flex; flex-wrap: wrap; gap: var(--spacing-2); align-items: flex-end;
    margin-bottom: var(--spacing-3);
}
.grd-linha-form .form-group { margin: 0; }

/* Amostra de cor (eixo tipo cor) */
.grd-amostra {
    display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
    border-radius: var(--radius-full); border: 1px solid var(--color-border-strong);
    vertical-align: middle;
}

/* Chips de valores selecionáveis */
.grd-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.grd-chip {
    display: inline-flex; align-items: center; gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-full);
    background: var(--color-surface); color: var(--color-text-secondary);
    font-size: var(--font-size-sm); cursor: pointer; user-select: none;
}
.grd-chip:hover { border-color: var(--color-border-strong); }
.grd-chip.selecionado {
    border-color: var(--color-primary); background: var(--color-primary-subtle);
    color: var(--color-primary-text); font-weight: var(--font-weight-medium);
}
.grd-chip.bloqueado { cursor: default; opacity: .7; }

/* Matriz de combinações / estoque */
.grd-matriz-wrap { overflow-x: auto; }
.grd-matriz { border-collapse: collapse; font-size: var(--font-size-sm); }
.grd-matriz th, .grd-matriz td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-2);
    text-align: center; min-width: 88px;
}
.grd-matriz thead th, .grd-matriz tbody th {
    background: var(--color-surface-sunken);
    font-weight: var(--font-weight-semibold); color: var(--color-text);
}
.grd-celula-existente { background: var(--color-success-subtle); color: var(--color-success); }
.grd-celula-nova { background: var(--color-surface); }
.grd-celula-off { background: var(--color-surface-sunken); color: var(--color-text-disabled); }
.grd-celula-preco { width: 80px; margin-top: var(--spacing-1); }
.grd-celula-estoque strong { display: block; font-size: var(--font-size-md); color: var(--color-text); }
.grd-celula-estoque small { color: var(--color-text-secondary); }
.grd-celula-zerada strong { color: var(--color-danger); }

.grd-dica {
    padding: var(--spacing-3); margin-bottom: var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-primary-subtle); color: var(--color-primary-text);
    font-size: var(--font-size-sm);
}
.grd-acoes { display: flex; flex-wrap: wrap; gap: var(--spacing-2); justify-content: flex-end; margin-top: var(--spacing-3); }