/* ============================================================
   X8 LABS — AJUSTES DE MOBILE (abaixo de 768px)
   ------------------------------------------------------------
   Por que um arquivo separado e NÃO o shell-canvas.css: aquele tem
   um contrato — tudo lá vive sob :root[data-shell="canvas"] e é
   inerte sem o atributo. E no mobile o canvas é DESLIGADO de
   propósito (o mobile roda o layout V1 original). Então uma regra
   de mobile não caberia lá sem quebrar a invariante do arquivo.

   Estas regras valem nos DOIS shells, já que só dependem da largura.
   ============================================================ */

@media (max-width: 768px) {

  /* ── PADDING DAS PÁGINAS ──────────────────────────────────────
     Medido em 375px: sobravam só 295px úteis — 21% da tela virava
     margem. Vinha de DUAS camadas somadas, como no desktop:
        main                     padding: 32px 28px
        .dashboard-simple-root   padding: 0 0 48px
        .dashboard-simple-shell  padding: 16px 12px 0   (12+28 = 40 por lado)
     Aqui o `main` volta a ser a ÚNICA fonte de padding e os wrappers
     externos de cada página são zerados — mesma estratégia do desktop,
     só que com valores de mobile. Resultado: 16px por lado, 343px úteis. */
  .via-shell-content > main {
    padding: 20px 16px !important;
  }
  .via-shell-content > main > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }
  /* 2º nível: o wrapper interno de cada página também empilha padding.
     O :not() protege o caso de uma página pôr um CARD já nesse nível —
     zerar ali achataria o conteúdo DENTRO do card. */
  .via-shell-content > main > * > *:not([class*="card" i]):not([class*="panel" i]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── VAZAMENTO HORIZONTAL EM /solucoes (PRÉ-EXISTENTE) ────────
     Medido: o body rolava 485px numa tela de 355 mesmo ANTES destes
     ajustes (verifiquei desligando este arquivo). A barra de filtros
     (.filter-bar-scrollable) já rola sozinha e está correta — quem
     estoura é a BUSCA: 320px fixos numa linha flex que não encolhe.
     `min-width:0` é o que destrava o encolhimento (item flex tem
     min-width:auto por padrão e não passa do conteúdo). */
  /* ⚠ NÃO usar `flex:1 1 100%` aqui: a busca tem um IRMÃO (o <h2> com as abas
     "Todas as soluções / Minhas / Favoritas") numa linha `nowrap`. Forçar 100%
     espremia esse irmão a largura ZERO e os botões dele vazavam por cima do
     texto. O certo é deixar a busca ENCOLHER e fazer a linha EXTERNA quebrar. */
  .sols-search {
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 200px !important;
  }
  .sols-search-input { min-width: 0 !important; width: 100% !important; }
  /* a linha externa (h2 das abas + bloco da busca) passa a quebrar */
  .via-shell-content > main div:has(> * > .sols-search),
  .via-shell-content > main div:has(> .sols-search) {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    row-gap: 12px;
  }
  /* e o h2 das abas volta a poder ocupar a linha inteira */
  .via-shell-content > main h2:has(button) { min-width: 0; flex: 1 1 100%; }

  /* Paginação: 368px numa tela de 355. Quebra em linhas em vez de estourar. */
  .via-pagination {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    row-gap: 8px;
    justify-content: center;
  }
  .via-pagination > * { min-width: 0; }

  /* O cartão de página não precisa de raio/gutter no mobile: com a tela
     estreita, borda arredondada + margem só roubam largura útil. */
  :root[data-shell="canvas"] .via-shell-content {
    padding: 0 !important;
  }
  :root[data-shell="canvas"] .via-shell-content > main {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}