/* mobile.css — Antero Dashboard
   Regras de fallback e ajustes finos.
   O layout app-like é injetado por mobile-app-patch.js
*/

/* Esconde o toggle legado (sempre — sidebar cobre no desktop) */
#mobile-menu-toggle, #mobile-menu-backdrop { display: none; }

/* ── Regras SOMENTE mobile (≤768px) ── */
@media (max-width: 768px) {
  body { font-size: 14px; }

  /* ── Tabelas viram scroll horizontal ── */
  .data-table, table:not(.tp-table) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Kanban: scroll horizontal nativo ── */
  .kanban-board, .kb-board {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Calendário ── */
  .cal-grid { font-size: .7rem; }
  .cal-cell { min-height: 60px !important; padding: 4px !important; }
  .cal-event { font-size: .65rem !important; padding: 2px 4px !important; }

  /* ── CRM ── */
  .crm-pipeline { flex-direction: column !important; }
  .crm-stage { width: 100% !important; min-width: 0 !important; }
  .crm-deal-panel { width: 95vw !important; max-width: 95vw !important; }

  /* ── Modais ── */
  .modal, .modal-content, [class*="modal-box"] {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto;
    padding: 18px !important;
  }
  .modal input, .modal textarea, .modal select { font-size: 16px !important; }

  /* ── Forms ── */
  input, textarea, select { font-size: 16px !important; }

  /* ── Botões ── */
  button { min-height: 40px; }
  .btn-group { flex-wrap: wrap; gap: 6px; }

  /* ── Auth ── */
  .auth-login-box {
    padding: 32px 22px 28px !important;
    width: 92vw !important;
  }

  /* ── Toast acima do bottom nav ── */
  .toast, .notification {
    left: 12px !important;
    right: 12px !important;
    bottom: 76px !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 480px) {
  .header h1 { font-size: .95rem !important; }
}