/* Movimentações page — additive only, reuses tokens/classes from dashboard.css and skus.css */

/* Filter bar now uses TableFilterPanel (Components/Shared/Tables/TableFilterPanel.razor,
   styled in css/shared/table-filter-panel.css) instead of .movimentacoes-filters-grid/.filters-footer. */

/* ---------- Movimentações table ----------
   Seven informative columns + Ações. Scoped to .movimentacoes-table so .dash-table itself — shared
   with every other listing — keeps behaving exactly as before. Fixed layout with percentage widths
   makes the columns share the panel instead of each demanding its content width, so .dash-table's
   .mud-table-container overflow-x stays a safety net instead of being triggered at 1280px with the
   sidebar open. Only applied from 600px up: below that MudTable stacks each row into a DataLabel
   card, where column widths are meaningless. */
@media (min-width: 600px) {
    .movimentacoes-table table {
        table-layout: fixed;
        width: 100%;
    }

    /* 1 Data · 2 Usuário · 3 Tipo · 4 SKU · 5 Quantidade · 6 Centro de Custo · 7 Status · 8 Ações */
    .movimentacoes-table th:nth-child(1),
    .movimentacoes-table td:nth-child(1) {
        width: 10%;
    }

    .movimentacoes-table th:nth-child(2),
    .movimentacoes-table td:nth-child(2) {
        width: 14%;
    }

    .movimentacoes-table th:nth-child(3),
    .movimentacoes-table td:nth-child(3) {
        width: 14%;
    }

    .movimentacoes-table th:nth-child(4),
    .movimentacoes-table td:nth-child(4) {
        width: 25%;
    }

    .movimentacoes-table th:nth-child(5),
    .movimentacoes-table td:nth-child(5) {
        width: 8%;
    }

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

    .movimentacoes-table th:nth-child(7),
    .movimentacoes-table td:nth-child(7) {
        width: 10%;
    }

    .movimentacoes-table th:nth-child(8),
    .movimentacoes-table td:nth-child(8) {
        width: 5%;
    }

    /* Two lines are allowed in exactly two cells — Data (data over hora) and SKU (código sobre
       nome). Every other cell stays single-line and truncates. */
    .movimentacoes-table .movimentacoes-date-cell,
    .movimentacoes-table .movimentacoes-sku-cell {
        white-space: normal;
        line-height: 1.25;
    }

    .movimentacoes-table .movimentacoes-truncate-cell {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.movimentacoes-date,
.movimentacoes-time,
.movimentacoes-sku-code,
.movimentacoes-sku-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.movimentacoes-time,
.movimentacoes-sku-name {
    font-size: var(--type-table-meta);
    font-weight: 400;
    letter-spacing: normal;
    color: var(--tm-text-muted);
}

/* The two chip columns are the narrowest of the informative ones — a long label
   ("Ajuste de Estoque") shrinks to an ellipsis instead of widening the table. */
.movimentacoes-table .mud-chip {
    max-width: 100%;
}

.movimentacoes-table .mud-chip .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.movimentacoes-table .movimentacoes-qty-cell {
    text-align: right;
}

/* ---------- Responsive column priority ----------
   Between 900px and the desktop range the eight columns stay, just tighter. Below 900px Usuário
   and Centro de Custo drop out (still reachable via "Visualizar detalhes"), and below 600px
   MudTable's own DataLabel stacking takes over for what remains. */
@media (min-width: 600px) and (max-width: 1279px) {
    .movimentacoes-table .mud-table-cell {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 899px) {
    .movimentacoes-secondary-col {
        display: none;
    }
}

/* ---------- Equipment filter (nomes configurados pelo cliente) ----------
   The wrapper exists to carry the title tooltip, so it has to behave exactly like the bare
   MudSelect it replaced as a grid cell of .table-filter-panel-advanced. */
.movimentacoes-equipment-field {
    width: 100%;
    min-width: 0;
}

.movimentacoes-equipment-field .mud-input-control {
    width: 100%;
}

/* Closed field: a long name truncates instead of stretching the cell — the full text stays
   available through the wrapper's title. */
.movimentacoes-equipment-field input.mud-input-root {
    text-overflow: ellipsis;
}

/* Open dropdown: MudBlazor's own DropdownWidth.Adaptive sets an inline min-width equal to the
   field, so the popover is never narrower than what opened it, and grows with the names. The cap
   below is the other half — !important because that same JS writes max-width:none inline. It
   stays inside the viewport on any screen, so a long name never produces horizontal scrolling. */
.movimentacoes-equipment-popover.mud-popover {
    max-width: min(560px, calc(100vw - 32px)) !important;
    overflow-x: hidden;
}

/* Names too long even for the cap wrap onto a second line rather than being cut off. The clamp
   goes on the typography element that actually holds the text (MudSelectItem renders
   .mud-list-item > .mud-list-item-text > p.mud-typography), not on its wrappers. */
.movimentacoes-equipment-popover .mud-list-item {
    white-space: normal;
}

.movimentacoes-equipment-popover .mud-list-item-text .mud-typography {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

@media (max-width: 599px) {
    .movimentacoes-equipment-popover.mud-popover {
        max-width: calc(100vw - 24px) !important;
    }
}

/* ---------- Movimentação details dialog ---------- */

.movimentacao-section-title.mud-typography {
    font-weight: 700;
    color: var(--tm-text);
    margin-bottom: 12px;
}

.movimentacao-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 420px;
}

/* One-item grid (the "Posições Afetadas" count that sits above the lines table). */
.movimentacao-info-grid-single {
    grid-template-columns: 1fr;
    margin-bottom: 16px;
}

.movimentacao-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.movimentacao-info-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.movimentacao-info-value {
    font-size: 15px;
    color: var(--tm-text);
}

.movimentacao-divider {
    margin: 20px 0 16px;
    border-color: var(--tm-border) !important;
}

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