/* ─── iPad landscape e telas médias (até 1024px) ─── */
@media (max-width: 1024px) {
  /* Drawer: reduz coluna esquerda para caber melhor */
  .drawer { max-width: 96vw; }
  .drawer-body { grid-template-columns: 260px 1fr; }
}

/* ─── Telas médias: sidebar colapsa para ícones (641-1100px) ─── */
/* M05: estendido para incluir iPad portrait (641-768px) */
@media (max-width: 1100px) and (min-width: 641px) {
  .sidebar { width: 64px; }
  .sidebar .sidebar-label { display: none; }
  .sidebar .sidebar-collapse-btn { transform: rotate(180deg); }
  .sidebar .sidebar-item { justify-content: center; padding: 10px 0; gap: 0; }
  .sidebar .sidebar-icon { width: auto; }
  .main-content { margin-left: 64px; }
  .sidebar.collapsed ~ .main-content,
  .main-content.expanded { margin-left: 64px; }
}

/* ─── iPhone e telas ≤ 640px ─── */
@media (max-width: 640px) {
  .sidebar        { display: none; }
  .main-content,
  .main-content.expanded,
  .sidebar.collapsed ~ .main-content { margin-left: 0; padding-bottom: 68px; }
  .bottom-nav     { display: flex; }
}

