/**
 * ============================================================
 * StockMVP - Base (Reset + Estrutura Padrão das Telas Internas)
 * ============================================================
 * Contém:
 *  1. Reset global (aplicado em toda página que carregar este arquivo).
 *  2. Estrutura repetida nas telas COM sidebar (dashboard, clientes,
 *     produtos, vendas, histórico): a classe raiz é ".app-shell".
 *
 * IMPORTANTE: a tela de login tem layout próprio (cartão central,
 * sem sidebar) e por isso NÃO usa ".app-shell" — ela usa ".container"
 * definido em login/login.css. São nomes de classe diferentes de
 * propósito para os dois nunca colidirem.
 * ============================================================
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
  text-decoration: none;
  list-style-type: none;
}

/*
 * Reserva SEMPRE o espaço da barra de rolagem vertical, mesmo quando a
 * página ainda não tem conteúdo suficiente pra rolar.
 *
 * Sem isto, toda tela que carrega dados por API "pulava" de lado: a
 * página nasce curta (sem barra), os dados chegam, a tabela/grade
 * cresce, a barra aparece e o viewport encolhe uns 15px — como
 * .main-content é calc(100% - 280px), o conteúdo inteiro (incluindo a
 * fileira de abas/botões do topo) desliza pra esquerda e, se algo
 * encolhe depois (filtro, busca), desliza de volta. Era esse o
 * "muda de lugar e volta" que o operador via a cada clique de menu.
 */
html {
  scrollbar-gutter: stable;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease;
  /* Suavização do traço: sem isto o texto fica encorpado demais no
     Windows e a tela inteira parece mais pesada do que é. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Campo de formulário puxa um tamanho de fonte próprio do navegador em vez
 * de herdar o do resto do site (nenhum CSS daqui definia isso) — como esse
 * padrão do navegador fica abaixo de 16px, o iPhone dá zoom sozinho na tela
 * inteira sempre que o campo ganha foco pra digitar. Forçar 16px aqui evita
 * o zoom sem mudar a aparência em nenhuma tela (os campos já pareciam ter
 * esse tamanho, só que "por acidente").
 */
input, select, textarea {
  font-size: 16px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* Título grande com espaçamento natural fica esparramado; um respiro
     negativo deixa a palavra mais compacta e mais firme. */
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/*
 * Número em fonte proporcional muda de largura a cada dígito trocado (o
 * "1" é estreito), e a coluna de preço/estoque fica desalinhada de uma
 * linha pra outra. `tabular-nums` dá a todo dígito a mesma largura — é o
 * que faz uma tabela de valores parecer relatório, e não texto corrido.
 */
table,
input,
.kpi-card h1,
.badge,
.status-badge {
  font-variant-numeric: tabular-nums;
}

/* --- CASCA DA APLICAÇÃO (sidebar + conteúdo) --- */
.app-shell {
  display: flex;
  width: 100%;
}

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--color-surface);
  position: fixed;
  left: 0;
  top: 0;
  /* Traço de 1px no lugar da sombra: contra o fundo claro a sombra difusa
     virava um borrão cinza ao longo de toda a altura da tela. O menu não é
     um cartão flutuante, é a parede da tela — sombra só quando ele se
     expande POR CIMA do conteúdo (ver o :hover do menu compacto). */
  border-right: 1px solid var(--color-border);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.logo {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-primary);
  padding: 0 1rem;
}
/* Mesma caixa de 36px do <img> que pode substituir este ícone logo abaixo:
   sem isso, a loja com logo própria via o topo da sidebar se reajustar
   quando a logo chegava, porque o ícone de fonte é mais estreito. */
