/* Brunx Operações - Movimentações v1.1.0: extrato compacto, janela flutuante, detalhe do movimento e escolha de página.
   Usa apenas os tokens do Brunx Design System. */

/* ---------- Extrato compacto (sem rolagem lateral) ---------- */
.movement-table-card .movement-table-scroll { max-height: none; overflow: visible; }
.movement-table-card .table-scroll .movement-table--compact { min-width: 0 !important; width: 100%; table-layout: fixed; white-space: normal; }
.movement-table--compact .col-date { width: 108px; }
.movement-table--compact .col-warehouse { width: 18%; }
.movement-table--compact .col-type { width: 19%; }
.movement-table--compact .col-qty { width: 72px; }
.movement-table--compact .col-stock { width: 76px; }
.movement-table--compact .col-open { width: 36px; }
.movement-table--compact th { padding: 9px 10px; }
.movement-table--compact td { padding: 8px 10px; vertical-align: middle; line-height: 1.35; }
.movement-table--compact th:first-child, .movement-table--compact td:first-child { padding-left: var(--space-4); }
.movement-table--compact th:last-child, .movement-table--compact td:last-child { padding-right: var(--space-3); }
.movement-table--compact thead th { position: sticky; top: 0; z-index: 2; }

.movement-table--compact tbody tr.movement-row { cursor: pointer; }
.movement-table--compact tbody tr.movement-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.movement-table--compact tbody tr.movement-row.is-selected > td { background: var(--selection); }

