/* Almoxarifado — visual no espírito das interfaces da Apple (22/09/2026, pedido do Guilherme:
   "faça o layout dele seguindo o mesmo do PCP seguindo as regras de design Apple"). É o MESMO
   sistema do public/css/pcp.css (skill apple-design de Emil Kowalski), com as variáveis renomeadas
   para --ax-*. Só aparência e navegação: nenhuma regra daqui muda o que as telas fazem.

   O que veio da skill, e onde está:
   - MATERIAL: cabeçalho e abas numa camada fixa e translúcida (.wh-chrome), com blur, e o conteúdo
     rola por baixo. A sombra sob as abas aparece conforme a página rola (efeito de borda, não uma
     divisória fixa), com scroll-driven animation onde o navegador tem.
   - TIPOGRAFIA: fonte do sistema; título grande com espaçamento negativo, texto pequeno neutro,
     números tabulares nas tabelas; hierarquia por peso + tamanho, não só tamanho.
   - RESPOSTA: botão e aba reagem no aperto (:active, scale .97), sem esperar soltar.
   - CONTENÇÃO E AGRUPAMENTO: dois níveis — seções no cabeçalho, abas da seção na barra de baixo, só
     com texto; a ativa vira pílula, como o controle segmentado do macOS. O título diz onde a pessoa
     está ("Almoxarifado P1 › Em aberto"). O peso da fonte não muda na aba ativa, para a fileira não
     "andar". O emoji saiu das abas: nove ícones coloridos competiam com o conteúdo.
   - ACESSIBILIDADE: prefers-reduced-motion (sem escala nem entrada), prefers-reduced-transparency
     (camada sólida), prefers-contrast (bordas e textos mais fortes).
   - CLARO E ESCURO pelas mesmas variáveis --ax-* (mesmo modelo do pcp.css e do pipeline.css).

   ⚠️ Tudo escopado em #page-warehouse: .card, .btn, .data-table e .admin-tabs são do app inteiro e as
   outras telas não podem mudar. A consulta de estoque tem o próprio arquivo (almox-estoque.css, sob
   .ae) porque ela também é desenhada dentro de Compras, Logística e PCP — aqui só se garante que as
   duas famílias de variáveis combinem. Cor nova entra como variável; literal só vale num tema.
   Contraste de texto pequeno conferido (mínimo 4,5:1). */

#page-warehouse {
  --ax-bg: #f5f5f7;
  --ax-surface: #ffffff;
  --ax-surface-2: #fafafc;
  --ax-ink: #1d1d1f;
  --ax-ink-2: #3a3a3c;
  --ax-muted: #636366;            /* 5,5:1 sobre o fundo, 6:1 sobre a carta */
  --ax-hairline: rgba(0, 0, 0, 0.07);
  --ax-sep: rgba(0, 0, 0, 0.13);
  --ax-fill: rgba(118, 118, 128, 0.14);
  --ax-fill-2: rgba(118, 118, 128, 0.08);
  --ax-hover: rgba(0, 0, 0, 0.028);
  --ax-primary: #15293a;          /* azul-marinho da RR */
  --ax-primary-ink: #ffffff;
  --ax-tint: #b4500f;             /* laranja da RR escurecido para texto: 5,1:1 no branco */
  --ax-focus: rgba(236, 106, 28, 0.32);
  --ax-ok: #1f7a3a;
  --ax-ok-fill: #15803d;
  --ax-danger-fill: #c81e1e;
  --ax-danger-text: #b91c1c;
  --ax-warn-text: #b45309;
  --ax-chrome: rgba(245, 245, 247, 0.74);
  --ax-header: rgba(21, 41, 58, 0.9);
  --ax-header-solid: #15293a;
  --ax-radius: 14px;
  --ax-radius-sm: 9px;
  --ax-shadow-card: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px -18px rgba(0, 0, 0, 0.2);
  --ax-shadow-pop: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 24px 60px -18px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] #page-warehouse {
  --ax-bg: #0e1013;
  --ax-surface: #1b1d22;
  --ax-surface-2: #212329;
  --ax-ink: #f5f5f7;
  --ax-ink-2: #d1d1d6;
  --ax-muted: #a1a1a6;            /* 6,6:1 sobre a carta escura */
  --ax-hairline: rgba(255, 255, 255, 0.07);
  --ax-sep: rgba(255, 255, 255, 0.14);
  --ax-fill: rgba(118, 118, 128, 0.28);
  --ax-fill-2: rgba(118, 118, 128, 0.18);
  --ax-hover: rgba(255, 255, 255, 0.035);
  --ax-primary: #f3934f;          /* no escuro o app já usa o laranja como destaque */
  --ax-primary-ink: #1b1206;
  --ax-tint: #f3934f;
  --ax-focus: rgba(243, 147, 79, 0.38);
  --ax-ok: #4cc27a;
  --ax-ok-fill: #15803d;
  --ax-danger-fill: #dc2626;
  --ax-danger-text: #fca5a5;
  --ax-warn-text: #fbbf24;
  --ax-chrome: rgba(14, 16, 19, 0.72);
  --ax-header: rgba(18, 35, 52, 0.88);
  --ax-header-solid: #122334;
  --ax-shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 12px 28px -18px rgba(0, 0, 0, 0.7);
  --ax-shadow-pop: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 24px 60px -18px rgba(0, 0, 0, 0.8);
}

