/* ═══════════════════════════════════════════════════════════════════════════
   mobile.css — camada ESTRUTURAL de layout mobile do Autofy (2026-08-11)

   Carregado DEPOIS de style.css/modern.css/dashboard-premium.css. A ideia
   aqui não é empilhar mais um bolo de correções pontuais: é resolver as
   CAUSAS de overflow/instabilidade num lugar só, com tokens, e deixar as
   páginas herdarem isso.

   Três princípios:
     1. Nada de esconder overflow no <html>/<body>. Se algo estoura, ou o
        container ganha min-width:0 (causa real: item de flex/grid não
        encolhe) ou o próprio elemento largo rola dentro de si.
     2. Nenhum número mágico de altura. Barra inferior, safe area e o respiro
        do conteúdo saem todos do MESMO token.
     3. z-index só sai da escala declarada abaixo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Escala de empilhamento ──────────────────────────────────────────────
       Ordem: conteúdo < rail lateral < barra inferior < contexto de modal <
       modal < popover (calendário, aberto de dentro de modais) < toast.
       Qualquer z-index novo no projeto deve referenciar uma destas. */
    --z-base:           0;
    --z-raised:        10;
    --z-sticky:       100;
    --z-sidebar:      200;
    --z-bottomnav:    300;
    --z-modal-ctx:    800;   /* elevação do .main-content enquanto há modal */
    --z-modal:        900;
    --z-popover:     1000;
    --z-toast:       1100;

    /* ── Métrica da barra inferior ───────────────────────────────────────────
       --bottomnav-h é a altura do CONTEÚDO da barra; --bottomnav-space é o
       espaço total que ela ocupa na tela (conteúdo + safe area do aparelho).
       O respiro de baixo do .main-content deriva daqui — nunca de um px fixo,
       que é o que fazia o último card ficar escondido em uns aparelhos e
       sobrar buraco em outros. */
    --bottomnav-h: 60px;
    /* +10px do afastamento do rodapé: desde 2026-08-23 a barra é um dock
       flutuante (bottom: 10px), não mais colada na borda. Sem somar isso, o
       último card da página ficava por baixo do dock. */
    --bottomnav-gap: 10px;
    --bottomnav-space: calc(var(--bottomnav-h) + var(--bottomnav-gap) + env(safe-area-inset-bottom, 0px));

    /* ── Toque ───────────────────────────────────────────────────────────────
       44px é o mínimo confortável (mesma métrica que iOS/Android usam). */
    --tap-min: 44px;

    /* ── Espaçamento e raio ──────────────────────────────────────────────────
       Escala única, pra parar de existir 11px/13px/17px espalhados. */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;
    --r-sm: 10px; --r-md: 14px; --r-lg: 20px;

    /* Largura útil do conteúdo no mobile (padding lateral simétrico). */
    --gutter: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. DOCUMENTO — altura e overflow
   ═══════════════════════════════════════════════════════════════════════════ */

html {
    /* Viewport dinâmico. O fallback em vh fica ANTES: navegador que não
       entende dvh ignora a segunda linha e continua no comportamento antigo. */
    min-height: 100vh;
    min-height: 100dvh;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    /* CAUSA RAIZ nº1 de scroll lateral neste projeto: o <body> é display:flex
       e o .main-content é item de flex. Item de flex nasce com min-width:auto,
       ou seja, se RECUSA a encolher abaixo da largura intrínseca do conteúdo.
       Uma tabela larga lá dentro empurrava o .main-content além da tela, e a
       "solução" era overflow-x:hidden — que só escondia o sintoma (e, no
       <body>, ainda quebrava position:fixed no iOS, fazendo a barra inferior
       flutuar). Com min-width:0 o item passa a poder encolher e o overflow
       simplesmente deixa de existir. */
    min-width: 0;
    /* Sem overflow-x aqui. De propósito. Ver comentário acima. */
}

/* Mesmo motivo, do outro lado da relação. */
.main-content {
    min-width: 0;
    max-width: 100%;
}

/* Filhos diretos de qualquer grid/flex do painel também precisam poder
   encolher — é o mesmo min-width:auto, um nível abaixo. */