.mv-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-main { color: var(--ink); font-weight: 600; }
.mv-sub { margin-top: 1px; color: var(--muted); font-size: 12px; }
.mv-mono { font: 500 12px/1.35 var(--font-mono); }
.mv-date { font-variant-numeric: tabular-nums; font-weight: 600; }
.mv-date small { margin-left: 4px; color: var(--muted); font-weight: 500; }
.mv-note { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--muted); }
.mv-type { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mv-type .movement-badge { flex: 0 0 auto; }
.mv-qty { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mv-qty.in { color: var(--success); }
.mv-qty.out { color: var(--danger); }
.mv-stock { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mv-stock.is-after { font-weight: 650; }
.mv-stock.is-pending, .mv-stock.is-unavailable { color: var(--muted); font-weight: 400; }
.mv-stock.is-negative { color: var(--danger); }
.mv-open { color: var(--muted); text-align: center; }
.mv-open svg { display: block; margin: 0 auto; }
.movement-row:hover .mv-open { color: var(--ink); }
.mv-reversal { display: inline-flex; margin-right: 6px; padding: 0 5px; border-radius: var(--radius-control); background: var(--warning-soft); color: var(--warning); font-size: 11px; font-weight: 650; line-height: 16px; vertical-align: 1px; }

/* ---------- Cantos: o cartão recorta cabeçalho, linhas e rodapé no mesmo raio ---------- */
.movement-table-card.panel { overflow: visible; isolation: isolate; }
.movement-table-card .table-heading { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.movement-table-card .movement-pagination { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.movement-table--compact tbody tr:last-child > td { border-bottom: 0; }
.movement-table-card .table-scroll { scrollbar-gutter: auto; }

/* ---------- Botão "Abrir em janela" ---------- */
.movement-float-toggle .icon-collapse { display: none; }
.movement-table-card.is-floating .movement-float-toggle .icon-expand { display: none; }
.movement-table-card.is-floating .movement-float-toggle .icon-collapse { display: inline; }

/* ---------- Extrato em janela flutuante ---------- */
.movement-float-backdrop { position: fixed; inset: 0; z-index: 900; background: var(--overlay); }
.movement-float-backdrop[hidden] { display: none; }
.movement-table-card.is-floating {
    position: fixed; z-index: 901; inset: 24px;
    display: flex; flex-direction: column;
    max-width: 1500px; margin: 0 auto;
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-modal);
}
.movement-table-card.is-floating .table-heading { flex: 0 0 auto; border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.movement-table-card.is-floating .movement-pagination { flex: 0 0 auto; border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
.movement-table-card.is-floating .movement-table-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
body.movement-float-open { overflow: hidden; }

/* ---------- Escolher página ---------- */
.page-jump-wrap { position: relative; }
.table-pagination__controls button.page-jump-trigger { min-width: 112px; padding: 0 var(--space-3); color: var(--ink); cursor: pointer; }
.table-pagination__controls button.page-jump-trigger:disabled { color: var(--muted); cursor: default; }
.page-jump-trigger::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
.page-jump-trigger:disabled::after { display: none; }
.table-pagination__controls .page-jump-trigger { display: inline-flex; align-items: center; justify-content: center; }
.page-jump { position: absolute; z-index: 20; right: -40px; bottom: calc(100% + 8px); width: 252px; padding: var(--space-3); border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: var(--shadow-float), var(--shadow-card); }
.page-jump[hidden] { display: none; }
.page-jump__form label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.page-jump__row { display: flex; gap: var(--space-2); }
.page-jump__row .movement-control { height: 32px; }
.page-jump__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: var(--space-3); max-height: 168px; overflow-y: auto; }
.page-jump__grid:empty { display: none; }
.table-pagination__controls .page-jump__grid button { min-width: 0; width: 100%; height: 28px; font-size: 12px; }
.table-pagination__controls .page-jump__grid button.is-active { background: var(--action); color: var(--on-action); box-shadow: var(--shadow-btn-primary); }
.page-jump__hint { margin: var(--space-2) 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.page-jump__hint:empty { display: none; }
.movement-pagination .table-pagination__summary.is-walking { color: var(--info); font-weight: 600; }

/* ---------- Detalhe do movimento (modal) ---------- */
.movement-detail-backdrop { z-index: 1000; }
.movement-detail-backdrop[hidden] { display: none; }
.movement-detail { display: flex; flex-direction: column; width: min(640px, 100%); max-height: calc(100vh - 32px); }
.movement-detail .modal__header { gap: var(--space-3); flex: 0 0 auto; }
.movement-detail__heading { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.movement-detail__heading h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movement-icon-button { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--muted); cursor: pointer; }
.movement-icon-button:hover { background: var(--surface-sunken); color: var(--ink); }
.movement-detail__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4); }
.mvd-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.mvd-hero > div { padding: 10px var(--space-3); border-radius: var(--radius-item); background: var(--surface-sunken); }
.mvd-hero small { display: block; color: var(--muted); font-size: 12px; }
.mvd-hero strong { display: block; margin-top: 2px; color: var(--ink); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.mvd-hero strong.in { color: var(--success); }
.mvd-hero strong.out, .mvd-hero strong.is-negative { color: var(--danger); }
.mvd-hero strong.is-muted { color: var(--muted); font-size: 14px; font-weight: 500; }
.mvd-list { display: grid; grid-template-columns: 170px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--divider); }
.mvd-list dt, .mvd-list dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--divider); font-size: 13px; line-height: 1.45; }
.mvd-list dt { padding-right: var(--space-3); color: var(--muted); }
.mvd-list dd { color: var(--ink); overflow-wrap: anywhere; }
.mvd-list dd .mv-mono { margin-right: 6px; }
.mvd-list dd small { display: block; color: var(--muted); font-size: 12px; }
.movement-detail__footer { flex: 0 0 auto; align-items: center; justify-content: space-between; }
.movement-detail__position { color: var(--muted); font-size: 12px; }
.movement-detail__nav { display: flex; gap: var(--space-2); }
.movement-detail__nav .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Telas menores ---------- */
@media (max-width: 1100px) {
    .movement-table--compact .col-warehouse { width: 15%; }
    .movement-table--compact .col-type { width: 17%; }
    .movement-table--compact .col-stock { width: 64px; }
}
@media (max-width: 860px) {
    .movement-table--compact .col-warehouse, .movement-table--compact .col-warehouse-head,
    .movement-table--compact td.mv-warehouse { display: none; }
    .movement-table--compact .col-type { width: 96px; }
    .mv-type-cell .mv-sub { display: none; }
    .movement-table-card.is-floating { inset: 8px; }
    .movement-float-toggle span { display: none; }
}
@media (max-width: 620px) {
    /* No celular cada movimento vira um cartão de duas linhas. */
    .movement-table--compact colgroup, .movement-table--compact thead { display: none; }
    .movement-table--compact, .movement-table--compact tbody { display: block; width: 100%; }
    .movement-table--compact tbody tr.movement-row {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "prod qty open" "date type open" "before after open";
        column-gap: var(--space-3); row-gap: 2px; padding: 10px var(--space-4); border-bottom: 1px solid var(--divider); background: var(--surface);
    }
    .movement-table--compact tbody tr.movement-row > td { display: block; padding: 0 !important; border: 0; background: transparent !important; }
    .movement-table--compact tbody tr.movement-row > td.mv-warehouse { display: none; }
    .movement-table--compact td.mv-product { grid-area: prod; }
    .movement-table--compact td.mv-qty { grid-area: qty; align-self: start; font-size: 15px; }
    .movement-table--compact td.mv-date-cell { grid-area: date; }
    .movement-table--compact td.mv-type-cell { grid-area: type; justify-self: end; }
    .movement-table--compact td.mv-stock { font-size: 12px; }
    .movement-table--compact td.mv-stock.is-before { grid-area: before; text-align: left; }
    .movement-table--compact td.mv-stock.is-after { grid-area: after; text-align: right; }
    .movement-table--compact td.mv-stock.is-before::before { content: "Estoque antes "; color: var(--muted); font-weight: 400; }
    .movement-table--compact td.mv-stock.is-after::before { content: "depois "; color: var(--muted); font-weight: 400; }
    .movement-table--compact td.mv-open { grid-area: open; align-self: center; }
    .mvd-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mvd-hero strong { font-size: 16px; }
    .mvd-list { grid-template-columns: 1fr; }
    .mvd-list dt { padding-bottom: 0; border-bottom: 0; font-size: 12px; }
    .mvd-list dd { padding-top: 2px; }
    .movement-detail__footer { flex-wrap: wrap; }
}