/* ============================================================
   BASE DO SISTEMA
   ============================================================ */

body {
  background: #f3f4f7;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-wrap {
  max-width: 1200px;
  margin: 24px auto 40px;
  padding: 0 16px;
}

.vf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.vf-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vf-app-title {
  font-size: 1.6rem;
  font-weight: 650;
  color: #111827;
}

.vf-app-sub {
  font-size: 0.85rem;
  color: #6b7280;
}

.vf-header-right .btn-import-nfe {
  background: #4b5cff;
  color: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  font-size: 0.9rem;
}

.vf-header-right .btn-import-nfe:hover {
  background: #3f50f0;
  color: #fff;
}

/* ============================================================
   ABAS (TABS)
   ============================================================ */

.vf-tabs {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid #e0e4ea;
  margin-bottom: 16px;
}

.vf-tab {
  padding: 6px 4px 10px;
  font-size: 0.85rem;
  color: #6b7280;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: default;
}

.vf-tab-active {
  color: #111827;
  border-color: #4b5cff;
  font-weight: 600;
}

.vf-tab-disabled {
  color: #c0c4cf;
}

/* ============================================================
   FILTROS
   ============================================================ */

.vf-filters {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.vf-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vf-filter-label {
  font-size: 0.8rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.vf-chip {
  border-radius: 999px;
  border: 1px solid #d0d7e2;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: #4b5563;
  background: #fff;
}

.vf-chip:hover {
  background: #f3f4ff;
}

.vf-chip-primary {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
  font-weight: 500;
}

/* Filtro de status em duas linhas */
.vf-filter-group-status .vf-filter-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

/* ============================================================
   CARDS
   ============================================================ */

.vf-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px) {
  .vf-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .vf-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vf-cards-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.vf-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 10px 12px 16px; /* mais espaço embaixo pro botão ficar dentro do card */
  box-shadow: 0 4px 10px rgba(15,23,42,0.06);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative; /* necessário para posicionar a bolinha de prioridade */
}

.vf-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vf-card-title {
  font-size: 0.85rem;
  color: #111827;
}

.vf-card-subtitle {
  font-size: 0.72rem;
  color: #6b7280;
}

.vf-card-body {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vf-card-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 0.78rem;
}

.vf-card-label {
  color: #6b7280;
}

.vf-card-value {
  color: #111827;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vf-card-badge {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.vf-badge-tipo {
  background: #f3f4ff;
  color: #3730a3;
}

/* Status chips dos cards */
.vf-badge-status-orcamento {
  background: #ecfdf3;
  color: #166534;
}

.vf-badge-status-analise {
  background: #fffbeb;
  color: #92400e;
}

.vf-badge-status-preparacao {
  background: #e0f2fe;
  color: #075985;
}

.vf-badge-status-faturamento {
  background: #eef2ff;
  color: #3730a3;
}

.vf-badge-status-expedicao {
  background: #fef3c7;
  color: #92400e;
}

.vf-badge-status-controladoria {
  background: #fce7f3;
  color: #9d174d;
}

.vf-badge-status-finalizado {
  background: #ecfdf3;
  color: #166534;
}

/* Rodapé dos cards (Valor total + Cidade/CNPJ + botão Detalhes) */

.vf-card-footer {
  margin-top: 6px;
  display: flex;
  align-items: flex-start;      /* botão alinhado ao topo do bloco esquerdo */
  justify-content: space-between;
  gap: 8px;
}

.vf-card-footer-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vf-card-footer-right {
  display: flex;
  align-items: flex-start;      /* garante topo */
  align-self: flex-start;       /* cola o grupo do botão lá em cima */
  gap: 8px;
}

.vf-card-valor {
  font-size: 0.8rem;
}

.vf-card-valor strong {
  font-size: 0.9rem;
}

.vf-card-meta {
  font-size: 0.60rem;  /* menor, parecido com label Status */
  color: #6b7280;
  white-space: nowrap;
}

/* Botão detalhes pequeno */
.vf-btn-itens {
  font-size: 0.72rem;
  border-radius: 999px;
  padding-inline: 10px;
  margin-top: -2px; /* sobe levemente o botão pra ficar mais alinhado */
}

/* Datas L/E/S */
.vf-card-dates {
  font-size: 0.60rem;
  color: #6b7280;
  white-space: nowrap;
  margin-top: 2px;  /* separa da linha da cidade */
}

/* ============================================================
   OUTROS ELEMENTOS
   ============================================================ */

.vf-empty-state {
  padding: 24px;
  text-align: center;
  font-size: 0.9rem;
  color: #6b7280;
}

.vf-footer {
  margin-top: 24px;
  font-size: 0.75rem;
  color: #9ca3af;
  text-align: center;
}

.vf-import-wrapper {
  margin-top: 16px;
}

.vf-modal-loading {
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 8px;
}

/* ============================================================
   CAMPOS / INPUTS
   ============================================================ */

.vf-search-input {
  min-width: 260px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  font-size: 0.8rem;
}

.vf-select-tipo {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  font-size: 0.8rem;
}

/* ============================================================
   GRIDS DO MODAL (PREPARAÇÃO)
   ============================================================ */

.modal-grid-5 {
  display: grid;
  grid-template-columns: minmax(160px, 1.3fr) repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.modal-grid-2 {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(140px, 1fr);
  gap: 10px;
}

@media (max-width: 992px) {
  .modal-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .modal-grid-5,
  .modal-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MODAL DE PREPARAÇÃO — BACKDROP + LAYOUT
   ============================================================ */

.prep-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;              /* fica "flex" via JS */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.prep-modal-window {
  background: #ffffff;
  color: #1f2937;
  width: 95%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 12px 28px rgba(0,0,0,0.30);
}

.prep-modal-window-sm {
  max-width: 800px;
}

/* Cabeçalho */
.prep-modal-window .modal-header {
  padding: 12px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* Corpo */
.prep-modal-window .modal-body {
  padding: 16px 20px;
  overflow-y: auto;
}

/* Rodapé */
.prep-modal-window .modal-footer {
  padding: 12px 18px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Garante texto escuro dentro da modal */
.prep-modal-window,
.prep-modal-window * {
  color: #1f2937 !important;
}

/* Tabela dos itens */
.table-itens td,
.table-itens th {
  vertical-align: middle !important;
  font-size: 0.78rem;
}

.prep-row-removed {
  opacity: 0.55;
  text-decoration: line-through;
}

.modal-status {
  font-size: 0.78rem;
  opacity: 0.85;
}

/* Status de erro na barra do modal */
.prep-status-error {
  color: #b91c1c;
}

/* Chassi desabilitado (não-PA) */
.prep-numseri-disabled {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* ============================================================
   AJUSTES PARA PRIORIDADE E DATAS L/E/S (PÓS-VENDAS)
   ============================================================ */

.vf-card-header-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* badge textual antigo (pode ou não ser usado em outras abas) */
.vf-card-prioridade {
  flex-shrink: 0;
}

.vf-prio-badge {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.vf-prio-normal {
  background: #ecfdf3;
  color: #166534;
}

.vf-prio-alta {
  background: #fffbeb;
  color: #b45309;
}

.vf-prio-urgente {
  background: #fef2f2;
  color: #b91c1c;
}

/* -------- BOLINHA DE PRIORIDADE (N/A/U) ---------- */

.vf-prio-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  right: 10px;
  box-shadow: 0 0 0 2px #ffffff; /* “bordinha” branca */
}

.vf-prio-dot-normal {
  background-color: #16a34a;   /* verde */
}

.vf-prio-dot-alta {
  background-color: #f97316;   /* laranja */
}

.vf-prio-dot-urgente {
  background-color: #ef4444;   /* vermelho */
}

/* ============================================================
   DASHBOARD - CARDS KPI (topo)
   ============================================================ */

.vf-dashboard-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 1100px) {
  .vf-dashboard-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vf-dashboard-row {
    grid-template-columns: 1fr;
  }
}

.vf-kpi-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
}

.vf-kpi-title {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 4px;
}

.vf-kpi-value {
  font-size: 1.3rem;
  font-weight: 650;
  color: #111827;
  line-height: 1.2;
}

.vf-kpi-sub {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 2px;
}

/* variações de cor (apenas um toque leve na borda/fundo) */
.vf-kpi-card-primary {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.vf-kpi-card-danger {
  border-color: #fecaca;
  background: #fef2f2;
}

.vf-kpi-card-success {
  border-color: #bbf7d0;
  background: #ecfdf3;
}

.vf-kpi-card-info {
  border-color: #bae6fd;
  background: #eff6ff;
}

/* ============================================================
   KPIs DO TOPO (DASHBOARD)
   ============================================================ */

.vf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* Responsivo: 2 colunas em telas médias, 1 em telas pequenas */
@media (max-width: 1100px) {
  .vf-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vf-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.vf-kpi-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 4px 10px rgba(15,23,42,0.04);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 90px;
}

/* Título do KPI */
.vf-kpi-label {
  font-size: 0.82rem;
  color: #6b7280;
}

/* Valor principal */
.vf-kpi-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #111827;
}

/* Subtítulo / descrição */
.vf-kpi-sub {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Cores suaves por KPI (opcional) */
.kpi-pedidos {
  background: #eef2ff;
}

.kpi-sla-venc {
  background: #fef2f2;
}

.kpi-sla-ok {
  background: #ecfdf3;
}

.kpi-finalizados {
  background: #f3f4f6;
}

/* ✅ NOVO: status Cancelado nos cards */
.vf-badge-status-cancelado {
  background: #fee2e2;
  color: #991b1b;
}

/* ✅ NOVO: Status do Orçamento (CJ_XSTATUS) - exibido somente em "Em orçamento" */
.vf-card-xstatus {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;

  /* AJUSTE: reduz tamanho herdado que estava deixando "Status orçamento:" grande */
  font-size: 0.72rem;
}

/* AJUSTE: label "Status orçamento:" menor e padronizado */
.vf-card-xstatus .vf-card-label {
  font-size: 0.65rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.vf-badge-xstatus-0 {
  background: #f3f4f6;
  color: #374151;
}

.vf-badge-xstatus-1 { /* Em análise */
  background: #dbeafe;
  color: #1e40af;
}

.vf-badge-xstatus-2 { /* Documentação/Formulário incompleto */
  background: #ffedd5;
  color: #9a3412;
}

.vf-badge-xstatus-3 { /* Recusado */
  background: #fee2e2;
  color: #991b1b;
}

.vf-badge-xstatus-4 { /* Aguardando autorização do cliente */
  background: #e9d5ff;
  color: #6b21a8;
}

.vf-badge-xstatus-5 { /* Aguardando cotação de frete */
  background: #dcfce7;
  color: #166534;
}

/* ============================================================
   FIX: Forçar 5 KPIs em 1 linha no desktop (>= 992px)
   ============================================================ */

/* Mobile-first (padrão): 1 coluna */
.vf-kpi-grid{
  grid-template-columns: 1fr;
}

/* >= 640px: 2 colunas */
@media (min-width: 640px){
  .vf-kpi-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* >= 880px: 3 colunas */
@media (min-width: 880px){
  .vf-kpi-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* >= 992px (desktop): TRAVA 5 colunas */
@media (min-width: 992px){
  .vf-kpi-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}