/* ============================================================================
   Portal 4Fin — Tema do admin (/admin/, django-unfold)
   ============================================================================

   Carregado depois de p4f-tokens.css e p4f-components.css, e antes do
   styles.css do Unfold (ver UNFOLD["STYLES"] em settings.py).

   ---------------------------------------------------------------------------
   O QUE MUDOU EM RELAÇÃO À VERSÃO ANTERIOR DESTE ARQUIVO
   ---------------------------------------------------------------------------

   A versão antiga tinha ~110 `!important` e seletores defensivos como
   `input:not([type="checkbox"]):not([type="radio"]):not([class*="border-red-600"])`.
   A causa está documentada no CLAUDE.md: o CSS do projeto ficava fora de
   qualquer @layer e, por regra da cascata, vencia as utilities do tema (que
   vivem em @layer utilities) mesmo com especificidade menor. Cada vez que
   isso quebrava um componente do Unfold (botão vermelho com texto azul,
   toggle ligado igual ao desligado, borda de erro apagada, item de menu
   invisível), a correção era um `:not()` a mais.

   Agora existem duas frentes, e nenhuma delas briga com o tema:

   1. COR vem da paleta, não de CSS. UNFOLD["COLORS"] em settings.py publica
      --color-base-*, --color-primary-* e --color-font-* em :root, e TODA
      utility do tema lê essas variáveis. Repintar o admin virou editar a
      paleta -- os componentes nativos (botões, campos, tabelas, filtros,
      modo escuro) acompanham sozinhos.

   2. FORMA/RITMO vem daqui, dentro de @layer p4f (declarada em
      p4f-tokens.css como a última camada). Componente nomeado vence utility
      solta, e como quase todo seletor abaixo exige uma classe .p4f-* ou um
      id do Unfold, não há como atropelar markup do tema por acidente.

   Resultado: zero `!important` neste arquivo. Se algum dia um for necessário,
   ele precisa vir com o motivo escrito ao lado.
   ========================================================================= */

/* ==========================================================================
   BASE -- normalização de elemento nu.
   Fica em p4f-base, que roda ANTES de components/utilities: qualquer utility
   do tema vence estas regras. É de propósito -- é o que impede uma regra
   genérica daqui de apagar um estado do Unfold.
   ========================================================================== */

@layer p4f-base {
    :root {
        /* A pilha de fontes do design system passa a valer também para as
           utilities `font-sans` do tema. */
        --font-sans: var(--p4f-font);
        --font-mono: var(--p4f-font-mono);
    }

    body {
        font-family: var(--p4f-font);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Título de inline (o <h2> que o tema gera em inline_heading.html).
       As seções do change form NÃO passam mais por aqui: viraram cartão --
       ver templates/admin/includes/fieldset.html e .p4f-fieldset. */
    #content h2[id$="-heading"] {
        margin: 0 0 var(--p4f-space-3);
        padding: var(--p4f-space-2) var(--p4f-space-3);
        background: var(--p4f-surface-2);
        border-radius: var(--p4f-radius-sm);
        color: var(--p4f-text);
        font-size: var(--p4f-text-sm);
        font-weight: var(--p4f-weight-semibold);
    }
}

@layer p4f {

/* ==========================================================================
   1. CASCO DA PÁGINA
   ========================================================================== */

/* O tema pinta #main de branco puro. Trocado pela tela levemente tingida do
   design system: cartão branco sobre tela branca não tem separação nenhuma,
   e era por isso que as listagens pareciam "achatadas". */
#main {
    background: var(--p4f-canvas);
}

#content {
    max-width: var(--p4f-content-max);
    padding-block: var(--p4f-space-6) var(--p4f-space-10);
}

/* ==========================================================================
   2. PAGINAÇÃO (o que sobrou do antigo rodapé fixo)
   ========================================================================== */

.p4f-pagination {
    max-width: var(--p4f-content-max);
    margin-inline: auto;
}

/* O respiro fica no miolo, não no invólucro: com uma página só e sem
   list_editable o miolo está vazio, some, e a listagem não carrega uma faixa
   de espaço morto embaixo. Ver o {% spaceless %} em admin/pagination.html,
   que é o que permite ao :empty valer. */
.p4f-pagination__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--p4f-space-3);
    padding: 0 var(--p4f-space-6) var(--p4f-space-8);
}

