/**
 * mobile-tabela-cartao.css — [R572] O QUE FAZIA O APP SER "UMA BAGUNÇA" NO CELULAR
 *
 * Dono (2026-08-03): "preciso desse sistema na palma da mão, rodando 100% em
 * telefone e tablet. Há inúmeros apps que funcionam certinho, por que esse nosso
 * não? Preciso cadastrar cliente, acessar agendamento, gerar orçamento."
 *
 * ═══ MEDIDO, NÃO SUPOSTO (375 px, logado, com dado dentro) ═══
 *
 * O esqueleto estava certo: nenhuma página rola para o lado, nenhum botão menor
 * que o alvo do dedo, formulários inteiros cabendo. O que quebrava era outra coisa:
 *
 *   tabela de inspeções .... 967 px numa tela de 375
 *   tabela do dashboard .... 818 px
 *   tabela de clientes ..... 547 px
 *   tabela de orçamentos ... 441 px
 *
 * Elas ficavam dentro de um container com rolagem, então a PÁGINA não quebrava —
 * mas ler uma tabela de 8 colunas empurrando o dedo para o lado é o que dá a
 * sensação de "tudo errado, tudo desorganizado". Rolagem horizontal salva o
 * layout e não salva o uso.
 *
 * ═══ O QUE OS APPS QUE FUNCIONAM FAZEM ═══
 *
 * Eles não encolhem a tabela: eles TROCAM a tabela por cartões. Cada linha vira um
 * bloco, e cada célula ganha o nome da coluna ao lado. Nada some, nada encolhe,
 * nada exige empurrar para o lado.
 *
 * O rótulo vem de `data-label`, carimbado em tempo de execução por
 * js/core/mobile-tabelas.js — lendo o próprio <thead>. Assim vale para as tabelas
 * de hoje e para as que ainda vão nascer, sem editar HTML nenhum.
 *
 * ACIMA DE 900 px NADA MUDA ([R939]: era 640 — o tablet retrato ficava com a
 * tabela espremida do desktop; cartão agora cobre celular E tablet em pé; o
 * checklist (R581) e a pílula (R913) continuam só no celular, 640).
 */

