/*
Stylesheet único do Gold OS (2026-08-20) — sem framework, sem build, servido como
arquivo estático via StaticFiles (ver app/main.py). Aplica só em cima do HTML que
já existe: nenhuma página foi restruturada pra receber isto, então o CSS aqui
mira tags genéricas (table, form, nav...) que já aparecem em toda tela, mais só
as poucas classes que _cabecalho() e as páginas de login controlam diretamente.

2026-08-21: nav virou sidebar lateral fixa. Continua sem tocar HTML de página
nenhuma — o truque é `body:has(.sidebar)`: como as telas de login não têm
.sidebar (só usam _head_html(), sem _cabecalho()), elas continuam com o layout
centralizado de sempre; só as páginas que de fato têm a sidebar (todo o resto)
ganham o recuo à esquerda. Suporte a :has() é a mesma aposta de "navegador
moderno" já feita pela View Transitions API logo abaixo — ambos são
progressive enhancement (navegador sem suporte cai no layout anterior/normal,
sem quebrar nada).

2026-08-21: identidade visual oficial da Gold Express (MIV) aplicada por cima
de tudo isso — cores (--ge-blue/--ge-blue-dark/--ge-gold, extraídas dos SVGs
reais do MIV, ver static/img/) e tipografia (Poppins, 3 pesos só, via
@font-face). Cores SEMÂNTICAS de status (vermelho de alerta, verde de OK,
amarelo de atenção) não fazem parte dessa troca — continuam com o hex que já
tinham, em todo lugar que já usavam antes. Dourado é usado só como acento
gráfico (borda, linha de meta em gráfico, barra de progresso) — nunca como
cor de texto pequeno em fundo claro, por contraste.
*/

/* Native cross-document transition entre páginas do mesmo domínio — navegador
   sem suporte ignora esta regra (at-rule desconhecida) e navega normal, sem
   erro e sem precisar de nenhum JS/polyfill. */
@view-transition {
  navigation: auto;
}

/* Poppins (MIV) — só os 3 pesos usados de fato no app (Regular/SemiBold/Bold),
   por performance; outros pesos (ex.: 500 de botão) caem no mais próximo
   carregado via font-matching do próprio navegador, não em mais um arquivo. */
@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cor-texto: #1a1a1a;
  --cor-texto-suave: #5b6270;
  --cor-fundo: #ffffff;
  --cor-borda: #d8dae0;
  --cor-borda-forte: #a9adba;
  --cor-zebra: #f7f8fa;
  --cor-hover-linha: #eaf1fc;
  --cor-cabecalho-tabela: #eef0f4;

  /* Marca oficial (MIV) — extraídas dos SVGs reais em static/img/, conferido
     via grep nos próprios arquivos (#3466ae e #d2bd27 aparecem literalmente
     neles). --ge-blue-dark é tom próprio pro fundo escuro da sidebar — dá
     ~8:1 de contraste com texto branco (WCAG AAA), não precisou ajustar. */
  --ge-blue: #3466ae;
  --ge-blue-dark: #27508c;
  --ge-gold: #d2bd27;

  --cor-link: var(--ge-blue);
  --cor-link-hover: var(--ge-blue-dark);
  --cor-nav-fundo: var(--ge-blue-dark);
  --cor-nav-texto: #ffffff;
  --cor-nav-hover: rgba(255, 255, 255, 0.08);

  --fonte-sistema: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --fonte-principal: "Poppins", var(--fonte-sistema);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--fonte-principal);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  line-height: 1.5;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 20px 56px;
  animation: gold-os-fade-in 0.15s ease-in;
}

/* Páginas com sidebar (todas exceto login) recuam pra abrir espaço pra ela,
   mantendo a mesma largura de leitura de sempre (980px de conteúdo). */
body:has(.sidebar) {
  max-width: 1200px;
  margin: 0;
  padding-left: 240px;
}

@keyframes gold-os-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

