/* ---------- Tema (claro/escuro) ----------
   O escuro é o padrão do sistema (variáveis do :root). Quem prefere claro
   liga isso no próprio perfil (ver public/tema.js), o que só adiciona o
   atributo data-tema="claro" na tag <html> e troca as variáveis abaixo. */
:root {
  --cor-principal: #24b587;
  --cor-principal-escura: #1a8f68;
  --cor-texto: #e7ebee;
  --cor-suave: #9aa4ad;
  --cor-borda: #333a40;
  --cor-fundo: #10141a;
  --cor-cartao: #1a1f26;
  --cor-input: #20262d;
  --cor-superficie-suave: #171c22;
  --cor-linha: #2a3036;
  --cor-erro: #ff6b60;
  --cor-erro-escura: #b3261e;
  --cor-overlay: rgba(0, 0, 0, 0.6);
  --cor-texto-invertido: #fff;

  --selo-urgente-bg: #4a2420;
  --selo-urgente-cor: #ff9d90;
  --selo-urgente-borda: #6b332c;
  --selo-pendente-bg: #46390f;
  --selo-pendente-cor: #f0c975;
  --selo-em-separacao-bg: #1c2c46;
  --selo-em-separacao-cor: #8fb4f0;
  --selo-atendida-bg: #223a17;
  --selo-atendida-cor: #a3d97f;
  --selo-cancelada-bg: #33383c;
  --selo-cancelada-cor: #b7bcc1;
}

:root[data-tema="claro"] {
  --cor-principal: #1d9e75;
  --cor-principal-escura: #157a5a;
  --cor-texto: #222;
  --cor-suave: #666;
  --cor-borda: #d4d4d4;
  --cor-fundo: #e9f1f8;
  --cor-cartao: #fff;
  --cor-input: #fff;
  --cor-superficie-suave: #fafafa;
  --cor-linha: #eee;
  --cor-erro: #b3261e;
  --cor-erro-escura: #8f1e18;
  --cor-overlay: rgba(0, 0, 0, 0.45);
  --cor-texto-invertido: #fff;

  --selo-urgente-bg: #fbe4e2;
  --selo-urgente-cor: #8a1c14;
  --selo-urgente-borda: #f0b3ac;
  --selo-pendente-bg: #faeeda;
  --selo-pendente-cor: #633806;
  --selo-em-separacao-bg: #dfe9fa;
  --selo-em-separacao-cor: #17417a;
  --selo-atendida-bg: #eaf3de;
  --selo-atendida-cor: #27500a;
  --selo-cancelada-bg: #e6e6e6;
  --selo-cancelada-cor: #555;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

@media (min-width: 760px) {
  .container:not(.estreito):not(.largo) { padding: 32px 24px 56px; }
}

a { color: var(--cor-principal); }
a:hover { color: var(--cor-principal-escura); }

.empresa { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--cor-suave); }
h1 { margin: 4px 0 6px; font-size: 24px; }
.subtitulo { margin: 0 0 20px; color: var(--cor-suave); font-size: 14px; }

/* Rodapé com a versão do sistema (ver public/versao.js) — discreto, só pra
   referência de qual atualização está rodando em cada lugar. */
.rodape-versao {
  margin-top: 32px;
  padding-top: 14px;
  text-align: center;
  font-size: 11px;
  color: var(--cor-suave);
  opacity: 0.7;
}

.card {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 20px;
}

label {
  display: block;
  margin: 16px 0 6px;
  font-size: 14px;
  color: var(--cor-suave);
}
label:first-of-type { margin-top: 0; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-input);
  color: var(--cor-texto);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--cor-principal);
  outline-offset: 0;
  border-color: var(--cor-principal);
}

/* Cada linha de item: produto + quantidade + botão remover */
.item {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.item select { flex: 1; min-width: 0; }
.item input { width: 80px; flex: none; }
.item .remover {
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-input);
  color: var(--cor-suave);
  font-size: 18px;
  cursor: pointer;
}

/* Botão "×" avulso (fora de ".item"): usado nas linhas de setor/conta da
   Administração geral. Sem isso ficava com a aparência padrão do navegador,
   que destoava muito no tema escuro (quadrado branco). */
button.remover {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-input);
  color: var(--cor-suave);
  font-size: 16px;
  cursor: pointer;
}
button.remover:disabled { cursor: not-allowed; }

