/* estoque-ui.css — padrão visual do painel Estoque (17/10/2026).
   Nasceu na página "Batimento diário" e passa a ser o padrão do Estoque inteiro
   (Fase C). Tudo escopado em .eui (dentro de #page-estoque) pra não vazar pro
   resto do portal. Tema: #page-estoque[data-eui-tema="escuro"|"claro"]. */

.eui {
  --eui-marca: #2a1842;          /* cabeçalho roxo escuro */
  --eui-pilula: #4a2f72;         /* aba ativa */
  --eui-primario: #4a2c74;       /* botões principais */
  --eui-primario-texto: #ffffff;
  --eui-novo: #e6ac2e;           /* selo NOVO */
  --eui-fundo: #eef1f6;
  --eui-cartao: #ffffff;
  --eui-cartao-2: #f6f7fb;
  --eui-borda: #e3e6ee;
  --eui-texto: #1d1b26;
  --eui-texto-2: #5f6577;
  --eui-sombra: 0 1px 2px rgba(20,16,40,.06), 0 6px 18px rgba(20,16,40,.06);
  --eui-raio: 16px;
  --eui-ok: #16a34a;      --eui-ok-bg: #e8f7ee;
  --eui-info: #2563eb;    --eui-info-bg: #e8effd;
  --eui-atencao: #ea7a0b; --eui-atencao-bg: #fdf0e3;
  --eui-critico: #dc2626; --eui-critico-bg: #fdeaea;
  --eui-neutro: #8a8fa0;  --eui-neutro-bg: #eef0f4;
  color: var(--eui-texto);
}
#page-estoque[data-eui-tema="escuro"] .eui {
  --eui-marca: #1b0f2c;
  --eui-pilula: #4a2f72;
  --eui-primario: #8a6bd1;
  --eui-primario-texto: #140b22;
  --eui-fundo: #12101a;
  --eui-cartao: #1c1928;
  --eui-cartao-2: #241f33;
  --eui-borda: #2f2a40;
  --eui-texto: #ece9f5;
  --eui-texto-2: #a7a2b8;
  --eui-sombra: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  --eui-ok: #34d399;      --eui-ok-bg: #12301f;
  --eui-info: #60a5fa;    --eui-info-bg: #142540;
  --eui-atencao: #fb9a3c; --eui-atencao-bg: #3a2511;
  --eui-critico: #f87171; --eui-critico-bg: #3b1616;
  --eui-neutro: #9a9fb0;  --eui-neutro-bg: #262333;
}

.eui, .eui * { box-sizing: border-box; }
.eui-fundo { background: var(--eui-fundo); border-radius: var(--eui-raio); padding: 14px; }

/* cartões */
.eui-cartao { background: var(--eui-cartao); border: 1px solid var(--eui-borda); border-radius: var(--eui-raio);
  box-shadow: var(--eui-sombra); padding: 14px; }
.eui-titulo { font-size: 18px; font-weight: 800; margin: 0; color: var(--eui-texto); }
.eui-sub { font-size: 13px; color: var(--eui-texto-2); }
.eui-muted { color: var(--eui-texto-2); }

/* botões (área de toque ≥ 44px) */
.eui-btn { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--eui-borda);
  background: var(--eui-cartao); color: var(--eui-texto); font-weight: 700; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; touch-action: manipulation; }
.eui-btn:disabled { opacity: .5; cursor: not-allowed; }
.eui-btn-primario { background: var(--eui-primario); color: var(--eui-primario-texto); border-color: transparent; }
.eui-btn-ok { background: var(--eui-ok); color: #fff; border-color: transparent; }
.eui-btn-perigo { background: var(--eui-critico); color: #fff; border-color: transparent; }
.eui-btn-link { background: transparent; border: none; color: var(--eui-primario); padding: 0 6px; }
.eui-btn-quadrado { width: 44px; padding: 0; font-size: 20px; }

/* selos / chips */
.eui-novo { display: inline-block; background: var(--eui-novo); color: #2a1842; font-size: 10px; font-weight: 900;
  letter-spacing: .04em; padding: 2px 6px; border-radius: 6px; vertical-align: middle; }
.eui-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 700; white-space: nowrap; }
.eui-ok-c      { color: var(--eui-ok);      background: var(--eui-ok-bg); }
.eui-info-c    { color: var(--eui-info);    background: var(--eui-info-bg); }
.eui-atencao-c { color: var(--eui-atencao); background: var(--eui-atencao-bg); }
.eui-critico-c { color: var(--eui-critico); background: var(--eui-critico-bg); }
.eui-neutro-c  { color: var(--eui-neutro);  background: var(--eui-neutro-bg); }

/* indicadores com faixa lateral */
.eui-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.eui-kpi { background: var(--eui-cartao); border: 1px solid var(--eui-borda); border-left: 5px solid var(--eui-neutro);
  border-radius: 14px; padding: 10px 12px; box-shadow: var(--eui-sombra); }
.eui-kpi b { display: block; font-size: 22px; line-height: 1.2; }
.eui-kpi span { font-size: 12px; color: var(--eui-texto-2); }
.eui-kpi.ok { border-left-color: var(--eui-ok); } .eui-kpi.info { border-left-color: var(--eui-info); }
.eui-kpi.atencao { border-left-color: var(--eui-atencao); } .eui-kpi.critico { border-left-color: var(--eui-critico); }
.eui-kpi.marca { border-left-color: var(--eui-primario); }

/* Faixas que rolam na horizontal (abas, filtros) não podem ditar a largura da
   página: o .main do portal é item flex sem min-width:0 e cresceria até caber
   todos os botões (no celular, a página inteira ficava com ~1000px). */
.eui-abas, .eui-seg, .eui-rolagem { contain: inline-size; max-width: calc(100vw - 32px); }

/* filtro segmentado com contador (rola na horizontal no celular) */
.eui-seg { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.eui-seg button { min-height: 40px; border-radius: 999px; border: 1px solid var(--eui-borda); background: var(--eui-cartao);
  color: var(--eui-texto); padding: 0 14px; font-weight: 700; font-size: 13px; white-space: nowrap; cursor: pointer; }
.eui-seg button.ativo { background: var(--eui-pilula); color: #fff; border-color: transparent; }
.eui-seg button small { opacity: .75; margin-left: 4px; font-weight: 800; }

/* abas em pílula */
.eui-abas { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px 8px; scrollbar-width: thin; }
.eui-abas button { min-height: 42px; border-radius: 999px; border: 1px solid var(--eui-borda); background: var(--eui-cartao);
  color: var(--eui-texto); padding: 0 16px; font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; }
.eui-abas button.ativo { background: var(--eui-pilula); color: #fff; border-color: transparent; }

/* campos */
.eui-input { min-height: 44px; border-radius: 12px; border: 1px solid var(--eui-borda); background: var(--eui-cartao);
  color: var(--eui-texto); padding: 0 12px; font-size: 16px; width: 100%; }
.eui-input:focus { outline: 2px solid var(--eui-primario); outline-offset: 1px; }

/* barra de progresso */
.eui-barra { height: 8px; border-radius: 999px; background: var(--eui-neutro-bg); overflow: hidden; }
.eui-barra > i { display: block; height: 100%; background: var(--eui-primario); border-radius: 999px; }
.eui-barra.ok > i { background: var(--eui-ok); }

/* tabelas largas rolam dentro do contêiner */
.eui-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.eui-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.eui-tabela th, .eui-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--eui-borda); text-align: left; }
.eui-tabela th { font-size: 12px; color: var(--eui-texto-2); font-weight: 700; }

/* aviso */
.eui-aviso { border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; }