/* ============================================================
   FILTER PANEL — боковая панель фильтра (full-height, справа)
   ============================================================ */
.filter-panel
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   width: 22rem;
   background: var(--bg-surface);
   border-left: 0.0625rem solid var(--border-color);
   box-shadow: var(--shadow-lg);
   z-index: 400;
   display: flex;
   flex-direction: column;
   transform: translateX(100%);
   transition: transform var(--transition-slow);
}

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

/* Шапка */
.filter-panel__header
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-5) var(--space-6);
   border-bottom: 0.0625rem solid var(--border-color);
   flex-shrink: 0;
}

.filter-panel__title
{
   font-size: var(--font-size-lg);
   font-weight: 600;
   color: var(--text-primary);
   display: flex;
   align-items: center;
   gap: var(--space-2);
}

.filter-panel__title svg
{
   width: 1.125rem;
   height: 1.125rem;
   color: var(--accent);
}

.filter-panel__close
{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2rem;
   height: 2rem;
   border-radius: var(--border-radius);
   color: var(--text-muted);
   transition: background var(--transition), color var(--transition);
   cursor: pointer;
}

.filter-panel__close:hover
{
   background: var(--accent-light);
   color: var(--text-primary);
}

.filter-panel__close svg
{
   width: 1.125rem;
   height: 1.125rem;
}

/* Тело */
.filter-panel__body
{
   flex: 1;
   overflow-y: auto;
   padding: var(--space-6);
   display: flex;
   flex-direction: column;
   gap: var(--space-5);
}

/* Группа фильтра */
.filter-group
{
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
}

.filter-group__title
{
   font-size: var(--font-size-xs);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-muted);
   padding-bottom: var(--space-2);
   border-bottom: 0.0625rem solid var(--border-color);
}

/* Диапазон дат */
.filter-date-range
{
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-3);
}

/* Подвал */
.filter-panel__footer
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
   padding: var(--space-4) var(--space-6);
   border-top: 0.0625rem solid var(--border-color);
   flex-shrink: 0;
}

/* Активные фильтры (чипы) в тулбаре */
.filter-chips
{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--space-2);
}

/* Бейдж — количество активных фильтров */
.filter-count
{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 0.7rem;
   height: 0.7rem;
   padding: 0;
   border-radius: 50%;
   background: var(--accent);
   color: var(--text-inverse);
   font-size: 0;
   font-weight: 700;
   line-height: 1;
}

/* Оверлей */
.filter-overlay
{
   display: none;
   position: fixed;
   inset: 0;
   background: var(--bg-overlay);
   z-index: 399;
}

.filter-overlay.visible
{
   display: block;
}

/* Мобильный */
@media (max-width: 49.9375rem)
{
   .filter-panel
   {
      width: 100%;
      border-left: none;
   }
}