.main-content > * { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. CONTEÚDO QUE É LARGO POR NATUREZA
   Aqui overflow É o comportamento esperado — mas contido no próprio elemento,
   nunca vazando pro documento.
   ═══════════════════════════════════════════════════════════════════════════ */

.table-responsive,
.scroll-x {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* não "puxa" a navegação do histórico */
}

pre, code, .code-block {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

img, video, canvas, svg, iframe {
    max-width: 100%;
}
img, video { height: auto; }

/* Caixas de pré-visualização (avatar, capa, miniatura) costumam nascer com
   largura fixa em px. Numa tela estreita — ou com zoom alto, que é o mesmo
   efeito — elas passam da borda. O teto de 100% mantém o tamanho pretendido
   quando cabe e encolhe quando não cabe. */
.pf-avatar-preview, .avatar-preview, .cover-preview, .preview-box,
.thumb, .video-thumb, .post-thumb {
    max-width: 100%;
}

/* Texto longo sem espaço (URL, e-mail, token, @ gigante) é o segundo maior
   causador de estouro — e não dá pra prever qual campo vai receber um valor
   assim, então a proteção precisa ser padrão, não opt-in.

   `break-word` no body é a rede de segurança geral: só age quando a palavra
   REALMENTE não caberia, então nada muda na renderização normal.

   `anywhere` é mais agressivo — além de quebrar a linha, entra no cálculo de
   largura MÍNIMA do elemento. Isso resolve conteúdo extremo, mas tem um efeito
   colateral sério quando a coluna é estreita: a célula aceita encolher até uma
   letra e o texto vira uma torre vertical (foi o que aconteceu na tabela de
   métricas — "SEGUIDORES" virou uma letra por linha). Por isso `anywhere` fica
   restrito a onde o valor é comprovadamente longo e sem espaço (@ de usuário,
   URL), e NUNCA em th/td genéricos: tabela estreita se resolve virando card
   (§4.7), não espremendo coluna. */
body { overflow-wrap: break-word; }

/* `anywhere` fica só no opt-in aqui fora. Ele NÃO pode valer no desktop:
   além de quebrar a linha, ele zera a largura mínima do elemento, então uma
   coluna de tabela pode encolher até uma letra — foi o que transformou
   "Publicado" em "Publica/do" e "REEL" em "REE/L" no log de atividades.
   No desktop a rede de proteção é o break-word do body, que quebra só quando
   a palavra sozinha não cabe e mantém a largura mínima intacta. A versão
   ampla de `anywhere` vive dentro do bloco mobile (§4.10), onde as tabelas
   já viraram card e a célula ocupa a linha inteira. */
.break-anywhere, .acc-username, .tk-username, [data-longtext] {
    overflow-wrap: anywhere;
}

/* Selo de status é rótulo curto: nunca quebra, em nenhuma largura. Sem isto,
   numa coluna apertada sai "Publica / do" em duas linhas. */
.badge, .lifecycle-badge, .tk-status-badge, .status-badge, .chip, .filter-chip,
.queue-status, .post-type-badge {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. EMPILHAMENTO — aplica a escala aos componentes reais
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar                       { z-index: var(--z-sidebar); }
.mobile-bottom-nav             { z-index: var(--z-bottomnav); }
body.gp-modal-open .main-content { z-index: var(--z-modal-ctx); }
.gp-modal-overlay,
.lib-modal-overlay,
.tk-modal-backdrop,
.conn-backdrop,
.scanning-overlay              { z-index: var(--z-modal); }
#accToastStack,
#tkToastStack,
.sales-toast-stack             { z-index: var(--z-toast); }

/* ═══════════════════════════════════════════════════════════════════════════
   4. MOBILE (<= 768px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {

    /* ── 4.1 Área de conteúdo ──────────────────────────────────────────────
       Um respiro lateral simétrico (antes era 12px de um lado e 16px do
       outro, o que desalinhava todo card em relação à borda da tela) e o
       respiro de baixo derivado do token da barra, não de um 84px chutado. */
    .main-content {
        margin-left: 0;
        width: 100%;
        padding-left: var(--gutter);
        padding-right: var(--gutter);
        padding-top: calc(var(--sp-5) + env(safe-area-inset-top, 0px));
        padding-bottom: calc(var(--bottomnav-space) + var(--sp-5));
    }

    /* ── 4.2 Barra inferior ────────────────────────────────────────────────
       O visual (dock flutuante, pastilha do item ativo, painel "Mais") mora no
       style.css, junto do resto da barra. Aqui fica só o que é específico de
       tela pequena: ligar o flex e fixar a altura.

       Altura FIXA e explícita — era derivada do conteúdo, então mudava de
       tamanho conforme o rótulo quebrava linha, e a página "pulava" junto. */
    .mobile-bottom-nav {
        display: flex;
        height: var(--bottomnav-h);
        align-items: stretch;
    }
    /* As regras que encolhiam a tipografia conforme o número de abas
       (`:has(a:nth-child(7))` levava o rótulo a 8px, e abaixo de 340px o texto
       sumia) foram REMOVIDAS: com 4 abas + "Mais" o rótulo cabe inteiro em
       qualquer largura suportada, então não há mais o que compensar. */

    /* ── 4.3 Alvos de toque ────────────────────────────────────────────────
       Piso de 44px em tudo que é clicável de verdade. Exclui os elementos
       que são deliberadamente pequenos (chips, badges, ícones inline) e os
       itens da própria barra, que já têm altura própria acima. */
    button, .btn, .btn-ig, .btn-primary, .btn-secondary, .btn-danger,
    input[type="submit"], input[type="button"],
    select, input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="search"],
    input[type="date"], input[type="datetime-local"] {
        min-height: var(--tap-min);
    }
    .mobile-bottom-nav a,
    .mobile-bottom-nav button,
    .filter-chip, .chip, .badge, .lifecycle-badge,
    .gp-modal-close {
        min-height: 0;
    }
    /* Controles INTERNOS de widget não entram na regra de 44px. O flatpickr
       monta o mês como <select> e o ano como <input> dentro de um cabeçalho de
       altura fixa (34px): forçar 44px neles fazia os dois transbordarem por
       cima da linha de "Dom Seg Ter…". O alvo de toque do calendário é o dia,
       tratado logo abaixo. */
    .flatpickr-calendar select,
    .flatpickr-calendar input,
    .flatpickr-monthDropdown-months,
    .numInputWrapper input {
        min-height: 0;
    }
    /* Dia do calendário com área de toque confortável. */
    .flatpickr-day { height: 40px; line-height: 40px; }
    /* Botões só de ícone precisam de largura mínima também. */
    .icon-btn, .btn-icon { min-width: var(--tap-min); }

    /* ── 4.4 Formulários ───────────────────────────────────────────────────
       16px evita o zoom automático do iOS ao focar o campo. Sem essa regra
       o zoom acontece mesmo com user-scalable=no em versões recentes. */
    input, select, textarea,
    .form-control, .form-control-modern {
        font-size: 16px;
        max-width: 100%;
    }
    /* Campo de formulário nunca deve estourar o container. */
    .form-group, .form-row, fieldset { min-width: 0; max-width: 100%; }
    textarea { resize: vertical; }

    /* ── 4.5 Modais ────────────────────────────────────────────────────────
       Cabem na tela em qualquer altura, rolam por DENTRO (não empurram o
       body) e respeitam o teclado virtual: --kb-inset é atualizado por JS a
       partir do visualViewport (ver includes/footer.php). */
    .gp-modal-overlay,
    .lib-modal-overlay,
    .tk-modal-backdrop,
    .conn-backdrop {
        padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px))
                 var(--sp-3)
                 calc(var(--sp-4) + env(safe-area-inset-bottom, 0px) + var(--kb-inset, 0px))
                 var(--sp-3);
    }
    .gp-modal {
        width: 100%;
        max-width: 100%;
        padding: var(--sp-5);
        border-radius: var(--r-lg);
        /* Rola dentro de si em vez de vazar pra fora da tela. */
        max-height: calc(100dvh - var(--sp-7) - var(--kb-inset, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* ── 4.6 Grids ─────────────────────────────────────────────────────────
       minmax(0,1fr) em vez de 1fr: `1fr` é atalho de minmax(auto,1fr), e o
       `auto` traz de volta o min-width:auto que impede a coluna de encolher.
       É a razão de grids "vazarem" mesmo com uma coluna só. */
    .grid-2, .grid-3, .grid-4,
    .dashboard-grid, .stats-row, .status-card-grid,
    .metrics-grid, .cards-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-3);
    }
    .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }

    /* ── 4.7 Tabelas ───────────────────────────────────────────────────────
       Tabela de 6 colunas não cabe em 320px de jeito nenhum. Espremer as
       colunas produz aquele texto em torre (uma letra por linha) e rolar pro
       lado esconde metade dos dados. A saída que este painel já usa em
       .premium-table/.tr-table é virar CARD: cada linha vira um bloco e cada
       célula vira "RÓTULO ......... valor" numa linha só. Fica tudo linear,
       alinhado e legível, sem arrastar pro lado.

       A tabela de métricas por conta (.pm-table) não estava recebendo esse
       tratamento — era a única ainda em formato de grade no celular. */
    table { max-width: 100%; }
    .table-responsive { overflow-x: auto; }

    .pm-table { font-size: 13px; }
    .pm-table thead { display: none; }
    .pm-table, .pm-table tbody, .pm-table tr, .pm-table td { display: block; width: 100%; }
    .pm-table tr {
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: var(--r-md);
        background: rgba(255,255,255,0.02);
        padding: var(--sp-3) var(--sp-4);
        margin-bottom: var(--sp-3);
    }
    .pm-table tr:last-child { margin-bottom: 0; }
    .pm-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        padding: 7px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        /* Cada valor numa linha só — nada de quebrar número no meio. */
        white-space: nowrap;
    }
    .pm-table td:last-child { border-bottom: none !important; }
    /* Rótulo da coluna vem do data-label do próprio <td>. */
    .pm-table td::before {
        content: attr(data-label);
        font-size: 10.5px;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--text-dim, #94a3b8);
        flex: 0 0 auto;
    }
    /* A primeira célula é o cabeçalho do card: foto + @, sem rótulo. */
    .pm-table td.pm-td-conta { justify-content: flex-start; padding-bottom: 11px !important; }
    .pm-table td.pm-td-conta::before { content: none; }
    .pm-acc-cell { min-width: 0; }
    .pm-acc-cell a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── 4.8 Cabeçalhos e barras de filtro ─────────────────────────────────
       Barras de filtro/ação viram linhas roláveis em vez de quebrarem o
       layout — o conteúdo continua todo acessível, sem estourar a tela. */
    .filter-bar, .dashboard-preset-bar, .pm-filtros, .tr-filters {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2);
        max-width: 100%;
    }
    .filter-bar > *, .dashboard-preset-bar > *, .pm-filtros > * { min-width: 0; }

    /* ── 4.9b Texto extremo ────────────────────────────────────────────────
       No celular as tabelas viram card e cada célula ocupa a linha toda, então
       `anywhere` aqui não espreme coluna nenhuma — só impede que um token sem
       espaço (URL, @ gigante) empurre a página pra fora. */
    h1, h2, h3, h4, h5, h6, p, li, label, dd, dt,
    span, a, strong, em, small, figcaption, legend, summary {
        overflow-wrap: anywhere;
    }
    /* ── 4.9 Estabilidade visual ───────────────────────────────────────────
       Reserva de espaço pra mídia antes de carregar, pra página não "pular"
       quando a imagem chega (layout shift). */
    .thumb, .video-thumb, .post-thumb, .acc-avatar, .avatar {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        background: rgba(255,255,255,0.04);
    }
    .reel-cover, .cover-preview { aspect-ratio: 9 / 16; object-fit: cover; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. PAISAGEM em telas baixas — a barra inferior come metade da tela
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    /* Em paisagem sobra pouca altura: dock mais baixo, só ícone. */
    :root { --bottomnav-h: 46px; --bottomnav-gap: 6px; }
    .mobile-bottom-nav .mn-txt { display: none; }
    .mobile-bottom-nav .mn-ico { width: 38px; height: 32px; }
    .mobile-bottom-nav.mn-muitos .mn-ico { max-width: 40px; height: 34px; }
    .mobile-bottom-nav .mn-ico svg { width: 19px; height: 19px; }

    .main-content { padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px)); }
    .gp-modal { max-height: calc(100dvh - var(--sp-4) - var(--kb-inset, 0px)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. Movimento reduzido — respeita a preferência do sistema
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}