/* =============================================================================
   Visual novo (card 978926), onda 3 — listagens compartilhadas

   Vale para toda listagem montada sobre o design system (listing.base.css,
   <x-list-toolbar>, ListingPage.vue — 48 telas — e as listagens com colunas
   configuráveis), sob <html data-ui="next">.

   - Faixa do topo (listing-shell) sem cartão: cabeçalho AI/R + ferramentas.
   - Tabela num cartão plano: borda fina, sem sombra, cabeçalho 11px, números
     tabulares, linha que destaca no hover.
   - As cores continuam: ações da linha (editar azul, excluir vermelho), badges,
     ícones do estado vazio — são identificadores para quem usa (decisão do José,
     23/09/2026).
   - Cartões (visão em cartões) planos, com borda que escurece no hover.
   ============================================================================= */

html[data-ui="next"] body[data-theme="air"] .listing-shell {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

html[data-ui="next"] body[data-theme="air"] .listing-toolbar {
    align-items: flex-end;
    gap: 16px;
}

html[data-ui="next"] body[data-theme="air"] .listing-filters-panel {
    border: 1px solid var(--air-border-color);
    border-radius: var(--air-radius-lg);
    background: var(--air-surface-alt);
    box-shadow: none;
}

html[data-ui="next"] body[data-theme="air"] .listing-filter-label {
    font-size: var(--air-ui-fs-label);
    letter-spacing: var(--air-ui-ls-label);
    color: var(--air-ink-muted);
}

html[data-ui="next"] body[data-theme="air"] .listing-filters-hint {
    font-size: var(--air-ui-fs-small);
    color: var(--air-ink-muted);
}

/* Card 980997 — a listagem só existe depois que o Vue monta (ele marca o contêiner com
   data-v-app). Até lá o #vue_app fica vazio, e a paginação e o rodapé, que vêm do Blade, ficavam
   logo abaixo dele e desciam quando a tabela entrava (CLS ~0,5 em 12 listagens); a margem da
   paginação ainda colapsava pelo contêiner vazio e empurrava o bloco inteiro 16px. Até montar,
   os dois ficam fora do layout — o overlay de carregamento cobre a tela nesse intervalo. */
html[data-ui="next"] body[data-theme="air"] #vue_app.listing-page:not([data-v-app]) ~ *,
html[data-ui="next"] body[data-theme="air"]:has(#vue_app.listing-page:not([data-v-app])) .footer {
    display: none;
}

/* Cartão da tabela: plano, borda fina. */
html[data-ui="next"] body[data-theme="air"] .listing-page .card {
    border: 1px solid var(--air-border-color);
    border-radius: var(--air-radius-lg);
    box-shadow: none;
}

html[data-ui="next"] body[data-theme="air"] .listing-page .table-responsive {
    border-radius: var(--air-radius-lg);
}

html[data-ui="next"] body[data-theme="air"] .listing-page table.table thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--air-surface-alt);
    color: var(--air-ink-muted);
}

html[data-ui="next"] body[data-theme="air"] .listing-page table.table > tbody > tr > td {
    padding-top: 12px;
    padding-bottom: 12px;
}

html[data-ui="next"] body[data-theme="air"] .listing-page table.table thead th:first-child,
html[data-ui="next"] body[data-theme="air"] .listing-page table.table > tbody > tr > td:first-child {
    padding-left: 18px;
}

html[data-ui="next"] body[data-theme="air"] .listing-page table.table thead th:last-child,
html[data-ui="next"] body[data-theme="air"] .listing-page table.table > tbody > tr > td:last-child {
    padding-right: 18px;
}

html[data-ui="next"] body[data-theme="air"] .listing-sortable-header {
    cursor: pointer;
}

html[data-ui="next"] body[data-theme="air"] .listing-sortable-header:hover {
    color: var(--air-ink-strong);
}

/* Visão em cartões. */
html[data-ui="next"] body[data-theme="air"] .listing-page [data-show-when-view="card"] .card,
html[data-ui="next"] body[data-theme="air"] .listing-page .listing-card {
    transition: border-color 160ms var(--air-ui-ease-out);
}

html[data-ui="next"] body[data-theme="air"] .listing-page [data-show-when-view="card"] .card:hover,
html[data-ui="next"] body[data-theme="air"] .listing-page .listing-card:hover {
    border-color: var(--air-ink-strong);
}

