/* ── Casca de app para o painel no celular ─────────────────────────────────
   Carregado pelo base.html só abaixo de 768px (atributo media do <link>), então
   computador e tablet não mudam. Dá às páginas do painel a mesma cara das telas
   de campo (/app/*) e troca o menu lateral pela barra de abas embaixo. Cores e
   fonte vêm de ui-tokens.css / panel-ui.css, iguais às do computador. */

:root {
  --app-font: var(--ui-font-sans);
  --app-font-cond: var(--ui-font-display);
  --app-surface: var(--ui-surface);
  --app-border: var(--ui-border);
  --app-brand: var(--ui-primary);
  --app-text-3: var(--ui-text-subtle);
}

body {
  font-family: var(--app-font);
  font-size: 16px;
}

/* Conteúdo nunca fica atrás da barra de abas. O espaço vai no fim do conteúdo,
   não no body: o Tabler fixa a altura do body na da tela e as páginas longas
   transbordam, então um padding no body ficaria no meio da página. */
.page-wrapper {
  padding-bottom: calc(64px + 16px + env(safe-area-inset-bottom));
}

/* Navegação: a barra de abas substitui o menu lateral e o rodapé. */
aside.navbar-vertical .navbar-toggler,
aside.navbar-vertical .navbar-collapse,
.footer {
  display: none !important;
}
aside.navbar-vertical {
  min-height: 56px;
}

/* Tipografia e controles no tamanho de toque das telas de campo. */
.page-title { font-size: 1.75rem; }
.card-title { font-size: 1.125rem; }
.form-control,
.form-select {
  min-height: 48px;
}