/* Consertos de celular que valem para o sistema todo (09/10/2026)
   ===========================================================================
   Esta folha é só para CAUSA COMUM — um conserto que resolve muitas telas de
   uma vez. Conserto de uma tela só vai na folha dela. Tudo aqui está dentro
   de `@media (max-width: 767.98px)`: no computador nenhuma regra se aplica.

   Medição que motivou (prévia local, 254 telas, 390 e 360px de largura):
   78 telas com tabela rolando de lado dentro da página, 88 botões cortados
   com reticências na lista de Usuários, nomes cortados em 20 listas.
   =========================================================================== */

/* 1. Tabela vira ficha no celular
   ---------------------------------------------------------------------------
   Par de `static/js/tabela-celular.js`, que marca a tabela com `.tc-ficha` e
   copia o cabeçalho para o `data-rotulo` de cada célula.

   Por quê: no telefone toda tabela dentro de `.table-responsive` rolava de
   lado dentro da página — a coluna de Ações e os valores ficavam escondidos à
   direita. Rolagem lateral foi recusada como solução; o padrão aprovado é o
   do Dedo-duro e das Notas Espião: cada linha vira uma ficha, cada valor com
   o rótulo da coluna ao lado.

   Só abaixo de 768px. No computador nenhuma regra daqui se aplica.

   Rótulo à esquerda (float) e valor alinhado à direita: funciona com qualquer
   conteúdo de célula (texto, selo, link, vários elementos, <br>) sem depender
   de flex — em flex cada pedaço de texto da célula virava uma coluna.

   Os `!important` daqui empatam com os do bloco de celular do `base.html`
   (`.table tbody td { padding ... !important }`), que senão daria a cada
   valor da ficha o espaçamento de uma linha de tabela inteira. */