.logo i {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Substitui o ícone quando a loja tem logo própria cadastrada (ver
   aplicarLogoDaLoja em shared/js/http-client.js). */
.sidebar-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}
.logo h2 {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Barra de rolagem em TODA a aplicação: fina e na cor do tema, em vez da
 * cinza/quadrada do sistema, que destoava do visual. Vale pra qualquer
 * área que role (menu, tabelas, grades de produto, modais, extratos) —
 * antes só o menu lateral tinha esse tratamento.
 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
*::-webkit-scrollbar-corner { background: transparent; }
.menu {
  margin-top: 20px;
  flex: 1;
  overflow-y: auto;
  /* Mesmo motivo do `html` lá em cima: o menu também rola, e sem isto
     ele encolhe 8px quando a barra aparece. */
  scrollbar-gutter: stable;
}

/*
 * Itens de funcionalidade opcional (Comandas, Débitos, Catálogo) nascem
 * ESCONDIDOS e só aparecem quando a loja tem a flag ligada. O caminho
 * inverso — mostrar tudo e esconder depois — fazia o menu inteiro pular
 * assim que a resposta chegava, e o item que a pessoa acabou de clicar
 * "descia" sozinho.
 *
 * Quem revela é uma classe na <html> (`feat-comanda` etc.), e não uma
 * classe no próprio <li>, porque assim o script inline do <head> já
 * consegue aplicar a decisão ANTES do primeiro desenho da tela, lendo o
 * que ficou salvo do último carregamento (ver applyFeatureFlagsToSidebar
 * em http-client.js). Esconder-e-revelar depois da resposta resolvia só
 * a loja SEM as funcionalidades; na loja QUE TEM, os itens apareciam
 * atrasados e empurravam pra baixo tudo que estava embaixo deles —
 * continuava pulando na cara de quem mais usa o sistema.
 *
 * A resposta da API continua mandando: quando chega, ela confirma ou
 * corrige essas classes e regrava o cache. O cache é só pra evitar o
 * pulo, nunca pra decidir acesso (o backend recusa a ação de qualquer
 * jeito — ver ComandaService/StoreCatalogService.require*Enabled).
 */
.menu li[data-feature] { display: none; }
html.feat-comanda .menu li[data-feature="comanda"],
html.feat-cozinha .menu li[data-feature="cozinha"],
html.feat-fiado   .menu li[data-feature="fiado"],
html.feat-catalog .menu li[data-feature="catalog"] { display: block; }

/*
 * Cada item é uma pastilha: o espaçamento saiu do <li> e foi pro <a>, que
 * é quem recebe fundo e cantos arredondados no hover e no item ativo. No
 * <li>, o realce ia de ponta a ponta da barra e ficava com cara de linha
 * de tabela selecionada.
 */
.menu li {
  padding: 0 0.75rem;
  margin-bottom: 2px;
}
.menu li a {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  transition: color 0.15s ease, background 0.15s ease;
}
/*
 * Largura fixa pro ícone de cada item. O Font Awesome vem de CDN: até a
 * fonte dele chegar, o <i> ocupa 0 (glifo inexistente) e todo o texto do
 * menu fica encostado à esquerda; quando chega, cada rótulo salta pra
 * direita uma distância diferente, porque cada ícone tem sua própria
 * largura. Reservando a caixa, o texto já nasce no lugar definitivo e o
 * ícone só "preenche" o espaço que sempre foi dele.
 */
.menu li a i {
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}
.menu li:hover a {
  color: var(--color-text);
  background: var(--color-surface-alt);
}
/*
 * O item ativo é uma pastilha cheia na cor da loja. Antes era o texto
 * pintado com o gradiente (recortado por background-clip) mais uma barra
 * de 4px na borda direita da barra inteira: o texto em gradiente perde
 * contraste conforme a paleta da loja, e a barrinha lateral só aparecia
 * no menu largo, sumindo justamente no modo compacto, que é o do dia a dia.
 */
.menu li.active a {
  background: var(--color-info-bg);
  color: var(--color-primary);
  font-weight: 600;
}
.logout-item {
  margin-top: auto;
  margin-bottom: 2rem;
}
.logout-item a { color: var(--color-danger) !important; }

.main-content {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  padding: 2rem;
}

/*
 * --- MENU COMPACTO (só ícones, expande no hover) ---
 * A barra de 280px comia espaço de tela o tempo todo, e o operador olha
 * pro menu por 1 segundo a cada meia hora. Em telas largas com mouse ela
 * fica com 76px — só os ícones — e volta ao tamanho cheio quando o
 * ponteiro entra nela.
 *
 * Duas decisões que importam:
 *  - a expansão é POR CIMA do conteúdo (a sidebar já é `position: fixed`,
 *    e o `.main-content` continua com a margem compacta): assim nada é
 *    reposicionado quando o menu abre e a tela não pula.
 *  - o rótulo some por `font-size: 0` no <a> (com o tamanho devolvido ao
 *    <i>), e não por display:none em cada texto — os textos dos itens são
 *    nós soltos dentro do link, sem elemento próprio, em todas as telas.
 *
 * `hover: hover` deixa de fora tablet/celular de balcão, onde não existe
 * ponteiro pra reexpandir o menu; lá vale a gaveta da media query abaixo.
 */
@media only screen and (min-width: 861px) and (hover: hover) {
  .sidebar {
    width: var(--sidebar-width-compact);
    overflow: hidden;
    transition: width 0.18s ease;
  }
  .sidebar:hover {
    width: var(--sidebar-width);
    box-shadow: var(--shadow-lg);
  }

  .main-content {
    margin-left: var(--sidebar-width-compact);
    width: calc(100% - var(--sidebar-width-compact));
  }

  .sidebar:not(:hover) .logo { padding: 0; }
  .sidebar:not(:hover) .logo h2 { display: none; }

  /* Sem a barra de rolagem (e sem o espaço reservado pra ela) os ícones
     ficam no centro exato da faixa de 76px; reservados os 8px do
     `scrollbar-gutter`, todos apareciam levemente à esquerda. No menu
     expandido a barra volta ao normal. */
  .sidebar:not(:hover) .menu {
    scrollbar-gutter: auto;
    scrollbar-width: none;
  }
  .sidebar:not(:hover) .menu::-webkit-scrollbar { width: 0; }

  .sidebar:not(:hover) .menu li { padding: 0 0.7rem; }
  .sidebar:not(:hover) .menu li a {
    justify-content: center;
    gap: 0;
    font-size: 0;
    padding: 0.75rem 0;
  }
  .sidebar:not(:hover) .menu li a i { font-size: 1.15rem; }

  /* No modo compacto a pastilha do item ativo (e a do hover) é a mesma do
     menu largo, só que quadrada em volta do ícone — nada precisa ser
     redesenhado aqui, porque o fundo já mora no próprio <a>. */
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.header-title h1 { font-size: 1.6rem; font-weight: 600; color: var(--color-text); }
.header-title p { color: var(--color-text-muted); margin-top: 5px; font-size: 0.92rem; }

/*
 * --- MENU MOBILE ---
 * Em telas estreitas (celular do garçom, ver módulo comanda), a sidebar
 * fixa de 280px comia quase toda a largura da tela e deixava o conteúdo
 * espremido numa faixa fina. Abaixo de 860px ela vira uma gaveta: some
 * fora da tela (translateX) e só aparece por cima do conteúdo (overlay
 * escurecido atrás) quando o botão de hambúrguer é tocado — ver
 * shared/js/sidebar-toggle.js. Em telas largas nada disso tem efeito
 * (.sidebar-toggle/.sidebar-overlay ficam com display:none).
 */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1100;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-size: 1.1rem;
}

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

@media only screen and (max-width: 860px) {
  .sidebar-toggle { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1000;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-overlay { display: block; }

  .main-content {
    margin-left: 0;
    width: 100%;
    padding: 1.25rem;
    padding-top: 4.5rem;
  }

  /*
   * Título da página + perfil do usuário (nome, avatar, tema) num só
   * "header" flex sem quebra: no celular os dois lados brigam pelo mesmo
   * espaço e ou cortam ou saem da tela. Deixa quebrar em duas linhas e
   * encolhe o título — mesmo ajuste que cada tela vinha repetindo por
   * conta própria (ver dashboard/comanda), agora vale pra todas.
   */
  header { flex-wrap: wrap; gap: 0.75rem; }
  .header-title h1 { font-size: 1.3rem; }
  .user-info { flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

/* --- BOTÃO DE ALTERNAR TEMA (claro/escuro) --- */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.theme-toggle:hover { background: var(--color-border); }