/* ------------------------------------------------------------------ *
 * Filtros da tela de Itens (Banco de Questões)                        *
 *                                                                     *
 * Um único painel de filtros que se comporta de duas formas:          *
 *  - Desktop (>= md / 62em): card inline com todos os filtros;        *
 *  - Mobile  (<  md / 62em): drawer deslizante à direita, acionado    *
 *    pelo botão da toolbar, com backdrop.                             *
 * ------------------------------------------------------------------ */

/* Toolbar (chips + botão de filtro) só aparece no mobile */
.bq-filters-toolbar {
    display: none;
}

/* ── Desktop: painel inline, sempre visível ───────────────────────── */
@media (min-width: 62em) {
    .bq-filters-panel {
        position: static !important;
        transform: none !important;
    }
    .bq-filters-backdrop {
        display: none !important;
    }
    /* cabeçalho "Filtros" + X do drawer não faz sentido inline */
    .bq-filters-header {
        display: none !important;
    }
}

/* ── Mobile: painel vira drawer off-canvas ────────────────────────── */
@media (max-width: 61.99em) {
    .bq-filters-toolbar {
        display: flex;
    }

    .bq-filters-panel {
        position: fixed;
        top: 0;
        right: 0;
        height: 100dvh;
        width: min(92vw, 360px);
        margin: 0 !important;
        border-radius: 16px 0 0 16px;
        transform: translateX(105%);
        transition: transform 0.25s ease;
        z-index: 1300;
        overflow-y: auto;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
    }

    .bq-filters-panel.bq-open {
        transform: translateX(0);
    }

    .bq-filters-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(2px);
        z-index: 1200;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .bq-filters-backdrop.bq-open {
        opacity: 1;
        pointer-events: auto;
    }
}