/* ============================================================
   ERP/CRM Musical — Design System "Crachá de Palco"

   3ª identidade visual deste arquivo. A 1ª (Dark/Neon, violeta/rosa,
   gradientes, glows) foi trocada pela 2ª ("Carvão & Dourado") a pedido
   do cliente, que achava a primeira "gerada por IA" pra um software B2B
   sério. Esta 3ª parte de uma referência concreta em vez de um gosto
   genérico de "dark mode": crachá de acesso de bastidor de turnê —
   backstage pass, cue sheet de palco, luz âmbar de tungstênio — o
   vocabulário visual do próprio negócio (gestão de turnê ao vivo), não
   um template de dashboard qualquer. Aprovado via protótipo antes de
   entrar aqui.

   Mesma técnica das duas rodadas anteriores: --violet/--pink continuam
   existindo como NOMES de variável (evita reescrever toda referência no
   arquivo) mas agora resolvem pra âmbar/âmbar-profundo, não mais dourado
   nem neon. Só os poucos pontos com rgba()/hex hardcoded (o template de
   PDF, seção 26, e os fallbacks do gráfico do Dashboard) precisaram de
   ajuste manual — o resto cascateia sozinho.
   ============================================================ */

/* -------------------- 1. Variáveis globais -------------------- */
:root {
  /* Cores base — preto quente ("palco às escuras"), não um cinza neutro */
  --bg-base: #0b0a08;
  --bg-card: #16130f;
  --bg-card-hover: #1c1811;
  --bg-elevated: #221d15;
  --bg-input: #0e0c09;

  /* Cor de destaque única — âmbar de luz de palco (tungstênio), no lugar
     do dourado apagado anterior. --pink é o tom profundo/hover da mesma
     família, não uma segunda cor neon. */
  --violet: #e8a33d;
  --violet-light: #f0bc6b;
  --violet-dim: #e8a33d26;
  --pink: #b5721f;
  --pink-light: #f0bc6b;
  --pink-dim: #b5721f26;

  /* Texto — quente, não neutro clínico */
  --text-primary: #f1ebdc;
  --text-secondary: #a89c83;
  --text-muted: #6d6455;

  /* Bordas */
  --border: rgba(241, 235, 220, 0.09);
  --border-strong: rgba(241, 235, 220, 0.18);

  /* Estados — mesmos papéis semânticos de antes (sucesso/aviso/perigo/
     info), só reafinados pra a mesma família quente: verde-oliva em vez
     de verde-bootstrap, vermelho-gel-de-palco em vez de vermelho frio,
     azul "luz de casa" (house light) em vez de azul saturado genérico. */
  --success: #83a25e;
  --success-dim: #83a25e1f;
  --warning: #d69a45;
  --warning-dim: #d69a451f;
  --danger: #d2483c;
  --danger-dim: #d2483c1f;
  --info: #5c93ad;
  --info-dim: #5c93ad1f;

  /* Gradientes e sombras */
  --gradient-neon: linear-gradient(135deg, var(--violet) 0%, var(--pink) 100%);
  --shadow-neon: 0 8px 22px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* Raios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* Tipografia — 3 papéis, não 1 família genérica pra tudo:
     display (wordmark, títulos de view) / corpo (texto, formulários,
     tabelas) / mono (datas, valores, badges — a "planilha de cena"). */
  --font-main: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Anton", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Transições */
  --transition-fast: all 0.15s ease;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Dimensões de layout */
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 76px;
  --bottom-nav-height: 64px;
  --navbar-height: 68px;

  color-scheme: dark;
}

/* -------------------- 2. Reset -------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-main);
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-primary);
}

ul {
  list-style: none;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--violet);
}

/* -------------------- 3. Utilitários -------------------- */
.is-hidden {
  display: none !important;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.gap-xs { gap: 6px; }
.gap-sm { gap: 10px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-violet { color: var(--violet-light); }

.w-full { width: 100%; }

.grid {
  display: grid;
  gap: 20px;
}

/* Mobile-first: base = 1 coluna; ver seção 17 para os breakpoints que
   expandem para 2/4 colunas em telas maiores. */
.grid-kpis {
  grid-template-columns: 1fr;
}

.grid-2 {
  grid-template-columns: 1fr;
}

.mt-sm { margin-top: 10px; }
.mt-md { margin-top: 20px; }
.mb-sm { margin-bottom: 10px; }
.mb-md { margin-bottom: 20px; }

/* -------------------- 4. Login / Auth screen -------------------- */
/* O elemento de assinatura do redesign "Crachá de Palco" (ver seção 1):
   a tela de login vira um crachá de acesso de bastidor de turnê —
   cartão levemente girado, furo de cordão (grommet), código de barras
   decorativo, sobre um fundo de "palco às escuras" com vinheta âmbar
   sutil. É o único elemento CLARO/físico do app inteiro — todo o resto
   do sistema segue escuro e disciplinado, na mesma paleta (seção 1);
   este é o único "acessório" da coleção, de propósito. Escopado dentro
   de .auth-screen — nenhuma variável global é redefinida aqui. */
.auth-screen {
  --auth-bg: var(--bg-base);
  --auth-showcase-bg: #100d09;
  /* Crachá invertido (aprovado a partir da proposta visual): era papel
     claro com tinta escura -- --auth-card-bg e --auth-card-ink trocam de
     lugar (a tinta clara é literalmente o antigo bg do papel), e
     --auth-card-ink-soft vira --text-secondary (mesmo tom muted já usado
     no resto do app escuro). Como quase todo o cartão já era construído
     em cima desses 3 tokens, a troca cascateia sozinha -- só os pontos
     com hex/rgba() hardcoded (gradiente, furo do cordão, bordas com
     rgba(33,28,22,...)) precisaram de ajuste manual, marcados abaixo. */
  --auth-card-bg: #1c1812;
  --auth-card-ink: #ece3cd;
  --auth-card-ink-soft: #a89c83;
  --auth-border: rgba(241, 235, 220, 0.09);
  --auth-border-strong: rgba(241, 235, 220, 0.18);
  --auth-text: var(--text-primary);
  --auth-text-secondary: var(--text-secondary);
  --auth-text-muted: var(--text-muted);
  --auth-accent: var(--violet);
  --auth-danger: var(--danger);

  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--auth-bg);
  color: var(--auth-text);
}

/* Painel de identidade — some no mobile (breakpoint no fim da seção).
   Vinheta âmbar sutil (luz de palco caindo de cima) no lugar do
   pontilhado neutro anterior. */
.auth-showcase {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  padding: 64px;
  background-color: var(--auth-showcase-bg);
  border-right: 1px solid var(--auth-border);
  overflow: hidden;
}

.auth-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 720px 620px at 14% 12%, var(--violet-dim), transparent 62%);
  pointer-events: none;
}

