/* Smart Pages: casca das áreas logadas (/clients e /admin). Estrutura do painel-v3 do pages
   (menu de 256 px, topo, gaveta abaixo de 1100 px), re-tematizada com os tokens; corpo de 16 px; alvos de 44 px;
   cards com raio 16 ([data-area="app"] em tokens.css). */

.app { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }
.app-menu {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--es-fundo);
  border-right: 1px solid var(--es-linha); padding: var(--esp-4) var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-4);
}
.app-menu .marca { padding: 0 var(--esp-2); min-height: var(--alvo); }
.app-menu nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-1); }
.app-menu nav a {
  display: flex; align-items: center; gap: var(--esp-3); min-height: var(--alvo); padding: 0 var(--esp-3);
  border-radius: var(--raio-sm); color: var(--es-texto); text-decoration: none; font-size: var(--fs-ui);
}
.app-menu nav a:hover { background: var(--es-superficie-2); }
.app-menu nav a[aria-current="page"] { background: var(--es-suave); color: var(--es-destaque); font-weight: var(--peso-ui); }
.app-menu .rodape-menu { margin-top: auto; font-size: var(--fs-peq); color: var(--es-texto-3); padding: 0 var(--esp-2); }

.app-corpo { min-width: 0; display: flex; flex-direction: column; }
.app-topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--esp-3); min-height: 64px;
  padding: 0 var(--esp-5); background: var(--es-pagina); border-bottom: 1px solid var(--es-linha);
}
.app-topo .titulo { font-size: var(--fs-xl); font-weight: var(--peso-h3); margin: 0; flex: 1; min-width: 0; }
.app-topo .usuario { font-size: var(--fs-peq); color: var(--es-texto-2); }
.app-main { padding: var(--esp-5); width: 100%; max-width: 1440px; }
.app-main .card { border: 1px solid var(--es-linha); }
.botao-menu { display: none; }
.app-veu { display: none; }
.seletor-tenant select { min-height: var(--alvo); border-radius: var(--raio-sm); border: 1px solid var(--es-linha-forte); background: var(--es-fundo); padding: 0 var(--esp-3); }

@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .app-menu {
    position: fixed; left: 0; top: 0; bottom: 0; width: 280px; max-width: 86vw; z-index: 60;
    transform: translateX(-105%); transition: transform var(--es-dur-2) var(--es-ease); box-shadow: var(--es-sombra-forte);
  }
  .app[data-gaveta="aberta"] .app-menu { transform: translateX(0); }
  .app[data-gaveta="aberta"] .app-veu { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(5, 17, 21, .45); }
  .botao-menu { display: inline-flex; }
  .app-topo { padding: 0 var(--esp-4); }
  .app-main { padding: var(--esp-4); }
}

.entrar { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--esp-5) var(--gutter); }
.entrar .cartao-form { width: min(440px, 100%); }
.entrar .marca { margin-bottom: var(--esp-5); }