/* Identidade visual do Basta (redesenho de 17/10/2026).
   Cores tiradas do app (lib/theme/colors.dart): laranja #FF5000, marinho
   rgb(0,31,59) / rgb(0,13,29), azul rgb(1,136,255); fonte Manrope. Chassi no
   molde do HubSpot: barra lateral escura, área de trabalho clara, cartões com
   borda fina. Mockup aprovado em LiveKitVideoBot/planejamento/mockup-painel/.

   Os tokens continuam no formato do shadcn (`H S% L%`, usados como
   hsl(var(--x))) porque o painel inteiro — inclusive o SVG dos gráficos —
   pinta a partir deles. Trocar o formato obrigaria a mexer em cada tela. */
:root {
  --background: 216 33% 97%; --foreground: 211 38% 17%;
  --card: 0 0% 100%; --card-foreground: 211 38% 17%;
  --primary: 19 100% 50%; --primary-foreground: 0 0% 100%;
  --secondary: 214 38% 96%; --secondary-foreground: 211 38% 17%;
  --muted: 214 38% 96%; --muted-foreground: 215 20% 40%;
  --accent: 214 38% 94%; --accent-foreground: 211 38% 17%;
  /* Vermelho do "pediu polícia". Não é o #DE3400 do app: ao lado do laranja
     principal os dois se confundiam na rosca e nas etiquetas. */
  --destructive: 350 80% 45%; --destructive-foreground: 0 0% 100%;
  --border: 210 24% 89%; --input: 212 22% 80%; --ring: 19 100% 50%;
  --radius: 0.5rem;
  --sucesso: 142 76% 36%; --alerta: 36 71% 42%;
  --link: 209 100% 42%;
  /* Barras neutras dos gráficos: marinho no claro, azul no escuro. */
  --grafico: 211 100% 12%;
  --lateral: #001F3B; --lateral-2: #00152A; --lateral-texto: #B9C6D3;
  --sombra: 0 1px 2px rgba(0, 31, 59, .06), 0 2px 8px rgba(0, 31, 59, .05);
  --sombra-alta: 0 12px 40px rgba(0, 31, 59, .18);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
/* Escuro em dois caminhos: seguir o sistema (sem data-theme) OU forçado pelo
   usuário. O `:not([data-theme="light"])` é o que deixa o botão "claro"
   vencer a preferência do sistema — sem ele, quem usa o SO no escuro não
   consegue escolher claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 210 55% 9%; --foreground: 210 38% 93%;
    --card: 211 51% 13%; --card-foreground: 210 38% 93%;
    --secondary: 211 53% 11%; --secondary-foreground: 210 38% 93%;
    --muted: 211 53% 11%; --muted-foreground: 211 21% 72%;
    --accent: 210 40% 17%; --accent-foreground: 210 38% 93%;
    --destructive: 350 85% 58%;
    --border: 210 39% 20%; --input: 210 35% 28%;
    --sucesso: 142 65% 45%; --alerta: 38 92% 55%;
    --link: 209 100% 68%; --grafico: 208 100% 50%;
    --lateral: #000D1D; --lateral-2: #000814;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-alta: 0 12px 40px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background: 210 55% 9%; --foreground: 210 38% 93%;
  --card: 211 51% 13%; --card-foreground: 210 38% 93%;
  --secondary: 211 53% 11%; --secondary-foreground: 210 38% 93%;
  --muted: 211 53% 11%; --muted-foreground: 211 21% 72%;
  --accent: 210 40% 17%; --accent-foreground: 210 38% 93%;
  --destructive: 350 85% 58%;
  --border: 210 39% 20%; --input: 210 35% 28%;
  --sucesso: 142 65% 45%; --alerta: 38 92% 55%;
  --link: 209 100% 68%; --grafico: 208 100% 50%;
  --lateral: #000D1D; --lateral-2: #000814;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-alta: 0 12px 40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* O `display` do autor ganha do `[hidden]{display:none}` do navegador: sem
   isto, todo elemento escondido por JS que tenha display na classe (o pulso
   "ao vivo", o check de usuário ativo) continuava aparecendo. */
[hidden] { display: none !important; }
/* Mesmo motivo: um `display` na classe do diálogo faz ele nascer aberto. */
dialog:not([open]) { display: none !important; }
body {
  margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: var(--ui); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: hsl(var(--link)); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: hsl(var(--input)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: hsl(var(--muted-foreground) / .6); }

/* ---------------------------------------------------------------- chassi */
/* Barra lateral escura à esquerda (marca no alto), barra branca no topo e a
   área de trabalho rolando sozinha — o cabeçalho não sai da tela. */
.app {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr);
  height: 100vh; height: 100dvh;
}
.app.recolhida { grid-template-columns: 64px minmax(0, 1fr); }

.lateral {
  grid-row: 1 / 3; background: var(--lateral); color: var(--lateral-texto);
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.lateral .marca { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--lateral-2); }
.lateral .marca img { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }
.lateral .marca b { color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.lateral .marca small { color: #FF9564; font-weight: 700; font-size: 11px; margin-left: 2px; }
.lateral nav { padding: 10px; flex: 1; overflow-y: auto; }
.lateral .grupo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: #6F8399; padding: 14px 10px 6px; white-space: nowrap;
}
.lateral .item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px;
  background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: left; white-space: nowrap;
  position: relative; cursor: pointer;
}
.lateral .item svg { flex-shrink: 0; }
.lateral .item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lateral .item[aria-current="page"] { background: rgba(255, 80, 0, .16); color: #fff; }
.lateral .item[aria-current="page"]::before {
  content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: hsl(var(--primary));
}
.lateral .item .cont {
  margin-left: auto; background: hsl(var(--destructive)); color: #fff; font-size: 11px; font-weight: 800;
  font-style: normal; border-radius: 999px; padding: 1px 7px;
}
.lateral .rodape-lat { padding: 10px; border-top: 1px solid rgba(255, 255, 255, .08); flex-shrink: 0; }
.app.recolhida .lateral .marca b, .app.recolhida .lateral .grupo,
.app.recolhida .lateral .item span, .app.recolhida .lateral .item .cont { display: none; }

.topo {
  grid-column: 2; background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border));
  display: flex; align-items: center; gap: 12px; padding: 0 20px; min-width: 0;
}
.topo .espaco { flex: 1; }
.bt-icone {
  border: 0; background: transparent; width: 36px; height: 36px; padding: 0; border-radius: 6px;
  display: grid; place-items: center; color: hsl(var(--muted-foreground)); cursor: pointer;
}
.bt-icone:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.so-cel { display: none !important; }