.p4f-pagination__inner:empty { display: none; }
.p4f-pagination__all { font-size: var(--p4f-text-sm); }
.p4f-pagination__save { margin-inline-start: auto; }

.p4f-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--p4f-space-1);
}

.p4f-pages__item a,
.p4f-pages__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 var(--p4f-space-2);
    border: 1px solid transparent;
    border-radius: var(--p4f-radius-sm);
    font-size: var(--p4f-text-sm);
    font-weight: var(--p4f-weight-medium);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.p4f-pages__item a { color: var(--p4f-text-2); border-color: var(--p4f-border); background: var(--p4f-surface); }
.p4f-pages__item a:hover { border-color: var(--p4f-primary-400); color: var(--p4f-link); }

.p4f-pages__current {
    background: var(--p4f-primary-600);
    border-color: var(--p4f-primary-600);
    color: var(--p4f-text-on-brand);
}

/* ==========================================================================
   3. FORMULÁRIO DO CHANGE FORM
   Ver templates/unfold/helpers/fieldset_row_field.html para o porquê da
   troca de layout (rótulo acima do campo em vez da coluna fixa de 224px).
   ========================================================================== */

/* --- Seção do formulário como cartão -------------------------------------
   Markup em templates/admin/includes/fieldset.html. Mesma anatomia dos
   cartões do resto do sistema: cabeçalho tingido, divisória, corpo. */

.p4f-fieldset {
    margin: 0;
    padding: 0;
    border: 1px solid var(--p4f-border);
    border-radius: var(--p4f-radius-lg);
    background: var(--p4f-surface);
    box-shadow: var(--p4f-shadow-sm);
    overflow: hidden;
}

.p4f-fieldset + .p4f-fieldset { margin-top: var(--p4f-space-5); }

.p4f-fieldset__head {
    padding: var(--p4f-space-4) var(--p4f-space-5);
    background: var(--p4f-surface-2);
    border-bottom: 1px solid var(--p4f-border-soft);
}

.p4f-fieldset__head--clicavel { cursor: pointer; }

.p4f-fieldset__title {
    margin: 0;
    font-size: var(--p4f-text-md);
    font-weight: var(--p4f-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--p4f-text);
}

/* A descrição da seção fica presa ao título, dentro do cabeçalho -- antes
   era um parágrafo solto entre dois blocos, sem dono visual. */
.p4f-fieldset__desc {
    max-width: 92ch;
    margin-top: 4px;
    font-size: var(--p4f-text-sm);
    line-height: var(--p4f-leading-relaxed);
    color: var(--p4f-text-3);
}

.p4f-fieldset__desc p { margin: 0 0 var(--p4f-space-2); }
.p4f-fieldset__desc p:last-child { margin-bottom: 0; }
.p4f-fieldset__desc code { font-family: var(--p4f-font-mono); font-size: 0.95em; }

.p4f-fieldset__body > .field-row:not(:last-child) {
    border-bottom: 1px solid var(--p4f-border-soft);
}

/* Inline empilhado: aqui a seção é uma faixa dentro da tabela do inline, não
   um cartão -- cartão dentro de cartão criaria duas molduras concêntricas. */
