/* =============================================================
   TopGas · tokens e base

   A paleta saiu da LOGO, e nao de um gosto: os quatro tons da chama foram
   lidos pixel a pixel de `Logos/LogoPreta.jpeg` e `Logos/LogoBranca.jpeg`, que
   sao a mesma arte em fundo preto e em fundo branco. Vermelho, laranja,
   amarelo e azul, mais o preto e o branco da tipografia.

   DOIS TEMAS, porque a marca tem duas versoes. O claro e o padrao; o escuro
   responde a `data-tema="escuro"` no <html>, que `public/js/tema.js` grava e
   restaura. Todo papel de cor existe nos dois: mexer em um sem mexer no outro
   produz texto invisivel em metade do sistema.

   O acento e o LARANJA DA LOGO, com texto ESCURO em cima. O laranja vivo com
   branco da 2,3:1 de contraste, que reprova em qualquer criterio; escurecer o
   laranja ate o branco passar o transforma num marrom que nao e a marca. Texto
   escuro sobre o laranja original da 8,2:1 e mantem a cor que a pessoa ve na
   fachada. Por isso existe `--accent-text`, e nenhum botao de acento usa #fff
   direto.
   ============================================================= */

:root {
  /* ---- Marca: os quatro tons da chama, como saem da logo ---- */
  --marca-vermelho: #FD2C15;
  --marca-laranja:  #FD8D3C;
  --marca-amarelo:  #FCCE1C;
  --marca-azul:     #4BA1F4;

  /* Escalas derivadas, mesmo matiz, so luz e saturacao mudam. Os tons 700+
     sao os unicos que aceitam texto branco; os 50 a 200 servem de fundo. */
  --laranja-50: #FCEEE3;  --laranja-100: #F7DBC6; --laranja-200: #F2C09B;
  --laranja-400: #EB8942; --laranja-500: #FD8D3C; --laranja-600: #D5752F;
  --laranja-700: #AC5D24; --laranja-800: #894B1E;

  --vermelho-50: #FCE6E3; --vermelho-100: #F7CBC6;
  --vermelho-600: #D5210E; --vermelho-700: #AC1808; --vermelho-800: #891609;

  --amarelo-50: #FCF7E3; --amarelo-100: #F7EDC6;
  --amarelo-700: #AB8B0D; --amarelo-800: #886F0D;

  --azul-50: #E3F0FC; --azul-100: #C6DFF7; --azul-500: #4BA1F4;
  --azul-600: #3C86CD; --azul-700: #2E6BA6; --azul-800: #275684;

  /* Neutros. A logo e preta e branca, entao o cinza do sistema e neutro de
     verdade, sem o azul-noite da paleta provisoria. */
  --cinza-50: #FAFAFA;  --cinza-100: #F4F4F5; --cinza-200: #E7E7EA;
  --cinza-300: #D6D6DA; --cinza-400: #A8A8AF; --cinza-500: #78787F;
  --cinza-600: #55555C; --cinza-700: #3C3C42; --cinza-800: #26262B;
  --cinza-900: #18181B; --cinza-950: #0E0E10;

  /* ---- Papeis · TEMA CLARO ---- */
  --primary: #18181B;
  --primary-light: #3C3C42;
  --secondary: #26262B;

  /* Superficie que continua ESCURA nos dois temas, sempre com texto branco:
     topo do PDV, do painel e do app do entregador, total do PDV. `--primary`
     nao serve para isso porque inverte no tema escuro, e o texto branco por
     cima sumia (16-09-26). No claro e o mesmo tom de antes. */
  --superficie-escura: var(--cinza-900);

  --accent: var(--laranja-500);
  --accent-hover: var(--laranja-600);
  --accent-light: var(--laranja-50);
  /* Sobre o laranja da marca o texto e escuro. Ver o comentario do topo. */
  --accent-text: #2A1608;

  --bg: #FAFAFA;
  --card: #FFFFFF;
  --card-border: #E7E7EA;
  --border: #E7E7EA;
  --border-forte: #D6D6DA;

  /* A sidebar e preta como a logo, e nao azul. E o maior bloco de marca que
     o ERP mostra o dia inteiro. */
  --sidebar: #121214;
  --sidebar-hover: #26262B;
  --sidebar-text: #FAFAFA;
  --sidebar-muted: #8A8A92;

  --text: #18181B;
  --text-light: #55555C;
  --text-fraco: #8A8A92;

  --success: #15703C;
  --success-bg: #DCFCE7;
  --warning: var(--amarelo-800);
  --warning-bg: var(--amarelo-50);
  --danger: var(--vermelho-700);
  --danger-bg: var(--vermelho-50);
  --info: var(--azul-700);
  --info-bg: var(--azul-50);

  --shadow: 0 1px 2px rgba(14, 14, 16, .06);
  --shadow-strong: 0 4px 12px rgba(14, 14, 16, .10);
  --shadow-modal: 0 20px 50px rgba(14, 14, 16, .24);

  --radius: 6px;
  --radius-lg: 10px;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --header-h: 56px;
  --sidebar-w: 232px;
}

/* ---- Papeis · TEMA ESCURO ----
   So os papeis mudam. As cores da marca e as escalas continuam valendo, que e
   o ponto de terem sido separadas: a chama e a mesma nos dois temas.

   O acento fica no laranja 400, um pouco menos claro: o 500 sobre fundo quase
   preto vibra demais e cansa em tela grande num turno inteiro. */