#page-warehouse {
  background: var(--ax-bg);
  color: var(--ax-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 250ms ease, color 250ms ease;   /* troca de tema sem susto */
}

/* ── Camada fixa: cabeçalho + abas ─────────────────────────────────────────────────────────── */
#page-warehouse .wh-chrome {
  position: sticky;
  top: 0;
  z-index: 100;
}
#page-warehouse .wh-chrome .header {
  position: static;
  background-color: var(--ax-header);
  background-image: none;
  border-bottom: 2px solid var(--orange);
  box-shadow: none;
  padding: 10px 16px;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
#page-warehouse .wh-voltar {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 1.55rem;
  line-height: 1;
  padding: 2px 9px 5px;
  border-radius: 8px;
  transition: background-color 150ms ease, transform 100ms ease;
}
#page-warehouse .wh-voltar:hover { background: rgba(255, 255, 255, 0.12); }
#page-warehouse .wh-voltar:active { transform: scale(0.94); }
#page-warehouse .wh-titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin: 0;
}
#page-warehouse .wh-secao {
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.76);
}
#page-warehouse .wh-secao::before {
  content: '›';
  margin-right: 8px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
}
#page-warehouse .wh-sair,
#page-warehouse .wh-acao-top { background: rgba(255, 255, 255, 0.14); color: #fff; }
#page-warehouse .wh-sair:hover,
#page-warehouse .wh-acao-top:hover { background: rgba(255, 255, 255, 0.22); }

#page-warehouse .wh-abas {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  background: var(--ax-chrome);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--ax-hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
#page-warehouse .wh-abas::-webkit-scrollbar { display: none; }
#page-warehouse .wh-abas .admin-tab {
  flex: none;
  margin: 0;
  padding: 6px 11px;
  border: 0;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--ax-ink-2);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
#page-warehouse .wh-abas .admin-tab:hover { background: var(--ax-fill-2); color: var(--ax-ink); }
#page-warehouse .wh-abas .admin-tab:active { transform: scale(0.97); background: var(--ax-fill); }
#page-warehouse .wh-abas .admin-tab.active {
  background: var(--ax-surface);
  color: var(--ax-ink);
  box-shadow: 0 0 0 0.5px var(--ax-sep), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* A sombra sob as abas nasce com a rolagem, em vez de uma divisória fixa. Aqui NÃO dá para usar a
   scroll-driven animation do pcp.css: lá a página inteira rola, e no almoxarifado quem rola é o
   .admin-content, que é IRMÃO da camada — `scroll(nearest)` procura entre os ancestrais e não o
   encontraria. Quem põe e tira a classe é o ouvinte de rolagem em warehouse/index.js. */
#page-warehouse .wh-abas { box-shadow: 0 1px 0 transparent; }
#page-warehouse .wh-chrome.wh-rolou .wh-abas {
  box-shadow: 0 1px 0 var(--ax-hairline), 0 14px 26px -22px rgba(0, 0, 0, 0.5);
}

/* Navegador sem blur: a camada fica sólida, senão o texto de baixo aparece através dela. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #page-warehouse .wh-abas { background: var(--ax-bg); }
  #page-warehouse .wh-chrome .header { background-color: var(--ax-header-solid); }
}

/* ── Conteúdo ───────────────────────────────────────────────────────────────────────────────── */
/* O .admin-content é quem rola (app.css); o respiro passa para o painel, senão soma duas vezes. */
#page-warehouse .admin-content { background: transparent; padding: 0; }
#page-warehouse .admin-panel { padding: 18px 20px 36px; }
/* Entrada só na troca de aba (a classe sai no animationend): refazer a lista ao filtrar não pisca. */
#page-warehouse .admin-panel.wh-entra { animation: wh-entra 200ms ease-out backwards; }
@keyframes wh-entra { from { opacity: 0; } }