.auth-showcase-inner {
  position: relative;
  max-width: 400px;
}

.auth-showcase-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--auth-accent);
  border: 1px solid rgba(232, 163, 61, 0.4);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 28px;
}

.auth-showcase-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--auth-accent);
  box-shadow: 0 0 8px var(--auth-accent);
}

/* Assinatura "cill /" -- parte do lockup da marca (Proposta 2, aprovada),
   não repete o texto do kicker acima ("Cill Automação"): o kicker é a
   ficha técnica do estúdio, isto aqui é o rótulo que amarra o wordmark
   grande logo abaixo. */
.auth-showcase-signature {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--auth-accent);
  margin-bottom: 6px;
}

.auth-showcase-title {
  position: relative;
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  text-transform: none;
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

.auth-showcase-title .accent {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, var(--violet-light) 0%, var(--violet) 60%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Wordmark real (icons/backstagelogo.png), substituindo o lockup em texto
   acima -- largura fluida via clamp(), altura automática preservando a
   proporção do PNG (531x165), mesmo espaçamento que o título tinha antes. */
.auth-showcase-logo {
  position: relative;
  display: block;
  width: clamp(230px, 24vw, 380px);
  height: auto;
  margin: 4px 0 22px;
}

.auth-showcase-text {
  position: relative;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--auth-text-secondary);
  max-width: 320px;
}

.auth-showcase-footer {
  position: relative;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px dashed var(--auth-border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auth-text-muted);
}

/* Código de barras decorativo — mesmo motivo do crachá real: um detalhe
   de objeto físico, não um enfeite genérico. */
.auth-showcase-footer::before {
  content: "";
  display: block;
  height: 20px;
  width: 190px;
  margin-bottom: 14px;
  opacity: 0.55;
  background-image: repeating-linear-gradient(
    90deg,
    var(--auth-text-muted) 0px, var(--auth-text-muted) 2px,
    transparent 2px, transparent 5px,
    var(--auth-text-muted) 5px, var(--auth-text-muted) 8px,
    transparent 8px, transparent 11px,
    var(--auth-text-muted) 11px, var(--auth-text-muted) 12px,
    transparent 12px, transparent 16px
  );
}

/* Painel do formulário */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* O "laminado" em si — crachá escuro sobre o palco escuro, tinta clara
   por cima (proposta de cores invertidas, aprovada). Gradiente e sombra
   interna clareados pra ainda ler como um objeto físico com volume, não
   uma silhueta plana se perdendo no fundo da página.

   Entrada animada (aprovada): o cartão cai como se fosse clipado no
   cordão agora, balançando feito pêndulo até assentar -- calculado
   quadro a quadro por playAuthCardIntro() (js/auth.js), disparado só
   quando a tela de login É REALMENTE mostrada (via handleLogout() em
   app.js, não em todo carregamento de página -- ver comentário lá).
   transform-origin fica ACIMA do próprio cartão (não no centro dele),
   pra girar em torno do ponto onde o cordão prende, não do meio do
   cartão -- é isso que faz o balanço ler como um objeto pendurado de
   verdade. Estado inicial (opacity:0, ainda sem cair) fica cravado no
   CSS, não esperando o JS -- garante que nunca há um "pisca visível
   depois começa a cair", e se o JS falhar por qualquer motivo o pior
   caso é o cartão ficar invisível (nunca preso bloqueando clique: a
   classe is-blocking só existe enquanto o JS a mantém). */
.auth-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg, var(--auth-card-bg) 0%, #100d09 100%);
  color: var(--auth-card-ink);
  border: none;
  border-radius: 20px;
  padding: 44px 34px 30px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(240, 188, 107, 0.1), 0 2px 0 rgba(255, 255, 255, 0.06) inset;
  opacity: 0;
  transform: translateY(-300px) rotate(-1deg);
  transform-origin: 50% -64px;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  /* playAuthCardIntro() também detecta isso e pula a animação -- este
     bloco é só a segunda camada de segurança, cravada no CSS, caso o JS
     demore a rodar ou falhe: ninguém com essa preferência de sistema
     fica olhando pra um cartão invisível esperando. */
  .auth-card {
    opacity: 1;
    transform: rotate(-1deg);
  }
}

/* Cordão -- elemento próprio (não pseudo-elemento) porque é filho do
   próprio .auth-card: herda a MESMA transformação do cartão (o
   transform-origin acima do cartão vale pros dois juntos), então balança
   junto sem precisar de nenhuma lógica de JS separada pra ele. */
.auth-card-lanyard {
  position: absolute;
  top: -64px;
  left: 50%;
  width: 2px;
  height: 56px;
  margin-left: -1px;
  background: linear-gradient(to bottom, rgba(240, 188, 107, 0.04), rgba(240, 188, 107, 0.3));
  pointer-events: none;
}

/* Furo de cordão (grommet) — o detalhe que faz o cartão ler como um
   objeto físico, não uma div com border-radius. */
