/* ═══════════════════════════════════════════════════════════════════════════
   VALIOM DESIGN SYSTEM v2 — "Dark Premium Empresarial" (25/09/2026)
   + TEMA CLARO OFICIAL (18/10/2026) — padrão do Sistema Principal (CAMADA 1b)
   CAMADA 1: TOKENS  ·  CAMADA 2: COMPONENTES-BASE (.vds-*)
   Adaptadores por app (legado → tokens): valiom-ds-reith.css · -crm.css · -trafego.css

   REGRA DE OURO: tudo aqui vive sob `html.vds`. Sem a classe (tenant fora do
   rollout, ?ds=classic ou rollout.json vazio) este arquivo não altera NADA.

   Leis do v2 (Lucas, 24/09/2026 — referência: mockup Central de Comando):
   • menos decoração, mais hierarquia · profundidade por SURFACE+BORDA, nunca glow
   • dourado é SEMÂNTICO: marca, item ativo, seleção, progresso, CTA primário, prioridade
   • badges neutros por padrão; cor só com significado (sucesso/alerta/erro/info)
   • Geist Sans (Geist Mono só p/ dado técnico) · números tabulares · escala 4px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CAMADA 1 · TOKENS ─────────────────────────────────────────────────────── */
html.vds {
  /* fundos */
  --vds-bg-canvas: #060E17;         /* navy profundo — valor exato do mockup nas bordas; a profundidade vem da atmosfera */
  --vds-bg-sidebar: #050D16;        /* um passo abaixo do canvas */        /* um tom ABAIXO do canvas — navegação recua, conteúdo avança */
  --vds-bg-header: #0A1520;         /* sólido (barras de módulo); o header do shell usa --vds-header-glass */
  --vds-header-glass: rgba(18, 32, 48, .28);   /* ajuste numérico ao mockup (erro 6,93 → 2,74) */
  --vds-header-light: radial-gradient(22% 140% at 62% 0%, rgba(70, 105, 145, .06), transparent 70%);  /* pico de luz do header do mockup (x≈62%) */   /* translúcido sobre a luz do canvas → bordas escuras, centro claro (mockup) */
  /* superfícies (elevação = superfície mais clara, não sombra) */
  --vds-surface-1: #0D1824;         /* mockup exato */
  --vds-surface-2: #13202F;
  --vds-surface-3: #172839;
  --vds-surface-hover: #152538;
  --vds-surface-selected: rgba(250, 200, 48, .08);
  --vds-surface-input: #091320;
  --vds-tint-hover: rgba(125, 165, 210, .05);     /* hover de linha/item (antes branco neutro) */
  --vds-track: #1C2C40;                          /* trilha de progresso (mockup: #213246) */
  --vds-canvas-light: radial-gradient(42% 100% at 61% -4%, rgba(44, 70, 102, .30) 0%, rgba(30, 52, 80, .15) 45%, rgba(6, 14, 23, 0) 100%);  /* atmosfera do mockup: ajuste numérico em 85 pontos — sem dourado */
  --vds-panel-light: linear-gradient(180deg, rgba(130, 165, 205, .035) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 6, 14, .07) 100%);  /* painéis: topo levemente aceso, base mais funda (mockup #101B27 → #0A141F) */
  /* bordas */
  --vds-border-subtle: rgba(125, 165, 210, .07);   /* bordas frias, como no mockup */
  --vds-border-default: rgba(125, 165, 210, .13);
  --vds-border-strong: rgba(140, 180, 225, .22);
  --vds-border-top: rgba(150, 185, 225, .20);      /* aresta superior dos painéis (mockup #223648) — o card "emerge" */
  --vds-card-edge: inset 0 1px 0 rgba(150, 185, 225, .07);
  --vds-border-divider: rgba(125, 165, 210, .17);  /* linha sidebar/conteúdo (mockup #172431) */
  /* texto */
  --vds-text-primary: #F5F7FA;
  --vds-text-body: #E4E9F0;      /* texto corrido/células (mockup: #EBEEF1) */
  --vds-text-secondary: #A3B5C9;
  --vds-text-tertiary: #8397AF;
  --vds-text-label: #A3B8D2;     /* rótulos em caixa-alta (PRINCIPAL, CENTRAL DE COMANDO, POR QUÊ) — mockup #A3BAD5 */
  --vds-text-disabled: #4E5E72;
  --vds-text-on-gold: #14110A;
  /* marca */
  --vds-gold-50: #FFF8D8;
  --vds-gold-100: #FCECA3;
  --vds-gold-300: #FDD863;
  --vds-gold-500: #FAC830;
  --vds-gold-600: #E4B21A;
  --vds-gold-700: #BD8F08;
  --vds-brand: var(--vds-gold-500);
  /* status */
  --vds-success: #35D79A;
  --vds-danger: #FF656A;
  --vds-warning: #F4C928;
  --vds-info: #6EA8FF;
  --vds-success-bg: rgba(53, 215, 154, .10);
  --vds-danger-bg: rgba(255, 101, 106, .10);
  --vds-warning-bg: rgba(250, 200, 48, .10);
  --vds-info-bg: rgba(110, 168, 255, .10);
  --vds-success-bd: rgba(53, 215, 154, .28);
  --vds-danger-bd: rgba(255, 101, 106, .30);
  --vds-warning-bd: rgba(250, 200, 48, .30);
  --vds-info-bd: rgba(110, 168, 255, .28);
  /* raio */
  --vds-radius-xs: 4px;
  --vds-radius-sm: 6px;
  --vds-radius-md: 8px;
  --vds-radius-lg: 10px;
  --vds-radius-xl: 12px;
  --vds-radius-pill: 999px;
  /* espaço (escala 4px) */
  --vds-space-1: 4px;  --vds-space-2: 8px;  --vds-space-3: 12px; --vds-space-4: 16px;
  --vds-space-5: 20px; --vds-space-6: 24px; --vds-space-8: 32px; --vds-space-10: 40px;
  --vds-space-12: 48px; --vds-space-16: 64px;
  /* tipografia */
  --vds-font-sans: 'Geist', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vds-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --vds-fs-11: 11px; --vds-fs-12: 12px; --vds-fs-13: 13px; --vds-fs-14: 14px;
  --vds-fs-15: 15px; --vds-fs-16: 16px; --vds-fs-18: 18px; --vds-fs-20: 20px;
  --vds-fs-24: 24px; --vds-fs-28: 28px; --vds-fs-32: 32px;
  --vds-fw-body: 400; --vds-fw-ui: 500; --vds-fw-title: 600; --vds-fw-metric: 650;
  /* controles */
  --vds-h-sm: 32px; --vds-h-md: 36px; --vds-h-lg: 40px;   /* sm = toolbars/filtros/densos · md = formulários/CTA */
  --vds-focus-ring: 0 0 0 3px rgba(250, 200, 48, .16);
  /* elevação — só para camadas flutuantes (menu, modal, toast); nunca colorida */
  --vds-shadow-pop: 0 12px 32px rgba(0, 0, 0, .42);
  --vds-shadow-modal: 0 24px 64px rgba(0, 0, 0, .55);
  --vds-overlay: rgba(4, 6, 10, .72);
  /* movimento */
  --vds-ease: cubic-bezier(.2, 0, .2, 1);
  --vds-dur: .16s;
  /* ── semânticos (18/10/2026, tema claro oficial) ──
     Componentes falam "acento/seleção/primário", nunca "dourado". No escuro resolvem
     EXATAMENTE para os valores de antes (gold); no claro, para preto/grafite. */
  --vds-accent: var(--vds-gold-500);            /* indicador ativo, aba, progresso, CTA primário */
  --vds-accent-hover: var(--vds-gold-300);
  --vds-accent-press: var(--vds-gold-600);
  --vds-on-accent: var(--vds-text-on-gold);
  --vds-accent-text: var(--vds-gold-500);       /* texto de item selecionado */
  --vds-accent-bd-weak: rgba(250, 200, 48, .22);
  --vds-accent-bd: rgba(250, 200, 48, .45);
  --vds-accent-bd-strong: rgba(250, 200, 48, .75);
  --vds-focus-border: rgba(250, 200, 48, .55);
  --vds-outline-focus: rgba(250, 200, 48, .7);
  --vds-link: var(--vds-gold-300);
  --vds-kpi-icon: var(--vds-gold-500);          /* ícone de rótulo de KPI */
  --vds-nav-hover: rgba(125, 165, 210, 0.056);
  --vds-nav-active-bg: var(--vds-surface-selected);
  --vds-nav-active-fg: var(--vds-gold-500);
  --vds-count-bg: var(--vds-surface-3);         /* contadores do menu */
  --vds-count-fg: var(--vds-text-primary);
  --vds-prio-bg: transparent;                   /* selo "Alta prioridade" */
  --vds-prio-fg: var(--vds-gold-500);
  --vds-prio-bd: rgba(250, 200, 48, .75);
  --vds-success-fg: var(--vds-success);         /* texto dentro de badge/alerta */
  --vds-danger-fg: var(--vds-danger);
  --vds-warning-fg: var(--vds-gold-300);
  --vds-info-fg: var(--vds-info);
  --vds-text-placeholder: var(--vds-text-tertiary);
  --vds-tint-row: rgba(125, 165, 210, 0.032);   /* hover de linha de tabela/célula */
  --vds-tint-faint: rgba(125, 165, 210, 0.019);
  --vds-track-soft: rgba(125, 165, 210, 0.128); /* trilha de barra */
  --vds-skel-a: rgba(125, 165, 210, 0.064);
  --vds-skel-b: rgba(125, 165, 210, 0.128);
  --vds-spinner-track: rgba(125, 165, 210, 0.192);
  --vds-scroll-thumb: rgba(125, 165, 210, 0.16);
  --vds-scroll-thumb-hover: rgba(125, 165, 210, 0.288);
  --vds-shell-input: #111E2B;
  --vds-shell-placeholder: #93A8BE;
  --vds-loading-overlay: rgba(11, 14, 19, .72);
  --vds-shadow-fab: 0 8px 24px rgba(0, 0, 0, .45);
  --vds-shadow-fab-sm: 0 4px 12px rgba(0, 0, 0, .4);
  --vds-shadow-drawer: -24px 0 64px rgba(0, 0, 0, .45);
  --vds-danger-bg-hover: rgba(255, 101, 106, .16);
  color-scheme: dark;
}

