/* ═══════════════════════════════════════════════════════════
   MOBILE.CSS — adaptação para celular e modo mobile forçado.
   Ativada por:
     - @media (max-width: 720px)  -> automático em telas pequenas
     - body.mobile-mode            -> forçado pelo botão no header
   Mantém os CSS existentes intactos; só sobrepõe regras.
   ═══════════════════════════════════════════════════════════ */

/* Botão de alternar modo (sempre visível) */
.viewmode-toggle {
  position: fixed; top: 12px; right: 16px; z-index: 1100;
  display: flex; align-items: center; gap: 4px;
  background: var(--s2); border: 1px solid var(--bd); border-radius: 8px;
  padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.viewmode-btn {
  background: none; border: none; color: var(--mu); cursor: pointer;
  padding: 6px 10px; border-radius: 6px; display: flex; align-items: center;
  transition: background .15s, color .15s;
}
.viewmode-btn:hover { color: var(--tx); }
.viewmode-btn.active { background: var(--or); color: #fff; }

/* Botão hambúrguer (só aparece em modo mobile) */
.mobile-menu-btn {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 1050;
  background: var(--s2); border: 1px solid var(--bd); border-radius: 8px;
  width: 38px; height: 38px; align-items: center; justify-content: center;
  color: var(--tx); cursor: pointer;
}

/* ═════════════════════════════════════════════════════════
   ATIVAÇÃO: tela pequena OU classe mobile-mode no body
   ═════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  body { font-size: 14px; }
  .mobile-menu-btn { display: flex; }

  /* Sidebar vira drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    transform: translateX(-100%); transition: transform .25s ease;
    z-index: 1080; width: 240px; box-shadow: 4px 0 16px rgba(0,0,0,.4);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open::after {
    content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 1070;
  }

  /* Conteúdo principal ocupa tela toda */
  .app-main { margin-left: 0 !important; }
  .body { padding: 56px 12px 16px !important; max-width: 100% !important; }
  #page-products.body { padding-top: 56px !important; }

  /* Header / topbar do app */
  .topbar { padding: 8px 110px 8px 56px; flex-wrap: wrap; }

  /* Botão alternar modo: mais compacto */
  .viewmode-toggle { top: 8px; right: 10px; padding: 2px; }
  .viewmode-btn { padding: 5px 7px; }

  /* Tabela de estoque -> CARDS */
  .table-scroll { overflow: visible; }
  .data-table { display: none; }
  .mobile-cards { display: flex; flex-direction: column; gap: 10px; }

  /* Toolbar empilha em 2 linhas */
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .toolbar-search { flex: 1 1 100%; max-width: 100%; order: -1; }
  .toolbar-count, .toolbar-selected { font-size: 11px; }

  /* Gavetas e modais full-width */
  .drawer-panel { width: 100% !important; }
  .modal-box { max-width: 95vw !important; max-height: 90vh; }

  /* Wizard em modo mobile */
  .wizard-aside { display: none; }
  .wizard-container { flex-direction: column; }
  .wizard-topbar { padding: 14px 16px; }
  .wizard-body { padding: 16px; }
  .wizard-footer { padding: 14px 16px; }
  .wz-grid-2, .wz-grid-3 { grid-template-columns: 1fr; gap: 12px; }
  .wz-span-2 { grid-column: span 1; }

  /* Tour popup sempre centralizado */
  .tour-popup {
    position: fixed !important;
    left: 50% !important; top: auto !important; bottom: 16px !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 24px); max-width: 380px;
  }

  /* Painel de erros ML mais compacto */
  .ml-error-panel { left: 8px; right: 8px; max-width: calc(100% - 16px); }

  /* Tutorial cards */
  .tut-hero, .tut-card { flex-direction: column; align-items: flex-start; }
  .tut-illustration { width: 100%; }

  /* Página de erros */
  .err-card-body { padding-left: 0; }
  .err-toolbar { flex-direction: column; align-items: stretch; }
  .err-tabs { width: 100%; overflow-x: auto; }

  /* Auth screen e g2auth screen */
  .auth-card, .g2auth-card { max-width: 100%; padding: 22px 18px; }

  /* Painel flutuante do menu de linha mais largo */
  .row-menu-float { min-width: 200px; }

  /* Inputs maiores pra toque */
  input, select, textarea { font-size: 16px !important; /* evita zoom no iOS */ }
}