.auth-card::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--auth-showcase-bg);
  /* Anel âmbar em vez do antigo tom de papel -- num cartão escuro sobre
     página escura, uma borda escura-sobre-escura não leria como um furo
     de verdade; o anel âmbar mantém o "objeto físico" legível. */
  border: 3px solid rgba(240, 188, 107, 0.35);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Conteúdo do cartão (tudo que já existia -- ver auth-card-content no
   HTML): some por baixo enquanto o cartão cai/balança e só acorda perto
   do fim, evitando mostrar texto/formulário girando rápido demais pra
   ler. Estado padrão é VISÍVEL (só some quando playAuthCardIntro()
   adiciona .is-hidden-for-intro) -- é a mesma filosofia "seguro por
   padrão" do cartão: se o JS nunca rodar, o conteúdo simplesmente já
   está lá, pronto pra uso. */
.auth-card-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-card-content.is-hidden-for-intro {
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}

/* Bloqueio real de interação (não só um aviso visual) enquanto a
   animação de entrada roda -- nenhum clique/toque chega em nenhum campo
   ou botão do formulário até o cartão assentar, em qualquer plataforma
   (mesmo pointer-events em toque ou clique). */
.auth-card.is-blocking .auth-card-content {
  pointer-events: none;
}

.auth-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}

/* Wordmark real (icons/backstagelogo.png), substituindo o par ícone+texto
   (regras logo abaixo, mantidas intocadas pro modo "Acesso administrativo"
   que ainda usa esse padrão). Altura fixa alinha com "Entrar" logo abaixo;
   largura segue a proporção do PNG (531x165) e nunca estoura o cartão. */
.auth-mark-logo {
  height: 40px;
  width: auto;
  max-width: 100%;
}

.auth-mark .logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--auth-card-ink);
  border: none;
  color: var(--auth-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  overflow: hidden;
}

/* Logo real (icons/android-chrome-192x192.png) preenchendo a caixa —
   substitui o ícone de nota musical genérico nos dois lugares que
   mostram a marca (login e sidebar). A própria imagem já é um badge
   redondo sobre fundo escuro, então cobrir a caixa inteira (em vez de
   "conter" com espaço sobrando) é o que faz ela se misturar com o
   fundo em vez de aparecer como um quadrado dentro de outro. */
.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.auth-mark span {
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--auth-card-ink);
}

.auth-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

.auth-subtitle {
  color: var(--auth-card-ink-soft);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 28px;
}

.auth-error {
  min-height: 20px;
  color: var(--auth-danger);
  font-size: 0.8rem;
  margin-top: 2px;
}

/* Campos do formulário — tinta sobre papel, sublinhado fino no lugar do
   preenchimento pesado usado no resto do app (overrides escopados,
   .form-control global continua intocado). */
.auth-screen .form-group label {
  color: var(--auth-card-ink-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-screen .form-control {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(236, 227, 205, 0.28);
  border-radius: 0;
  padding: 10px 2px;
  color: var(--auth-card-ink);
}

.auth-screen .form-control::placeholder {
  color: rgba(236, 227, 205, 0.4);
}

.auth-screen .form-control:focus {
  outline: none;
  border-bottom-color: var(--auth-card-ink);
  box-shadow: none;
}

.auth-screen .password-toggle {
  color: rgba(236, 227, 205, 0.5);
}

.auth-screen .password-toggle:hover {
  color: var(--auth-card-ink);
  background: none;
}

.auth-screen .auth-link-btn {
  color: var(--auth-card-ink-soft);
  font-size: 0.72rem;
}

.auth-screen .auth-link-btn:hover {
  color: var(--auth-accent);
  text-decoration: none;
}

/* Botão sólido de alto contraste — dourado/âmbar (cor já da marca) em vez
   da tinta clara "cascateada" pelos tokens, conforme a proposta visual
   aprovada: reforça a identidade em vez de virar um botão neutro. */
.auth-screen .btn-primary {
  background: linear-gradient(135deg, var(--violet-light) 0%, var(--violet) 100%);
  color: #1c1409;
  border-radius: 10px;
  box-shadow: none;
  font-family: var(--font-main);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-top: 6px;
  min-height: 46px;
}

.auth-screen .btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: none;
}

.auth-screen .btn-primary:active:not(:disabled) {
  transform: scale(0.97);
  filter: none;
}

.auth-screen .btn-primary:focus-visible {
  outline: 2px solid var(--auth-accent);
  outline-offset: 2px;
}

/* Divisor "ou" entre login por senha e Google — mesma tinta-sobre-papel
   do resto do cartão, sem introduzir uma cor nova. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--auth-card-ink-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(236, 227, 205, 0.18);
}

.auth-screen .btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: var(--auth-card-ink);
  border: 1.5px solid rgba(236, 227, 205, 0.28);
  border-radius: 10px;
  font-family: var(--font-main);
  font-size: 0.84rem;
  font-weight: 700;
  min-height: 46px;
  box-shadow: none;
}

.auth-screen .btn-google i {
  font-size: 0.95rem;
}

.auth-screen .btn-google:hover:not(:disabled) {
  background: rgba(236, 227, 205, 0.06);
  border-color: var(--auth-card-ink);
}

.auth-screen .btn-google:active:not(:disabled) {
  transform: scale(0.97);
}

.auth-screen .btn-google:focus-visible {
  outline: 2px solid var(--auth-accent);
  outline-offset: 2px;
}

/* Painel de vinculação: o e-mail do Google já tinha conta por senha —
   confirma a senha uma vez pra ligar as duas credenciais ao mesmo UID,
   em vez de criar um segundo perfil fantasma (ver auth.js). */
.auth-link-account-text {
  color: var(--auth-card-ink-soft);
  font-size: 0.82rem;
  line-height: 1.55;
  margin-bottom: 18px;
}

.auth-link-account-text strong {
  color: var(--auth-card-ink);
}

.auth-link-account-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.auth-link-account-actions .btn {
  flex: 1;
}

.auth-screen .auth-link-account .btn-secondary {
  background: transparent;
  color: var(--auth-card-ink-soft);
  border: 1.5px solid rgba(236, 227, 205, 0.28);
  box-shadow: none;
}

.auth-screen .auth-link-account .btn-secondary:hover:not(:disabled) {
  background: rgba(236, 227, 205, 0.06);
  color: var(--auth-card-ink);
}

/* Chamada pro Cadastro Livre, logo abaixo do botão do Google. */
.auth-signup-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--auth-card-ink-soft);
}

