/**
 * app.css — a casca compartilhada do Fit.ai (pendência 6.1).
 *
 * Pedido do Marcelo (22/07/2026): barra lateral FIXA de navegação, igual ao
 * Betta.ai Finance, hospedando os acessos rápidos.
 *
 * Aplicado no painel e nas telas `/ask`, `/connections`, `/profile`, `/admin` e
 * `/inbox`. Fora, de propósito: `login`, `invite` e `privacidade` (ninguém
 * logado, nada a navegar) e os relatórios semanais gerados pelo Python.
 *
 * **As variáveis de cor NÃO são declaradas aqui, de propósito.** Cada tela do
 * Fit.ai declara as dela no `<style>` inline (`--text`, `--muted`, `--border`,
 * `--blue`…), e este arquivo é carregado ANTES desse bloco. Redeclarar aqui
 * criaria duas fontes para a mesma cor — e divergência de cor não quebra nada,
 * só fica errado em uma tela só, que é o tipo de bug que ninguém vê. Unificar
 * as paletas é trabalho de outra rodada; aqui a casca só USA os nomes que as
 * telas já definem.
 *
 * **Por isso todo `var()` daqui leva fallback.** Ao espalhar a casca (22/07)
 * descobriu-se que `--light` não existe em NENHUMA das outras 5 telas, e
 * `--blue` falta no `/ask` — só o painel tinha a paleta completa. Variável CSS
 * ausente **não dá erro**: a declaração inteira é descartada em silêncio, e o
 * item ativo simplesmente deixaria de ficar destacado no `/ask`. É a mesma
 * família de "o valor errado não estoura, ele passa" que o `CLAUDE.md`
 * descreve. O fallback não é redeclaração — só vale onde a tela não definiu
 * nada. `shell_dom.test.js` trava a regra.
 */

:root {
  /* Larga o bastante pro rótulo caber sem cortar. Vira faixa de ícones no
     celular — ver o @media no fim do arquivo. */
  --sidebar-w: 232px;

  /* ── A base, e por que ela passou a morar aqui (22/07/2026) ───────────────
   *
   * Enquanto TODA tela era um HTML inteiro, cada uma declarava a própria
   * paleta e o próprio reset no `<style>` — e por isso este arquivo podia se
   * dar ao luxo de só usar as variáveis, sem declarar nenhuma.
   *
   * O SPA quebrou essa premissa: `app.html` é uma casca vazia, não tem
   * `<style>` de tela nenhuma. Sem estes valores aqui, a primeira tela
   * convertida abriu com **fonte serifada** e sem cor de fundo — não quebrou
   * nada, não acusou erro, só ficou com cara de outro produto. Nenhum teste
   * pegaria; foi o olho, no preview local.
   *
   * Isto NÃO conflita com as telas que ainda são página inteira: o `<style>`
   * delas vem depois deste arquivo e continua vencendo, exatamente como antes.
   * Quando a última tela virar SPA, estas passam a ser as únicas — e aí a
   * unificação da paleta acontece de graça, em vez de virar uma força-tarefa. */
  --bg:     #f0f4f8;
  --card:   #ffffff;
  --border: #e5e7eb;
  --text:   #111827;
  --muted:  #6b7280;
  --light:  #f9fafb;
  --blue:   #3b82f6;
  --teal:   #0ea5e9;
  --purple: #7c3aed;
  --orange: #f97316;
  --amber:  #f59e0b;
  --green:  #22c55e;
  --red:    #ef4444;
}

/* Mesma história do bloco acima: o reset vivia no `<style>` de cada tela.
   Repetir aqui é inofensivo pras telas antigas (elas declaram o mesmo, depois)
   e indispensável pro `app.html`, que não declara nada. */
body.has-shell,
body.has-shell * { box-sizing: border-box; }
body.has-shell {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg, #f0f4f8);
  color: var(--text, #111827);
  min-height: 100vh;
}

/* ── barra lateral ────────────────────────────────────────────────────────── */

.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w);
  background: #fff; border-right: 1px solid var(--border, #e5e7eb);
  display: flex; flex-direction: column; padding: 16px 0 12px;
  overflow-y: auto; z-index: 300;
}
/* A lateral rola; sem isto o bloco de acesso rápido espremeria a navegação
   quando a lista crescesse. */
.sidebar > * { flex-shrink: 0; }

