/**
 * css/design-system.css
 * Novo design system visual (baseado no redesign do Figma) — variáveis
 * --vs-* e componentes .vs-*. Aditivo: não substitui o sistema .sys-*
 * já usado pelas telas existentes (Cotações, Pedidos, Transportes,
 * Roteiros, Cadastros, Documentos Fiscais etc.) — essas telas continuam
 * intocadas até serem migradas, uma de cada vez.
 *
 * Escopo atual (etapa 1+2): variáveis + componentes base, sidebar,
 * topbar e Dashboard. As demais telas migram depois, uma por vez.
 */

:root {
  --vs-navy: #1B3A6B;
  --vs-navy-h: #234a86;
  --vs-orange: #FF6B1A;
  --vs-orange-d: #d9500a;
  --vs-bg: #F4F7FB;
  --vs-surface: #FFFFFF;
  --vs-border: #E0E7F0;
  --vs-text: #121826;
  --vs-muted: #637083;
  --vs-success: #16a34a;
  --vs-danger: #dc2626;
  --vs-warning: #d97706;
  --vs-info: #2563eb;

  --vs-radius-sm: 8px;
  --vs-radius-md: 12px;
  --vs-radius-lg: 16px;
  --vs-shadow-card: 0 1px 2px rgba(18, 24, 38, .04), 0 8px 24px rgba(18, 24, 38, .06);
}

/* ── Shell ─────────────────────────────────────────────────────────────── */

.vs-app-shell {
  background: var(--vs-bg);
}

.vs-page {
  /* Telas migradas pro novo design system ficam com identidade clara fixa,
     independente do toggle claro/escuro do resto do app — reatribui os
     tokens de tema que os componentes .sys-* legados (ainda usados aqui
     durante a migração gradual) leem, pra não ficar texto claro sobre
     fundo branco quando o tema ativo for escuro. */
  --tx: var(--vs-text);
  --txM: var(--vs-text);
  --txS: var(--vs-muted);
  --txF: var(--vs-muted);
  --txG: var(--vs-muted);
  --txT: var(--vs-muted);
  --bg: var(--vs-bg);
  --bgH: var(--vs-surface);
  --bgC: var(--vs-surface);
  --bgI: var(--vs-bg);
  --bd: var(--vs-border);
  --bdM: var(--vs-border);
  --bdS: var(--vs-border);
  --ac: var(--vs-orange);
  --acD: var(--vs-orange-d);

  margin: -24px;
  padding: 24px 28px;
  min-height: calc(100vh - var(--topbar-h));
  background: var(--vs-bg);
  color: var(--vs-text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.vs-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

/* G0 (Rodada 7) — a maioria das telas monta a fileira de botões de ação do
   cabeçalho com `style="display:flex;gap:8px;"` inline (não uma classe
   própria), então não dá pra alcançar cada uma via seletor de classe; isso
   força QUALQUER flex row filha direta do cabeçalho a quebrar linha em
   telas estreitas, em vez de estourar a largura da página (achado do teste
   de usabilidade móvel do G0 — botões de ação saindo da viewport em telas
   como Transportes). */
.vs-page-head > div[style*="display:flex"] {
  flex-wrap: wrap;
}

.vs-page-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vs-muted);
}

.vs-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--vs-text);
  margin-top: 2px;
}

.vs-page-subtitle {
  font-size: 13px;
  color: var(--vs-muted);
  margin-top: 4px;
}

/* ── Topbar ────────────────────────────────────────────────────────────── */

.vs-topbar {
  background: var(--vs-surface);
  border-bottom: 1px solid var(--vs-border);
}

.vs-topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--vs-radius-md);
  border: 1px solid var(--vs-border);
  background: var(--vs-bg);
  color: var(--vs-muted);
  min-width: 240px;
}

.vs-topbar-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--vs-text);
  width: 100%;
}

.vs-topbar-search input::placeholder {
  color: var(--vs-muted);
}

.vs-topbar-search-icon {
  font-size: 13px;
  opacity: .7;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.vs-card {
  background: var(--vs-surface);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
  box-shadow: var(--vs-shadow-card);
  padding: 18px 20px;
}

.vs-metric-card {
  background: var(--vs-surface);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
  box-shadow: var(--vs-shadow-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vs-metric-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vs-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.vs-metric-card-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--vs-navy);
  line-height: 1.1;
}

.vs-metric-card-hint {
  font-size: 12px;
  color: var(--vs-muted);
}

.vs-metric-card.accent .vs-metric-card-value { color: var(--vs-orange); }
.vs-metric-card.danger .vs-metric-card-value { color: var(--vs-danger); }
.vs-metric-card.success .vs-metric-card-value { color: var(--vs-success); }

/* B9 — banner de alerta dentro de um vs-card (ex.: coletas atrasadas na Programação do dia). */
.vs-card-alert {
  border-color: color-mix(in srgb, var(--vs-danger) 40%, transparent);
  background: color-mix(in srgb, var(--vs-danger) 6%, var(--vs-surface));
}
.vs-card-alert > strong { color: var(--vs-danger); display: block; margin-bottom: 4px; }

/* B13 — atalhos de ação rápida no topo do Dashboard. */
.vs-dashboard-shortcuts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* B13 — grade de links da central de Configurações (cada card só navega
   pra tela já existente, nenhum formulário duplicado aqui). */
.vs-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.vs-settings-card {
  text-align: left;
  background: var(--vs-surface);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vs-settings-card:hover { border-color: color-mix(in srgb, var(--vs-accent, var(--vs-orange)) 40%, var(--vs-border)); }
.vs-settings-card strong { font-size: 13.5px; }
.vs-settings-card span { font-size: 12px; color: var(--vs-muted); }

/* B10 — faixa compacta de KPIs da Control Tower (substitui a grade solta de
   cards grandes); cada item é clicável e rola até a seção correspondente. */
.ct-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.ct-kpi-item {
  flex: 1 1 160px;
  background: var(--vs-surface);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}
.ct-kpi-item-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vs-muted); }
.ct-kpi-item-value { font-size: 22px; font-weight: 800; color: var(--vs-navy); line-height: 1.1; }
.ct-kpi-item.danger .ct-kpi-item-value { color: var(--vs-danger); }
.ct-kpi-item.accent .ct-kpi-item-value { color: var(--vs-orange); }

