/* ==========================================================================
   Sistema de design — Painel de Montagem
   Tokens, componentes base e layout. Cada página adiciona só o que é dela.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Paleta */
  --azul-500: #2563eb;
  --azul-600: #1d4ed8;
  --azul-700: #1e40af;
  --verde-500: #16a34a;
  --verde-600: #15803d;
  --vermelho-500: #dc2626;
  --vermelho-600: #b91c1c;
  --ambar-500: #d97706;

  /* Superfícies e texto (claro) */
  --fundo: #f1f5f9;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --superficie-3: #f1f5f9;
  --borda: #e2e8f0;
  --borda-forte: #cbd5e1;
  --texto: #0f172a;
  --texto-suave: #475569;
  --texto-fraco: #94a3b8;

  /* Semânticos */
  --primaria: var(--azul-500);
  --primaria-forte: var(--azul-600);
  --sucesso: var(--verde-500);
  --erro: var(--vermelho-500);
  --alerta: var(--ambar-500);

  /* Tons de fundo suave para destaques */
  --primaria-suave: #eff6ff;
  --sucesso-suave: #f0fdf4;
  --erro-suave: #fef2f2;
  --alerta-suave: #fffbeb;

  /* Escala de espaçamento */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  --raio: 10px;
  --raio-sm: 6px;
  --raio-lg: 14px;

  --sombra: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --sombra-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);

  --largura-max: 1200px;
  --sidebar-largura: 220px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0b1120;
    --superficie: #111827;
    --superficie-2: #1a2234;
    --superficie-3: #232d42;
    --borda: #273348;
    --borda-forte: #384357;
    --texto: #e8edf6;
    --texto-suave: #a6b3c9;
    --texto-fraco: #6b7a94;

    --primaria: #60a5fa;
    --primaria-forte: #3b82f6;
    --sucesso: #4ade80;
    --erro: #f87171;
    --alerta: #fbbf24;

    --primaria-suave: #172554;
    --sucesso-suave: #14301f;
    --erro-suave: #3b1414;
    --alerta-suave: #3a2a09;

    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  margin: 0;
  padding: 0 var(--e4) var(--e7) calc(var(--sidebar-largura) + var(--e4));
  line-height: 1.5;
  font-size: 15px;
  transition: padding-left 0.15s ease;
}

/* Menu lateral escondido: conteúdo volta a ocupar a largura toda */
body.sidebar-oculta { padding-left: var(--e4); }

h1, h2, h3 { line-height: 1.25; margin: 0; }

/* ==========================================================================
   Cabeçalho / navegação
   ========================================================================== */

.app-bar {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--e5) 0 var(--e4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
}

/* Com o menu escondido, o botão flutuante "mostrar menu" fica por cima do
   canto esquerdo — abre espaço pro título não ficar embaixo dele. */
body.sidebar-oculta .app-bar { padding-left: 2.75rem; }

.app-bar h1 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.app-bar h1::before {
  content: "";
  width: 4px;
  height: 1.4em;
  border-radius: 99px;
  background: var(--primaria);
}

.usuario-info {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.usuario-nome { font-weight: 600; }

/* Navegação principal — menu lateral fixo, entre telas do fluxo */
.nav-principal {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-largura);
  height: 100vh;
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  background: var(--superficie);
  border: none;
  border-right: 1px solid var(--borda);
  border-radius: 0;
  padding: var(--e4) var(--e2);
  overflow-y: auto;
  z-index: 200;
  transition: transform 0.15s ease;
}

body.sidebar-oculta .nav-principal { transform: translateX(-100%); }

.nav-item {
  padding: 0.6rem 0.9rem;
  border-radius: var(--raio-sm);
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.nav-item:hover { background: var(--superficie-3); color: var(--texto); }

.nav-item.ativo {
  background: var(--primaria);
  color: #fff;
  font-weight: 600;
}

/* Botão "esconder menu" (dentro do próprio menu lateral) */
.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: var(--e2);
  background: none;
  border: none;
  color: var(--texto-fraco);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.5rem 0.9rem;
  margin-bottom: var(--e2);
  border-radius: var(--raio-sm);
}

.sidebar-toggle:hover { background: var(--superficie-3); color: var(--texto-suave); }

/* Botão flutuante "mostrar menu", só aparece quando o menu está escondido */
.sidebar-mostrar {
  display: none;
  position: fixed;
  top: var(--e4);
  left: var(--e4);
  z-index: 201;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  padding: 0.5rem 0.7rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--texto);
  box-shadow: var(--sombra-md);
}

body.sidebar-oculta .sidebar-mostrar { display: block; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 150;
}

/* Barra secundária: ações de configuração (só no painel) */
.nav-config {
  max-width: var(--largura-max);
  margin: calc(var(--e5) * -1 + var(--e3)) auto var(--e5);
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
}

.chip {
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  padding: 0.4rem 0.8rem;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.chip:hover { border-color: var(--borda-forte); color: var(--texto); }
.chip.ativo { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria); }

main {
  max-width: var(--largura-max);
  margin: 0 auto;
}

/* ==========================================================================
   Cartões / seções
   ========================================================================== */

.card,
.painel-acao,
.painel-config,
.painel-historico {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e5);
  margin-bottom: var(--e5);
  box-shadow: var(--sombra);
}

.card-titulo,
.painel-historico h2 {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
}

.painel-historico h2:not(:first-child) { margin-top: var(--e6); }

.card-subtitulo {
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin: calc(var(--e4) * -1) 0 var(--e4);
}

/* ==========================================================================
   Formulários
   ========================================================================== */