#page-warehouse .text-muted { color: var(--ax-muted); }
#page-warehouse .text-danger { color: var(--ax-danger-text); }
#page-warehouse .empty-state { color: var(--ax-muted); }
#page-warehouse .empty-state .icon { opacity: 0.55; }

/* Cartas: sem borda desenhada, só a sombra de meio pixel e a profundidade. */
#page-warehouse .card {
  background: var(--ax-surface);
  border: 0;
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow-card);
  padding: 16px 18px;
}
#page-warehouse .card-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  text-transform: none;
  color: var(--ax-ink);
  margin-bottom: 10px;
}

/* ── Botões: resposta no aperto ─────────────────────────────────────────────────────────────── */
#page-warehouse .btn {
  border-radius: var(--ax-radius-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 100ms ease, background-color 150ms ease, box-shadow 150ms ease, filter 150ms ease, opacity 150ms ease;
}
#page-warehouse .btn:active { transform: scale(0.97); filter: none; transition-duration: 60ms; }
#page-warehouse .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ax-focus); }
#page-warehouse .btn:disabled,
#page-warehouse .btn[disabled] { opacity: 0.45; cursor: default; transform: none; }
#page-warehouse .btn-sm { padding: 6px 12px; font-size: 0.84rem; }
#page-warehouse .btn-primary { background: var(--ax-primary); color: var(--ax-primary-ink); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
#page-warehouse .btn-primary:hover { filter: brightness(1.08); }
#page-warehouse .btn-success { background: var(--ax-ok-fill); color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
#page-warehouse .btn-success:hover { filter: brightness(1.08); }
#page-warehouse .btn-outline {
  background: var(--ax-surface);
  color: var(--ax-ink);
  border: 1px solid var(--ax-sep);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}
#page-warehouse .btn-outline:hover { background: var(--ax-surface-2); border-color: var(--ax-muted); }
#page-warehouse .btn-gray { background: var(--ax-fill); color: var(--ax-ink); }
#page-warehouse .btn-gray:hover { background: var(--ax-fill-2); }
#page-warehouse .btn-danger { background: var(--ax-danger-fill); color: #fff; }
/* Botão do cabeçalho não pode virar pílula branca: ele mora sobre o azul-marinho. */
#page-warehouse .wh-chrome .btn:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); }

/* ── Campos ─────────────────────────────────────────────────────────────────────────────────── */
#page-warehouse input[type=text], #page-warehouse input[type=number], #page-warehouse input[type=password],
#page-warehouse input[type=date], #page-warehouse input[type=month], #page-warehouse input[type=search],
#page-warehouse input[type=time], #page-warehouse input[type=email], #page-warehouse select,
#page-warehouse textarea {
  border: 1px solid var(--ax-sep);
  border-radius: var(--ax-radius-sm);
  background-color: var(--ax-surface);   /* nunca o atalho background: apaga a seta do select */
  color: var(--ax-ink);
  padding: 7px 10px;
  font-size: 0.875rem;
  line-height: 1.3;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
#page-warehouse input:focus,
#page-warehouse select:focus,
#page-warehouse textarea:focus {
  outline: none;
  border-color: var(--ax-tint);
  box-shadow: 0 0 0 3px var(--ax-focus);
}
#page-warehouse input::placeholder,
#page-warehouse textarea::placeholder { color: var(--ax-muted); opacity: 0.85; }
/* Campo com estilo embutido: as telas do almoxarifado desenham os campos com style="..." (a
   constante INP em almoxarifado.js e os campos soltos em warehouse/index.js), e estilo embutido
   ganha da folha. Em vez de reescrever trinta telas, só a MOLDURA é retomada aqui — largura,
   altura e tamanho de fonte continuam vindo de cada tela, que é o que elas de fato precisam
   controlar. O !important existe por isso, e por isso não passa da moldura. A mesma constante
   também desenha telas de Compras e do PCP, que têm o visual delas: por isso a regra é escopada
   nesta página e nada muda lá fora. */
#page-warehouse input[style]:not([type=checkbox]):not([type=radio]):not([type=file]),
#page-warehouse select[style],
#page-warehouse textarea[style] {
  border: 1px solid var(--ax-sep) !important;
  border-radius: var(--ax-radius-sm) !important;
  background-color: var(--ax-surface) !important;
  color: var(--ax-ink) !important;
}
#page-warehouse input[style]:focus,
#page-warehouse select[style]:focus,
#page-warehouse textarea[style]:focus { border-color: var(--ax-tint) !important; }
#page-warehouse input[type=checkbox], #page-warehouse input[type=radio] { accent-color: var(--ax-tint); }
#page-warehouse .form-group label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0; color: var(--ax-ink-2); }