/* B10 — grupos de alerta por prioridade dentro da seção Alertas. */
.ct-alert-group { border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); margin-top: 10px; overflow: hidden; }
.ct-alert-group-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; background: var(--vs-surface); }
.ct-alert-group-head.danger { background: color-mix(in srgb, var(--vs-danger) 8%, var(--vs-surface)); }
.ct-alert-group-head.warning { background: color-mix(in srgb, var(--vs-orange) 8%, var(--vs-surface)); }
.ct-alert-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--vs-border); }
.ct-alert-item-text strong { display: block; }
.ct-alert-item-text span { font-size: 12px; color: var(--vs-muted); }

.vs-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

/* ── Tabela ────────────────────────────────────────────────────────────── */

.vs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.vs-table th {
  text-align: right;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--vs-navy);
  background: color-mix(in srgb, var(--vs-navy) 7%, var(--vs-bg));
  border-bottom: 2px solid var(--vs-navy);
  font-family: inherit !important;
  white-space: nowrap;
}

.vs-table th:first-child {
  text-align: left !important;
}

.vs-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--vs-border);
  color: var(--vs-text) !important;
}

.vs-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--vs-bg) 60%, transparent);
}

.vs-table tbody tr:last-child td {
  border-bottom: none;
}

/* Rodada 5, S7 — ui_densidade compacta: linha mais baixa em toda tabela
   do sistema (classe global em document.body, ver App.js#setDensity). */
body.vs-density-compacta .vs-table th,
body.vs-density-compacta .vs-table td {
  padding: 4px 10px;
}

/* ── Filtros ───────────────────────────────────────────────────────────── */

.vs-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.vs-filters input,
.vs-filters select {
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--vs-border);
  background: var(--vs-surface);
  color: var(--vs-text);
  font-size: 12.5px;
  width: auto;
}

.vs-filters select {
  min-width: 0;
  max-width: 180px;
}

.vs-filters input[type="text"],
.vs-filters input[type="search"] {
  width: 150px;
}

.vs-filters input::placeholder {
  color: var(--vs-muted);
}

.vs-filters input:focus,
.vs-filters select:focus {
  outline: none;
  border-color: var(--vs-navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-navy) 14%, transparent);
}

/* ── Filtro de período (popover estilo Tiny) ──────────────────────────── */

.vs-date-filter {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.vs-date-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--vs-radius-sm);
  border: 1px solid var(--vs-border);
  background: var(--vs-surface);
  color: var(--vs-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.vs-date-filter-trigger:hover {
  border-color: var(--vs-navy);
}

.vs-date-filter-trigger.active {
  border-color: var(--vs-orange);
  color: var(--vs-orange);
  background: color-mix(in srgb, var(--vs-orange) 10%, var(--vs-surface));
}

.vs-date-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 260px;
  background: var(--vs-surface);
  border: 1px solid var(--vs-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  padding: 12px;
}

.vs-date-filter-presets {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.vs-date-filter-option {
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--vs-text);
}

.vs-date-filter-option:hover {
  background: var(--vs-bg);
}

.vs-date-filter-option.active {
  background: color-mix(in srgb, var(--vs-navy) 10%, var(--vs-bg));
  border-color: var(--vs-navy);
  font-weight: 600;
  color: var(--vs-navy);
}

.vs-date-filter-body {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--vs-border);
  font-size: 13px;
}

.vs-date-filter-body input[type="date"] {
  flex: 1;
  height: 34px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--vs-border);
  background: var(--vs-surface);
  color: var(--vs-text);
  font-size: 13px;
  min-width: 0;
}

.vs-date-filter-month {
  justify-content: space-between;
  font-weight: 600;
}

.vs-date-filter-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--vs-border);
}

/* B7 — seletor de campo de data (só aparece quando a tela declara 2+ campos). */
.vs-date-filter-field-select {
  margin-bottom: 10px;
}

.vs-date-filter-field-select select {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--vs-border);
  background: var(--vs-surface);
  color: var(--vs-text);
  font-size: 13px;
  font-weight: 600;
}

/* ── Popover de filtros declarativo (kit de listas, B7) ──────────────────── */

.vs-filters-popover {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.vs-filters-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 320px;
  max-width: 90vw;
  background: var(--vs-surface);
  border: 1px solid var(--vs-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  padding: 12px;
}

.vs-filters-panel .sys-form-grid {
  margin-bottom: 4px;
}

/* ── Chips de filtros ativos (kit de listas, B7) ─────────────────────────── */

.vs-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -6px 0 12px;
}

.vs-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vs-navy) 8%, var(--vs-bg));
  border: 1px solid var(--vs-border);
  font-size: 12px;
  color: var(--vs-text);
}

.vs-filter-chip button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--vs-text-muted, var(--vs-text));
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}