/* ── CAMADA 1b · TEMA CLARO OFICIAL (18/10/2026) ───────────────────────────────
   Padrão do Sistema Principal. Enterprise claro: BRANCO ABSOLUTO (#FFF) em fundo, sidebar e header; preto/grafite
   como âncora; marca, logo e ícones em PRETO (sem amarelo — Lucas 18/10); cor funcional só com significado.
   Escopo: Sistema Principal = body.light-theme; CRM e Tráfego = html[data-theme="light"] (lá o mapeamento
   das variáveis legadas mora no <html>, então os tokens claros precisam estar no <html>). O escuro segue intacto. */
html.vds body.light-theme,
html.vds[data-theme="light"] {
  --vds-bg-canvas: #FFFFFF;
  --vds-bg-sidebar: #FFFFFF;
  --vds-bg-header: #FFFFFF;
  --vds-header-glass: #FFFFFF;
  --vds-header-light: none;
  --vds-surface-1: #FFFFFF;
  --vds-surface-2: #FAFAFA;
  --vds-surface-3: #F4F4F5;
  --vds-surface-hover: #F5F5F5;
  --vds-surface-selected: #F2F2F2;
  --vds-surface-input: #FFFFFF;
  --vds-tint-hover: rgba(17, 17, 17, .04);
  --vds-track: #EBEBEB;
  --vds-canvas-light: none;
  --vds-panel-light: none;
  --vds-border-subtle: #EEEEEE;
  --vds-border-default: #E5E5E5;
  --vds-border-strong: #D9D9D9;
  --vds-border-top: #E5E5E5;
  --vds-card-edge: none;
  --vds-border-divider: #E5E5E5;
  --vds-text-primary: #111111;
  --vds-text-body: #1F2328;
  --vds-text-secondary: #5F6368;
  --vds-text-tertiary: #7A8087;
  --vds-text-label: #5F6368;
  --vds-text-disabled: #9AA0A6;
  --vds-text-on-gold: #FFFFFF;                 /* no claro o "gold" é preto → texto sobre ele é branco */
  --vds-gold-50: #F5F5F5;
  --vds-gold-100: #E5E5E5;
  --vds-gold-300: #2B2F33;
  --vds-gold-500: #111111;
  --vds-gold-600: #000000;
  --vds-gold-700: #000000;
  --vds-success: #16A34A;
  --vds-danger: #DC2626;
  --vds-warning: #D97706;
  --vds-info: #2563EB;
  --vds-success-bg: #EEF8F1;
  --vds-danger-bg: #FDF1F1;
  --vds-warning-bg: #FFF7ED;
  --vds-info-bg: #EFF4FE;
  --vds-success-bd: #CFE9D7;
  --vds-danger-bd: #F5D2D2;
  --vds-warning-bd: #FED7AA;
  --vds-info-bd: #D5E2FA;
  --vds-success-fg: #166534;
  --vds-danger-fg: #B91C1C;
  --vds-warning-fg: #92400E;
  --vds-info-fg: #1E40AF;
  --vds-focus-ring: 0 0 0 3px rgba(17, 17, 17, .06);
  --vds-shadow-pop: 0 10px 28px rgba(17, 17, 17, .08), 0 1px 2px rgba(17, 17, 17, .05);
  --vds-shadow-modal: 0 24px 56px rgba(17, 17, 17, .14), 0 2px 6px rgba(17, 17, 17, .05);
  --vds-overlay: rgba(17, 17, 17, .32);
  --vds-accent: #111111;
  --vds-accent-hover: #2B2F33;
  --vds-accent-press: #000000;
  --vds-on-accent: #FFFFFF;
  --vds-accent-text: #111111;
  --vds-accent-bd-weak: rgba(17, 17, 17, .12);
  --vds-accent-bd: rgba(17, 17, 17, .28);
  --vds-accent-bd-strong: rgba(17, 17, 17, .6);
  --vds-focus-border: #2B2F33;
  --vds-outline-focus: rgba(17, 17, 17, .55);
  --vds-link: #111111;
  --vds-kpi-icon: #5F6368;
  --vds-nav-hover: #F5F5F5;
  --vds-nav-active-bg: #F2F2F2;
  --vds-nav-active-fg: #111111;
  --vds-count-bg: #E9EBEF;
  --vds-count-fg: #374151;
  --vds-prio-bg: #F4F4F5;
  --vds-prio-fg: #2B2F33;
  --vds-prio-bd: #E5E5E5;
  --vds-text-placeholder: #9AA0A6;
  --vds-tint-row: #FAFAFA;
  --vds-tint-faint: #FCFCFC;
  --vds-track-soft: #EBEBEB;
  --vds-skel-a: #F2F2F2;
  --vds-skel-b: #E8E8E8;
  --vds-spinner-track: #E5E5E5;
  --vds-scroll-thumb: rgba(17, 17, 17, .16);
  --vds-scroll-thumb-hover: rgba(17, 17, 17, .28);
  --vds-shell-input: #FFFFFF;
  --vds-shell-placeholder: #9AA0A6;
  --vds-loading-overlay: rgba(255, 255, 255, .72);
  --vds-shadow-fab: 0 6px 18px rgba(17, 17, 17, .16);
  --vds-shadow-fab-sm: 0 2px 8px rgba(17, 17, 17, .10);
  --vds-shadow-drawer: -16px 0 40px rgba(17, 17, 17, .10);
  --vds-danger-bg-hover: #FBE6E6;
  --vds-brand: #111111;              /* marca no claro = preta (18/10, Lucas) */
  color-scheme: light;
}

