/* ─────────────────────────────────────────────────────────────────────────────
   FormVendaPage — Layout de venda estilo "caixa"
   Depende exclusivamente de tokens de css/tokens.css
   ───────────────────────────────────────────────────────────────────────────── */

/* ══ SHELL ══════════════════════════════════════════════════════════════════ */
.fvp-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--color-bg);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* ══ SUBHEADER — linha única com cliente / vendedor / tabela preço / status ═══ */
.fvp-subheader {
    display: flex;
    align-items: stretch;
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
    flex-shrink: 0;
    overflow-x: auto;
    min-height: 46px;
}

.fvp-sh-campo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 14px;
    border-right: 1px solid var(--color-border);
    flex-shrink: 0;
    min-width: 120px;
}
.fvp-sh-campo:last-child { border-right: none; }

/* Destaque visual para campos que o usuário costuma passar batido (Vendedor,
   Condição de Pagamento na 2ª janela) */
.fvp-sh-campo-destaque {
    background: #fff7e6;
    border-left: 3px solid var(--color-warning, #d97706);
}
.fvp-sh-campo-destaque .fvp-sh-label { color: var(--color-warning, #b45309); }

.fvp-sh-campo-sm      { min-width: 130px; }
.fvp-sh-campo-md      { min-width: 170px; }
.fvp-sh-campo-cliente { min-width: 260px; flex: 1; max-width: 460px; }
.fvp-sh-campo-status  { min-width: 160px; margin-left: auto; text-align: right; align-items: flex-end; }

.fvp-sh-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary);
    letter-spacing: .06em;
    margin-bottom: 2px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fvp-sh-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 16px;
    padding: 0 4px;
    border: 1px solid var(--color-primary-border, rgba(215,25,32,.3));
    border-radius: 4px;
    background: var(--color-primary-subtle);
    color: var(--color-primary-text, var(--color-primary));
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.fvp-sh-select,
.fvp-sh-input {
    background: none;
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-family);
    width: 100%;
    padding: 0;
}
.fvp-sh-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    padding-right: 16px !important;
}
.fvp-sh-select:focus, .fvp-sh-input:focus { color: var(--color-primary); }

.fvp-sh-pessoa-select { width: 100%; }
.fvp-sh-pessoa-select input.form-input {
    height: 24px !important;
    padding: 0 4px !important;
    border: none !important;
    background: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.fvp-sh-pessoa-select .btn-icon { width: 22px !important; height: 22px !important; }

.fvp-sh-cliente-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fvp-sh-detalhe {
    font-size: 10.5px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    margin-top: 1px;
}

.fvp-sh-cliente-contatos {
    display: flex;
    gap: 10px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--color-text-secondary);
}

.fvp-sh-status-valor {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-success);
}

/* ══ BARRA DE BUSCA DE PRODUTO ════════════════════════════════════════════════ */
.fvp-busca-bar {
    display: grid;
    grid-template-columns: 64px minmax(180px, 1fr) 90px 140px auto;
    gap: 8px;
    align-items: stretch;
    padding: 8px 10px 0;
    flex-shrink: 0;
}

.fvp-btn-leitor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 18px;
    transition: background .15s;
}
.fvp-btn-leitor:hover { background: var(--color-primary-hover); }
.fvp-btn-leitor .fvp-sh-shortcut { background: rgba(255,255,255,.2); color: #fff; border-color: transparent; }

.fvp-busca-produto {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fvp-busca-produto input.dis-input-principal {
    height: 60px !important;
    font-size: 14px !important;
    padding: 10px 16px 20px !important;
}

.fvp-busca-hints {
    position: absolute;
    left: 16px;
    bottom: 14px;
    font-size: 10px;
    color: var(--color-text-secondary);
    pointer-events: none;
    line-height: 1;
}

.fvp-busca-campo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.fvp-busca-input {
    height: 52px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
    font-size: 15px;
    font-weight: 700;
    text-align: right;
    color: var(--color-text);
    outline: none;
    box-sizing: border-box;
    font-family: var(--font-family);
}
.fvp-busca-input:focus { border-color: var(--color-primary); }

.fvp-busca-input-lg { font-size: 18px; }

.fvp-busca-input-money {
    position: relative;
    display: block;
}
.fvp-busca-input-money .fvp-busca-money-prefixo {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    pointer-events: none;
}
.fvp-busca-input-money .fvp-busca-input { width: 100%; padding-left: 30px; }

.fvp-btn-add-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.3;
    text-align: center;
    padding: 4px 10px;
    transition: background .15s, box-shadow .15s;
    box-shadow: 0 2px 6px rgba(215,25,32,.3);
}
.fvp-btn-add-item i { font-size: 16px; }
.fvp-btn-add-item:hover { background: var(--color-primary-hover); box-shadow: 0 3px 10px rgba(215,25,32,.4); }
.fvp-btn-add-item:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ══ CORPO ══════════════════════════════════════════════════════════════════ */
.fvp-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* o scroll fica no grid de itens/painel, não no corpo inteiro —
                          cards de resumo, barra de ações e rodapé ficam sempre visíveis */
    position: relative; /* ancora o overlay de fechamento */
}