.vs-filter-chip button:hover {
  color: var(--vs-orange);
}

/* ── Rodapé de agregados (kit de listas, B7) ─────────────────────────────── */

.vs-aggregates-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 10px 14px;
  margin-top: 10px;
  border-top: 1px solid var(--vs-border);
  font-size: 13px;
  color: var(--vs-text);
}

.vs-aggregates-count {
  font-weight: 700;
}

.vs-aggregates-item strong {
  font-weight: 600;
}

/* ── Botões ────────────────────────────────────────────────────────────── */

.vs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--vs-radius-md);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease;
}

.vs-button-primary {
  background: var(--vs-orange);
  color: #fff;
}

.vs-button-primary:hover {
  filter: brightness(1.06);
}

.vs-button-secondary {
  background: var(--vs-surface);
  color: var(--vs-navy);
  border-color: var(--vs-border);
}

.vs-button-secondary:hover {
  border-color: var(--vs-navy);
}

.vs-button-ghost {
  background: transparent;
  color: var(--vs-muted);
  border-color: transparent;
}

.vs-button-ghost:hover {
  background: var(--vs-bg);
  color: var(--vs-text);
}

.vs-button-danger {
  background: var(--vs-danger);
  color: #fff;
}

.vs-button-danger:hover {
  filter: brightness(1.06);
}

/* utils/dialogs.js — confirmDialog/promptDialog (substitui window.confirm/prompt) */
.vs-dialog-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(18, 24, 38, 0);
  z-index: 300;
  padding: 16px;
  transition: background .15s ease;
}

.vs-dialog-overlay.vs-dialog-active {
  display: flex;
  background: rgba(18, 24, 38, .5);
}

.vs-dialog-panel {
  width: min(92vw, 420px);
  background: var(--vs-surface);
  border-radius: var(--vs-radius-lg);
  box-shadow: var(--vs-shadow-card);
  padding: 20px;
  animation: vsDialogIn .15s ease;
}

@keyframes vsDialogIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.vs-dialog-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--vs-text);
  margin-bottom: 8px;
}

.vs-dialog-message {
  font-size: 13px;
  color: var(--vs-muted);
  line-height: 1.5;
  margin-bottom: 14px;
  white-space: pre-line;
}

.vs-dialog-field {
  margin-bottom: 16px;
}

.vs-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* utils/dialogs.js — toast() (substitui window.alert) */
.vs-toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(92vw, 380px);
}

.vs-toast {
  background: var(--vs-navy);
  color: #fff;
  border-radius: var(--vs-radius-md);
  padding: 12px 16px;
  font-size: 13px;
  box-shadow: var(--vs-shadow-card);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease;
}

.vs-toast.vs-toast-show {
  opacity: 1;
  transform: none;
}

.vs-toast-success { background: var(--vs-success); }
.vs-toast-error { background: var(--vs-danger); }
.vs-toast-warning { background: var(--vs-warning); }

/* ── Badges ────────────────────────────────────────────────────────────── */

.vs-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}

.vs-badge-success { color: var(--vs-success); background: color-mix(in srgb, var(--vs-success) 12%, transparent); border-color: color-mix(in srgb, var(--vs-success) 30%, transparent); }
.vs-badge-warning { color: var(--vs-warning); background: color-mix(in srgb, var(--vs-warning) 12%, transparent); border-color: color-mix(in srgb, var(--vs-warning) 30%, transparent); }
.vs-badge-danger  { color: var(--vs-danger);  background: color-mix(in srgb, var(--vs-danger) 12%, transparent);  border-color: color-mix(in srgb, var(--vs-danger) 30%, transparent); }
.vs-badge-info    { color: var(--vs-info);    background: color-mix(in srgb, var(--vs-info) 12%, transparent);    border-color: color-mix(in srgb, var(--vs-info) 30%, transparent); }

/* Rodada 5, S5 — marcadores/tags: cor vem por linha (inline style, cada
   marcador tem a sua), aqui só o formato do chip. */
.vs-tag-chips { display: inline-flex; gap: 4px; margin-left: 8px; flex-wrap: wrap; vertical-align: middle; }
.vs-tag-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }

/* ── Formulários ───────────────────────────────────────────────────────── */

.vs-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
}

.vs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vs-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--vs-muted);
}

.vs-field input,
.vs-field select,
.vs-field textarea {
  height: 38px;
  padding: 0 12px;
  border-radius: var(--vs-radius-sm);
  border: 1px solid var(--vs-border);
  background: var(--vs-surface);
  color: var(--vs-text);
  font-size: 13px;
}

.vs-field textarea {
  height: auto;
  padding: 10px 12px;
}

.vs-field input:focus,
.vs-field select:focus,
.vs-field textarea:focus {
  outline: none;
  border-color: var(--vs-navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-navy) 14%, transparent);
}

/* ── Impressão / upload ───────────────────────────────────────────────── */

.vs-print-preview {
  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
  padding: 24px;
  display: flex;
  justify-content: center;
}

.vs-upload-area {
  border: 2px dashed var(--vs-border);
  border-radius: var(--vs-radius-lg);
  background: var(--vs-surface);
  padding: 32px;
  text-align: center;
  color: var(--vs-muted);
}

.vs-upload-area.dragover {
  border-color: var(--vs-orange);
  color: var(--vs-orange);
  background: color-mix(in srgb, var(--vs-orange) 6%, var(--vs-surface));
}

/* ── Detalhe (B14 — kit utils/detailView.js) ─────────────────────────────
   Usado tanto na tela cheia (.vs-detail-page) quanto dentro do painel
   lateral (.vs-detail-peek, ver openDetailPeek) — mesma marcação nos dois
   modos, só muda a moldura em volta. */