/* ─── iPad portrait e telas ≤ 768px (layout geral + componentes) ─── */
@media (max-width: 768px) {
  /* ── Layout geral ── */
  html, body     { overflow-x: hidden; max-width: 100vw; }
  input, textarea, select { font-size: 16px !important; }
  select { height: 44px; padding-top: 0; padding-bottom: 0; }

  /* ── Dashboard ── */
  .dashboard    { padding: 12px; gap: 12px; max-width: 100%; width: 100%; }
  .dash-section { padding: 14px; }
  .dash-titulo  { font-size: 1.2rem; }
  .dash-stats   { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat-card    { padding: 12px 8px; }
  .stat-num     { font-size: 1.4rem; }
  .stat-label   { font-size: .65rem; }
  .dash-quick   { gap: 8px; }
  .dash-quick-btn  { flex: 1; min-width: 80px; padding: 12px 8px; font-size: .75rem; }
  .dash-quick-icon { font-size: 1.3rem; }

  /* ── Kanban ── */
  .kanban-topbar { padding: 8px 10px; gap: 6px; }
  /* Row 1: filtros ocupa toda a largura, acoes ficam em linha própria */
  .kanban-topbar-row1 { flex-wrap: wrap; gap: 6px; }
  .filtros       { flex: 1 1 100%; display: flex; gap: 6px; min-width: 0; }
  .filtros select { flex: 0 0 auto; max-width: 140px; font-size: 16px; }
  .filtros input { flex: 1; min-width: 0; font-size: 16px; }
  .kanban-topbar-acoes { flex: 0 0 auto; gap: 4px; }
  .kanban-topbar-acoes span { display: none; }
  .kanban-topbar-acoes .btn-primary,
  .kanban-topbar-acoes .btn-secondary { padding: 7px 10px; font-size: .85rem; min-height: 38px; }
  .filtro-chips { padding-bottom: 4px; }
  .filtro-chip  { padding: 6px 10px; font-size: .73rem; min-height: 34px; white-space: nowrap; }
  .kanban  { padding: 8px; gap: 10px; align-items: flex-start; }
  /* Colunas: altura máxima = tela - topbar mobile (56px) - kanban topbar (~90px) - bottom nav (60px) - padding (16px) */
  .coluna  { flex: 0 0 260px; height: calc(100vh - 222px); max-height: none; }
  .coluna-cards { flex: 1; overflow-y: auto; }

  /* ── Drawer — ocupa tela inteira ── */
  .drawer-overlay { z-index: 300; padding: 0; align-items: flex-end; }

  /* ── Painel de detalhe de tarefa: acima do drawer no mobile ── */
  .tf-detalhe-overlay { z-index: 310; }
  .tf-detalhe         { z-index: 311; }
  .drawer {
    width: 100%; max-width: 100%; max-height: 96vh;
    border-radius: 16px 16px 0 0; overflow: hidden;
  }
  .drawer-drag-handle { display: block; }

  /* Grid drawer → coluna única com scroll */
  .drawer-body {
    display: flex; flex-direction: column;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0 0 80px; gap: 0;
  }

  /* Coluna esquerda: sem scroll interno, mostra tudo */
  .drawer-col-left {
    border-right: none; border-bottom: 1px solid var(--border);
    overflow-y: visible; padding: 16px;
  }

  /* Coluna direita: sem overflow hidden, expande naturalmente */
  .drawer-col-right {
    overflow: visible; flex: none;
  }

  /* Toolbar de ação compacta */
  .drawer-acao-tabs { border-bottom: 1px solid var(--border); }
  .drawer-acao-tab  { padding: 12px 6px; font-size: .78rem; min-height: 44px; }

  /* Paineis de e-mail e agenda: sem overflow hidden */
  .drawer-right-panel { padding: 14px 16px; }

  /* Histórico: sem altura máxima fixa */
  .drawer-right-historico {
    overflow-y: visible; min-height: 0; padding: 14px 16px;
    max-height: none;
  }

  /* Status row */
  .drawer-status-row { flex-direction: column; gap: 12px; }

  /* Header do drawer: compacto */
  .drawer-header { padding: 14px 16px; }
  .drawer-empresa { font-size: .95rem; }

  /* ── E-mail compose ── */
  /* Linha instrução + Gerar: empilha */
  .email-ia-row { flex-direction: column; gap: 6px; }
  .email-instrucao-input { min-height: 44px; }
  .btn-email-gerar { width: 100%; justify-content: center; min-height: 44px; }

  /* Campo Para: input sem min-width fixo */
  .email-para-chips { min-height: 36px; }
  .email-para-input { min-width: 120px; font-size: .85rem; }
  .email-compose-field { padding: 8px 12px; gap: 8px; }
  .email-compose-label { width: 44px; font-size: .7rem; }

  /* Toolbar de formatação: botões maiores para toque */
  .email-toolbar { padding: 6px 8px; gap: 4px; flex-wrap: wrap; }
  .etb-btn { min-width: 40px; min-height: 40px; padding: 6px 10px; font-size: .9rem; }

  /* Editor rico: altura menor para caber na tela */
  .email-corpo-editor { min-height: 140px; max-height: 260px; }

  /* Botão enviar: largura total */
  .email-acoes { margin-top: 12px; }
  .btn-enviar  { width: 100%; justify-content: center; min-height: 44px; font-size: .9rem; }

  /* ── Agenda ── */
  .agenda-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .agenda-row .form-group:last-child { grid-column: span 2; }
  .agenda-acoes { flex-direction: column; }
  .agenda-acoes .btn-primary { width: 100%; justify-content: center; min-height: 44px; }

  /* ── Touch targets gerais ── */
  .btn-primary, .btn-secondary, .btn-danger { min-height: 44px; font-size: .875rem; }
  .btn-sm     { min-height: 38px; }
  .card-btn   { min-height: 32px; padding: 4px 10px; }
  .btn-contato-edit, .btn-contato-del { min-height: 34px; min-width: 34px; }

  /* ── Modais — sheet from bottom ── */
  .modal {
    width: 100%; max-width: 100%; max-height: 95vh;
    border-radius: 16px 16px 0 0;
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 20px 16px;
  }
  .modal-overlay { align-items: flex-end; padding: 0; }

  /* ── Cards ── */
  .card-actions { opacity: 1; }

  /* ── Dashboard section ── */
  .dash-section { padding: 16px; }
}

/* ─── iPhone pequeno (≤ 390px) ─── */
@media (max-width: 390px) {
  .drawer-main-acoes { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .drawer-acao-tab   { padding: 10px 4px; font-size: .7rem; }
  .drawer-negocio-badge { font-size: .62rem; padding: 3px 8px; }
  .drawer-empresa { font-size: .88rem; }
  .etb-btn { min-width: 36px; min-height: 38px; }
  .agenda-row { grid-template-columns: 1fr; }
  .agenda-row .form-group:last-child { grid-column: span 1; }
  .email-para-input { min-width: 80px; }
}