/* ── CAMADA 2 · COMPONENTES-BASE ───────────────────────────────────────────
   Para código NOVO (Sistema, CRM, Tráfego, valiom-next). Os adaptadores de cada
   app mapeiam as classes legadas para estes mesmos valores. */

/* Button ─ primary | secondary | ghost | danger · sm | md | lg */
html.vds .vds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--vds-h-md); padding: 0 14px; border-radius: var(--vds-radius-md);
  border: 1px solid transparent; font: var(--vds-fw-ui) var(--vds-fs-13)/1 var(--vds-font-sans);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--vds-dur) var(--vds-ease), border-color var(--vds-dur) var(--vds-ease), color var(--vds-dur) var(--vds-ease);
}
html.vds .vds-btn i, html.vds .vds-btn svg { font-size: 13px; width: 14px; height: 14px; }
html.vds .vds-btn--sm { height: var(--vds-h-sm); padding: 0 10px; font-size: var(--vds-fs-12); }
html.vds .vds-btn--lg { height: var(--vds-h-lg); padding: 0 18px; font-size: var(--vds-fs-14); }
html.vds .vds-btn--primary { background: var(--vds-accent); color: var(--vds-on-accent); font-weight: var(--vds-fw-title); }
html.vds .vds-btn--primary:hover { background: var(--vds-accent-hover); }
html.vds .vds-btn--primary:active { background: var(--vds-accent-press); }
html.vds .vds-btn--secondary { background: var(--vds-surface-1); border-color: var(--vds-border-strong); color: var(--vds-text-primary); }
html.vds .vds-btn--secondary:hover { background: var(--vds-surface-hover); }
html.vds .vds-btn--ghost { background: transparent; color: var(--vds-text-secondary); }
html.vds .vds-btn--ghost:hover { background: var(--vds-surface-hover); color: var(--vds-text-primary); }
html.vds .vds-btn--danger { background: var(--vds-danger-bg); border-color: var(--vds-danger-bd); color: var(--vds-danger-fg); }
html.vds .vds-btn--danger:hover { background: var(--vds-danger-bg-hover); }
html.vds .vds-btn:focus-visible { outline: none; box-shadow: var(--vds-focus-ring); border-color: var(--vds-focus-border); }
html.vds .vds-btn:disabled, html.vds .vds-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
html.vds .vds-btn[aria-busy="true"] { cursor: progress; opacity: .8; }

