/* ============================================================================
   components-elite-v2-refined.css
   Refinamento cirúrgico do Elite v2 — 12 melhorias aditivas
   
   Este arquivo deve ser carregado APÓS components-elite-v2.css e
   theme-dark.css para que os overrides tenham precedência natural.
   
   Arquitetura:
     - 100% aditivo: sobrescreve apenas via especificidade natural
     - Zero breaking changes: mantém todos os tokens antigos como aliases
     - Reversão trivial: remover o <link> desabilita todos os refinamentos
     
   Implementado em: 2026-04-18
   ============================================================================ */

/* Fonte display — DM Sans (unifica com Portal do Membro PWA) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500;9..40,600;9..40,700&display=swap');


/* ============================================================================
   01 + 02 — TOKENS UNIFICADOS (light + dark)
   ============================================================================ */

:root {
  /* Nova escala --brand-* canônica */
  --brand-primary: #2563eb;
  --brand-primary-hover: #3b82f6;
  --brand-primary-pressed: #1d4ed8;
  --brand-primary-glow: #60a5fa;
  --brand-tint-soft: #dbeafe;
  --brand-tint-subtle: #eff6ff;

  /* Aliases de compatibilidade retroativa (apontam para --brand-*) */
  --color-primary: var(--brand-primary);
  --color-primary-light: var(--brand-primary-hover);
  --color-primary-dark: var(--brand-primary-pressed);
  --accent-primary: var(--brand-primary);

  /* Fonte display para títulos e números editoriais */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- 03. Sombras tintadas com navy-marca --- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 20px -8px rgba(30, 58, 95, 0.14), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 48px -16px rgba(30, 58, 95, 0.22), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-glow-blue: 0 0 0 1px rgba(37, 99, 235, 0.12), 0 0 40px rgba(37, 99, 235, 0.18);

  /* --- 04. Shine do stat card mais suave (0.5 → efetivo 0.4 via opacity) --- */
  --gradient-shine: linear-gradient(145deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 55%);
}

[data-theme="dark"] {
  --brand-primary: #3b82f6;
  --brand-primary-hover: #60a5fa;
  --brand-primary-pressed: #2563eb;
  --brand-primary-glow: #60a5fa;

  --color-primary: var(--brand-primary);
  --color-primary-light: var(--brand-primary-hover);
  --color-primary-dark: var(--brand-primary-pressed);
  --accent-primary: var(--brand-primary);

  --shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-glow-blue: 0 0 0 1px rgba(59, 130, 246, 0.25), 0 0 50px rgba(59, 130, 246, 0.2);
  --gradient-shine: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 55%);
}


/* ============================================================================
   BASE BODY — glyphs alternativos do Inter (cv11 e ss01)
   ============================================================================ */

body {
  font-feature-settings: "cv11", "ss01";
}


/* ============================================================================
   04 — STAT CARDS EDITORIAIS
   Stat value em serif display · labels em uppercase · shine mais suave
   ============================================================================ */

.stat-card::before {
  opacity: 0.4;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ============================================================================
   05 — PAGE TITLE + EYEBROW UTILITY
   ============================================================================ */

.page-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* Novo utilitário .eyebrow — rótulo de contexto acima de títulos */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--accent-primary);
  display: inline-block;
  flex-shrink: 0;
}


/* ============================================================================
   06 — BOTÕES POLIDOS
   Focus-visible ring explícito · inner highlight no primário
   ============================================================================ */

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible,
.btn-success:focus-visible,
.btn-danger:focus-visible,
.btn-warning:focus-visible,
.btn-glow:focus-visible,
.btn-export:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.btn-primary {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-primary:hover {
  background: var(--brand-primary-hover);
}


/* ============================================================================
   07 — CARD DOUBLE-EDGE
   Troca border por box-shadow de 1px: radius perfeito em 4K, sem bleed
   ============================================================================ */

.card {
  border-color: transparent;
  box-shadow: var(--shadow), 0 0 0 1px var(--border-subtle);
}

.card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
}


/* ============================================================================
   08 — DATA TABLE COM TABULAR NUMBERS
   ============================================================================ */

.data-table th {
  letter-spacing: 0.1em;
  font-size: 10.5px;
}

/* Aplicar em células com classe .num ou span.num */
.data-table td.num,
.data-table td .num,
.data-table td.money,
.data-table td.numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* ============================================================================
   09 — BADGES COM HAIRLINE BORDER
   Borda sutil na mesma família de cor — contraste consistente light/dark
   ============================================================================ */

.badge {
  border: 1px solid transparent;
}