.vs-detail-head {
  align-items: flex-start;
}

.vs-detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.vs-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.vs-detail-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  color: var(--vs-muted);
}

.vs-detail-chip-info    { color: var(--vs-info);    border-color: color-mix(in srgb, var(--vs-info) 30%, transparent);    background: color-mix(in srgb, var(--vs-info) 8%, transparent); }
.vs-detail-chip-success { color: var(--vs-success); border-color: color-mix(in srgb, var(--vs-success) 30%, transparent); background: color-mix(in srgb, var(--vs-success) 8%, transparent); }
.vs-detail-chip-warning { color: var(--vs-warning); border-color: color-mix(in srgb, var(--vs-warning) 30%, transparent); background: color-mix(in srgb, var(--vs-warning) 8%, transparent); }
.vs-detail-chip-danger  { color: var(--vs-danger);  border-color: color-mix(in srgb, var(--vs-danger) 30%, transparent);  background: color-mix(in srgb, var(--vs-danger) 8%, transparent); }

/* .sys-action-menu-btn tem largura/altura fixas de 28px (ícone "..." de
   linha) — o botão do cabeçalho tem texto, então precisa de mais
   especificidade (0,2,0) pra vencer sem depender da ordem dos arquivos. */
.sys-action-menu-btn.vs-detail-actions-btn {
  width: auto;
  height: auto;
}

.sys-action-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--vs-border);
}

.vs-detail-identification {
  margin-bottom: 14px;
}

.vs-detail-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 24px;
}

.vs-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vs-detail-field-label {
  font-size: 12px;
  color: var(--vs-muted);
}

.vs-detail-field-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--vs-text);
  /* e-mails/URLs longos sem espaço (ex.: financeiro@dominio.com.br) não
     quebram por palavra — sem isso eles vazam pra coluna vizinha do grid. */
  overflow-wrap: anywhere;
}

button.vs-detail-field-value {
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--vs-orange);
}

button.vs-detail-field-value:hover {
  text-decoration: underline;
}

.vs-detail-callouts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.vs-detail-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--vs-radius-md);
  font-size: 13px;
  background: color-mix(in srgb, var(--vs-info) 8%, var(--vs-surface));
  border: 1px solid color-mix(in srgb, var(--vs-info) 25%, transparent);
  color: var(--vs-text);
}

.vs-detail-callout-warning { background: color-mix(in srgb, var(--vs-warning) 8%, var(--vs-surface)); border-color: color-mix(in srgb, var(--vs-warning) 25%, transparent); }
.vs-detail-callout-danger  { background: color-mix(in srgb, var(--vs-danger) 8%, var(--vs-surface));  border-color: color-mix(in srgb, var(--vs-danger) 25%, transparent); }

.vs-detail-callout-icon {
  flex-shrink: 0;
}

.vs-detail-tabs-card {
  padding: 0;
  overflow: hidden;
}

.vs-detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--vs-border);
  padding: 0 16px;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.vs-detail-tab {
  flex-shrink: 0;
  padding: 14px 10px;
  border: none;
  background: transparent;
  color: var(--vs-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.vs-detail-tab.active {
  color: var(--vs-orange);
  border-bottom-color: var(--vs-orange);
}

.vs-detail-tab-content {
  padding: 16px;
}

.vs-detail-history {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs-detail-history-item {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  position: relative;
}

.vs-detail-history-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background: var(--vs-border);
}

.vs-detail-history-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--vs-border);
  flex: 0 0 auto;
  margin-top: 4px;
}

.vs-detail-history-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.vs-detail-history-body span {
  font-size: 12px;
  color: var(--vs-muted);
}

.vs-detail-peek .sys-modal-body {
  padding: 20px;
}

@media (max-width: 640px) {
  .vs-detail-fields-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PASSE DE POLIMENTO UI/UX (skill ui-ux-pro-max, 2026-07)
   Bloco único e aditivo — override no fim do arquivo pra ser trivial de
   reverter. Segue a ordem de prioridade da skill: acessibilidade (1) →
   toque/interação (2) → tabelas → formulários → feedback. Cobre tanto os
   componentes novos (.vs-*) quanto os legados (.sys-*) que as telas ainda
   usam. Respeita prefers-reduced-motion (ver topo do system.css).
   ═══════════════════════════════════════════════════════════════════════ */

/* — P1 Acessibilidade: anel de foco visível e consistente em TODO elemento
     interativo. :focus-visible (não :focus) = teclado mostra, mouse não —
     regra nº 1 da skill ("nunca remover o outline sem substituto"). */
.vs-page a:focus-visible,
.vs-page button:focus-visible,
.vs-page input:focus-visible,
.vs-page select:focus-visible,
.vs-page textarea:focus-visible,
.vs-button:focus-visible,
.sys-field input:focus-visible,
.sys-field select:focus-visible,
.sys-field textarea:focus-visible,
.sys-action-menu-btn:focus-visible,
.admin-row-clickable:focus-visible,
.sys-row-clickable:focus-visible {
  outline: 2px solid var(--vs-orange);
  outline-offset: 2px;
  border-radius: 6px;
}

/* — P2 Toque/interação: alvos mínimos e feedback de estado. Botões e
     campos com altura mínima confortável (>= 40px no toque), transição
     suave (150–200ms, não instantânea), e estado :disabled inequívoco. */
.vs-button {
  min-height: 40px;
  transition: filter .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .06s ease;
}
.vs-button:active:not(:disabled) { transform: translateY(1px); }
.vs-button:disabled,
.vs-button[disabled] { opacity: .5; cursor: not-allowed; }
.vs-button-primary:hover:not(:disabled) { box-shadow: 0 4px 12px color-mix(in srgb, var(--vs-orange) 32%, transparent); }

.sys-field input,
.sys-field select,
.sys-field textarea,
.sys-form textarea {
  min-height: 40px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
/* Foco de campo: além da borda laranja, um halo suave — dá o "acendeu"
   que a borda sozinha não entrega (skill: forms/feedback). */
.sys-field input:focus,
.sys-field select:focus,
.sys-field textarea:focus,
.sys-form textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-orange) 16%, transparent);
}
.sys-field textarea,
.sys-form textarea { min-height: 74px; }