/* Input / Select / Textarea */
html.vds .vds-input, html.vds .vds-select, html.vds .vds-textarea {
  width: 100%; height: var(--vds-h-md); padding: 0 12px; border-radius: var(--vds-radius-md);
  background: var(--vds-surface-input); border: 1px solid var(--vds-border-default);
  color: var(--vds-text-primary); font: var(--vds-fw-body) var(--vds-fs-14) var(--vds-font-sans);
  outline: none; transition: border-color var(--vds-dur), box-shadow var(--vds-dur);
}
html.vds .vds-textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
html.vds .vds-input::placeholder, html.vds .vds-textarea::placeholder { color: var(--vds-text-placeholder); }
html.vds .vds-input:hover, html.vds .vds-select:hover, html.vds .vds-textarea:hover { border-color: var(--vds-border-strong); }
html.vds .vds-input:focus, html.vds .vds-select:focus, html.vds .vds-textarea:focus { border-color: var(--vds-focus-border); box-shadow: var(--vds-focus-ring); }
html.vds .vds-input:disabled, html.vds .vds-select:disabled, html.vds .vds-textarea:disabled { opacity: .5; cursor: not-allowed; }
html.vds .vds-input[aria-invalid="true"], html.vds .vds-input.is-error { border-color: var(--vds-danger-bd); }
html.vds .vds-input.is-success { border-color: var(--vds-success-bd); }
html.vds .vds-label { display: block; margin-bottom: 6px; font: var(--vds-fw-ui) var(--vds-fs-12) var(--vds-font-sans); color: var(--vds-text-secondary); }
html.vds .vds-help { margin-top: 6px; font-size: var(--vds-fs-12); color: var(--vds-text-tertiary); }
html.vds .vds-help.is-error { color: var(--vds-danger); }