button.link {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--cor-principal-escura);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

button.primario {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--cor-principal);
  color: var(--cor-texto-invertido);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.primario:hover { background: var(--cor-principal-escura); }
button.primario:disabled { opacity: 0.6; cursor: wait; }

.erro { margin: 16px 0 0; color: var(--cor-erro); font-size: 14px; }

label.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--cor-texto);
  cursor: pointer;
}
label.checkbox input { width: auto; }

.selo.urgente { background: var(--selo-urgente-bg); color: var(--selo-urgente-cor); margin-left: 8px; }

.sucesso { text-align: center; }
.sucesso h2 { margin: 0 0 8px; }
.numero { margin: 0 0 8px; font-size: 32px; font-weight: 700; color: var(--cor-principal-escura); }

[hidden] { display: none !important; }

/* ---------- Painel do almoxarifado ---------- */
.container.largo { max-width: 1140px; }

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.metrica {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 16px;
}
.metrica .rotulo { display: block; font-size: 13px; color: var(--cor-suave); margin-bottom: 4px; }
.metrica strong { font-size: 28px; }
.metrica-urgente.tem-urgente { background: var(--selo-urgente-bg); border-color: var(--selo-urgente-borda); }
.metrica-urgente.tem-urgente strong { color: var(--selo-urgente-cor); }

h2 { margin: 0 0 12px; font-size: 16px; }

.lista-setores { list-style: none; margin: 0; padding: 0; }
.lista-setores li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--cor-linha);
  font-size: 14px;
}
.lista-setores li:last-child { border-bottom: none; }

.filtros { display: flex; gap: 8px; margin: 16px 0; }
.filtros select { flex: 1; min-width: 0; }

.lista-requisicoes { display: flex; flex-direction: column; gap: 10px; }

.requisicao {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  overflow: hidden;
}
.requisicao .topo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.requisicao .titulo { font-weight: 600; font-size: 15px; }
.requisicao .sub { margin-top: 2px; font-size: 12px; color: var(--cor-suave); }

.selo { flex: none; padding: 3px 10px; border-radius: 8px; font-size: 12px; display: inline-block; }
.selo.pendente { background: var(--selo-pendente-bg); color: var(--selo-pendente-cor); }
.selo.em-separacao { background: var(--selo-em-separacao-bg); color: var(--selo-em-separacao-cor); }
.selo.atendida { background: var(--selo-atendida-bg); color: var(--selo-atendida-cor); }
.selo.cancelada { background: var(--selo-cancelada-bg); color: var(--selo-cancelada-cor); }
.selo.urgente { background: var(--selo-urgente-bg); color: var(--selo-urgente-cor); }

.selos { display: flex; align-items: center; gap: 6px; flex: none; }

