/* ============================================================================
   JumpJump — Camada Responsiva
   Media queries para adaptação mobile/tablet. Carregada por último em todos os
   layouts, para sobrepor jj-system/jj-components/jj-screens/jj-legacy.

   Breakpoints de referência (documental — @media não aceita var()):
     480px   celular retrato
     768px   celular paisagem / ponto em que o shell principal vira mobile
     1024px  tablet — ajustes finos em telas densas (Board, Sprint, Report)
   ============================================================================ */

/* ---------- 1. Botão hamburguer (fora do breakpoint mobile: oculto) ---------- */
.jj-topbar__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-soft);
  color: var(--jj-ink-2);
  flex-shrink: 0;
}
.jj-topbar__menu-btn:hover { background: var(--jj-surface-2); }

.jj-sidebar-backdrop { display: none; }

/* ---------- 2. Shell principal (_Layout): sidebar vira drawer ----------
   Breakpoint 900px (não 768px) para cobrir também celular em paisagem
   (S25 e afins reportam ~740-915px de largura CSS deitados). Tudo com
   !important porque data-sidebar="collapsed|expanded" (preferência salva
   pro desktop) tem regras mais específicas que colidem com o modo drawer. */
@media (max-width: 900px) {
  .jj-app {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "topbar"
      "main" !important;
  }

  .jj-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(280px, 84vw) !important;
    height: 100dvh !important;
    z-index: var(--jj-modal-z) !important;
    transform: translateX(-100%) !important;
    box-shadow: var(--sh-3) !important;
    transition: transform var(--d-base) var(--ease) !important;
  }
  [data-sidebar-mobile="open"] .jj-sidebar { transform: translateX(0) !important; }

  /* No drawer mobile não existe o rail colapsado (só ícones) — o menu sempre
     abre expandido, com rótulos visíveis, independente da preferência salva
     pro desktop em data-sidebar (que por padrão já vem "collapsed" em
     qualquer viewport <1280px — ver jj-shell.js). */
  .jj-sidebar__label {
    display: inline !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .jj-sidebar__item { justify-content: flex-start !important; padding: 0 var(--sp-2) !important; }
  .jj-sidebar__collapse-btn { display: none !important; }
  .jj-sidebar__bottom { flex-direction: row !important; padding: var(--sp-2) var(--sp-2) var(--sp-3) !important; }
  .jj-sidebar__user-card {
    justify-content: flex-start !important;
    padding: 6px var(--sp-2) !important;
    border-color: var(--jj-rule) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .jj-sidebar__user-info, .jj-sidebar__user-chevron { display: flex !important; }

  .jj-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: color-mix(in oklch, black 45%, transparent);
    z-index: calc(var(--jj-modal-z) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--d-base) var(--ease);
  }
  [data-sidebar-mobile="open"] .jj-sidebar-backdrop { opacity: 1; pointer-events: auto; }
  [data-sidebar-mobile="open"] body { overflow: hidden; }

  /* Popover do usuario abre a partir do botao dentro da propria sidebar-drawer;
     sem isso ele fica com z-index menor que a gaveta (--jj-modal-z) e some atras dela. */
  #jj-user-popover {
    z-index: calc(var(--jj-modal-z) + 5) !important;
  }

  .jj-topbar__menu-btn { display: inline-flex; }
  .jj-topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }

  .jj-topbar__breadcrumb { font-size: var(--t-sm); }
  .jj-topbar__breadcrumb > span:not(.current),
  .jj-topbar__breadcrumb > .jj-topbar__sep { display: none; }

  .jj-search-trigger { min-width: 0; padding: 0 var(--sp-2); }
  .jj-search-trigger span:not(.jj-search-trigger__kbd) { display: none; }
  .jj-search-trigger__kbd { display: none; }
}