/* Badge ─ neutral (padrão) | success | warning | danger | info | brand */
html.vds .vds-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  border-radius: var(--vds-radius-sm); border: 1px solid var(--vds-border-default);
  background: var(--vds-surface-2); color: var(--vds-text-body);
  font: var(--vds-fw-ui) var(--vds-fs-12)/1 var(--vds-font-sans); font-variant-numeric: tabular-nums; white-space: nowrap;
}
html.vds .vds-badge--success { background: var(--vds-success-bg); border-color: var(--vds-success-bd); color: var(--vds-success-fg); }
html.vds .vds-badge--warning { background: var(--vds-warning-bg); border-color: var(--vds-warning-bd); color: var(--vds-warning-fg); }
html.vds .vds-badge--danger  { background: var(--vds-danger-bg);  border-color: var(--vds-danger-bd);  color: var(--vds-danger-fg); }
html.vds .vds-badge--info    { background: var(--vds-info-bg);    border-color: var(--vds-info-bd);    color: var(--vds-info-fg); }
html.vds .vds-badge--brand   { background: transparent; border-color: var(--vds-focus-border); color: var(--vds-accent-text); }
html.vds .vds-badge--count   { min-width: 22px; justify-content: center; padding: 0 6px; border-radius: var(--vds-radius-pill); }

