/* FanTR Cooling — Tabs (dcc.Tabs / dbc.Tabs)
   Design técnico-profissional:
   - Aba inativa : fundo transparente, texto secundário #6b7f8e
   - Hover        : texto escuro #345a74, tint leve
   - Aba ativa    : underline 3px azul institucional #067cb1, texto #345a74
   Referência: VS Code, GitHub — underline sem fundo saturado.

   Substitui os blocos .tab-item em assets/styles.css e
   .graficos-tabs .tab-item em assets/components.css (Sub-fase 1.5c).

   NOTA: ponto_operacao.py remove o prop colors= dos dcc.Tabs para evitar
   inline-styles que conflitam com estas regras CSS.
*/

/* ── Container das abas ─────────────────────────────────────── */
.graficos-tabs {
    border-bottom: 2px solid var(--color-border) !important;
}

/* ── Aba inativa ────────────────────────────────────────────── */
.tab-item {
    background: transparent !important;

    /* substitui borda ao redor (estilo PSM) por apenas borda inferior invisível */
    border: none !important;
    border-bottom: 3px solid transparent !important;

    /* zerando herança de raio e margem do estilo antigo */
    border-radius: 0 !important;
    margin-right: 2px !important;
    margin-bottom: -2px !important;          /* alinha com a borda do container */

    color: var(--color-text-secondary) !important;  /* #6b7f8e */
    font-size: var(--font-size-xs) !important;       /* 12px */
    font-weight: 500 !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    white-space: nowrap;
    transition:
        color var(--transition-fast),
        border-bottom-color var(--transition-fast),
        background var(--transition-fast) !important;
    user-select: none;
}

/* ── Hover ──────────────────────────────────────────────────── */
.tab-item:hover {
    color: var(--color-brand-dark) !important;           /* #345a74 */
    background: rgba(52, 90, 116, 0.04) !important;
    border-bottom-color: var(--color-border) !important;
}

/* ── Aba ativa / selecionada ────────────────────────────────── */
.tab-item--selected {
    color: var(--color-brand-dark) !important;            /* #345a74 */
    font-weight: 600 !important;
    background: transparent !important;

    /* underline verde institucional — alterado manualmente pelo dono (Sub-fase 1.6d) */
    border-bottom: 3px solid var(--color-brand-green) !important;  /* #94c11f */

    /* remove bordas laterais/topo que Dash pode injetar via prop colors */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* ── Painel de conteúdo da aba ──────────────────────────────── */
.graficos-tabs .tab-content {
    border: 1px solid var(--color-border) !important;
    border-top: none !important;                     /* fusionado com linha do container */
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    padding: var(--space-3) var(--space-2) var(--space-2) !important;
    background: var(--color-bg-card) !important;
}

/* ── react-tabs (renderização interna do dcc.Tabs) ──────────── */
.react-tabs__tab-list {
    border-bottom: 2px solid var(--color-border) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.react-tabs__tab {
    font-size: var(--font-size-xs) !important;
    padding: 8px 16px !important;
    color: var(--color-text-secondary) !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    margin-bottom: -2px !important;
    background: transparent !important;
}

.react-tabs__tab:hover {
    color: var(--color-brand-dark) !important;
    background: rgba(52, 90, 116, 0.04) !important;
}

.react-tabs__tab--selected {
    color: var(--color-brand-dark) !important;
    font-weight: 600 !important;
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 3px solid var(--color-brand-blue) !important;
}

/* ── Responsividade ─────────────────────────────────────────── */
@media (max-width: 576px) {
    .tab-item,
    .react-tabs__tab {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}