/*
  Layout mobile. Carregado pelo index.html com media="not all" e ativado
  pelo JS (media="all") só quando o dispositivo é detectado como mobile.
  Regras escopadas em html.is-mobile para não vazar no desktop.
*/
html.is-mobile body { font-size: 14px; }

html.is-mobile main { padding: 12px !important; }

/* Cards de status: uma coluna, mais compactos */
html.is-mobile #cards { grid-template-columns: 1fr !important; gap: 12px !important; }
html.is-mobile #cards .card { padding: 16px !important; }
html.is-mobile #cards .text-5xl { font-size: 2.5rem !important; }

/* Gráficos: sempre empilhados */
html.is-mobile #charts { grid-template-columns: 1fr !important; }

/* Navegação e controles: quebram linha e ganham área de toque */
html.is-mobile nav { flex-wrap: wrap; row-gap: 6px; }
html.is-mobile .rangeBtn { padding: 8px 12px !important; }
html.is-mobile .navBtn { padding: 8px 12px !important; }

/* O rótulo da janela vai pra baixo, ocupando a largura toda */
html.is-mobile #rangeLabel { width: 100%; margin-top: 4px; }

/* Botão maximizar maior pro dedo */
html.is-mobile .fsBtn { padding: 8px 12px !important; font-size: 14px !important; }

/* Enum types: empilha rótulo e controle */
html.is-mobile #enumList .flex-wrap { flex-direction: column; align-items: stretch !important; }
html.is-mobile #enumList input[type="number"] { width: 100% !important; }

/* Mobile rola normalmente (não força tudo em 100vh) */
html.is-mobile, html.is-mobile body { height: auto; overflow: auto; display: block; }
html.is-mobile main { display: block; }
html.is-mobile #view-dashboard,
html.is-mobile #chartPanel,
html.is-mobile #charts,
html.is-mobile #card-combined,
html.is-mobile #body-combined { height: auto; min-height: 0; display: block; flex: none; }
html.is-mobile #body-combined svg { max-height: none; }