.p4f-fieldset--inline {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.p4f-fieldset--inline .p4f-fieldset__head {
    border-top: 1px solid var(--p4f-border-soft);
}

.p4f-fieldset--inline:first-of-type .p4f-fieldset__head { border-top: 0; }

/* Seção recolhível (classe `collapse` do Django). */
.p4f-fieldset details > summary { list-style: none; }
.p4f-fieldset details > summary::-webkit-details-marker { display: none; }

/* --- Linha de campo -------------------------------------------------------
   O templatetag do tema entrega .field-line como `flex flex-col` no celular
   e `lg:flex-row lg:items-center` no desktop -- é essa virada pra linha que
   reintroduz a coluna do rótulo. Como as classes vêm de um templatetag em
   Python (fieldset_line_classes), não dá pra removê-las no template; a
   coluna é fixada aqui, valendo em qualquer largura. */
.field-line {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: var(--p4f-space-3) var(--p4f-space-4);
    /* Sem a altura mínima de 59px do tema: com rótulo empilhado ela só
       adiciona um vão morto embaixo de campos curtos. */
    min-height: 0;
}

.p4f-form__label { min-width: 0; }

.p4f-form__label-text {
    display: block;
    font-size: var(--p4f-text-sm);
    font-weight: var(--p4f-weight-semibold);
    line-height: var(--p4f-leading);
    color: var(--p4f-text-2);
}

.p4f-form__req {
    margin-inline-start: 3px;
    color: var(--p4f-danger);
}

.p4f-form__control { position: relative; min-width: 0; }

.p4f-form__help {
    margin-top: 5px;
    /* Largura de leitura: sem o teto, a ajuda acompanha a coluna e vira uma
       tira de uma palavra por linha nas grades de 3 campos. */
    max-width: 62ch;
    font-size: var(--p4f-text-xs);
    line-height: var(--p4f-leading);
    color: var(--p4f-text-3);
}

.p4f-form__error {
    margin-top: 5px;
    font-size: var(--p4f-text-xs);
    font-weight: var(--p4f-weight-medium);
    color: var(--p4f-danger);
}

.p4f-form__error ul { margin: 0; padding-inline-start: var(--p4f-space-4); }

.p4f-form__check { display: flex; flex-direction: column; gap: 5px; }

.p4f-form__check-row {
    display: flex;
    align-items: center;
    gap: var(--p4f-space-2);
    min-height: 24px;
}

.p4f-form__check-row .p4f-form__label-text { margin: 0; }

.p4f-form__readonly {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: var(--p4f-space-5);
}

.p4f-form__readonly--row {
    margin-bottom: 0;
    padding: var(--p4f-space-3) var(--p4f-space-4);
    border-bottom: 1px dashed var(--p4f-border);
}

.p4f-form__readonly--row:last-child { border-bottom: 0; }

/* Campo de texto em largura cheia da coluna. O tema já limita a 672px
   (max-w-2xl) nas linhas de um campo só; nas grades de 2-3 colunas é a
   coluna que manda. */
.field-line input:not([type="checkbox"]):not([type="radio"]),
.field-line select,
.field-line textarea {
    width: 100%;
}

/* ==========================================================================
   4. AJUSTES DE COMPONENTES DO TEMA
   Só ritmo/forma -- a cor já vem da paleta (UNFOLD["COLORS"]).
   ========================================================================== */

/* Abas do change form. */
#tabs-items {
    padding: 3px;
    border: 1px solid var(--p4f-border);
    border-radius: var(--p4f-radius-md);
    background: var(--p4f-surface-2);
    /* Com muitas abas (a ficha do Cliente tem sete inlines) a fileira passa
       da largura do conteúdo e a PÁGINA ganhava rolagem horizontal. Agora a
       fileira rola dentro de si mesma. */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

#tabs-items::-webkit-scrollbar { height: 0; }

/* ...mas SÓ em tela estreita, e o recorte tem que parar aqui.

   Em telas largas quem cuida do excesso de abas é o próprio tema: o
   `tabNavigation()` de unfold/js/app.js compara `#tabs-wrapper.scrollWidth`
   com a largura do `#content` e vai empurrando a última aba pro menu "..."
   até caber. Esse cálculo depende de o invólucro da fileira PODER crescer
   além do conteúdo -- limitar a largura dele aqui zera a diferença, o `if`
   nunca dispara, o "..." fica escondido e as abas que sobram só existem
   dentro de uma rolagem sem barra à vista. Foi exatamente o que aconteceu.

   Abaixo de 768px o tema vira coluna (`md:flex-row`) e o invólucro passa a
   ter largura de conteúdo sem teto nenhum: com sete abas (a ficha do
   Cliente) ele ficava mais largo que a tela e a PÁGINA rolava de lado (24px
   de transbordo em 375px, medido). Aí sim o teto vale a pena -- é uma
   largura onde rolar a fileira com o dedo é o gesto natural. */
@media (max-width: 767.98px) {
    #tabs-wrapper > div:first-child {
        max-width: 100%;
        min-width: 0;
    }
}

/* Aba selecionada: fundo próprio, cor da marca e peso maior. O tema só
   trocava o fundo pra branco, que sobre o cinza claro da fileira quase não
   se distingue -- de longe nenhuma aba parecia escolhida. */
#tabs-items > .active {
    background: var(--p4f-surface);
    color: var(--p4f-primary-700);
    font-weight: var(--p4f-weight-semibold);
    box-shadow: var(--p4f-shadow-xs);
}

html.dark #tabs-items > .active {
    background: var(--p4f-primary-600);
    color: var(--p4f-text-on-brand);
}