/* Card / painéis (InsightPanel, ActionPanel, TablePanel, FormPanel) */
html.vds .vds-card {
  background: var(--vds-surface-1); border: 1px solid var(--vds-border-default);
  border-radius: var(--vds-radius-xl); padding: var(--vds-space-6);
}
html.vds .vds-card--flush { padding: 0; overflow: hidden; }
html.vds .vds-card--inset { background: var(--vds-surface-2); border-color: var(--vds-border-subtle); border-radius: var(--vds-radius-lg); padding: var(--vds-space-4); }
html.vds .vds-card--interactive { cursor: pointer; transition: border-color var(--vds-dur), background var(--vds-dur); }
html.vds .vds-card--interactive:hover { border-color: var(--vds-border-strong); background: var(--vds-surface-2); }

/* PageHeader / SectionHeader / Eyebrow */
html.vds .vds-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--vds-fw-title) var(--vds-fs-11)/1 var(--vds-font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--vds-text-secondary);
}
html.vds .vds-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 1px; background: var(--vds-gold-500); transform: rotate(45deg); }
html.vds .vds-page-title { font: var(--vds-fw-title) var(--vds-fs-32)/1.15 var(--vds-font-sans); letter-spacing: -.02em; color: var(--vds-text-primary); margin: 0; }
html.vds .vds-page-sub { font-size: var(--vds-fs-16); color: var(--vds-text-body); margin: 8px 0 0; }
html.vds .vds-section-title { font: var(--vds-fw-title) var(--vds-fs-18)/1.3 var(--vds-font-sans); color: var(--vds-text-primary); margin: 0; }
html.vds .vds-section-sub { font-size: var(--vds-fs-13); color: var(--vds-text-secondary); margin-top: 4px; }

