/* =========================================================================
   Plataforma PVG — o app usa o tema PADRÃO do MudBlazor (com claro/escuro).
   Aqui ficam: a plaquinha do logo na barra, ajustes estruturais de tabela e a
   tela de login. As cores de conteúdo usam as variáveis do MudBlazor
   (--mud-palette-*) para acompanharem o dark mode automaticamente.
   ========================================================================= */

:root {
  --fonte-titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --raio: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* -------------------------------------- barra: plaquinha clara do logo -- */

.pvg-marca { display: inline-flex; align-items: center; text-decoration: none; }
.pvg-marca-logo {
  height: 38px;
  width: auto;
  display: block;
  background: #fff;
  border-radius: 6px;
  padding: 3px 8px;
}
.pvg-usuario-nome { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------- estrutura de tabela/indicadores (sem cor) -- */

.pvg-resumo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.pvg-resumo { padding: 12px 14px; }
.pvg-resumo-rotulo { color: var(--mud-palette-text-secondary); }

.pvg-num { text-align: right; }
.pvg-acao { text-align: right; white-space: nowrap; }
.pvg-col-empresa { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvg-col-comprador { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pvg-rateio {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mud-palette-text-secondary);
  background: var(--mud-palette-action-default-hover);
  border-radius: 4px;
  padding: 0 5px;
}
.pvg-atraso-alto { color: var(--mud-palette-error); font-weight: 600; }
.pvg-item-ativo { background: var(--mud-palette-action-default-hover) !important; }

/* Tabela larga rola dentro da própria caixa; a página nunca rola na horizontal.
   O min-width:0 deixa a área de conteúdo (flex) encolher em vez de ser empurrada. */
.mud-main-content { min-width: 0; }
.pvg-tabela { overflow-x: auto; max-width: 100%; }

/* ==========================================================================
   LOGIN — SSR estático, com componentes MudBlazor (acompanha o dark mode).
   Mantém a marca Peter (logo + foto da promotora).
   ========================================================================== */

.entrada {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--mud-palette-background);
}

.entrada__painel {
  background:
    linear-gradient(180deg, rgb(7 43 44 / 8%), rgb(7 43 44 / 28%)),
    url("../img/login-promotora.png") center / cover no-repeat;
}

.entrada__form-lado { display: grid; place-items: center; padding: 40px 24px; }

/* Formulário num cartão elevado, centralizado — não solto no branco. */
.entrada__cartao {
  width: 100%;
  max-width: 400px;
  padding: 44px 40px;
  border-radius: 14px;
}

/* Logo num badge claro: fica bom no tema claro e no escuro. */
.entrada__logo-badge { display: flex; justify-content: center; margin-bottom: 22px; }
.entrada__logo-badge img {
  height: 76px;
  width: auto;
  background: #fff;
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
}

.entrada__titulo { font-family: var(--fonte-titulo); font-weight: 600; letter-spacing: .01em; margin-bottom: 2px; }
.entrada__sub { margin-bottom: 28px; }
.entrada__rodape { margin-top: 26px; }

@media (max-width: 860px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada__painel { min-height: 180px; }
}

/* Fila de atendimento do RFV: cards responsivos. */
.pvg-fila-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* Card "oculto" da Agenda (não entrou hoje): faixa azul no topo para diferenciar. */
.pvg-card-oculto {
  border-top: 4px solid var(--mud-palette-info);
}

/* O calendário do date picker não deve encolher quando o input é estreito. */
.mud-picker-content {
  min-width: 290px;
}

/* Painel do gestor (RFV): duas colunas que empilham no mobile. */
.pvg-painel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

/* Gráficos de barra simples (RFV) — theme-aware via variáveis do MudBlazor. */
.pvg-bars { display: flex; flex-direction: column; gap: 8px; }
.pvg-bar { display: grid; grid-template-columns: 140px 1fr 52px; align-items: center; gap: 10px; font-size: 13px; }
.pvg-bar-label { color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvg-bar-track { background: var(--mud-palette-lines-default); border-radius: 6px; height: 14px; overflow: hidden; }
.pvg-bar-fill { height: 100%; background: var(--mud-palette-primary); border-radius: 6px; min-width: 2px; }
.pvg-bar-fill.ok { background: var(--mud-palette-success); }
.pvg-bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
/* Tendência semanal: % de recuperação com barra de fundo proporcional na própria célula */
.pvg-taxa { display: inline-block; min-width: 46px; padding: 1px 7px; border-radius: 6px; text-align: right; }
/* Mudança de grupo: números clicáveis (abrem a lista de quem subiu/desceu) */
.pvg-mov { cursor: pointer; padding: 4px 10px; border-radius: 8px; user-select: none; transition: background-color .12s; }
.pvg-mov:hover { background: var(--mud-palette-action-default-hover); }
.pvg-mov.ativo { background: var(--mud-palette-action-default-hover); }