[data-tema="escuro"] {
  --primary: #FAFAFA;
  --primary-light: #D6D6DA;
  --secondary: #E7E7EA;

  /* O preto da sidebar: um tom abaixo do fundo, entao o total do PDV continua
     destacado da coluna em volta. */
  --superficie-escura: #08080A;

  --accent: var(--laranja-400);
  --accent-hover: var(--laranja-500);
  --accent-light: rgba(253, 141, 60, .14);
  --accent-text: #1A0E04;

  --bg: #0E0E10;
  --card: #18181B;
  --card-border: #2E2E34;
  --border: #2E2E34;
  --border-forte: #3C3C42;

  --sidebar: #08080A;
  --sidebar-hover: #1F1F24;
  --sidebar-text: #FAFAFA;
  --sidebar-muted: #8A8A92;

  --text: #F4F4F5;
  --text-light: #A8A8AF;
  --text-fraco: #78787F;

  /* Fundo de estado vira translucido: cor chapada de tema claro (#DCFCE7)
     sobre fundo escuro cega, e o texto por cima some. */
  --success: #4ADE80;
  --success-bg: rgba(74, 222, 128, .14);
  --warning: var(--marca-amarelo);
  --warning-bg: rgba(252, 206, 28, .14);
  --danger: #F87171;
  --danger-bg: rgba(253, 44, 21, .16);
  --info: var(--marca-azul);
  --info-bg: rgba(75, 161, 244, .14);

  /* Sombra quase nao aparece no escuro. Quem separa camada ali e a borda, e
     por isso `--card-border` sobe de tom em vez de a sombra escurecer. */
  --shadow: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-strong: 0 4px 14px rgba(0, 0, 0, .50);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, .65);
}

/* A troca de tema nao pode piscar o branco da pagina antes do CSS aplicar. O
   `color-scheme` avisa o navegador, e ele pinta a barra de rolagem e o fundo
   nativo do jeito certo desde o primeiro quadro. */
:root { color-scheme: light; }
[data-tema="escuro"] { color-scheme: dark; }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* O `display:none` que o navegador da ao [hidden] e regra de agente de usuario
   e perde para qualquer seletor de classe. Sem este !important, todo elemento
   com display proprio (`.pdv-troco { display: flex }`) ignora o hidden e
   aparece na tela. Foi assim que o bloco do troco vazou no PDV. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--accent-hover); }

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

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--text); }
h1 { font-size: 20px; letter-spacing: -.01em; }
h2 { font-size: 16px; }
h3 {
  font-size: 11px; font-weight: 600; color: var(--text-light);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px;
}

.muted { color: var(--text-light); }
.fraco { color: var(--text-fraco); }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num   { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* Foco visivel de verdade. No PDV o operador precisa saber onde o Enter cai. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ------- Layout de pagina do ERP ------- */
.app { display: flex; min-height: 100vh; }
.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
  height: var(--header-h);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  position: sticky; top: 0; z-index: 20;
}
.topo .titulo-pagina { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.topo .espaco { flex: 1; }

.usuario-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: var(--radius);
  cursor: pointer;
}
.usuario-chip:hover { background: var(--bg); }
.usuario-chip .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  /* Texto na cor do fundo, e nao branco fixo: no tema escuro o circulo fica
     claro e as iniciais em branco sumiam. */
  background: var(--primary); color: var(--bg);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
}
.usuario-chip .nome { font-weight: 500; font-size: 12px; line-height: 1.2; }
.usuario-chip .cargo { font-size: 11px; color: var(--text-light); line-height: 1.2; }

.pagina { padding: 20px; flex: 1; }
.pagina-cabecalho {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.pagina-cabecalho .espaco { flex: 1; }
.pagina-cabecalho p { color: var(--text-light); font-size: 12px; margin-top: 2px; }

.grade { display: grid; gap: 16px; }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ------- Toast ------- */
#toasts {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  padding: 11px 13px;
  display: flex; gap: 10px; align-items: flex-start;
  animation: toast-entra .18s ease-out;
}
@keyframes toast-entra { from { opacity: 0; transform: translateX(12px); } }
.toast.sucesso { border-left-color: var(--success); }
.toast.erro    { border-left-color: var(--danger); }
.toast.aviso   { border-left-color: var(--warning); }
.toast .corpo { flex: 1; min-width: 0; }
.toast .titulo { font-weight: 600; font-size: 12px; }
.toast .msg { font-size: 12px; color: var(--text-light); margin-top: 1px; }
.toast .fechar {
  cursor: pointer; color: var(--text-fraco);
  font-size: 16px; line-height: 1; background: none; border: 0; padding: 0 2px;
}
.toast .fechar:hover { color: var(--text); }

/* ------- Loading ------- */
.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--border-forte); border-top-color: var(--accent);
  animation: girar .7s linear infinite;
  display: inline-block; vertical-align: -2px;
}
@keyframes girar { to { transform: rotate(360deg); } }

.carregando {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 36px; color: var(--text-light); font-size: 12px;
}

.vazio {
  padding: 44px 20px; text-align: center; color: var(--text-light);
}
.vazio .icone { opacity: .35; margin-bottom: 10px; }
.vazio .titulo { font-weight: 600; color: var(--text); margin-bottom: 3px; font-size: 13px; }
.vazio .dica { font-size: 12px; }

@media (max-width: 820px) {
  .pagina { padding: 14px; }
  .topo { padding: 0 14px; }
}