/*
 * Identidade visual Enoma e estilos do techleap.
 *
 * Este arquivo é a ÚNICA fonte de estilo customizado do sistema. O manifesto
 * proíbe duplicar CSS ou lógica visual entre o base.html e os templates filhos
 * (escopo seção 1), então nenhum template deve conter blocos <style> nem estilo
 * inline: qualquer regra nova entra aqui.
 */

:root {
  --enoma-blue: #1e2772;
  --enoma-red: #f04155;
  --enoma-dark: #464754;
  --enoma-gray: #7a7a7a;

  --enoma-blue-soft: rgba(30, 39, 114, 0.08);
  --enoma-red-soft: rgba(240, 65, 85, 0.1);

  --surface: #ffffff;
  --surface-muted: #f5f6fa;
  --border-subtle: #e3e5ee;

  --positive: #1b7f5c;
  --negative: var(--enoma-red);
  /* Âmbar escuro, não amarelo puro: amarelo claro sobre --surface não alcança
     contraste AA, e este token existe justamente para ser lido em número pequeno. */
  --attention: #b8860b;
}

body {
  background-color: var(--surface-muted);
  color: var(--enoma-dark);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Tipografia e utilitários de cor ---------- */

.text-enoma-blue {
  color: var(--enoma-blue);
}

.text-enoma-red {
  color: var(--enoma-red);
}

.text-muted-enoma {
  color: var(--enoma-gray);
}

.text-positive {
  color: var(--positive);
}

.text-negative {
  color: var(--negative);
}

.text-attention {
  color: var(--attention);
}

/* Números de dinheiro alinhados pela vírgula: com dígitos tabulares a coluna
   fica legível de cima a baixo, que é como o time confere gasto contra budget. */
.numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ---------- Navegação ---------- */

.techleap-navbar {
  background-color: var(--enoma-blue);
}

.techleap-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}

.techleap-navbar .nav-link {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}

.techleap-navbar .nav-link:hover,
.techleap-navbar .nav-link.active {
  color: #fff;
}

.techleap-navbar .nav-link.active {
  border-bottom: 2px solid var(--enoma-red);
}

.techleap-role-badge {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Abas do dashboard ---------- */

/*
 * Mesmo tratamento do item ativo da navbar — sublinhado vermelho sobre azul —
 * para que as duas navegações do sistema leiam como um sistema só. O nav-tabs
 * cru do Bootstrap traria a moldura arredondada cinza padrão, que destoa do
 * resto da identidade.
 */
.techleap-tabs {
  border-bottom: 1px solid var(--border-subtle);
  gap: 0.25rem;
}

.techleap-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--enoma-gray);
  font-weight: 500;
  padding: 0.5rem 0.85rem;
}

.techleap-tabs .nav-link:hover {
  border-bottom-color: var(--border-subtle);
  color: var(--enoma-dark);
  isolation: auto;
}

.techleap-tabs .nav-link.active {
  background: transparent;
  border-bottom-color: var(--enoma-red);
  color: var(--enoma-blue);
  font-weight: 600;
}

/* A aba nasce colada no topo do cartão que a segue. */
.tab-content > .tab-pane {
  padding-top: 1rem;
}

/* ---------- Toggle de dois estados ---------- */

/*
 * Alternância entre dois recortes da mesma tabela — carteira e período.
 *
 * O controle é o `form-switch` do Bootstrap, não um componente próprio: ele já
 * traz o trilho, o botão que desliza, o foco acessível e o `role="switch"` que
 * o leitor de tela anuncia. Daqui sai só o que o Bootstrap não tem opinião
 * sobre — a cor da marca e os dois rótulos ao lado.
 *
 * Os rótulos ficam fora do switch, um de cada lado, porque um switch sozinho
 * comunica ligado/desligado, e aqui não há estado "desligado": são dois
 * recortes de igual valor, e o usuário precisa ler os dois para escolher.
 */
.techleap-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Sem rótulo dentro do form-check, o recuo que o Bootstrap reserva para ele
   viraria um buraco antes do trilho. */