@media (max-width: 767.98px) {
    :is(div, section, article):has(> table.tc-ficha) {
        overflow: visible;
    }

    .table-responsive:has(> table.tc-ficha) {
        overflow: visible;
        margin-left: 0;
        margin-right: 0;
        width: auto;
    }

    table.tc-ficha,
    table.tc-ficha > tbody,
    table.tc-ficha > tfoot,
    table.tc-ficha > tbody > tr,
    table.tc-ficha > tfoot > tr {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    table.tc-ficha {
        table-layout: auto;
    }

    table.tc-ficha > thead {
        display: none;
    }

    table.tc-ficha > tbody > tr,
    table.tc-ficha > tfoot > tr {
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid var(--as-line-soft);
    }

    table.tc-ficha > tbody > tr > td,
    table.tc-ficha > tbody > tr > th,
    table.tc-ficha > tfoot > tr > td,
    table.tc-ficha > tfoot > tr > th {
        /* flow-root, e não block: a célula precisa CONTER o rótulo flutuante.
           Com block, o rótulo de uma linha baixa vazava para a de baixo e
           empurrava o rótulo seguinte para o meio da ficha. */
        display: flow-root;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0.18rem 0 !important;
        border: 0 !important;
        text-align: right;
        white-space: normal !important;
        overflow-wrap: anywhere;
        position: static !important;
    }

    table.tc-ficha > tbody > tr > td:empty,
    table.tc-ficha > tfoot > tr > td:empty {
        display: none;
    }

    table.tc-ficha > tbody > tr > [data-rotulo]::before,
    table.tc-ficha > tfoot > tr > [data-rotulo]::before {
        content: attr(data-rotulo);
        float: left;
        max-width: 48%;
        margin-right: 0.75rem;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1.9;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-align: left;
        color: var(--as-muted-2);
    }

    /* Célula sem rótulo (coluna de seleção, de ações, linha de grupo, estado
       vazio com colspan): ocupa a ficha inteira, alinhada à esquerda. */
    table.tc-ficha > tbody > tr > td:not([data-rotulo]),
    table.tc-ficha > tfoot > tr > td:not([data-rotulo]),
    table.tc-ficha > tbody > tr > td[colspan] {
        text-align: left;
    }

    /* Conteúdo de largura fixa dentro da célula não pode empurrar a ficha. */
    table.tc-ficha td > *,
    table.tc-ficha th > * {
        max-width: 100%;
    }

    /* dentro da ficha sobra altura: nada corta com reticências */
    table.tc-ficha td .text-truncate,
    table.tc-ficha td [class*="trunc"],
    table.tc-ficha td[class*="trunc"],
    table.tc-ficha td [class*="nome"],
    table.tc-ficha td [class*="desc"] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Grupos de botões da linha quebram em vez de vazar. */
    table.tc-ficha td .btn-group,
    table.tc-ficha td .d-flex {
        flex-wrap: wrap;
    }

    table.tc-ficha td[data-rotulo] > .d-flex,
    table.tc-ficha td[data-rotulo] > .btn-group {
        justify-content: flex-end;
    }

    table.tc-ficha td .form-control,
    table.tc-ficha td .form-select {
        width: 100%;
    }
}

/* 2. Texto que corta com reticências vira texto que quebra linha
   ---------------------------------------------------------------------------
   As listas novas têm uma classe `<prefixo>-corta` (pol-corta, fol-corta,
   tfl-corta...) que corta nome de fornecedor, número e subtítulo numa linha
   só, com reticências. No computador é o desenho aprovado (coluna de largura
   fixa). No celular a linha vira ficha e sobra altura, mas não largura: o
   "WCT 2010 MATERIAIS ELETRICOS LTDA" saía "WCT 2010 MATERIAIS ELE…".
   Aqui ele quebra linha. O `[class]` repetido só dá peso para vencer a
   regra da folha da tela, que carrega depois desta. */
@media (max-width: 767.98px) {
    [class$="-corta"][class],
    [class*="-corta "][class],
    .trunca[class],
    .dash-trunc[class],
    .badge,
    .ctf-faixa-obra__nome[class],
    .ctf-faixa-obra__sub[class],
    .ctf-alerta-n__d[class],
    .tabela-financeiro__fornecedor,
    .tabela-financeiro__descricao {
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }
}

/* 3. Botões da linha descem para baixo do nome
   ---------------------------------------------------------------------------
   As listas no visual da Central de TF (Fornecedores, Pedidos, TFs...) usam
   uma grade cuja última coluna é `.nfl-acoes`. No celular a grade fica com
   duas colunas — conteúdo e ações — e, quando há mais de um botão ("Ver",
   "Editar", "⋯" = ~190px), o nome do fornecedor ficava com 59px: "OLIVE…".
   O conserto que a lista de Usuários já fazia (listas-simples.css) vale para
   todas: as ações ganham uma linha própria embaixo do conteúdo. A NF de
   Entrada (`.nfl-linha`) tem arrumação própria em nf-entrada-lista.css. */
@media (max-width: 767.98px) {
    :is(div, a, li, article):not(.nfl-linha):has(> .nfl-acoes:last-child > :nth-child(2)) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px;
    }
    .nfl-acoes:last-child:has(> :nth-child(2)) {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .nfl-acoes:last-child:has(> :nth-child(2)) > details:last-child {
        margin-left: auto;
    }
}

/* 4. Faixa de fases (os números por situação no topo das listas)
   ---------------------------------------------------------------------------
   `.nfl-fases` já virava uma coluna só em tela pequena, mas cada lista declara
   as SUAS colunas (`.tfl-fases` 6, `.rgl-fases` 7, `.orl-fases` 4...) numa
   folha que carrega depois e vencia: no celular eram 4 a 7 colunas de ~50px,
   com "Pendente de Aprovação" por cima do número e da linha de baixo.
   Aqui: duas colunas no celular. `[class]` dá o peso para vencer a folha da
   tela; `grid-auto-flow: row` desfaz as que usam fluxo por coluna. */
@media (max-width: 767.98px) {
    .nfl-fases[class],
    .ctf-fases[class] {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .nfl-fases[class] > .nfl-fase,
    .ctf-fases[class] > * {
        min-width: 0;
        overflow-wrap: anywhere;
        border-bottom: 1px solid var(--bs-border-color);
    }
}

/* 5. Abas e trilhas que rolavam de lado
   ---------------------------------------------------------------------------
   As abas de obra da Central de TF (`.ctf-abas`), as abas da ficha do
   funcionário (`.ped-banda`) e a trilha de 10 passos da Mobilização
   (`.mob-trilha`) tinham `overflow-x: auto`: no celular viravam uma fita de
   ~900px rolando de lado, com a maior parte das abas fora de vista. Aqui elas
   quebram linha. */
@media (max-width: 767.98px) {
    .ctf-abas[class],
    .ped-banda[class],
    .mob-trilha[class] {
        flex-wrap: wrap;
        overflow: visible;
        row-gap: 4px;
    }
    .ctf-abas[class] > .ctf-aba {
        white-space: normal;
    }
    /* quatro passos por linha: com cinco, "Apresentação" partia no meio */
    .mob-trilha[class] > .mob-passo {
        flex: 1 0 25%;
        min-width: 0;
        margin-bottom: 8px;
        overflow-wrap: break-word;
    }
}

/* 6. Grupos de botões e campos de largura própria
   ---------------------------------------------------------------------------
   Um `.btn-group` não quebra linha: três opções ("Aérea (eletrocalha)",
   "Subterrânea", "Eletroduto") somavam 430px num cabeçalho de 350. E campo
   com `.w-auto` cresce até o texto da opção mais longa. Em lista com
   botão `.flex-shrink-0` ao lado, o texto vizinho precisa poder encolher. */
@media (max-width: 767.98px) {
    .card-header .btn-group,
    .card-header .d-flex,
    .page-header .btn-group {
        flex-wrap: wrap;
        min-width: 0;
    }
    .card-header > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .form-select.w-auto,
    .form-control.w-auto {
        max-width: 100%;
    }
    .list-group-item.d-flex > :not(.flex-shrink-0) {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}