/* ============================================================
   MEI Controll — camada MOBILE (app no celular: Android + iOS)
   Carregado DEPOIS do app.css. Só afeta telas <= 860px.
   ============================================================ */
.mobile-topbar { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 860px) {
  /* ---- Barra superior fixa com hambúrguer ---- */
  .mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; height: 54px; padding: 0 12px;
    background: var(--sidebar-bg, #0f1419); border-bottom: 1px solid var(--sidebar-border, #1e293b);
    z-index: 900;
  }
  .mobile-hamburger {
    background: transparent; border: 0; cursor: pointer;
    width: 42px; height: 42px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .mobile-hamburger:active { background: var(--sidebar-hover, #1a2332); }
  .mobile-hamburger span, .mobile-hamburger span::before, .mobile-hamburger span::after {
    content: ""; display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; position: relative;
  }
  .mobile-hamburger span::before { position: absolute; top: -7px; }
  .mobile-hamburger span::after  { position: absolute; top: 7px; }
  .mobile-topbar-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; font-size: 17px; }
  .mobile-topbar-brand .m {
    width: 28px; height: 28px; border-radius: 7px; color: #fff; font-weight: 900; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
  }

  /* ---- Sidebar vira gaveta (off-canvas) ---- */
  .layout-dash { display: block; }
  .sidebar {
    width: 82vw; max-width: 300px;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.55); overflow-y: auto; z-index: 1000;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 950; }
  body.nav-open .nav-backdrop { display: block; }
  body.nav-open { overflow: hidden; }

  /* ---- Conteúdo ocupa tudo, abaixo da topbar ---- */
  .main-dash { margin-left: 0 !important; width: 100% !important; }
  .dash-pad { padding: 1rem !important; padding-top: calc(54px + 1rem) !important; }

  /* ---- Grids em 1 coluna ---- */
  .dash-metric-grid, .dash-fin-metric-grid, .admin-stats-grid, .grid-cards,
  .dash-perf-grid, .dash-usu-perm-grid, .dash-assin-planos-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- Cabeçalhos/filtros quebram sem estourar ---- */
  .dash-fin-page-header, .dash-vendas-filtros-inner { flex-wrap: wrap; gap: .6rem; }
  .dash-vendas-search-wrap, .dash-vendas-filtro-data, .dash-vendas-select { width: 100%; }
  h1, .dash-h1 { font-size: 1.35rem !important; line-height: 1.25; }
  .dash-subline { font-size: .9rem; }

  /* ---- Tabelas rolam dentro do card (não estouram) ---- */
  .table-wrap, .dash-fin-table-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.dash-fin-table, table.dash-vendas-table { min-width: 600px; }

  /* ---- Inputs: fonte >=16px evita zoom automático do iOS ---- */
  input, select, textarea { font-size: 16px !important; }

  /* ---- PDV (função principal) em tela cheia ---- */
  .pdv-dialog {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important; max-height: 100dvh !important;
    margin: 0 !important; border-radius: 0 !important;
  }
  .pdv-shell {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important;
  }
  .pdv-grid { grid-template-columns: 1fr !important; }
  .pdv-aside { display: none !important; }
  .pdv-head { flex-wrap: wrap; gap: .5rem; }
  .pdv-bottom-grid { grid-template-columns: 1fr !important; }
  .pdv-add-row { flex-wrap: wrap; }
  .pdv-final-btn { width: 100%; }

  /* ---- Diálogos (venda rápida etc.) ---- */
  dialog.dash-fin-dialog { width: 94vw !important; max-width: 94vw !important; }
}