/* — Tabelas: linha inteira com hover legível, cursor claro quando
     clicável, números tabulares (alinham as casas). Sem cabeçalho sticky:
     o wrapper vira container de scroll horizontal e o sticky não pega de
     forma confiável neste layout — em vez disso, o cabeçalho ganha um
     realce forte pra ler como cabeçalho mesmo sem grudar. */
.sys-table-wrap { overflow-x: auto; border-radius: var(--vs-radius-md); }
.vs-table thead th { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--vs-navy) 55%, transparent); }
.vs-table tbody tr { transition: background .12s ease; }
.vs-table tbody tr:hover td {
  background: color-mix(in srgb, var(--vs-orange) 6%, var(--vs-surface));
}
.vs-table td, .vs-table th { font-variant-numeric: tabular-nums; }
.admin-row-clickable, .sys-row-clickable { cursor: pointer; }

/* — Cards: elevação consistente via token e leve realce ao passar quando
     o card é um atalho clicável. */
.vs-card { box-shadow: var(--vs-shadow-card); }

/* — Badges: um tiquinho mais de peso visual pra status crítico saltar
     (contraste — a skill pede status legível de relance). */
.vs-badge { letter-spacing: .01em; }
.vs-badge-danger { font-weight: 800; }

/* — Feedback: estados vazio/loading e faixas de status mais claros. */
.sys-empty {
  gap: 6px;
  background: color-mix(in srgb, var(--vs-bg) 50%, transparent);
}
.sys-status {
  border-radius: var(--vs-radius-sm);
  padding: 10px 12px;
  border: 1px solid transparent;
}
.sys-status.ok   { background: color-mix(in srgb, var(--vs-success) 10%, transparent); border-color: color-mix(in srgb, var(--vs-success) 28%, transparent); }
.sys-status.warn { background: color-mix(in srgb, var(--vs-warning) 10%, transparent); border-color: color-mix(in srgb, var(--vs-warning) 28%, transparent); }
.sys-status.error,
.sys-status.err  { background: color-mix(in srgb, var(--vs-danger) 10%, transparent); border-color: color-mix(in srgb, var(--vs-danger) 28%, transparent); }

/* — Scrollbar discreta (polish; navegadores WebKit/Blink). */
.sys-table-wrap::-webkit-scrollbar,
.vs-page ::-webkit-scrollbar { height: 10px; width: 10px; }
.sys-table-wrap::-webkit-scrollbar-thumb,
.vs-page ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--vs-navy) 20%, transparent);
  border-radius: 999px;
}
.sys-table-wrap::-webkit-scrollbar-thumb:hover,
.vs-page ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--vs-navy) 34%, transparent);
}

/* — Wizard do roteiro (Spec 13): passo atual pulsa de leve pra guiar o
     olho, sem distrair (respeita reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  .sys-wizard-current .sys-wizard-dot { animation: vsWizardPulse 2s ease-in-out infinite; }
}
@keyframes vsWizardPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vs-orange) 45%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--vs-orange) 0%, transparent); }
}

/* — Mobile: garante que nenhuma tabela larga estoure o viewport (regra de
     tabela da skill — scroll no proprio container, nunca a pagina). */
@media (max-width: 640px) {
  .vs-page { padding: 16px 14px; margin: -16px -14px; }
  .vs-table { font-size: 12px; }
  .vs-button { min-height: 42px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PASSE DE POLIMENTO UI/UX — RODADA 2 (skill ui-ux-pro-max, 2026-07)
   Mais ganhos confiáveis pedidos pelo usuário. Mesmo espírito aditivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* — Skeleton com SHIMMER (percepção de carregamento): troca o pulso de
     opacidade por um brilho que atravessa, que lê como "carregando" muito
     melhor. Regra da skill: performance percebida > tela em branco. */
@media (prefers-reduced-motion: no-preference) {
  .skeleton-line {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--bdM) 55%, transparent) 25%,
      color-mix(in srgb, var(--bdM) 22%, transparent) 37%,
      color-mix(in srgb, var(--bdM) 55%, transparent) 63%);
    background-size: 400% 100%;
    animation: vsShimmer 1.4s ease-in-out infinite;
  }
}
@keyframes vsShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* — Cards de métrica (Dashboard, Roteiros, Frota, Acerto de viagem…):
     realce sutil ao passar pra dar vida ao painel sem virar distração. */
.vs-metric-card { transition: box-shadow .18s ease, transform .12s ease; }
.vs-metric-card:hover {
  box-shadow: 0 6px 20px rgba(18, 24, 38, .10);
  transform: translateY(-1px);
}

/* — Barra de ações em lote (seleção de linhas): mais presença, pra ficar
     claro que há uma seleção ativa aguardando ação. */