h1 {
  font-size: 1.55rem;
  margin: 0.5em 0 0.5em;
  line-height: 1.25;
}

h2 {
  font-size: 1.2rem;
  margin: 1.1em 0 0.4em;
}

h3 {
  font-size: 1.02rem;
  margin: 0.9em 0 0.35em;
}

p {
  margin: 0.6em 0;
}

small {
  color: var(--cor-texto-suave);
}

a {
  color: var(--cor-link);
  text-decoration: none;
}

a:hover {
  color: var(--cor-link-hover);
  text-decoration: underline;
}

hr {
  border: none;
  border-top: 1px solid var(--cor-borda);
  margin: 1.2em 0;
}

/* ---------- Tabelas: o coração de quase toda tela ---------- */

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.7em 0 1.3em;
  font-size: 0.95rem;
}

th,
td {
  border: 1px solid var(--cor-borda);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--cor-cabecalho-tabela);
  font-weight: 600;
  white-space: nowrap;
}

tbody tr:nth-child(even) {
  background: var(--cor-zebra);
}

tbody tr:hover {
  background: var(--cor-hover-linha);
}

/* ---------- Formulários e botões ---------- */

form {
  margin: 0.8em 0;
}

label {
  display: inline-block;
  margin: 0.35em 0;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 6px 9px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 4px;
  background: #fff;
  color: var(--cor-texto);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--cor-link);
  outline-offset: 1px;
}

button,
input[type="submit"] {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 18px;
  border: 1px solid var(--ge-blue);
  border-radius: 4px;
  background: var(--ge-blue);
  color: #ffffff;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
  background: var(--ge-blue-dark);
  border-color: var(--ge-blue-dark);
}

button:active,
input[type="submit"]:active {
  background: var(--ge-blue-dark);
  opacity: 0.85;
}

/* ---------- Sidebar de navegação (2026-08-21) ---------- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--cor-nav-fundo);
  overflow-y: auto;
  z-index: 1000;
  /* Nome estável pro View Transitions API: como a sidebar é praticamente
     idêntica de uma página pra outra (só o item ativo muda), isso faz o
     navegador tratá-la como um elemento persistente na transição em vez de
     cruzar-desvanecer a página inteira (incluindo a sidebar) de uma vez —
     só o conteúdo do meio "troca", a sidebar fica estável. Sem efeito em
     navegador sem suporte a View Transitions. */
  view-transition-name: gold-os-sidebar;
}

.sidebar-logo {
  display: block;
  padding: 18px 16px 8px;
}

.sidebar-logo img {
  display: block;
  width: 170px;
  max-width: 100%;
  height: auto;
}

.sidebar-scroll {
  flex: 1;
  padding: 16px 0;
}

.sidebar-grupo {
  margin-bottom: 18px;
}

.sidebar-titulo-grupo {
  color: #a8c4e8;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 16px;
  margin-bottom: 6px;
}

.sidebar a {
  display: block;
  color: var(--cor-nav-texto);
  padding: 8px 16px;
  font-size: 0.9rem;
}

.sidebar a:hover {
  background: var(--cor-nav-hover);
  text-decoration: none;
}

.sidebar a.ativo {
  background: rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--ge-gold);
  padding-left: 13px;
  font-weight: 600;
}

.sidebar-rodape {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-rodape .cabecalho-frescor,
.sidebar-rodape .cabecalho-frescor-erro {
  font-size: 0.75rem;
  margin: 0 0 0.6em;
}

/* Frescor normal: cor clara (a padrão --cor-texto-suave é escura demais pro
   fundo azul da sidebar). Frescor com erro: mesmo vermelho de sempre
   (#b91c1c, papel semântico intocado), só que como chip com texto branco em
   vez de texto vermelho direto no fundo escuro — vermelho sobre azul escuro
   dá ~1.2:1 de contraste, praticamente ilegível; o chip resolve isso sem
   trocar o vermelho por outra cor. */
.sidebar-rodape .cabecalho-frescor {
  color: rgba(255, 255, 255, 0.75);
}

.sidebar-rodape .cabecalho-frescor-erro {
  display: inline-block;
  color: #ffffff;
  background: #b91c1c;
  padding: 2px 7px;
  border-radius: 4px;
}

.sidebar-sair {
  display: inline-block;
  color: var(--cor-nav-texto);
  opacity: 0.8;
  font-size: 0.88rem;
}

.sidebar-sair:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Escondidos por padrão (desktop) — só aparecem no breakpoint mobile abaixo. */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1002;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--cor-nav-fundo);
  color: var(--cor-nav-texto);
  border: none;
  border-radius: 6px;
  font-size: 1.2rem;
  cursor: pointer;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.cabecalho-frescor {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  margin: 0 0 1.1em;
}