/* Light theme borders */
.badge.success, .badge.active,
.badge-success, .badge-ativo,
.badge-pago, .badge-os-concluida, .badge-prioridade-baixa {
  border-color: rgba(5, 150, 105, 0.2);
}
.badge.warning, .badge.pending,
.badge-warning, .badge-pendente, .badge-aguardando,
.badge-os-andamento, .badge-prioridade-media {
  border-color: rgba(217, 119, 6, 0.22);
}
.badge.danger, .badge.canceled, .badge.inactive,
.badge-danger, .badge-cancelado, .badge-inativo,
.badge-atrasado, .badge-bloqueado,
.badge-os-cancelada, .badge-prioridade-alta {
  border-color: rgba(220, 38, 38, 0.2);
}
.badge.info, .badge.processing,
.badge-info, .badge-parcial, .badge-os-aberta {
  border-color: rgba(37, 99, 235, 0.22);
}
.badge.purple, .badge.premium, .badge-purple {
  border-color: rgba(124, 58, 237, 0.22);
}
.badge.teal { border-color: rgba(13, 148, 136, 0.22); }
.badge.pink { border-color: rgba(219, 39, 119, 0.22); }
.badge.neutral, .badge-neutral, .badge-default, .badge-secondary,
.badge-free, .badge-expirado {
  border-color: rgba(100, 116, 139, 0.22);
}

/* Dark theme borders — maior opacidade para vencer contraste */
[data-theme="dark"] .badge.success,
[data-theme="dark"] .badge.active,
[data-theme="dark"] .badge-success, [data-theme="dark"] .badge-ativo,
[data-theme="dark"] .badge-pago, [data-theme="dark"] .badge-os-concluida,
[data-theme="dark"] .badge-prioridade-baixa {
  border-color: rgba(16, 185, 129, 0.3);
}
[data-theme="dark"] .badge.warning,
[data-theme="dark"] .badge.pending,
[data-theme="dark"] .badge-warning, [data-theme="dark"] .badge-pendente,
[data-theme="dark"] .badge-aguardando,
[data-theme="dark"] .badge-os-andamento,
[data-theme="dark"] .badge-prioridade-media {
  border-color: rgba(245, 158, 11, 0.3);
}
[data-theme="dark"] .badge.danger, [data-theme="dark"] .badge.canceled,
[data-theme="dark"] .badge.inactive,
[data-theme="dark"] .badge-danger, [data-theme="dark"] .badge-cancelado,
[data-theme="dark"] .badge-inativo,
[data-theme="dark"] .badge-atrasado, [data-theme="dark"] .badge-bloqueado,
[data-theme="dark"] .badge-os-cancelada, [data-theme="dark"] .badge-prioridade-alta {
  border-color: rgba(239, 68, 68, 0.3);
}
[data-theme="dark"] .badge.info,
[data-theme="dark"] .badge.processing,
[data-theme="dark"] .badge-info, [data-theme="dark"] .badge-parcial,
[data-theme="dark"] .badge-os-aberta {
  border-color: rgba(59, 130, 246, 0.3);
}
[data-theme="dark"] .badge.purple,
[data-theme="dark"] .badge.premium, [data-theme="dark"] .badge-purple {
  border-color: rgba(139, 92, 246, 0.3);
}
[data-theme="dark"] .badge.teal { border-color: rgba(20, 184, 166, 0.3); }
[data-theme="dark"] .badge.pink { border-color: rgba(244, 114, 182, 0.3); }
[data-theme="dark"] .badge.neutral,
[data-theme="dark"] .badge-neutral, [data-theme="dark"] .badge-default,
[data-theme="dark"] .badge-secondary,
[data-theme="dark"] .badge-free, [data-theme="dark"] .badge-expirado {
  border-color: rgba(148, 163, 184, 0.2);
}


/* ============================================================================
   10 — FORM INPUT COMPACT VARIANT
   Default 48px permanece. Adiciona .form-input-sm para filtros inline / densos
   ============================================================================ */

.form-input-sm,
.form-control-sm,
.form-input.sm,
.form-control.sm {
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  border-width: 1px;
  border-radius: 10px;
}
select.form-input-sm,
select.form-control-sm,
select.form-input.sm,
select.form-control.sm {
  padding-right: 36px;
  background-size: 14px;
}


/* ============================================================================
   11 — ACESSIBILIDADE (WCAG 2.1 AA)
   @media prefers-reduced-motion + focus-visible em inputs
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .btn-primary:hover,
  .card:hover,
  .stat-card:hover,
  .kpi-card:hover {
    transform: none !important;
  }
}

.form-input:focus-visible,
.form-control:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}


/* ============================================================================
   12 — GLASSMORPHISM DARK POLIDO
   Cards dark mais visíveis em 4K · inner highlight tipo vidro real
   ============================================================================ */

