/* ═══════════════════════════════════════════════════════════════
   vanderleia.css — Design System Global
   Inclua após style.css no header.php
   Prefixo: vl-*
═══════════════════════════════════════════════════════════════ */

/* ── Inter (self-hosted) ────────────────────────────────────── */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('../assets/fonts/inter/inter-300.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/inter/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/inter/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/inter/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/inter/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('../assets/fonts/inter/inter-800.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap; src:url('../assets/fonts/inter/inter-900.woff2') format('woff2'); }

/* ── Variáveis ─────────────────────────────────────────────── */
:root {
  --vl-primary:      #5B27AF;
  --vl-secondary:    #8FD9D1;
  --vl-violet:       #B872FD;
  --vl-dark:         #0E0D40;
  --vl-muted:        #9ca3af;
  --vl-bg:           #f5f6fa;
  --vl-surface:      #fafafa;
  --vl-border:       #e5e7eb;
  --vl-divider:      #f3f4f6;
  --vl-hover-bg:     #faf8ff;
  --vl-text:         #111827;
  --vl-text-body:    #6b7280;
  --vl-text-label:   #374151;
}

/* ── Layout ────────────────────────────────────────────────── */
.vl-page-bg { background: var(--vl-bg) !important; }

/* ── Tipografia ────────────────────────────────────────────── */
.vl-page-title    { color: var(--vl-dark) !important; font-size: 1.6rem; }
.vl-page-subtitle { color: var(--vl-muted); }
.vl-title-icon    { color: var(--vl-primary) !important; }
.vl-section-label {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--vl-dark);
  display: flex; align-items: center; gap: 8px;
}

/* ── Convenção de botões ───────────────────────────────────────
   .vl-btn-primary   → CTA principal da tela (1 por tela: Nova X, Salvar, Pesquisar)
   .vl-btn-secondary → ação secundária (Fechar, Cancelar em modais)
   .vl-btn-clear     → botão "Limpar filtros" (pill, discreto)
   .vl-btn-action    → ícone de ação em linha de tabela; fundo preenchido
                       (não outline) com a cor do modificador:
                         (sem classe) → roxo   (ação genérica, ex: editar)
                         .info        → azul   (ação de visualização, ex: ver detalhes)
                         .share       → teal   (ação de compartilhar)
                         .success     → verde  (ação positiva, ex: fechar/aprovar)
                         .whatsapp    → verde-whatsapp (dispara mensagem WhatsApp)
                         .danger      → vermelho (ação destrutiva, ex: cancelar/excluir)
                         .active      → cor roxa fixa (marca estado atual/selecionado)
   ─────────────────────────────────────────────────────────────*/