/* MetricGroup — UM container, colunas internas com divisores sutis */
html.vds .vds-metric-group {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--vds-surface-1); border: 1px solid var(--vds-border-default); border-radius: var(--vds-radius-xl);
}
html.vds .vds-metric { padding: var(--vds-space-5) var(--vds-space-6); min-width: 0; }
html.vds .vds-metric + .vds-metric { border-left: 1px solid var(--vds-border-default); }
html.vds .vds-metric-label { display: flex; align-items: center; gap: 8px; font-size: var(--vds-fs-14); color: var(--vds-text-secondary); }
html.vds .vds-metric-label i { color: var(--vds-kpi-icon); font-size: 14px; }
html.vds .vds-metric-value { margin-top: 12px; font: var(--vds-fw-title) var(--vds-fs-32)/1.1 var(--vds-font-sans); letter-spacing: -.02em; color: var(--vds-text-primary); font-variant-numeric: tabular-nums; }
html.vds .vds-metric-value small { font-size: .62em; font-weight: 500; color: var(--vds-text-secondary); }
html.vds .vds-metric-sub { margin-top: 6px; font-size: var(--vds-fs-13); color: var(--vds-text-secondary); }
html.vds .vds-delta-up { color: var(--vds-success); font-weight: 600; }
html.vds .vds-delta-down { color: var(--vds-danger); font-weight: 600; }
@media (max-width: 900px) {
  html.vds .vds-metric-group { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  html.vds .vds-metric + .vds-metric { border-left: 0; }
  html.vds .vds-metric:nth-child(even) { border-left: 1px solid var(--vds-border-default); }
  html.vds .vds-metric:nth-child(n+3) { border-top: 1px solid var(--vds-border-default); }
}

/* Progress */
html.vds .vds-progress { height: 6px; border-radius: var(--vds-radius-pill); background: var(--vds-track-soft); overflow: hidden; }
html.vds .vds-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--vds-accent); }

/* Table */
html.vds .vds-table { width: 100%; border-collapse: collapse; font-size: var(--vds-fs-13); font-variant-numeric: tabular-nums; }
html.vds .vds-table th {
  text-align: left; padding: 10px 16px; font: var(--vds-fw-ui) var(--vds-fs-11)/1.2 var(--vds-font-sans);
  letter-spacing: .06em; text-transform: uppercase; color: var(--vds-text-tertiary);
  border-bottom: 1px solid var(--vds-border-default); background: transparent;
}
html.vds .vds-table td { padding: 12px 16px; color: var(--vds-text-body); border-bottom: 1px solid var(--vds-border-subtle); vertical-align: middle; }
html.vds .vds-table tbody tr:hover td { background: var(--vds-tint-row); }
html.vds .vds-table tr:last-child td { border-bottom: 0; }
html.vds .vds-table .is-num { text-align: right; }

/* Tabs — ativa com indicador dourado fino, sem pill */
html.vds .vds-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--vds-border-default); }
html.vds .vds-tab {
  position: relative; padding: 10px 0; background: none; border: 0; cursor: pointer;
  font: var(--vds-fw-ui) var(--vds-fs-14) var(--vds-font-sans); color: var(--vds-text-tertiary);
}
html.vds .vds-tab:hover { color: var(--vds-text-secondary); }
html.vds .vds-tab[aria-selected="true"], html.vds .vds-tab.is-active { color: var(--vds-text-primary); }
html.vds .vds-tab[aria-selected="true"]::after, html.vds .vds-tab.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--vds-accent);
}

/* Modal / Drawer */
html.vds .vds-overlay { position: fixed; inset: 0; background: var(--vds-overlay); backdrop-filter: blur(2px); }
html.vds .vds-modal {
  background: var(--vds-surface-2); border: 1px solid var(--vds-border-default); border-radius: var(--vds-radius-xl);
  box-shadow: var(--vds-shadow-modal); color: var(--vds-text-primary);
}
html.vds .vds-modal__header { padding: 20px 24px 12px; font: var(--vds-fw-title) var(--vds-fs-18) var(--vds-font-sans); }
html.vds .vds-modal__body { padding: 8px 24px 20px; }
html.vds .vds-modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--vds-border-subtle); }
html.vds .vds-drawer { background: var(--vds-surface-1); border-left: 1px solid var(--vds-border-default); box-shadow: var(--vds-shadow-drawer); }