/* ---------- 2b. Topbar: some ao rolar pra baixo, reaparece ao rolar pra
   cima — sensação de navegação nativa sem ocupar espaço de tela o tempo
   todo. Classe .is-hidden alternada por jj-shell.js (só dentro do mesmo
   corte de 900px do drawer mobile). ---------- */
@media (max-width: 900px) {
  .jj-topbar {
    transition: transform var(--d-base) var(--ease);
    will-change: transform;
  }
  .jj-topbar.is-hidden { transform: translateY(-100%); }
}

/* ---------- 2c. Notificações: o painel abria ancorado no botão do sino
   (posição: absolute + right:0 relativo ao próprio wrapper), que fica à
   ESQUERDA dos ícones de Atividades/Buscar no topbar — não perto da borda
   da tela. Só limitar a largura (Seção 3 abaixo) não bastava: o painel
   ainda vazava a borda ESQUERDA da tela. Trava relativo à própria viewport
   (position:fixed) pra sempre caber inteiro, não importa onde o sino esteja. ---------- */
@media (max-width: 900px) {
  .jj-quick-notifications__menu {
    position: fixed;
    top: calc(var(--jj-topbar-h) + 6px);
    right: var(--sp-3);
    left: var(--sp-3);
    width: auto;
    max-width: none;
  }
}

/* ---------- 3. Overlays (Cmd-K / modal) em telas bem estreitas ---------- */
@media (max-width: 480px) {
  .jj-cmdk-backdrop { padding-top: 6vh; padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .jj-cmdk__input { height: 48px; font-size: var(--t-lg); }
  .jj-modal-backdrop { padding: var(--sp-2); }
  .jj-popover, .jj-popover--lg { width: min(320px, calc(100vw - 16px)); }
}

/* Dispositivo touch/mobile não tem teclado — hints de atalho (↑↓ / ⏎ / esc)
   não fazem sentido e só ocupam espaço. */
@media (max-width: 900px) {
  .jj-cmdk__footer { display: none; }
}

/* Cartão do Kanban: o menu "⋯" só aparecia no :hover do card, que não existe
   em touch — ficava impossível de abrir no celular sem simular hover. */
@media (hover: none) {
  .task-card-dots { opacity: 1; }
}

/* Kanban no mobile: colunas empilhadas uma embaixo da outra (mesmo padrao
   ja adotado no Report/Me), em vez de "paginar" 1 coluna quase full-width
   por vez em scroll horizontal (regra legada em app.css/768px). */
@media (max-width: 900px) {
  .board-columns {
    flex-direction: column !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  .column-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    max-height: none !important;
  }
  .column-body {
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
  }

  /* Menu "..." e popover de prioridade de cada card sao absolutos dentro do
     card; com a coluna antes estreita/cortando overflow, saiam espremidos
     ou cortados. Sem clipping do ancestral + z-index acima do card seguinte,
     abrem inteiros por cima do conteudo abaixo. */
  .task-card-actions,
  .task-card-priority-popover {
    z-index: 60;
    max-width: calc(100vw - 64px);
  }
}

/* ---------- 3b. Board (Kanban) — barra superior (troca de quadro + engrenagens
   + abas Kanban/Lista/Anexos) não tinha NENHUM tratamento mobile e vazava a
   tela. Segue o mesmo padrão já usado pelo board-filter-bar/.ws-tabs: em vez
   de esconder função, vira scroll horizontal (nada some, só precisa arrastar). */
@media (max-width: 900px) {
  .board-shell-top { padding: 0 var(--sp-3) !important; gap: var(--sp-2) !important; }
  .board-shell-left {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }
  .board-shell-left::-webkit-scrollbar { display: none; }
  .board-switcher-trigger strong {
    display: inline-block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .board-switcher-config,
  .board-tabs,
  .board-shell-divider { flex-shrink: 0; }
}

/* ---------- 3c. Board — aba "Anexos": toolbar (resumo + busca) tinha largura
   mínima somada de ~512px (14rem + 18rem, sem wrap) e vazava a tela. ---------- */
@media (max-width: 900px) {
  .board-attachments-toolbar { flex-wrap: wrap; }
  .board-attachments-summary { min-width: 0; flex-basis: 100%; }
  .board-attachments-search-form { flex-basis: 100%; }
  .board-attachments-search { width: 100%; }
}

/* ---------- 3d. Board (Kanban) — colunas podem ser recolhidas/expandidas no
   mobile: empilhadas verticalmente, uma coluna com muitos cards fica longa
   demais pra rolar. Botao some no desktop (colunas la ja mostram tudo lado
   a lado, nao faz sentido recolher). ---------- */
.column-collapse-btn { display: none; }
.task-detail-mobile-toggles { display: none; }
.task-detail-kebab-mobile-only { display: none; }
@media (max-width: 900px) {
  .column-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--jj-ink-2);
    border-radius: var(--r-soft);
    cursor: pointer;
    flex-shrink: 0;
  }
  .column-collapse-btn:hover { background: var(--jj-surface-2); }
  .column-collapse-icon { transition: transform var(--d-fast) var(--ease); }
  .column-card.is-collapsed .column-collapse-icon { transform: rotate(-90deg); }
  .column-card.is-collapsed .column-body { display: none !important; }
}

