/* MaissGraph — LAYOUT MOBILE (aplicado só em telas < 768px via media no <link>).
   App-shell nativo: topbar com menu, sidebar em gaveta, assistente em folha, nav inferior. */

/* elementos exclusivos de desktop ficam ocultos no mobile */
.main > .topbar { display: none !important; }

.layout { display: block; min-height: 100vh; padding-top: var(--mtop-h); padding-bottom: var(--mnav-h); }

/* barra superior fixa */
.mobile-topbar {
  display: flex; align-items: center; gap: .7rem; position: fixed; top: 0; left: 0; right: 0; height: var(--mtop-h);
  background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 1rem; z-index: 43;
}
.mobile-topbar .menu-btn { background: none; border: 0; width: 40px; height: 40px; margin-left: -8px; border-radius: 10px;
  display: grid; place-items: center; color: var(--text-2); }
.mobile-topbar .menu-btn:hover { background: var(--bg); }
.mobile-topbar .menu-btn svg { width: 24px; height: 24px; stroke: currentColor; }
.mobile-topbar .m-brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.05rem; letter-spacing: -.3px; }
.mobile-topbar .m-brand .brand-mark { width: 28px; height: 28px; flex: none; font-size: 15px; border-radius: 8px; }
.mobile-topbar .m-brand b { color: var(--primary); }
.mobile-topbar .m-status { margin-left: auto; }

/* sidebar como gaveta deslizante */
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.1rem .8rem;
  z-index: 46; transform: translateX(-100%); visibility: hidden; transition: transform .25s ease;
  box-shadow: var(--shadow-lg); }
.sidebar.open { transform: translateX(0); visibility: visible; }
.side-brand { padding: .3rem .5rem 1.1rem; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: .8rem; }

/* conteúdo */
.main { display: block; }
.content { padding: 1rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.stat { padding: .85rem .9rem; gap: .7rem; border-radius: 14px; }
.stat .ico { width: 38px; height: 38px; border-radius: 10px; }
.stat .ico svg { width: 19px; height: 19px; }
.stat .val { font-size: 1.25rem; }
.stat .lbl { font-size: .72rem; }
.grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.card { padding: 1rem 1rem 1.1rem; border-radius: 14px; }
/* barras horizontais precisam de altura p/ os rótulos: canvas mais alto no mobile */
.card .canvas-wrap { min-height: 240px; }

/* assistente como folha de baixo p/ cima (bottom sheet full-screen) */
.chat { position: fixed; inset: 0; background: var(--surface); display: flex; flex-direction: column;
  z-index: 47; transform: translateY(100%); visibility: hidden; transition: transform .28s ease; }
.chat.open { transform: translateY(0); visibility: visible; }
.chat-head .chat-close { display: grid; }
#chat-form input { font-size: 16px; } /* evita zoom automático do iOS */

/* navegação inferior fixa */
.mobile-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: var(--mnav-h);
  background: var(--surface); border-top: 1px solid var(--border); z-index: 42; padding-bottom: env(safe-area-inset-bottom, 0); }
.mobile-nav button { flex: 1; background: none; border: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; color: var(--muted); font-size: .68rem; font-weight: 600; }
.mobile-nav button svg { width: 22px; height: 22px; stroke: currentColor; }
.mobile-nav button.active { color: var(--primary); }

/* login um pouco mais compacto no celular */
.login-card { padding: 2rem 1.5rem; border-radius: 18px; }