@layer components {
  /* ── Filter Bar ───────────────────────────────────────── */
  .admin-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
  }

  .admin-filters__left {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }

  .admin-filters__tabs {
    display: inline-flex;
    background-color: var(--admin-surface-low);
    border-radius: var(--radius-lg);
    padding: 0.1875rem;
  }

  .admin-filters__tab {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--admin-on-surface-variant);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast),
                color var(--transition-fast);

    &:hover {
      color: var(--admin-on-surface);
    }
  }

  .admin-filters__tab--active {
    background-color: var(--admin-surface-container);
    color: var(--admin-on-surface);
    box-shadow: var(--shadow-sm);
  }

  .admin-filters__search {
    position: relative;

    & svg {
      position: absolute;
      left: var(--space-md);
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      height: 1rem;
      color: var(--admin-on-surface-variant);
    }
  }

  .admin-filters__search-input {
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-2xl);
    font-size: var(--text-sm);
    border: 1px solid var(--admin-ghost-border);
    border-radius: var(--radius-lg);
    background-color: var(--admin-surface-container);
    color: var(--admin-on-surface);
    min-width: 16rem;
    transition: border-color var(--transition-fast);

    &::placeholder {
      color: var(--admin-on-surface-variant);
    }

    &:focus {
      outline: none;
      border-color: var(--admin-primary);
    }
  }

  .admin-filters__count {
    font-size: var(--text-sm);
    color: var(--admin-on-surface-variant);
    white-space: nowrap;
  }

  /* ── Pagination ───────────────────────────────────────── */
  .admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-lg);
  }

  .admin-pagination__pages {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .admin-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--space-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--admin-on-surface);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);

    &:hover {
      background-color: var(--admin-surface-low);
    }
  }

  .admin-pagination__page--active {
    background-color: var(--admin-primary);
    color: var(--admin-on-primary);

    &:hover {
      background-color: var(--admin-primary);
    }
  }

  .admin-pagination__page--ellipsis {
    pointer-events: none;
    color: var(--admin-on-surface-variant);
  }

  .admin-pagination__nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--admin-on-surface);
    text-decoration: none;
    border: 1px solid var(--admin-ghost-border);
    border-radius: var(--radius-lg);
    background: var(--admin-surface-container);
    transition: background-color var(--transition-fast);

    &:hover {
      background-color: var(--admin-surface-low);
    }

    &[disabled], &.disabled {
      opacity: 0.4;
      pointer-events: none;
    }
  }

}