/* Módulo de Compras. Identidade própria (azul-petróleo + âmbar), no espírito do App RR Inox mas
   distinta dele — quem abre precisa saber na hora em que módulo está. Segue as vars do tema
   para funcionar no claro e no escuro. */
/* O modal do produto é irmão da página no DOM (fica no fim do body), então PRECISA repetir as
   variáveis — sem isso o gráfico fica invisível e os campos perdem a borda. */
#page-compras, #compras-modal {
  --cp-bg: #F7F8FA;
  --cp-card: #FFFFFF;
  --cp-linha: #E3E7EC;
  --cp-texto: #1B2733;
  --cp-fraco: #6B7785;
  --cp-azul: #15293a;
  --cp-ambar: #D97706;
  --cp-kpi-bd: var(--cp-azul);
  /* Situação do item e origem da entrada: a cor de cada estado vive aqui, nos DOIS temas.
     Antes o hex vinha do `style=` do index.js (e o fundo era o mesmo hex + "1A"), então no tema
     escuro a pílula virava vermelho-escuro sobre carta escura — ilegível. */
  --cp-r-rompido: #B91C1C; --cp-r-critico: #DC2626; --cp-r-atencao: #D97706;
  --cp-r-ok: #15803D;      --cp-r-excesso: #0369A1; --cp-r-parado: #6B7280;
  --cp-r-semgiro: #9CA3AF; --cp-r-devolucao: #B45309;
  background: var(--cp-bg);
}
[data-theme="dark"] #page-compras, [data-theme="dark"] #compras-modal {
  --cp-bg: #12161B;
  --cp-card: #1B222A;
  --cp-linha: #2C353F;
  --cp-texto: #E7ECF1;
  --cp-fraco: #94A2B0;
  /* Azul-petróleo da identidade some sobre carta escura: a tarja do KPI clareia (o BOTÃO segue
     azul cheio com texto branco, que funciona nos dois temas). */
  --cp-kpi-bd: #7FA9CE;
  --cp-ambar: #E9AC5C;
  --cp-r-rompido: #F58A80; --cp-r-critico: #F87171; --cp-r-atencao: #E9AC5C;
  --cp-r-ok: #63C58C;      --cp-r-excesso: #6FB6E8; --cp-r-parado: #9AA6B2;
  --cp-r-semgiro: #7C8896; --cp-r-devolucao: #E9AC5C;
}

#compras-content { color: var(--cp-texto); }
.cp-load { padding: 40px 20px; text-align: center; color: var(--cp-fraco); font-size: 14px; }
.cp-wrap { max-width: 1500px; margin: 0 auto; padding: 16px 18px 40px; }

/* Abas */
.cp-abas { display: flex; gap: 4px; padding: 0 18px; background: var(--cp-card); border-bottom: 1px solid var(--cp-linha); position: sticky; top: 0; z-index: 5; }
.cp-abas button {
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 13px 18px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--cp-fraco); cursor: pointer;
}
.cp-abas button.on { color: var(--cp-azul); border-bottom-color: var(--cp-ambar); }
[data-theme="dark"] .cp-abas button.on { color: var(--cp-texto); }

/* Cartões de indicador */
.cp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.cp-kpi {
  background: var(--cp-card); border: 1px solid var(--cp-linha); border-left: 4px solid var(--cp-kpi-bd);
  border-radius: 10px; padding: 12px 14px;
}
.cp-kpi .r { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--cp-fraco); font-weight: 700; }
.cp-kpi .v { font-size: 22px; font-weight: 800; margin-top: 3px; letter-spacing: -.5px;
             font-variant-numeric: tabular-nums; }
/* Valor por extenso (o do estoque passa de R$ 6 milhões) encolhe para caber no cartão
   de 215 px em vez de vazar. 08/09/2026: o KPI deixou de abreviar para "R$ 6,22 mi". */
.cp-kpi .v.longa { font-size: 19px; letter-spacing: -.3px; }
.cp-kpi .s { font-size: 11.5px; color: var(--cp-fraco); margin-top: 2px; }

/* Seções */
.cp-sec { background: var(--cp-card); border: 1px solid var(--cp-linha); border-radius: 10px; padding: 14px 16px; margin-top: 14px; }
.cp-sec h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--cp-fraco); margin: 0 0 10px; }
.cp-nota { font-size: 11.5px; color: var(--cp-fraco); margin-top: 8px; line-height: 1.45; }

