/*
--------------------------------------------------------------------------
Customizações Unitá para GLPI - Insights
--------------------------------------------------------------------------
*/

/* Força o ícone do card do plugin DARKMODE (GLPI 10.x) */
li.plugin[data-key="insights"] span.icon {
    background: none !important;
}

li.plugin[data-key="insights"] span.icon::before {
    content: "";
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url("/plugins/insights/pics/logo.gif") no-repeat center/contain;
}

/* esconde a letra/placeholder */
li.plugin[data-key="insights"] span.icon .icon-text {
    display: none !important;
}

/* (opcional) melhora contraste em tema escuro */
@media (prefers-color-scheme: dark) {
    li.plugin[data-key="insights"] span.icon::before {
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
    }
}

/*
--------------------------------------------------------------------------
Anti-FOUC dos filtros: enquanto o Select2 não inicializa, o <select multiple>
nativo é renderizado como uma listbox expandida (feia). Quando o JS está ativo
(html.insights-js), escondemos o select nativo e mostramos um placeholder que
imita a caixa final do Select2, evitando o "salto" visual no carregamento.
Sem JS, o select nativo continua visível e funcional (degradação graciosa).
--------------------------------------------------------------------------
*/
html.insights-js .insights-advanced-filters select.insights-select2-filter:not(.select2-hidden-accessible) {
    display: none !important;
}

.insights-select2-placeholder {
    display: none;
}

html.insights-js .insights-select2-group .insights-select2-placeholder {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--main-detach-color, #d6deea);
    border-radius: 12px;
    box-sizing: border-box;
    color: var(--main-secondary-color, #64748b);
    display: flex;
    font-size: 13px;
    height: 42px;
    justify-content: space-between;
    padding: 9px 12px;
    width: 100%;
}

html.insights-js .insights-select2-group .insights-select2-placeholder i {
    color: var(--main-secondary-color, #64748b);
    font-size: 16px;
}