/* ── Tabelas ────────────────────────────────────────────────────────────────────────────────── */
#page-warehouse table.data-table {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
#page-warehouse table.data-table th {
  background: var(--ax-surface-2);
  color: var(--ax-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 9px 10px;
  border-bottom: 1px solid var(--ax-sep);
}
#page-warehouse table.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ax-hairline);
  color: var(--ax-ink);
}
#page-warehouse table.data-table tbody tr:last-child td { border-bottom: 0; }
#page-warehouse table.data-table tr:hover td { background: var(--ax-hover); }
#page-warehouse .num { font-variant-numeric: tabular-nums; }

/* Excluir ou cancelar dentro de uma lista é ação secundária: texto na cor do risco, fundo só ao
   passar o mouse. Botão vermelho cheio em cada linha gritava mais que o conteúdo. */
#page-warehouse table.data-table .btn-danger {
  background: transparent;
  color: var(--ax-danger-text);
  box-shadow: none;
}
#page-warehouse table.data-table .btn-danger:hover { background: var(--ax-danger-fill); color: #fff; }

#page-warehouse .badge,
#page-warehouse .status-pill { font-weight: 600; letter-spacing: 0.01em; }

/* ── Requisições em aberto: a carta é o objeto que se pega ──────────────────────────────────── */
#page-warehouse .req-card {
  background: var(--ax-surface);
  border: 0;
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow-card);
  transition: transform 120ms ease, box-shadow 150ms ease;
}
#page-warehouse .req-card:active { transform: scale(0.995); }
#page-warehouse .req-card.req-selected {
  box-shadow: 0 0 0 2px var(--ax-tint), var(--ax-shadow-card);
}

/* ── Cabeçalho em três partes: marca, seções, ações ─────────────────────────────────────────────
   As SEÇÕES são um controle segmentado no centro do cabeçalho; a barra translúcida de baixo mostra
   só as abas da seção. Dois níveis curtos em vez de uma fileira de nove abas: a pessoa escolhe o
   assunto e depois a tela, e a barra nunca precisa rolar para o lado no computador. */
#page-warehouse .wh-chrome .header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
}
#page-warehouse .wh-marca { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
#page-warehouse .wh-logo { height: 24px; width: auto; flex: none; }
#page-warehouse .wh-titulo {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-warehouse .wh-acoes { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
#page-warehouse .wh-secoes {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  overflow-x: auto;
  scrollbar-width: none;
}
#page-warehouse .wh-secoes::-webkit-scrollbar { display: none; }
#page-warehouse .wh-secao-btn {
  flex: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.84);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  padding: 5px 13px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
#page-warehouse .wh-secao-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
#page-warehouse .wh-secao-btn:active { transform: scale(0.97); }
#page-warehouse .wh-secao-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); }
#page-warehouse .wh-secao-btn.active { background: #ffffff; color: #15293a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

/* ── Acessibilidade ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #page-warehouse * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  #page-warehouse .wh-abas,
  #page-warehouse .wh-chrome.wh-rolou .wh-abas { box-shadow: 0 1px 0 var(--ax-hairline); }
  #page-warehouse .btn:active,
  #page-warehouse .wh-abas .admin-tab:active,
  #page-warehouse .wh-secao-btn:active,
  #page-warehouse .req-card:active,
  #page-warehouse .wh-voltar:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  #page-warehouse .wh-chrome .header {
    background-color: var(--ax-header-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #page-warehouse .wh-abas {
    background: var(--ax-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  #page-warehouse {
    --ax-hairline: rgba(0, 0, 0, 0.22);
    --ax-sep: rgba(0, 0, 0, 0.4);
    --ax-muted: #48484a;
    --ax-ink-2: #1d1d1f;
  }
  [data-theme="dark"] #page-warehouse {
    --ax-hairline: rgba(255, 255, 255, 0.24);
    --ax-sep: rgba(255, 255, 255, 0.45);
    --ax-muted: #d1d1d6;
    --ax-ink-2: #f5f5f7;
  }
  #page-warehouse .card,
  #page-warehouse .req-card { box-shadow: 0 0 0 1px var(--ax-sep); }
}

/* ── Telas estreitas ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #page-warehouse .wh-chrome .header { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  #page-warehouse .wh-acoes { grid-column: 2; grid-row: 1; }
  #page-warehouse .wh-secoes { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
}

@media (max-width: 640px) {
  #page-warehouse .admin-panel { padding: 12px 12px 28px !important; }
  #page-warehouse .wh-secao { display: none; }
  #page-warehouse .wh-titulo { padding-left: 10px; }
  #page-warehouse .wh-tela-titulo { font-size: 1.2rem; }
  #page-warehouse .wh-logo { display: none; }
}