/* Menu / Dropdown / Tooltip / Toast */
html.vds .vds-menu {
  background: var(--vds-surface-2); border: 1px solid var(--vds-border-default); border-radius: var(--vds-radius-lg);
  box-shadow: var(--vds-shadow-pop); padding: 6px;
}
html.vds .vds-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: var(--vds-radius-sm); background: none; border: 0; color: var(--vds-text-body); font: var(--vds-fw-body) var(--vds-fs-13) var(--vds-font-sans); cursor: pointer; text-align: left; }
html.vds .vds-menu-item:hover { background: var(--vds-surface-hover); color: var(--vds-text-primary); }
html.vds .vds-tooltip { background: var(--vds-surface-3); border: 1px solid var(--vds-border-strong); border-radius: var(--vds-radius-sm); padding: 6px 8px; font-size: var(--vds-fs-12); color: var(--vds-text-primary); box-shadow: var(--vds-shadow-pop); }
html.vds .vds-toast {
  display: flex; gap: 12px; align-items: flex-start; min-width: 280px; max-width: 420px; padding: 12px 14px;
  background: var(--vds-surface-2); border: 1px solid var(--vds-border-default); border-left: 3px solid var(--vds-border-strong);
  border-radius: var(--vds-radius-lg); box-shadow: var(--vds-shadow-pop); color: var(--vds-text-primary); font-size: var(--vds-fs-13);
}
html.vds .vds-toast--success { border-left-color: var(--vds-success); }
html.vds .vds-toast--warning { border-left-color: var(--vds-warning); }
html.vds .vds-toast--error   { border-left-color: var(--vds-danger); }
html.vds .vds-toast--info    { border-left-color: var(--vds-info); }

/* EmptyState / Skeleton / Spinner */
html.vds .vds-empty { padding: 40px 24px; text-align: center; color: var(--vds-text-secondary); font-size: var(--vds-fs-14); }
html.vds .vds-empty i { display: block; margin: 0 auto 12px; font-size: 20px; color: var(--vds-text-tertiary); }
html.vds .vds-empty b { display: block; color: var(--vds-text-primary); font-weight: 600; margin-bottom: 4px; }
html.vds .vds-skeleton { border-radius: var(--vds-radius-sm); background: linear-gradient(90deg, var(--vds-skel-a) 25%, var(--vds-skel-b) 50%, var(--vds-skel-a) 75%); background-size: 200% 100%; animation: vds-skel 1.4s linear infinite; }
@keyframes vds-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
html.vds .vds-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--vds-spinner-track); border-top-color: var(--vds-accent); animation: vds-spin .7s linear infinite; }
@keyframes vds-spin { to { transform: rotate(360deg); } }

/* Utilitários */
html.vds .vds-num { font-variant-numeric: tabular-nums; }
html.vds .vds-mono { font-family: var(--vds-font-mono); }

/* Scrollbar escura discreta (as três apps) */
html.vds, html.vds * { scrollbar-width: thin; scrollbar-color: var(--vds-spinner-track) transparent; }
html.vds ::-webkit-scrollbar { width: 8px; height: 8px; }
html.vds ::-webkit-scrollbar-track { background: transparent; }
html.vds ::-webkit-scrollbar-thumb { background: var(--vds-scroll-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
html.vds ::-webkit-scrollbar-thumb:hover { background: var(--vds-scroll-thumb-hover); background-clip: padding-box; }

/* Acessibilidade: foco visível por teclado em TUDO que é clicável (sem glow) */
html.vds :is(button, a, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--vds-outline-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html.vds *, html.vds *::before, html.vds *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}