/* DepotDesk — ajustes para celular.
   Carregado DEPOIS do <style> embutido, então sobrescreve. */

/* Botão hambúrguer do topbar — escondido no desktop, visível no celular. */
.topbar-menu-btn {
  display: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted-2);
  cursor: pointer;
  padding: 7px;
  border-radius: 7px;
  line-height: 0;
}
.topbar-menu-btn:hover { color: var(--ink-2); border-color: var(--border-2); }
.topbar-menu-btn .icon { width: 18px; height: 18px; }

@media (max-width: 640px) {
  /* --- Sidebar vira um menu que desliza por cima --- */
  .sidebar {
    width: var(--sb-w-expanded) !important;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.expanded { transform: translateX(0); }
  /* Aberta no celular, mostra sempre os textos (no desktop eles só
     aparecem com .expanded; aqui a sidebar inteira é a versão expandida). */
  .sidebar .logo-text,
  .sidebar .nav-section,
  .sidebar .nav-label,
  .sidebar .sidebar-footer span { opacity: 1 !important; }
  .main, .main.shifted { margin-left: 0 !important; }

  /* --- Topbar --- */
  .topbar-menu-btn { display: flex; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-left .page-eyebrow,
  .topbar-left .page-divider { display: none; }
  /* esconde a data (2ª pílula) e o nome do usuário — cabe melhor */
  .topbar-right .topbar-meta + .topbar-meta { display: none; }
  .user-name { display: none; }
  .user-chip { padding: 4px; }

  /* --- Conteúdo e grids: tudo em 1 coluna --- */
  .content { padding: 16px 12px 32px; }
  .kpi-row { grid-template-columns: 1fr; }
  .span-3, .span-4, .span-6, .span-8, .span-12 { grid-column: span 12; }
  .map-grid { grid-template-columns: 1fr; }
  .settings-grid, .settings-grid-2 { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 19px; }

  /* --- Drawer e modal ocupam a tela --- */
  .drawer { width: 100%; max-width: 100%; }
  .modal { max-width: 100%; padding: 18px 14px 16px; }
}