.fvp-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 10px;
    padding: 10px;
    flex: 1;
    min-height: 0;
    max-height: 46vh; /* deixa sempre visíveis, sem rolar, os cards de resumo,
                          a barra de ações e o rodapé abaixo do grid de itens */
}

/* ── Cartões genéricos ────────────────────────────────────────────────────── */
.fvp-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fvp-card-titulo {
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.fvp-text-muted { color: var(--color-text-secondary); font-size: 11px; }

/* ── Tabelas ──────────────────────────────────────────────────────────────── */
.fvp-table-wrap {
    overflow: auto;
    flex: 1;
}

/* Lista de Natureza de Operação (OCIs) — só ~2 linhas visíveis, resto rola
   dentro do card, para não empurrar o rodapé de botões pra baixo. */
.fvp-oci-lista {
    flex: none;
    max-height: 96px;
}

.fvp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

.fvp-table th {
    height: 32px;
    padding: 6px 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.fvp-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
}

.fvp-row { cursor: pointer; transition: background .1s; }
.fvp-row:hover td { background: var(--color-primary-subtle); }
.fvp-row.active td { background: var(--color-primary-subtle); }
.fvp-row-vazio { opacity: .35; }

.fvp-cell-num    { text-align: center; color: var(--color-text-secondary); font-size: 11px; }
.fvp-cell-center { text-align: center; }
.fvp-cell-mono   { font-family: monospace; font-size: 11.5px; }

.fvp-produto-nome { font-size: 11.5px; font-weight: 500; }
.fvp-produto-ean  { margin-top: 2px; font-size: 10px; color: var(--color-text-secondary); }

.fvp-cell-input {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    font-size: 12px;
    text-align: right;
    color: var(--color-text);
    outline: none;
    font-family: var(--font-family);
}
.fvp-cell-input:hover, .fvp-cell-input:focus { border-color: var(--color-border); background: var(--color-surface-raised); }

.fvp-btn-remove {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-danger);
    font-size: 11px;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity .15s, background .15s;
}
.fvp-row:hover .fvp-btn-remove { opacity: 1; }
.fvp-btn-remove:hover { background: rgba(220,38,38,.1); }

/* ── Painel lateral: Resumo do item selecionado ──────────────────────────── */
.fvp-side-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
    overflow-y: auto;
}

.fvp-side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.fvp-side-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
}

.fvp-btn-ghost-sm {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 12px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: background .15s;
}
.fvp-btn-ghost-sm:hover { background: var(--color-surface-raised); }

.fvp-side-field {
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
}
.fvp-side-field:last-child { border-bottom: none; }

.fvp-side-field-label {
    margin-bottom: 4px;
    font-size: 10px;
    color: var(--color-text-secondary);
}

.fvp-side-field-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
}

.fvp-btn-outline {
    padding: 7px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .15s;
}
.fvp-btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

.fvp-obs-popover {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
}

.fvp-atalhos-item { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }

.fvp-panel-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 4px;
}

.fvp-panel-input {
    width: 100%;
    padding: 6px 8px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--color-text);
    outline: none;
    font-family: var(--font-family);
    box-sizing: border-box;
}
.fvp-panel-input:focus { border-color: var(--color-primary); }

.fvp-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-secondary);
    transition: all .15s;
}
.fvp-toolbar-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.fvp-busca-qtd { font-size: 18px; }