/* Barras de distribuição */
.cp-barras { display: flex; flex-direction: column; gap: 6px; }
.cp-barra { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 10px; font-size: 12.5px; }
.cp-barra .b { background: var(--cp-linha); border-radius: 4px; height: 14px; overflow: hidden; }
.cp-barra .b i { display: block; height: 100%; border-radius: 4px; }
.cp-barra .n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tabelas */
.cp-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cp-tab th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--cp-fraco); padding: 7px 8px; border-bottom: 2px solid var(--cp-linha); white-space: nowrap;
}
.cp-tab td { padding: 7px 8px; border-bottom: 1px solid var(--cp-linha); vertical-align: middle; }
.cp-tab tbody tr { cursor: pointer; }
.cp-tab tbody tr:hover { background: rgba(217, 119, 6, .07); }
.cp-tab .r { text-align: right; font-variant-numeric: tabular-nums; }
.cp-tab .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }
.cp-lista { background: var(--cp-card); border: 1px solid var(--cp-linha); border-radius: 10px; overflow: hidden; margin-top: 12px; }
.cp-lista th { padding-top: 12px; }

/* Etiquetas */
/* Pílula de estado: contorno na cor do estado (em vez do antigo fundo hex+alpha vindo do JS).
   Um desenho só que se lê nos dois temas — a cor vem da classe t-*. */
.cp-tag { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700;
  white-space: nowrap; border: 1px solid currentColor; color: var(--cp-fraco); }
.cp-tag.t-rompido  { color: var(--cp-r-rompido); }
.cp-tag.t-critico  { color: var(--cp-r-critico); }
.cp-tag.t-atencao  { color: var(--cp-r-atencao); }
.cp-tag.t-ok       { color: var(--cp-r-ok); }
.cp-tag.t-excesso  { color: var(--cp-r-excesso); }
.cp-tag.t-parado   { color: var(--cp-r-parado); }
.cp-tag.t-sem_giro { color: var(--cp-r-semgiro); }
.cp-tag.t-devolucao{ color: var(--cp-r-devolucao); }
.cp-barra .b i.t-rompido  { background: var(--cp-r-rompido); }
.cp-barra .b i.t-critico  { background: var(--cp-r-critico); }
.cp-barra .b i.t-atencao  { background: var(--cp-r-atencao); }
.cp-barra .b i.t-ok       { background: var(--cp-r-ok); }
.cp-barra .b i.t-excesso  { background: var(--cp-r-excesso); }
.cp-barra .b i.t-parado   { background: var(--cp-r-parado); }
.cp-barra .b i.t-sem_giro { background: var(--cp-r-semgiro); }
.cp-cls { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 600;
  background: var(--cp-linha); color: var(--cp-fraco); margin-right: 3px; white-space: nowrap; }
.cp-cls.vazio { background: none; }
/* "abriu X → soma em Y": aviso âmbar do módulo, contornado para funcionar nos dois temas. */
.cp-cls.alerta { background: none; border: 1px solid var(--cp-ambar); color: var(--cp-ambar); }
.cp-cons { font-size: 10px; color: var(--cp-ambar); font-weight: 700; }
.cp-off { font-size: 10px; color: #B91C1C; font-weight: 700; }

/* Filtros */
.cp-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--cp-card);
  border: 1px solid var(--cp-linha); border-radius: 10px; padding: 10px 12px; }
.cp-filtros input[type="text"], .cp-filtros select, .cp-linha input, .cp-form textarea, .cp-add input {
  font-family: inherit; font-size: 12.5px; padding: 7px 9px; border: 1.5px solid var(--cp-linha);
  border-radius: 7px; background: var(--cp-card); color: var(--cp-texto);
}
.cp-filtros input[type="text"] { flex: 1; min-width: 220px; }
.cp-cont { margin-left: auto; font-size: 12px; color: var(--cp-fraco); font-weight: 700; }
.cp-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--cp-texto); cursor: pointer; }
/* Baixar a lista em Excel (08/09/2026). Fica depois do contador, que tem margin-left:auto —
   por isso os dois ficam colados à direita da barra de filtros. */
.cp-xls {
  font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 12px;
  border: 1.5px solid var(--cp-linha); border-radius: 7px;
  background: var(--cp-card); color: var(--cp-texto); cursor: pointer; white-space: nowrap;
}
.cp-xls:hover:not(:disabled) { border-color: var(--cp-kpi-bd); color: var(--cp-azul); }
.cp-xls:disabled { opacity: .55; cursor: default; }

/* ── Modal do produto ──
   Cabeçalho e rodapé fixos, corpo em 2 colunas: à esquerda o que se lê, à direita o que se
   edita. Antes era uma coluna só e o botão de salvar ficava fora da tela. */