/* Listagem: cabeçalho de coluna com o mesmo tratamento da .p4f-table. */
#result_list thead th {
    background: var(--p4f-surface-2);
    font-size: var(--p4f-text-xs);
    font-weight: var(--p4f-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Destaques do change form -- "deixe mais destacados os destaques".

   Valor somente-leitura (Client ID, datas, slug do webhook) era texto
   corrido do mesmo peso do resto: no meio de um formulário cheio de campos
   editáveis, o dado em si desaparecia. Ganha o peso e a cor de texto
   principal, e os que são identificador ganham fonte monoespaçada. */
.p4f-form__readonly .p4f-form__control,
.field-line .readonly {
    font-weight: var(--p4f-weight-medium);
    color: var(--p4f-text);
}


#result_list tbody tr {
    transition: background-color var(--p4f-duration-fast) var(--p4f-ease);
}

/* Contador de registros da listagem (templates/admin/search_form.html).

   Fica na barra da tabela, entre a busca e o botão de filtros. O número vem
   grande e escuro e o substantivo ("cliente", "contas bancárias") ao lado em
   tom secundário: lido de longe é um número; lido de perto diz de quê. Antes
   isso era um selo no cabeçalho da página, longe da lista que ele conta. */
.p4f-resultados {
    display: flex;
    align-items: baseline;
    gap: var(--p4f-space-2);
    margin: 0;
    /* Alinha com a caixa de busca ao lado, que tem 8px de padding vertical. */
    padding-block: var(--p4f-space-2);
    font-size: var(--p4f-text-sm);
    color: var(--p4f-text-3);
    white-space: nowrap;
}

.p4f-resultados__n {
    font-size: var(--p4f-text-lg);
    font-weight: var(--p4f-weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--p4f-text);
    font-variant-numeric: tabular-nums;
}

.p4f-resultados__rotulo {
    font-weight: var(--p4f-weight-medium);
    color: var(--p4f-text-2);
}

/* Aparece só com busca/filtro aplicado, e desfaz o recorte num clique. */
.p4f-resultados__todos {
    color: var(--p4f-link);
    font-weight: var(--p4f-weight-medium);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.p4f-resultados__todos:hover { color: var(--p4f-link-hover); }

/* Link "Modificar" dos inlines (show_change_link): o tema só o revela no
   hover do título da linha, e ninguém descobre isso sozinho. */
[class~="hidden"][class*="group-hover/title:block"] {
    display: inline-block;
}

/* Invólucro de posicionamento da barra flutuante de ações em lote -- ver
   templates/unfold/helpers/change_list_actions.html para o porquê de o
   alinhamento ter saído do JS. A largura vem das mesmas variáveis que
   desenham a barra lateral, então os dois nunca discordam.

   Este invólucro é INVISÍVEL de propósito -- ocupa a faixa inteira (do fim
   da barra lateral até a borda direita) só pra ter onde posicionar o
   cartão de verdade (#changelist-actions, ver admin/actions.html), que tem
   o tamanho do próprio conteúdo. Antes o fundo/borda/blur estavam AQUI,
   numa faixa do tamanho da TABELA de resultados (herdado do tema, via
   Alpine) -- numa listagem de várias colunas isso já cobria quase a largura
   inteira da tela, deixando "N selecionados" grudado à esquerda de uma
   caixa enorme e vazia. `pointer-events: none` evita que essa faixa
   invisível capture clique em linha/botão que esteja por baixo dela; o
   `auto` volta no cartão, que é a única parte clicável de verdade. */
.p4f-acoes-lote {
    position: fixed;
    inset-block-end: var(--p4f-space-5);
    inset-inline-end: 0;
    inset-inline-start: var(--p4f-sidebar-width);
    z-index: var(--p4f-z-header);
    display: none;
    pointer-events: none;
    transition: inset-inline-start var(--p4f-duration-slow) var(--p4f-ease-out);
}

/* Mesma trilha de #content (teto de largura + centralização) e mesmo
   respiro de .result-list-wrapper (px-4, no tema) -- pousa o cartão bem em
   cima da borda esquerda da tabela, em vez de centralizado solto no meio da
   tela (que discorda da tabela sempre que a tela é mais larga que
   --p4f-content-max). */
.p4f-acoes-lote__trilha {
    display: flex;
    width: 100%;
    max-width: var(--p4f-content-max);
    margin-inline: auto;
    padding-inline: var(--p4f-space-4);
}

.p4f-acoes-lote #changelist-actions {
    pointer-events: auto;
    align-items: center;
    gap: var(--p4f-space-4);
    padding: var(--p4f-space-2) var(--p4f-space-3);
    border-radius: var(--p4f-radius-lg);
    box-shadow: var(--p4f-shadow-lg);
}