.techleap-toggle .form-check {
  min-height: auto;
  margin-bottom: 0;
  padding-left: 0;
}

.techleap-toggle .form-check-input {
  width: 2.25em;
  height: 1.25em;
  margin-top: 0;
  margin-left: 0;
  cursor: pointer;
}

/* O azul padrão do Bootstrap (#0d6efd) é o único ponto em que o componente
   destoa da identidade — o resto do desenho fica como veio. */
.techleap-toggle .form-check-input:checked {
  background-color: var(--enoma-blue);
  border-color: var(--enoma-blue);
}

.techleap-toggle .form-check-input:focus {
  border-color: var(--enoma-blue);
  box-shadow: 0 0 0 0.25rem var(--enoma-blue-soft);
}

.techleap-toggle-label {
  color: var(--enoma-gray);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

/* O lado escolhido ganha peso e cor: a posição do botão diz qual está ativo,
   mas depender só dela obrigaria a comparar duas pontas do controle a cada
   olhada. */
.techleap-toggle-label.is-active {
  color: var(--enoma-blue);
  font-weight: 600;
}

/*
 * Linha de aviso de backfill pendente: fundo neutro para se ler como anotação
 * da linha acima, e não como mais uma conta na tabela.
 */
.techleap-media-warning-row > td {
  background: var(--surface-muted);
  border-top: none;
  padding-top: 0;
}

/* ---------- Cartões e superfícies ---------- */

.techleap-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(70, 71, 84, 0.04);
}

.techleap-page-title {
  color: var(--enoma-blue);
  font-weight: 700;
}

/* ---------- Barra de estado da sincronização ---------- */

.techleap-freshness {
  font-size: 0.875rem;
  color: var(--enoma-gray);
}

.techleap-freshness strong {
  color: var(--enoma-dark);
}

/* ---------- Tabela do dashboard ---------- */

.techleap-table {
  background: var(--surface);
  margin-bottom: 0;
}

.techleap-table > thead th {
  background-color: var(--enoma-blue);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  border-bottom: none;
  white-space: nowrap;
}

/* Coluna do botão de expandir. A largura mora aqui, e não num `style=` no <th>:
   o manifesto proíbe estilo inline no template, e as três tabelas da página
   precisam da mesma medida para que a coluna de conta comece alinhada entre elas. */
.techleap-table > thead th.techleap-col-expand {
  width: 2.5rem;
}

.techleap-table > tbody td {
  vertical-align: middle;
  border-color: var(--border-subtle);
}

.techleap-table tbody tr.techleap-row:hover {
  background-color: var(--enoma-blue-soft);
}

.techleap-account-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 0.35rem;
  background: var(--surface-muted);
}