.auth-screen .auth-signup-cta .auth-link-btn {
  font-weight: 700;
}

/* Dica sob um campo do formulário de cadastro -- versão "tinta sobre
   papel" do .form-hint global (que usa --text-muted, um token do tema
   escuro do resto do app e ficaria com contraste ruim aqui dentro). */
.auth-form-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--auth-card-ink-soft);
}

/* Tela "Aguardando confirmação de e-mail". */
.auth-verify-email {
  text-align: center;
  padding: 8px 0 4px;
}

.auth-verify-email-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--auth-card-ink);
  color: var(--auth-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.auth-verify-email-text {
  color: var(--auth-card-ink-soft);
  font-size: 0.86rem;
  line-height: 1.6;
  margin-bottom: 18px;
}

.auth-verify-email-text strong {
  color: var(--auth-card-ink);
}

.auth-verify-email-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.auth-screen .auth-verify-email .btn-secondary {
  background: transparent;
  color: var(--auth-card-ink-soft);
  border: 1.5px solid rgba(236, 227, 205, 0.28);
  box-shadow: none;
}

.auth-screen .auth-verify-email .btn-secondary:hover:not(:disabled) {
  background: rgba(236, 227, 205, 0.06);
  color: var(--auth-card-ink);
}

/* Modo Mestre / Super Admin — alternância 100% cosmética (ver auth.js). */
.auth-footer {
  position: relative;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px dashed rgba(236, 227, 205, 0.22);
  text-align: center;
}

/* Segundo código de barras, agora em tinta sobre o papel — mesmo
   detalhe do rodapé do showcase. */
.auth-footer::before {
  content: "";
  display: block;
  height: 14px;
  width: 140px;
  margin: 0 auto 12px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(236, 227, 205, 0.35) 0px, rgba(236, 227, 205, 0.35) 2px,
    transparent 2px, transparent 5px,
    rgba(236, 227, 205, 0.35) 5px, rgba(236, 227, 205, 0.35) 7px,
    transparent 7px, transparent 10px,
    rgba(236, 227, 205, 0.35) 10px, rgba(236, 227, 205, 0.35) 11px,
    transparent 11px, transparent 14px
  );
}

.auth-mode-toggle {
  background: none;
  border: none;
  color: var(--auth-card-ink-soft);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 2px;
  transition: var(--transition-fast);
}

.auth-mode-toggle:hover {
  color: var(--auth-accent);
  background: none;
}

.auth-card.is-master-mode {
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--auth-accent);
}

.logo-mark-master {
  background: var(--auth-accent);
  /* Ícone escuro fixo (não var(--auth-card-ink), que agora é claro) --
     esta é uma badge de destaque sobre o dourado, não parte do papel/
     tinta que inverteu de cor; ícone claro sobre dourado perderia
     contraste. */
  color: #1c1409;
}

@media (min-width: 901px) {
  .auth-screen {
    grid-template-columns: 1.1fr 1fr;
  }

  .auth-showcase {
    display: flex;
  }
}

/* -------------------- 5. Layout do App -------------------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar (desktop) — oculta por padrão (mobile-first); reaparece a
   partir do breakpoint min-width:901px na seção 17. */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: none;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 24px;
}

/* Wordmark real (icons/backstagelogo.png). Largura auto respeitando a
   proporção do PNG (531x165), limitada pela largura útil da sidebar
   (--sidebar-width menos o padding) pra nunca estourar o container. */
.sidebar-brand-logo {
  height: 34px;
  width: auto;
  max-width: 100%;
}

.sidebar-brand .logo-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--gradient-neon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-brand span {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
}

.nav-section-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 16px 12px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  transition: var(--transition-fast);
  position: relative;
}

.nav-item i {
  width: 18px;
  text-align: center;
  font-size: 1rem;
}

.nav-item:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.nav-item:active {
  background: var(--bg-elevated);
}

.nav-item.is-active {
  background: var(--violet-dim);
  color: var(--violet-light);
}

.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--gradient-neon);
  border-radius: var(--radius-full);
}

