/* ============================================================
 * FFB Admin Patch v5 — abas com presenca visual + icones restaurados
 * 2026-04-23
 * Carregar DEPOIS de v4.
 *
 * Corrige v4:
 *  - Regras de hide eram amplas demais e esconderam icones tematicos
 *    das abas (envelope, lista, grafico). Aqui restauramos.
 *  - Abas ficaram texto puro no v4. Aqui damos presenca de botao
 *    (borda sutil + bg claro + hover azul + lift).
 * ============================================================ */

/* ---- 1. Restaura icones tematicos das abas ---- */
/* v4 escondia qualquer img[src*='tab_'] ou [src*='menu_'].
 * Esses nomes casam com icones reais (ex: menu_newsletters.gif).
 * Aqui FORCA display dos icones genuinos. */

.menuBar img {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    opacity: 0.85 !important;
    margin: 0 4px 0 0 !important;
    vertical-align: middle !important;
    border: 0 !important;
}

/* Re-hide apenas o chrome 3-part de tab legado (backgrounds, nao icones):
 * Interspire usa mnu_on_left.gif / mnu_on_middle.gif / mnu_on_right.gif
 * e mnu_off_* / mnu_hover_*. Nomes sao especificos - match por sufixo. */
.menuBar img[src$='mnu_on_left.gif'],
.menuBar img[src$='mnu_on_middle.gif'],
.menuBar img[src$='mnu_on_right.gif'],
.menuBar img[src$='mnu_off_left.gif'],
.menuBar img[src$='mnu_off_middle.gif'],
.menuBar img[src$='mnu_off_right.gif'],
.menuBar img[src$='mnu_hover_left.gif'],
.menuBar img[src$='mnu_hover_middle.gif'],
.menuBar img[src$='mnu_hover_right.gif'],
.menuBar img[src$='tab_left.gif'],
.menuBar img[src$='tab_middle.gif'],
.menuBar img[src$='tab_right.gif'],
.menuBar img[src$='tab-left.gif'],
.menuBar img[src$='tab-middle.gif'],
.menuBar img[src$='tab-right.gif'] {
    display: none !important;
}

/* Setinha down do dropdown das abas — discreta mas visivel */
.menuBar img[src*='arrow_down'] {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    opacity: 0.55 !important;
    margin-left: 6px !important;
    /* ja visivel pelo filter do v3, so garantindo tamanho */
}

/* ---- 2. Abas com presenca visual (botao pill com borda e bg) ---- */

.menuBar {
    padding: 14px 24px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.menuBar > div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    max-width: 1400px;
    margin: 0 auto;
}

/* Cada aba = pill com borda sutil + bg claro + shadow minima.
 * Hover = bg azul-clarissimo + borda azul + eleva. */
.menuBar a,
.menuBar .PopDownMenu,
.menuBar a.PopDownMenu,
.menuBar td > a,
.menuBar > div > a {
    background: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    margin: 0 !important;
    color: #374151 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    min-height: 42px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    transition: background 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease,
                transform 0.15s ease !important;
    cursor: pointer !important;
}

.menuBar a:hover,
.menuBar .PopDownMenu:hover,
.menuBar td > a:hover {
    background: #EFF6FF !important;
    border-color: #93C5FD !important;
    color: #2351E5 !important;
    box-shadow: 0 2px 8px rgba(35, 81, 229, 0.12) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Aba ativa / dropdown aberto — destaque azul FFB */
.menuBar a.active,
.menuBar a.selected,
.menuBar .dropselected,
.menuBar td.dropselected,
.menuBar td.dropselected > a,
.menuBar td.dropselected > .PopDownMenu,
.menuBar .dropselected .PopDownMenu {
    background: #EFF6FF !important;
    border-color: #2351E5 !important;
    color: #1e45c2 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(35, 81, 229, 0.18) !important;
}

/* Icones tematicos dentro de pill ativa: tint azul */
.menuBar a.active img,
.menuBar .dropselected img {
    opacity: 1 !important;
}