/* Pílula de chamada ao vivo: aparece em QUALQUER tela, porque quem está
   olhando relatório também precisa saber que alguém pediu ajuda agora. */
.ao-vivo-pilula {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid hsl(var(--destructive) / .35); background: hsl(var(--destructive) / .08);
  color: hsl(var(--destructive)); font: inherit; font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px;
}
.ao-vivo-pilula:hover { background: hsl(var(--destructive) / .14); }
.ponto-vivo {
  width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--destructive));
  box-shadow: 0 0 0 0 hsl(var(--destructive) / .6); animation: pulso-vivo 1.6s infinite;
}
@keyframes pulso-vivo { 70% { box-shadow: 0 0 0 8px hsl(var(--destructive) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--destructive) / 0); } }
@media (prefers-reduced-motion: reduce) { .ponto-vivo { animation: none; } }

.conta { position: relative; }
/* Botão de conta: avatar + conta + usuário. */
.bt-conta {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 4px 8px 4px 4px; border-radius: 8px; border: 0; background: transparent; color: hsl(var(--foreground));
}
.bt-conta:hover { background: hsl(var(--muted)); }
.bt-conta .avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lateral); color: #fff; font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.bt-conta .rotulo { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.bt-conta .rotulo b { font-size: 13px; font-weight: 700; }
.bt-conta .rotulo span { font-size: 12px; color: hsl(var(--muted-foreground)); }
.bt-conta .seta { color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.bt-conta[aria-expanded="true"] .seta { transform: rotate(180deg); }

.conta .balao {
  position: absolute; right: 0; top: 46px; z-index: 30; width: 250px; padding: 6px;
  background: hsl(var(--card)); color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--sombra-alta);
}
.conta .balao .quem { padding: 10px 10px 12px; }
.conta .balao .quem b { display: block; font-size: 13.5px; }
.conta .balao .quem span { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); word-break: break-all; }
.conta .balao .risco { height: 1px; background: hsl(var(--border)); margin: 6px 0; }
.conta .balao .rotulo-menu {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: hsl(var(--muted-foreground)); padding: 8px 10px 6px; border-top: 1px solid hsl(var(--border));
}
.conta .balao .item-menu { width: 100%; justify-content: flex-start; border: 0; background: none; }
.conta .balao .item-menu:hover { background: hsl(var(--muted)); }

.temas { display: flex; gap: 4px; padding: 0 6px 4px; }
.temas button {
  flex: 1; flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 11px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
}
.temas button[aria-pressed="true"] {
  background: hsl(var(--primary) / .1); color: hsl(var(--primary)); border-color: hsl(var(--primary));
}

main { grid-column: 2; min-width: 0; min-height: 0; overflow-y: auto; padding: 24px 28px 48px; }

/* ----------------------------------------------------- cabeçalho de página */
.cabecalho { margin-bottom: 18px; }
.cabecalho .linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* O ícone da tela já está na barra lateral: repetir no título era ruído. */
.cabecalho #icone { display: none; }
.cabecalho h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.cabecalho p { margin: 2px 0 0; font-size: 14px; color: hsl(var(--muted-foreground)); }
.separador { display: none; }
.conteudo { padding: 0 0 40px; }