/* O dropdown de ação vem do tema com 288px fixos em telas largas
   (`lg:w-72`) -- pensado pra uma barra que já ocupava a tela inteira. Numa
   barra do tamanho do próprio conteúdo isso sobrava como espaço morto
   dentro do próprio botão. Aqui ele acompanha o texto da opção escolhida. */
.p4f-acoes-lote select[name="action"] {
    width: auto;
    max-width: none;
}

/* Divisória entre o grupo "escolher e rodar ação" e a contagem -- os dois
   liam como um bloco só de texto branco corrido, sem hierarquia nenhuma. */
.p4f-acoes-lote__contador {
    padding-inline-start: var(--p4f-space-4);
    margin-inline-start: var(--p4f-space-1);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: var(--p4f-weight-medium);
}

/* Só aparece quando há linha marcada -- mesmo gatilho do tema
   (`group-has-[input.action-select:checked]`, que o Tailwind compila para
   :has()), aqui escrito em CSS nosso. O tema já depende de :has(), então
   isso não adiciona requisito novo de navegador. */
#changelist-form:has(input.action-select:checked) .p4f-acoes-lote {
    display: flex;
}

/* Modo trilho (a barra encolhe) e barra escondida pelo próprio tema. */
.p4f-nav-wrap--collapsed ~ #main .p4f-acoes-lote {
    inset-inline-start: var(--p4f-sidebar-width-collapsed);
}

.p4f-acoes-lote--sem-menu {
    inset-inline-start: 0;
}

/* Barra de ações do change form (templates/admin/submit_line.html).
   Continua grudada embaixo -- é onde mora o "Salvar", que precisa estar
   alcançável no meio de um formulário longo --, mas com a mesma linguagem do
   cabeçalho: vidro fosco e uma divisória só, em vez do bloco opaco que lia
   como um segundo rodapé da página. */
.p4f-submit {
    position: sticky;
    bottom: 0;
    z-index: var(--p4f-z-sticky);
    background: var(--p4f-surface);
    background: color-mix(in srgb, var(--p4f-surface) 88%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--p4f-border);
}

.p4f-submit__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--p4f-space-3);
    max-width: var(--p4f-content-max);
    margin-inline: auto;
    padding: var(--p4f-space-3) var(--p4f-space-6);
}

/* Empurra o grupo principal pra direita, deixando a ação destrutiva sozinha
   na ponta esquerda -- distância física entre "Remover" e "Salvar". */
.p4f-submit__principal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--p4f-space-2);
    margin-inline-start: auto;
}

@media (max-width: 767.98px) {
    .p4f-submit__inner { padding-inline: var(--p4f-space-4); }
    .p4f-submit__principal { width: 100%; margin-inline-start: 0; }
    .p4f-submit__principal .p4f-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   5. PRÉVIA DO TEMPLATE (change form do WhatsAppTemplate)
   Estrutura em templates/clientes/whatsapp_template_previa.html, montada por
   static/js/p4f-template-editor.js.
   ========================================================================== */

/* O bloco da prévia vem depois do </form>, dentro de #content-main (hook
   change_form_outer_after_template). Em telas largas os dois viram colunas;
   abaixo disso a prévia cai embaixo do formulário, que é a ordem natural de
   leitura. Escopado no modelo pra não alterar nenhuma outra ficha. */
body.model-whatsapptemplate.change-form #content-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--p4f-space-6);
    align-items: start;
}

@media (min-width: 1280px) {
    body.model-whatsapptemplate.change-form #content-main {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .p4f-previa {
        position: sticky;
        top: calc(var(--p4f-header-height) + var(--p4f-space-4));
    }
}

/* ==========================================================================
   6. TELA "STATUS DAS APIS"
   ========================================================================== */

/* A coluna de status é estreita; sem isto o selo "● Ativa" quebra entre o
   ponto e o rótulo e vira duas linhas. */
.p4f-status-table td:first-child,
.p4f-status-table th:first-child { width: 1%; white-space: nowrap; }

