/* Identidade visual da instalação (body.tema-cliente), em todas as telas.
   Cores e fonte vêm de services/temas.py, injetadas no base.html.

   A cor primária (laranja) é clara demais para texto sobre branco: ela fica em
   barras, destaques e no carregamento; todo texto colorido usa a secundária
   (marinho). Topo e cabeçalho do relatório usam o tom escuro, onde o logo -
   feito para fundo escuro - aparece. O prefixo "html" garante que estas regras
   vençam as do style.css e do report.css. */

html body.tema-cliente { --surface-2: #f2f2f2; }
html body.tema-cliente * { font-family: inherit !important; }
html body.tema-cliente::before { display: none; }

/* --- Barra do topo: marinho com o logo --- */
html .tema-cliente .topbar { background: var(--brand-dark); border-bottom: none; }
html .tema-cliente .topbar img.logo { height: clamp(28px, 5vw, 38px); }
html .tema-cliente .topbar .brand { color: #ffffff; }
html .tema-cliente .topbar .btn.secondary { color: rgba(255, 255, 255, 0.82); border-color: rgba(255, 255, 255, 0.25); }
html .tema-cliente .topbar .btn.secondary:hover { color: #ffffff; border-color: #ffffff; }

/* --- Títulos e rótulos: caixa normal, marinho --- */
html .tema-cliente h2.section-title {
  color: var(--brand-secondary);
  font-size: 21px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.005em;
}
html .tema-cliente .form-group label {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* --- Links e botões --- */
html .tema-cliente a,
html .tema-cliente .post-card-link,
html .tema-cliente .ig-bio-link,
html .tema-cliente .flash.preview-flash { color: var(--brand-secondary); }

html .tema-cliente .btn:not(.secondary):not(.danger) { background: var(--brand-secondary); color: #ffffff; }
html .tema-cliente .btn:not(.secondary):not(.danger):hover { box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-secondary) 30%, transparent); }
html .tema-cliente .btn.secondary:hover { border-color: var(--brand-secondary); }
html .tema-cliente .btn.secondary.active,
html .tema-cliente .chart-toggle-btn.active,
html .tema-cliente .tab-radio-todos:checked ~ .tabs-nav label[for$="-todos"],
html .tema-cliente .tab-radio-seguidores:checked ~ .tabs-nav label[for$="-seguidores"],
html .tema-cliente .tab-radio-nao_seguidores:checked ~ .tabs-nav label[for$="-nao_seguidores"],
html .tema-cliente .tab-radio-reels:checked ~ .tabs-nav label[for$="-reels"],
html .tema-cliente .tab-radio-posts:checked ~ .tabs-nav label[for$="-posts"] {
  color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  background: color-mix(in srgb, var(--brand-secondary) 8%, transparent);
}

html .tema-cliente .form-group input:focus,
html .tema-cliente .form-group select:focus { border-color: var(--brand-secondary); background: var(--surface-1); }

/* --- Marcas da agência (asterisco e seta) não aparecem nesta instalação --- */
html .tema-cliente .icon-badge,
html .tema-cliente .deco-bg { display: none; }

/* Carregamento: anel laranja no lugar do logo da agência */
html .tema-cliente .loading-overlay .loading-spinner {
  -webkit-mask-image: none;
  mask-image: none;
  background: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--brand-primary) 20%, transparent);
  border-top-color: var(--brand-primary);
  animation-duration: 0.9s;
}

/* --- Cabeçalho do relatório: marinho profundo com o logo --- */
html .tema-cliente .report-header {
  background: var(--brand-dark);
  border: none;
  color: #ffffff;
}
html .tema-cliente .report-client-logo {
  grid-column: 1 / -1;
  height: 40px;
  width: auto;
  max-width: 70%;
  object-fit: contain;
  object-position: left center;
  justify-self: start;
  margin-bottom: 8px;
}
html .tema-cliente .report-header .ig-username,
html .tema-cliente .report-header .report-period-value { color: #ffffff; }
html .tema-cliente .report-header .report-kind,
html .tema-cliente .report-header .ig-name,
html .tema-cliente .report-header .report-period-note { color: rgba(255, 255, 255, 0.72); }
html .tema-cliente .report-header .cmp-key-anterior { background: rgba(255, 255, 255, 0.45); }

/* Sem animação de entrada por card, como no relatório */
html .tema-cliente .card,
html .tema-cliente .stat-tile .value { animation: none; }

/* --- Configurações: conexão e identidade lado a lado --- */
.config-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 20px; align-items: start; }
.config-secao .card { max-width: none !important; }
.conexao-status { margin: -4px 0 18px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.conexao-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.conexao-status.erro::before { background: var(--critical); }
.conexao-status.erro { color: var(--critical); }