/* Estado vazio das listagens (<x-list-empty-state>/ListEmptyState): o mesmo desenho do
   .air-empty (air-components.css) — um estado vazio só no sistema (revisão do José, 24/09). */
html[data-ui="next"] body[data-theme="air"] .listing-empty-state {
    padding: 40px 24px;
    border: 1px solid var(--air-border-color);
    border-radius: var(--air-radius-lg);
    background: var(--air-surface-raised);
}

html[data-ui="next"] body[data-theme="air"] :where(.card, .air-card, .air-group, td, .modal-body, .offcanvas-body, .accordion-body, .air-list-table) .listing-empty-state {
    border: 0;
    background: transparent;
}

html[data-ui="next"] body[data-theme="air"] .listing-empty-state-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    background: var(--air-surface-hover);
    color: var(--air-ink-muted);
    font-size: 22px;
}

html[data-ui="next"] body[data-theme="air"] .listing-empty-state-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--air-ink-strong);
}

html[data-ui="next"] body[data-theme="air"] .listing-empty-state-subtitle {
    max-width: 48ch;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--air-ink-muted);
}

html[data-ui="next"] body[data-theme="air"] .listing-empty-state-action {
    margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui="next"] body[data-theme="air"] .listing-page .card {
        transition: none;
    }
}

/* =============================================================================
   Redesenho (24/09/2026): a linha sob o cursor ganha o filete limão do AI/R —
   o mesmo acento que marca horas no dashboard. As ações da linha ficam sempre
   com opacidade cheia: esmaecidas pareciam desabilitadas ("perdi permissão?",
   José, 24/09).
   ============================================================================= */
html[data-ui="next"] body[data-theme="air"] .listing-page table.table > tbody > tr > td:first-child {
    /* o preenchimento de listra/hover do Bootstrap também é box-shadow: sobrescrever sem recompor
       deixava a coluna de ações de fora do hover da linha (card 982877) */
    box-shadow: inset 0 0 0 var(--air-accent-hours), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
    transition: box-shadow 140ms var(--air-ui-ease-out), background-color 120ms var(--air-ui-ease-out);
}

html[data-ui="next"] body[data-theme="air"] .listing-page table.table > tbody > tr:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--air-accent-hours), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

/* =============================================================================
   Cabeçalho de tabela padrão do visual novo (José, 24/09: "igual está na tela de
   /users"): frase normal, 12px, cinza de apoio, toda coluna ordenável com o mesmo
   ícone — no servidor quando a tela ordena, na página (air-table-sort) quando não.
   ============================================================================= */
html[data-ui="next"] body[data-theme="air"] table.table > thead > tr > th {
    font-size: var(--air-ui-fs-small);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--air-ink-muted);
    white-space: nowrap;
}

html[data-ui="next"] body[data-theme="air"] table.table > thead > tr > th a {
    color: inherit !important;
    text-decoration: none;
}

html[data-ui="next"] body[data-theme="air"] table.table > thead > tr > th a:hover,
html[data-ui="next"] body[data-theme="air"] table.table > thead > tr > th[data-sort-key]:hover {
    color: var(--air-ink-strong);
}

html[data-ui="next"] body[data-theme="air"] table.table > thead > tr > th[data-sort-key] {
    cursor: pointer;
}

html[data-ui="next"] body[data-theme="air"] table.table > thead > tr > th .js-sort-icon {
    margin-left: 2px;
    color: inherit;
}

/* Cartão da tabela sem respiro interno: cabeçalho e linhas encostam na moldura, como no
   .air-list-table das listagens em Vue. */
html[data-ui="next"] body[data-theme="air"] :is(.listing-page, .projects-list-page) .card:has(> .card-body > .table-responsive > table.table) {
    overflow: hidden;
}

html[data-ui="next"] body[data-theme="air"] :is(.listing-page, .projects-list-page) .card > .card-body:has(> .table-responsive > table.table):not(:has(.alert)) {
    padding: 0;
}

html[data-ui="next"] body[data-theme="air"] :is(.listing-page, .projects-list-page) .card > .card-body > .table-responsive > table.table > thead > tr > th {
    border-bottom: 1px solid var(--air-border-color);
}

/* =============================================================================
   Cabeçalho das listagens no arranjo aprovado (José, 24/09 — lista de usuários e
   colaboradores): título com as ações principais (criar, importar, exportar) na
   mesma linha, à direita; busca e demais ferramentas na linha de baixo. Vale para
   <x-list-header> + <x-list-toolbar> e ListHeader.vue + ListToolbar.vue sem mudar
   markup: a caixa de ações vira "contents" e a ordem arruma as duas linhas.
   ============================================================================= */
