/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE.CSS — Camada de responsividade global
   ───────────────────────────────────────────────────────────────────────────

   POR QUE ESTE ARQUIVO EXISTE

   O painel tem 61 páginas e apenas 5 tinham breakpoint próprio. O restante
   monta o layout com `style="..."` inline direto no JavaScript — e estilo
   inline vence qualquer regra de folha externa, por especificidade. Ou seja:
   as media queries do main.css simplesmente não alcançavam a maior parte da
   interface. No celular, uma grade de duas colunas continuava com duas
   colunas espremidas em 360px de tela.

   Reescrever os 61 arquivos seria caro e arriscado. Em vez disso, este
   arquivo ataca os PADRÕES: mapeei o que o código realmente usa e escrevi
   seletores de atributo que casam com esses valores exatos. Um levantamento
   nas 61 páginas mostrou a distribuição:

       45x  grid-template-columns: 1fr 1fr
        9x  1fr
        5x  2fr 1fr
        3x  repeat(4, 1fr) / repeat(2, 1fr) / 1fr 1fr 1fr / 1.5fr 1fr
        2x  repeat(3, 1fr) / 1fr 1.5fr
        …   além dos repeat(auto-fill, minmax(NNNpx, 1fr))

   O padrão `[style*="..."]` já era usado no main.css (linhas ~3360 e ~4147)
   para corrigir cores em modo claro — então isto não é uma técnica estranha
   ao projeto, é a mesma abordagem aplicada a layout.

   ORDEM DE CARGA: este arquivo tem que vir DEPOIS de todos os outros no
   index.html. Ele usa !important porque compete com estilo inline — não há
   alternativa: é a única forma de sobrepor `style="..."` sem tocar no JS.

   FORA DE ESCOPO: o editor de vídeo (clip-editor / clip-studio). Ele foi
   deixado de fora de propósito — é uma ferramenta de trabalho fino, com
   timeline e arraste de precisão, que não faz sentido no celular. Todos os
   seletores daqui são neutralizados dentro de `#clip-editor-root` e afins,
   ver a última seção.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. FUNDAÇÃO — vale em qualquer largura
   ═══════════════════════════════════════════════════════════════════════════ */

/* Impede o "scroll fantasma" horizontal: basta UM elemento estourar a largura
   para a página inteira ganhar rolagem lateral, e o usuário fica arrastando a
   tela sem entender por quê. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Mídia e blocos de código nunca empurram o layout. */
img, video, canvas, svg, iframe, pre, table {
    max-width: 100%;
}
img, video {
    height: auto;
}

/* Palavras longas sem espaço (URLs, IDs, e-mails, tokens) são a causa mais
   comum de estouro horizontal em card estreito. */
