/* Área da plataforma (/staff): reusa o shell do app (sidebar + topbar globais).
   Só estilos específicos do staff ficam aqui. */

/* Faixa de aviso dentro das telas do staff (ex.: troca de senha obrigatória). */
.staff-banner {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid color-mix(in srgb, var(--color-warning) 40%, transparent);
  background-color: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* Cabeçalho de uma seção com ação à direita (título + botão). */
.staff-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.staff-section-head .form-section__title {
  margin-bottom: 0;
}

/* ===== PAINEL DA PLATAFORMA (dashboard) ===== */

/* Dois blocos lado a lado (distribuição de planos + backups), 1 coluna no
   mobile. */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Pilha vertical de cards com respiro padrão entre eles (cards não têm margem
   própria). Usada em telas /staff com vários cards empilhados. */
.staff-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Distribuição de planos: cada plano numa linha com barra proporcional ao
   total de contas (rótulo | barra | contagem). */
.staff-dist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.staff-dist__total {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.staff-dist__row {
  display: grid;
  grid-template-columns: 5rem 1fr 2.5rem;
  align-items: center;
  gap: var(--space-3);
}

.staff-dist__label {
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Trilho/preenchimento compartilhados com o medidor de uso da assinatura
   (.sub-meter, 50_subscription.css): visual idêntico, fonte única aqui. */
.staff-dist__track,
.sub-meter__track {
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-2);
  overflow: hidden;
}

.staff-dist__fill,
.sub-meter__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}

.staff-dist__fill--neutral { background-color: var(--color-status-neutral); }
.staff-dist__fill--accent  { background-color: var(--color-accent); }
.staff-dist__fill--success { background-color: var(--color-success); }

.staff-dist__count {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Lista de backups: rótulo à esquerda, status/tamanho à direita. */
.staff-backups__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.staff-backups__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.staff-backups__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.staff-backups__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.staff-backups__size {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Controles administrativos da conta (definir plano, estender/voltar trial):
   separados do conteúdo por um divisor, campos em largura natural. */
.staff-controls {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Rótulo da seção de controles (ex.: "Gerenciar plano"). */
.staff-controls__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

/* Dois painéis de ação (plano pago | trial) lado a lado, alturas iguais pela
   grade; empilham no mobile. */
.staff-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 700px) {
  .staff-plan-grid {
    grid-template-columns: 1fr;
  }
}

/* Painel: superfície interna sutil, campos/botões empilhados em largura cheia. */
/* Grupos sem caixa cinza: agrupados por rótulo-eyebrow e separados por um filete
   vertical no desktop (elevação por clareza, não por bloco preenchido). */
.staff-plan-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 701px) {
  .staff-plan-panel + .staff-plan-panel {
    padding-left: var(--space-5);
    border-left: var(--border-width) solid var(--color-border);
  }
}

.staff-plan-panel__title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

/* Concessão de acesso vitalício: callout de destaque em tom accent (ação
   especial e permanente, separada das ações de rotina). Texto à esquerda,
   botão à direita; empilha no mobile. */
.staff-plan-lifetime {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-accent-muted);
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
}

.staff-plan-lifetime__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.staff-plan-lifetime__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.staff-plan-lifetime__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.staff-plan-lifetime .btn {
  flex-shrink: 0;
}

.staff-plan-panel__hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* O form interno empilha campos + botão com o mesmo respiro do painel. */
.staff-plan-panel form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.staff-plan-panel .field {
  margin: 0;
}

/* Filtros da auditoria: conta/operador inline (largura natural, não full-width)
   + botão, alinhados com o seletor de mês à direita. */
.audit-filters {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-left: auto;
}

/* Todos os controles do filtro com a MESMA altura e fonte (selects, seletor de
   data e botão Filtrar ficavam cada um de um tamanho). */
.audit-filters select,
.audit-filters .month-picker__trigger,
.audit-filters .btn {
  height: 2.5rem;
  font-size: var(--text-sm);
  padding-block: 0;
}

/* Os dois selects (conta/operador) com a mesma largura. */
.audit-filters select {
  width: 11rem;
}

/* ===== RELATÓRIOS (/staff/relatorios) ===== */

/* Gráfico de barras verticais (CSS puro). Cada coluna: valor em cima, barra no
   meio (escala pelo maior da série), rótulo do mês embaixo. Rola na horizontal
   se a largura apertar. */
.report-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  overflow-x: auto;
}

.report-col {
  flex: 1 0 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.report-col__value {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Trilho de altura fixa; a barra cresce a partir da base. */
.report-col__track {
  width: 100%;
  height: 9rem;
  display: flex;
  align-items: flex-end;
}

.report-col__bar {
  width: 100%;
  min-height: 2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background-color: var(--color-accent);
  transition: height 0.3s var(--ease-out);
}

.report-col__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: capitalize;
}

/* Estatísticas de conversão: blocos em linha, quebram no mobile. */
.report-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.report-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.report-stat__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

.report-stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/*
 * PRECISA DE ATENÇÃO
 * Lista de itens acionáveis no topo do painel (backups, pagamentos, trials…).
 * Marcador colorido por severidade; ação à direita.
 */
/* Separa da faixa de KPI de baixo (.card não tem margem; a faixa de cima já
   tem margin-bottom próprio). */
.attention {
  margin-bottom: var(--space-5);
}

.attention__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  background-color: var(--color-status-danger-soft);
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* Marcador (dot) à esquerda de cada linha; a linha em si é uma .divided-list__item. */
.attention__dot {
  flex: 0 0 auto;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--color-text-muted);
}

.attention__item--danger .attention__dot { background-color: var(--color-danger); }
.attention__item--warning .attention__dot { background-color: var(--color-warning); }
.attention__item--info .attention__dot { background-color: var(--color-accent); }

.attention__body {
  flex: 1 1 auto;
  min-width: 0;
}

.attention__title {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.attention__detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.attention__action {
  flex: 0 0 auto;
}

/*
 * FEED: atividade recente da plataforma (cadastros, pagamentos, suspensões).
 * Timeline compacta com ícone tonalizado por tipo de evento.
 */
.feed__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-2);
  color: var(--color-text-muted);
}

.feed__icon svg {
  width: 1rem;
  height: 1rem;
}

.feed__icon--success { background-color: var(--color-success-soft); color: var(--color-success); }
.feed__icon--accent { background-color: var(--color-accent-soft); color: var(--color-accent); }
.feed__icon--danger { background-color: var(--color-status-danger-soft); color: var(--color-danger); }

.feed__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.feed__text {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

a.feed__text:hover {
  color: var(--color-accent);
}

.feed__time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/*
 * SERVIÇOS: diretório de infraestrutura/integrações (só dono do sistema).
 * Nome + selo de configuração + propósito à esquerda; link do painel à direita.
 */
.services__body {
  flex: 1 1 auto;
  min-width: 0;
}

.services__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.services__purpose {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.services__action {
  flex: 0 0 auto;
}

/* Teste de e-mails: cada template numa .divided-list__item (rótulo + botão
   Enviar). O rótulo flexiona para empurrar o botão à direita. */
.email-test__label {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  color: var(--color-text);
}