/* ═════════════════════════════════════════════════════════
   MODO MOBILE FORÇADO (mesmo em telas grandes)
   ═════════════════════════════════════════════════════════ */
body.mobile-mode .mobile-menu-btn { display: flex; }
body.mobile-mode .sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  transform: translateX(-100%); transition: transform .25s ease;
  z-index: 1080; width: 240px; box-shadow: 4px 0 16px rgba(0,0,0,.4);
}
body.mobile-mode.sidebar-open .sidebar { transform: translateX(0); }
body.mobile-mode.sidebar-open::after {
  content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1070;
}
body.mobile-mode .app-main { margin-left: 0 !important; }
body.mobile-mode .body { padding: 56px 12px 16px !important; max-width: 100% !important; }
body.mobile-mode .table-scroll { overflow: visible; }
body.mobile-mode .data-table { display: none; }
body.mobile-mode .mobile-cards { display: flex; flex-direction: column; gap: 10px; }
body.mobile-mode .toolbar { flex-wrap: wrap; gap: 8px; }
body.mobile-mode .toolbar-search { flex: 1 1 100%; max-width: 100%; order: -1; }
body.mobile-mode .drawer-panel { width: 100% !important; }
body.mobile-mode .modal-box { max-width: 95vw !important; max-height: 90vh; }
body.mobile-mode .wizard-aside { display: none; }
body.mobile-mode .wizard-container { flex-direction: column; }
body.mobile-mode .wz-grid-2, body.mobile-mode .wz-grid-3 { grid-template-columns: 1fr; gap: 12px; }
body.mobile-mode .wz-span-2 { grid-column: span 1; }
body.mobile-mode .tour-popup {
  position: fixed !important;
  left: 50% !important; top: auto !important; bottom: 16px !important;
  transform: translateX(-50%) !important;
  width: calc(100vw - 24px); max-width: 380px;
}

/* ═════════════════════════════════════════════════════════
   CARDS DE PRODUTO PARA MOBILE
   ═════════════════════════════════════════════════════════ */
.mobile-cards { display: none; } /* escondido por padrão; ativado nas media queries acima */

.mob-card {
  background: var(--s2); border: 1px solid var(--bd); border-radius: 10px;
  padding: 12px; display: flex; gap: 12px; align-items: flex-start;
}
.mob-card-check {
  margin-top: 4px; flex-shrink: 0;
}
.mob-card-thumb {
  width: 60px; height: 60px; border-radius: 8px; object-fit: cover;
  background: var(--s3); flex-shrink: 0; border: 1px solid var(--bd);
}
.mob-card-thumb-empty {
  width: 60px; height: 60px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--s3); color: var(--mu); font-size: 10px;
}
.mob-card-info { flex: 1; min-width: 0; }
.mob-card-nome {
  font-size: 13px; font-weight: 600; color: var(--tx);
  margin-bottom: 4px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mob-card-meta {
  display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--mu);
  margin-bottom: 6px;
}
.mob-card-meta b { color: var(--tx); font-weight: 600; }
.mob-card-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 4px;
}
.mob-card-price { font-size: 14px; font-weight: 700; color: var(--green); }
.mob-card-qty {
  display: flex; align-items: center; gap: 4px;
  background: var(--s3); border-radius: 6px; padding: 2px;
}
.mob-card-qty .qty-btn { padding: 4px 8px; }
.mob-card-qty span { min-width: 24px; text-align: center; font-weight: 600; font-size: 13px; }
.mob-card-actions {
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.mob-card-actions .row-menu-btn { padding: 6px 10px; }