.nav-item.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.nav-badge-soon {
  margin-left: auto;
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 10px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #0a0a0c;
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-info strong {
  display: block;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-info span {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.btn-logout {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.btn-logout:hover {
  color: var(--danger);
  background: var(--danger-dim);
}

.btn-logout:active {
  transform: scale(0.94);
}

/* Main column */
.main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Navbar */
.navbar {
  height: var(--navbar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(19, 19, 22, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  gap: 16px;
}

/* Wordmark real (icons/backstagelogo.png) -- antes era um <span> de texto,
   por isso troca font-size/font-weight por altura fixa + largura auto
   (proporção do PNG 531x165). display:none/inline vira display:none/block,
   mesmo breakpoint de antes (aparece a partir de 641px, ver seção 17). */
.navbar-title {
  height: 24px;
  width: auto;
  display: none;
}

.tenant-selector {
  position: relative;
  display: flex;
  align-items: center;
}

.tenant-selector::before {
  content: "\f542";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 14px;
  color: var(--violet-light);
  font-size: 0.85rem;
  pointer-events: none;
}

.tenant-selector select {
  appearance: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.85rem;
  min-height: 44px;
  padding: 9px 34px 9px 36px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
}

.tenant-selector select:hover {
  border-color: var(--violet);
}

.tenant-selector::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 14px;
  color: var(--text-muted);
  font-size: 0.7rem;
  pointer-events: none;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Content area */
.content-area {
  flex: 1;
  padding: 16px;
  padding-bottom: calc(var(--bottom-nav-height) + 20px);
}

.module-view {
  display: none;
  animation: fadeIn 0.25s ease;
}

.module-view.is-active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.view-header h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.view-header p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 2px;
}

/* Bottom navigation (mobile) — visível por padrão (mobile-first); some a
   partir do breakpoint min-width:901px na seção 17. */
.bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  width: 100%;
  background: rgba(19, 19, 22, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  align-items: center;
  justify-content: space-around;
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  background: none;
  border: none;
}

.bottom-nav-item i {
  font-size: 1.1rem;
}

.bottom-nav-item.is-active {
  color: var(--violet-light);
}

.bottom-nav-item:active {
  transform: scale(0.94);
}

/* -------------------- 6. Cards -------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  min-width: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.card-header h3 {
  font-size: 1rem;
  font-weight: 700;
}

.card-header h3 i {
  color: var(--violet-light);
  margin-right: 8px;
}

/* KPI cards */
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  min-width: 0;
}

.kpi-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.kpi-card::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--kpi-accent, var(--violet));
  opacity: 0.15;
  filter: blur(10px);
}

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kpi-accent-dim, var(--violet-dim));
  color: var(--kpi-accent, var(--violet-light));
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.kpi-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.kpi-value {
  font-family: var(--font-mono);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.kpi-value small {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  display: block;
  margin-top: 4px;
}

/* -------------------- 7. Botões -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
  filter: brightness(0.94);
}

.btn-primary {
  background: var(--gradient-neon);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: var(--shadow-neon);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--violet);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.btn-danger {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: transparent;
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger);
  color: #fff;
}

.btn-success {
  background: var(--success-dim);
  color: var(--success);
}

.btn-success:hover:not(:disabled) {
  background: var(--success);
  color: #06280f;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.76rem;
}

.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-sm);
}

.btn-loading {
  pointer-events: none;
}

.btn-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: var(--text-muted);
  gap: 10px;
  font-size: 0.85rem;
}

.spinner-block .btn-spinner {
  border-color: var(--border-strong);
  border-top-color: var(--violet-light);
  width: 18px;
  height: 18px;
}

/* -------------------- 8. Formulários -------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.form-group label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-group label .required {
  color: var(--pink-light);
}

.form-control {
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  transition: var(--transition-fast);
  width: 100%;
}

.form-control:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-dim);
}

.password-input-wrap {
  position: relative;
}

.password-input-wrap .form-control {
  padding-right: 42px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.password-toggle:hover {
  color: var(--text-secondary);
  background: var(--bg-card-hover);
}

.auth-forgot-password {
  text-align: right;
  margin-top: 8px;
}

.auth-link-btn {
  background: none;
  border: none;
  color: var(--violet-light);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 4px;
  transition: var(--transition-fast);
}

.auth-link-btn:hover {
  color: var(--pink-light);
  text-decoration: underline;
}

.auth-link-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  text-decoration: none;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2398968d'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}

.form-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.form-error {
  font-size: 0.72rem;
  color: var(--danger);
  min-height: 16px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
}

/* -------------------- 9. Tabelas -------------------- */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 640px;
}

.data-table thead th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 12px 16px;
  white-space: nowrap;
}

.data-table tbody td {
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
}

.data-table tbody tr {
  background: var(--bg-card);
  transition: var(--transition-fast);
}

.data-table tbody tr:hover {
  background: var(--bg-card-hover);
}

.data-table tbody tr:active {
  background: var(--bg-elevated);
}

.data-table tbody td strong {
  color: var(--text-primary);
}

.table-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.table-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* -------------------- 10. Badges / Tags -------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.badge-success { background: var(--success-dim); color: var(--success); }
.badge-warning { background: var(--warning-dim); color: var(--warning); }
.badge-danger { background: var(--danger-dim); color: var(--danger); }
.badge-info { background: var(--info-dim); color: var(--info); }
.badge-neutral { background: var(--bg-elevated); color: var(--text-muted); }
.badge-violet { background: var(--violet-dim); color: var(--violet-light); }

/* Badge de auditoria (gerado dinamicamente por audit.js) */
.audit-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.audit-tag i {
  font-size: 0.68rem;
}

/* -------------------- 11. Modais -------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 7, 13, 0.7);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-elevated);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.modal-close {
  background: var(--bg-elevated);
  border: none;
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--danger-dim);
  color: var(--danger);
}

.modal-close:active {
  transform: scale(0.94);
}

/* Bottom sheet no mobile: sobe do rodapé em vez de abrir centralizado.
   openModal()/closeModal() (js/modal.js) não mudam -- é só reposicionamento
   via CSS, a mecânica de fechar (clique fora/Esc/[data-modal-close]) é a
   mesma. Acima de 768px o comportamento centralizado de sempre continua. */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: slideUp 0.25s ease;
  }

  /* Trava o crescimento do seletor de projeto pra ele nunca encostar no
     avatar (.navbar-right) -- .navbar-title já some sozinho abaixo de
     641px, então esses dois são os únicos itens do navbar aqui. */
  .tenant-selector {
    max-width: 58vw;
  }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .modal {
    animation: none;
  }
}

/* -------------------- 12. Toasts -------------------- */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  width: calc(100% - 40px);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  transform: translateX(30px);
  transition: var(--transition);
}

.toast.toast-show {
  opacity: 1;
  transform: translateX(0);
}

.toast.toast-hide {
  opacity: 0;
  transform: translateX(30px);
}

.toast-success { border-left-color: var(--success); }
.toast-success .toast-icon { color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info { border-left-color: var(--info); }
.toast-info .toast-icon { color: var(--info); }

.toast-icon {
  font-size: 1rem;
  margin-top: 1px;
}

.toast-message {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 2px;
}

.toast-close:hover {
  color: var(--text-primary);
}

/* -------------------- 13. Chart container -------------------- */
.chart-container {
  position: relative;
  height: 280px;
  width: 100%;
  overflow: hidden;
}

.chart-container canvas {
  max-width: 100%;
}

/* -------------------- 14. Listas (feed de atividades, extrato) -------------------- */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--violet-dim);
  color: var(--violet-light);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.activity-body {
  flex: 1;
  min-width: 0;
}

