/* ============================================================
   BM Vagas — Fundação responsiva premium (Fase 0 · 09/07/2026)
   Breakpoints oficiais do projeto: 1280 / 1024 / 768 / 480.
   Carregado por ÚLTIMO em todos os layouts (site, painel e
   standalone) — só guardas de base; ajustes finos ficam nos
   CSS de cada área.
   ============================================================ */

/* ---------- Guardas globais anti-estouro ---------- */
html { -webkit-text-size-adjust: 100%; }

/* Nada de scroll horizontal de página: overflow vaza pra dentro
   dos containers com scroll próprio (clip não quebra sticky). */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

img, video { max-width: 100%; height: auto; }
canvas, iframe { max-width: 100%; }

/* Texto longo (e-mails, URLs, títulos de vaga) nunca estoura o card */
h1, h2, h3, td, th, .bmvm-text { overflow-wrap: break-word; }

/* ---------- Tablet e celular (≤768px) ---------- */
@media (max-width: 768px) {

  /* iOS dá zoom automático em campo com fonte <16px — trava em 16 */
  input, select, textarea { font-size: 16px !important; }

  /* Alvo de toque confortável nos botões de ação (inclui .bmv-btn, que
     como <a> não pegava o piso — Reiko 14/07) */
  button, .btn, .bmv-btn { min-height: 42px; }

  /* Grupos de ação empilham sem vazar */
  .page-head { align-items: flex-start; }
}

/* ---------- Tabelas do painel (todas as larguras) ----------
   O footer do painel embrulha cada <table> num .rp-scroll via JS:
   a tabela mantém o layout e rola por dentro — a página nunca rola
   de lado. Sombras nas bordas indicam que há mais conteúdo. */
.rp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}
.rp-scroll::-webkit-scrollbar { height: 8px; }
.rp-scroll::-webkit-scrollbar-track { background: transparent; }
.rp-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  border-radius: 999px;
}
.rp-scroll > table { margin-bottom: 0; }

/* ---------- Grids inline do painel (filtros/formulários) ----------
   As barras de filtro usam style="grid-template-columns: ..." inline —
   media query comum não alcança inline; o !important é proposital.
   Auditado: nenhum grid inline usa coluna em px (só frações), então o
   colapso é seguro. */
/* auto-fit: as colunas se ajustam ao espaço REAL e o excedente quebra
   linha — resolve também o notebook (1024 com sidebar), onde a viewport
   passa do breakpoint mas a área útil não comporta 5-7 filtros. */
@media (max-width: 1280px) {
  .painel-body div[style*="grid-template-columns"]:not(.bi-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .painel-body div[style*="grid-template-columns"]:not(.bi-grid) {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Correções do QA 2 (painéis) ---------- */
@media (max-width: 768px) {
  /* Currículo: colunas 1fr não encolhem abaixo do conteúdo intrínseco
     (selects com texto longo) — minmax(0,·) + min-width:0 liberam. */
  .cv-grid > *, .cv-card, .cv-fields > *, .cv-fields-grid > *, .ps { min-width: 0; }
  .cv-fields, .cv-fields-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }

  /* Dropdown do premium-select no mobile: pode crescer pra caber o texto da
     opção (ex.: "Americana/SP" num campo estreito de cidade), mas nunca passa
     da largura útil da tela. O reposicionamento horizontal (empurrar pra
     esquerda quando encostaria na borda) é feito no premium-select.js. */
  .ps-pop {
    max-width: calc(100vw - 16px) !important;
  }
}

@media (max-width: 480px) {
  /* Linhas "título + selo" (ex: Vagas recentes do admin): o selo quebra
     pra baixo em vez de ser cortado na borda. */
  .panel a[style*="display:flex"] { flex-wrap: wrap; }
}

/* Indicações: e-mail/telefone longos são tokens inquebráveis — sem isso
   estouram o card no 390 (auditoria agente 1). */
.ind-item > div { min-width: 0; }
.ind-item small { overflow-wrap: anywhere; }

/* Currículo: a data/período da experiência vazava ~52px no 1024 — flex
   child sem min-width:0 não encolhe abaixo do conteúdo (auditoria agente 3). */
.cv-exp-body { min-width: 0; overflow-wrap: anywhere; }

/* Dashboards (vagas recentes/atribuídas): título/empresa longos sem quebra
   empurravam o painel ~8px além da borda no 390 (auditoria agente 2). */
.vaga-title, .vaga-empresa { min-width: 0; overflow-wrap: anywhere; }

/* Currículo: histórico de arquivos — li flex nowrap empurrava a data pra
   fora da coluna lateral no 1024 (QA4: ul.cv-history > li > small). */
.cv-history li { flex-wrap: wrap; }
.cv-history li > * { min-width: 0; overflow-wrap: anywhere; }
.cv-history li small { flex-shrink: 0; }

/* ---------- Alvos de toque (achados do QA · ≤768px) ---------- */
@media (max-width: 768px) {
  /* "×" de limpar seleção do premium-select: 18px → 28px de alvo */
  .ps-clear { width: 28px; height: 28px; }
  .ps-clear svg { width: 12px; height: 12px; }

  /* Links de contato/redes do topo escuro ganham área de toque */
  .bmv-topbar-contact a, .bmv-topbar-social a { padding: 8px 6px; }

  /* Pílulas/abas e ícones de ação que, por serem <a>/compactos, ficavam
     abaixo do alvo de toque no celular (auditoria responsiva 14/07):
     filtros de candidaturas, abas .ftab e ícones de ação do painel. */
  .cand-filtros a, .ftab { min-height: 40px; display: inline-flex; align-items: center; }
  .btn-icon-action { width: 40px; height: 40px; }
}

/* ---------- Celular (≤480px) ---------- */
@media (max-width: 480px) {

  /* Modais bmvModal ocupam a tela com folga e rolam por dentro */
  .bmvm-card {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    max-height: 86vh;
    overflow-y: auto;
  }
  .bmvm-actions { flex-wrap: wrap; }
  .bmvm-actions .bmvm-btn { flex: 1 1 auto; }

  /* Toast não cobre a tela inteira */
  .bmv-toast { max-width: calc(100vw - 32px); }

  /* Respiro lateral padrão em telas estreitas */
  .painel-body { padding-left: 12px; padding-right: 12px; }
}