:root{
  --it-filter-width: 320px;   /* largura da gaveta quando ABERTA */
  --it-left: 0px;             /* offset à esquerda (JS ajusta) */
  --it-top: 0px;              /* offset do topo (JS ajusta) */
}

/* Painel de filtros vira off-canvas FIXO na ESQUERDA */
#changelist-filter{
  position: fixed;
  left: var(--it-left);
  top: var(--it-top);
  height: calc(100vh - var(--it-top));
  width: var(--it-filter-width);
  max-width: 90vw;
  background: #fff;
  overflow: auto;
  z-index: 1030;
  box-shadow: 2px 0 10px rgba(0,0,0,.08);
  will-change: transform;
  transition: transform .25s ease, left .2s ease, top .2s ease, height .2s ease;
  transform: translateX(-100%);            /* FECHADA = fora da tela à ESQUERDA */
}

/* ABERTA = totalmente visível (sem “correr para a direita”) */
#changelist-filter.is-open{
  transform: translateX(0);
}

/* (opcional) empurrar conteúdo quando ABERTO em telas largas */
@media (min-width: 1100px){
  body.it-filter-open .change-list{
    margin-left: var(--it-filter-width);
    transition: margin-left .25s ease;
  }
}

/* Botão com ícone ao lado da busca (único botão) */
.it-filter-icon-btn{
  display: inline-flex; align-items: center; gap: .4rem;
  border: 0; border-radius: 8px; padding: 6px 10px;
  background: var(--header-bg, #78adc6); color: #fff;
  cursor: pointer; font-weight: 600; line-height: 1;
}
.it-filter-icon-btn svg{ width:16px; height:16px; display:inline-block; }
#changelist-search{ display:inline-flex; align-items:center; gap:.5rem; }

/* Esconde visualmente o botão nativo, mas deixa no DOM para .click() */
#toggle-filters,
#changelist-filter-toggle,
button[data-toggle="filters"],
button.toggle-filters,
a.toggle-filters,
a[aria-controls="changelist-filter"],
a[href="#changelist-filter"]{
  opacity: 0 !important;
  pointer-events: none !important; /* usuário não clica */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* ---- Painel de Filtros: abre da direita ---- */
#changelist-filter {
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%) !important;  /* escondido fora da tela, à direita */
  transition: transform 0.25s ease;
}

/* Quando aberto */
#changelist-filter.is-open,
body.filters-shown #changelist-filter {
  transform: translateX(0) !important;     /* desliza para dentro da direita */
}

/* Corrige z-index e sombra */
#changelist-filter {
  z-index: 1030 !important;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
  background: #fff;
}

/* Se o tema aplicar overlay */
body.filters-shown::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1029;
}