/* SKUs page — additive only, reuses tokens from dashboard.css */

/* Filter bars now use TableFilterPanel (Components/Shared/Tables/TableFilterPanel.razor,
   styled in css/shared/table-filter-panel.css) instead of the .filters-card/.filters-grid/
   .filter-field/.clear-filters-btn classes that used to live here. */

/* ---------- Table: photo + actions ---------- */

/* Fixed-size frame — an oversized source image must never blow up the row or bleed into
   neighboring cells. overflow: hidden is what actually enforces that; width/height/min-width
   only set the frame's own footprint. */
.sku-photo {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 8px;
    background-color: var(--tm-secondary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sku-photo-thumb {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Static, larger preview used by the read-only "Visualizar" view of SkuFormDialog — same
   cover/crop behavior as the table thumbnail, just bigger. */
.sku-photo-preview {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    background-color: var(--tm-secondary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
}

.sku-photo-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.actions-cell {
    text-align: center !important;
}

.actions-cell .mud-table-cell-inner-content,
th.actions-cell {
    display: flex;
    justify-content: center;
}

.table-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* Empty flexible column so the Ações column always hugs the right edge,
   even when the other columns don't fill the table width. */
.table-spacer {
    width: 100%;
}

.table-action-btn.mud-icon-button,
.table-action-btn .mud-icon-button,
.table-action-btn .mud-button-root {
    width: 32px;
    height: 32px;
    color: var(--tm-text-muted) !important;
}

.table-action-btn.mud-icon-button:hover,
.table-action-btn .mud-icon-button:hover,
.table-action-btn .mud-button-root:hover {
    color: var(--tm-primary) !important;
    background-color: var(--tm-primary-tint) !important;
}

/* Ação de tabela desabilitada que ainda precisa EXPLICAR o motivo.

   Um <button disabled> não dispara evento de ponteiro nenhum — nem nele, nem nos ancestrais —,
   então um tooltip em volta dele nunca abriria. Anular o pointer-events do botão faz o teste de
   hit chegar ao <span> que o envolve, que é quem o tooltip escuta. O <span> também carrega um
   `title` com o mesmo texto, para quem chega por teclado ou leitor de tela. */
.table-action-disabled {
    display: inline-flex;
}

.table-action-disabled .mud-button-root:disabled {
    pointer-events: none;
}

/* ---------- Empty state ---------- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 72px 24px;
    gap: 16px;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--tm-secondary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-title.mud-typography {
    font-family: var(--font-display);
    color: var(--tm-text);
    font-weight: 700;
}

/* ---------- New SKU dialog ----------
   .dialog-title e .dialog-subtitle vivem em dialogs.css (compartilhada com a gestão local do agente). */

.sku-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 8px;
    min-width: 420px;
}

.sku-form-grid .span-1 {
    grid-column: span 1;
}

.sku-form-grid .span-2 {
    grid-column: span 2;
}

.sku-form-grid .span-3 {
    grid-column: span 3;
}

/* Groups the SKU form into labeled sections (Identificação / Classificação / Estoque e
   custo / Foto) instead of one long unbroken list of fields. */
.sku-form-section-title.mud-typography {
    grid-column: 1 / -1;
    color: var(--tm-primary);
    font-weight: 700;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
    margin-top: 8px;
    border-bottom: 1px solid var(--tm-border);
}

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

.sku-form-code-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.upload-placeholder {
    border: 1px dashed var(--tm-border);
    border-radius: 10px;
    background-color: var(--tm-bg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--tm-text-muted);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.upload-placeholder:hover {
    border-color: var(--tm-primary);
    background-color: var(--tm-primary-tint);
}

.status-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    padding: 6px 16px;
}

.status-field-label {
    color: var(--tm-text-muted);
    font-weight: 600;
}

.status-field-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-field-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--tm-text);
}

@media (max-width: 599px) {
    .sku-form-grid {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .sku-form-grid .span-1,
    .sku-form-grid .span-2,
    .sku-form-grid .span-3 {
        grid-column: span 1;
    }
}

/* ---------- Table pagination (visual only) ---------- */

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--tm-border);
}

.pagination-info.mud-typography {
    color: var(--tm-text-muted);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-controls .mud-icon-button {
    width: 32px;
    height: 32px;
    color: var(--tm-text-muted) !important;
}

.pagination-controls .mud-icon-button:hover {
    color: var(--tm-primary) !important;
    background-color: var(--tm-primary-tint) !important;
}

.pagination-controls .mud-icon-button.mud-disabled {
    color: #C7CACD !important;
}

.pagination-current {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--tm-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-tech);
}

@media (max-width: 599px) {
    .table-pagination {
        justify-content: center;
        text-align: center;
    }
}