.cp-modal { display: flex; flex-direction: column; padding: 0 !important; }
.cp-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px;
  border-bottom: 1px solid var(--cp-linha); position: sticky; top: 0; z-index: 3;
  background: inherit;
}
.cp-head-txt { min-width: 0; }
.cp-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; overflow: hidden; }
.cp-col { padding: 4px 20px 16px; min-width: 0; overflow-y: auto; }
.cp-col-edit { border-left: 1px solid var(--cp-linha); background: rgba(0,0,0,.02); }
[data-theme="dark"] .cp-col-edit { background: rgba(255,255,255,.03); }
.cp-rolagem { max-height: 210px; overflow-y: auto; }
.cp-rodape {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  padding: 12px 20px; border-top: 1px solid var(--cp-linha); position: sticky; bottom: 0;
  background: inherit; z-index: 3;
}
.cp-sujo { margin-right: auto; font-size: 12px; color: var(--cp-ambar); font-weight: 700; }
.cp-btn-fraco { background: transparent; color: var(--cp-fraco); border: 1.5px solid var(--cp-linha); }
.cp-forn-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--cp-linha); font-size: 12.5px;
}
.cp-forn-item div { flex: 1; min-width: 0; }
.cp-forn-item span { display: block; font-size: 11px; color: var(--cp-fraco); }
.cp-add { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.cp-add-linha { display: flex; gap: 7px; align-items: center; }
.cp-add input { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .cp-cols { grid-template-columns: 1fr; }
  .cp-col-edit { border-left: 0; border-top: 1px solid var(--cp-linha); }
}

/* Modal do produto */
/* .modal-box do app já dá fundo/raio; aqui só ampliamos e garantimos o fundo no tema escuro
   (o padrão é #fff fixo, que no escuro deixaria o texto claro sobre branco). */
.cp-modal { max-width: 980px; width: 96vw; max-height: 92vh; overflow-y: auto; text-align: left; }
[data-theme="dark"] .cp-modal { background: var(--bg-card, #1B222A); color: var(--cp-texto, #E7ECF1); }
.cp-modal .cp-sec { background: transparent; border: 0; border-top: 1px solid var(--gray-200); border-radius: 0; padding: 12px 0 0; margin-top: 14px; }
.cp-modal .cp-tab td, .cp-modal .cp-tab th { border-color: var(--gray-200); }
.cp-modal .cp-tab tbody tr { cursor: default; }
.cp-modal-head { display: flex; align-items: flex-start; gap: 12px; }
.cp-modal-head h2 { font-size: 17px; margin: 2px 0 6px; line-height: 1.25; }
.cp-modal-cod { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--gray-500); font-weight: 700; }
.cp-modal-sub { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.cp-x { margin-left: auto; background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--gray-500); }
.cp-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 14px; }
.cp-mini div { background: var(--gray-100, #F3F4F6); border-radius: 8px; padding: 7px 9px; }
.cp-mini span { display: block; font-size: 10.5px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; }
.cp-mini b { font-size: 14px; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .cp-mini div { background: rgba(255,255,255,.05); }

/* Gráfico de venda mensal */
.cp-grafico { display: flex; align-items: flex-end; gap: 4px; height: 84px; }
.cp-mes { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.cp-mes i { display: block; width: 100%; background: var(--cp-ambar); border-radius: 3px 3px 0 0; }
.cp-mes span { font-size: 9.5px; color: var(--gray-500); }

/* Formulário de características */
.cp-form { display: flex; flex-direction: column; gap: 10px; }
.cp-chks { display: flex; gap: 14px; flex-wrap: wrap; }
.cp-linha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.cp-linha input[type="number"] { width: 90px; }
.cp-full { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--gray-500); }
.cp-full textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.cp-btn { background: var(--cp-azul); color: #fff; border: 0; border-radius: 8px; padding: 8px 16px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; align-self: flex-start; }
.cp-mini-btn { background: none; border: 0; color: #B91C1C; cursor: pointer; font-size: 13px; }

@media (max-width: 820px) {
  .cp-tab { font-size: 11.5px; }
  .cp-barra { grid-template-columns: 96px 1fr 46px; }
}

/* Cabeçalho ordenável da lista de produtos */
.cp-th { cursor: pointer; user-select: none; }
.cp-th:hover { color: var(--cp-ambar); }
.cp-th.on { color: var(--cp-ambar); }

/* Rótulo de dados no gráfico mensal */
.cp-grafico { height: 96px; }
.cp-mes b { font-size: 9.5px; font-weight: 700; color: var(--cp-fraco); line-height: 1; }
.cp-mes span { white-space: nowrap; }

/* Sugestão de fornecedor (catálogo da OMIE) */
.cp-sug {
  border: 1px solid var(--cp-linha); border-radius: 8px; max-height: 190px; overflow-y: auto;
  background: var(--cp-card);
}
.cp-sug > div { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--cp-linha); font-size: 12.5px; }
.cp-sug > div:hover { background: rgba(217,119,6,.09); }
.cp-sug b { display: block; }
.cp-sug span { font-size: 11px; color: var(--cp-fraco); }
.cp-sug-vazio { padding: 8px 10px; font-size: 11.5px; color: var(--cp-fraco); }
.cp-ok { font-size: 10px; color: #15803D; font-weight: 700; }

/* Grupos de itens full / SKUs */
.cp-membro {
  display: inline-block; padding: 1px 7px; margin: 1px 3px 1px 0; border-radius: 5px;
  font-size: 11px; font-weight: 700; background: var(--cp-linha); color: var(--cp-fraco);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.cp-membro.manual { background: #FFEDD5; color: #9A3412; }
[data-theme="dark"] .cp-membro.manual { background: #7C2D12; color: #FED7AA; }
.cp-membro.fora { opacity: .5; text-decoration: line-through; }
.cp-membro b { cursor: pointer; margin-left: 3px; }
.hidden { display: none; }

/* Combobox de fornecedor: lista alfabética ao clicar, digitação livre */
.cp-combo { position: relative; }
.cp-combo input[type="text"] { width: 100%; box-sizing: border-box; padding-right: 26px; }
.cp-combo-seta {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--cp-fraco); font-size: 11px; cursor: pointer; user-select: none;
}
.cp-combo .cp-sug {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 20;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
/* Mês sem venda: coluna vazia (só o rótulo), para o buraco ficar visível */
.cp-mes.vazio i { background: none; }
.cp-mes.vazio span { color: var(--cp-fraco); opacity: .55; }
.cp-grafico { border-bottom: 1px solid var(--cp-linha); }

/* Barra empilhada: base = código principal, topo = demais códigos do grupo */
.cp-mes { justify-content: flex-end; }
.cp-mes i { border-radius: 0; }
.cp-mes i.principal { border-radius: 0; }
.cp-mes i.principal:first-of-type { border-radius: 3px; }        /* sem relacionados: barra inteira */
.cp-mes i.outros { background: #7C3AED; border-radius: 3px 3px 0 0; }
.cp-legenda { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--cp-fraco); }
.cp-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.cp-legenda i.p { background: var(--cp-ambar); }
.cp-legenda i.o { background: #7C3AED; }

/* ── Aba Parados e aba Fornecedores (16/09/2026) ── */
/* Chips de faixa: contorno, ficam âmbar quando escolhidos; faixa vazia fica apagada. */
.cp-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.cp-chips-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--cp-fraco); font-weight: 700; min-width: 130px; }
.cp-chip {
  font-family: inherit; font-size: 12px; padding: 5px 10px; border-radius: 20px; cursor: pointer;
  border: 1.5px solid var(--cp-linha); background: var(--cp-card); color: var(--cp-texto); white-space: nowrap;
}
.cp-chip b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.cp-chip span { color: var(--cp-fraco); font-size: 11px; margin-left: 3px; }
.cp-chip:hover { border-color: var(--cp-ambar); }
.cp-chip.on { border-color: var(--cp-ambar); color: var(--cp-ambar); background: rgba(217, 119, 6, .08); }
.cp-chip.vazio { opacity: .45; }
.cp-sentinela { text-align: center; padding: 14px; font-size: 12px; color: var(--cp-fraco); }
.cp-sub { font-size: 11px; color: var(--cp-fraco); }
.cp-sub-inline { font-size: 10.5px; color: var(--cp-fraco); }
/* Participação do fornecedor no total: barrinha antes do percentual. */
.cp-pct { display: inline-block; width: 46px; height: 7px; background: var(--cp-linha); border-radius: 4px; margin-right: 6px; vertical-align: 1px; overflow: hidden; }
.cp-pct i { display: block; height: 100%; background: var(--cp-ambar); border-radius: 4px; }
.cp-tab tbody tr.on { background: rgba(217, 119, 6, .12); }
.cp-forn-det { margin-top: 12px; }
.cp-forn-det .cp-sec { border: 0; border-top: 1px solid var(--cp-linha); border-radius: 0; padding: 12px 0 0; }
.cp-forn-det .cp-mini { margin-top: 10px; }
/* Números não quebram linha nas listas novas (Custo/valores ficavam em duas linhas). */
.cp-lista td.r, .cp-forn-det td.r { white-space: nowrap; }

/* SKU desligado do grupo pela equipe: riscado, tracejado âmbar, com o ↺ para religar. */
.cp-membro.desligado { text-decoration: line-through; opacity: .7; border: 1px dashed var(--cp-ambar); background: none; }
.cp-membro.desligado b { text-decoration: none; }
/* Linha de "mostrar todos" na lista de fornecedores. */
.cp-tab tbody tr.cp-expande { cursor: default; }
.cp-tab tbody tr.cp-expande:hover { background: none; }
.cp-tab tbody tr.cp-expande td { text-align: center; padding: 10px; }