[data-theme="dark"] .card {
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .card:hover {
  background: rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .stat-card {
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .stat-card:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .kpi-card {
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}


/* ============================================================================
   FIM — Elite v2 Refined
   Total: ~350 linhas · 12 refinamentos · 0 breaking changes
   ============================================================================ */


/* ============================================================================
   OPÇÃO B — WARM ORANGE (CTA secundário para ações positivas)
   
   Aplica em 4 pontos estratégicos (12 regras totais, do resumo):
   · .btn-action-warm          → CTAs de criação (Registrar, Novo, Emitir…)
   · .period-btn.active        → tab ativa de seletores temporais/filtros
   · --chart-series-2          → série secundária em gráficos (vs navy dominante)
   · .badge-count.alert        → counter laranja em nav items com pendências
   
   NÃO APLICA EM (permanece azul/semântico):
   · Botões de salvar/confirmar
   · Sidebar nav active
   · Abas de navegação estrutural (tabs de página)
   · Links, focus rings gerais, eyebrow
   · Badges warning/alerta (amber, permanece como semântica)
   · Trend indicators (▲▼ verde/vermelho semântico)
   ============================================================================ */

:root {
  /* Escala canônica --warm-* (light mode) */
  --warm-primary: #ea580c;
  --warm-primary-hover: #f97316;
  --warm-primary-pressed: #c2410c;
  --warm-primary-soft: rgba(234, 88, 12, 0.12);
  --warm-tint-soft: #ffedd5;
  --warm-tint-subtle: #fff7ed;

  /* Chart series — data-viz tokens para consistência entre gráficos */
  --chart-series-1: #0b1733;
  --chart-series-2: var(--warm-primary);
  --chart-series-3: var(--accent-success);
  --chart-series-4: var(--accent-purple);
}

[data-theme="dark"] {
  --warm-primary: #f97316;
  --warm-primary-hover: #fb923c;
  --warm-primary-pressed: #ea580c;
  --warm-primary-soft: rgba(249, 115, 22, 0.18);
  --warm-tint-soft: rgba(249, 115, 22, 0.14);
  --warm-tint-subtle: rgba(249, 115, 22, 0.06);

  --chart-series-1: #1e3a5f;
  --chart-series-2: var(--warm-primary);
}


/* --- 1. Botão CTA de criação (Registrar, Novo, Adicionar, Emitir) --- */
.btn-action-warm,
.btn.btn-action-warm,
.btn-primary.btn-action-warm {
  background: var(--warm-primary);
  border-color: var(--warm-primary);
  color: white;
  box-shadow: 0 1px 2px rgba(194, 65, 12, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn-action-warm:hover,
.btn.btn-action-warm:hover,
.btn-primary.btn-action-warm:hover {
  background: var(--warm-primary-hover);
  border-color: var(--warm-primary-hover);
}
.btn-action-warm:active,
.btn.btn-action-warm:active {
  background: var(--warm-primary-pressed);
  transform: translateY(0);
}
.btn-action-warm:focus-visible {
  outline: 2px solid var(--warm-primary);
  outline-offset: 2px;
}


/* --- 2. Period / filter selector — tab ativa --- */
.period-selector .period-btn.active,
.filter-tabs .filter-btn.active,
.btn-period.active,
.toggle-group .toggle-btn.active {
  background: var(--warm-primary);
  color: white;
  border-color: var(--warm-primary);
}
.period-selector .period-btn.active:hover,
.filter-tabs .filter-btn.active:hover {
  background: var(--warm-primary-hover);
  border-color: var(--warm-primary-hover);
}


/* --- 3. Sidebar / nav badge de pendência (counter laranja) --- */
.sidebar .nav-item .badge-count.alert,
.sidebar .badge-count.alert,
.nav-badge-alert {
  background: var(--warm-primary-soft);
  color: var(--warm-primary);
}
[data-theme="dark"] .sidebar .nav-item .badge-count.alert,
[data-theme="dark"] .sidebar .badge-count.alert,
[data-theme="dark"] .nav-badge-alert {
  color: #fdba74;
}


/* --- 4. Landing / onboarding hero CTA (opcional, páginas públicas) --- */
.btn-warm-hero {
  background: var(--warm-primary);
  color: white;
  border-color: var(--warm-primary);
  box-shadow: 0 2px 4px rgba(194, 65, 12, 0.18),
              0 1px 2px rgba(194, 65, 12, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn-warm-hero:hover {
  background: var(--warm-primary-hover);
  border-color: var(--warm-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}


/* ============================================================================
   FIM — Opção B Warm Orange
   Total geral: 12 refinamentos + warm orange · ~430 linhas · 0 breaking changes
   ============================================================================ */