/* ══════════════════════════════════════════════════════════
     📱 MOBILE — RESPONSIVIDADE COMPLETA
     Cobre: Vagas, Kanban, Candidatos, Clientes, Sidebar, Leads
     (bloco reativado em 2026-09-23 — antes existia apenas dentro
     do template de impressão do Dossiê e nunca era aplicado ao
     app de verdade; seletores conferidos contra o markup atual)
     ══════════════════════════════════════════════════════════ */

  @media (max-width: 768px) {

    /* ── Layout geral ── */
    .sidebar {
      position: fixed;
      left: -260px;
      top: 0;
      height: 100%;
      z-index: 200;
      transition: left 0.25s ease;
      width: 240px !important;
    }
    .sidebar.mobile-open { left: 0; }
    .main-content { margin-left: 0 !important; padding: 0.75rem !important; }
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.6rem;
    }
    .page-header > div:last-child {
      width: 100%;
      justify-content: flex-start;
    }

    /* ── Topbar mobile hamburguer ── */
    .topbar { padding: 0.5rem 0.75rem; }
    .topbar-left { gap: 0.5rem; }

    /* ── Candidatos: tabela responsiva ──
       Colunas atuais: 1 checkbox, 2 Nome, 3 Cargo/Vaga, 4 Cliente,
       5 Status, 6 Telefone, 7 Cadastro, 8 Ações. (Índices corrigidos
       para bater com essa ordem — e o seletor do cabeçalho mira
       especificamente #tbl-candidatos, não .table-wrap table em geral,
       que também é usado por outras tabelas do CRM com colunas diferentes.) */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #tbody-cands tr td:nth-child(3),   /* Cargo / Vaga */
    #tbody-cands tr td:nth-child(7),   /* Cadastro */
    #tbl-candidatos thead th:nth-child(3),
    #tbl-candidatos thead th:nth-child(7) { display: none; }

    #tbody-cands tr td:nth-child(4) { max-width: 100px; }

    /* ── Vagas: esconder pipeline inline, mostrar só resumo ── */
    .vaga-card { padding: 1rem; }
    .vaga-card > div > div[style*="display:flex;gap:8px;overflow-x"] {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      gap: 6px;
      padding-bottom: 6px;
    }
    .pipe-col { min-width: 90px; padding: 8px; }
    .pipe-col-hd { font-size: 9px; }
    .pipe-cand-card { font-size: 11px; padding: 5px 8px; }

    /* Cabeçalho do card de vaga: título + botões de ação ficavam lado a
       lado (o título com flex:1 e os botões com flex-shrink:0), então em
       telas estreitas os botões "roubavam" quase toda a largura e o
       título ficava espremido em poucos px, quebrando palavra por palavra.
       Empilha em coluna no mobile: título ocupa a linha toda, botões vêm
       embaixo e podem quebrar em mais de uma linha. */
    .vaga-card [style*="justify-content:space-between;gap:1rem"] {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 0.6rem !important;
    }
    .vaga-card [style*="display:flex;gap:6px"] {
      flex-wrap: wrap !important;
      flex-shrink: 1 !important;
      gap: 4px !important;
    }
    .vaga-card .btn { font-size: 11px; padding: 4px 8px; }

    /* Metadados da vaga (empresa, salário, prazo) */
    .vaga-card [style*="display:flex;gap:14px"] {
      flex-direction: column;
      gap: 4px !important;
    }

    /* ── Kanban ── */
    .kanban-board {
      gap: 0.6rem;
      padding-bottom: 0.75rem;
      /* scroll horizontal suave no mobile */
      scroll-snap-type: x mandatory;
    }
    .kanban-col {
      min-width: 200px;
      max-width: 200px;
      scroll-snap-align: start;
    }
    .kanban-card { padding: 9px 10px; }
    .kc-nome { font-size: 12px; }
    .kc-cargo, .kc-sla-badge { font-size: 10px; }

    /* ── Clientes: grid de cards já é responsivo (auto-fill) — sem overrides extras ── */

    /* ── Leads / Prospecção ── */
    .prosp-pipe { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0.5rem; }
    .prosp-stage { min-width: 110px; padding: 0.6rem 0.7rem; }

    /* ── Lead cards Kanban ── */
    .lk-col { min-width: 200px; }

    /* ── Modais ── */
    .modal {
      max-width: 100% !important;
      max-height: 96vh !important;
      border-radius: 16px 16px 0 0 !important;
      margin-top: auto !important;
    }
    .modal-body { padding: 1rem !important; }
    .modal-footer { padding: 0.75rem 1rem !important; }
    .modal-tabs { overflow-x: auto; }

    /* ── Dashboard: stat cards ── */
    .dash-grid { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; }
    .stat-card { padding: 0.85rem 1rem; }

    /* ── Filtros e toolbar ── */
    .toolbar { flex-wrap: wrap; gap: 0.4rem; }
    .toolbar .search-input { width: 100%; }
    .toolbar select { flex: 1; min-width: 100px; font-size: 12px; }

    /* ── Garantias ── */
    .garantia-card { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
    .g-info { max-width: 100%; flex: unset; }
    .g-bar  { min-width: 100%; max-width: 100%; flex: unset; }

    /* ── Financeiro ── */
    .fin-grid { grid-template-columns: 1fr 1fr !important; }

    /* ── Tarefas já tem @media — reforça ── */
    .task-cols { grid-template-columns: 1fr !important; }

    /* ── Tabelas gerais: scroll horizontal ── */
    table { min-width: 480px; }
  }

  /* ── Extra small (< 480px) ── */
  @media (max-width: 480px) {
    .dash-grid { grid-template-columns: 1fr !important; }
    .fin-grid  { grid-template-columns: 1fr !important; }
    .kanban-col { min-width: 175px; max-width: 175px; }
    .vaga-card { padding: 0.8rem; }
    .page-title { font-size: 18px; }
    .modal .modal { border-radius: 0 !important; max-height: 100vh !important; }
    /* Botões de bulk action: empilha */
    #bulk-bar { flex-wrap: wrap; gap: 4px; padding: 0.5rem; }
    #bulk-bar .btn { font-size: 11px; padding: 4px 8px; }
  }