/* Painel Estúdio Crivy — scaffold visual, dados fictícios.
   Herda tokens.css do site principal. Register de produto: a interface serve
   a tarefa, não vende nada. */

/* O tokens.css do site principal pede as variantes "Variable", que vêm do
   fontsource no build do Astro. Aqui é HTML puro servindo do Google Fonts, que
   entrega os nomes sem "Variable" — sem estes dois nomes na cadeia, tudo caía
   em system-ui e o scaffold não parecia do mesmo estúdio. */
:root {
  --font-display: 'Encode Sans Variable', 'Encode Sans', system-ui, sans-serif;
  --font-body: 'Encode Sans Variable', 'Encode Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
}

body {
  margin: 0;
  min-height: 100dvh;
}

/* ---- Shell: sidebar fixa + conteúdo ---- */
/* minmax(0, 1fr) e não 1fr: o mínimo implícito de 1fr é auto, então a coluna
   estica até o conteúdo mais largo em vez de encolher — e aí quem rola de lado
   é a página inteira, não a tabela. */
.shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100dvh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.marca {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--color-text);
}
.marca .ponto { color: var(--color-accent); }
.marca small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.nav-secao {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  padding-inline: var(--space-2);
  margin-bottom: var(--space-2);
}

.nav { display: grid; gap: 2px; }

.nav button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.nav button:hover,
.nav button:focus-visible { background: var(--color-surface-2); color: var(--color-text); }
.nav button[aria-selected="true"] {
  background: var(--color-surface-2);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--color-accent);
}
.nav .marcador {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
}

.sidebar-rodape {
  margin-top: auto;
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ---- Conteúdo ---- */
.conteudo { padding: var(--space-8) var(--space-8) var(--space-16); min-width: 0; }

.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.topo h1 { font-size: var(--text-2xl); }
.topo p { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-1) 0 0; }

.painel { display: none; }
.painel[data-ativo] { display: block; }

/* ---- Resumo: números que abrem a visão, sem virar grade de cards iguais ---- */
.resumo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-block: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}
.resumo div { display: grid; gap: var(--space-1); }
.resumo dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.resumo dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.resumo .delta { font-family: var(--font-mono); font-size: var(--text-xs); }
.delta.sobe { color: var(--color-games); }
.delta.desce { color: var(--color-design); }

/* ---- Tabela ---- */
/* overflow-x no bloco: tabela de 5 colunas não cabe em 320px, e rolar a tabela
   dentro do bloco é melhor que rolar a página inteira de lado. */
.bloco { margin-bottom: var(--space-12); overflow-x: auto; }
.bloco h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
thead th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
tbody td {
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
tbody tr:hover { background: var(--color-surface); }
.cliente { font-weight: 600; }
.cliente small { display: block; font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }
.valor { font-family: var(--font-mono); white-space: nowrap; }
.num { text-align: right; }

/* Etiqueta de frente — cor do sistema do site principal */
.frente {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.frente::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--fc, var(--color-accent));
}

/* Estado do projeto */
.estado {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.estado.producao { color: var(--color-accent); }
.estado.proposta { color: var(--color-creators); }
.estado.entregue { color: var(--color-games); }
.estado.parado   { color: var(--color-text-muted); }
.estado.atrasado { color: var(--color-design); }

/* Botão de ação. Contorno em --color-border-control e não --color-border: aqui ele
   identifica um controle, então precisa dos 3:1 da WCAG 1.4.11 — o token decorativo
   mede 2.3:1 e o botão leria como texto solto. */
.acao {
  font: inherit;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  background: none;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.acao:hover,
.acao:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }

/* O que escreve na loja fica preenchido: a ação destrutiva não pode ter o mesmo
   peso visual da simulação ao lado dela. */
#zap-aplicar {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
#zap-aplicar:hover,
#zap-aplicar:focus-visible { opacity: 0.85; color: var(--color-on-accent); }

.zap-cat:hover,
.zap-cat:focus-visible { background: var(--color-surface-2) !important; color: var(--color-accent); }

/* ============================================
   Login
   ============================================ */

/* Cobre a página inteira: o conteúdo do painel chega a existir no DOM antes do
   login resolver, e financeiro de cliente não pode piscar na tela de quem não entrou. */
.login-tela {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--color-bg);
}

.login-caixa {
  display: grid;
  gap: var(--space-4);
  width: min(24rem, 100%);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.login-marca {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-muted);
}
.login-marca .ponto { color: var(--color-accent); }

.login-caixa h1 { font-size: var(--text-xl); }

.login-caixa label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* `display:grid` acima vence o display:none que o atributo hidden traz da folha
   do navegador — o campo fica visível e, pior, continua na ordem de tabulação.
   Devolve a vitória para o hidden. */
.login-caixa [hidden] {
  display: none !important;
}

.login-caixa input {
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  /* Contorno que identifica um controle precisa dos 3:1 da WCAG 1.4.11 */
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-height: 44px;
}
.login-caixa input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.login-caixa button {
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity var(--transition);
}
.login-caixa button:hover:not(:disabled) { opacity: 0.85; }
.login-caixa button:disabled { opacity: 0.5; cursor: wait; }

.login-erro {
  color: var(--color-design);
  font-size: var(--text-sm);
}

/* Confirmação neutra: conta criada, link de recuperação enviado, conta ainda na
   fila. Nenhuma dessas é erro, e pintar de vermelho faria parecer que é. */
.login-ok {
  color: var(--color-accent);
  font-size: var(--text-sm);
}