/* Placeholder com a inicial da conta, para quando não há logotipo no Cloudinary. */
.techleap-account-initial {
  width: 34px;
  height: 34px;
  border-radius: 0.35rem;
  background: var(--enoma-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.techleap-account-name {
  font-weight: 600;
  color: var(--enoma-dark);
}

/* Nome da conta como link para o Gerenciador de Anúncios: herda a cor e só se
   revela no hover. Sublinhado permanente numa coluna inteira de nomes viraria
   ruído sobre o dado, que é o que a tela existe para mostrar. */
.techleap-account-link {
  color: inherit;
  text-decoration: none;
}

.techleap-account-link:hover,
.techleap-account-link:focus-visible {
  color: var(--enoma-blue);
  text-decoration: underline;
}

.techleap-account-meta {
  font-size: 0.75rem;
  color: var(--enoma-gray);
}

/*
 * O Bootstrap 5.3 pinta a cor de cada célula em `.table>:not(caption)>*>*`,
 * cuja especificidade (0,1,1) vence a das utilitárias de cor (0,1,0). Aplicada
 * direto num <td>, a classe era simplesmente ignorada: o código de cor de "%
 * do planejado" e de "Desvio" nunca chegou à tela, e o cinza padrão passava por
 * "tudo dentro da faixa". Estas regras existem só para ganhar em especificidade
 * — não simplifique o seletor sem conferir na tela que o <td> continua colorindo.
 */
.techleap-table > tbody > tr > td.text-positive {
  color: var(--positive);
}

.techleap-table > tbody > tr > td.text-negative {
  color: var(--negative);
}

.techleap-table > tbody > tr > td.text-attention {
  color: var(--attention);
}

.techleap-table > tbody > tr > td.text-muted-enoma,
.techleap-table > tbody > tr > td.techleap-account-meta {
  color: var(--enoma-gray);
}

/* Barra de consumo do orçamento embaixo do percentual. */
.techleap-progress {
  height: 4px;
  background-color: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.25rem;
}

.techleap-progress-bar {
  height: 100%;
  background-color: var(--enoma-blue);
}

.techleap-progress-bar.is-over {
  background-color: var(--enoma-red);
}

/* ---------- Acordeão de campanhas por objetivo ---------- */

/* Sem padding nem borda: com o acordeão fechado a linha precisa ocupar zero
   pixel, senão sobra uma faixa vazia entre cada conta da tabela. */
.techleap-detail-row > td {
  background-color: var(--surface-muted);
  padding: 0;
  border-width: 0;
}

.techleap-detail-inner {
  padding: 1rem 1.25rem;
}

.techleap-objective-table {
  font-size: 0.85rem;
  margin-bottom: 0;
}

.techleap-objective-table th {
  color: var(--enoma-gray);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}

.techleap-expand-btn {
  border: none;
  background: transparent;
  color: var(--enoma-gray);
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
}

.techleap-expand-btn:hover {
  background-color: var(--enoma-blue-soft);
  color: var(--enoma-blue);
}

.techleap-expand-btn .techleap-caret {
  display: inline-block;
  transition: transform 0.15s ease-in-out;
}

.techleap-expand-btn[aria-expanded="true"] .techleap-caret {
  transform: rotate(90deg);
}

/* ---------- Autenticação ---------- */

.techleap-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--enoma-blue) 0%, #151b52 100%);
  padding: 1.5rem;
}

.techleap-auth-card {
  width: 100%;
  max-width: 25rem;
  background: var(--surface);
  border-radius: 1rem;
  padding: 2.25rem;
  box-shadow: 0 1.25rem 2.5rem rgba(21, 27, 82, 0.28);
}

.techleap-auth-brand {
  color: var(--enoma-blue);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}

.techleap-auth-brand span {
  color: var(--enoma-red);
}

/* Espaçamento entre dígitos para o código de MFA ficar conferível de bate-pronto. */
.techleap-code-input {
  letter-spacing: 0.6em;
  font-size: 1.5rem;
  font-weight: 600;
  padding-left: 0.6em;
}

/* ---------- Botões ---------- */

.btn-enoma {
  background-color: var(--enoma-blue);
  border-color: var(--enoma-blue);
  color: #fff;
  font-weight: 500;
}

.btn-enoma:hover,
.btn-enoma:focus {
  background-color: #182060;
  border-color: #182060;
  color: #fff;
}

.btn-enoma-outline {
  border-color: var(--enoma-blue);
  color: var(--enoma-blue);
  font-weight: 500;
}

.btn-enoma-outline:hover {
  background-color: var(--enoma-blue);
  color: #fff;
}

.btn-enoma-red {
  background-color: var(--enoma-red);
  border-color: var(--enoma-red);
  color: #fff;
}

.btn-enoma-red:hover {
  background-color: #d5344a;
  border-color: #d5344a;
  color: #fff;
}

/* ---------- Estado vazio ---------- */

.techleap-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--enoma-gray);
}

.techleap-empty-title {
  color: var(--enoma-dark);
  font-weight: 600;
}

/* ---------- Foco acessível ---------- */

.form-control:focus,
.form-select:focus,
.btn:focus {
  border-color: var(--enoma-blue);
  box-shadow: 0 0 0 0.2rem rgba(30, 39, 114, 0.18);
}