/*
 * Estrutura das telas logadas.
 * Celular: barra superior com a conta + barra de navegação embaixo.
 * Tablet e notebook: menu lateral escuro fixo à esquerda.
 */

/* Campo focado ou rolado até a vista nunca fica escondido atrás da barra inferior. */
html:has(.app-shell) { scroll-padding-bottom: calc(var(--bottom-nav-height) + var(--space-4)); }

.app-shell__main {
  padding: var(--space-5) var(--space-4);
  padding-bottom: calc(var(--bottom-nav-height) + var(--space-6) + env(safe-area-inset-bottom));
  max-width: var(--content-max-width);
  margin: 0 auto;
}

@media (min-width: 640px) {
  html:has(.app-shell) { scroll-padding-bottom: 0; }

  .app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100dvh;
  }

  .app-shell__main { padding: var(--space-6) var(--space-5); width: 100%; }
}

@media (min-width: 1024px) {
  .app-shell__main { padding: var(--space-7) var(--space-6); }
}