.sys-bulk-bar {
  box-shadow: var(--vs-shadow-card);
  border: 1px solid color-mix(in srgb, var(--vs-orange) 30%, var(--vs-border));
  border-radius: var(--vs-radius-md);
}

/* — Modais: profundidade e cantos consistentes com o resto do sistema. */
.sys-modal-overlay { backdrop-filter: blur(2px); }
.sys-modal-panel,
.sys-modal-panel-wide {
  border-radius: var(--vs-radius-lg);
  box-shadow: 0 24px 70px rgba(18, 24, 38, .22);
}

/* — Cabeçalho da lista (título + ações): respiro consistente entre o
     título da seção e a linha da tabela logo abaixo. */
.sys-list-head { align-items: center; }

/* — Menu de contexto "⋯" das linhas: item destacado ao focar/passar, com
     alvo confortável (a skill pede >= boa área de toque em menus). */
.sys-action-menu button,
.sys-action-menu a {
  min-height: 34px;
  transition: background .12s ease;
}

/* — Paginação e chips de filtro: legibilidade e área de clique. */
.vs-chip, .sys-chip { transition: background .12s ease, border-color .12s ease; }

/* — Impressão: some com cromo do app (sidebar/topbar) e imprime só o
     conteúdo — útil pra tirar um detalhe de roteiro/documento no papel. */
