/*
 * FrontHub Filter Style Restore v91
 *
 * IMPORTANT:
 * No new filtering JavaScript.
 * fronthub-home.js already owns the working filter and writes
 * .fh-category-active on the selected button.
 *
 * We intentionally IGNORE legacy .is-active for color, because the original
 * Blade markup contains All tools is-active and that stale class is what kept
 * All tools blue.
 */

/* Every category button is neutral by default. */
#toolFilters .fh-filter[data-category]{
    background:#fff!important;
    background-color:#fff!important;
    color:#0f172a!important;
    border-color:#dfe4ec!important;
    box-shadow:none!important;
}

/* Only fronthub-home.js's authoritative selected class is blue. */
#toolFilters .fh-filter[data-category].fh-category-active{
    background:linear-gradient(135deg,#5b5cf0,#349cf2)!important;
    background-color:#5b5cf0!important;
    color:#fff!important;
    border-color:transparent!important;
    box-shadow:0 6px 16px rgba(70,91,220,.18)!important;
}

/*
 * Restore original card gradients.
 * fronthub-home.js already toggles .fh-filter-all on #toolsGrid and manages
 * the selected-category visual state.  The rules below make the intended
 * result explicit without owning filtering.
 */

/* All tools selected: every visible card is blue. */
#toolsGrid.fh-filter-all .fh-tool-card:not([hidden]){
    background:linear-gradient(135deg,#5960ef 0%,#329cf1 100%)!important;
    border-color:transparent!important;
    box-shadow:0 12px 24px rgba(61,91,220,.16)!important;
}

/*
 * Specific category:
 * fronthub-home.js hides non-matching cards. Therefore every visible card
 * under a non-All grid is a selected-category card.
 */
#toolsGrid:not(.fh-filter-all) .fh-tool-card:not([hidden]){
    background:linear-gradient(135deg,#5960ef 0%,#329cf1 100%)!important;
    border-color:transparent!important;
    box-shadow:0 12px 24px rgba(61,91,220,.16)!important;
}

#toolsGrid .fh-tool-card:not([hidden]) h2,
#toolsGrid .fh-tool-card:not([hidden]) h3,
#toolsGrid .fh-tool-card:not([hidden]) h4,
#toolsGrid .fh-tool-card:not([hidden]) p,
#toolsGrid .fh-tool-card:not([hidden]) span,
#toolsGrid .fh-tool-card:not([hidden]) small{
    color:#fff!important;
}

/* Keep chips/arrows legible. */
#toolsGrid .fh-tool-card:not([hidden]) .fh-tool-arrow,
#toolsGrid .fh-tool-card:not([hidden]) .fh-tool-icon{
    color:#fff!important;
}

/* Dark mode: neutral (unselected) filter buttons follow dark theme. */
html[data-theme="dark"] #toolFilters .fh-filter[data-category]:not(.fh-category-active),
html.dark #toolFilters .fh-filter[data-category]:not(.fh-category-active),
body.dark #toolFilters .fh-filter[data-category]:not(.fh-category-active),
body.dark-mode #toolFilters .fh-filter[data-category]:not(.fh-category-active){
    background:#111827!important;
    background-color:#111827!important;
    color:#e5e7eb!important;
    border-color:#334155!important;
}

/* Selected category remains blue in dark mode. */
html[data-theme="dark"] #toolFilters .fh-filter[data-category].fh-category-active,
html.dark #toolFilters .fh-filter[data-category].fh-category-active,
body.dark #toolFilters .fh-filter[data-category].fh-category-active,
body.dark-mode #toolFilters .fh-filter[data-category].fh-category-active{
    background:linear-gradient(135deg,#5b5cf0,#349cf2)!important;
    color:#fff!important;
    border-color:transparent!important;
}