@media (max-width: 900px) {  /* [R939] cartão também no TABLET retrato — dono 25/08: "módulo cliente no tablet não está legal" (tabela desktop espremida a 768px) */

    /* ── 1. TABELA VIRA CARTÃO ──────────────────────────────────────────────
       Só entra quando o JS conseguiu carimbar os rótulos (`data-mob="cartao"`).
       Sem isso a tabela ficaria sem cabeçalho e ilegível — pior que o problema. */
    table[data-mob="cartao"],
    table[data-mob="cartao"] tbody,
    table[data-mob="cartao"] tr,
    table[data-mob="cartao"] td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    table[data-mob="cartao"] thead { display: none; }

    table[data-mob="cartao"] tr {
        margin-bottom: 10px;
        padding: 12px 14px;
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: 12px;
        background: rgba(255, 255, 255, .035);
    }

    table[data-mob="cartao"] td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 6px 0;
        border: none;
        text-align: left !important;
        white-space: normal !important;   /* nowrap era o que esticava a linha */
        word-break: break-word;
    }

    table[data-mob="cartao"] td + td { border-top: 1px solid rgba(255, 255, 255, .05); }

    /* o nome da coluna, à esquerda; o valor, à direita — como num cartão */
    table[data-mob="cartao"] td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .2px;
        text-transform: uppercase;
        color: #94a3b8;
    }

    /* célula sem rótulo (coluna de ações) ocupa a linha inteira */
    table[data-mob="cartao"] td[data-label=""]::before { display: none; }
    table[data-mob="cartao"] td[data-label=""] {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
    }

    /* linha de "nenhum registro" não vira cartão de um campo só */
    table[data-mob="cartao"] td[colspan]::before { display: none; }
    table[data-mob="cartao"] td[colspan] { justify-content: center; text-align: center !important; }

    body.tema-claro table[data-mob="cartao"] tr {
        background: rgba(15, 23, 42, .03);
        border-color: rgba(15, 23, 42, .10);
    }
    body.tema-claro table[data-mob="cartao"] td + td { border-top-color: rgba(15, 23, 42, .07); }
    body.tema-claro table[data-mob="cartao"] td::before { color: #64748b; }

    /* ── 2. BARRA DE ABAS QUE NÃO SE ALCANÇAVA ──────────────────────────────
       "BI", "Linha do Tempo" e "Extrato" ficavam fora da tela, sem jeito de
       chegar neles: o container não rolava e as abas não quebravam linha. */
    /* [R572] O financeiro monta a barra num <div> SEM classe e SEM id — não dava
       para alcançá-la por seletor. Em vez de inventar um nome que só o CSS conhece
       (e que a próxima tela não teria), a regra pega qualquer faixa horizontal de
       botões de aba: `:has()` é suportado por todos os navegadores de celular
       atuais, e o `.page >` mantém o alcance curto, sem varrer a página inteira. */
    .page > div:has(> button[id^="tab-btn-"]),
    .page > div:has(> button[id^="db-tab-"]),
    .segmented-toggle,
    #inspection-tabs-container,
    .fin-tabs,
    .tabs-container {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        max-width: 100%;
        padding-bottom: 2px;
    }
    .page > div:has(> button[id^="tab-btn-"])::-webkit-scrollbar,
    .page > div:has(> button[id^="db-tab-"])::-webkit-scrollbar,
    .segmented-toggle::-webkit-scrollbar,
    #inspection-tabs-container::-webkit-scrollbar,
    .fin-tabs::-webkit-scrollbar,
    .tabs-container::-webkit-scrollbar { display: none; }

    .page > div:has(> button[id^="tab-btn-"]) > *,
    .page > div:has(> button[id^="db-tab-"]) > *,
    .segmented-toggle > *,
    #inspection-tabs-container > *,
    .fin-tabs > *,
    .tabs-container > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* ── 3. O IPHONE DAVA ZOOM SOZINHO ──────────────────────────────────────
       15 dos 16 campos do wizard tinham fonte < 16px. O iOS reage a isso dando
       zoom ao focar: o dono toca no campo e a tela salta e sai do lugar. É a
       irritação mais cara no campo, e some com uma linha. 16px é o limiar da
       Apple — não é escolha estética. */
    /* [R572] `body .page` não é firula de especificidade: é o que faz a regra VALER.
       O premium-theme.css tem `.page select { font-size: .9rem !important }` — e o
       `mobile-responsive.css` já tentava 16px num seletor `select` pelado, com
       !important. Os dois são !important, então quem decide é a especificidade:
       `.page select` (0,1,1) vence `select` (0,0,1). A regra de 16px existia havia
       meses e NUNCA teve efeito — era por isso que 15 dos 16 campos do wizard ainda
       faziam o iPhone dar zoom. `body .page select` (0,1,2) passa na frente. */
    body .page input:not([type="checkbox"]):not([type="radio"]),
    body .page select,
    body .page textarea,
    body .modal input:not([type="checkbox"]):not([type="radio"]),
    body .modal select,
    body .modal textarea,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    /* [R572] O select de ordenação dos orçamentos era espremido a 34 px de largura —
       cabia na tela, mas não dava para ler o que estava selecionado. A causa não era
       o select: era a linha de filtros com `flex-wrap: nowrap`, que preferia esmagar
       o campo a quebrar a linha. No celular a linha quebra; a largura volta. */
    .page div:has(> select) { flex-wrap: wrap !important; }
    select { width: 100%; min-width: 0; box-sizing: border-box; }
}