body {
    overflow-wrap: break-word;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. CAMPOS DE FORMULÁRIO — o zoom automático do iOS
   ───────────────────────────────────────────────────────────────────────────
   O Safari no iPhone dá zoom na página sempre que o usuário toca num campo
   com fonte menor que 16px. E ele NÃO desfaz o zoom depois — a pessoa fica
   com o layout deslocado e precisa fazer pinça pra voltar.

   Os campos do projeto estão em 0.88rem (~14px), então isso acontece em todo
   formulário do painel. A correção é usar 16px na fonte do campo em telas de
   toque. O tamanho visual continua controlado pelo padding.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. ALVOS DE TOQUE
   ───────────────────────────────────────────────────────────────────────────
   Referência de acessibilidade (WCAG 2.5.8 / Apple HIG): área tocável de no
   mínimo 44x44px. Os botões do painel estão em ~34px de altura (padding
   9px 18px + fonte 0.82rem), o que gera toque errado com frequência.

   Uso `min-height` em vez de `height` pra não achatar botão com duas linhas.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .btn,
    button:not(.sc-port):not(.no-touch-target),
    input[type="submit"],
    input[type="button"],
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
        min-height: 44px !important;
    }

    /* Botão só de ícone: garante largura junto com a altura. */
    .btn-icon,
    .sc-icon-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Checkbox e radio são pequenos demais por padrão do navegador. */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px !important;
        min-height: 20px !important;
        transform: scale(1.15);
        transform-origin: left center;
    }

    /* Itens de lista/menu clicáveis ganham respiro vertical. */
    .nav-item,
    .dropdown-item,
    .menu-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. GRADES INLINE → COLUNA ÚNICA
   ───────────────────────────────────────────────────────────────────────────
   O coração deste arquivo. Casa com os valores exatos que o JS escreve, nas
   duas grafias que existem no código (com e sem espaço depois dos dois-pontos
   — conferi: 89 ocorrências com espaço, 26 sem).

   Só colapso o que REALMENTE não cabe. Grades de 2 colunas com conteúdo curto
   (pares rótulo/valor de métrica) continuam em 2 colunas até 480px, porque
   empilhar tudo deixaria a tela longa demais e pioraria a leitura.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Duas colunas assimétricas: sempre empilham. São layouts de
       "conteúdo + painel lateral", que não funcionam lado a lado no celular. */
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 1fr 2fr"],
    [style*="grid-template-columns:1fr 2fr"],
    [style*="grid-template-columns: 1.5fr 1fr"],
    [style*="grid-template-columns:1.5fr 1fr"],
    [style*="grid-template-columns: 1fr 1.5fr"],
    [style*="grid-template-columns:1fr 1.5fr"],
    [style*="grid-template-columns: 3fr 1fr"],
    [style*="grid-template-columns:3fr 1fr"],
    [style*="grid-template-columns: 1fr 3fr"],
    [style*="grid-template-columns:1fr 3fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Três ou mais colunas: viram duas. Ir direto pra uma coluna deixaria
       painéis de métrica com scroll interminável. */
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns: repeat(6"],
    [style*="grid-template-columns:repeat(6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* ── Colunas de largura fixa em px: o caso mais destrutivo. Um
       `280px 1fr` numa tela de 360px não deixa espaço para a segunda coluna. */
    [style*="grid-template-columns: 2"][style*="px "],
    [style*="grid-template-columns: 3"][style*="px "],
    [style*="grid-template-columns:2"][style*="px "],
    [style*="grid-template-columns:3"][style*="px "] {
        grid-template-columns: 1fr !important;
    }

    /* ── `minmax(NNNpx, 1fr)` com mínimo alto estoura em tela estreita:
       o `auto-fill` reduz para uma coluna, mas essa coluna mantém o mínimo
       de 320px e ultrapassa a viewport. Aqui o mínimo é anulado. */
    [style*="minmax(260px"], [style*="minmax(260px"],
    [style*="minmax(280px"], [style*="minmax(280px"],
    [style*="minmax(300px"], [style*="minmax(300px"],
    [style*="minmax(320px"], [style*="minmax(320px"],
    [style*="minmax(340px"], [style*="minmax(340px"],
    [style*="minmax(350px"], [style*="minmax(350px"],
    [style*="minmax(360px"], [style*="minmax(400px"] {
        grid-template-columns: repeat(auto-fill, minmax(0, 1fr)) !important;
    }

    /* Grade nenhuma pode ter coluna com mínimo maior que o container.
       `minmax(0, …)` desarma o `min-width: auto` implícito do CSS Grid, que é
       a causa silenciosa de metade dos estouros horizontais em grid. */
    [style*="display: grid"],
    [style*="display:grid"] {
        min-width: 0 !important;
    }
}

/* ── Celular estreito: aí sim, tudo em uma coluna só. ── */
@media (max-width: 480px) {
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    /* Exceção deliberada: grades de métrica curta (números grandes, rótulo
       de uma palavra) ficam MELHOR em duas colunas mesmo no celular —
       empilhar oito cartões vira uma coluna infinita de rolagem. */
    .kpi-grid,
    .crm-stats-grid,
    .gam-stats-grid,
    .sc-node-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. BARRAS DE AÇÃO EM FLEX
   ───────────────────────────────────────────────────────────────────────────
   Há 535 usos de `display:flex` inline sem `flex-wrap`. O padrão típico é
   "título à esquerda, botões à direita" com `justify-content: space-between`.
   Em 360px isso comprime tudo até o texto virar uma coluna de letras.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    [style*="justify-content: space-between"],
    [style*="justify-content:space-between"] {
        flex-wrap: wrap !important;
        gap: 10px;
    }

    /* Cabeçalhos de página e de card empilham título e ações. */
    .page-header,
    .card-header,
    .org-header-container,
    .section-header {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Filho de flex encolhe abaixo do conteúdo — sem isto o `min-width: auto`
       implícito do flexbox impede o encolhimento e gera estouro. */
    [style*="display: flex"] > *,
    [style*="display:flex"] > * {
        min-width: 0;
    }

    /* Grupos de botão ocupam a linha inteira e dividem o espaço. */
    .btn-group,
    .actions,
    .toolbar-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    .btn-group > .btn,
    .actions > .btn {
        flex: 1 1 auto;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. TABELAS
   ───────────────────────────────────────────────────────────────────────────
   O main.css já tinha uma regra que faz `table { display: block; overflow-x:
   auto }` em 768px. Ela evita o estouro, mas tem um efeito colateral: ao
   trocar o `display` de `table` para `block`, as colunas perdem o alinhamento
   entre cabeçalho e corpo, porque o algoritmo de tabela deixa de rodar.

   A abordagem aqui é outra: a tabela CONTINUA sendo tabela (alinhamento
   preservado) e quem rola é um contêiner ao redor dela. Como nem toda tabela
   do projeto tem contêiner próprio, uso `display: block` no elemento-pai
   direto quando ele é um card.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Anula a regra antiga do main.css — a tabela volta a ser tabela. */
    table, .table {
        display: table !important;
        width: 100% !important;
        overflow-x: visible !important;
        border-collapse: collapse;
    }

    /* Quem rola é o contêiner. `.table-wrap` é a classe nova; as demais são
       os contêineres que já existem no projeto. */
    .table-wrap,
    .table-responsive,
    .sc-contacts-wrap,
    .card-body:has(> table),
    .card:has(> table) {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Largura mínima para as colunas não se esmagarem: melhor rolar de lado
       do que ler uma coluna de 3 caracteres. */
    .table-wrap > table,
    .table-responsive > table,
    .sc-contacts-wrap > table {
        min-width: 560px;
    }

    /* Células mais compactas — cabe mais coluna na tela. */
    table th, table td {
        padding: 10px 12px !important;
        font-size: 0.82rem !important;
        white-space: nowrap;
    }

    /* Cabeçalho fixo ao rolar a tabela na horizontal ajuda a não se perder. */
    table thead th {
        position: sticky;
        top: 0;
        background: var(--bg-card);
        z-index: 2;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. MODAIS
   ───────────────────────────────────────────────────────────────────────────
   Existem larguras fixas de 500px, 600px, 640px e 768px espalhadas pelos
   modais. Qualquer uma delas estoura num celular.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .modal-content,
    .modal-card,
    .sc-modal-card,
    [class*="modal"] > [style*="width:"],
    [class*="modal"] > [style*="width: "] {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
    }

    .modal-overlay,
    #modal-overlay {
        padding: 12px !important;
        align-items: flex-start !important;
        padding-top: 40px !important;
    }

    /* Rodapé de modal: botões em largura total, empilhados, o principal em
       cima — no celular o polegar alcança primeiro a parte de baixo, então o
       botão de confirmar fica por último na ordem visual e mais acessível. */
    .modal-footer,
    .modal-actions {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }
    .modal-footer > .btn,
    .modal-actions > .btn {
        width: 100% !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. ESTRUTURA DA PÁGINA
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Barra do topo acompanha a rolagem: o botão do menu fica sempre
       alcançável, sem precisar voltar ao topo da página. */
    #topbar {
        position: sticky !important;
        top: 0;
        z-index: 900;
        background: var(--bg-topbar, var(--bg-card));
        border-bottom: 1px solid var(--border);
    }

    /* Área útil ganha respiro sem desperdiçar largura. */
    #app {
        padding: 14px 12px !important;
    }

    /* Título longo de página não empurra o resto da barra. */
    #page-title {
        font-size: 1.05rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* Cards e seções encostam menos nas bordas. */
    .card, .section-card, .kpi-card {
        border-radius: 14px !important;
    }

    /* Abas viram faixa rolável em vez de quebrar em várias linhas. */
    .tabs, .tab-list, .nav-tabs, .sc-tabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px !important;
        padding-bottom: 4px;
    }
    .tabs::-webkit-scrollbar,
    .tab-list::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar,
    .sc-tabs::-webkit-scrollbar { display: none; }

    .tabs > *, .tab-list > *, .nav-tabs > *, .sc-tabs > * {
        flex: 0 0 auto !important;
        white-space: nowrap;
    }

    /* Gráficos precisam de altura declarada — o Chart.js colapsa para zero
       quando o contêiner não tem altura própria. */
    canvas {
        max-height: 260px;
    }

    /* ── Bolha flutuante do chat de IA ──────────────────────────────────────
       Ela tem 64x64 e `position: fixed` no canto. No desktop sobra espaço e
       ninguém nota. No celular ela cobre conteúdo: medido no navegador, na
       tela do editor de automação ela ficava por cima do inspetor, escondendo
       o texto e o campo embaixo dela.

       Duas correções: encolhe um pouco, e o conteúdo da página ganha um
       espaço reservado no rodapé para nada terminar debaixo dela. */
    #ai-chat-trigger {
        width: 52px !important;
        height: 52px !important;
        right: 12px !important;
        bottom: 12px !important;
        opacity: 0.92;
    }

    #app {
        padding-bottom: 80px !important;
    }

    /* Janela do chat aberta ocupa a tela toda — em 384px de largura não faz
       sentido ser um cartãozinho no canto. */
    #ai-chat-window,
    #ai-chat-panel {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc(100vh - 90px) !important;
        right: 8px !important;
        bottom: 74px !important;
    }
}