/* ══ CARDS DE RESUMO (rodapé) ═══════════════════════════════════════════════ */
.fvp-summary-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(110px, 1fr)) minmax(180px, 1.2fr);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.fvp-summary-item {
    padding: 8px 14px;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fvp-summary-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.fvp-summary-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.fvp-summary-danger { color: var(--color-danger); }

.fvp-summary-total {
    background: var(--color-primary);
    color: #fff;
}
.fvp-summary-total .fvp-summary-label { color: rgba(255,255,255,.85); }
.fvp-summary-total .fvp-summary-value { color: #fff; font-size: 20px; }

/* Cards do Resumo Financeiro (2ª janela) — cor de fundo por categoria */
.fvp-fin-card-bruto     { background: var(--color-surface-sunken); }
.fvp-fin-card-desconto  { background: #fdecec; }
.fvp-fin-card-acrescimo { background: #eaf7ee; }
.fvp-fin-card-frete     { background: #eaf1fb; }
.fvp-fin-card-seguro    { background: #eaf1fb; }

/* ══ BARRA DE AÇÕES / ATALHOS ═══════════════════════════════════════════════ */
.fvp-action-toolbar {
    display: flex;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    overflow-x: auto;
    flex-shrink: 0;
}

.fvp-action-item {
    min-width: 92px;
    padding: 7px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-right: 1px solid var(--color-border);
    background: none;
    border-top: none;
    border-bottom: none;
    border-left: none;
    cursor: pointer;
    color: var(--color-text);
    transition: background .15s;
}
.fvp-action-item:hover { background: var(--color-surface-raised); }

.fvp-action-label { font-size: 10px; font-weight: 600; text-align: center; }
.fvp-action-shortcut { font-size: 9px; color: var(--color-primary); }

.fvp-action-item-primary {
    background: var(--color-success);
    color: #fff;
}
.fvp-action-item-primary:hover { background: #15803d; }
.fvp-action-item-primary .fvp-action-shortcut { color: #fff; }

/* ══ RODAPÉ DE TECLADO ══════════════════════════════════════════════════════ */
.fvp-keyboard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    font-size: 9.5px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.fvp-keyboard-footer strong { color: var(--color-text); }

/* ══ OVERLAY — FECHAMENTO DA VENDA ═══════════════════════════════════════════
   position:absolute (não fixed) confinado a .fvp-body — cobre painel esquerdo
   + grid + painel direito, mas o .fvp-header/.fvp-subheader ficam FORA de
   .fvp-body, então continuam visíveis por trás/acima do overlay. */
.fvp-fechamento-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
}

.fvp-fechamento-scroll {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fvp-fch-blocos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.fvp-fch-bloco {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px 10px;
}

.fvp-fch-bloco-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.fvp-fch-linha-compacta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.fvp-fch-linha-compacta:last-child { margin-bottom: 0; }
.fvp-fch-linha-compacta .fvp-panel-input { flex: 1 1 auto; height: 28px; padding: 0 8px; font-size: 12px; }

.fvp-fch-rotulo {
    flex: 0 0 56px;
    font-size: 10.5px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.fvp-fch-input-perc {
    flex: 0 0 56px !important;
    text-align: right;
}

/* Prefixo "R$" para campos monetários — wrapper compacto, mesma altura 28px
   dos demais campos do bloco de fechamento. */
.fvp-fch-input-money {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
.fvp-fch-input-money .fvp-fch-money-prefixo {
    position: absolute;
    left: 8px;
    font-size: 10.5px;
    color: var(--color-text-secondary);
    pointer-events: none;
}
.fvp-fch-input-money .fvp-panel-input { padding-left: 26px !important; }

/* Grid interno: coluna esquerda com 2 linhas empilhadas, coluna direita
   ("Total"/"Outras Despesas") ocupando a altura das duas linhas. */
.fvp-fch-grid-total {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0 10px;
    align-items: stretch;
}

.fvp-fch-grid-total-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.fvp-fch-grid-total-destaque {
    padding-left: 10px;
    border-left: 1px solid var(--color-border);
}
.fvp-fch-grid-total-destaque .fvp-panel-input { height: 28px; padding: 0 8px; font-size: 12px; }

/* Campo de valor de Produtos/Serviços — mais estreito, para sobrar espaço
   para a coluna "Total" ao lado. */
.fvp-fch-input-sm {
    flex: 1 1 70px !important;
    min-width: 0 !important;
}

.fvp-fch-bloco-simbolo {
    font-size: 11px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.fvp-fch-corpo {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.fvp-financial-summary {
    width: 260px;
    flex-shrink: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
}

.fvp-fin-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--color-border);
}
.fvp-fin-row:last-of-type { border-bottom: none; }

.fvp-fin-total {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 2px solid var(--color-border);
    font-size: 16px;
    font-weight: 800;
    color: var(--color-primary);
}

.fvp-fch-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 2px solid var(--color-border);
    background: var(--color-surface);
    flex-shrink: 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,.05);
}

.fvp-footer-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    border: 2px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text);
}
.fvp-footer-btn:hover:not(:disabled) { background: var(--color-border); transform: translateY(-1px); }
.fvp-footer-btn:disabled { opacity: .5; cursor: not-allowed; }

.fvp-footer-btn-primary {
    border-color: var(--color-success);
    background: var(--color-success);
    color: #fff;
    font-size: 15px;
    padding: 12px 26px;
    box-shadow: 0 2px 8px rgba(22,163,74,.35);
}
.fvp-footer-btn-primary:hover:not(:disabled) { background: #15803d; border-color: #15803d; }

/* ══ RESPONSIVIDADE ═══════════════════════════════════════════════════════ */
@media (max-width: 1366px) {
    .fvp-busca-bar { grid-template-columns: 52px minmax(260px, 1fr) 96px 96px 170px; }
    .fvp-action-item { min-width: 78px; }
    .fvp-fch-blocos { grid-template-columns: repeat(3, 1fr); }
}