.login-dica,
.login-opcional {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.login-abas {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Abas não são o botão primário do formulário: virar dois blocos ciano faria
   competir com o "Entrar". Ficam como texto, e a selecionada ganha a régua. */
.login-caixa .login-abas button {
  flex: 1;
  min-height: 44px;
  color: var(--color-text-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 600;
}

.login-caixa .login-abas button[aria-selected='true'] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.login-caixa .login-abas button:hover:not(:disabled) {
  opacity: 1;
  color: var(--color-text);
}

.login-caixa .login-link {
  min-height: 44px;
  color: var(--color-text-muted);
  background: none;
  border: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  text-decoration: underline;
}

.login-caixa .login-link:hover:not(:disabled) {
  opacity: 1;
  color: var(--color-accent);
}

/* ---- Kanban: arraste nativo, sem biblioteca ---- */

#kanban .cartao { cursor: grab; }
#kanban .cartao:active { cursor: grabbing; }

/* O cartão arrastado continua no fluxo (é ele que marca a posição de destino),
   então some pela opacidade em vez de sair do layout. */
#kanban .cartao.arrastando { opacity: 0.35; }

#kanban .coluna.sobre {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  outline: 1px dashed var(--color-accent-dim);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Coluna vazia precisa de área para receber o cartão; sem altura mínima não há
   onde soltar. */
#kanban .coluna { min-height: 8rem; }

/* ---- Financeiro: formulário de lançamento ---- */

/* auto-fit em vez de colunas fixas: o formulário tem seis campos de larguras
   muito diferentes, e grade rígida deixaria "Valor" do tamanho de "Descrição". */
.fin-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-4);
  align-items: end;
}

.fin-form label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.fin-form input,
.fin-form select {
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  /* contorno que identifica controle precisa dos 3:1 da WCAG 1.4.11 */
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-height: 44px;
}

.fin-form input:focus-visible,
.fin-form select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Descrição é o campo mais longo: ocupa a linha toda quando há espaço. */
.fin-form label:has(input[name='descricao']) { grid-column: span 2; }

.fin-del:hover,
.fin-del:focus-visible { color: var(--color-design) !important; }

/* Diálogo de pagamento. O <dialog> nativo já dá foco preso, Esc para fechar e
   fundo inerte — reimplementar isso à mão é onde acessibilidade costuma morrer. */
#fin-pix {
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-8);
  max-width: min(34rem, 92vw);
}
#fin-pix::backdrop { background: rgb(0 0 0 / 0.6); }
#fin-pix textarea:focus-visible,
#fin-pix input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Seleção de itens da Zap */
.zap-sel { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; }
#zap-produtos tr[data-mudou] { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }

/* ---- Pipeline em colunas ---- */
.pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-4);
  align-items: start;
}
.coluna { display: grid; gap: var(--space-3); align-content: start; }
.coluna h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.coluna h3 span { color: var(--color-text); }
.cartao {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--fc, var(--color-accent)) 5%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.cartao strong { font-size: var(--text-sm); }
.cartao .meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---- Atendimento: Chatwoot embutido ----
   O iframe só carrega porque o vhost do chat troca o X-Frame-Options do Rails
   por frame-ancestors nomeando este domínio. Qualquer outro site que tente
   embutir continua barrado. */
.embed-moldura {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  /* alto o bastante pra caixa de entrada respirar, sem gerar scroll duplo */
  height: clamp(520px, calc(100dvh - 220px), 900px);
}

/* Atendimento é a única aba cujo conteúdo é outro sistema inteiro. Aqui o respiro
   do painel trabalha contra: cada pixel de margem é uma linha a menos de conversa,
   e o teto de 900px deixava faixa preta sobrando em tela grande. Sangra pros lados
   e ocupa a altura toda — quem tem cabeçalho próprio é o Chatwoot. */
#atendimento .embed-moldura {
  height: calc(100dvh - 150px);
  max-height: none;
  margin-inline: calc(var(--space-8) * -1);
  border-inline: 0;
  border-radius: 0;
}
#atendimento .topo { margin-bottom: var(--space-4); }
#atendimento .embed-nota { padding-top: var(--space-3); }
.embed-moldura iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.embed-nota {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: min(70ch, 100%);
}
.embed-nota a { color: var(--color-accent-dim); }

/* mantido para outros espaços reservados que ainda não existem */
.embed-espaco {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  min-height: 380px;
  padding: var(--space-8);
  border: 1px dashed var(--color-border-control);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: center;
}
/* min(): 42ch é mais largo que a tela a 320px, e a URL do iframe é uma string
   sem espaço — sem anywhere ela empurra a página inteira de lado. */
.embed-espaco p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: min(42ch, 100%);
}
.embed-espaco code {
  display: block;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  overflow-wrap: anywhere;
}

.aviso-mock {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.aviso-mock b { color: var(--color-creators); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; align-self: center; }

/* ---- Responsivo ---- */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar, .conteudo { min-width: 0; }
  .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  /* min-width:0 nos dois níveis: sem isso o wrapper é item flex com
     min-width:auto e se recusa a encolher, então o overflow-x da .nav nunca
     entra em ação e a página inteira rola de lado. */
  .sidebar > div { flex: 1; min-width: 0; }
  .nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    min-width: 0;
  }
  .nav-secao, .sidebar-rodape { display: none; }
  .conteudo { padding: var(--space-6) var(--space-4) var(--space-16); }
  /* O sangramento acompanha o padding menor do mobile; sem isto o iframe passa
     da borda da tela e cria scroll horizontal na página inteira. */
  #atendimento .embed-moldura {
    margin-inline: calc(var(--space-4) * -1);
    height: calc(100dvh - 210px);
  }
  .resumo { gap: var(--space-6); }
  table { font-size: var(--text-xs); }
  tbody td { padding: var(--space-3) var(--space-2); }
}