html[data-ui="next"] body[data-theme="air"] .listing-toolbar:has(> .listing-heading):has(> .listing-actions) {
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 16px;
    column-gap: 8px;
}

html[data-ui="next"] body[data-theme="air"] .listing-toolbar:has(> .listing-heading) > .listing-heading {
    flex: 1 1 auto;
    order: 0;
}

/* Sem o círculo de ícone: o título é o cabeçalho da página, como nas telas aprovadas. */
html[data-ui="next"] body[data-theme="air"] .listing-heading > .listing-badge {
    display: none;
}

html[data-ui="next"] body[data-theme="air"] .listing-toolbar:has(> .listing-heading) > .listing-actions {
    display: contents;
}

html[data-ui="next"] body[data-theme="air"] .listing-toolbar:has(> .listing-heading) > .listing-actions > * {
    order: 5;
}

/* Linha de baixo: busca e o resto. */
html[data-ui="next"] body[data-theme="air"] .listing-toolbar:has(> .listing-heading) > .listing-actions > .listing-search-box {
    order: 3;
}

html[data-ui="next"] body[data-theme="air"] .listing-toolbar:has(> .listing-heading) > .listing-actions > a.btn,
html[data-ui="next"] body[data-theme="air"] .listing-toolbar:has(> .listing-heading) > .listing-actions > .btn-group:not(.listing-view-switch) {
    order: 1;
}

html[data-ui="next"] body[data-theme="air"] .listing-toolbar:has(> .listing-heading):has(> .listing-actions)::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 2;
}

html[data-ui="next"] body[data-theme="air"] .listing-toolbar:has(> .listing-heading) .listing-search-box {
    flex: 1 1 320px;
    max-width: 520px;
}

/* Mesmo arranjo para o casco "projects-list" (page-shell.css): detalhamento de projetos e os
   dashboards que usam a mesma barra — título com as ações principais, ferramentas embaixo. */
html[data-ui="next"] body[data-theme="air"] .projects-list-toolbar:has(> .projects-list-heading):has(> .projects-list-actions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    row-gap: 16px;
    column-gap: 8px;
}

html[data-ui="next"] body[data-theme="air"] .projects-list-toolbar > .projects-list-heading {
    flex: 1 1 auto;
    order: 0;
}

html[data-ui="next"] body[data-theme="air"] .projects-list-heading > .projects-list-badge {
    display: none;
}

html[data-ui="next"] body[data-theme="air"] .projects-list-toolbar:has(> .projects-list-heading) > .projects-list-actions {
    display: contents;
}

html[data-ui="next"] body[data-theme="air"] .projects-list-toolbar:has(> .projects-list-heading) > .projects-list-actions > * {
    order: 5;
}

html[data-ui="next"] body[data-theme="air"] .projects-list-toolbar:has(> .projects-list-heading) > .projects-list-actions > .projects-search-box {
    order: 3;
    flex: 1 1 320px;
    max-width: 520px;
}

html[data-ui="next"] body[data-theme="air"] .projects-list-toolbar:has(> .projects-list-heading) > .projects-list-actions > .projects-filter-toggle {
    order: 4;
}

html[data-ui="next"] body[data-theme="air"] .projects-list-toolbar:has(> .projects-list-heading) > .projects-list-actions > a.btn {
    order: 1;
}

html[data-ui="next"] body[data-theme="air"] .projects-list-toolbar:has(> .projects-list-heading):has(> .projects-list-actions)::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 2;
}

/* O botão de filtros deixa de ser o preto de ação principal: é uma ferramenta como as outras. */
html[data-ui="next"] body[data-theme="air"] .projects-filter-toggle.btn-primary {
    border-color: var(--air-border-strong);
    background: transparent;
    color: var(--air-ink);
}

html[data-ui="next"] body[data-theme="air"] .projects-filter-toggle.btn-primary:hover,
html[data-ui="next"] body[data-theme="air"] .projects-filter-toggle.btn-primary[aria-expanded="true"] {
    border-color: var(--air-ink-strong);
    background: var(--air-surface-hover);
    color: var(--air-ink-strong);
}

/* =============================================================================
   Filtros sempre à vista (revisão do José, 24/09): no visual novo não há botão Filtros
   para abrir e fechar o bloco. O botão próprio das telas Blade some e o painel fica
   aberto já na primeira pintura — o air-filter-panels.init.js confirma o estado depois.
   ============================================================================= */
