/* =============================================================================
   Camada global do visual novo (card 978926)

   Cada regra começa por html[data-ui="next"], atributo que os layouts fixam desde a
   remoção do visual antigo (card 978926) — o prefixo ficou para não mudar a especificidade.

   Carregada por último no <head> (depois do Velzon e do air-theme), para que a
   camada tenha a última palavra sem !important — o prefixo
   html[data-ui="next"] body[data-theme="air"] já vence body[data-theme="air"] X.

   O que corrige, medido pelo detector do Impeccable nas 82 rotas do menu
   (linha de base da onda 0) e fixado no DESIGN.md:
     - texto funcional abaixo de 11px (cabeçalho de tabela, rótulo de campo,
       badge, breadcrumb, título de grupo do menu: 10px no tema);
     - texto corrido abaixo de 12px (painel de Configurações, atalhos);
     - cinza #74788d do Velzon abaixo de 4,5:1 (text-muted, rodapé, sino);
     - sombra colorida azulada (topo, menu, convite de feedback).
   ============================================================================= */

/* ── Tokens da camada ─────────────────────────────────────────────────── */
html[data-ui="next"] body[data-theme="air"] {
    --bs-secondary-color: var(--air-ink-muted);
    --bs-secondary-color-rgb: 100, 100, 100;
}

html[data-ui="next"][data-bs-theme="dark"] body[data-theme="air"] {
    --bs-secondary-color-rgb: 167, 167, 167;
}

/* ── Contraste: o cinza do Velzon (#74788d) vira o muted do AI/R ───────── */
html[data-ui="next"] body[data-theme="air"] .text-muted,
html[data-ui="next"] body[data-theme="air"] .text-secondary,
html[data-ui="next"] body[data-theme="air"] .footer,
html[data-ui="next"] body[data-theme="air"] .footer .text-muted {
    color: var(--air-ink-muted) !important;
}

/* ── Piso tipográfico do tema ─────────────────────────────────────────── */
html[data-ui="next"] body[data-theme="air"] table.table thead th,
html[data-ui="next"] body[data-theme="air"] .form-label,
html[data-ui="next"] body[data-theme="air"] .badge,
html[data-ui="next"] body[data-theme="air"] .breadcrumb,
html[data-ui="next"] body[data-theme="air"] .vertical-menu .menu-title {
    font-size: var(--air-ui-fs-label);
}

/* Espaçamento entre letras só no que é caixa-alta; em texto normal atrapalha a leitura. */
html[data-ui="next"] body[data-theme="air"] table.table thead th,
html[data-ui="next"] body[data-theme="air"] .vertical-menu .menu-title {
    letter-spacing: var(--air-ui-ls-label);
}

html[data-ui="next"] body[data-theme="air"] .badge {
    letter-spacing: 0;
}

html[data-ui="next"] body[data-theme="air"] .pagination .page-item.disabled .page-link {
    color: var(--air-ink-muted);
}

html[data-ui="next"] body[data-theme="air"] table.table thead th,
html[data-ui="next"] body[data-theme="air"] table.table > tbody > tr > td {
    font-variant-numeric: tabular-nums;
}

/* ── Painel de Configurações (engrenagem) ─────────────────────────────── */
html[data-ui="next"] body[data-theme="air"] .appearance-option-label,
html[data-ui="next"] body[data-theme="air"] .appearance-option-hint,
html[data-ui="next"] body[data-theme="air"] .appearance-selector-hint,
html[data-ui="next"] body[data-theme="air"] .right-bar kbd,
html[data-ui="next"] body[data-theme="air"] .right-bar .text-muted {
    font-size: var(--air-ui-fs-small) !important;
}

/* ── Sombras: neutras, nunca azuladas ─────────────────────────────────── */
html[data-ui="next"] body[data-theme="air"] #page-topbar,
html[data-ui="next"] body[data-theme="air"] .vertical-menu {
    box-shadow: none;
}

