/* ============================================================
   UNYXFLUX — unyx_bottom_nav_v1.css
   Autoridade única de estilo da barra de navegação inferior.
   Todos os módulos que exibem navegação inferior carregam este
   arquivo e adotam a estrutura HTML padronizada.

   Baseada no design do módulo Pedidos (implementação de referência).
   Substitui: mobile_bottom_nav_v2.css, wf-bottom-nav, cx-bottom-nav.

   Versão: 20260905-layer-authority-v3
   ============================================================ */

/* ── Contêiner principal ──────────────────────────────────── */

.unyx-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Navegação persistente: acima do conteúdo normal, abaixo de qualquer
     sheet/modal/drawer/backdrop. A barra não é uma superfície modal. */
  z-index: 40;
  height: calc(52px + env(safe-area-inset-bottom, 0px));
  display: none; /* ativado via body class abaixo */
  grid-template-columns: 1fr 1fr 64px 1fr 1fr;
  align-items: center;
  gap: 0;
  padding: 2px 10px calc(2px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-top: 1px solid rgba(20, 20, 40, .055);
  border-radius: 18px 18px 0 0;
  background: rgba(255, 255, 255, .86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 -6px 14px rgba(17, 24, 39, .045);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* ── Ativação por autoridade de layout ──────────────────── */
/* Quando o módulo publica data-unyx-layout, esse atributo é a única
   autoridade de modo. As classes unyx-mobile-v2/unyx-tablet-v2 podem
   continuar presentes por compatibilidade visual e NÃO autorizam a barra
   no desktop.

   Módulos legados que ainda não publicam data-unyx-layout preservam o
   fallback histórico pelas classes de body até migrarem para uma autoridade
   responsiva própria. */

body[data-unyx-layout="mobile"] .unyx-bottom-nav,
body[data-unyx-layout="tablet"] .unyx-bottom-nav,
body:not([data-unyx-layout]).unyx-mobile-v2 .unyx-bottom-nav,
body:not([data-unyx-layout]).unyx-tablet-v2 .unyx-bottom-nav {
  display: grid !important;
}

body[data-unyx-layout="desktop"] .unyx-bottom-nav {
  display: none !important;
}

/* ── Limite único de largura (unifica os módulos sem autoridade própria) ──
   Diretor definiu: a barra inferior não pode aparecer a partir de 901px,
   em nenhum módulo — mesmo limiar já usado pela autoridade de layout do
   Pedidos (unyx_layout_authority_v1.js) para o modo desktop. Módulos que
   ainda não publicam data-unyx-layout (hoje: Estoque, Caderno de Vales)
   dependiam só das classes legadas acima, que nunca escondiam a barra em
   nenhuma largura. Esta regra repete a mesma especificidade das regras de
   exibição por classe legada (linhas 50-53) e vem depois delas no arquivo,
   para vencer no cascade sem depender de JS. Não afeta o Pedidos, que já
   esconde a barra por data-unyx-layout="desktop" antes deste breakpoint. */
@media (min-width: 901px) {
  body:not([data-unyx-layout]).unyx-mobile-v2 .unyx-bottom-nav,
  body:not([data-unyx-layout]).unyx-tablet-v2 .unyx-bottom-nav {
    display: none !important;
  }
}

body[data-unyx-layout="mobile"] .unyx-bottom-nav svg,
body[data-unyx-layout="tablet"] .unyx-bottom-nav svg,
body:not([data-unyx-layout]).unyx-mobile-v2 .unyx-bottom-nav svg,
body:not([data-unyx-layout]).unyx-tablet-v2 .unyx-bottom-nav svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}

/* ── Tema escuro ─────────────────────────────────────────── */

body.unyx-dark-theme .unyx-bottom-nav {
  background: rgba(12, 16, 34, .84);
  border-top-color: rgba(255, 255, 255, .08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 -6px 16px rgba(0, 0, 0, .24);
}

/* ── Item de navegação ───────────────────────────────────── */

.unyx-bottom-nav__item {
  min-width: 0;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #111a33;
  font: 800 10px/1.05 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.025em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  appearance: none;
  transition: color .15s;
}

.unyx-bottom-nav__item svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  flex-shrink: 0;
}

/* Ícone via <img> (módulos que usam SVG externo em vez de inline) */

.unyx-bottom-nav__icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

/* dots do "Mais" ficam preenchidos */
.unyx-bottom-nav__item[data-unyx-nav="mais"] svg circle,
.unyx-bottom-nav__item[data-unyx-nav="menu"] svg circle {
  fill: currentColor;
  stroke: none;
}

.unyx-bottom-nav__item span {
  display: block;
  max-width: 62px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Estado ativo ────────────────────────────────────────── */
/* .is-active é a convenção oficial do componente. .active é reconhecida
   aqui como sinônimo visual só porque o monolito legado de Cobranças
   (comprovantes_sync_topbar_h.js, 688KB) alterna essa classe em vez de
   .is-active — em vez de duplicar esta definição em CSS local de módulo
   (como acontecia antes, em cobrancas_bottom_dock_v1.css), a autoridade
   única já nasce reconhecendo as duas grafias. Nenhum módulo deve voltar
   a redefinir a aparência do estado ativo por conta própria. */

.unyx-bottom-nav__item.is-active,
.unyx-bottom-nav__item.active {
  color: #6c3bff;
  position: relative;
}

.unyx-bottom-nav__item.is-active::after,
.unyx-bottom-nav__item.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: #6c3bff;
  transform: translateX(-50%);
  box-shadow: 0 3px 8px rgba(108, 59, 255, .22);
}

.unyx-bottom-nav__item:active {
  transform: translateY(1px) scale(.985);
}

body.unyx-dark-theme .unyx-bottom-nav__item { color: #edf0ff; }
body.unyx-dark-theme .unyx-bottom-nav__item.is-active,
body.unyx-dark-theme .unyx-bottom-nav__item.active { color: #8d70ff; }

/* ── Slot central (espaço reservado para FAB externo) ────── */

.unyx-bottom-nav__slot-add {
  width: 52px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  pointer-events: none;
}

/* Slot vazio não desenha nada */
.unyx-bottom-nav__slot-add:empty::before {
  content: none !important;
  display: none !important;
}

.unyx-bottom-nav__slot-add > button,
.unyx-bottom-nav__slot-add #addBtn {
  display: none !important;
}

/* ── FAB interno (módulos sem #addBtn externo) ───────────── */

.unyx-bottom-nav__fab {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6c3bff 0%, #3b10ef 100%);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  box-shadow:
    0 12px 22px rgba(76, 38, 255, .28),
    0 4px 10px rgba(76, 38, 255, .18);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s;
}

.unyx-bottom-nav__fab svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.unyx-bottom-nav__fab:active {
  transform: scale(.96);
}

/* ── FAB externo (#addBtn) — herança do Pedidos ──────────── */

body[data-unyx-layout="mobile"] #addBtn,
body[data-unyx-layout="tablet"] #addBtn,
body:not([data-unyx-layout]).unyx-mobile-v2 #addBtn,
body:not([data-unyx-layout]).unyx-tablet-v2 #addBtn {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
  transform: translateX(-50%) !important;
  /* FAB acompanha a camada de navegação; modais/sheets permanecem acima. */
  z-index: 41 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  background: linear-gradient(135deg, #6c3bff 0%, #3b10ef 100%) !important;
  color: #fff !important;
  box-shadow:
    0 12px 22px rgba(76, 38, 255, .28),
    0 4px 10px rgba(76, 38, 255, .18) !important;
  pointer-events: auto !important;
}

body[data-unyx-layout="mobile"] #addBtn .icon,
body[data-unyx-layout="tablet"] #addBtn .icon,
body:not([data-unyx-layout]).unyx-mobile-v2 #addBtn .icon,
body:not([data-unyx-layout]).unyx-tablet-v2 #addBtn .icon {
  font-size: 20px !important;
  line-height: 1 !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

body[data-unyx-layout="mobile"] #addBtn .label,
body[data-unyx-layout="tablet"] #addBtn .label,
body:not([data-unyx-layout]).unyx-mobile-v2 #addBtn .label,
body:not([data-unyx-layout]).unyx-tablet-v2 #addBtn .label { display: none !important; }

body[data-unyx-layout="mobile"] #addBtn:active,
body[data-unyx-layout="tablet"] #addBtn:active,
body:not([data-unyx-layout]).unyx-mobile-v2 #addBtn:active,
body:not([data-unyx-layout]).unyx-tablet-v2 #addBtn:active {
  transform: translateX(-50%) scale(.96) !important;
}

/* ── Espaço de scroll para não cobrir conteúdo ───────────── */
/* Escopo restrito a dispositivos com bottom nav ativo, para
   não adicionar padding em páginas que não exibem a barra.   */

body[data-unyx-layout="mobile"],
body[data-unyx-layout="tablet"],
body:not([data-unyx-layout]).unyx-mobile-v2,
body:not([data-unyx-layout]).unyx-tablet-v2 {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

body[data-unyx-layout="mobile"] .app-shell,
body[data-unyx-layout="mobile"] main,
body[data-unyx-layout="tablet"] .app-shell,
body[data-unyx-layout="tablet"] main,
body:not([data-unyx-layout]).unyx-mobile-v2 .app-shell,
body:not([data-unyx-layout]).unyx-mobile-v2 main,
body:not([data-unyx-layout]).unyx-tablet-v2 .app-shell,
body:not([data-unyx-layout]).unyx-tablet-v2 main {
  scroll-padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
}

/* Em desktop oficial a bottom nav não existe; portanto este componente
   também não reserva espaço de rodapé. A decisão é semântica (modo publicado),
   não um segundo breakpoint local. */
body[data-unyx-layout="desktop"] {
  padding-bottom: 0;
}

body[data-unyx-layout="desktop"] .app-shell,
body[data-unyx-layout="desktop"] main {
  scroll-padding-bottom: 0;
}


/* ── Variante compacta de 3 posições (Shell/Home) ──────────
   Mesma autoridade visual da barra compartilhada; altera apenas a grade. */
.unyx-bottom-nav--compact{grid-template-columns:1fr 64px 1fr}
.unyx-bottom-nav--compact[hidden]{display:none!important}
@media(max-width:1179px){
  .unyx-bottom-nav--compact:not([hidden]){display:grid!important}
}
@media(min-width:1180px){
  .unyx-bottom-nav--compact{display:none!important}
}


/* ── Home: sheet bloqueante ─────────────────────────────────
   Quando Ações rápidas está aberto, a navegação compacta deixa
   completamente a cena. O estado é controlado pela própria Home;
   a autoridade compartilhada apenas respeita a semântica modal. */
body.unyx-home-sheet-open .unyx-bottom-nav--compact {
  visibility: hidden !important;
  opacity: 0;
  pointer-events: none !important;
}