/* Vendalo CRM — camada MOBILE (29/09/2026)
   Tudo que é celular (≤768px) fica aqui. O style.css continua sendo o desktop.
   Regras: menu lateral vira off-canvas (☰), barra inferior com 4 atalhos + Menu,
   funil = uma coluna por tela (swipe) + faixa de etapas + botão "Mover etapa",
   inbox = lista OU conversa (botão ‹ voltar), drawer em tela cheia, modal em bottom-sheet. */

.m-only { display: none !important; }
.m-nav { display: none; }
.k-stages { display: none; }
.kmove-row { display: none; }
.sb-overlay { display: none; }

@media (max-width: 768px) {
  .m-only:not(.hidden) { display: inline-flex !important; }
  .d-only { display: none !important; }

  /* ---------- shell ---------- */
  .app { height: 100dvh; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 84vw); z-index: 70; transform: translateX(-105%); transition: transform .22s ease; overflow-y: auto; border-right: none; }
  body.sb-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .sb-overlay { position: fixed; inset: 0; background: rgba(14,21,37,.45); z-index: 65; backdrop-filter: blur(2px); }
  body.sb-open .sb-overlay { display: block; }
  .logo { padding: 18px 20px 14px; }
  .sidebar nav a { padding: 12px; font-size: 15px; min-height: 44px; }
  .sidebar nav a svg { width: 19px; height: 19px; }
  .sidebar-footer { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }

  .topbar { padding: 8px 10px; gap: 8px; }
  .m-burger { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font-size: 20px; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); padding: 0; }
  .company-tabs { flex: 1; min-width: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .company-tabs::-webkit-scrollbar { display: none; }
  .company-tab { white-space: nowrap; padding: 7px 12px; font-size: 12.5px; flex-shrink: 0; }
  .topbar-right { flex-shrink: 0; display: flex; gap: 6px; align-items: center; }
  #btn-new-deal { padding: 0; width: 40px; height: 40px; border-radius: 10px; font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
  #btn-new-deal .nd-lbl { display: none; }
  #online-toggle-m { font-size: 11px; padding: 0 10px; height: 40px; border-radius: 20px; border: 1.5px solid; font-weight: 700; line-height: 1.2; align-items: center; background: var(--card); }
  #online-toggle-m.on { background: #0fa96820; color: #0fa968; border-color: #0fa968; }
  #online-toggle-m.off { background: #ff4d4f15; color: #ff4d4f; border-color: #ff4d4f40; }
  #online-toggle-m.on::before { content: '● '; }
  #online-toggle-m.off::before { content: '○ '; }

  main#view { padding: 14px 14px calc(80px + env(safe-area-inset-bottom)); overflow-x: hidden; }

  /* barra inferior */
  .m-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--card); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .m-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--muted); padding: 4px 0; position: relative; min-height: 46px; justify-content: center; }
  .m-nav a svg { width: 22px; height: 22px; fill: currentColor; }
  .m-nav a.active { color: var(--accent); }
  .m-nav .nav-badge { position: absolute; top: 0; left: calc(50% + 4px); margin: 0; }

  /* ---------- tipografia / toque ---------- */
  input, select, textarea { font-size: 16px; }   /* 16px evita o zoom automático do iOS */
  .btn-primary, .btn-ghost, .btn-danger, .btn-success, .ib-tab, .company-tab { min-height: 40px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
  .page-title { font-size: 19px; }
  .page-sub { font-size: 12.5px; margin-bottom: 14px; }
  .filters { gap: 8px; margin-bottom: 12px; }
  .filters select, .filters input, .filters .btn-ghost, .filters .btn-primary { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .search-input, #f-q, #ib-q { min-width: 0 !important; flex-basis: 100%; width: 100%; }
  .card { padding: 16px; overflow-x: auto; }
  .card h3 { margin-bottom: 12px; }
  .tbl th, .tbl td { padding: 9px 8px; font-size: 13px; white-space: nowrap; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); text-align: center; border-radius: 16px; }
  .login-screen { padding: 16px; }
  .login-card { width: 100%; max-width: 400px; padding: 32px 22px; }

  /* ---------- dashboard / direcionamento / IA ---------- */
  .grid-2, .grid-2b { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi { padding: 14px; }
  .kpi .value { font-size: 22px; }
  .chart-wrap { height: 220px; }
  .heatmap { min-width: 560px; }
  .fbar-label { width: 90px; font-size: 11px; }
  .dir-kpis { gap: 8px; }
  .dir-kpi { flex: 1 1 42%; min-width: 0; padding: 12px 14px; }
  .dir-papo { padding: 16px; font-size: 14px; }
  .dir-acao { flex-wrap: wrap; padding: 12px; }
  .dir-btns { flex-direction: row; flex-wrap: wrap; width: 100%; }
  #co-body { padding: 16px !important; font-size: 14px !important; }
  #co-quem { max-width: 130px !important; }
  .ai-hero { padding: 22px 18px; }
  .ai-hero input { min-width: 0; width: 100%; }
  .sdrf-step { min-width: 0; flex: 1 1 28%; padding: 8px 10px; }
  .sdrf-n { font-size: 18px; }
  .rp-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .rp-tab { white-space: nowrap; }
  .ag2-seg-btn { padding: 8px 10px; font-size: 12px; }
  .leads-confirm-box { padding: 24px 18px; }

  /* ---------- funil (kanban) ---------- */
  .kanban-wrap { height: auto; }
  #k-filters:not(.open) > select, #k-filters:not(.open) > #f-custom, #k-filters:not(.open) > button:not(#k-flt-toggle) { display: none !important; }
  #k-flt-toggle { flex: 0 0 auto !important; }
  #f-count { flex: 1; text-align: right; }
  .k-stages { display: flex; gap: 6px; overflow-x: auto; margin: 0 -14px 10px; padding: 0 14px 6px; scrollbar-width: none; }
  .k-stages::-webkit-scrollbar { display: none; }
  .k-stage { flex-shrink: 0; white-space: nowrap; padding: 8px 12px; border-radius: 100px; border: 1px solid var(--border); background: var(--card); font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-family: inherit; }
  .k-stage.on { background: var(--ink); color: #fff; border-color: var(--ink); }
  .k-stage .n { opacity: .7; font-weight: 600; margin-left: 5px; }
  .kanban { margin: 0 -14px; padding: 0 14px 12px; gap: 10px; scroll-snap-type: x mandatory; scroll-padding-left: 14px; overflow-y: hidden; }
  .kcol { width: calc(100vw - 28px); min-width: calc(100vw - 28px); scroll-snap-align: start; max-height: none; }
  .kcol-cards { overflow-y: visible; }
  .kcard { cursor: default; padding: 12px; }
  .kcard:hover { transform: none; box-shadow: var(--shadow); }
  .ktag-add { opacity: .8; }
  .kmove-row { display: flex; margin-top: 8px; }
  .kmove { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--ink-2); font-size: 12.5px; font-weight: 700; font-family: inherit; }
  .kmove:active { background: var(--accent-soft); color: var(--accent); }

  /* ---------- drawer (negócio / contato) em tela cheia ---------- */
  .drawer { width: 100vw; animation: none; }
  .drawer-head { padding: 14px 16px 12px !important; }
  .drawer-head .d-title { font-size: 16px; padding-right: 36px; }
  .drawer-head .btn-ghost, .drawer-head .btn-wa { font-size: 12px; padding: 7px 10px; margin-top: 6px; min-height: 36px; }
  .drawer-close { top: 10px; right: 10px; width: 36px; height: 36px; font-size: 26px; }
  .dtabs { padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
  .dtab { white-space: nowrap; padding: 11px 10px; }
  .drawer-body { padding: 14px 16px; }
  .drawer-actions { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .field-grid { grid-template-columns: 1fr; gap: 10px; }
  .note-box textarea { height: 48px; }

  /* ---------- modal vira bottom-sheet ---------- */
  .modal-overlay { align-items: flex-end; }
  .modal { width: 100%; max-width: 100vw !important; border-radius: 18px 18px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 92dvh; animation: sheetUp .18s ease; }
  @keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .modal .row { grid-template-columns: 1fr; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn-primary, .modal-actions .btn-ghost, .modal-actions .btn-success, .modal-actions .btn-danger { flex: 1 1 auto; }

  /* ---------- inbox: lista OU conversa ---------- */
  .ib-tabs { overflow-x: auto; flex-wrap: nowrap; margin: 0 -14px 10px; padding: 0 14px 4px; scrollbar-width: none; }
  .ib-tabs::-webkit-scrollbar { display: none; }
  .ib-tab { white-space: nowrap; flex-shrink: 0; }
  #ib-campsel { flex-shrink: 0; }
  .inbox-wrap { grid-template-columns: 1fr; height: auto; min-height: 0; }
  #view:not(.ib-open) .inbox-thread { display: none; }
  #view.ib-open .page-head, #view.ib-open .ib-tabs, #view.ib-open .ib-online-bar, #view.ib-open .inbox-list { display: none; }
  #view.ib-open .inbox-thread { height: calc(100dvh - 132px - env(safe-area-inset-bottom)); min-height: 320px; }
  .ib-back { width: 36px; height: 36px; padding: 0 !important; font-size: 22px; align-items: center; justify-content: center; flex-shrink: 0; }
  .ib-thread-head { padding: 8px 10px; gap: 6px; }
  .ib-thread-head > div:first-of-type { flex: 1; min-width: 0; }
  .ib-thread-head strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ib-thread-actions { flex-wrap: wrap; gap: 6px; width: 100%; }
  .ib-thread-actions .btn-ghost, .ib-thread-actions .btn-primary { padding: 6px 10px; font-size: 12px; min-height: 34px; }
  .ib-bubble { max-width: 88%; }
  .ib-msgs { padding: 10px; }
  .ib-input { padding: 8px; gap: 6px; }
  .ib-input .btn-ghost, .ib-input .btn-success { padding: 8px 10px; }
  .ib-item { padding: 12px 14px; }
}

/* tablet em pé (769–1024px): sidebar mais estreita, sem esconder */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar { width: 190px; }
  .logo { padding: 20px 18px 22px; }
  .sidebar nav { padding: 0 8px; }
  main#view { padding: 20px; }
  .topbar { padding: 12px 20px; }
  .grid-2 { grid-template-columns: 1fr; }
  .drawer { width: min(460px, 70vw); }
}

/* ---------- 02/10/2026: navegabilidade no celular (Inbox) ---------- */
.ib-tab-alert { margin-left: 4px; color: #fff; background: var(--red, #E5484D); border-radius: 10px; padding: 1px 6px; font-size: 11px; font-weight: 700; }
@media (max-width: 768px) {
  #view .page-head .page-sub { display: none; }
  #view .page-head .page-title { font-size: 20px; }
  .ib-fwrap { flex-wrap: nowrap !important; }
  .ib-fwrap > * { display: none !important; }
  .ib-fwrap > #ib-q { display: block !important; flex: 1 1 auto; width: auto; }
  .ib-fwrap > #ib-ftog { display: inline-flex !important; flex-shrink: 0; }
  .ib-fwrap.fopen { flex-wrap: wrap !important; }
  .ib-fwrap.fopen > * { display: inline-flex !important; }
  .ib-fwrap.fopen > #ib-q { display: block !important; flex-basis: 100%; }
  #view:not(.ib-fopen) .ib-online-bar { display: none; }
  .ib-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .ib-tab { padding: 6px 12px; font-size: 13px; min-height: 36px; }
  #view.ib-open { padding-top: 6px; }
  body:has(#view.ib-open) .topbar { display: none; }
  #view.ib-open .inbox-thread { height: calc(100dvh - 78px - env(safe-area-inset-bottom)); }
  .ib-thread-head { flex-wrap: wrap; align-items: center; }
  .ib-thread-head .page-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; font-size: 11.5px; }
  .ib-more { width: 36px; height: 36px; padding: 0 !important; font-size: 20px; flex-shrink: 0; }
  .ib-thread-head:not(.acts-open) .ib-thread-actions { display: none; }
  .voa-bar { cursor: pointer; }
  .voa-bar:not(.open) { max-height: 30px; overflow: hidden; flex-wrap: nowrap !important; white-space: nowrap; position: relative; padding-right: 26px !important; }
  .voa-bar:not(.open)::after { content: '\25BE'; position: absolute; right: 10px; top: 6px; color: #555; }
  .ib-input { position: sticky; bottom: 0; background: var(--card, #fff); }
  .ib-input #ib-text { font-size: 16px; min-width: 0; flex: 1; }
  body.kb-open .m-nav { display: none; }
  body.kb-open #view.ib-open .inbox-thread { height: calc(100dvh - 12px); }
}