html[data-ui="next"] body[data-theme="air"] .js-toggle-filters,
html[data-ui="next"] body[data-theme="air"] .projects-filter-toggle {
    display: none !important;
}

html[data-ui="next"] body[data-theme="air"] :is(.projects-filters-panel, .listing-filters-panel)[hidden] {
    display: block !important;
}

/* Um ícone de filtro só (revisão do José, 24/09): o funil vazado do Delivery Check
   (mdi-filter-outline). As variantes que as telas usam nos rótulos e botões de filtro
   (mdi-filter-variant, mdi-filter-menu-outline) desenham o mesmo glifo. */
html[data-ui="next"] body[data-theme="air"] :is(.mdi-filter-variant, .mdi-filter-menu-outline)::before {
    content: "\F0233";
}


/* Dashboard de Delivery Check: oito filtros em colunas iguais (col-xl) espremiam todos numa
   linha e jogavam o último sozinho para baixo; vira grade de colunas de 200px+. Só nele: a lista
   de projetos usa as mesmas colunas com largura própria (20%) e quebrava com a grade. */
@media (min-width: 1200px) {
    html[data-ui="next"] body[data-theme="air"] #dc-dashboard-filters .row:has(> .col-xl:nth-child(7)) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    html[data-ui="next"] body[data-theme="air"] #dc-dashboard-filters .row:has(> .col-xl:nth-child(7)) > .col-xl {
        width: auto;
        max-width: none;
    }
}

/* Botão de limpar do formulário de filtros (ListFilterForm usa .btn-secondary por padrão):
   o mesmo contorno do "Limpar filtros" dos dashboards, par do botão Filtrar. */
html[data-ui="next"] body[data-theme="air"] .listing-filters-panel .btn-secondary {
    border-color: var(--air-border-strong);
    background: transparent;
    color: var(--air-ink);
    font-family: var(--air-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 14px;
}

html[data-ui="next"] body[data-theme="air"] .listing-filters-panel .btn-secondary:hover {
    background: var(--air-surface-alt);
    color: var(--air-ink-strong);
}

/* Estado vazio logo abaixo das ferramentas da listagem: o mesmo respiro da tabela. */
html[data-ui="next"] body[data-theme="air"] .air-list-tools + .air-empty {
    margin-top: 16px;
}

/* Alternador cartões/lista das listagens: mesmo desenho do AirViewSwitch do dashboard de alocações
   (moldura única, botões sem borda própria, aceso = tinta sólida) */
html[data-ui="next"] body[data-theme="air"] :is(.listing-view-switch, .projects-view-switch) {
    display: inline-flex;
    border: 1px solid var(--air-border-strong);
    border-radius: var(--air-radius-sm);
    overflow: hidden;
}

html[data-ui="next"] body[data-theme="air"] :is(.listing-view-switch, .projects-view-switch) .btn {
    width: 36px;
    min-width: 36px;
    height: 38px; /* alinha com busca e botões da mesma linha */
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    color: var(--air-ink-muted);
    box-shadow: none;
}

html[data-ui="next"] body[data-theme="air"] :is(.listing-view-switch, .projects-view-switch) .btn + .btn {
    border-left: 1px solid var(--air-border-strong);
}

html[data-ui="next"] body[data-theme="air"] :is(.listing-view-switch, .projects-view-switch) .btn.btn-primary {
    background: var(--air-accent-solid);
    color: var(--air-on-accent);
}

/* O cartão de tabela encosta a tabela na moldura, mas título, texto de apoio, filtros e botões do mesmo
   cartão ficavam colados nela também (AMS, metodologias, automações — card 982877). Tudo que não é a
   tabela volta a ter o respiro de 20px; a tabela segue de ponta a ponta. */
html[data-ui="next"] body[data-theme="air"] :is(.listing-page, .projects-list-page) .card > .card-body:has(> .table-responsive > table.table) > :not(.table-responsive) {
    margin-inline: 20px;
}

html[data-ui="next"] body[data-theme="air"] :is(.listing-page, .projects-list-page) .card > .card-body:has(> .table-responsive > table.table) > :first-child:not(.table-responsive) {
    margin-top: 16px;
}

html[data-ui="next"] body[data-theme="air"] :is(.listing-page, .projects-list-page) .card > .card-body:has(> .table-responsive > table.table) > :not(.table-responsive):has(+ .table-responsive) {
    margin-bottom: 14px;
}