/* ── Botão primário ────────────────────────────────────────── */
.vl-btn-primary {
  background: var(--vl-primary) !important;
  color: #fff !important;
  border-radius: 12px !important;
  border: none !important;
  font-size: 14px;
  font-weight: 600;
  padding: 0 20px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.vl-btn-primary:hover { background: #7c3aed !important; color: #fff !important; }
.vl-btn-primary:disabled,
.vl-btn-primary[disabled] { background: #9ca3af !important; cursor: not-allowed; }

/* ── Botão secundário ──────────────────────────────────────── */
.vl-btn-secondary {
  background: #fff;
  color: var(--vl-text-label);
  border-radius: 12px !important;
  border: 1.5px solid var(--vl-border) !important;
  font-size: 14px;
  font-weight: 600;
  padding: 0 20px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.vl-btn-secondary:hover { border-color: var(--vl-primary) !important; color: var(--vl-primary); }

/* ── Botão limpar ──────────────────────────────────────────── */
.vl-btn-clear {
  background: #fff !important;
  color: var(--vl-muted) !important;
  border: 1.5px solid var(--vl-border) !important;
  border-radius: 20px !important;
  font-size: 13px;
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all .15s;
}
.vl-btn-clear:hover { border-color: var(--vl-primary) !important; color: var(--vl-primary) !important; }

/* ── Botão de ação de linha ────────────────────────────────── */
.vl-btn-action,
.btn-row-action {
  background: var(--vl-primary) !important;
  border: none !important;
  color: #fff !important;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px !important;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}
.vl-btn-action:hover,
.btn-row-action:hover          { background: #7c3aed !important; }
.vl-btn-action.danger,
.btn-row-action.danger         { background: #dc2626 !important; }
.vl-btn-action.danger:hover,
.btn-row-action.danger:hover   { background: #b91c1c !important; }
.vl-btn-action.success,
.btn-row-action.success        { background: #15803d !important; }
.vl-btn-action.success:hover,
.btn-row-action.success:hover  { background: #166534 !important; }
.vl-btn-action.whatsapp,
.btn-row-action.whatsapp       { background: #25D366 !important; }
.vl-btn-action.whatsapp:hover,
.btn-row-action.whatsapp:hover { background: #1da851 !important; }
.vl-btn-action.info,
.btn-row-action.info           { background: #2563eb !important; }
.vl-btn-action.info:hover,
.btn-row-action.info:hover     { background: #1d4ed8 !important; }
.vl-btn-action.share,
.btn-row-action.share          { background: #0d9488 !important; }
.vl-btn-action.share:hover,
.btn-row-action.share:hover    { background: #0f766e !important; }
.vl-btn-action.active,
.btn-row-action.frete-ativo    { background: var(--vl-primary) !important; }
.vl-btn-action.active:hover,
.btn-row-action.frete-ativo:hover { background: #7c3aed !important; }

/* ── Ícone KPI / Stat ──────────────────────────────────────── */
.vl-stat-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
}
.vl-stat-icon.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }

.vl-stat-icon--green  { background: #dcfce7; color: #15803d !important; }
.vl-stat-icon--yellow { background: #fef9c3; color: #92400e !important; }
.vl-stat-icon--red    { background: #fee2e2; color: #b91c1c !important; }
.vl-stat-icon--blue   { background: #e0e7ff; color: #3730a3 !important; }
.vl-stat-icon--purple { background: #f3e8ff; color: #7c3aed !important; }
.vl-stat-icon--brand  { background: #ede9fe; color: #5B27AF !important; }
.vl-stat-icon--orange { background: #ffedd5; color: #c2410c !important; }
.vl-stat-icon--gray   { background: #f3f4f6; color: #6b7280 !important; }

.vl-stat-icon i { font-size: inherit; }
.vl-stat-value  { color: var(--vl-dark) !important; }

/* ── Filtros ───────────────────────────────────────────────── */
.vl-filter-control {
  border-radius: 10px !important;
  border: 1.5px solid var(--vl-border) !important;
  background-color: var(--vl-surface) !important;
  font-size: 14px !important;
  height: 42px;
  color: var(--vl-text-label) !important;
  box-shadow: none !important;
  color-scheme: light; /* evita popup de <select> em tema escuro (fundo/texto ilegíveis) */
}
.vl-filter-control:focus {
  border-color: var(--vl-primary) !important;
  box-shadow: 0 0 0 3px rgba(91,39,175,.12) !important;
  background-color: #fff !important;
}
.vl-filter-date { font-size: 13px !important; }

.vl-filter-item,
.nd-filter-item,
.disp-filter-item {
  font-size: 14px !important;
  color: var(--vl-text-label) !important;
  padding: 8px 14px !important;
  transition: all .12s;
}
.vl-filter-item:hover,
.nd-filter-item:hover,
.disp-filter-item:hover  { background: var(--vl-hover-bg) !important; color: var(--vl-primary) !important; }
.vl-filter-item.active,
.nd-filter-item.active,
.disp-filter-item.active { color: var(--vl-primary) !important; font-weight: 600; background: #f5f0ff !important; }

/* ── Tab groups ────────────────────────────────────────────── */
.vl-tab-group { display: inline-flex; }
.vl-tab-btn {
  border: 1.5px solid var(--vl-border) !important;
  background: #fff !important;
  color: var(--vl-text-label) !important;
  font-size: 14px;
  padding: 9px 22px;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-radius: 0 !important;
}
.vl-tab-btn:first-child { border-radius: 10px 0 0 10px !important; }
.vl-tab-btn:last-child  { border-radius: 0 10px 10px 0 !important; margin-left: -1.5px; }
.vl-tab-btn:only-child  { border-radius: 10px !important; }
.vl-tab-btn:not(.active):hover {
  background: var(--vl-hover-bg) !important;
  color: var(--vl-primary) !important;
  border-color: #c4b5fd !important;
  position: relative; z-index: 1;
}
.vl-tab-btn.active {
  background: var(--vl-primary) !important;
  color: #fff !important;
  border-color: var(--vl-primary) !important;
  position: relative; z-index: 1;
  box-shadow: 0 2px 6px rgba(91,39,175,.18);
}

/* ── Tabela ────────────────────────────────────────────────── */
.vl-table thead tr {
  background: var(--vl-surface);
  border-bottom: 2px solid var(--vl-divider);
}
.vl-table thead th {
  color: var(--vl-muted);
  font-weight: 500;
  font-size: 13px;
}
/* Coluna ordenável por clique (ex: view/cliente/index.php) — ícone troca de
   estado via JS (bi-arrow-down-up parado / bi-sort-up-alt / bi-sort-down
   ativo), ver th[data-sort] + atualizarIconesOrdenacao() em cliente.js. */
.vl-table thead th.vl-th-sort {
  cursor: pointer;
  user-select: none;
}
.vl-table thead th.vl-th-sort:hover { color: var(--vl-text-label); }
.vl-table thead th.vl-th-sort .vl-th-sort-icon { margin-left: 4px; opacity: .45; }
.vl-table thead th.vl-th-sort.vl-th-sort--ativo .vl-th-sort-icon { opacity: 1; }
.vl-table tbody tr {
  border-bottom: 1px solid var(--vl-divider);
  transition: background .12s;
}
.vl-table tbody tr:hover  { background: var(--vl-hover-bg) !important; transform: none !important; box-shadow: none !important; }
.vl-table tbody tr:last-child { border-bottom: none; }
.vl-table tbody td {
  font-size: 14px;
  color: var(--vl-text-label);
  vertical-align: middle;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* Nome em destaque (ex: motorista, cliente) */
.vl-cell-nome { font-weight: 600; color: var(--vl-dark); text-transform: capitalize; }
/* Trunca texto longo (ex: várias notas fiscais concatenadas) numa linha só,
   com "..." e o texto completo disponível no title (tooltip nativo) */
.vl-cell-truncate {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.vl-pagination-bg { background: var(--vl-surface) !important; }

/* ── Status badges ─────────────────────────────────────────── */
.vl-badge,
.st-badge,
.prazo-badge {
  display: inline-flex; align-items: center;
  padding: 4px 13px;
  border-radius: 20px;
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.vl-badge--green,  .st-disponivel  { background: #dcfce7; color: #15803d; }
.vl-badge--yellow, .st-em-viagem   { background: #fef9c3; color: #92400e; }
.vl-badge--red,    .st-reprovado   { background: #fee2e2; color: #b91c1c; }
.vl-badge--blue,   .st-validacao   { background: #e0e7ff; color: #3730a3; }
.vl-badge--purple, .st-retorno     { background: #ede9fe; color: #6d28d9; }
.vl-badge--orange, .st-suspenso,
                   .st-incompleto  { background: #ffedd5; color: #c2410c; }
.vl-badge--gray,   .st-inativo     { background: #f3f4f6; color: #6b7280; }
.vl-badge--brand                   { background: #f3e8ff; color: #5B27AF; }

/* ── Legend dots ───────────────────────────────────────────── */
.vl-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.vl-dot--green  { background: #16a34a; }
.vl-dot--yellow { background: #ca8a04; }
.vl-dot--orange { background: #ea580c; }
.vl-dot--red    { background: #dc2626; }
.vl-dot--blue   { background: #2563eb; }
.vl-dot--purple { background: #7c3aed; }
.vl-dot--brand  { background: #5B27AF; }
.vl-dot--gray   { background: #9ca3af; }
.vl-dot--indigo { background: #3730a3; }

/* ── Avatar ────────────────────────────────────────────────── */
.vl-avatar,
.mot-avatar,
.agente-avatar {
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex-shrink: 0;
  object-fit: cover;
}
.vl-avatar.sm { width: 32px; height: 32px; font-size: 13px; }
.vl-avatar.md,
.mot-avatar   { width: 38px; height: 38px; font-size: 15px; }
.vl-avatar.lg,
.agente-avatar { width: 46px; height: 46px; font-size: 17px; }

/* ── Progress bar ──────────────────────────────────────────── */
.vl-bar-track,
.prog-track {
  height: 6px;
  background: var(--vl-divider);
  border-radius: 4px;
  overflow: hidden;
  flex-grow: 1;
}
.vl-bar-fill,
.prog-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--vl-primary);
  transition: width .5s ease;
}
.vl-bar-fill--teal   { background: linear-gradient(90deg, var(--vl-primary), var(--vl-secondary)); }
.vl-bar-fill--green  { background: #16a34a; }
.vl-bar-fill--yellow { background: #f59e0b; }

/* ── Autocomplete ──────────────────────────────────────────── */
.vl-autocomplete,
.cotacao-autocomplete {
  list-style: none;
  margin: 0; padding: 0;
  background: #fff;
  border: 1px solid var(--vl-border);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  z-index: 1055;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  display: none;
}
.vl-autocomplete li,
.cotacao-autocomplete li {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--vl-text-label);
  border-bottom: 1px solid var(--vl-divider);
}
.vl-autocomplete li:last-child,
.cotacao-autocomplete li:last-child { border-bottom: none; }
.vl-autocomplete li:hover,
.cotacao-autocomplete li:hover { background: var(--vl-hover-bg); color: var(--vl-primary); }
/* Estado vazio ("Nenhuma cidade encontrada" etc.) — genérico, pra não
   precisar recriar essa mesma regrinha em cada tela nova que usa
   .vl-autocomplete (ver ff-ac-empty/nd-ac-empty, versões antigas locais). */
.vl-autocomplete .vl-ac-empty       { color: var(--vl-muted); cursor: default; }
.vl-autocomplete .vl-ac-empty:hover { background: transparent !important; color: var(--vl-muted) !important; }

/* ── Form controls ─────────────────────────────────────────── */
/* Fundo branco puro pro campo editável — o off-white antigo (--vl-surface,
   #fafafa) ficava parecido demais com o cinza do campo travado (:read-only
   logo abaixo) pra bater o olho e diferenciar rápido qual campo aceita
   digitação.
   Seletor composto (.form-control.vl-form-control) em vez de só
   .vl-form-control: existe uma regra legada em home/header.php
   (.form-control { ... !important }, carregada depois no documento) que
   empatava em especificidade e !important e vencia por ordem de origem —
   o composto sobe a especificidade e garante que o design system sempre
   vence, sem precisar mexer no header.php compartilhado por todas as telas. */
.form-control.vl-form-control,
.form-select.vl-form-control {
  border-radius: 10px !important;
  border: 1.5px solid var(--vl-border) !important;
  font-size: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.form-control.vl-form-control:focus,
.form-select.vl-form-control:focus {
  border-color: var(--vl-primary) !important;
  box-shadow: 0 0 0 3px rgba(91,39,175,.12) !important;
  background: #fff !important;
}
/* .vl-form-control usa !important na borda, o que por padrão sobrescreve o
   vermelho de validação do Bootstrap (.is-invalid / :invalid) — reforça aqui. */
.was-validated .form-control.vl-form-control:invalid,
.was-validated .form-select.vl-form-control:invalid,
.form-control.vl-form-control.is-invalid,
.form-select.vl-form-control.is-invalid {
  border-color: #dc3545 !important;
}
.was-validated .form-control.vl-form-control:invalid:focus,
.was-validated .form-select.vl-form-control:invalid:focus,
.form-control.vl-form-control.is-invalid:focus,
.form-select.vl-form-control.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220,53,69,.15) !important;
}
/* Campo bloqueado/automático — mais escuro que o normal pra diferenciar
   visualmente de um campo editável vazio. */
.form-control.vl-form-control:read-only,
.form-select.vl-form-control:read-only {
  background: #e9ecef !important;
  color: var(--vl-muted) !important;
  cursor: not-allowed;
}

/* ── Selectize (qualquer <select class="... vl-form-control">) ───────
   Selectize copia as classes do <select> original pro wrapper que ele cria
   (.selectize-control) e pro painel do dropdown (.selectize-dropdown) — por
   isso ".vl-form-control" nesses dois seletores já escopa a regra sozinha,
   sem precisar repetir isso em cada modal/tela que usa Selectize (era assim
   antes, duplicado em view/componentes/css/modal_fechar_frete.css e
   view/demanda/css/modal_nova_demanda.css — centralizado aqui). Cobre
   fundo/borda/foco pra bater com o resto do form, e zera o padding-right que
   o Bootstrap (.form-select, também copiado) reserva pra seta do select
   nativo — sem isso sobra um respiro à direita no dropdown e o texto das
   opções mais compridas empurra um scroll horizontal indesejado. */
.selectize-control.vl-form-control {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.selectize-control.vl-form-control .selectize-input {
  border-radius: 10px !important;
  border: 1.5px solid var(--vl-border) !important;
  background: var(--vl-surface) !important;
  color: var(--vl-text-label) !important;
  font-size: 14px !important;
  min-height: 42px;
  box-shadow: none !important;
}
.selectize-control.vl-form-control .selectize-input.focus {
  border-color: var(--vl-primary) !important;
  box-shadow: 0 0 0 3px rgba(91,39,175,.12) !important;
  background: #fff !important;
}
/* Selects obrigatórios não conseguem usar :invalid/required nativo do
   navegador (o <select> original fica display:none, e elemento não
   renderizado é "barred from constraint validation") — quem usa Selectize
   pra validar cliente/motorista/etc. alterna essa classe na mão no
   .selectize-control, que é quem o usuário realmente vê. */
.selectize-control.is-invalid .selectize-input {
  border-color: #dc3545 !important;
}
.selectize-dropdown.vl-form-control {
  border-radius: 10px !important;
  border: 1.5px solid var(--vl-border) !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  color-scheme: light;
  padding: 0 !important;
  overflow-x: hidden;
}
.selectize-dropdown.vl-form-control .selectize-dropdown-content {
  overflow-x: hidden;
}
.selectize-dropdown.vl-form-control .option {
  padding: 9px 12px;
  color: var(--vl-text-label) !important;
  background: #fff !important;
  transition: background .12s, color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selectize-dropdown.vl-form-control .option + .option {
  border-top: 1px solid var(--vl-divider);
}
.selectize-dropdown.vl-form-control .option strong {
  color: var(--vl-dark) !important;
}
.selectize-dropdown.vl-form-control .option:hover,
.selectize-dropdown.vl-form-control .option.active {
  background: var(--vl-primary) !important;
  color: #fff !important;
}
.selectize-dropdown.vl-form-control .option:hover strong,
.selectize-dropdown.vl-form-control .option.active strong {
  color: #fff !important;
}

.vl-form-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--vl-text-label) !important;
}

/* jQuery UI 1.8.22 (datepicker) é antigo e não conta com o z-index alto que
   o Bootstrap 5 usa em cards/inputs — sem isso o calendário abre atrás dos
   outros elementos da página. */
.ui-datepicker {
  z-index: 99999 !important;
}

/* ── Modal ─────────────────────────────────────────────────── */
.vl-modal-content {
  border-radius: 18px !important;
  border: none !important;
  overflow: hidden;
}
.vl-modal-header {
  background: var(--vl-hover-bg);
  border-bottom: none !important;
  padding: 20px 24px 12px !important;
}
.vl-modal-title { color: var(--vl-dark) !important; font-weight: 700; }

/* ── Empty state ───────────────────────────────────────────── */
.vl-empty-state,
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 56px 16px;
  color: var(--vl-muted);
  gap: 12px;
  text-align: center;
}
.vl-empty-state i,
.empty-state i { font-size: 44px; opacity: .5; display: block; }
.vl-empty-state p { margin: 0; font-size: 14px; }

/* ── Metric box ────────────────────────────────────────────── */
.vl-metric-box,
.metrica-box,
.resumo-item {
  text-align: center;
  padding: 12px 8px;
  border-radius: 10px;
  background: var(--vl-surface);
}
.vl-metric-box .mv,
.metrica-box .mv,
.resumo-item .rv { font-size: 20px; font-weight: 700; color: var(--vl-dark); line-height: 1; }
.vl-metric-box .ml,
.metrica-box .ml,
.resumo-item .rl { font-size: 11px; color: var(--vl-muted); margin-top: 4px; }

/* ── Misc ──────────────────────────────────────────────────── */
.vl-placa,
.placa-tag {
  font-family: 'Courier New', monospace !important;
  font-weight: 700;
  font-size: 13px;
  color: #1e293b;
  letter-spacing: 1px;
}

.vl-card-accent-left { border-left: 4px solid var(--vl-primary) !important; }

/* ── Notifyjs fix (global) ─────────────────────────────────── */
.notifyjs-corner,
.notifyjs-wrapper,
.notifyjs-container { z-index: 9999 !important; }

/* ── Card hover (complementa o global do header.php) ───────── */
.vl-card-hover:hover {
  box-shadow: 0 6px 22px rgba(91,39,175,.13) !important;
  transform: translateY(-2px) !important;
}

/* ── Barra de estado (uf-bar — disponibilidade) ────────────── */
.uf-bar-wrap  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.uf-bar-label { font-size: 13px; font-weight: 600; color: var(--vl-primary); width: 28px; flex-shrink: 0; }
.uf-bar-track { flex-grow: 1; height: 8px; background: var(--vl-divider); border-radius: 4px; overflow: hidden; }
.uf-bar-fill  { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--vl-primary), var(--vl-secondary)); transition: width .5s ease; }
.uf-bar-count { font-size: 12px; color: var(--vl-text-body); width: 24px; text-align: right; flex-shrink: 0; }