.detalhe { padding: 4px 16px 16px; border-top: 1px solid var(--cor-linha); font-size: 14px; }
.detalhe p { margin: 10px 0 0; }
.detalhe .rotulo { color: var(--cor-suave); }
.detalhe table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.detalhe th, .detalhe td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--cor-linha); }
.detalhe th { font-size: 12px; color: var(--cor-suave); font-weight: 600; }
.detalhe td.qtd, .detalhe th.qtd { text-align: right; }
.detalhe button.primario { width: auto; padding: 10px 18px; }
.acoes-detalhe { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.acoes-detalhe button.link { padding: 0; }
button.link.perigo { color: var(--cor-erro); }
button.primario.perigo { background: var(--cor-erro-escura); }
button.primario.perigo:hover { background: var(--cor-erro); }

.form-cancelar { margin-top: 16px; }
.form-cancelar label { margin-top: 0; }
.form-cancelar textarea { resize: vertical; }
.form-cancelar .acoes-detalhe { margin-top: 12px; }

.motivo-cancelamento {
  margin: 0 16px 12px;
  font-size: 12px;
  color: var(--cor-suave);
}

.vazio { text-align: center; color: var(--cor-suave); padding: 24px 0; }

/* ---------- Cabeçalho com empresa/título à esquerda e usuário à direita ---------- */
.cabecalho-app {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.cabecalho-app-titulo { min-width: 0; }
.cabecalho-app-titulo h1 { margin: 4px 0 6px; }
.cabecalho-app-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.usuario-info { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.usuario-nome { font-size: 14px; font-weight: 600; }
.usuario-setor { font-size: 12px; color: var(--cor-suave); }
.usuario-editar { font-size: 12px; padding: 0; }
.cabecalho-app-usuario .separador { color: var(--cor-borda); }

.avatar-usuario {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: var(--cor-principal);
  color: var(--cor-texto-invertido);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}
.avatar-usuario img { width: 100%; height: 100%; object-fit: cover; }
.avatar-usuario.avatar-grande { width: 84px; height: 84px; font-size: 26px; }

/* Conteúdo principal (formulário, histórico) permanece numa coluna central
   focada, mesmo com o container ocupando a largura toda da tela. */
.conteudo-central { max-width: 640px; margin: 0 auto; }

/* ---------- Modal "Editar perfil" ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--cor-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.modal-caixa {
  background: var(--cor-cartao);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.modal-caixa h2 { margin: 0 0 16px; }
.modal-avatar-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.modal-secao {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cor-linha);
}
.modal-secao h3 { margin: 0 0 4px; font-size: 14px; }
.modal-secao label.checkbox { margin-top: 10px; }

/* ---------- Confirmação customizada (ver public/confirmacao.js) ---------- */
.modal-confirmacao { max-width: 340px; }

/* ---------- Balão de suporte (ver public/suporte.js) ---------- */
.suporte-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 90; }
.suporte-botao {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--cor-principal, #1d9e75);
  color: var(--cor-texto-invertido, #fff);
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.suporte-painel {
  position: absolute;
  right: 0;
  bottom: 60px;
  width: 220px;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-linha);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.suporte-titulo { margin: 0 0 2px; font-weight: 600; }
.suporte-subtitulo { margin: 0 0 10px; font-size: 13px; color: var(--cor-suave); }
.suporte-opcao {
  display: block;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  text-decoration: none;
  font-size: 14px;
}
.suporte-opcao:last-child { margin-bottom: 0; }
.suporte-opcao:hover { background: var(--cor-linha); }

/* ---------- Alerta de estoque mínimo (ver public/inventario.js) ---------- */
.linha-abaixo-minimo td { background: var(--selo-cancelada-bg, #fbe4e2); color: var(--selo-urgente-cor, #8a1c14); }

/* ---------- Painel "Gerenciar conta" (ver public/superadmin.js) ---------- */
.modal-conta-caixa { max-width: 420px; }
.modal-conta-caixa #conta-status-selo { margin-bottom: 14px; display: inline-block; }
.modal-conta-caixa label { margin-top: 12px; }
.confirmacao-mensagem { margin: 0 0 4px; color: var(--cor-suave); line-height: 1.45; }
.confirmacao-overlay .acoes-detalhe { justify-content: flex-end; margin-top: 20px; }

@media (max-width: 480px) {
  .cabecalho-app { flex-direction: column; }
  .cabecalho-app-usuario { align-self: stretch; justify-content: space-between; }
}

/* ---------- Login, cadastro e cabeçalho com usuário logado ---------- */
.container.estreito { max-width: 400px; }

.topo-usuario {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topo-usuario .empresa { margin: 0; }
.topo-usuario .link { padding: 0; font-size: 13px; }

.topo-usuario-acoes { display: flex; align-items: center; gap: 16px; }
.topo-usuario-acoes label.checkbox { margin: 0; font-size: 13px; color: var(--cor-suave); }

.botao-secundario {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 9px 16px;
  border: 1px solid var(--cor-principal);
  border-radius: 8px;
  background: var(--cor-cartao);
  color: var(--cor-principal-escura);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.botao-secundario:hover { background: var(--cor-principal); color: var(--cor-texto-invertido); }

/* Linha de botões secundários lado a lado (ex.: telas de relatórios) */
.linha-botoes-secundarios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.linha-botoes-secundarios .botao-secundario { margin-top: 0; }

.centralizado { text-align: center; }

.card.minhas { margin-top: 20px; }
.card.minhas .lista-requisicoes { margin-top: 4px; }
.card.minhas .requisicao { border-color: var(--cor-borda); }

/* ---------- Administração geral (superadmin) ---------- */
.card + .card { margin-top: 20px; }

.linha-form { display: flex; gap: 8px; margin-bottom: 12px; }
.linha-form input { flex: 1; }
.linha-form button.estreito-botao { width: auto; margin-top: 0; padding: 0 18px; white-space: nowrap; }

#filtro-setor-contas { margin-bottom: 12px; }

/* ---------- Catálogo de produtos (painel do almoxarifado) ---------- */
.grade-produto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}
.grade-produto label { margin-top: 12px; }
.grade-produto > div:first-child label,
.grade-produto > div:nth-child(2) label { margin-top: 0; }

.acoes-produto { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.acoes-produto .primario { width: auto; margin-top: 0; padding: 10px 18px; }

.lista-produtos { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.produto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cor-linha);
}
.produto:last-child { border-bottom: none; }

#busca-produto-admin { margin-top: 6px; }

/* ---------- Painel: requisições e catálogo lado a lado em tela larga ---------- */
.painel-grid { display: flex; flex-direction: column; gap: 20px; }

@media (min-width: 900px) {
  .painel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }
  /* O catálogo rola dentro da própria coluna, sem arrastar a lista de
     requisições junto — assim uma requisição nova continua visível mesmo
     com o almoxarifado cadastrando/editando produtos lá embaixo.
     Importante: usar "height" fixo (não "max-height") — como o catálogo
     tende a ser a coluna mais alta (tem formulário + vários produtos), um
     "max-height" não tem efeito nenhum, porque é ele quem define a altura
     da grade toda. Com "height" fixo baseado na tela, ele sempre tem o
     próprio espaço reservado e rola por dentro quando o conteúdo não cabe. */
  .coluna-catalogo {
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    overflow-y: auto;
  }
}
.produto.inativo { opacity: 0.55; }
.produto-info .titulo { font-weight: 600; font-size: 14px; }
.produto-info .sub { font-size: 12px; color: var(--cor-suave); margin-top: 2px; }
.produto-acoes { display: flex; gap: 12px; flex: none; }

/* ---------- Filtros de produto no formulário de requisição ---------- */
/* Cada item vira um bloco separado (borda + fundo levemente diferente), pra
   não virar uma sequência confusa de campos quando tem vários itens. */
.item {
  flex-wrap: wrap;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: var(--cor-superficie-suave);
  padding: 12px;
  margin-bottom: 12px;
}
.item-numero {
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  color: var(--cor-suave);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.item-filtros {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
}
.item-filtros select { flex: 1; min-width: 0; }
.item-filtros input { flex: 1.4; min-width: 0; }
.item-linha { display: flex; gap: 8px; align-items: center; width: 100%; }
.item-linha select { flex: 1; min-width: 0; }
.item-linha input { width: 80px; flex: none; }

@media (max-width: 480px) {
  .grade-produto { grid-template-columns: 1fr; }
  .item-filtros { flex-direction: column; }
}

@media (min-width: 760px) {
  .container.largo { padding: 32px 32px 56px; }
}

/* ---------- Relatórios ---------- */
.grade-relatorio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 12px;
  align-items: end;
}
.grade-relatorio label { margin-top: 12px; }
.grade-relatorio > div:first-child label,
.grade-relatorio > div:nth-child(2) label,
.grade-relatorio > div:nth-child(3) label { margin-top: 0; }
.acoes-relatorio { display: flex; align-items: flex-end; }
.acoes-relatorio button { margin-top: 12px; width: auto; padding: 10px 18px; white-space: nowrap; }
.aviso-relatorio { margin: 12px 0 0; font-size: 12px; color: var(--cor-suave); }

.cabecalho-relatorio { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cabecalho-relatorio h2, .cabecalho-relatorio h3 { margin: 0; }
.cabecalho-relatorio .botao-secundario { margin-top: 0; }

/* Duas caixas de seleção lado a lado (ou empilhadas no celular) dentro de
   uma grade de filtros de relatório — ver views/inventario.html. */
.checkbox-coluna { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.checkbox-coluna label.checkbox { margin-top: 0; }

.tabela-relatorio-wrap { overflow-x: auto; margin-top: 8px; }
.tabela-relatorio { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-relatorio th, .tabela-relatorio td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--cor-linha); }
.tabela-relatorio th { font-size: 12px; color: var(--cor-suave); font-weight: 600; }
.tabela-relatorio td.qtd, .tabela-relatorio th.qtd { text-align: right; }
.tabela-relatorio td.vazio { text-align: center; color: var(--cor-suave); padding: 16px 0; }

@media (max-width: 480px) {
  .grade-relatorio { grid-template-columns: 1fr; }
}