html[data-ui="next"] body[data-theme="air"] #page-topbar {
    border-bottom: 1px solid var(--air-border-color);
}

html[data-ui="next"] body[data-theme="air"] .cf-invite,
html[data-ui="next"] body[data-theme="air"] .cf-modal-dialog,
html[data-ui="next"] body[data-theme="air"] .dropdown-menu {
    box-shadow: var(--air-shadow-md);
}

/* ── Texto pequeno e botões: piso de 12px ─────────────────────────────── */
html[data-ui="next"] body[data-theme="air"] small,
html[data-ui="next"] body[data-theme="air"] .small {
    font-size: max(12px, 0.875em);
}

html[data-ui="next"] body[data-theme="air"] .btn {
    font-size: 12px;
}

html[data-ui="next"] body[data-theme="air"] .cf-redact-hint {
    font-size: var(--air-ui-fs-small);
}

/* ── Medida de leitura: subtítulos de página não passam de ~75 caracteres ── */
html[data-ui="next"] body[data-theme="air"] .form-subtitle,
html[data-ui="next"] body[data-theme="air"] .listing-subtitle,
html[data-ui="next"] body[data-theme="air"] .page-subtitle {
    max-width: 75ch;
}

html[data-ui="next"] body[data-theme="air"] .assistant-empty-hint,
html[data-ui="next"] body[data-theme="air"] .assistant-notice {
    max-width: 75ch;
}

/* ── Painel de Configurações: opções sem fundo próprio (evita cartão dentro do painel) ── */
html[data-ui="next"] body[data-theme="air"] .right-bar .appearance-option {
    background: transparent;
}

html[data-ui="next"] body[data-theme="air"] .right-bar {
    border-left: 1px solid var(--air-border-color);
    box-shadow: none;
}

/* =============================================================================
   Casca do visual novo (onda 2): menu lateral, busca rápida, topo e rodapé
   ============================================================================= */

/* Menu lateral: air-next-menu.css. */

/* Busca rápida: campo escuro no painel preto, sem o azul-marinho do Velzon. */
html[data-ui="next"] body[data-theme="air"] .sidebar-search-input-wrapper {
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: var(--air-radius-sm);
    background-color: #1d1d1d;
}

html[data-ui="next"] body[data-theme="air"] .sidebar-search-input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
}

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

html[data-ui="next"] body[data-theme="air"] .sidebar-search-input,
html[data-ui="next"] body[data-theme="air"] .sidebar-search-icon {
    color: var(--air-sidebar-ink);
}

html[data-ui="next"] body[data-theme="air"] .sidebar-search-input::placeholder {
    color: var(--air-sidebar-ink-muted);
}

/* Rodapé: linha discreta, sem faixa cinza. */
html[data-ui="next"] body[data-theme="air"] .footer {
    border-top: 1px solid var(--air-border-color);
    background: transparent;
    font-size: var(--air-ui-fs-small);
}

/* Área de conteúdo: fundo da superfície, sem o cinza-azulado do Velzon. */
html[data-ui="next"] body[data-theme="air"] .main-content,
html[data-ui="next"] body[data-theme="air"] .page-content {
    background: var(--air-surface);
}

/* Card 980349: o Velzon põe overflow: hidden no .main-content, e com isso ele vira o contêiner
   de rolagem de tudo que é sticky dentro dele — a barra de salvar (.form-actions, sticky no
   rodapé) nunca grudava. clip corta o excesso horizontal como antes, sem criar contêiner de
   rolagem; na vertical nada vaza, porque a página rola no documento. */
html[data-ui="next"] body[data-theme="air"] .main-content {
    overflow: clip visible;
}

/* =============================================================================
   Cabeçalho de página dos componentes compartilhados (<x-form-header>,
   <x-list-header>, ListHeader.vue): no visual novo vira o cabeçalho AI/R —
   título grande e sem cartão em volta; o ícone colorido do módulo continua.
   ============================================================================= */
