/* ============================================================
   PBI Monitor — Abas (Bootstrap nav-tabs + .pgo-tab)
   ============================================================ */

[data-theme="dark"] body .nav-tabs {
    border-bottom: 2px solid var(--border-medium);
}

[data-theme="dark"] body .nav-tabs .nav-link {
    color: var(--text-secondary);
    border: none;
    font-weight: var(--font-medium);
    padding: var(--space-md) var(--space-xl);
    transition: color var(--transition-base), border-color var(--transition-base);
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] body .nav-tabs .nav-link {
        transition: none;
    }
}

[data-theme="dark"] body .nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-accent);
}

[data-theme="dark"] body .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    font-weight: var(--font-semibold);
}

/* --- Tab chips (.pgo-tab) --- */
.pgo-tab {
    background: var(--bg-card-alt);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    padding: var(--space-sm) var(--space-2xl);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
    .pgo-tab {
        transition: none;
    }
}

.pgo-tab:hover {
    background: var(--bg-primary-subtle);
    color: var(--text-primary);
}

.pgo-tab.active {
    background: var(--color-primary-bg);
    border-color: var(--border-strong-hover);
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

@media (max-width: 992px) {
    [data-theme="dark"] body .nav-tabs .nav-link {
        padding: var(--space-md) var(--space-md);
        font-size: var(--text-base);
    }
}

@media (max-width: 768px) {
    [data-theme="dark"] body .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    [data-theme="dark"] body .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    [data-theme="dark"] body .nav-tabs .nav-link {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--text-sm);
        white-space: nowrap;
    }

    .pgo-tab {
        padding: var(--space-xs) var(--space-lg);
        font-size: var(--text-sm);
    }
}

/* ============================================================
   .pgo-tab-surface — superfície de conteúdo de abas, tema-aware.
   Substitui o utilitário Bootstrap .bg-white (fundo branco fixo,
   com !important) em páginas que assumiam fundo claro: agora o
   painel herda claro/escuro automaticamente via token, deixando
   as tabelas internas com o mesmo visual do dashboard no escuro.
   ============================================================ */
.pgo-tab-surface {
    background: var(--bg-card-start);
    border-color: var(--border-light);
}