@media (max-width: 640px) {
    /* ── [R581] CHECKLIST NO CELULAR ─────────────────────────────────────────
       Medido no passo 3 do wizard a 375px: a linha do item (texto + botões
       C/NC/NA/NI) ia até right=440 — 65px para fora da tela, sem rolagem.
       O texto e os botões disputavam UMA linha em nowrap. No celular a linha
       QUEBRA: pergunta em cima, botões de resposta embaixo, à esquerda. */
    .checklist-item { flex-wrap: wrap !important; }
    .checklist-item .item-info { flex: 1 1 100%; min-width: 0; }
    .checklist-item .item-texto,
    .checklist-item .item-fonte { white-space: normal !important; word-break: break-word; }
    .checklist-item .checklist-options {
        width: 100%;
        justify-content: flex-start;
        margin-top: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [R911] O DESASTRE DO CELULAR — prints do dono (24/08, iPhone 375px)
   Três mecanismos, cada um com a sua cura. Nada aqui toca o desktop.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {  /* [R939] cartão também no TABLET retrato — dono 25/08: "módulo cliente no tablet não está legal" (tabela desktop espremida a 768px) */
    /* ── 1. BOTÃO NUNCA VIRA TORRE DE LETRAS ─────────────────────────────
       Medido: 8 botões em 19×85px ("La ud o", "W PP") — o flex do cartão
       espremia os botões da célula de ações até uma letra por linha. */
    table[data-mob="cartao"] td button,
    table[data-mob="cartao"] td .btn,
    table[data-mob="cartao"] td a[onclick] {
        flex: 0 0 auto;
        white-space: nowrap;
        writing-mode: horizontal-tb;
        min-height: 40px;               /* alvo do dedo (CHECK 49) */
        min-width: 40px;                /* iconezinho de 19px nao e alvo de dedo */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* célula que só tem ações (rótulo vazio OU sem rótulo): fileira que quebra */
    table[data-mob="cartao"] td:not([data-label]),
    table[data-mob="cartao"] td[data-label=""] {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }
    /* cartao nunca estica alem da tela: conteudo longo quebra dentro dele */
    table[data-mob="cartao"],
    table[data-mob="cartao"] tr,
    table[data-mob="cartao"] td {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* ── 2. SELOS FLUTUANTES ACIMA DA BARRA, NUNCA EM CIMA DE BOTÃO ──────
       "Robô na frente de botões" (dono): o chip do robô (bottom:50) e o selo
       Sincronizado (bottom:16) caíam SOBRE a bottom-nav de 64px. Sobem para
       cima da barra, empilhados, menores — informam sem tampar. */
    #sync-status-container {
        bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
        right: 8px !important;
        transform: scale(.86);
        transform-origin: bottom right;
    }
    #robo-status-chip {
        bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
        right: 8px !important;
        transform: scale(.86);
        transform-origin: bottom right;
    }
}

@media (max-width: 900px) {  /* [R939] cartão também no TABLET retrato — dono 25/08: "módulo cliente no tablet não está legal" (tabela desktop espremida a 768px) */
    /* [R912] prints do dono 20:27 — os 3 resíduos do cartão:
       1. célula de AÇÕES não quebrava linha → botão "Laudo" cortado na borda;
       2. célula vazia virava linha em branco (NOTIFICADO/DATA AVISO ocos);
       3. checkbox com width INLINE de 15px vencia a regra de 22px. */
    table[data-mob="cartao"] td {
        flex-wrap: wrap;
        row-gap: 4px;
    }
    table[data-mob="cartao"] td[data-vazio="1"] { display: none; }
    table[data-mob="cartao"] input[type="checkbox"],
    table[data-mob="cartao"] input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [R913] LISTA NAS 4 TELAS DE CAMPO — inspeções, clientes, orçamentos e
   certificados ("só essas que uso em campo", dono 25/08).
   Medido a 375px: cartão = 482px/registro (1,5 por tela). Lista ≈ 110px.
   Nada some: o secundário fica atrás do "⌄" e volta COM rótulo.
   Atenção: a base do cartão dá `width:100%` a toda célula — as três que
   dividem a linha precisam de `width:auto`, senão cada uma toma a linha
   inteira e a lista não economiza nada (medido: 534px, pior que o cartão).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {  /* [R939] cartão também no TABLET retrato — dono 25/08: "módulo cliente no tablet não está legal" (tabela desktop espremida a 768px) */
    /* a base do cartão dá altura mínima de linha a cada célula (44px+): na lista
       isso vira 5 linhas de ar por registro. Aqui a altura é do conteúdo. */
    table[data-mob-lista="1"] td[data-papel] {
        min-height: 0 !important;
        line-height: 1.35 !important;
    }
    table[data-mob-lista="1"] tr[data-lista] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 8px;
        padding: 12px 14px !important;
    }
    /* TÍTULO — o que o dedo procura: cliente, aluno, equipamento */
    table[data-mob-lista="1"] td[data-papel="titulo"] {
        order: 1;
        flex: 1 1 60%;
        width: auto;
        font-size: .95rem !important;
        font-weight: 700;
        padding: 0 !important;
        border: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }
    /* STATUS — vencimento/valor/saúde: à direita, na linha do título */
    table[data-mob-lista="1"] td[data-papel="status"] {
        order: 2;
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
        text-align: right;
        font-size: .84rem !important;
        font-weight: 600;
        padding: 0 !important;
        border: 0;
    }
    /* SECUNDÁRIO — linha fraca embaixo, sem rótulo, separado por ponto */
    table[data-mob-lista="1"] td[data-papel="sub"] {
        order: 3;
        flex: 0 1 auto;
        width: auto;
        font-size: .76rem !important;
        opacity: .68;
        padding: 0 !important;
        border: 0;
    }
    table[data-mob-lista="1"] td[data-papel="sub"]:not(:last-of-type)::after {
        content: " ·";
        opacity: .5;
    }
    /* AÇÕES — fileira própria embaixo, botões de dedo */
    table[data-mob-lista="1"] td[data-papel="acao"] {
        order: 4;
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        padding: 6px 0 0 0 !important;
        border: 0;
        margin-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }
    /* na lista o rótulo cala: o valor fala por si (o "⌄" devolve os nomes) */
    table[data-mob-lista="1"] td[data-papel="titulo"]::before,
    table[data-mob-lista="1"] td[data-papel="status"]::before,
    table[data-mob-lista="1"] td[data-papel="sub"]::before,
    table[data-mob-lista="1"] td[data-papel="acao"]::before { display: none; }

    /* SECUNDÁRIO ESCONDIDO — volta com rótulo quando a linha abre */
    table[data-mob-lista="1"] td[data-papel="extra"] { display: none; }
    table[data-mob-lista="1"] tr.mob-aberta td[data-papel="extra"] {
        display: flex;
        order: 5;
        flex: 1 1 100%;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .05);
        font-size: .82rem !important;
    }
    table[data-mob-lista="1"] tr.mob-aberta td[data-papel="extra"][data-vazio="1"] { display: none; }
    table[data-mob-lista="1"] tr.mob-aberta td[data-papel="extra"]::before {
        display: block;
        font-size: .68rem !important;
        font-weight: 700;
        text-transform: uppercase;
        opacity: .6;
    }

    /* o "⌄" — botão próprio, alvo de dedo, nunca rouba o clique da linha */
    .mob-mais {
        flex: 0 0 auto;
        min-width: 40px;
        min-height: 40px !important;
        margin-left: auto;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 10px;
        color: inherit;
        font-size: 1rem !important;
        line-height: 1 !important;
        cursor: pointer;
    }
    body.tema-claro .mob-mais {
        background: rgba(15, 23, 42, .05);
        border-color: rgba(15, 23, 42, .14);
    }
}

@media (max-width: 640px) {
    /* [R913] pílula recolhida: vira um ponto do tamanho do ícone, encostado na
       borda. Toque devolve inteira (js/core/pilulas-mobile.js). */
    #robo-status-chip.pilula-recolhida,
    #sync-status-container.pilula-recolhida {
        max-width: 44px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-indent: 0 !important;
        opacity: .55;
        padding-left: 10px !important;
        padding-right: 10px !important;
        transition: max-width .25s ease, opacity .25s ease;
    }
    #robo-status-chip, #sync-status-container { transition: max-width .25s ease, opacity .25s ease; }
}

