/* HomeFix · navegação superior (Manual de Marca 2023)
 * Barra grafite com o logo oficial "sobre fundo cinza", áreas em abas e telas da área logo abaixo.
 * Vermelho apenas para o que está ativo; textos em Metropolis, títulos em Bebas. */

:root {
  --hf-topnav-h: 112px;
  --hf-topnav-bar: #3C3C3B;
  --hf-topnav-line: #D7D7D7;
}

/* ---------- estrutura geral: menu deixa de ser lateral ---------- */
body.hf-topnav #appShell { display: block; }
body.hf-topnav #sidebarOverlay,
body.hf-topnav #btnOpenSidebar,
body.hf-topnav #btnCloseSidebar,
body.hf-topnav #sidebarCollapse,
body.hf-topnav #sidebar .sidebar-footer-copy,
body.hf-topnav #sidebar .hf-topnav-section-label { display: none !important; }

body.hf-topnav #sidebar,
body.hf-topnav #sidebar.sidebar-collapsed {
  position: sticky !important;
  top: 0;
  left: auto;
  z-index: 40;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "brand groups search tools" "items items items items";
  align-items: center;
  background: var(--hf-topnav-bar);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

/* área do logo: respiro mínimo de x/2 em volta (manual: respiro e arejamento) */
body.hf-topnav #sidebar > div:first-child {
  grid-area: brand;
  display: flex;
  align-items: center;
  padding: 10px 22px 10px 24px !important;
  border: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
body.hf-topnav .sidebar-brand {
  width: auto;
  height: auto;
  overflow: visible;
  border-radius: 6px;
  display: block;
}
body.hf-topnav .sidebar-brand img {
  position: static;
  display: block;
  width: auto;
  height: 46px;
  max-width: none;
}
body.hf-topnav .sidebar-brand:hover { transform: none; filter: brightness(1.08); }

/* ---------- linha 1: áreas ---------- */
.hf-topnav-groups {
  grid-area: groups;
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.hf-topnav-groups::-webkit-scrollbar { display: none; }
.hf-topnav-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  min-height: 48px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font: 600 13px Metropolis, Arial, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.hf-topnav-group svg { width: 17px; height: 17px; flex: 0 0 auto; }
.hf-topnav-group:hover { color: #FFFFFF; background: rgba(255, 255, 255, .07); }
.hf-topnav-group.active { color: #FFFFFF; border-bottom-color: var(--hf-red, #D8101A); }
.hf-topnav-group:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; }
.hf-topnav-group[hidden] { display: none; }

/* ---------- ferramentas à direita (data e atualizar) ---------- */
.hf-topnav-tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 0 12px;
}
.hf-topnav-tools #todayDate { color: rgba(255, 255, 255, .78); font-size: 12px; font-weight: 500; }
.hf-topnav-tools #btnRefresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: #FFFFFF;
}
.hf-topnav-tools #btnRefresh:hover { background: rgba(255, 255, 255, .1); }

/* ---------- linha 2: telas da área ativa ---------- */
body.hf-topnav #sidebar nav {
  grid-area: items;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 2px;
  margin: 0 !important;
  padding: 0 20px !important;
  min-height: 48px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #FFFFFF;
  border-bottom: 1px solid var(--hf-topnav-line);
  scrollbar-width: thin;
}
body.hf-topnav #sidebar nav .nav-item {
  width: auto !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  min-height: 48px;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent;
  background: transparent !important;
  color: var(--hf-graphite, #3C3C3B) !important;
  font: 600 13px Metropolis, Arial, sans-serif !important;
  white-space: nowrap;
  transform: none !important;
  box-shadow: none !important;
}
body.hf-topnav #sidebar nav .nav-item svg { width: 17px; height: 17px; color: var(--hf-gray, #A8A8A8); }
body.hf-topnav #sidebar nav .nav-item:hover { background: #F4F4F4 !important; }
body.hf-topnav #sidebar nav .nav-item.active { color: var(--hf-red, #D8101A) !important; border-bottom-color: var(--hf-red, #D8101A); }
body.hf-topnav #sidebar nav .nav-item.active svg { color: var(--hf-red, #D8101A); }
body.hf-topnav #sidebar nav .nav-item:focus-visible { outline: 2px solid var(--hf-red, #D8101A); outline-offset: -4px; }
body.hf-topnav #sidebar nav #sidebarCollapse,
body.hf-topnav #sidebar nav .nav-item.hf-topnav-outside,
body.hf-topnav #sidebar nav .nav-item[hidden] { display: none !important; }
body.hf-topnav #sidebar nav .nav-label { display: inline !important; }

/* ---------- cabeçalho vermelho antigo: título já está no topo de cada tela ---------- */
body.hf-topnav #globalHeader,
body.hf-topnav.dashboard-active #globalHeader { display: none !important; }

/* elementos fixos das telas passam a respeitar a altura da navegação */
@media (min-width: 861px) {
  body.hf-topnav .dashboard-filter-panel { top: calc(var(--hf-topnav-h) + 8px); }
  body.hf-topnav .dashboard-edit-bar { top: calc(var(--hf-topnav-h) + 8px); }
}
body.hf-topnav main { scroll-margin-top: var(--hf-topnav-h); }
/* só uma tela aparece por vez: a margem entre telas (space-y) não deve virar espaço vazio no topo */
body.hf-topnav main > .view-screen { margin-top: 0 !important; }

/* ---------- telas médias ---------- */
@media (max-width: 1180px) {
  .hf-topnav-tools #todayDate { display: none; }
  .hf-topnav-group { padding: 0 12px; }
}

/* ---------- celular e tablet: logo + atualizar em cima, áreas e telas em faixas roláveis ---------- */
@media (max-width: 860px) {
  body.hf-topnav #sidebar,
  body.hf-topnav #sidebar.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand search tools" "groups groups groups" "items items items";
    padding-top: env(safe-area-inset-top);
    position: relative !important; /* no celular o menu rola junto: libera a tela para o conteúdo */
  }
  body.hf-topnav #sidebar > div:first-child { padding: 8px 14px !important; }
  body.hf-topnav .sidebar-brand img { height: 36px; }
  .hf-topnav-tools { padding: 0 12px; }
  .hf-topnav-groups { padding: 0 6px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .hf-topnav-group { flex: 1 0 auto; justify-content: center; min-height: 44px; padding: 0 10px; font-size: 12px; }
  body.hf-topnav #sidebar nav { padding: 0 8px !important; min-height: 44px; }
  body.hf-topnav #sidebar nav .nav-item { min-height: 44px; padding: 0 12px !important; font-size: 12.5px !important; }
}

@media (max-width: 480px) {
  .hf-topnav-group { padding: 0 8px; }
  .hf-topnav-group svg { display: none; }
}

@media print {
  body.hf-topnav #sidebar { display: none !important; }
}

/* aviso visível apenas no modo de revisão offline (servidor local) */
.hf-offline-review-badge {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 260;
  padding: 8px 12px;
  border-radius: 999px;
  background: #3C3C3B;
  color: #FFFFFF;
  font: 600 11px Metropolis, Arial, sans-serif;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
@media print { .hf-offline-review-badge { display: none; } }