.p4f-status-table__desc { max-width: 44ch; }

.p4f-status-table__verbo {
    margin-inline-end: 6px;
    font-weight: var(--p4f-weight-semibold);
}

.p4f-status-table__url {
    font-family: var(--p4f-font-mono);
    font-size: var(--p4f-text-xs);
    overflow-wrap: anywhere;
}

.p4f-status-table__codigo {
    font-family: var(--p4f-font-mono);
    font-weight: var(--p4f-weight-semibold);
    color: var(--p4f-text-2);
}

.p4f-status-table__codigo--ruim { color: var(--p4f-danger); }

.p4f-status-table__nota {
    max-width: 88ch;
    margin: 0;
    font-size: var(--p4f-text-xs);
    line-height: var(--p4f-leading-relaxed);
    color: var(--p4f-text-3);
}

/* ==========================================================================
   7. RESPONSIVO DO ADMIN
   1280px é o mesmo ponto de corte que o tema usa pra alternar a barra
   lateral entre fixa e gaveta (sidebarOpen, em unfold/js/app.js) -- manter
   o mesmo número evita um intervalo onde os dois discordam.
   ========================================================================== */

@media (max-width: 1279.98px) {
    .p4f-nav-wrap,
    .p4f-nav-wrap--collapsed {
        position: fixed;
        inset: 0;
        width: auto;
    }

    /* No toque não existe trilho: sem rótulo e sem hover pra dica, um menu
       só de ícones vira adivinhação. A gaveta abre sempre por extenso. */
    .p4f-nav,
    .p4f-nav-wrap--collapsed .p4f-nav {
        width: min(304px, 86vw);
        box-shadow: var(--p4f-shadow-xl);
    }

    /* Os valores são restabelecidos um a um, e não com `display: revert`.
       `revert` descarta TODAS as declarações de autor da propriedade e cai no
       padrão do navegador -- ou seja, devolveria `inline`, não o `flex` que
       p4f-shell.css define. Efeito colateral silencioso: caixa inline ignora
       overflow/text-overflow, então os rótulos longos parariam de truncar. */
    .p4f-nav-wrap--collapsed .p4f-nav__brand-text,
    .p4f-nav-wrap--collapsed .p4f-nav__search,
    .p4f-nav-wrap--collapsed .p4f-nav__account-id {
        display: flex;
    }

    .p4f-nav-wrap--collapsed .p4f-nav__heading {
        display: flex;
    }

    .p4f-nav-wrap--collapsed .p4f-nav__item-text {
        display: block;
    }

    .p4f-nav-wrap--collapsed .p4f-nav__theme-label {
        display: block;
    }

    .p4f-nav-wrap--collapsed .p4f-nav__account-caret {
        display: block;
    }

    .p4f-nav-wrap--collapsed .p4f-nav__brand,
    .p4f-nav-wrap--collapsed .p4f-nav__item,
    .p4f-nav-wrap--collapsed .p4f-nav__theme,
    .p4f-nav-wrap--collapsed .p4f-nav__account-btn {
        justify-content: flex-start;
        padding-inline: var(--p4f-space-3);
    }

    .p4f-nav-wrap--collapsed .p4f-nav__brand { padding-inline: var(--p4f-space-4); }
    .p4f-nav-wrap--collapsed .p4f-nav__account-menu { inset-inline: 0; width: auto; }

    .p4f-nav-scrim {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(7, 12, 23, 0.55);
        backdrop-filter: blur(2px);
    }

    .p4f-nav__toggle { display: none; }
    .p4f-nav__close { display: flex; }
    .p4f-head__burger { display: flex; }

    /* Aqui a barra lateral é gaveta (fora do fluxo): a de ações em lote
       ocupa a largura toda. */
    .p4f-acoes-lote,
    .p4f-nav-wrap--collapsed ~ #main .p4f-acoes-lote {
        inset-inline-start: 0;
    }
}

/* O resto do responsivo do cabeçalho mora em p4f-shell.css, que as duas
   interfaces carregam -- aqui fica só o que é do admin. */
@media (max-width: 767.98px) {
    .p4f-pagination__inner { padding-inline: var(--p4f-space-4); }
    #content { padding-block: var(--p4f-space-4) var(--p4f-space-8); }
    .p4f-acoes-lote__trilha { padding-inline: var(--p4f-space-4); }
}

} /* @layer p4f */