/* ============================================================================
   BASEFLY — COMPONENTES BASE (etapa 2)
   Seção 5 do Design System. Carrega depois de styles.css e typography.css.

   Só aparência: nenhum seletor novo é exigido do HTML, nenhuma classe existente
   muda de nome. As regras abaixo vestem os componentes que já estão na tela.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   5.1 BOTÕES
   Altura 40 px padrão · 32 px compacto · 48 px destaque · raio 6 px · sem sombra.
   Foco com anel de 2 px em --blue-200 (seção 5.1) e contorno visível também
   para quem navega por teclado (seção 9).
   --------------------------------------------------------------------------- */
.btn{
  min-height:40px;
  padding:0 var(--s-4);
  border-radius:var(--r-sm);
  border:1px solid var(--n-200);
  background:var(--n-0);
  color:var(--n-600);
  box-shadow:none;                 /* seção 8: sem sombra em botão */
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{ border-color:var(--n-300); background:var(--n-25); }
.btn:active{ background:var(--n-100); }
.btn:focus-visible{ outline:2px solid var(--blue-200); outline-offset:2px; }
.btn:disabled,.btn[disabled]{
  background:var(--n-100); color:var(--n-500); border-color:var(--n-200); cursor:default;
}

/* compacto e destaque */
.btn-small{ min-height:32px; padding:0 var(--s-3); }
.btn-large{ min-height:48px; padding:0 var(--s-6); }

/* primário — ação principal da tela */
.btn-primary{
  background:var(--blue-500); color:var(--n-0); border-color:var(--blue-500);
}
.btn-primary:hover{ background:var(--blue-600); border-color:var(--blue-600); }
.btn-primary:active{ background:var(--blue-700); border-color:var(--blue-700); }
.btn-primary:disabled,.btn-primary[disabled]{
  background:var(--n-100); color:var(--n-500); border-color:var(--n-200);
}

/* secundário — ação alternativa */
.btn-secondary{
  background:transparent; color:var(--blue-500); border:1.5px solid var(--blue-500);
}
.btn-secondary:hover{ background:var(--blue-50); color:var(--blue-600); border-color:var(--blue-600); }

/* discreto — cancelar, voltar */
.btn-text,.btn-ghost{
  background:transparent; border-color:transparent; color:var(--n-600);
}
.btn-text:hover,.btn-ghost:hover{ background:var(--n-100); border-color:transparent; }

/* destrutivo */
.btn-danger{
  background:transparent; color:var(--danger-text); border:1.5px solid var(--danger);
}
.btn-danger:hover{ background:var(--danger-bg); border-color:var(--danger); }

/* conversão — Laranja Sinal, só em fluxo comercial e um por tela (seção 5.1).
   Não é aplicado a nenhum botão por padrão: é escolha de tela. */
.btn-conversao{
  background:var(--brand-signal); color:var(--brand-base); border-color:var(--brand-signal);
  font-weight:600;
}
.btn-conversao:hover{ background:var(--warning-text); color:var(--n-0); border-color:var(--warning-text); }

/* ---------------------------------------------------------------------------
   5.2 CAMPOS DE FORMULÁRIO
   Fundo branco · borda 1 px --n-200 · raio 6 px · altura 40 px.
   O foco engrossa a borda sem empurrar o layout: outline com deslocamento
   interno, em vez de border-width maior.
   --------------------------------------------------------------------------- */
.form-input,.form-select,select.form-input,textarea.form-input{
  min-height:40px;
  padding:10px var(--s-3);          /* seção 4: 10 px vertical, 12 px horizontal */
  background:var(--n-0);
  border:1px solid var(--n-200);
  border-radius:var(--r-sm);
  color:var(--n-900);
  box-shadow:none;                  /* seção 8: sem sombra em campo */
}
textarea.form-input{ min-height:80px; }
.form-input:hover,.form-select:hover{ border-color:var(--n-300); }
.form-input:focus,.form-select:focus,.form-input:focus-visible{
  outline:2px solid var(--blue-500);
  outline-offset:-2px;
  border-color:var(--blue-500);
}
.form-input::placeholder{ color:var(--n-500); }
.form-input:disabled,.form-select:disabled{
  background:var(--n-100); color:var(--n-500); border-color:var(--n-200);
}
.form-input.error,.form-input[aria-invalid="true"]{ border-color:var(--danger); }
.form-error,.field-error{ color:var(--danger-text); font-size:12px; margin-top:var(--s-1); }
.form-help,.field-help{ color:var(--n-500); font-size:12px; margin-top:var(--s-1); }

/* rótulo sempre acima do campo (seção 5.2) */
.form-label{ display:block; margin-bottom:var(--s-1); color:var(--n-900); }

/* ---------------------------------------------------------------------------
   5.3 TABELAS
   Cabeçalho escuro, linhas alternadas, sem borda vertical, número à direita
   em monoespaçada. É onde o CRM vive.
   --------------------------------------------------------------------------- */
table th{
  background:var(--brand-base);
  color:var(--on-dark);   /* cabeçalho escuro nos dois temas */
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  text-align:left;
  padding:var(--s-3) var(--s-3);
  border:0;
}
table td{
  height:44px;                      /* seção 5.3: linha de 44 px */
  padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--n-200);
  border-left:0; border-right:0;    /* sem bordas verticais */
  color:var(--n-900);
}
table tbody tr:nth-child(even) td{ background:var(--n-25); }
table tbody tr:nth-child(odd) td{ background:var(--n-0); }
table tbody tr:hover td{ background:var(--blue-50); }