@media (max-width: 480px) {
    /* O atalho `padding` zera o padding-bottom de 80px definido acima (a folga
       para a bolha do chat), então ele é repetido aqui. Foi assim que o bug
       apareceu no teste: a regra existia, mas este bloco a desfazia. */
    #app { padding: 12px 10px 80px !important; }

    /* Números grandes de KPI ficam desproporcionais em tela pequena. */
    .kpi-value { font-size: 1.35rem !important; }
    .kpi-card  { padding: 14px !important; }

    h1 { font-size: 1.3rem !important; }
    h2 { font-size: 1.15rem !important; }
    h3 { font-size: 1rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. EXCEÇÃO — EDITOR DE VÍDEO
   ───────────────────────────────────────────────────────────────────────────
   O Cortes Inteligentes / Clip Studio ficou FORA deste trabalho por decisão
   de escopo: é uma ferramenta de edição fina, com timeline, arraste de
   precisão e pré-visualização — não é tarefa de celular.

   Sem esta seção, as regras acima (principalmente as de grade e de tabela)
   entrariam no editor e bagunçariam um layout que hoje funciona no desktop.
   Aqui elas são explicitamente desligadas.


   As páginas do editor não criam nenhum container com id próprio, então não
   havia como mirá-las pelo CSS. A solução foi o router passar a marcar o #app
   com `data-module` e `data-page` a cada navegação (ver js/core/router.js) —
   o que também deixa qualquer regra futura por página possível.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    #app[data-page="clip-editor"] [style*="grid-template-columns"],
    #app[data-page="clip-studio"] [style*="grid-template-columns"] {
        grid-template-columns: revert !important;
    }

    #app[data-page="clip-editor"] [style*="justify-content: space-between"],
    #app[data-page="clip-editor"] [style*="justify-content:space-between"],
    #app[data-page="clip-studio"] [style*="justify-content: space-between"],
    #app[data-page="clip-studio"] [style*="justify-content:space-between"] {
        flex-wrap: nowrap !important;
    }

    #app[data-page="clip-editor"] table,
    #app[data-page="clip-studio"] table {
        display: revert !important;
    }

    /* O editor trabalha numa área maior que a tela por natureza — em vez de
       tentar encaixar, deixa rolar de lado dentro da própria área. */
    #app[data-page="clip-editor"],
    #app[data-page="clip-studio"] {
        overflow-x: auto;
    }
}