@media print {
  .vs-side, .vs-sidebar, .vs-topbar, .sys-action-menu, .vs-bulk-bar,
  .sys-bulk-bar, [data-action="reload"], .vs-page-head > div:last-child {
    display: none !important;
  }
  .vs-page { margin: 0; padding: 0; }
  .vs-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PASSE DE POLIMENTO UI/UX — RODADA 3: filtros, ordenação, abas, paginação
   (skill ui-ux-pro-max, 2026-07). Áreas que o usuário menos gostava —
   componentes compartilhados, então vale pra TODAS as listas de uma vez.
   ═══════════════════════════════════════════════════════════════════════ */

/* — Toolbar: mais leve e arejada (era um caixote pesado). Fundo suave em
     vez de card, layout que respira. */
.sys-list-toolbar {
  grid-template-columns: minmax(240px, 1fr) minmax(190px, .34fr);
  gap: 12px;
  padding: 0;
  border: none;
  background: transparent;
  margin-bottom: 12px;
}

/* — Busca com ícone embutido (a lupa deixa claro que é campo de busca —
     regra de "affordance de input" da skill). */
.sys-search-field span:first-child,
.sys-sort-field span:first-child {
  font-size: 10px;
  letter-spacing: .07em;
  color: var(--vs-muted);
}
.sys-search-wrap { position: relative; display: flex; align-items: center; }
.sys-search-icon {
  position: absolute;
  left: 11px;
  font-size: 14px;
  color: var(--vs-muted);
  pointer-events: none;
}
.sys-search-field input {
  height: 40px;
  padding-left: 32px;
  border-radius: var(--vs-radius-md);
  border-color: var(--vs-border);
  background: var(--vs-surface);
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* — Ordenação: select + botão de direção colados num controle só, limpo. */
.sys-sort-wrap { display: flex; gap: 0; }
.sys-sort-field select {
  height: 40px;
  border-radius: var(--vs-radius-md) 0 0 var(--vs-radius-md);
  border-right: none;
  background: var(--vs-surface);
  border-color: var(--vs-border);
}
.sys-order-btn {
  height: 40px;
  width: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 0 var(--vs-radius-md) var(--vs-radius-md) 0;
  background: var(--vs-surface);
  border-color: var(--vs-border);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.sys-order-btn:hover { background: color-mix(in srgb, var(--vs-orange) 10%, var(--vs-surface)); }

/* — Abas de status: barra segmentada moderna. Ativo = pílula laranja
     cheia; contadores mais discretos. */
.cost-subtabs {
  gap: 4px;
  padding: 4px;
  background: color-mix(in srgb, var(--vs-navy) 5%, var(--vs-bg));
  border-color: var(--vs-border);
  border-radius: var(--vs-radius-md);
}
.cost-subtab {
  padding: 7px 14px;
  border-radius: var(--vs-radius-sm);
  transition: background .14s ease, color .14s ease;
}
.cost-subtab:hover:not(.active) { background: var(--vs-surface); color: var(--vs-text); }
.cost-subtab.active {
  background: var(--vs-orange);
  border-color: var(--vs-orange);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--vs-orange) 30%, transparent);
}
.sys-tab-count {
  background: color-mix(in srgb, var(--vs-navy) 10%, transparent);
  color: var(--vs-muted);
}
.cost-subtab.active .sys-tab-count {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* — Botão "Filtros" (popover): quando há filtros ativos, vira pílula
     laranja com o contador — fica óbvio que a lista está filtrada. */
.vs-filters-popover .vs-button.active {
  background: color-mix(in srgb, var(--vs-orange) 12%, transparent);
  border-color: color-mix(in srgb, var(--vs-orange) 45%, transparent);
  color: var(--vs-orange-d);
  font-weight: 800;
}
.vs-filters-panel {
  box-shadow: 0 16px 44px rgba(18, 24, 38, .16);
  border-radius: var(--vs-radius-lg);
}

/* — Chips de filtro ativo: laranja suave, remoção óbvia. */
.vs-filter-chip {
  background: color-mix(in srgb, var(--vs-orange) 9%, var(--vs-surface));
  border-color: color-mix(in srgb, var(--vs-orange) 28%, var(--vs-border));
  color: var(--vs-text);
  font-weight: 600;
}
.vs-filter-chip button:hover { color: var(--vs-danger); }

/* — Paginação: botões-pílula, página atual laranja cheia. */
.sys-pagination button {
  min-width: 34px;
  height: 34px;
  border-radius: var(--vs-radius-sm);
  border: 1px solid var(--vs-border);
  background: var(--vs-surface);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.sys-pagination button:hover:not(:disabled):not(.active) {
  border-color: color-mix(in srgb, var(--vs-orange) 45%, var(--vs-border));
  color: var(--vs-orange-d);
}
.sys-pagination button.active {
  background: var(--vs-orange);
  border-color: var(--vs-orange);
  color: #fff;
  font-weight: 800;
}

@media (max-width: 640px) {
  .sys-list-toolbar { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PASSE DE POLIMENTO UI/UX — RODADA 4: detalhe de registro (detailView)
   (skill ui-ux-pro-max, 2026-07). Outra área que o usuário menos gostava.
   ═══════════════════════════════════════════════════════════════════════ */

/* — Ficha de identificação: campos com hierarquia clara (label micro-caps
     discreto, valor forte) e separação sutil entre eles, lendo como uma
     lista de definição em vez de texto empilhado chapado. */
.vs-detail-fields-grid { gap: 0; }
.vs-detail-field {
  gap: 3px;
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--vs-border) 60%, transparent);
}
.vs-detail-field-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--vs-muted);
}
.vs-detail-field-value { font-size: 14.5px; }

/* — Abas do detalhe: hover dá dica antes do clique; ativo com leve
     realce de fundo além do sublinhado (skill: estado ativo claro). */
.vs-detail-tab { transition: color .14s ease, border-color .14s ease, background .14s ease; border-radius: var(--vs-radius-sm) var(--vs-radius-sm) 0 0; padding: 13px 14px; }
.vs-detail-tab:hover:not(.active) { color: var(--vs-text); background: color-mix(in srgb, var(--vs-navy) 4%, transparent); }
.vs-detail-tab.active { background: color-mix(in srgb, var(--vs-orange) 7%, transparent); }
.vs-detail-tab .sys-tab-count {
  margin-left: 5px;
  background: color-mix(in srgb, var(--vs-navy) 10%, transparent);
  color: var(--vs-muted);
}
.vs-detail-tab.active .sys-tab-count { background: color-mix(in srgb, var(--vs-orange) 18%, transparent); color: var(--vs-orange-d); }

/* — Cabeçalho do detalhe: título com mais presença, chips de status
     alinhados. */
.vs-detail-title-row { align-items: center; gap: 12px; }
.vs-detail-identification { padding-top: 4px; }

/* — Callouts: ícone e texto respirando melhor, borda esquerda de acento
     pra "puxar o olho" pro aviso. */
.vs-detail-callout { border-left-width: 3px; padding: 11px 14px; }
.vs-detail-callout-icon { font-size: 15px; margin-top: 1px; }

/* — Peek lateral (visualização rápida): entra com deslize suave. */
@media (prefers-reduced-motion: no-preference) {
  .vs-detail-peek { animation: vsPanelSlideIn .22s ease; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PASSE DE POLIMENTO UI/UX — RODADA 5: telas da calculadora + proposta
   (skill ui-ux-pro-max, 2026-07). Essas telas usam o estilo antigo
   (.sec-body/.result-box/.num-input/.city-btn/.stat-card/.dre-card/
   .tab-btn) — modernizadas aqui pra alinhar com a linguagem --vs-*.
   Vale pra EnvioUnico (cotação rápida), SimularDia, AnaliseProposta,
   Custos e Propostas de uma vez.
   ═══════════════════════════════════════════════════════════════════════ */

/* — Seções: card mais suave e arejado, título com marcador de acento. */
.sec-body {
  border-radius: var(--vs-radius-md);
  border-color: var(--vs-border);
  box-shadow: var(--vs-shadow-card);
  padding: 18px 18px 6px;
}
.sec-title {
  color: var(--vs-navy);
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sec-title::before {
  content: '';
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--vs-orange);
}
.sec-line { background: var(--vs-border); }

/* — Caixa de resultado (o preço da cotação): vira herói limpo, com fundo
     em tom laranja suave e número em Inter tabular (o monospace pesado
     saiu). É o elemento que o usuário mais olha na cotação rápida. */
.result-box {
  border-radius: var(--vs-radius-lg);
  border-color: color-mix(in srgb, var(--vs-orange) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--vs-orange) 7%, var(--vs-surface)), var(--vs-surface));
  box-shadow: var(--vs-shadow-card);
  padding: 22px 24px;
}
.result-label { color: var(--vs-muted); letter-spacing: .08em; }
.result-price {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 46px;
  letter-spacing: -.02em;
  color: var(--vs-orange-d);
}
.result-placeholder { border-radius: var(--vs-radius-lg); border-color: var(--vs-border); }
.placeholder-icon { color: color-mix(in srgb, var(--vs-navy) 30%, transparent); }

/* — Inputs numéricos: cantos e foco consistentes com o resto do app,
     números tabulares alinhados. */
.num-input {
  border-radius: var(--vs-radius-sm);
  border-color: var(--vs-border);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  min-height: 40px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.num-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-orange) 16%, transparent); }

