html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
  }
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ============================================================
   xTrackFoz — safe-area-inset pra WebView nativo (iOS + Android)

   Estrategia em 2 camadas:

   1) is-flutter-webview (TODOS os Flutter WebViews — iOS + Android)
      Aplica env(safe-area-inset-*) puro. Funciona perfeitamente em
      Android (Chromium WebView respeita viewport-fit=cover) — empurra
      o conteudo abaixo do status bar / display cutout / hole punch
      e acima da gesture bar.

   2) is-ios-native (SO iOS — sobrescreve com fallback hardcoded)
      No WKWebView, env(safe-area-inset-*) retorna 0 (Apple ignora
      viewport-fit=cover dentro do flutter_inappwebview). Workaround:
      max(env(), 47px) garante padding minimo absoluto. iPhone X-13
      tem 47px de safe area; Dynamic Island 14+ tem 59px (fica
      espremido mas legivel).

   Ordem importa — is-ios-native vem DEPOIS pra ganhar no cascade.

   Usa data-attributes custom (data-xtrackfoz-*) onde possivel pra
   sobreviver a mudancas de versao do MUI. ============================================================ */

/* --- TOPO (Header, AppBar, Drawer, lista devices, controles MapLibre) --- */
body.is-flutter-webview [data-xtrackfoz-header],
body.is-flutter-webview .MuiAppBar-root,
body.is-flutter-webview .MuiDrawer-paper,
body.is-flutter-webview [data-xtrackfoz-device-list] {
  padding-top: env(safe-area-inset-top, 0px) !important;
  box-sizing: border-box !important;
}
body.is-flutter-webview .maplibregl-ctrl-top-right,
body.is-flutter-webview .maplibregl-ctrl-top-left {
  top: env(safe-area-inset-top, 0px) !important;
}

/* iOS-specific: fallback hardcoded porque env() = 0 no WKWebView */
body.is-ios-native [data-xtrackfoz-header],
body.is-ios-native .MuiAppBar-root,
body.is-ios-native .MuiDrawer-paper,
body.is-ios-native [data-xtrackfoz-device-list] {
  padding-top: max(env(safe-area-inset-top, 0px), 47px) !important;
}
body.is-ios-native .maplibregl-ctrl-top-right,
body.is-ios-native .maplibregl-ctrl-top-left {
  top: max(env(safe-area-inset-top, 0px), 47px) !important;
}

/* --- RODAPE (BottomMenu, Drawer) --- */
/* Padding-bottom no Paper EXTERNO do BottomMenu (data-attribute
   custom). Antes estava no MuiBottomNavigation-root interno — isso
   comprimia os icones porque o BottomNavigation tem altura fixa 56px.
   Aplicado no Paper, a altura total cresce sem encolher os icones.
   Background herdado do BottomNavigation interno pra cor do padding
   bater com o resto do menu (sem faixa visivel de cor diferente). */
body.is-flutter-webview [data-xtrackfoz-bottom-bar] {
  padding-top: 5px !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  background-color: var(--mui-palette-background-paper, #121212) !important;
  /* MUI Paper aplica um overlay claro via background-image em dark mode
     quando ha elevation > 0 — isso deixa o Paper visualmente MAIS CLARO
     que background.paper (#121212). Desabilita o overlay pro background
     "puro" aparecer e bater com a cor do BottomNavigation interno. */
  background-image: none !important;
}
body.is-flutter-webview [data-xtrackfoz-bottom-bar] .MuiBottomNavigation-root {
  background-color: inherit !important;
  background-image: none !important;
}

/* Drawer lateral mobile (menu de Configuracoes / Relatorios que abre
   como overlay): tambem respeita gesture bar / home indicator embaixo
   pra o ultimo item (Logout) nao ficar coberto. */
body.is-flutter-webview .MuiDrawer-paper {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* iOS-specific: fallback bottom (env() = 0). 5px cobre o Home Indicator
   visual com respiro pequeno. */
body.is-ios-native [data-xtrackfoz-bottom-bar] {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 5px) !important;
}
body.is-ios-native .MuiDrawer-paper {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 10px) !important;
}