.activity-title {
  font-size: 0.84rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* -------------------- 15. Agenda: lista/calendário -------------------- */
.view-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}

.view-toggle button {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  transition: var(--transition-fast);
}

.view-toggle button.is-active {
  background: var(--gradient-neon);
  color: #fff;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-weekday {
  text-align: center;
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 6px;
  letter-spacing: 0.04em;
}

.calendar-day {
  min-height: 56px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  font-size: 0.62rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: default;
}

.calendar-day.is-empty {
  background: transparent;
  border-color: transparent;
}

.calendar-day.is-today {
  border-color: var(--violet);
}

.calendar-day-num {
  font-weight: 700;
  color: var(--text-secondary);
}

.calendar-event {
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--violet-dim);
  color: var(--violet-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: var(--transition-fast);
}

.calendar-event:active {
  transform: scale(0.95);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.calendar-header h4 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: capitalize;
}

/* Lineup / escala de músicos */
.lineup-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lineup-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 5px 12px 5px 5px;
  font-size: 0.76rem;
}

.lineup-chip .lineup-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gradient-neon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
}

.lineup-chip button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.7rem;
  margin-left: 2px;
  transition: var(--transition-fast);
}

.lineup-chip button:hover {
  color: var(--danger);
}

.lineup-chip button:active {
  transform: scale(0.94);
}

/* Visão restrita do músico (escala do dia) */
.today-hero {
  background: linear-gradient(150deg, rgba(184, 147, 95, 0.14), rgba(150, 117, 75, 0.08));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin-bottom: 20px;
}

.today-hero-date {
  font-size: 0.78rem;
  color: var(--violet-light);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.today-hero-venue {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.today-hero-time {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.today-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* -------------------- 16. Financeiro -------------------- */
.summary-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.summary-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.summary-box .summary-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.summary-box .summary-value {
  font-size: 1.2rem;
  font-weight: 800;
}

.category-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
}

.category-row .category-name {
  width: 140px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.category-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.category-bar-fill {
  height: 100%;
  background: var(--gradient-neon);
  border-radius: var(--radius-full);
}

.category-row .category-value {
  width: 90px;
  text-align: right;
  font-weight: 700;
  flex-shrink: 0;
}

.month-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.month-picker input {
  max-width: 170px;
}

/* -------------------- 17. Responsividade (mobile-first) --------------------
   Base (sem media query, acima) = smartphones pequenos. Cada breakpoint
   abaixo ADICIONA estilo conforme a tela cresce (min-width), em vez de
   remover estilo de uma base desktop. */
@media (min-width: 481px) {
  .grid-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 641px) {
  .navbar-title {
    display: block;
  }

  .calendar-day {
    min-height: 78px;
    font-size: 0.72rem;
  }

  .auth-card {
    padding: 40px 32px;
  }
}

@media (min-width: 901px) {
  .sidebar {
    display: flex;
  }

  .bottom-nav {
    display: none;
  }

  .content-area {
    padding: 24px;
    padding-bottom: calc(var(--bottom-nav-height) + 24px);
  }

  .navbar {
    padding: 0 24px;
  }

  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1101px) {
  .grid-kpis {
    grid-template-columns: repeat(4, 1fr);
  }

  .summary-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   PARTE 2 — CRM, Contratos, Repositório, Figurino, Kanban,
   Mídia e Configurações
   ============================================================ */

/* -------------------- 18. Tabs (padrão view-toggle reaproveitado) -------------------- */
.module-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.search-input-wrap {
  position: relative;
  min-width: 220px;
  flex: 1;
  max-width: 320px;
}

.search-input-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.8rem;
}

.search-input-wrap input {
  padding-left: 36px;
}

/* -------------------- 19. Star rating -------------------- */
.star-rating {
  display: inline-flex;
  gap: 2px;
}

.star-rating i {
  color: var(--warning);
  font-size: 0.85rem;
}

.star-rating i.is-empty {
  color: var(--border-strong);
}

.star-picker {
  display: inline-flex;
  gap: 6px;
}

.star-picker button {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--border-strong);
  transition: var(--transition-fast);
  padding: 2px;
}

.star-picker button.is-filled {
  color: var(--warning);
}

/* -------------------- 20. CRM: grid de contratantes -------------------- */
.entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.entity-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: var(--transition);
}

.entity-card:hover {
  border-color: var(--border-strong);
}

.entity-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.entity-card-title {
  font-size: 1rem;
  font-weight: 700;
}

.entity-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.entity-card-meta i {
  width: 14px;
  color: var(--text-muted);
  margin-right: 4px;
}

.entity-card-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.entity-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ranking-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.ranking-card {
  position: relative;
  background: linear-gradient(150deg, rgba(184, 147, 95, 0.13), rgba(150, 117, 75, 0.07));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.ranking-position {
  position: absolute;
  top: -10px;
  left: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gradient-neon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  box-shadow: var(--shadow-neon);
}

.ranking-name {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 6px 0 4px;
}

/* -------------------- 21. Cofre de documentos / upload -------------------- */
.upload-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 26px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  transition: var(--transition-fast);
}

.upload-zone:hover {
  border-color: var(--violet);
  color: var(--text-secondary);
}

.upload-zone i {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 8px;
  color: var(--violet-light);
}

.doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border);
}

.doc-row:last-child {
  border-bottom: none;
}

.doc-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--violet-dim);
  color: var(--violet-light);
  flex-shrink: 0;
  font-size: 1rem;
}

.doc-body {
  flex: 1;
  min-width: 0;
}

.doc-name {
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* -------------------- 22. Grid de figurino -------------------- */
.outfit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.outfit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.outfit-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.outfit-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--bg-elevated);
  display: block;
}

.outfit-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.8rem;
}

.outfit-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.outfit-name {
  font-size: 0.85rem;
  font-weight: 700;
}

