/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Help4 no CELULAR (13/09/2026)

   Carregada no FIM do <body> (App.razor), depois das telas: as telas trazem o próprio <style> no
   corpo, e em empate de especificidade vence o que vem por último. É por isso que quase nada
   aqui precisa de !important — só onde há estilo inline no markup.

   O que motivou: uma varredura em 375px das 88 telas mostrou que nenhuma rola de lado — o layout
   CORTA o que não cabe, o que é pior, porque fica inalcançável. Na barra do topo isso escondia
   busca, chat, ajuda e o menu do usuário (com o Sair) em todas as telas.

   Regra desta folha: só @media. Nada aqui pode mudar o computador.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

    /* ── Barra do topo ─────────────────────────────────────────────────────────────────────── */
    /* 12px à esquerda compensa a margem negativa do botão de menu (Edge.Start): com menos, ele sai pela borda. */
    .h4-appbar .mud-toolbar { padding-left: 12px; padding-right: 6px; gap: 2px; }
    .h4-logo { margin-left: 0; gap: 2px; }
    .h4-logo-sep, .h4-logo-app { display: none; }
    /* a logo da CX4 e a do white label têm altura inline no markup */
    .h4-logo > img:not(.h4-logo-emp) { height: 22px !important; max-width: 70px !important; }
    .h4-logo-emp { height: 28px; max-width: 76px; padding: 2px 4px; border-radius: 6px; }

    /* Empresa em contexto: some o rótulo e a setinha, fica ícone + nome curto. O nome continua —
       saber em que empresa se está é o contexto de TUDO que a tela mostra. */
    .h4-empctx { margin-left: 4px; padding: 3px 7px 3px 3px; gap: 6px; max-width: 128px; border-radius: 11px; }
    .h4-empctx-ic { width: 26px; height: 26px; flex-basis: 26px; border-radius: 8px; }
    .h4-empctx-lb, .h4-empctx-ch { display: none; }
    .h4-empctx-nm { font-size: .76rem; max-width: 84px; }

    /* Tema, cores e ajuda vão para o menu do usuário (MainLayout: h4-so-cel). */
    .h4-bar-extras { display: none; }
    .h4-so-cel { display: block; }
    .h4-user { padding: 3px 2px 3px 4px; gap: 2px; }
    .h4-user > .mud-icon-root { display: none; }

    /* Menus suspensos da barra: largura da tela, sem vazar pela borda. */
    .h4-empmenu { position: fixed; top: 60px; left: 8px; right: 8px; min-width: 0; width: auto; max-height: 72dvh; }
    .h4-usermenu { left: auto; width: min(290px, calc(100vw - 16px)); }

    /* ── Área de trabalho ──────────────────────────────────────────────────────────────────── */
    .h4-work { padding: 14px 12px 20px !important; }

    /* ── Cabeçalho das telas (Hero) ────────────────────────────────────────────────────────────
       No desktop o texto tem min-width:260px, que em 375px mandava o ícone numa linha e o título
       na outra: o cabeçalho sozinho ocupava um terço da primeira tela. Aqui ícone e título ficam
       lado a lado, e os botões descem para uma linha própria. */
    .h4-hero { padding: 14px 16px; gap: 10px 12px; border-radius: 14px; margin-bottom: 14px; }
    .h4-hero-ic { width: 40px; height: 40px; border-radius: 11px; }
    .h4-hero-ic .mud-icon-root { font-size: 1.5rem; }
    .h4-hero-txt { flex: 1 1 0; min-width: 0; }
    .h4-hero-txt .mud-typography-h5 { font-size: 1.1rem; line-height: 1.25; }
    .h4-hero-txt .mud-typography-body2 { font-size: .8rem; line-height: 1.35; margin-top: 2px !important; }
    .h4-hero-actions { flex-basis: 100%; margin-left: 0; gap: 8px; }
    /* Botões do cabeçalho menores: no tamanho do desktop, quatro botões viravam duas linhas gordas. */
    .h4-hero-actions .mud-button-root { min-height: 34px; padding: 4px 14px; font-size: .78rem; }
    .h4-hero-actions .mud-button-root .mud-button-icon-start { margin-right: 6px; }

    /* ── Diálogos: quase a tela inteira ────────────────────────────────────────────────────── */
    .mud-dialog-container .mud-dialog { margin: 8px; width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important;
                                        max-height: calc(100dvh - 16px); border-radius: 14px; }
    .mud-dialog .mud-dialog-title { padding: 12px 14px; }
    .mud-dialog .mud-dialog-content { padding: 4px 14px 12px; }
    .mud-dialog .mud-dialog-actions { padding: 8px 12px 12px; flex-wrap: wrap; gap: 6px; }

    /* ── Grades que não encolhem ───────────────────────────────────────────────────────────────
       Coluna "1fr" de grid é minmax(auto, 1fr): o conteúdo mais largo empurra a coluna para fora
       da tela. minmax(0,1fr) + min-width:0 nos filhos devolve o direito de encolher. */
    .mt-grid { grid-template-columns: minmax(0, 1fr); }
    .mt-grid > * { min-width: 0; }

    /* ── Indicadores (componente Kpi): dois por linha ─────────────────────────────────────────
       Um por linha, quatro números empilhados comiam meia tela antes do primeiro item de trabalho.
       :has() porque o MudItem é de cada tela e o Kpi é o componente — assim vale nas 11 telas que
       usam, sem tocar em nenhuma. A faixa decorativa sai: em meia largura ela só disputa espaço. */
    .mud-grid-item-xs-12:has(> .h4-kpi) { flex-basis: 50%; max-width: 50%; }
    .h4-kpi-spark { display: none; }
    .h4-kpi-sub { font-size: .7rem; line-height: 1.3; }

    /* Barras de ferramentas de tabela do MudBlazor quebram linha em vez de espremer. */
    .mud-table-toolbar { flex-wrap: wrap; height: auto; gap: 8px; padding: 8px 10px; }

    /* ── Assistente (Mestre) ───────────────────────────────────────────────────────────────────
       O cartão ia até 40px do topo e ficava POR CIMA da barra: o toque no seletor de empresa caía
       no balão do Mestre. Aqui ele para bem abaixo da barra e ocupa no máximo a largura da tela. */
    /* z-index 1250: abaixo da barra do topo (1300) e dos diálogos (1400). A barra do MudBlazor é um
       contexto de empilhamento — o menu de empresa, com z-index 3001, nunca passava do Mestre (1400),
       e no celular os dois se sobrepõem: a lista de empresas ficava atrás do balão. */
    .mw-root { right: 10px; bottom: 10px; gap: 8px; z-index: 1250; }
    .mw-card { width: min(320px, calc(100vw - 20px)); max-height: calc(100dvh - 150px); }
}

/* ── Alvos de toque ──────────────────────────────────────────────────────────────────────────────
   Botão de ícone pequeno do MudBlazor mede 26×26: o dedo erra, principalmente em listas com vários
   lado a lado (Usuários tinha 64). Com ponteiro grosso ele ganha área de toque de 36px sem mudar o
   ícone — no mouse nada muda. */
@media (pointer: coarse) {
    .mud-icon-button.mud-icon-button-size-small { min-width: 36px; min-height: 36px; }
    .mud-button-root.mud-button-size-small { min-height: 34px; }
}