/* — Botões de cidade/zona: chip moderno com alvo confortável. */
.city-btn {
  border-radius: var(--vs-radius-sm);
  border-color: var(--vs-border);
  min-height: 40px;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.city-btn:hover:not(.active) { border-color: color-mix(in srgb, var(--vs-orange) 40%, var(--vs-border)); }

/* — Stat cards e DRE: elevação e cantos coerentes; números tabulares. */
.stat-card, .dre-card {
  border-radius: var(--vs-radius-md);
  border-color: var(--vs-border);
  box-shadow: var(--vs-shadow-card);
}
.stat-val, .dre-val {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* — Abas da calculadora (.tab-btn): mesma pílula ativa laranja das demais. */
.tab-btn { border-radius: var(--vs-radius-sm); transition: background .14s ease, color .14s ease; min-height: 34px; }
.tab-btn.active { box-shadow: 0 2px 8px color-mix(in srgb, var(--vs-orange) 28%, transparent); }

/* — Hint de CEP resolvido: legível como status. */
.cep-resolved-hint { border-radius: var(--vs-radius-sm); }

/* ═══════════════════════════════════════════════════════════════════════
   PASSE DE POLIMENTO UI/UX — RODADA 6: correções de layout dos filtros e
   organização (skill ui-ux-pro-max, 2026-07). Popovers estourando a tela,
   linha de filtros bagunçada, grades de formulário desalinhadas.
   ═══════════════════════════════════════════════════════════════════════ */

/* — BUG: popovers de filtro/data abriam pra DIREITA (left:0) a partir de um
     botão que fica no lado direito da lista → 320px estouravam a viewport e
     cortavam. Agora ancoram pela DIREITA (abrem pra esquerda, pra dentro da
     tela). max-height + scroll interno pra nunca passar da tela na vertical
     também. */
.vs-filters-panel,
.vs-date-filter-panel {
  left: auto;
  right: 0;
  max-height: min(70vh, 520px);
  overflow-y: auto;
}

/* — Linha de filtros (.sys-list-head quando hospeda os filtros): itens
     agrupados à esquerda, alinhados pela base, quebrando com respiro em vez
     de espalhados/desencontrados. */
.sys-list-head {
  align-items: center;
  flex-wrap: wrap;
}
.sys-list-head > * { margin: 0; }

/* Botões de filtro/data e "limpar" na mesma altura e alinhados. */
.vs-filters-popover,
.vs-date-filter-trigger {
  margin-bottom: 0 !important;
}
.vs-date-filter-trigger,
.vs-filters-popover > .vs-button {
  height: 40px;
}

/* — Grades de formulário (.sys-form-grid): colunas que se adaptam à
     largura (auto-fit) em vez de 2 fixas — some com campo espremido ou
     sobra de espaço nas telas largas; alinha os campos pela base. */
.sys-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
  align-items: end;
}

/* — Cotação rápida: as seções (.sec-body) e a coluna lateral do resultado
     com respiro consistente; grades internas que se adaptam (grid2/4/5
     eram fixas e apertavam em telas médias). */
.grid2, .grid4, .grid5, .grid2x2 {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.envio-unico-layout { gap: 20px; }
.sec-body { margin-bottom: 18px; }
.num-wrap { margin-bottom: 14px; }
/* Coluna do resultado gruda ao rolar (é o que o operador acompanha
   enquanto preenche) — só no desktop, onde há espaço lateral. */
@media (min-width: 981px) {
  .envio-unico-side { position: sticky; top: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX — popover de filtros cortado (2026-07). A raiz era dupla: (1) o
   painel podia abrir pra direita e passar da tela; (2) o formulario dentro
   dele tentava 2 colunas num painel de 320px e a 2ª coluna era cortada.
   ═══════════════════════════════════════════════════════════════════════ */
.vs-filters-panel {
  width: 340px;
  max-width: calc(100vw - 32px);   /* nunca mais largo que a tela */
  left: auto;
  right: 0;                          /* abre pra dentro (botao fica à direita) */
}
/* Coluna ÚNICA dentro do popover — mais especifico que a grade global,
   entao vence. Campos empilham, nada de 2ª coluna estourando. */
.vs-filters-panel .sys-form-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Dashboard — visão geral do período (estilo Olist: cards comparados com
   o período anterior de mesma duração + gráfico de receita diária).
   ═══════════════════════════════════════════════════════════════════════ */
.vs-period-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.vs-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  font-size: 12px;
}
.vs-delta-up { color: var(--vs-success); }
.vs-delta-down { color: var(--vs-danger); }
.vs-delta-neutral { color: var(--vs-muted); font-weight: 600; }

.vs-revenue-chart-wrap { width: 100%; }
.vs-revenue-chart { display: block; }
.vs-chart-axis-label {
  font-size: 11px;
  fill: var(--vs-muted);
}

.vs-chart-hover-area { position: relative; width: 100%; }

.vs-chart-point-dot {
  fill: var(--vs-navy);
  opacity: .55;
  transition: opacity .12s ease;
}
[data-chart-point] { cursor: pointer; }
[data-chart-point]:hover .vs-chart-point-dot { opacity: 1; }

/* Tooltip do gráfico — div HTML posicionada via JS sobre o ponto (ver
   Dashboard.js#attachEvents), estilo "balão" com a mesma cor de marca. */
.vs-chart-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--vs-navy);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  box-shadow: var(--vs-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.vs-chart-tooltip[hidden] { display: none; }
.vs-chart-tooltip span { color: rgba(255, 255, 255, .7); font-size: 10px; }
.vs-chart-tooltip strong { font-size: 13px; }
.vs-chart-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--vs-navy);
}

.vs-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vs-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--vs-border);
  font-size: 13px;
}
.vs-breakdown-row:last-child { border-bottom: none; }
.vs-breakdown-row span {
  color: var(--vs-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-breakdown-row strong { color: var(--vs-navy); white-space: nowrap; }