/* Layout fluido — o sistema se ajusta ao tamanho do monitor.
   Regras principais:
   1. Nada de rolagem horizontal: o menu compacta e, se preciso, quebra linha.
   2. Cabeçalho e rodapé sempre visíveis: só a área central rola.
   3. Fontes, espaçamentos e larguras usam clamp() para acompanhar a tela. */

:root {
  --page-gutter: clamp(12px, 2.2vw, 34px);
  --header-gap: clamp(10px, 1.4vw, 28px);
}

html,
body {
  max-width: 100%;
  /* "clip" impede rolagem lateral sem criar uma área de rolagem (mantém o
     comportamento de position: sticky). "hidden" fica como reserva. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Casca do sistema: cabeçalho fixo no topo, rodapé sempre no fim da tela e
   apenas o conteúdo rolando. Assim a barra inferior aparece em qualquer
   monitor, sem precisar rolar a página inteira. */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 681px) {
  #app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  #app > .header,
  #app > .footer {
    flex: 0 0 auto;
  }

  #app > .main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---------- Cabeçalho ---------- */

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  max-width: 1680px;
  min-height: 0;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-inline: var(--page-gutter);
  gap: var(--header-gap);
}

.header-inner > .brand {
  flex: 0 0 auto;
}

/* O menu ocupa o espaço restante e nunca é cortado nem exige rolagem lateral:
   os itens mantêm a largura do texto e, se não couberem, o menu quebra em
   outra linha. O ajuste automático (fitNavigation, em app.js) compacta antes
   de quebrar, para manter o cabeçalho em uma linha no maior número de telas. */
nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  gap: clamp(1px, .25vw, 5px);
  overflow: visible;
  scrollbar-width: none;
}

nav::-webkit-scrollbar {
  display: none;
}

/* Sem encolher: o texto do item nunca é cortado. */
nav > a,
nav > button {
  flex: 0 0 auto;
}

nav a,
nav button {
  padding: clamp(8px, .8vw, 12px) clamp(7px, .85vw, 13px);
  font-size: clamp(11px, .8vw, 13px);
}

nav .nav-icon {
  width: clamp(15px, 1.3vw, 18px);
  height: clamp(15px, 1.3vw, 18px);
}

nav.nav-compact a,
nav.nav-compact button {
  gap: 5px;
  padding: 8px 9px;
  font-size: 11.5px;
}

nav.nav-compact .nav-icon {
  width: 15px;
  height: 15px;
}

nav.nav-tight a,
nav.nav-tight button {
  gap: 0;
  padding: 8px;
  font-size: 11px;
}

nav.nav-tight .nav-icon,
nav.nav-tight .nav-caret {
  display: none;
}

/* Último recurso (telas estreitas): duas linhas, sem cortar nenhum item. */
nav.nav-wrap {
  flex-wrap: wrap;
  row-gap: 4px;
  align-content: flex-start;
}

.header-user {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ---------- Conteúdo ---------- */

.main {
  width: min(100%, 1680px);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  padding-top: clamp(18px, 2.4vw, 34px);
  padding-bottom: clamp(24px, 3vw, 44px);
  min-height: 0;
}

.page-heading {
  gap: clamp(12px, 2vw, 28px);
}

.page-heading h1 {
  font-size: clamp(22px, 1.8vw, 32px);
}

.panel {
  max-width: 100%;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.toolbar input,
.toolbar select {
  flex: 1 1 220px;
  min-width: 0;
}

.form-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

input,
select,
textarea {
  max-width: 100%;
}

/* ---------- Rodapé ---------- */

.footer {
  width: min(100%, 1680px);
  margin-top: auto;
  margin-inline: auto;
  padding: 14px var(--page-gutter) 14px;
}

.footer-content,
.footer-bar {
  flex-wrap: wrap;
  row-gap: 4px;
  text-align: center;
}

.footer-content {
  padding-bottom: 6px;
}

.footer-bar {
  padding: 8px 12px;
  font-size: clamp(10px, .78vw, 11.5px);
  line-height: 1.4;
}

/* ---------- Adaptações ---------- */

@media (min-width: 1800px) {
  body { font-size: 15px; }
  .main { padding-inline: 42px; }
}

/* Notebooks e monitores com escala: menu em linha própria, abaixo da marca. */
@media (max-width: 1100px) {
  .header-inner {
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  nav {
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }

  .header-user {
    margin-left: auto;
  }

  .finance-menu {
    position: fixed !important;
    max-width: calc(100vw - 20px);
  }
}

@media (max-width: 900px) {
  .header-user #username {
    display: none;
  }
}

@media (max-width: 680px) {
  .header-inner { gap: 10px; }
  nav a,
  nav button { padding: 9px; font-size: 11.5px; }
  .main { padding-top: 18px; }
  .page-heading { display: block; }
  .page-heading > :last-child { margin-top: 14px; }
  .toolbar input,
  .toolbar select,
  .toolbar .btn { flex: 1 1 100%; width: 100%; }
  .data-table { min-width: 680px; }
  .footer { padding-block: 12px; }
  .footer-content span { padding: 0 4px; }
  .footer-bar { padding: 8px 10px; }
  .footer-bar span { padding: 0 3px; letter-spacing: .04em; }
}

/* Telas baixas (notebooks com 768px de altura): compacta o cabeçalho. */
@media (max-height: 800px) and (min-width: 681px) {
  .header-inner { padding-top: 6px; padding-bottom: 6px; }
  .main { padding-top: 22px; padding-bottom: 26px; }
  .footer { padding-block: 10px; }
  .footer-content { padding-bottom: 4px; }
}