html[data-ui="next"] body[data-theme="air"] .form-shell {
    padding: 0;
    border: 0;
    background: transparent;
    margin-bottom: 24px;
}

html[data-ui="next"] body[data-theme="air"] .form-heading,
html[data-ui="next"] body[data-theme="air"] .listing-heading {
    align-items: center;
}

html[data-ui="next"] body[data-theme="air"] .form-title,
html[data-ui="next"] body[data-theme="air"] .listing-title {
    margin: 0 0 4px;
    font-size: var(--air-fs-h1);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--air-ink-strong);
}

html[data-ui="next"] body[data-theme="air"] .form-subtitle,
html[data-ui="next"] body[data-theme="air"] .listing-subtitle {
    font-size: 13px;
    color: var(--air-ink-muted);
}

@media (max-width: 767.98px) {
    html[data-ui="next"] body[data-theme="air"] .form-title,
    html[data-ui="next"] body[data-theme="air"] .listing-title {
        font-size: 24px;
    }
}

/* Rodapé do visual novo (components/air/app-footer): uma linha, frase à esquerda e versão
   numa etiqueta à direita; o respiro à direita deixa o balão de feedback fora do texto. */
html[data-ui="next"] body[data-theme="air"] .air-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 14px 104px 14px 24px;
}

html[data-ui="next"] body[data-theme="air"] .air-footer__copy {
    margin: 0;
}

html[data-ui="next"] body[data-theme="air"] .air-footer__version {
    padding: 2px 8px;
    border: 1px solid var(--air-border-color);
    border-radius: 999px;
    font-family: var(--air-font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--air-ink-muted);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    html[data-ui="next"] body[data-theme="air"] .air-footer {
        padding-right: 24px;
        padding-bottom: 88px;
    }
}

/* Carregamento de página (x-list-loading e as cópias inline do overlay #jumpLoadingOverlay).
   Mesmo markup e mesma classe .active que o JS das telas liga e desliga — só o desenho muda:
   véu da própria superfície com desfoque (em vez do cinza chapado), a marca do Jump menor
   com um anel girando em volta e o rótulo no estilo de rótulo. Surge com 120 ms de atraso
   para operação rápida não piscar a tela; o overlay que já nasce ativo (dashboards) não
   passa por transição e aparece de imediato. Fica acima do balão de feedback (10600),
   que antes seguia clicável por cima do véu. */
html[data-ui="next"] body[data-theme="air"] .jump-loading-overlay {
    z-index: 10700;
    background-color: color-mix(in srgb, var(--air-surface) 72%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: opacity 160ms var(--air-ease-out-quint, ease-out), visibility 0s linear 160ms;
}

html[data-ui="next"] body[data-theme="air"] .jump-loading-overlay.active {
    transition: opacity 160ms var(--air-ease-out-quint, ease-out) 120ms, visibility 0s linear 0s;
}

html[data-ui="next"] body[data-theme="air"] .jump-loading-spinner {
    position: relative;
    gap: 20px;
}

html[data-ui="next"] body[data-theme="air"] .jump-loading-spinner::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 56px;
    height: 56px;
    margin-left: -28px;
    border: 2px solid var(--air-border-soft);
    border-top-color: var(--air-ink-strong);
    border-radius: 50%;
    animation: air-loading-spin 800ms linear infinite;
}

html[data-ui="next"] body[data-theme="air"] .jump-loading-spinner .spinner-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--air-border-color);
    animation: none;
}

html[data-ui="next"] body[data-theme="air"] .jump-loading-spinner .spinner-text {
    font-family: var(--air-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--air-ink-muted);
    animation: none;
}

@keyframes air-loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui="next"] body[data-theme="air"] .jump-loading-spinner::before {
        animation: air-pulse 1.2s ease-in-out infinite alternate;
    }
}