.sidebar .sb-logo { display: flex; align-items: center; gap: 9px; padding: 0 16px 14px;
                    text-decoration: none; color: var(--text, #111827); }
.sidebar .sb-logo img { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.sidebar .sb-logo b   { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }

.sidebar nav { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; }

.sb-sec { font-size: 10px; font-weight: 800; color: var(--muted, #6b7280); letter-spacing: .09em;
          text-transform: uppercase; padding: 14px 16px 6px; }

.sb-item { position: relative; display: flex; align-items: center; gap: 10px;
           padding: 9px 12px; border-radius: 9px; text-decoration: none;
           color: var(--muted, #6b7280); font-size: 13.5px; font-weight: 600; line-height: 1.2;
           transition: color .12s, background .12s; }
.sb-item:hover  { color: var(--text, #111827); background: var(--light, #f9fafb); }
.sb-item.active { color: var(--blue, #3b82f6); background: #eff6ff; }
.sb-item .sb-ico { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; }
.sb-item .sb-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* empurra Perfil/Sair pro rodapé da lateral */
.sidebar .sb-spacer { flex: 1 1 auto; min-height: 8px; }

/* contador do sininho, na própria linha da navegação */
.sb-badge { margin-left: auto; background: var(--red, #ef4444); color: #fff; font-size: 10px;
            font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px;
            padding: 0 4px; display: none; align-items: center; justify-content: center; }

/* ── acesso rápido dentro da lateral ──────────────────────────────────────────
 *
 * O HTML dos cards continua saindo de `renderQuickAccess()` no index.html,
 * intocado — o que muda é ONDE ele é colocado e como é estilizado. Foi
 * deliberado: aquela função tem 5 testes (`index_quick_access.test.js`) que a
 * extraem por texto do HTML, e reescrevê-la faria uma mudança visual arrastar
 * junto um risco que ela não precisa ter. Aqui o grid vira lista vertical. */
/* O título vem do `.sb-sec` da casca; do bloco original aproveita-se só o
   período da semana, que `renderQuickAccess()` já calcula — recalcular aqui
   seria a mesma data derivada em dois lugares. */
.sb-quick .quick-head   { display: block; padding: 0 16px 6px; }
.sb-quick .quick-title  { display: none; }
.sb-quick .quick-period { font-size: 10.5px; color: var(--muted, #6b7280); }
.sb-quick .quick-grid   { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; }
.sb-quick .quick-card   { display: flex; align-items: center; gap: 10px; text-align: left;
                          background: none; border: none; border-radius: 9px;
                          padding: 7px 12px; text-decoration: none; }
.sb-quick .quick-card:hover { background: var(--light, #f9fafb); box-shadow: none; }
.sb-quick .quick-card-icon  { width: 22px; height: 22px; border-radius: 6px; font-size: 12px;
                              display: flex; align-items: center; justify-content: center;
                              flex-shrink: 0; }
.sb-quick .quick-card-label { font-size: 13px; font-weight: 600; color: var(--muted, #6b7280);
                              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-quick .quick-card:hover .quick-card-label { color: var(--text, #111827); }
.sb-quick .quick-card-link  { display: none; }    /* "Ver semana →" não cabe na lateral */

/* ── véu: cobre a piscada entre telas ─────────────────────────────────────────
 *
 * `pointer-events:none` enquanto apagado, senão ele engoliria os cliques da
 * tela inteira. A transição é curta de propósito: o véu existe pra suavizar,
 * não pra ser percebido como espera. Ele cobre o conteúdo mas NÃO a lateral
 * (z-index menor que a dela) — numa navegação SPA a lateral não recarrega, e
 * escurecê-la daria a impressão errada de que tudo foi embora. */
#shVeu {
  position: fixed; inset: 0 0 0 var(--sidebar-w); z-index: 290;
  background: var(--bg, #f0f4f8); opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
#shVeu.on { opacity: .72; pointer-events: all; }

@media (prefers-reduced-motion: reduce) {
  #shVeu { transition: none; }
}

/* ── o conteúdo da página cede espaço pra lateral ─────────────────────────── */

body.has-shell { padding-left: var(--sidebar-w); }

/* ── celular: lateral vira faixa de ícones ────────────────────────────────── */

@media (max-width: 760px) {
  :root { --sidebar-w: 62px; }
  .sidebar { padding-top: 12px; }
  .sidebar .sb-logo { padding: 0 0 12px; justify-content: center; }
  .sidebar .sb-logo b,
  .sb-item .sb-txt,
  .sb-sec,
  .sb-quick .quick-head { display: none; }
  .sidebar nav, .sb-quick .quick-grid { padding: 0 6px; }
  .sb-item { justify-content: center; padding: 10px 0; }
  .sb-quick .quick-card { justify-content: center; padding: 8px 0; }
  /* separador no lugar do rótulo da seção, que some aqui */
  .sb-quick { border-top: 1px solid var(--border, #e5e7eb); margin-top: 10px; padding-top: 10px; }
  .sb-badge { position: absolute; margin: 0; transform: translate(12px, -10px); }
}