.outfit-footer {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

/* -------------------- 23. Kanban -------------------- */
.kanban-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.kanban-column {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  min-height: 200px;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

.kanban-column-header h4 {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

.kanban-column.is-dragover {
  border-color: var(--violet);
  box-shadow: 0 0 0 2px var(--violet-dim);
}

.kanban-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 10px;
  cursor: grab;
  transition: var(--transition-fast);
}

.kanban-card:hover {
  border-color: var(--border-strong);
}

.kanban-card.is-dragging {
  opacity: 0.4;
}

.kanban-card-title {
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.kanban-assignee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.kanban-assignee-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #0a0a0c;
  flex-shrink: 0;
}

.kanban-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.kanban-move-btns {
  display: flex;
  gap: 4px;
}

.kanban-move-btns button {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 0.65rem;
}

.kanban-move-btns button:hover:not(:disabled) {
  color: var(--violet-light);
  border-color: var(--violet);
}

.kanban-move-btns button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* -------------------- 24. Prospecção Full Screen / QR -------------------- */
.prospection-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background-color: var(--bg-base);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 30px;
  text-align: center;
}

.prospection-brand {
  font-size: 1.6rem;
  font-weight: 800;
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.prospection-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 340px;
}

.qr-box {
  background: #fff;
  padding: 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  display: inline-flex;
}

.prospection-close {
  position: absolute;
  top: 20px;
  right: 20px;
}

.prospection-url-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 380px;
}

/* -------------------- 25. Seletor de cor (Configurações) -------------------- */
.color-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition-fast);
}

.color-swatch.is-selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--violet);
}

.color-input-native {
  width: 42px;
  height: 42px;
  padding: 2px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: none;
  cursor: pointer;
}

/* -------------------- 26. Template de PDF (fora da tela, tema claro para impressão) -------------------- */
.pdf-template {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 794px;
  background: #ffffff;
  color: #1a1a1a;
  font-family: "Manrope", Arial, sans-serif;
  padding: 48px;
  font-size: 13px;
  line-height: 1.6;
}

.pdf-template h1 {
  font-size: 20px;
  margin-bottom: 4px;
  color: #111;
}

.pdf-template h2 {
  font-size: 14px;
  margin: 22px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid #b5721f;
  color: #111;
}

.pdf-template p {
  margin-bottom: 8px;
}

.pdf-template table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

.pdf-template table td,
.pdf-template table th {
  border: 1px solid #ddd;
  padding: 8px 10px;
  text-align: left;
  font-size: 12px;
}

.pdf-template .pdf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid #b5721f;
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.pdf-template .pdf-header small {
  color: #666;
  display: block;
}

.pdf-signature-row {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 60px;
}

.pdf-signature-line {
  flex: 1;
  text-align: center;
  border-top: 1px solid #333;
  padding-top: 6px;
  font-size: 11px;
  color: #444;
}

.pdf-footer-note {
  margin-top: 30px;
  font-size: 10px;
  color: #888;
}

/* -------------------- 27. Menu "Mais" (mobile) --------------------
   Espelha o agrupamento da sidebar desktop (Operação / Produção & Vendas /
   Gestão / Sistema) em linhas compactas de 2 colunas, em vez de cards
   grandes -- os 14+ módulos precisam caber inteiros na tela sem exigir
   scroll, senão alguns passam despercebidos. */
/* Sem campo de formulário pra proteger de teclado virtual, então pode
   usar mais altura de tela que um modal comum. */
.more-menu-modal {
  padding: 18px 20px;
  max-height: 92vh;
}

.more-menu-modal .modal-header {
  margin-bottom: 10px;
}

.more-menu {
  display: flex;
  flex-direction: column;
}

.more-menu-group + .more-menu-group {
  margin-top: 4px;
}

.more-menu-group-label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 8px 4px 5px;
}

.more-menu-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 10px;
}

.more-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  transition: var(--transition-fast);
  min-height: 38px;
  width: 100%;
}

.more-menu-row i {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--violet-dim);
  color: var(--violet-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}

.more-menu-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-menu-row:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.more-menu-row:active {
  transform: scale(0.97);
  background: var(--bg-elevated);
}

.more-menu-row.is-active {
  background: var(--violet-dim);
  color: var(--violet-light);
}

.more-menu-row.is-active i {
  background: var(--violet);
  color: #0a0a0c;
}

@media (min-width: 481px) {
  .more-menu-rows {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------- 28. Tabela de usuários (Configurações) -------------------- */
.user-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--border-strong);
  vertical-align: middle;
}

/* -------------------- 29. Responsividade Parte 2 (mobile-first) -------------------- */
@media (min-width: 641px) {
  .ranking-strip {
    grid-template-columns: 1fr 1fr;
  }

  .prospection-url-form {
    flex-direction: row;
  }
}

@media (min-width: 901px) {
  .kanban-board {
    grid-template-columns: repeat(3, 1fr);
  }

  .entity-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .outfit-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .ranking-strip {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* ============================================================
   PARTE 3 — Compras & Suprimentos e Central de Relatórios PDF
   ============================================================ */

/* -------------------- 30. KPIs de 3 colunas (Compras, mobile-first) -------------------- */
.grid-kpis-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 481px) {
  .grid-kpis-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 901px) {
  .grid-kpis-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------- 31. Central de Relatórios -------------------- */
.quick-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.report-type-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.report-type-card i {
  font-size: 1.1rem;
  color: var(--violet-light);
}

.report-type-card strong {
  font-size: 0.85rem;
  color: var(--text-primary);
}

.report-type-card span {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.report-type-card:hover {
  border-color: var(--violet);
}

.report-type-card.is-active {
  border-color: var(--violet);
  background: var(--violet-dim);
  box-shadow: 0 0 0 1px var(--violet);
}

.report-type-card.is-active strong,
.report-type-card.is-active span {
  color: var(--text-primary);
}

.report-type-card:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.report-type-card:disabled:hover {
  border-color: var(--border);
}

/* -------------------- Checklist de cláusulas do contrato -------------------- */
.contract-subheading {
  font-size: 0.85rem;
  margin: 18px 0 8px;
  color: var(--text-secondary);
}

.clause-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.clause-group + .clause-group {
  margin-top: 12px;
}

.clause-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.clause-group-label i {
  color: var(--violet-light);
  width: 16px;
  text-align: center;
}

.clause-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.clause-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--violet);
}

/* Pop simples ao marcar/desmarcar (ver animateCheckboxPop em utils.js) --
   reaproveitado pelos checkboxes de cláusula e pelos toggles de dados do
   representante em contratos.js/config.js. */
@keyframes checkbox-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

input[type="checkbox"].is-checkbox-popping {
  animation: checkbox-pop 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"].is-checkbox-popping {
    animation: none;
  }
}