/* linha selecionada: fundo azul suave + barra de 3 px à esquerda */
table tbody tr.selected td,table tbody tr[aria-selected="true"] td{ background:var(--blue-50); }
table tbody tr.selected td:first-child,table tbody tr[aria-selected="true"] td:first-child{
  box-shadow:inset 3px 0 0 0 var(--blue-500);
}

/* tabela compacta */
table.compact td{ height:36px; padding:var(--s-1) var(--s-3); }

/* ---------------------------------------------------------------------------
   5.4 CARTÕES
   Raio 8 px · espaço interno 20 px · borda 1 px · sombra de cartão.
   Cartão clicável ganha borda azul no hover — sem elevação animada (seção 5.4).
   --------------------------------------------------------------------------- */
.card,.stat-card,.analytics-card,.model-card,.material-card,.proposal-card,
.card-lead,.card-prospect{
  background:var(--n-0);
  border:1px solid var(--n-200);
  border-radius:var(--r-md);
  box-shadow:var(--sh-card);
}
.card,.stat-card,.analytics-card{ padding:20px; }

.card[onclick]:hover,.model-card:hover,.proposal-card:hover,
.card-lead:hover,.card-prospect:hover{
  border-color:var(--blue-300);
  box-shadow:var(--sh-card);       /* mesma sombra: nada de elevar no hover */
}

/* ---------------------------------------------------------------------------
   5.5 ETIQUETAS DE ESTADO
   Altura 22 px · raio 6 px · espaço interno 8 px.
   A cor nunca é o único indicador: o texto da etiqueta diz o estado (seção 8).
   --------------------------------------------------------------------------- */
.tag,.badge{
  display:inline-flex; align-items:center;
  height:22px; padding:0 var(--s-2);
  border-radius:var(--r-sm);
  background:var(--n-100); color:var(--n-600);
  border:0;
}
.tag-success,.tag-ativo,.tag-ganho,.badge-success{ background:var(--success-bg); color:var(--success-text); }
.tag-warning,.tag-pendente,.tag-andamento,.badge-warning{ background:var(--warning-bg); color:var(--warning-text); }
.tag-danger,.tag-perdido,.tag-erro,.badge-danger{ background:var(--danger-bg); color:var(--danger-text); }
.tag-neutro,.tag-rascunho,.badge-neutral{ background:var(--n-100); color:var(--n-600); }
.tag-info,.tag-destaque,.badge-info{ background:var(--blue-50); color:var(--blue-700); }

/* ---------------------------------------------------------------------------
   FOCO VISÍVEL — seção 9
   Todo elemento navegável por teclado precisa mostrar onde está o cursor.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.nav-item:focus-visible,
.filter-chip:focus-visible{
  outline:2px solid var(--blue-500);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* Sobre fundo escuro o anel azul primário some (3,4:1 contra o Azul Base):
   ali o foco usa o Azul Céu, como manda a seção 2.5. */
.sidebar a:focus-visible,
.sidebar button:focus-visible,
.sidebar .nav-item:focus-visible,
table th :focus-visible{
  outline-color:var(--brand-sky);
}