@media (max-width: 900px) {  /* [R939] cartão também no TABLET retrato — dono 25/08: "módulo cliente no tablet não está legal" (tabela desktop espremida a 768px) */
    /* ═══ [R914] O CLIENTE E OS EQUIPAMENTOS DELE SÃO UMA CAIXA SÓ ═══
       Dono: "parece que cada um é uma coisa". Na tabela do computador o
       equipamento é linha recuada dentro do grupo; na lista, cada linha tinha
       virado caixa igual. Aqui a caixa é do GRUPO: o pai abre, os filhos ficam
       dentro (recuo + fio lateral), o último fecha. */
    table[data-mob-lista="1"] tr[data-grupo="pai"] {
        margin-bottom: 0 !important;
        border-bottom: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    table[data-mob-lista="1"] tr[data-grupo="filho"] {
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .06) !important;
        padding-left: 26px !important;              /* recuo = "isto pertence ao de cima" */
        background: rgba(255, 255, 255, .015);
        box-shadow: inset 3px 0 0 rgba(59, 130, 246, .45);   /* fio do grupo */
    }
    /* o último equipamento fecha a caixa do cliente */
    table[data-mob-lista="1"] tr[data-grupo="filho"][data-ultimo="1"] {
        margin-bottom: 10px !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }
    /* dentro do grupo o equipamento é o assunto: título um pouco menor que o do cliente */
    table[data-mob-lista="1"] tr[data-grupo="filho"] td[data-papel="titulo"] {
        font-size: .88rem !important;
    }
    body.tema-claro table[data-mob-lista="1"] tr[data-grupo="filho"] {
        background: rgba(15, 23, 42, .02);
        border-top-color: rgba(15, 23, 42, .07) !important;
    }
}


/* ═══ [R939] TABLET DEITADO (901-1150px): a tabela fica tabela, mas SEM se espremer ═══
   Medido a 1024px (25/08): telefone quebrando em 3 linhas na célula, botão de
   histórico com 36px de alvo. Regra da casa: célula não quebra — a tabela ganha
   largura mínima e o dedo desliza no container (.tabela-com-teto já rola). */
@media (min-width: 901px) and (max-width: 1150px) {
    #page-clientes .tabela-com-teto table { min-width: 960px; }
    #page-clientes .tabela-com-teto td,
    #page-clientes .tabela-com-teto th { white-space: nowrap; }
    #page-clientes .tabela-com-teto td:nth-child(2) { white-space: normal; }  /* nome pode quebrar */
    #page-clientes .tabela-com-teto button { min-height: 42px; min-width: 44px; }
}