.clause-checkbox-row span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clause-checkbox-row strong {
  color: var(--text-primary);
  font-weight: 600;
}

.clause-helper {
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.clause-checkbox-row:hover {
  color: var(--text-primary);
}

.clause-field-wrap {
  padding: 4px 4px 10px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clause-field-wrap .form-group {
  margin: 0;
}

/* Área de rolagem horizontal para a pré-visualização A4 em telas estreitas */
.pdf-preview-scroll {
  overflow-x: auto;
  max-width: 100%;
  padding: 4px;
}

/* Variante em tela (não fora da viewport) do .pdf-template, usada para
   pré-visualizar exatamente o que será impresso antes do download. */
.pdf-template.pdf-preview {
  position: static;
  left: auto;
  top: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
}

.pdf-preview-placeholder {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.pdf-preview-placeholder i {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 12px;
  color: var(--text-muted);
}

/* Zebra e quebras de página — tabelas de relatórios podem ser longas */
.pdf-template table tbody tr:nth-child(even) {
  background: #f7f1e3;
}

.pdf-template table tr {
  page-break-inside: avoid;
}

.pdf-template h2 {
  page-break-after: avoid;
}

.pdf-template .pdf-section {
  page-break-inside: avoid;
}

.pdf-template .pdf-kpi-row {
  display: flex;
  gap: 14px;
  margin: 12px 0 18px;
  flex-wrap: wrap;
}

.pdf-template .pdf-kpi-box {
  flex: 1;
  min-width: 130px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 12px;
}

.pdf-template .pdf-kpi-box .pdf-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #777;
  margin-bottom: 4px;
}

.pdf-template .pdf-kpi-box .pdf-kpi-value {
  font-size: 15px;
  font-weight: 700;
  color: #111;
}

.pdf-template .pdf-brandmark {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #b5721f, #e8a33d);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.pdf-template .pdf-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* -------------------- 32. Auditoria (Audit Trail) -------------------- */
.audit-filter-select {
  max-width: 200px;
}

.audit-user-email {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.audit-user-uid {
  display: block;
  font-size: 0.62rem;
  color: var(--text-muted);
  opacity: 0.7;
  font-family: monospace;
}

.audit-load-more-wrap {
  display: flex;
  justify-content: center;
  padding-top: 16px;
}

.data-table tbody tr.audit-row-delete {
  background: var(--danger-dim);
}

.audit-diff {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
}

.audit-diff-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
}

.audit-diff-field {
  font-weight: 700;
  color: var(--text-secondary);
}

.audit-diff-old {
  color: var(--danger);
  text-decoration: line-through;
  opacity: 0.8;
}

.audit-diff-new {
  color: var(--success);
  font-weight: 600;
}

.audit-diff-arrow {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.audit-diff-create .audit-diff-new {
  color: var(--violet-light);
}

/* -------------------- 33. Skeleton Loaders --------------------
   Substitui o .spinner-block genérico no carregamento inicial de cada
   módulo (via onSnapshot) por um placeholder no formato do conteúdo real
   -- reduz a percepção de espera em conexão instável e evita a tela
   parecer quebrada enquanto os dados não chegam. Brilho neutro (branco
   translúcido), não dourado -- o dourado fica reservado pra destaque de
   ação real (ver --gradient-neon nos botões), um shimmer dourado repetido
   em várias linhas empilhadas ficaria gritando em vez de discreto. */
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton-text {
  height: 13px;
  margin-bottom: 10px;
}

.skeleton-text:last-child {
  margin-bottom: 0;
}

.skeleton-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

/* -------------------- 34. Empty States --------------------
   Substitui o .table-empty genérico (texto cinza) nos módulos principais
   por ícone + título + hint + CTA opcional -- ver renderEmptyState() em
   js/utils.js. CTA é opcional de propósito: nem todo estado vazio tem uma
   ação de "criar" associada (ex: feed de atividades é automático). */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: var(--radius-md);
  background: var(--violet-dim);
  color: var(--violet-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.empty-state-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.empty-state-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: 320px;
  margin: 0 auto 18px;
}

.empty-state-hint:last-child {
  margin-bottom: 0;
}

/* -------------------- 35. Notificações (Central de Alertas) -------------------- */
.btn-notif {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: none;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.btn-notif:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.btn-notif:active {
  transform: scale(0.94);
}

.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.notif-item:hover {
  background: var(--bg-card-hover);
}

.notif-item:active {
  background: var(--bg-elevated);
}

.notif-item.is-unread {
  background: var(--violet-dim);
}

.notif-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--violet-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-title {
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* -------------------- 36. Busca Global (⌘K / Ctrl+K) --------------------
   Linhas de resultado reaproveitam .notif-item/.notif-icon/.notif-title
   da Fase 3 tal como estão -- mesma cara visual, sem duplicar CSS. */
.btn-search {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: none;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.btn-search:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.btn-search:active {
  transform: scale(0.94);
}

.search-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.search-input:focus {
  outline: none;
  border-color: var(--violet);
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 60vh;
  overflow-y: auto;
}

.search-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ============================================================
   37. Compras — Pagamentos Parciais
   ============================================================ */

.progress-track {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  overflow: hidden;
  margin: 4px 0;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--violet);
}