/* ═══════════════════════════════════════════════════════════════════════════
   GDI ONLine — camada MOBILE (celular / PWA)
   ───────────────────────────────────────────────────────────────────────────
   Carregada DEPOIS do bloco `estilos` de cada tela (ver base.html), então
   ganha dos <style> locais no empate de especificidade. Tudo aqui vive dentro
   de media query: em desktop este arquivo é inerte.

   Trabalha junto com static/js/gdi-mobile.js, que marca o DOM:
     - table.gdi-m-cards  + td[data-label]  → grade vira cartão
     - .gdi-chart-scroll  + --svgw          → gráfico rola em vez de encolher
     - [data-gdi-1col]                      → grid que estourava a largura

   Corte em 760px: acima disso o layout de tablet/desktop já se vira.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {

  /* ── 0. Quem rola é a PÁGINA, não uma caixa interna ──────────────────────
     No desktop o GDI é um app-shell: `.gdi-shell` e `.gdi-main` têm
     height:100vh e só o `.gdi-content` rola por dentro. No celular isso dá
     três problemas: (a) 100vh conta a faixa embaixo da barra do navegador,
     então o rodapé nasce fora da tela; (b) a barra de endereço nunca recolhe,
     porque quem rola é uma caixa interna; (c) o "voltar ao topo" do sistema
     não funciona. Aqui a página volta a rolar inteira, com o topo grudado. */
  .gdi-shell {
    height: auto; min-height: 100dvh;
    overflow: visible; grid-template-columns: 1fr;
  }
  .gdi-main {
    height: auto; min-height: 100dvh;
    grid-template-rows: auto 1fr auto;
  }
  .gdi-content { overflow: visible; }
  .gdi-topbar { position: sticky; top: 0; z-index: 30; }

  /* ── 1. Nada pode empurrar a página para os lados ────────────────────────
     O sintoma clássico no celular é a página inteira deslizando na
     horizontal porque UM elemento é mais largo que a tela. */
  .gdi-content { padding: 12px; min-width: 0; }
  .gdi-card { min-width: 0; }
  .gdi-card__body { padding: 12px; }
  img, svg, video, canvas, table { max-width: 100%; }

  /* grids que o JS detectou estourando a largura (min-track maior que a tela) */
  [data-gdi-1col] { grid-template-columns: 1fr !important; }

  /* grids conhecidos das telas densas */
  .cards, .par, .trio, .grafleg, .pn-charts, .jf-grid,
  .grid3, .det-grid, .dm-grid, .mod-grid { grid-template-columns: 1fr !important; }
  /* KPI em 2 colunas: 6 indicadores empilhados viravam meio metro de rolagem */
  .kpis, .kpis.k4, .kpis.k5, .kpis7, .trim {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .kpi { padding: 10px !important; }
  .kpi__v { font-size: 19px !important; }
  .kpi__r, .kpi__rt { font-size: 10px !important; }
  .kpi__s { font-size: 10.5px !important; }
  .jf-grid .jf-col-2, .jf-grid .jf-col-all { grid-column: 1 / -1; }

  /* ── 1b. Abas do Dashboard ────────────────────────────────────────────
     São 6 abas numa barra flex: no celular elas estouram a linha e sobrava
     um vazio à direita, obrigando a arrastar. Agora a barra rola sozinha,
     as abas encolhem e a ativa é centralizada pelo JS ao abrir a tela. */
  .abas {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 2px !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* sangra até a borda da tela para não sobrar faixa morta dos lados */
    margin-left: -12px; margin-right: -12px;
    padding-left: 12px; padding-right: 12px;
  }
  .abas::-webkit-scrollbar { display: none; }
  .aba {
    flex: 0 0 auto;
    padding: 9px 13px 8px !important;
    font-size: 13px !important;
    gap: 6px !important;
    white-space: nowrap;
  }
  .aba i { font-size: 16px !important; }
  /* dica de que a barra continua: sombra na borda direita enquanto houver rolagem */
  .abas[data-rola="1"] {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }

  /* ── 2. Cabeçalho e navegação ────────────────────────────────────────── */
  .gdi-topbar__heading h1 { font-size: 15px; line-height: 1.2; }
  .gdi-topbar__sub { display: none; }          /* subtítulo não cabe */
  .gdi-steps { overflow-x: auto; padding-bottom: 4px; }
  .gdi-steps::-webkit-scrollbar { height: 0; }

  /* ── 3. Campos: alvo de toque de 44px e zero zoom no iOS ──────────────
     Abaixo de 16px o Safari dá zoom sozinho ao focar o campo — e a tela
     nunca mais volta ao lugar. */
  .jf-inp, .gcb-ctl, input[type="text"], input[type="date"],
  input[type="number"], input[type="password"], input[type="email"], select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  .jf-group .gdi-btn { min-width: 44px; min-height: 44px; }
  .gdi-card__foot, .gdi-card__foot--wide { flex-wrap: wrap; gap: 8px; }
  .gdi-card__foot .gdi-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .gdi-orient { flex-wrap: wrap; }

  /* ── 4. Gráficos: rolam na horizontal em vez de encolher ──────────────
     Os SVG saem do Python com viewBox fixo e width="100%". Numa tela de
     390px o navegador reduz TUDO na mesma proporção e a fonte de 9,5px
     do rótulo vira 5px — ilegível. Aqui o SVG volta ao tamanho natural
     (--svgw, posto pelo JS a partir do viewBox) e quem rola é o pai. */
  .gdi-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .gdi-chart-scroll > svg { min-width: var(--svgw, 100%); display: block; }
  /* aviso "arraste para o lado", some depois do primeiro toque */
  .gdi-chart-scroll[data-rolavel]::after {
    content: "← arraste para ver o restante →";
    display: block; text-align: center; font-size: 10.5px;
    color: var(--gdi-ink-mute); padding: 2px 0 4px; position: sticky; left: 0;
  }
  .gdi-chart-scroll[data-rolavel="usado"]::after { content: none; }
  .grafleg .legv { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; }

  /* ── 5. GRADE → CARTÃO ────────────────────────────────────────────────
     A tabela vira uma pilha de cartões: 1ª coluna é o título, as demais
     viram "rótulo ....... valor". O rótulo vem do <th> correspondente,
     copiado para data-label pelo JS (nenhum template precisou mudar). */
  .gr-wrap, .gridwrap, .fr-gridwrap, .pl-gridwrap, .rz-wrap, .det-wrap,
  .gdi-table-scroll {
    max-height: none !important;            /* o scroll passa a ser o da página */
    overflow: visible !important;
  }

  table.gdi-m-cards {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse;
    display: block;
    font-size: 13.5px;
  }
  table.gdi-m-cards > thead { display: none; }
  table.gdi-m-cards > tbody, table.gdi-m-cards > tfoot { display: block; width: 100%; }

  table.gdi-m-cards > tbody > tr {
    display: block;
    background: var(--gdi-surface, #fff);
    border: 1px solid var(--gdi-line, #e6ebf1);
    border-left: 3px solid var(--gdi-action, #1E5AA8);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 0 0 10px;
    box-shadow: 0 1px 2px rgba(14, 34, 51, .06);
  }
  table.gdi-m-cards > tbody > tr:hover td { background: transparent; }

  table.gdi-m-cards > tbody > tr > td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    height: auto !important; padding: 3px 0 !important;
    border: 0 !important; text-align: right !important;
    white-space: normal !important; word-break: break-word;
  }
  table.gdi-m-cards > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 40%; text-align: left;
    color: var(--gdi-ink-mute, #7C8B9B); font-weight: 600;
    font-size: 11px; text-transform: uppercase; letter-spacing: .02em;
    white-space: normal;
  }

  /* 1ª coluna = título do cartão (sem rótulo, fonte maior) */
  table.gdi-m-cards > tbody > tr > td.gdi-m-title {
    display: block; text-align: left !important;
    font-size: 15px; font-weight: 600; color: var(--gdi-ink, #152332);
    padding: 0 0 7px !important; margin-bottom: 7px;
    border-bottom: 1px dashed var(--gdi-line, #e6ebf1) !important;
  }
  table.gdi-m-cards > tbody > tr > td.gdi-m-title::before { content: none; }

  /* célula sem conteúdo não vira linha morta no cartão */
  table.gdi-m-cards > tbody > tr > td.gdi-m-empty { display: none; }

  /* linha de total, de aviso ou com colspan ocupa o cartão inteiro */
  table.gdi-m-cards > tbody > tr.gdi-m-full { border-left-color: var(--gdi-ink-mute); }
  table.gdi-m-cards > tbody > tr.gdi-m-full > td { display: block; text-align: center !important; }
  table.gdi-m-cards > tbody > tr.gdi-m-full > td::before { content: none; }

  /* rodapé de totais: cartão destacado, fixo no fim da lista */
  table.gdi-m-cards > tfoot > tr {
    display: block; background: var(--gdi-surface-3, #f4f7fa);
    border: 1px solid var(--gdi-line, #e6ebf1); border-radius: 12px;
    padding: 10px 12px; margin-top: 4px; font-weight: 600;
  }
  table.gdi-m-cards > tfoot > tr > td {
    display: flex; justify-content: space-between; gap: 10px;
    position: static !important;               /* solta o sticky do desktop */
    border: 0 !important; padding: 3px 0 !important;
    text-align: right !important; white-space: normal !important;
  }
  table.gdi-m-cards > tfoot > tr > td::before {
    content: attr(data-label); flex: 0 0 40%; text-align: left;
    color: var(--gdi-ink-mute); font-size: 11px; text-transform: uppercase;
  }
  table.gdi-m-cards > tfoot > tr > td.gdi-m-empty { display: none; }
  /* "TOTAL" é o título do cartão de rodapé, não um par rótulo/valor */
  table.gdi-m-cards > tfoot > tr > td.gdi-m-title {
    display: block; text-align: left !important; font-size: 13px;
    text-transform: uppercase; letter-spacing: .04em; color: var(--gdi-ink-soft);
    padding: 0 0 6px !important; margin-bottom: 6px;
    border-bottom: 1px dashed var(--gdi-line) !important;
  }
  table.gdi-m-cards > tfoot > tr > td.gdi-m-title::before { content: none; }

  /* a linha continua clicável (as grades do GDI abrem detalhe no clique) */
  table.gdi-m-cards > tbody > tr[onclick],
  table.gdi-m-cards > tbody > tr.clicavel { cursor: pointer; }
  table.gdi-m-cards > tbody > tr[onclick]:active { background: var(--gdi-action-soft, #eaf1fa); }

  /* dica de que dá para tocar na linha */
  .gdi-m-dica { font-size: 11.5px; color: var(--gdi-ink-mute); margin: 0 0 8px; }

  /* ── 5b. Aba Recursos Humanos ─────────────────────────────────────────
     Cartões de situação em 2 colunas (são 5, empilhados viravam uma tira
     longa) e os blocos de duas colunas viram um. */
  .rh-sit { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .rh-sit__c { padding: 10px !important; }
  .rh-sit__v { font-size: 20px !important; }
  .rh-sit__s { font-size: 10.5px; }
  .rh-dupla { grid-template-columns: 1fr !important; }
  .rh-rosca { flex-direction: column; align-items: flex-start; }
  .rh-sem__l { align-items: flex-start; gap: 6px; }
  .rh-sem__m { min-width: 100%; }          /* o mês em cima, os roteiros abaixo */
  .rh-tab { overflow-x: visible; }         /* quem cuida da largura é o cartão */

  /* ── 6. Paginação e barras de ação ────────────────────────────────────── */
  .dg-info, .pager, .pg { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .dg-info select { min-height: 36px; }

  /* rodapé de ações dentro de cortina (PDF/XLSX do detalhe): a informação vai
     para uma linha própria e os botões dividem a largura */
  .dm-modal-ft { padding: 10px 12px !important; }
  .dm-modal-ft .ft-info { flex: 1 0 100%; margin: 0 0 4px !important; }
  .dm-modal-ft .gdi-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }

  /* ── 7. Cortinas e modais ocupam a tela toda ──────────────────────────── */
  .gk-curtain, .gc-curtain, .gp-curtain,
  [class$="-curtain"], [class*="-curtain "] { width: 100vw !important; }
  .gdi-modal, .modal-card, .ov-box { width: min(94vw, 460px) !important; }

  /* ── 8. Rodapé enxuto ─────────────────────────────────────────────────── */
  .gdi-statusbar { font-size: 10.5px; gap: 8px; flex-wrap: wrap; height: auto; padding: 6px 10px; }
  .gdi-statusbar__ip, .gdi-statusbar__copy { display: none; }
}

/* Telas MUITO estreitas (≤ 340px, tipo Galaxy A0x): aí sim uma coluna só */
@media (max-width: 340px) {
  .kpis, .kpis.k4, .kpis.k5, .kpis7, .trim { grid-template-columns: 1fr !important; }
  table.gdi-m-cards > tbody > tr > td::before { flex-basis: 45%; }
}