/* ---------- 3e. Board — barra de filtros: no mobile a regra legada (app.css
   @768px) deixava tudo numa unica linha com scroll horizontal, mas o contador
   de resultados (.board-filter-count) mantinha margin-left:auto do desktop e
   colidia/sobrepunha o texto dos chips. Busca vira sua propria linha (100%
   largura, sem cortar "Buscar tarefas..."); chips ganham uma linha dedicada
   com scroll horizontal proprio; contador/limpar perdem o auto-margin. ---------- */
@media (max-width: 900px) {
  .board-filter-bar {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
  .board-filter-search {
    flex: 1 1 100% !important;
    order: -1 !important;
  }
  .board-filter-search-input {
    width: 100% !important;
  }
  .board-filter-chips {
    flex: 1 1 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .board-filter-chips::-webkit-scrollbar { display: none; }
  .board-filter-count,
  .board-filter-clear-all {
    margin-left: 0 !important;
  }
  .board-filter-add { flex-shrink: 0; }
}

/* ---------- 3f. Modal de detalhe da tarefa (aberto a partir de um card): ja
   existe um bloco mobile pra ele em rr-theme.css (~1750), mas duas regras
   SEM guarda de media query, definidas DEPOIS no mesmo arquivo (secao
   "sidebar reskin"), colidem com a mesma propriedade e vencem por ordem de
   cascata — .task-detail-layout volta a virar grid 2 colunas e
   .task-detail-sidebar volta a largura fixa, espremendo o editor de
   descricao a quase zero de largura. Reafirma aqui (ultimo arquivo
   carregado) pra garantir que vença de verdade. Tambem: o botao "<-" de
   recolher sidebar nao faz sentido no mobile (ja empilha tudo) e o X de
   fechar, jogado dentro do flex-wrap dos botoes de acao, sobrava sozinho
   numa linha torta — fixado no canto superior direito do cabecalho. ---------- */
@media (max-width: 900px) {

  .task-detail-modal {
    height: 100dvh !important;
  }
  .task-detail-layout {
    display: block !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .task-detail-layout:has(.task-detail-thread-panel:not([hidden])) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }
  .task-detail-sidebar {
    width: 100% !important;
  }
  .task-detail-collapse-button {
    display: none !important;
  }
  .task-detail-hero-actions {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
  }
  .task-detail-hero-left {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
  }
  .task-detail-hero {
    position: relative !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .task-detail-hero::-webkit-scrollbar { display: none; }

  /* Cada bloco com seu proprio tamanho: titulo menor (ainda destacado, mas
     nao brigando por altura com o resto), paddings mais enxutos, toolbar
     de formatacao vira 1 linha com scroll (em vez de 2 linhas inteiras)
     pra sobrar mais espaco de tela pro conteudo de verdade. */
  .task-detail-hero {
    padding: 6px 16px 8px !important;
    gap: 6px !important;
  }
  .task-detail-title-section {
    padding: 8px 16px !important;
  }
  .task-detail-title-editable,
  .task-detail-title-section h1 {
    font-size: var(--t-lg) !important;
    line-height: 1.3 !important;
  }
  .rr-editor-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .rr-editor-toolbar::-webkit-scrollbar { display: none; }
  .rr-tb-btn,
  .rr-tb-heading,
  .rr-tb-sep {
    flex-shrink: 0 !important;
  }

  .task-detail-tabs {
    overflow-y: hidden !important;
  }
  .task-detail-hero-left {
    gap: 6px !important;
  }
  .task-detail-timer-section {
    gap: 6px !important;
  }
  .task-detail-play-button {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
  }
  .task-detail-timer-display {
    display: none !important;
  }
  .task-detail-hero-actions > .js-task-share {
    display: none !important;
  }
  .task-detail-hero-actions > .js-vccode-launch {
    padding: 0 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .task-detail-hero-actions > .js-vccode-launch .js-vccode-launch-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .task-detail-hero-actions .js-deliver-task {
    padding: 0 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .task-detail-hero-actions .js-deliver-task .task-detail-deliver-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .task-detail-kebab-mobile-only {
    display: flex !important;
  }
  .task-detail-mobile-toggle-btn {
    padding: 0 !important;
    width: 26px !important;
  }
  .task-detail-mobile-toggle-btn [data-toggle-label] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .task-detail-assignee-avatar {
    width: 20px !important;
    height: 20px !important;
  }
  .task-detail-assignee-plus {
    width: 18px !important;
    height: 18px !important;
    margin-left: 2px !important;
  }
  .task-detail-hero-actions {
    gap: 4px !important;
  }
  .task-detail-hero-actions .task-detail-action-button {
    height: 26px !important;
  }
  .task-detail-more-actions {
    width: 36px !important;
    height: 36px !important;
  }
  .task-detail-hero-actions .task-detail-action-button .rr-icon {
    width: 13px;
    height: 13px;
  }
  .task-detail-more-actions .rr-icon {
    width: 18px;
    height: 18px;
  }

  /* Campos do sidebar (Prioridade, Quadro, Etapa, Cliente, Solicitante, Fila,
     Tags, datas...) sao um grid rigido de 120/150px de rotulo + 1fr de valor
     (rr-theme.css), com border:0 entre linhas. Numa tela estreita, badge +
     botao (ex.: pill "IN PROGRESS" + "Mover para proxima") quebravam dentro
     da coluna de valor sem nenhum limite visivel da linha vizinha, lendo como
     um bloco so de texto amontoado. Cada campo vira sua propria area: rotulo
     em cima, valor embaixo, com divisoria visivel entre um campo e outro. */
  .task-detail-metadata-item,
  .task-detail-form-compact {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--rr-border) !important;
    min-height: 0 !important;
  }
  .task-detail-metadata-item:last-child,
  .task-detail-form-compact:last-of-type {
    border-bottom: none !important;
  }
  .task-detail-metadata-item dt,
  .task-detail-metadata-item dd,
  .task-detail-form-compact label.form-label,
  .task-detail-form-compact .task-detail-picker-field {
    width: 100% !important;
  }
  .task-detail-form-compact[data-autosave]::after {
    position: static !important;
    display: block !important;
    transform: none !important;
    text-align: right !important;
    margin-top: 2px !important;
  }

  /* A lista de campos ganha uma area propria de verdade: fundo levemente
     elevado em relacao ao modal (mesmo tom usado pra elementos "por cima"
     no tema escuro), cantos arredondados e margem das bordas da tela — em
     vez de ficar uma lista crua colada de ponta a ponta, sem nenhum
     contraste com o fundo do modal (ambos usavam a mesma cor). Rotulo
     menor/discreto (uppercase, mais claro) e o valor com mais peso, pra
     ficar claro o que e "nome do campo" e o que e "conteudo". */
  .task-detail-sidebar-section {
    margin: 12px 16px !important;
    padding: 2px 0 !important;
    background: var(--jj-paper-raised) !important;
    border: 1px solid var(--rr-border) !important;
    border-radius: var(--r-soft) !important;
    box-shadow: var(--rr-shadow-sm) !important;
    overflow: hidden !important;
  }
  .task-detail-metadata-item dt,
  .task-detail-form-compact label.form-label {
    font-size: var(--t-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
  }
  .task-detail-metadata-item dd,
  .task-detail-form-compact .form-control,
  .task-detail-form-compact .form-select {
    font-size: var(--t-base) !important;
    font-weight: 600 !important;
  }
  .task-detail-mobile-toggles {
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }
  .task-detail-mobile-toggle-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border: 1px solid var(--jj-brand);
    border-radius: var(--r-pill);
    background: var(--jj-brand-soft);
    color: var(--jj-brand-ink);
    font-size: var(--t-xs);
    font-weight: 600;
  }
  .task-detail-mobile-toggle-btn .rr-icon {
    width: 13px;
    height: 13px;
  }
  .task-detail-sidebar {
    display: none !important;
  }
  .task-detail-modal.is-showing-metadata .task-detail-sidebar {
    display: block !important;
  }
  .task-detail-modal.is-showing-metadata .task-detail-title-section,
  .task-detail-modal.is-showing-metadata .task-detail-layout {
    display: none !important;
  }
}

/* ---------- 4. Telas administrativas (.ws-* — Empresa/Workspace, Clientes,
   Filas, Emails). Classes definidas em rr-theme.css, sem cobertura mobile. ---------- */
@media (max-width: 768px) {
  .ws-page { padding: 0 var(--sp-4); margin: 20px 0; }
  .ws-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ws-stats { flex-wrap: wrap; }
  .ws-tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .ws-panel-header { flex-wrap: wrap; gap: 8px; }
  .ws-panel-header > button { margin-left: auto; }
  .ws-search-bar { max-width: 240px; margin: 0 auto 16px; }
  .ws-table { display: block; overflow-x: auto; white-space: nowrap; }
  /* .ws-team-card tem overflow:hidden (só pra arredondar os cantos) — no
     desktop não tem efeito, mas cortava o scroll horizontal da tabela de
     membros dentro dele. */
  .ws-team-card { overflow: visible; }
  .ws-team-head { flex-wrap: wrap; gap: 10px; }
  .ws-team-add { width: 100%; }
  .ws-team-add select { min-width: 0; width: 100%; }
}

/* ---------- 5. Search/Me/Bulletin — .search-page, .me-page e .bulletin-page
   compartilham o mesmo padding lateral fixo de 60px (app.css), sobrando
   ~240-290px de conteúdo útil num celular; o próprio app.css já empilha
   .search-hero/.bulletin-scope-switch/.me-tabs e colapsa os grids em 768px,
   faltava só ajustar essa margem. ---------- */
@media (max-width: 768px) {
  .search-page, .me-page, .bulletin-page { padding: 0 var(--sp-4); margin: 20px 0; }
}

/* ---------- 6. Tabelas sem NENHUM tratamento de overflow (Sprint list, SLA
   da equipe, matriz e workload do Sprint Detail): sem media query em lugar
   nenhum, vazam a tela em telas estreitas sem nenhum jeito de rolar. ---------- */
@media (max-width: 768px) {
  .sp-table-wrap,
  .sla-table-wrap,
  .sp-matrix-wrap,
  .sp-team-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}