.cabecalho-frescor-erro {
  color: #b91c1c;
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0 0 1.1em;
}

/* ---------- Barra de progresso de navegação (static/nav.js) ---------- */

#gold-os-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  opacity: 0;
  background: var(--ge-gold);
  z-index: 2000;
  pointer-events: none;
}

/* ---------- Login (pré-autenticação) ---------- */

.login-container {
  max-width: 380px;
  margin: 8vh auto 0;
  padding: 28px 30px;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
}

.login-logo {
  display: block;
  width: 200px;
  max-width: 70%;
  height: auto;
  margin: 0 auto 1.2em;
}

.login-container h1 {
  text-align: center;
  margin-top: 0;
}

.login-container form p {
  margin: 0.9em 0;
}

.login-container label {
  display: block;
  font-size: 0.92rem;
}

.login-container input {
  width: 100%;
  margin-top: 4px;
}

.login-container button {
  width: 100%;
  margin-top: 0.6em;
}

.login-container small {
  display: block;
  text-align: center;
  margin-top: 1em;
}

/* ---------- Gráficos (Chart.js) ---------- */

.chart-container {
  position: relative;
  height: 320px;
  margin: 1em 0 1.6em;
}

/* ---------- Briefing do CEO Daily (2026-08-21, blocos em vez de parágrafo único) ---------- */

.briefing-ceo h3 {
  margin-top: 0.7em;
  margin-bottom: 0.3em;
}

.briefing-abertura {
  font-size: 1.05rem;
  margin: 0;
}

.briefing-lista {
  margin: 0 0 0.3em;
  padding-left: 1.2em;
  font-size: 0.92rem;
}

.briefing-lista li {
  margin: 0.25em 0;
}

.briefing-nota {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  margin: 0.2em 0 0.6em;
}

.briefing-atencao {
  font-weight: 600;
  margin: 0.8em 0 0;
}

/* Selo das linhas do livro-caixa importadas da planilha (registro histórico,
   fora do cálculo do capital) */
.selo-planilha {
  display: inline-block;
  background: var(--cor-cabecalho-tabela);
  color: var(--cor-texto-suave);
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.72rem;
}

/* ---------- Responsivo ---------- */

/* Sidebar vira menu off-canvas (escondida por padrão, abre por cima do
   conteúdo) — breakpoint próprio, mais largo que o de tabela/fonte abaixo,
   porque 220px de sidebar fixa já fica apertado bem antes de 640px. */
@media (max-width: 860px) {
  body:has(.sidebar) {
    max-width: 980px;
    margin: 0 auto;
    padding-left: 20px;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
  }

  .sidebar.sidebar-aberta {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: flex;
  }

  .sidebar-overlay.sidebar-overlay-ativa {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }
}

@media (max-width: 640px) {
  body {
    padding: 10px 12px 40px;
  }

  h1 {
    font-size: 1.3rem;
  }

  /* Tabela vira caixa com scroll horizontal em vez de estourar a tela — sem
     precisar de nenhum wrapper novo em cada página, o próprio <table> vira o
     contêiner rolável. */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .login-container {
    margin-top: 4vh;
    padding: 22px 18px;
  }

  .chart-container {
    height: 240px;
  }
}