/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CELULAR (05/11/2026 — dono: "precisamos melhorar a forma de usar a plataforma no celular... ta muito podre")
   Carrega DEPOIS de styles.css e sidebar.css. Arquivo separado de propósito: o styles.css tem várias camadas
   de "mobile" antigas brigando entre si; aqui fica a camada que vale, com os !important só onde uma regra
   antiga (também !important) precisa ser vencida. Raio-x antes/depois: e2e/mobile-raiox.dev.spec.ts.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.jp-drawer-scrim { display: none; }

/* Preferências de cookies: dentro da plataforma o botão flutuante cobria cards (celular) e o cartão do usuário
   (computador). Fica no menu da conta ("Preferências de cookies"); landing e páginas públicas seguem com o flutuante. */
.jpc-reopen { display: none !important; }

@media (max-width: 960px) {
  /* ── Barra inferior ─────────────────────────────────────────────────────────────────────── */
  .jp-mobile-nav { height: calc(60px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .jp-mtab { position: relative; min-height: 48px; -webkit-tap-highlight-color: transparent; }
  /* O indicador da sidebar (barra vertical à esquerda) vazava para a aba: vira um traço no topo. */
  .jp-mtab::before { display: none !important; }
  .jp-mtab.active::after {
    content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--accent);
  }
  .jp-mtab span { font-size: 11px; }
  /* Item oculto no menu (papel ou MENU_DESATIVADO, ex.: Fila) some da barra também: o display:flex !important
     da aba furava o .hidden e a Fila, tirada do menu em 14/10, continuava aparecendo no celular. */
  .jp-mtab.hidden { display: none !important; }
  html:has(.sidebar .nav-group.hidden [data-section="meus-projetos"]) .jp-mtab-projetos { display: none !important; }
  html.jp-drawer .jp-mtab-menu { color: var(--accent); }

  /* ── Gaveta: o menu lateral inteiro por cima da tela ─────────────────────────────────────── */
  html.jp-drawer { overflow: hidden; }
  html.jp-drawer body { overflow: hidden; }
  html.jp-drawer .jp-drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 1100;
    background: rgba(15, 23, 42, .45); animation: jpGavetaFundo .18s ease-out;
  }
  html.jp-drawer .sidebar {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: auto !important;
    width: min(86vw, 320px) !important; height: auto !important; max-height: none !important;
    z-index: 1200 !important; overflow-y: auto !important; overscroll-behavior: contain;
    padding: 14px 10px calc(14px + env(safe-area-inset-bottom, 0px)) !important; gap: 10px !important;
    background: var(--panel, #fff) !important; border-top: 0 !important; border-right: 1px solid var(--border) !important;
    box-shadow: 12px 0 40px rgba(15, 23, 42, .28) !important; animation: jpGavetaEntra .2s ease-out;
  }
  html.jp-drawer .sidebar .brand { display: flex !important; }
  html.jp-drawer .sidebar .nav {
    display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
    align-items: stretch !important; width: 100% !important; padding: 0 !important; gap: 2px !important; flex: 1 0 auto;
  }
  html.jp-drawer .sidebar .nav-section-label { display: block !important; margin: 12px 10px 4px; }
  html.jp-drawer .sidebar .nav-group { display: flex !important; flex-direction: column !important; max-width: none !important; flex: none !important; }
  html.jp-drawer .sidebar .nav-group[hidden] { display: none !important; }
  html.jp-drawer .sidebar .nav-link {
    flex-direction: row !important; justify-content: flex-start !important; align-items: center !important;
    flex: none !important; max-width: none !important; width: 100% !important;
    height: 46px !important; min-height: 46px !important; padding: 0 12px !important; font-size: 15px !important;
  }
  html.jp-drawer .sidebar .nav-link-content { flex-direction: row !important; align-items: center !important; gap: 12px !important; }
  html.jp-drawer .sidebar .nav-link-content > span { max-width: none !important; text-align: left !important; }
  html.jp-drawer .sidebar .nav-link-content > .nav-link-copy { display: flex !important; }
  html.jp-drawer .sidebar .nav-link-label { font-size: 15px !important; }
  html.jp-drawer .sidebar .nav-link-desc { display: none !important; }
  html.jp-drawer .sidebar .nav-icon { width: 18px !important; height: 18px !important; }
  html.jp-drawer .sidebar .nav-link .caret { display: inline-block !important; margin-left: auto; }
  html.jp-drawer .sidebar .nav-link.open + .nav-sub { display: flex !important; }
  html.jp-drawer .sidebar .nav-sub { gap: 0 !important; }
  html.jp-drawer .sidebar .projects-list { gap: 2px !important; }
  html.jp-drawer .sidebar .project-chip { min-height: 40px; padding-top: 0 !important; padding-bottom: 0 !important; }
  html.jp-drawer .sidebar-footer,
  html.jp-drawer .sidebar-user { display: flex !important; }
  html.jp-drawer .sidebar-footer { flex-direction: column; margin-top: auto; }
  html.jp-drawer .theme-toggle-text { display: inline !important; }

  /* ── Topo: uma linha só (o sino ia para uma segunda linha e o topo comia ~12% da tela) ────── */
  .topbar { flex-wrap: wrap !important; align-items: center !important; gap: 6px 8px !important; padding: 8px 12px !important; min-height: 52px; }
  .crumbs {
    flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; align-items: center;
    flex-wrap: nowrap !important; overflow: hidden; white-space: nowrap;
  }
  .crumbs > * { flex: none; }
  .crumbs .crumb-current { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .top-actions { width: auto !important; flex: 0 0 auto !important; }
  .top-actions:has(> .btn:not(.hidden)) { flex: 1 1 100% !important; }
}

@media (max-width: 640px) {
  /* Respiro lateral: 24 px de cada lado num celular de 390 px é 12% da largura. */
  .content, #content-area { padding: 14px 12px !important; }
  .monitor-chip-strip { padding: 6px 12px 2px !important; }
  /* "Home /" não ajuda no celular — sobra espaço para o nome da tela. */
  .crumbs .crumb-link[data-crumb="home"], .crumbs .crumb-link[data-crumb="home"] + .crumb-sep { display: none !important; }

  /* iPhone dá zoom sozinho ao tocar num campo com letra < 16 px (37 campos assim só em Changes). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea { font-size: 16px !important; }

  /* ── Projeto aberto: cabeçalho empilha em vez de cortar à direita ───────────────────────────── */
  .project-v3-header { grid-template-columns: minmax(0, 1fr) !important; padding: 16px 14px !important; }
  .project-v3-header > * { min-width: 0; }
  .project-v3-headline { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; min-width: 0 !important; }
  .project-v3-identity, .project-v3-headline-meta { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
  .project-v3-actions { flex-wrap: wrap !important; justify-content: flex-start !important; gap: 8px !important; }
  .project-v3-tabs, .project-v3-tablist {
    overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px) {
  /* Sprints: o seletor (quadro/encerradas) tinha ~60 px de respiro em cima e embaixo. */
  .sprints-mode-toolbar { margin: 0 0 4px !important; }
  #dashboard-panels:has(> .sprints-mode-toolbar:only-child) { gap: 0 !important; margin: 0 !important; }
  /* Carteira: os 4 números um embaixo do outro ocupavam a primeira tela inteira — viram grade 2×2 compacta.
     Cartão do projeto com menos respiro e a mini curva S mais baixa. */
  .jp-carteira-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 20px !important; }
  .jp-carteira-ind { padding: 12px 14px !important; min-height: 0 !important; }
  .jp-carteira-ind-valor { font-size: 24px !important; margin-top: 2px !important; }
  .jp-carteira-ind-rotulo, .jp-carteira-ind-ctx { font-size: 12.5px !important; }
  .jp-carteira-cartao { padding: 14px !important; gap: 12px !important; }
  .jp-carteira-curva { height: 40px !important; }
  .jp-carteira-secao { gap: 8px !important; margin-bottom: 12px !important; }
  .jp-carteira-controles { width: 100%; gap: 8px 10px !important; }
  .jp-carteira-controles > .jp-carteira-link { flex-basis: 100%; text-align: left; }
  .jp-carteira-ordenar-sel { flex: 1 1 auto; min-width: 0; }
  .jp-carteira-ordenar-sel select { flex: 1 1 auto; min-width: 0; height: 40px; }
  /* Governança / Fila: cada grupo tinha rolagem própria (72vh) dentro da página — o card ficava cortado no meio
     da caixa e o dedo rolava a caixa em vez da tela. No celular a lista cresce e a página rola. */
  .ag-col-lista { max-height: none !important; overflow: visible !important; }
  /* Recursos: "Semana · Mês · ‹ Novembro de 2026 › hoje" cortava o "hoje". */
  .rm-periodo { flex-wrap: wrap !important; max-width: 100% !important; row-gap: 4px !important; }
}

@keyframes jpGavetaEntra { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes jpGavetaFundo { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.jp-drawer .sidebar, html.jp-drawer .jp-drawer-scrim { animation: none !important; }
}