/* ------------------------------------------------------------- controles */
button, .botao {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 14px; border-radius: 6px; border: 1px solid hsl(var(--input));
  background: hsl(var(--card)); color: hsl(var(--foreground));
  transition: background-color .15s, border-color .15s;
}
button:hover, .botao:hover { background: hsl(var(--muted)); }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid hsl(var(--ring) / .5); outline-offset: 1px;
}
/* `.primario` é o nome que a página de convidado usa; não tinha estilo e o
   botão de entrar saía cinza. */
button.principal, button.primario {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary));
}
button.principal:hover, button.primario:hover { background: hsl(19 100% 45%); }
button.perigo {
  background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: hsl(var(--destructive));
}
button.perigo:hover { background: hsl(var(--destructive) / .88); }
button[disabled] { opacity: .55; cursor: not-allowed; }
button.link {
  border: 0; background: none; padding: 2px 4px; color: hsl(var(--link)); font-size: 13px; font-weight: 700;
}
button.link:hover { background: none; text-decoration: underline; }

label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
input, select {
  font: inherit; font-size: 14px; width: 100%; padding: 9px 12px;
  border-radius: 6px; border: 1px solid hsl(var(--input));
  background: hsl(var(--card)); color: hsl(var(--foreground));
}
input:focus, select:focus { border-color: hsl(var(--primary)); }
input:disabled { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
input[type="checkbox"], input[type="radio"] { accent-color: hsl(var(--primary)); width: 16px; height: 16px; }
.campo { margin-bottom: 14px; }
.dica { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 6px; }
.linha-check { display: flex; align-items: center; gap: 8px; }
.linha-check input { width: 16px; flex-shrink: 0; }
.linha-check label { margin: 0; }

/* ---------------------------------------------------------------- blocos */
.cartao {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra);
}
/* KPIs numa faixa única dividida por linhas finas, em vez de um cartão por
   número: lê-se como um placar, e ocupa menos altura. */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 18px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  box-shadow: var(--sombra); overflow: hidden;
}
.kpis:empty { display: none; }
.kpi { padding: 16px 18px; min-width: 0; box-shadow: 1px 0 0 hsl(var(--border)), 0 1px 0 hsl(var(--border)); }
.kpi b {
  display: block; font-size: 28px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 4px 0 2px;
}
.kpi span, .kpi .r {
  font-size: 12px; font-weight: 700; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .04em;
}
.kpi .a { display: block; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
/* Acionamento é o número que ninguém pode deixar passar batido. */
.kpi.destaque { background: linear-gradient(135deg, hsl(var(--destructive) / .08), transparent 70%); }
.kpi.destaque b { color: hsl(var(--destructive)); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; font-weight: 800; font-size: 12px; padding: 10px 14px; text-transform: uppercase; letter-spacing: .04em;
  color: hsl(var(--muted-foreground)); background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border)); white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: hsl(var(--muted) / .6); }
td.mono { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* min-width pra tabela ROLAR em vez de espremer: sem isso o width:100% fazia
   data e duração quebrarem em duas linhas quando a janela apertava. */
.rolagem { overflow-x: auto; }
.rolagem table { min-width: 680px; }

/* Etiqueta em pílula com ponto. A cor vem de --c (um token, ex. var(--primary)). */
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  color: hsl(var(--c)); background: hsl(var(--c) / .12);
}
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tag.mudo { opacity: .45; text-decoration: line-through; }

.vazio {
  text-align: center; padding: 56px 20px; color: hsl(var(--muted-foreground));
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
}
.vazio b { display: block; color: hsl(var(--foreground)); font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.erro {
  padding: 12px 15px; border-radius: var(--radius); font-size: 13.5px;
  color: hsl(var(--destructive)); background: hsl(var(--destructive) / .08);
  border: 1px solid hsl(var(--destructive) / .3);
}
.ok {
  padding: 12px 15px; border-radius: var(--radius); font-size: 13.5px;
  color: hsl(var(--sucesso)); background: hsl(var(--sucesso) / .08);
  border: 1px solid hsl(var(--sucesso) / .3);
}

/* ------------------------------------------------------------- responsivo */
@media (max-width: 860px) {
  .app, .app.recolhida { grid-template-columns: minmax(0, 1fr); }
  /* No celular a lateral vira gaveta, aberta pelo botão de menu. */
  .lateral {
    position: fixed; top: 0; bottom: 0; left: 0; width: 260px; z-index: 50;
    transform: translateX(-100%); transition: transform .2s;
  }
  .app.menu-aberto .lateral { transform: none; box-shadow: var(--sombra-alta); }
  .app.recolhida .lateral .marca b, .app.recolhida .lateral .grupo,
  .app.recolhida .lateral .item span, .app.recolhida .lateral .item .cont { display: revert; }
  .lateral .rodape-lat { display: none; }
  .topo, main { grid-column: 1; }
  .topo { padding: 0 12px; gap: 6px; }
  .so-cel { display: grid !important; }
  .bt-conta .rotulo, .ao-vivo-pilula .txt { display: none; }
  main { padding: 16px 16px 40px; }
  .kpis { grid-template-columns: 1fr 1fr; }
}