label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: var(--e2);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.12s, box-shadow 0.12s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: 0 0 0 3px var(--primaria-suave);
}

input::placeholder { color: var(--texto-fraco); }

/* Campo de destaque: nº do pedido, código do montador, nº de série */
.campo-destaque {
  font-size: 1.5rem !important;
  font-weight: 600;
  padding: 0.75rem 0.9rem !important;
  letter-spacing: 0.02em;
  margin-bottom: var(--e4);
}

.campo-destaque::placeholder {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: normal;
}

/* Texto de apoio abaixo do label */
.ajuda {
  font-size: 0.82rem;
  color: var(--texto-fraco);
  font-weight: 400;
  margin: calc(var(--e2) * -1) 0 var(--e2);
}

.linha-token {
  display: flex;
  gap: var(--e3);
  align-items: stretch;
  flex-wrap: wrap;
}

.linha-token input { flex: 1; min-width: 140px; }

.linha-checkbox {
  display: flex !important;
  align-items: center;
  gap: var(--e2);
  font-weight: 400 !important;
  color: var(--texto) !important;
  margin-bottom: var(--e2) !important;
  cursor: pointer;
}

.linha-checkbox input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primaria);
  cursor: pointer;
}

.grupo-config {
  padding: var(--e4) 0;
  border-top: 1px solid var(--borda);
}
.grupo-config:first-of-type { border-top: none; padding-top: 0; }

.grupo-config > label:first-child {
  color: var(--texto);
  font-size: 0.9rem;
  margin-bottom: var(--e3);
}

/* ==========================================================================
   Botões
   ========================================================================== */

.botoes {
  display: flex;
  gap: var(--e3);
  flex-wrap: wrap;
}

.btn {
  flex: 1;
  min-width: 150px;
  padding: 0.8rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: var(--raio-sm);
  cursor: pointer;
  color: #fff;
  background: var(--primaria);
  transition: filter 0.12s, transform 0.05s;
}

.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-iniciar, .btn-primario { background: var(--primaria); }
.btn-concluir, .btn-sucesso, .btn-aprovar { background: var(--sucesso); }
.btn-perigo, .btn-reprovar { background: var(--erro); }

/* Botão secundário / discreto */
.btn-link {
  background: none;
  border: none;
  color: var(--primaria);
  cursor: pointer;
  font-size: 0.875rem;
  font-family: inherit;
  padding: 0;
  text-decoration: none;
  font-weight: 500;
}

.btn-link:hover { text-decoration: underline; }

.acoes-secundarias {
  display: flex;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

.btn-cancelar-link { color: var(--erro); }

/* ==========================================================================
   Mensagens e destaques
   ========================================================================== */

.mensagem {
  margin: var(--e4) 0 0;
  font-weight: 500;
  font-size: 0.9rem;
  min-height: 1.4em;
}

.mensagem:empty { margin: 0; min-height: 0; }

.mensagem.erro,
.mensagem.ok {
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-sm);
  border-left: 3px solid;
}

.mensagem.erro {
  color: var(--erro);
  background: var(--erro-suave);
  border-color: var(--erro);
}

.mensagem.ok {
  color: var(--sucesso);
  background: var(--sucesso-suave);
  border-color: var(--sucesso);
}

.preview {
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--primaria-suave);
  border-left: 3px solid var(--primaria);
  border-radius: var(--raio-sm);
  font-size: 0.9rem;
  color: var(--texto);
}

.preview.preview-alerta {
  background: var(--erro-suave);
  border-color: var(--erro);
}

.hidden { display: none !important; }

/* ==========================================================================
   Tabelas
   ========================================================================== */

.tabela-wrap { overflow-x: auto; margin-bottom: var(--e5); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead th {
  text-align: left;
  padding: var(--e3);
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

thead th:first-child { border-top-left-radius: var(--raio-sm); }
thead th:last-child { border-top-right-radius: var(--raio-sm); }

tbody td {
  padding: var(--e3);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--superficie-2); }

/* Status como pílula */
.status-em_montagem,
.status-montagem,
.status-pronto,
.status-concluido,
.status-cancelado,
.status-aguardando_teste,
.status-em_teste,
.status-area_tecnica,
.status-aguardando_embalagem {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-em_montagem,
.status-montagem,
.status-aguardando_teste,
.status-em_teste,
.status-aguardando_embalagem {
  background: var(--primaria-suave);
  color: var(--primaria);
}

.status-pronto,
.status-concluido {
  background: var(--sucesso-suave);
  color: var(--sucesso);
}

.status-cancelado,
.status-area_tecnica {
  background: var(--erro-suave);
  color: var(--erro);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 720px) {
  /* Tela estreita: o menu nunca empurra o conteúdo — fica escondido por
     padrão (bancada.js/nav-auth.js já cuidam disso) e, quando aberto, some
     por cima do conteúdo como uma gaveta, com fundo escurecido atrás. */
  body, body.sidebar-oculta { padding: 0 var(--e3) var(--e6); font-size: 14px; }
  .app-bar { padding: var(--e4) 0 var(--e3); }
  .app-bar h1 { font-size: 1.15rem; }

  .nav-principal { transform: translateX(-100%); box-shadow: var(--sombra-md); }
  body:not(.sidebar-oculta) .nav-principal { transform: translateX(0); }
  body:not(.sidebar-oculta) .sidebar-backdrop { display: block; }
  .nav-item { font-size: 0.88rem; }

  .card, .painel-acao, .painel-config, .painel-historico { padding: var(--e4); }
  .btn { min-width: 100%; }
}